From 0b89abab35f55eb5f714e5765e6f8304bff88f74 Mon Sep 17 00:00:00 2001
From: Paulo Chang <paulo.chang@netcentric.biz>
Date: Wed, 5 Jun 2024 19:13:12 +0200
Subject: [PATCH] Closes #2776 - Retrieve the component's ID from its
 corresponding sling model

---
 .../components/breadcrumb/v2/breadcrumb/breadcrumb.html    | 3 +--
 .../apps/core/wcm/components/button/v1/button/button.html  | 3 +--
 .../v1/contentfragmentlist/contentfragmentlist.html        | 3 +--
 .../core/wcm/components/download/v1/download/download.html | 3 +--
 .../apps/core/wcm/components/embed/v1/embed/embed.html     | 3 +--
 .../v1/experiencefragment/experiencefragment.html          | 7 +++----
 .../apps/core/wcm/components/image/v2/image/image.html     | 3 +--
 .../v1/languagenavigation/languagenavigation.html          | 3 +--
 .../apps/core/wcm/components/list/v2/list/list.html        | 3 +--
 .../wcm/components/separator/v1/separator/separator.html   | 5 ++---
 .../v1/tableofcontents/tableofcontents.html                | 3 +--
 .../apps/core/wcm/components/text/v1/text/text.html        | 2 +-
 .../apps/core/wcm/components/text/v2/text/text.html        | 3 +--
 .../apps/core/wcm/components/title/v2/title/title.html     | 3 +--
 14 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/content/src/content/jcr_root/apps/core/wcm/components/breadcrumb/v2/breadcrumb/breadcrumb.html b/content/src/content/jcr_root/apps/core/wcm/components/breadcrumb/v2/breadcrumb/breadcrumb.html
index f58a2450fb..b23f411ce4 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/breadcrumb/v2/breadcrumb/breadcrumb.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/breadcrumb/v2/breadcrumb/breadcrumb.html
@@ -14,9 +14,8 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <nav data-sly-use.breadcrumb="com.adobe.cq.wcm.core.components.models.Breadcrumb"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-use.template="core/wcm/components/commons/v1/templates.html"
-     id="${component.id}"
+     id="${breadcrumb.id}"
      class="cmp-breadcrumb"
      aria-label="${'Breadcrumb' @ i18n}"
      data-sly-test="${breadcrumb.items.size > 0}"
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/button/v1/button/button.html b/content/src/content/jcr_root/apps/core/wcm/components/button/v1/button/button.html
index de2d7df257..34e5e5e669 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/button/v1/button/button.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/button/v1/button/button.html
@@ -14,11 +14,10 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <button data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button"
-        data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
         data-sly-use.iconTemplate="icon.html"
         data-sly-element="${button.link ? 'a' : 'button'}"
         type="${button.link ? '' : 'button'}"
-        id="${component.id}"
+        id="${button.id}"
         class="cmp-button"
         href="${button.link}"
         aria-label="${button.accessibilityLabel}"
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/contentfragmentlist/v1/contentfragmentlist/contentfragmentlist.html b/content/src/content/jcr_root/apps/core/wcm/components/contentfragmentlist/v1/contentfragmentlist/contentfragmentlist.html
index 091fd96031..a0d7ebd848 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/contentfragmentlist/v1/contentfragmentlist/contentfragmentlist.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/contentfragmentlist/v1/contentfragmentlist/contentfragmentlist.html
@@ -14,10 +14,9 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <sly data-sly-use.list="com.adobe.cq.wcm.core.components.models.contentfragment.ContentFragmentList"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-test="${list.listItems.size>0}" data-sly-use.fragmentTemplate="core/wcm/components/contentfragment/v1/contentfragment/templates.html">
     <section data-sly-list.fragment="${list.listItems}"
-             id="${component.id}"
+             id="${list.id}"
              class="cmp-contentfragmentlist">
         <sly data-sly-call="${fragmentTemplate.contentFragment @ fragment=fragment, wcmmode=wcmmode}"></sly>
     </section>
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/download/v1/download/download.html b/content/src/content/jcr_root/apps/core/wcm/components/download/v1/download/download.html
index fbabad6701..9f4ebb82de 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/download/v1/download/download.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/download/v1/download/download.html
@@ -14,10 +14,9 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <div data-sly-use.download="com.adobe.cq.wcm.core.components.models.Download"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
      data-sly-test.hasContent="${download.filename}"
-     id="${component.id}"
+     id="${download.id}"
      class="cmp-download${!wcmmode.disabled ? ' cq-dd-file' : ''}">
     <h3 class="cmp-download__title" data-sly-test.title="${download.title}" data-sly-element="${download.titleType}">
         <a data-sly-unwrap="${!download.url || download.hideTitleLink}" class="cmp-download__title-link" href="${download.url}" aria-hidden="true" role="presentation">${title}</a>
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/embed/v1/embed/embed.html b/content/src/content/jcr_root/apps/core/wcm/components/embed/v1/embed/embed.html
index 4855548de2..49078bbd58 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/embed/v1/embed/embed.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/embed/v1/embed/embed.html
@@ -14,11 +14,10 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <div data-sly-use.embed="com.adobe.cq.wcm.core.components.models.Embed"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-use.commonsTemplates="core/wcm/components/commons/v1/templates.html"
      data-sly-test.hasContent="${(embed.result && embed.result.processor) || embed.html || embed.embeddableResourceType}"
      data-cmp-data-layer="${embed.data.json}"
-     id="${component.id}"
+     id="${embed.id}"
      class="cmp-embed">
     <sly data-sly-test="${embed.result && embed.result.processor}"
          data-sly-use.processorTemplate="processors/${embed.result.processor}.html"
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/experiencefragment.html b/content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/experiencefragment.html
index b198a5c944..535769e191 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/experiencefragment.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/experiencefragment/v1/experiencefragment/experiencefragment.html
@@ -14,12 +14,11 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <div data-sly-use.fragment="com.adobe.cq.wcm.core.components.models.ExperienceFragment"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-use.template="core/wcm/components/commons/v1/templates.html"
-     data-sly-test=${fragment.configured}
-     data-sly-set.selector="content.${request.requestPathInfo.selectorString}"
+     data-sly-test="${fragment.configured}"
+     data-sly-set.selector="${'content.' @format=request.requestPathInfo.selectorString}"
      data-sly-resource="${@path=fragment.localizedFragmentVariationPath, selectors=selector, wcmmode='disabled'}"
-     id="${component.id}"
+     id="${fragment.id}"
      class="cmp-experiencefragment cmp-experiencefragment--${fragment.name}">
 </div>
 <sly data-sly-call="${template.placeholder @ isEmpty=!fragment.configured, classAppend='cmp-dd-experiencefragment'}"></sly>
\ No newline at end of file
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/image.html b/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/image.html
index 2ba3257d90..ec870eccc6 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/image.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/image.html
@@ -14,7 +14,6 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <div data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
      data-sly-test="${image.src}"
      data-cmp-is="image"
@@ -27,7 +26,7 @@
      data-asset="${image.fileReference}"
      data-asset-id="${image.uuid}"
      data-title="${image.title || image.alt}"
-     id="${component.id}"
+     id="${image.id}"
      data-cmp-data-layer="${image.data.json}"
      class="cmp-image${!wcmmode.disabled ? ' cq-dd-image' : ''}"
      itemscope itemtype="http://schema.org/ImageObject">
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/languagenavigation/v1/languagenavigation/languagenavigation.html b/content/src/content/jcr_root/apps/core/wcm/components/languagenavigation/v1/languagenavigation/languagenavigation.html
index 2b582965a5..7cbe1061d1 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/languagenavigation/v1/languagenavigation/languagenavigation.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/languagenavigation/v1/languagenavigation/languagenavigation.html
@@ -14,13 +14,12 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <nav data-sly-use.languageNavigation="com.adobe.cq.wcm.core.components.models.LanguageNavigation"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-use.commonsTemplates="core/wcm/components/commons/v1/templates.html"
      data-sly-use.groupTemplate="group.html"
      data-sly-call="${groupTemplate.group @ items=languageNavigation.items}"
      data-sly-test.hasContent="${languageNavigation.items.size > 0}"
 	 data-cmp-data-layer="${languageNavigation.data.json}"
-     id="${component.id}"
+     id="${languageNavigation.id}"
      class="cmp-languagenavigation"
      aria-label="${languageNavigation.accessibilityLabel}">
 </nav>
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/list/v2/list/list.html b/content/src/content/jcr_root/apps/core/wcm/components/list/v2/list/list.html
index af4fade16e..da22672058 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/list/v2/list/list.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/list/v2/list/list.html
@@ -14,11 +14,10 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <ul data-sly-use.list="com.adobe.cq.wcm.core.components.models.List"
-    data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
     data-sly-use.template="core/wcm/components/commons/v1/templates.html"
     data-sly-use.itemTemplate="item.html"
     data-sly-list.item="${list.listItems}"
-    id="${component.id}"
+    id="${list.id}"
     data-cmp-data-layer="${list.data.json}"
     class="cmp-list">
     <li class="cmp-list__item" data-sly-call="${itemTemplate.item @ list = list, item = item}"
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/separator/v1/separator/separator.html b/content/src/content/jcr_root/apps/core/wcm/components/separator/v1/separator/separator.html
index 1350b802ea..b452fb2184 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/separator/v1/separator/separator.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/separator/v1/separator/separator.html
@@ -13,9 +13,8 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
-<div data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
-     data-sly-use.separator="com.adobe.cq.wcm.core.components.models.Separator"
-     id="${component.id}"
+<div data-sly-use.separator="com.adobe.cq.wcm.core.components.models.Separator"
+     id="${separator.id}"
      class="cmp-separator">
     <hr class="cmp-separator__horizontal-rule"
         data-sly-attribute.role="${separator.decorative ? 'none': ''}"
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/tableofcontents/v1/tableofcontents/tableofcontents.html b/content/src/content/jcr_root/apps/core/wcm/components/tableofcontents/v1/tableofcontents/tableofcontents.html
index 2814ef6afe..02edcde390 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/tableofcontents/v1/tableofcontents/tableofcontents.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/tableofcontents/v1/tableofcontents/tableofcontents.html
@@ -14,9 +14,8 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <div data-sly-use.toc="com.adobe.cq.wcm.core.components.models.TableOfContents"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      class = "cmp-toc__placeholder"
-     id = "${component.id}"
+     id = "${toc.id}"
      data-cmp-toc-list-type = "${toc.listType && toc.listType.value}"
      data-cmp-toc-start-level = "${toc.startLevel && toc.startLevel.value}"
      data-cmp-toc-stop-level = "${toc.stopLevel && toc.stopLevel.value}"
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/text/v1/text/text.html b/content/src/content/jcr_root/apps/core/wcm/components/text/v1/text/text.html
index 31a98ddd40..c145800903 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/text/v1/text/text.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/text/v1/text/text.html
@@ -15,5 +15,5 @@
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <sly data-sly-use.textModel="com.adobe.cq.wcm.core.components.models.Text"
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"/>
-<p data-sly-test.text="${textModel.text}" data-sly-unwrap="${textModel.isRichText}">${text @ context = textModel.isRichText ? 'html' : 'text'}</p>
+<p data-sly-test.text="${textModel.id}" data-sly-unwrap="${textModel.isRichText}">${text @ context = textModel.isRichText ? 'html' : 'text'}</p>
 <sly data-sly-call="${templates.placeholder @ isEmpty = !text}"></sly>
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/text/v2/text/text.html b/content/src/content/jcr_root/apps/core/wcm/components/text/v2/text/text.html
index 2443a03ff9..3e352aaa28 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/text/v2/text/text.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/text/v2/text/text.html
@@ -14,11 +14,10 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <div data-sly-use.textModel="com.adobe.cq.wcm.core.components.models.Text"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
      data-sly-test.text="${textModel.text}"
      data-cmp-data-layer="${textModel.data.json}"
-     id="${component.id}"
+     id="${textModel.id}"
      class="cmp-text">
     <p class="cmp-text__paragraph"
        data-sly-unwrap="${textModel.isRichText}">${text @ context = textModel.isRichText ? 'html' : 'text'}</p>
diff --git a/content/src/content/jcr_root/apps/core/wcm/components/title/v2/title/title.html b/content/src/content/jcr_root/apps/core/wcm/components/title/v2/title/title.html
index 05e50df2c2..ee00054996 100644
--- a/content/src/content/jcr_root/apps/core/wcm/components/title/v2/title/title.html
+++ b/content/src/content/jcr_root/apps/core/wcm/components/title/v2/title/title.html
@@ -14,11 +14,10 @@
   ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
 <div data-sly-use.title="com.adobe.cq.wcm.core.components.models.Title"
-     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
      data-sly-use.template="core/wcm/components/commons/v1/templates.html"
      data-sly-test.text="${title.text}"
      data-cmp-data-layer="${title.data.json}"
-     id="${component.id}"
+     id="${title.id}"
      class="cmp-title">
     <h1 class="cmp-title__text" data-sly-element="${title.type}"><a
             data-sly-unwrap="${!title.linkURL || title.linkDisabled}" class="cmp-title__link"