@sapudex/web-components 0.111.0 → 0.114.2

package/src/CountrySelector.ts

@@ -7,6 +7,7 @@ import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTempla
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
 import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
 import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
@@ -23,12 +24,6 @@ import UDExListItem from "./ListItem.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import TextField from "./TextField.js";
 
-type CountryItem = {
-  label: any,
-  content: any,
-  _id: any
-}
-
 /**
  * @class
  *
@@ -163,14 +158,6 @@ class CountrySelector extends UDExSearchableListBase {
   @property({ type: Boolean })
     required!: boolean;
 
-  /**
-   * Allows control over the width.
-   *
-   * @public
-   */
-  @property({ type: String })
-    width?: string;
-
   /**
    * Allows control over the height.
    *
@@ -258,6 +245,8 @@ class CountrySelector extends UDExSearchableListBase {
   _dropdown!: UDExDropdown;
   _search!: Search;
 
+  _handleResizeBound: ResizeObserverCallback;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
@@ -267,9 +256,18 @@ class CountrySelector extends UDExSearchableListBase {
   constructor() {
     super();
     this._shouldFilterItems = false;
+    this._handleResizeBound = this._handleResize.bind(this);
     this._filteredItems = [];
   }
 
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
   onBeforeRendering(): void {
     if (this.blockedCountryCodes?.length) {
       const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
@@ -319,15 +317,15 @@ class CountrySelector extends UDExSearchableListBase {
     return SearchableListBaseTemplate;
   }
 
+  _handleResize() {
+    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+  }
+
   get ariaControls(): string | null | undefined {
     const list = this.shadowRoot!.querySelector<UDExList>("udex-list");
     return list?.getAttribute("id");
   }
 
-  get holderWidth() {
-    return this.width ? this.width : "auto";
-  }
-
   get selectedCountryFlagX() {
     return this.selectedCountry?.flagX;
   }
@@ -444,10 +442,10 @@ class CountrySelector extends UDExSearchableListBase {
       const selected = country.iso.toUpperCase() === this.selectedCountry.iso.toUpperCase();
       this.items.push({
         label: this.getCountryLabel(country.countryName, country.localName),
-        content: this.getItemTemplate(country),
+        innerHTML: this.getItemTemplate(country),
         selected,
         _id: country.iso.toUpperCase(),
-      } as CountryItem as UDExListItem);
+      } as UDExListItem);
     });
   }
 

package/src/Dropdown.ts

@@ -225,11 +225,21 @@ class UDExDropdown extends UI5Element {
     }
   }
 
+  /**
+   * Open dropdown
+   *
+   * @public
+   */
   onOpen(opener: HTMLElement): void {
     const dropdown = this.getDropdownPane();
     dropdown.showAt(opener);
   }
 
+  /**
+   * Close dropdown
+   *
+   * @public
+   */
   onClose():void {
     const dropdown = this.getDropdownPane();
     dropdown.close(true);

package/src/Footer.hbs

@@ -5,7 +5,7 @@
         {{#if logoUrl}}
           <div class="udex-footer__logo">
             {{#if logoLink}}
-            <a href="{{parsedRef}}">
+            <a href="{{parsedRef}}" @click="{{_onLogoClick}}">
               <img id="udex-footer__logo-image" src="{{logoUrl}}" class="udex-footer__logo-image" alt="{{logoAlt}}"/>
             </a>
             {{else}}
@@ -27,7 +27,7 @@
                     <div>
                       <span class="hidden" aria-hidden id="udex-footer__{{@index}}_phone-label">{{../phoneNumberAccessibleName}} {{this.country}} : {{this.number}}</span>
                       <p class="udex-footer__country">{{this.country}}</p>
-                      <a href="tel:{{this.number}}" class="udex-footer__number" aria-labelledby="udex-footer__{{@index}}_phone-label">
+                      <a href="tel:{{this.number}}" class="udex-footer__number" @click="{{../_onContactPhoneClick}}" aria-labelledby="udex-footer__{{@index}}_phone-label">
                         {{this.number}}
                       </a>
                     </div>
@@ -36,7 +36,7 @@
                 {{#if localCountryNumbersLink}}
                   <p class="udex-footer__remark">
                     {{completeListTitle}}
-                    <a href="{{this.localCountryNumbersLink}}">
+                    <a href="{{this.localCountryNumbersLink}}" @click="{{_onContactPhoneLocalNumbersClick}}">
                       {{localCountryTitle}}.
                     </a>
                   </p>
@@ -52,7 +52,12 @@
                   <ui5-icon class="udex-footer__icon" name="email"></ui5-icon>
                 </div>
                 <span class="hidden" aria-hidden id="udex-footer__contact-us-label">{{contactUsAccessibleLabel}}</span>
-                <a href="{{contactUsLink}}" class="udex-footer__contact-us-link"  aria-labelledby="udex-footer__contact-us-label">{{contactUsAccessibleName}}</a>
+                <a
+                  href="{{contactUsLink}}"
+                  class="udex-footer__contact-us-link"
+                  aria-labelledby="udex-footer__contact-us-label"
+                  @click="{{_onContactEmailClick}}"
+                >{{contactUsAccessibleName}}</a>
               </div>
           </div>
           {{/if}}
@@ -62,7 +67,7 @@
               <div class="udex-footer__icon-container">
                 <ui5-icon class="udex-footer__icon" name="discussion-2"></ui5-icon>
               </div>
-              <a href="{{chatWithUsLink}}" class="udex-footer__chat-with-us-link">{{chatWithUsAccessibleName}}</a>
+              <a href="{{chatWithUsLink}}" class="udex-footer__chat-with-us-link" @click="{{_onContactChatClick}}">{{chatWithUsAccessibleName}}</a>
             </div>
           </div>
           {{/if}}
@@ -75,7 +80,12 @@
           <div class="udex-footer__social-container">
             {{#each socialLinksArray}}
               <div>
-                <a href="{{this.url}}" class="udex-footer__social-icon">
+                <a
+                  href="{{this.url}}"
+                  class="udex-footer__social-icon"
+                  data-name="{{this.name}}"
+                  @click="{{../_onSocialMediaLinkClick}}"
+                >
                   <img
                     alt="{{this.name}} {{../socialIconAccessibleName}}"
                     title="{{this.name}}"
@@ -107,7 +117,12 @@
         <div class="udex-footer__social-container">
           {{#each socialLinksArray}}
             <div>
-              <a href="{{this.url}}" class="udex-footer__social-icon">
+              <a
+                href="{{this.url}}"
+                class="udex-footer__social-icon"
+                data-name="{{this.name}}"
+                @click="{{../_onSocialMediaLinkClick}}"
+              >
                 <img
                   alt="{{this.name}} {{../socialIconAccessibleName}}"
                   src="{{this.iconUrl}}"
@@ -132,94 +147,142 @@
 </footer>
 
 {{#*inline "mobile-navigation"}}
-    <udex-accordion class="udex-footer__accordion">
-        {{#if quickLinksArray.length}}
-            <udex-accordion-item title="{{quickLinksTitle}}" class="udex-footer__action-item">
-              <ul class="udex-footer__links-list udex-footer__links-list--mobile">
-                {{#each ../quickLinksArray}}
-                  <li><a aria-describedby="udex-footer__quick-links" href="{{this.url}}">{{this.title}}</a></li>
-                {{/each}}
-              </ul>
-            </udex-accordion-item>
-            <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
-        {{/if}}
+  <udex-accordion class="udex-footer__accordion">
+      {{#if quickLinksArray.length}}
+          <udex-accordion-item title="{{quickLinksTitle}}" class="udex-footer__action-item">
+            <ul class="udex-footer__links-list udex-footer__links-list--mobile">
+              {{#each ../quickLinksArray}}
+                <li>
+                  <a
+                    aria-describedby="udex-footer__quick-links"
+                    href="{{this.url}}"
+                    @click="{{../_onQuickLinksClick}}"
+                  >{{this.title}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          </udex-accordion-item>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
+      {{/if}}
 
-        {{#if trendingLinksArray.length}}
-            <udex-accordion-item title="{{trendingTitle}}" class="udex-footer__action-item">
-              <ul class="udex-footer__links-list udex-footer__links-list--mobile">
-                {{#each trendingLinksArray}}
-                  <li><a aria-describedby="udex-footer__trending" href="{{this.url}}">{{this.title}}</a></li>
-                {{/each}}
-              </ul>
-            </udex-accordion-item>
-            <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__trending">{{trendingTitle}}</h3>
-        {{/if}}
+      {{#if trendingLinksArray.length}}
+          <udex-accordion-item title="{{trendingTitle}}" class="udex-footer__action-item">
+            <ul class="udex-footer__links-list udex-footer__links-list--mobile">
+              {{#each trendingLinksArray}}
+                <li>
+                  <a
+                    aria-describedby="udex-footer__footer__trending"
+                    href="{{this.url}}"
+                    @click="{{../_onTrendingClick}}"
+                  >{{this.title}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          </udex-accordion-item>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__trending">{{trendingTitle}}</h3>
+      {{/if}}
 
-        {{#if aboutLinksArray.length}}
-            <udex-accordion-item title="{{aboutSapTitle}}" class="udex-footer__action-item">
-              <ul class="udex-footer__links-list udex-footer__links-list--mobile">
-                {{#each aboutLinksArray}}
-                  <li><a aria-describedby="udex-footer__about" href="{{this.url}}">{{this.title}}</a></li>
-                {{/each}}
-              </ul>
-            </udex-accordion-item>
-            <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__about">{{aboutSapTitle}}</h3>
-        {{/if}}
+      {{#if aboutLinksArray.length}}
+          <udex-accordion-item title="{{aboutSapTitle}}" class="udex-footer__action-item">
+            <ul class="udex-footer__links-list udex-footer__links-list--mobile">
+              {{#each aboutLinksArray}}
+                <li>
+                  <a
+                    aria-describedby="udex-footer__about"
+                    href="{{this.url}}"
+                    @click="{{../_onAboutSapClick}}"
+                  >{{this.title}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          </udex-accordion-item>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__about">{{aboutSapTitle}}</h3>
+      {{/if}}
 
-        {{#if siteInformationLinksArray.length}}
-            <udex-accordion-item title="{{siteInformationTitle}}" class="udex-footer__action-item">
-              <ul class="udex-footer__links-list udex-footer__links-list--mobile">
-                {{#each siteInformationLinksArray}}
-                  <li><a  aria-describedby="udex-footer__site-information" href="{{this.url}}">{{this.title}}</a></li>
-                {{/each}}
-              </ul>
-            </udex-accordion-item>
-            <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
-        {{/if}}
-    </udex-accordion>
+      {{#if siteInformationLinksArray.length}}
+          <udex-accordion-item title="{{siteInformationTitle}}" class="udex-footer__action-item">
+            <ul class="udex-footer__links-list udex-footer__links-list--mobile">
+              {{#each siteInformationLinksArray}}
+                <li>
+                  <a
+                    aria-describedby="udex-footer__site-information"
+                    href="{{this.url}}"
+                    @click="{{../_onSiteInformationClick}}"
+                  >{{this.title}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          </udex-accordion-item>
+          <h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
+      {{/if}}
+  </udex-accordion>
 {{/inline}}
 
 {{#*inline "desktop-navigation"}}
-    <div class="udex-footer__links">
-        {{#if quickLinksArray.length}}
-            <div class="udex-footer__links-group udex-footer__quick-links">
-                <h3 class="udex-footer__links-item" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
-                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
-                    {{#each quickLinksArray}}
-                        <li><a aria-describedby="udex-footer__quick-links" href="{{this.url}}">{{this.title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-        {{/if}}
-        {{#if trendingLinksArray.length}}
-            <div class="udex-footer__links-group udex-footer__trending-links">
-                <h3 class="udex-footer__links-item" id="udex-footer__trending">{{trendingTitle}}</h3>
-                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
-                    {{#each trendingLinksArray}}
-                        <li><a aria-describedby="udex-footer__trending" href="{{this.url}}">{{this.title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-        {{/if}}
-        {{#if aboutLinksArray.length}}
-            <div class="udex-footer__links-group udex-footer__about-links">
-                <h3 class="udex-footer__links-item" id="udex-footer__about">{{aboutSapTitle}}</h3>
-                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
-                    {{#each aboutLinksArray}}
-                        <li><a aria-describedby="udex-footer__about" href="{{this.url}}">{{this.title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-        {{/if}}
-        {{#if siteInformationLinksArray.length}}
-            <div class="udex-footer__links-group udex-footer__site-information-links">
-                <h3 class="udex-footer__links-item" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
-                <ul class="udex-footer__links-list udex-footer__links-list--desktop">
-                    {{#each siteInformationLinksArray}}
-                        <li><a aria-describedby="udex-footer__site-information" href="{{this.url}}">{{this.title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-        {{/if}}
-    </div>
+  <div class="udex-footer__links">
+      {{#if quickLinksArray.length}}
+          <div class="udex-footer__links-group udex-footer__quick-links">
+              <h3 class="udex-footer__links-item" id="udex-footer__quick-links">{{quickLinksTitle}}</h3>
+              <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                  {{#each quickLinksArray}}
+                    <li>
+                      <a
+                        aria-describedby="udex-footer__quick-links"
+                        href="{{this.url}}"
+                        @click="{{../_onQuickLinksClick}}"
+                      >{{this.title}}</a>
+                    </li>
+                  {{/each}}
+              </ul>
+          </div>
+      {{/if}}
+      {{#if trendingLinksArray.length}}
+          <div class="udex-footer__links-group udex-footer__trending-links">
+              <h3 class="udex-footer__links-item" id="udex-footer__trending">{{trendingTitle}}</h3>
+              <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                  {{#each trendingLinksArray}}
+                    <li>
+                      <a
+                        aria-describedby="udex-footer__footer__trending"
+                        href="{{this.url}}"
+                        @click="{{../_onTrendingClick}}"
+                      >{{this.title}}</a>
+                    </li>
+                  {{/each}}
+              </ul>
+          </div>
+      {{/if}}
+      {{#if aboutLinksArray.length}}
+          <div class="udex-footer__links-group udex-footer__about-links">
+              <h3 class="udex-footer__links-item" id="udex-footer__about">{{aboutSapTitle}}</h3>
+              <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                  {{#each aboutLinksArray}}
+                    <li>
+                      <a
+                        aria-describedby="udex-footer__about"
+                        href="{{this.url}}"
+                        @click="{{../_onAboutSapClick}}"
+                      >{{this.title}}</a>
+                    </li>
+                  {{/each}}
+              </ul>
+          </div>
+      {{/if}}
+      {{#if siteInformationLinksArray.length}}
+          <div class="udex-footer__links-group udex-footer__site-information-links">
+              <h3 class="udex-footer__links-item" id="udex-footer__site-information">{{siteInformationTitle}}</h3>
+              <ul class="udex-footer__links-list udex-footer__links-list--desktop">
+                  {{#each siteInformationLinksArray}}
+                    <li>
+                      <a
+                        aria-describedby="udex-footer__site-information"
+                        href="{{this.url}}"
+                        @click="{{../_onSiteInformationClick}}"
+                      >{{this.title}}</a>
+                    </li>
+                  {{/each}}
+              </ul>
+          </div>
+      {{/if}}
+  </div>
 {{/inline}}

package/src/Footer.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 
 import "@ui5/webcomponents-icons/dist/headset.js";
@@ -49,6 +50,21 @@ export type FooterContactNumber = {
   number: string;
   country: string;
 };
+
+export const FooterBaseEvent = {
+  detail: {
+    originalEvent: { type: PointerEvent },
+  },
+};
+
+export const FooterDetailedEvent = {
+  detail: {
+    originalEvent: { type: PointerEvent },
+    name: { type: String },
+    sourceNode: { type: HTMLElement },
+  },
+};
+
 /**
  * @class
  *
@@ -75,6 +91,75 @@ export type FooterContactNumber = {
   template: FooterTemplate,
   dependencies: [UDExAccordionItem],
 })
+/**
+ * Triggered on click interaction with logo in footer
+ * @public
+ * @allowPreventDefault
+ */
+@event("logo-click", FooterBaseEvent)
+/**
+ * Triggered on click interaction with "Back to Top" button
+ * @public
+ * @allowPreventDefault
+ */
+@event("back-to-top-click", FooterBaseEvent)
+
+/**
+ * Triggered on click interaction with phone number link in footer
+ * @public
+ * @allowPreventDefault
+ */
+@event("contact-phone-click", FooterBaseEvent)
+/**
+ * Triggered on click interaction with local country numbers list link
+ * @public
+ * @allowPreventDefault
+ */
+@event("contact-phone-local-numbers-click", FooterBaseEvent)
+/**
+ * Triggered on click interaction with "Contact us by email" link
+ * @public
+ * @allowPreventDefault
+ */
+@event("contact-email-click", FooterBaseEvent)
+/**
+ * Triggered on click interaction with "Contact us by chat" link
+ * @public
+ * @allowPreventDefault
+ */
+@event("contact-chat-click", FooterBaseEvent)
+
+/**
+ * Triggered on click interaction with a link within "Quick Links" category
+ * @public
+ * @allowPreventDefault
+ */
+@event("quick-links-click", FooterDetailedEvent)
+/**
+ * Triggered on click interaction with a link within "Trending" category
+ * @public
+ * @allowPreventDefault
+ */
+@event("trending-click", FooterDetailedEvent)
+/**
+ * Triggered on click interaction with a link within "About SAP" category
+ * @public
+ * @allowPreventDefault
+ */
+@event("about-sap-click", FooterDetailedEvent)
+/**
+ * Triggered on click interaction with a link within "Site Information" category
+ * @public
+ * @allowPreventDefault
+ */
+@event("site-information-click", FooterDetailedEvent)
+
+/**
+ * Triggered on click interaction with any of the social media links within footer
+ * @public
+ * @allowPreventDefault
+ */
+@event("social-media-link-click", FooterDetailedEvent)
 class UDExFooter extends UI5Element {
   /**
    * Defines the Logo URL
@@ -221,7 +306,9 @@ class UDExFooter extends UI5Element {
     this._shouldRenderMobileMenu = this.isMobile;
   }
 
-  onBackToTopClick(): void {
+  onBackToTopClick(e: Event): void {
+    this.fireEvent("back-to-top-click", { originalEvent: e }, true);
+
     window.scrollTo(0, 0);
   }
 
@@ -311,6 +398,76 @@ class UDExFooter extends UI5Element {
   get isMobile(): boolean {
     return window.innerWidth <= BreakpointSizeS;
   }
+
+  _onLogoClick(e: Event): void {
+    this.fireEvent("logo-click", { originalEvent: e }, true);
+  }
+
+  _onContactPhoneClick(e: Event): void {
+    this.fireEvent("contact-phone-click", { originalEvent: e }, true);
+  }
+  _onContactPhoneLocalNumbersClick(e: Event): void {
+    this.fireEvent("contact-phone-local-numbers-click", { originalEvent: e }, true);
+  }
+  _onContactEmailClick(e: Event): void {
+    this.fireEvent("contact-email-click", { originalEvent: e }, true);
+  }
+  _onContactChatClick(e: Event): void {
+    this.fireEvent("contact-chat-click", { originalEvent: e }, true);
+  }
+
+  _onQuickLinksClick(e: Event): void {
+    const sourceNode = e.composedPath()[0]as HTMLElement;
+
+    this.fireEvent("quick-links-click", {
+      name: sourceNode.innerText,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
+
+  _onTrendingClick(e: Event): void {
+    const sourceNode = e.composedPath()[0]as HTMLElement;
+
+    this.fireEvent("trending-click", {
+      name: sourceNode.innerText,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
+
+  _onAboutSapClick(e: Event): void {
+    const sourceNode = e.composedPath()[0]as HTMLElement;
+
+    this.fireEvent("about-sap-click", {
+      name: sourceNode.innerText,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
+
+  _onSiteInformationClick(e: Event): void {
+    const sourceNode = e.composedPath()[0]as HTMLElement;
+
+    this.fireEvent("site-information-click", {
+      name: sourceNode.innerText,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
+
+  _onSocialMediaLinkClick(e: Event): void {
+    const nodes = e.composedPath() as HTMLElement[];
+    let sourceNode = nodes[0];
+
+    if (nodes[0] instanceof HTMLImageElement) { sourceNode = nodes[1]; }
+
+    this.fireEvent("social-media-link-click", {
+      name: sourceNode?.dataset?.name,
+      originalEvent: e,
+      sourceNode,
+    }, true);
+  }
 }
 
 UDExFooter.define();

package/src/InputGroup.hbs

@@ -0,0 +1,20 @@
+<div id="{{_id}}-input-group"
+    class="udex-input-group__container"
+    role="group"
+    aria-describedby="{{_id}}-valueStateDesc"
+>
+    <div class="udex-input-group__content">
+        {{#each _items}}
+            <div class="udex-input-group__item">
+                <slot name="{{this.item._individualSlot}}"></slot>
+            </div>
+        {{/each}}
+    </div>
+    {{#if valueStateText}}
+        <udex-status-message
+                supporting-text="{{valueStateText}}"
+                value-state="{{valueState}}">
+        </udex-status-message>
+        <span id="{{_id}}-valueStateDesc" class="hidden-text">{{valueStateText}}</span>
+    {{/if}}
+</div>