@sapudex/web-components 0.111.0 → 0.114.2

package/src/Table.ts

@@ -63,13 +63,13 @@ type KeyBoardItem = {
 class UDExTable extends UI5Element {
   /**
    * Defines the height of the table.
-   * Allows control over the height.
+   * Allows control over the maximum height.
    *
-   * @default undefined
+   * @default ""
    * @public
    */
-  @property({ type: String })
-    height?: string;
+  @property()
+    maxHeight!: string;
 
   /**
    * Defines the accessible ARIA name of the table.
@@ -359,8 +359,8 @@ class UDExTable extends UI5Element {
     return this.heading.length > 0 || this.actions.length > 0;
   }
 
-  get _tableHeight(): string {
-    return this.height ? this.height : "auto";
+  get _tableMaxHeight(): string {
+    return this.maxHeight ? this.maxHeight : "auto";
   }
 
   get _tableHolder(): HTMLElement {
@@ -383,7 +383,7 @@ class UDExTable extends UI5Element {
     return {
       table: {
         "grid-template-columns": this._gridTemplateColumns,
-        "height": this._tableHeight,
+        "max-height": this._tableMaxHeight,
         ...headerStyleMap,
       },
     };

package/src/Tag.ts

@@ -110,7 +110,7 @@ class UDExTag extends UI5Element {
     iconPlacement? : `${IconPlacement}`;
 
   /**
-   * Defines if tag is in readonly state
+   * Defines if tag is in readnly state
   *
   * @default false
   * @public
@@ -175,6 +175,14 @@ class UDExTag extends UI5Element {
   @property({ type: Boolean })
     singleToken!: boolean;
 
+  /**
+  * Toggle on/off nonSelectable property on tag
+  * @default true
+  * @private
+  */
+  @property({ type: Boolean })
+    nonSelectable!: boolean;
+
   onBeforeRendering() {
     this.toBeDeleted = false;
   }
@@ -188,6 +196,7 @@ class UDExTag extends UI5Element {
   get tagClasses() {
     return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} udex-tag-${this.design?.toLowerCase()}
     ${this.readOnly ? "udex-tag--readonly" : ""}
+    ${this.nonSelectable ? "udex-tag--nonselectable" : ""}
     ${this.selected ? "udex-tag--selected" : ""}`;
   }
 
@@ -211,7 +220,7 @@ class UDExTag extends UI5Element {
   }
 
   tagClickHandler() {
-    if (!this.readOnly && !this.toBeDeleted) {
+    if (!this.readOnly && !this.toBeDeleted && !this.nonSelectable) {
       this.setSelected();
       this.fireEvent("selectionChange");
     }
@@ -232,7 +241,7 @@ class UDExTag extends UI5Element {
   }
 
   get _tabIndex() {
-    if (this.readOnly || this.overflows) {
+    if (this.readOnly || this.overflows || this.nonSelectable) {
       return -1;
     }
     return 0;

package/src/TextArea.ts

@@ -282,7 +282,7 @@ class UDExTextArea extends UI5Element {
 
   handleChange = () => {
     this.fireEvent("change");
-  }
+  };
 
   handleGrowing = () => {
     if (this.growing) {

package/src/features/SearchSuggestionsPopover.ts

@@ -25,8 +25,8 @@ class Suggestion {
   component: SuggestionComponent;
   popover?: Popover | null;
   selectedItemIndex: number;
-  focusabledList?: HTMLUListElement;
-  lists?: Array<HTMLUListElement>;
+  focusabledList?: HTMLDivElement;
+  lists?: Array<HTMLDivElement>;
 
   constructor(component: SuggestionComponent) {
     this.component = component;
@@ -59,7 +59,7 @@ class Suggestion {
   }
 
   initLists(): void {
-    const list = this.popover?.querySelectorAll("ul") ? this.popover?.querySelectorAll("ul") : [];
+    const list = this.popover?.querySelectorAll(".udex-search-suggestions__list") ? this.popover?.querySelectorAll<HTMLDivElement>(".udex-search-suggestions__list") : [];
     this.lists = Array.from(list);
   }
 
@@ -122,6 +122,7 @@ class Suggestion {
     if (this.lists?.length === 2) {
       if (this.focusabledList === this.lists[1]) {
         (this.component?.shadowRoot?.querySelector("[ui5-button]") as UI5Element).focus();
+        this.close();
       }
       if (this.focusabledList === this.lists[0]) {
         this.focusabledList = this.lists[1];
@@ -131,6 +132,7 @@ class Suggestion {
     }
     if (this.lists?.length === 1) {
       (this.component?.shadowRoot?.querySelector("[ui5-button]") as UI5Element).focus();
+      this.close();
     }
   }
 
@@ -159,24 +161,22 @@ class Suggestion {
 
     if (this.lists?.length) {
       if (nextSelectedIdx === -1) {
-        const item = focusabledItems[0];
-        const button = item.querySelector("[ui5-button]") as UI5Element;
+        const button = focusabledItems[0] as UI5Element;
 
-        item.setAttribute("aria-selected", "true");
+        button.setAttribute("aria-selected", "true");
         button.focus();
         this.selectedItemIndex = 0;
-        this.focusabledList?.setAttribute("aria-activedescendant", item.id);
+        this.focusabledList?.setAttribute("aria-activedescendant", button.id);
         return true;
       }
       if (nextSelectedIdx >= 0 && nextSelectedIdx !== itemCount) {
-        const item = focusabledItems[nextSelectedIdx + 1];
-        const button = item.querySelector("[ui5-button]") as UI5Element;
+        const button = focusabledItems[nextSelectedIdx + 1] as UI5Element;
 
         focusabledItems[nextSelectedIdx].removeAttribute("aria-selected");
-        item.setAttribute("aria-selected", "true");
+        button.setAttribute("aria-selected", "true");
         button.focus();
         this.selectedItemIndex = nextSelectedIdx + 1;
-        this.focusabledList?.setAttribute("aria-activedescendant", item.id);
+        this.focusabledList?.setAttribute("aria-activedescendant", button.id);
         return true;
       }
       if (nextSelectedIdx === itemCount && this.focusabledList === this.lists[0] && this.lists.length === 2) {
@@ -198,24 +198,22 @@ class Suggestion {
 
     if (this.lists?.length) {
       if (previousSelectedIdx === -1) {
-        const item = focusabledItems[0];
-        const button = item.querySelector("[ui5-button]") as UI5Element;
+        const button = focusabledItems[0] as UI5Element;
 
-        item.setAttribute("aria-selected", "true");
+        button.setAttribute("aria-selected", "true");
         button.focus();
         this.selectedItemIndex = 0;
-        this.focusabledList?.setAttribute("aria-activedescendant", item.id);
+        this.focusabledList?.setAttribute("aria-activedescendant", button.id);
         return true;
       }
       if (previousSelectedIdx > 0 && previousSelectedIdx <= itemCount) {
-        const item = focusabledItems[previousSelectedIdx - 1];
-        const button = item.querySelector("[ui5-button]") as UI5Element;
+        const button = focusabledItems[previousSelectedIdx - 1] as UI5Element;
 
         focusabledItems[previousSelectedIdx].removeAttribute("aria-selected");
-        item.setAttribute("aria-selected", "true");
+        button.setAttribute("aria-selected", "true");
         button.focus();
         this.selectedItemIndex = previousSelectedIdx - 1;
-        this.focusabledList?.setAttribute("aria-activedescendant", item.id);
+        this.focusabledList?.setAttribute("aria-activedescendant", button.id);
         return true;
       }
       if (previousSelectedIdx === 0 && this.lists.length === 2 && this.focusabledList === this.lists[1]) {
@@ -229,7 +227,7 @@ class Suggestion {
     }
   }
 
-  handlePrevTabResset(e: KeyboardEvent) {
+  handlePrevTabReset(e: KeyboardEvent) {
     e.preventDefault();
     this.focusabledList?.focus();
   }

package/src/generated/templates/AccordionItemTemplate.lit.ts

@@ -4,7 +4,8 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type AccordionItem from "../../AccordionItem.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: AccordionItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class=${ifDefined(this.accordionItemsClass)} aria-expanded="${ifDefined(this.expanded)}" role="listitem" @keydown=${this.keydownHandler}><div class="udex-accordion-item__header-wrapper" aria-level="2" role="heading"><div role="button" class="udex-accordion-item__header" tabindex="0" aria-expanded="false" aria-controls="udex-accordion-item__${ifDefined(this._id)}-content" aria-labelledby="${ifDefined(this.ariaLabelledby)}" @focus=${this.focusHandler} @click=${this.itemClickHandler}><div class="udex-accordion-item__icon-wrapper"><${scopeTag("ui5-icon", tags, suffix)} class="udex-accordion-item__icon" name="slim-arrow-right"></${scopeTag("ui5-icon", tags, suffix)}></div><h4 class="udex-accordion-item__title">${ifDefined(this.title)}</h4></div></div><div id="udex-accordion-item__${ifDefined(this._id)}-content" @keydown=${this.contentKeydown} class="udex-accordion-item__content"><slot></slot></div></li>` : html`<li class=${ifDefined(this.accordionItemsClass)} aria-expanded="${ifDefined(this.expanded)}" role="listitem" @keydown=${this.keydownHandler}><div class="udex-accordion-item__header-wrapper" aria-level="2" role="heading"><div role="button" class="udex-accordion-item__header" tabindex="0" aria-expanded="false" aria-controls="udex-accordion-item__${ifDefined(this._id)}-content" aria-labelledby="${ifDefined(this.ariaLabelledby)}" @focus=${this.focusHandler} @click=${this.itemClickHandler}><div class="udex-accordion-item__icon-wrapper"><ui5-icon class="udex-accordion-item__icon" name="slim-arrow-right"></ui5-icon></div><h4 class="udex-accordion-item__title">${ifDefined(this.title)}</h4></div></div><div id="udex-accordion-item__${ifDefined(this._id)}-content" @keydown=${this.contentKeydown} class="udex-accordion-item__content"><slot></slot></div></li>`;}
+function block0 (this: AccordionItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class=${ifDefined(this.accordionItemsClass)} aria-expanded="${ifDefined(this.expanded)}" role="listitem" @keydown=${this.keydownHandler}><div class="udex-accordion-item__header-wrapper" aria-level="2" role="heading"><div role="button" class="udex-accordion-item__header" tabindex="0" aria-expanded="false" aria-controls="udex-accordion-item__${ifDefined(this._id)}-content" aria-labelledby="${ifDefined(this.ariaLabelledby)}" @focus=${this.focusHandler} @click=${this.itemClickHandler}><div class="udex-accordion-item__icon-wrapper"><${scopeTag("ui5-icon", tags, suffix)} class="udex-accordion-item__icon" name="slim-arrow-right"></${scopeTag("ui5-icon", tags, suffix)}></div><span class="udex-accordion-item__title">${ifDefined(this.title)}${ this.numberBadge ? block1.call(this, context, tags, suffix) : undefined }</span></div></div><div id="udex-accordion-item__${ifDefined(this._id)}-content" @keydown=${this.contentKeydown} class="udex-accordion-item__content"><slot></slot></div></li>` : html`<li class=${ifDefined(this.accordionItemsClass)} aria-expanded="${ifDefined(this.expanded)}" role="listitem" @keydown=${this.keydownHandler}><div class="udex-accordion-item__header-wrapper" aria-level="2" role="heading"><div role="button" class="udex-accordion-item__header" tabindex="0" aria-expanded="false" aria-controls="udex-accordion-item__${ifDefined(this._id)}-content" aria-labelledby="${ifDefined(this.ariaLabelledby)}" @focus=${this.focusHandler} @click=${this.itemClickHandler}><div class="udex-accordion-item__icon-wrapper"><ui5-icon class="udex-accordion-item__icon" name="slim-arrow-right"></ui5-icon></div><span class="udex-accordion-item__title">${ifDefined(this.title)}${ this.numberBadge ? block1.call(this, context, tags, suffix) : undefined }</span></div></div><div id="udex-accordion-item__${ifDefined(this._id)}-content" @keydown=${this.contentKeydown} class="udex-accordion-item__content"><slot></slot></div></li>`;}
+function block1 (this: AccordionItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-accordion-item__badge" type="Number" number-design="Blue" size="Large">${ifDefined(this.numberBadge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-accordion-item__badge" type="Number" number-design="Blue" size="Large">${ifDefined(this.numberBadge)}</udex-badge>`;}
 
 
 export default block0;

package/src/generated/templates/CountrySelectorTemplate.lit.ts

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type CountrySelector from "../../CountrySelector.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.countrySelectorClasses)}"><${scopeTag("udex-dropdown", tags, suffix)} id="dropdown" horizontal-align="Left" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @click-trigger="${this.handleTriggerClick}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" value="${ifDefined(this.selectedCountryName)}" slot="trigger" style="width:${ifDefined(this.holderWidth)}">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-text-field", tags, suffix)} label="${ifDefined(this.label)}" id="udexTextField" class="udex-country-selector__text" value-state="Standard" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" maxlength="0"></${scopeTag("udex-text-field", tags, suffix)}>${ !this.displayonly ? block2.call(this, context, tags, suffix) : undefined }</div>${ifDefined(this.searchableList)}</${scopeTag("udex-dropdown", tags, suffix)}></div> ` : html`<div class="${ifDefined(this.countrySelectorClasses)}"><udex-dropdown id="dropdown" horizontal-align="Left" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @click-trigger="${this.handleTriggerClick}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" value="${ifDefined(this.selectedCountryName)}" slot="trigger" style="width:${ifDefined(this.holderWidth)}">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<udex-text-field label="${ifDefined(this.label)}" id="udexTextField" class="udex-country-selector__text" value-state="Standard" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" maxlength="0"></udex-text-field>${ !this.displayonly ? block2.call(this, context, tags, suffix) : undefined }</div>${ifDefined(this.searchableList)}</udex-dropdown></div> `;}
+function block0 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.countrySelectorClasses)}"><${scopeTag("udex-dropdown", tags, suffix)} id="dropdown" horizontal-align="Left" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @click-trigger="${this.handleTriggerClick}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" value="${ifDefined(this.selectedCountryName)}" slot="trigger">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-text-field", tags, suffix)} label="${ifDefined(this.label)}" id="udexTextField" class="udex-country-selector__text" value-state="Standard" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" maxlength="0"></${scopeTag("udex-text-field", tags, suffix)}>${ !this.displayonly ? block2.call(this, context, tags, suffix) : undefined }</div>${ifDefined(this.searchableList)}</${scopeTag("udex-dropdown", tags, suffix)}></div> ` : html`<div class="${ifDefined(this.countrySelectorClasses)}"><udex-dropdown id="dropdown" horizontal-align="Left" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @click-trigger="${this.handleTriggerClick}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" value="${ifDefined(this.selectedCountryName)}" slot="trigger">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<udex-text-field label="${ifDefined(this.label)}" id="udexTextField" class="udex-country-selector__text" value-state="Standard" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" maxlength="0"></udex-text-field>${ !this.displayonly ? block2.call(this, context, tags, suffix) : undefined }</div>${ifDefined(this.searchableList)}</udex-dropdown></div> `;}
 function block1 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-country-selector__image" design="Default" icon="decline" tooltip="Reset Button" aria-label="${ifDefined(this.selectedCountryName)}" style="background-position-x: ${ifDefined(this.selectedCountryFlagX)}; background-position-y: ${ifDefined(this.selectedCountryFlagY)}">`;}
 function block2 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-country-selector__icon" name="navigation-down-arrow"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-country-selector__icon" name="navigation-down-arrow"></ui5-icon>`;}
 

package/src/generated/templates/FooterTemplate.lit.ts

@@ -6,37 +6,37 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	
 function block0 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<footer class="udex-footer"><div class="udex-footer__content"><div class="udex-footer__contact-social"><div class="udex-footer__contact-wrapper">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.isContactContainerVisible ? block4.call(this, context, tags, suffix) : undefined }</div>${ this.socialLinksArray.length ? block10.call(this, context, tags, suffix) : undefined }</div>${ this.isContactContainerVisible ? block12.call(this, context, tags, suffix) : undefined }${ this._shouldRenderMobileMenu ? block13.call(this, context, tags, suffix) : block22.call(this, context, tags, suffix) }<${scopeTag("udex-divider", tags, suffix)} class="udex-footer__divider"></${scopeTag("udex-divider", tags, suffix)}>${ this.socialLinksArray.length ? block31.call(this, context, tags, suffix) : undefined }</div><${scopeTag("udex-button", tags, suffix)} class="udex-footer__back-to-top-button" icon="back-to-top" @click="${this.onBackToTopClick}" design="Tertiary" size="Large" accessible-name="back to top"></${scopeTag("udex-button", tags, suffix)}></footer> ` : html`<footer class="udex-footer"><div class="udex-footer__content"><div class="udex-footer__contact-social"><div class="udex-footer__contact-wrapper">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.isContactContainerVisible ? block4.call(this, context, tags, suffix) : undefined }</div>${ this.socialLinksArray.length ? block10.call(this, context, tags, suffix) : undefined }</div>${ this.isContactContainerVisible ? block12.call(this, context, tags, suffix) : undefined }${ this._shouldRenderMobileMenu ? block13.call(this, context, tags, suffix) : block22.call(this, context, tags, suffix) }<udex-divider class="udex-footer__divider"></udex-divider>${ this.socialLinksArray.length ? block31.call(this, context, tags, suffix) : undefined }</div><udex-button class="udex-footer__back-to-top-button" icon="back-to-top" @click="${this.onBackToTopClick}" design="Tertiary" size="Large" accessible-name="back to top"></udex-button></footer> `;}
 function block1 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__logo">${ this.logoLink ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div>`;}
-function block2 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a href="${ifDefined(this.parsedRef)}"><img id="udex-footer__logo-image" src="${ifDefined(this.logoUrl)}" class="udex-footer__logo-image" alt="${ifDefined(this.logoAlt)}"/></a>`;}
+function block2 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a href="${ifDefined(this.parsedRef)}" @click="${this._onLogoClick}"><img id="udex-footer__logo-image" src="${ifDefined(this.logoUrl)}" class="udex-footer__logo-image" alt="${ifDefined(this.logoAlt)}"/></a>`;}
 function block3 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img id="udex-footer__logo-image" src="${ifDefined(this.logoUrl)}" class="udex-footer__logo-image" alt="${ifDefined(this.logoAlt)}"/>`;}
 function block4 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__contact">${ this.contactNumbersArray.length ? block5.call(this, context, tags, suffix) : undefined }${ this.contactUsLink ? block8.call(this, context, tags, suffix) : undefined }${ this.chatWithUsLink ? block9.call(this, context, tags, suffix) : undefined }</div>`;}
 function block5 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div><div class="udex-footer__numbers"><div class="udex-footer__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-footer__icon" name="headset"></${scopeTag("ui5-icon", tags, suffix)}></div><div><div class="udex-footer__numbers-wrapper">${ repeat(this.contactNumbersArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</div>${ this.localCountryNumbersLink ? block7.call(this, context, tags, suffix) : undefined }</div></div></div>` : html`<div><div class="udex-footer__numbers"><div class="udex-footer__icon-container"><ui5-icon class="udex-footer__icon" name="headset"></ui5-icon></div><div><div class="udex-footer__numbers-wrapper">${ repeat(this.contactNumbersArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</div>${ this.localCountryNumbersLink ? block7.call(this, context, tags, suffix) : undefined }</div></div></div>`;}
-function block6 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div><span class="hidden" aria-hidden id="udex-footer__${index}_phone-label">${ifDefined(this.phoneNumberAccessibleName)}${ifDefined(item.country)} : ${ifDefined(item.number)}</span><p class="udex-footer__country">${ifDefined(item.country)}</p><a href="tel:${ifDefined(item.number)}" class="udex-footer__number" aria-labelledby="udex-footer__${index}_phone-label">${ifDefined(item.number)}</a></div>`;}
-function block7 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-footer__remark">${ifDefined(this.completeListTitle)}<a href="${ifDefined(this.localCountryNumbersLink)}">${ifDefined(this.localCountryTitle)}.</a></p>`;}
-function block8 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div><div class="udex-footer__contact-us"><div class="udex-footer__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-footer__icon" name="email"></${scopeTag("ui5-icon", tags, suffix)}></div><span class="hidden" aria-hidden id="udex-footer__contact-us-label">${ifDefined(this.contactUsAccessibleLabel)}</span><a href="${ifDefined(this.contactUsLink)}" class="udex-footer__contact-us-link"  aria-labelledby="udex-footer__contact-us-label">${ifDefined(this.contactUsAccessibleName)}</a></div></div>` : html`<div><div class="udex-footer__contact-us"><div class="udex-footer__icon-container"><ui5-icon class="udex-footer__icon" name="email"></ui5-icon></div><span class="hidden" aria-hidden id="udex-footer__contact-us-label">${ifDefined(this.contactUsAccessibleLabel)}</span><a href="${ifDefined(this.contactUsLink)}" class="udex-footer__contact-us-link"  aria-labelledby="udex-footer__contact-us-label">${ifDefined(this.contactUsAccessibleName)}</a></div></div>`;}
-function block9 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div><div class="udex-footer__chat-with-us"><div class="udex-footer__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-footer__icon" name="discussion-2"></${scopeTag("ui5-icon", tags, suffix)}></div><a href="${ifDefined(this.chatWithUsLink)}" class="udex-footer__chat-with-us-link">${ifDefined(this.chatWithUsAccessibleName)}</a></div></div>` : html`<div><div class="udex-footer__chat-with-us"><div class="udex-footer__icon-container"><ui5-icon class="udex-footer__icon" name="discussion-2"></ui5-icon></div><a href="${ifDefined(this.chatWithUsLink)}" class="udex-footer__chat-with-us-link">${ifDefined(this.chatWithUsAccessibleName)}</a></div></div>`;}
+function block6 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div><span class="hidden" aria-hidden id="udex-footer__${index}_phone-label">${ifDefined(this.phoneNumberAccessibleName)}${ifDefined(item.country)} : ${ifDefined(item.number)}</span><p class="udex-footer__country">${ifDefined(item.country)}</p><a href="tel:${ifDefined(item.number)}" class="udex-footer__number" @click="${this._onContactPhoneClick}" aria-labelledby="udex-footer__${index}_phone-label">${ifDefined(item.number)}</a></div>`;}
+function block7 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-footer__remark">${ifDefined(this.completeListTitle)}<a href="${ifDefined(this.localCountryNumbersLink)}" @click="${this._onContactPhoneLocalNumbersClick}">${ifDefined(this.localCountryTitle)}.</a></p>`;}
+function block8 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div><div class="udex-footer__contact-us"><div class="udex-footer__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-footer__icon" name="email"></${scopeTag("ui5-icon", tags, suffix)}></div><span class="hidden" aria-hidden id="udex-footer__contact-us-label">${ifDefined(this.contactUsAccessibleLabel)}</span><a href="${ifDefined(this.contactUsLink)}" class="udex-footer__contact-us-link" aria-labelledby="udex-footer__contact-us-label" @click="${this._onContactEmailClick}">${ifDefined(this.contactUsAccessibleName)}</a></div></div>` : html`<div><div class="udex-footer__contact-us"><div class="udex-footer__icon-container"><ui5-icon class="udex-footer__icon" name="email"></ui5-icon></div><span class="hidden" aria-hidden id="udex-footer__contact-us-label">${ifDefined(this.contactUsAccessibleLabel)}</span><a href="${ifDefined(this.contactUsLink)}" class="udex-footer__contact-us-link" aria-labelledby="udex-footer__contact-us-label" @click="${this._onContactEmailClick}">${ifDefined(this.contactUsAccessibleName)}</a></div></div>`;}
+function block9 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div><div class="udex-footer__chat-with-us"><div class="udex-footer__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-footer__icon" name="discussion-2"></${scopeTag("ui5-icon", tags, suffix)}></div><a href="${ifDefined(this.chatWithUsLink)}" class="udex-footer__chat-with-us-link" @click="${this._onContactChatClick}">${ifDefined(this.chatWithUsAccessibleName)}</a></div></div>` : html`<div><div class="udex-footer__chat-with-us"><div class="udex-footer__icon-container"><ui5-icon class="udex-footer__icon" name="discussion-2"></ui5-icon></div><a href="${ifDefined(this.chatWithUsLink)}" class="udex-footer__chat-with-us-link" @click="${this._onContactChatClick}">${ifDefined(this.chatWithUsAccessibleName)}</a></div></div>`;}
 function block10 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__social udex-footer__links-list--desktop"><div class="udex-footer__social-container">${ repeat(this.socialLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</div></div>`;}
-function block11 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div><a href="${ifDefined(item.url)}" class="udex-footer__social-icon"><img alt="${ifDefined(item.name)}${ifDefined(this.socialIconAccessibleName)}" title="${ifDefined(item.name)}" src="${ifDefined(item.iconUrl)}" loading="lazy" /></a></div>`;}
+function block11 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div><a href="${ifDefined(item.url)}" class="udex-footer__social-icon" data-name="${ifDefined(item.name)}" @click="${this._onSocialMediaLinkClick}"><img alt="${ifDefined(item.name)}${ifDefined(this.socialIconAccessibleName)}" title="${ifDefined(item.name)}" src="${ifDefined(item.iconUrl)}" loading="lazy" /></a></div>`;}
 function block12 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-divider", tags, suffix)} class="udex-footer__divider"></${scopeTag("udex-divider", tags, suffix)}>` : html`<udex-divider class="udex-footer__divider"></udex-divider>`;}
 function block13 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-accordion", tags, suffix)} class="udex-footer__accordion">${ this.quickLinksArray.length ? block14.call(this, context, tags, suffix) : undefined }${ this.trendingLinksArray.length ? block16.call(this, context, tags, suffix) : undefined }${ this.aboutLinksArray.length ? block18.call(this, context, tags, suffix) : undefined }${ this.siteInformationLinksArray.length ? block20.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-accordion", tags, suffix)}>` : html`<udex-accordion class="udex-footer__accordion">${ this.quickLinksArray.length ? block14.call(this, context, tags, suffix) : undefined }${ this.trendingLinksArray.length ? block16.call(this, context, tags, suffix) : undefined }${ this.aboutLinksArray.length ? block18.call(this, context, tags, suffix) : undefined }${ this.siteInformationLinksArray.length ? block20.call(this, context, tags, suffix) : undefined }</udex-accordion>`;}
 function block14 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-accordion-item", tags, suffix)} title="${ifDefined(this.quickLinksTitle)}" class="udex-footer__action-item"><ul class="udex-footer__links-list udex-footer__links-list--mobile">${ repeat(this.quickLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block15.call(this, context, tags, suffix, item, index)) }</ul></${scopeTag("udex-accordion-item", tags, suffix)}><h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__quick-links">${ifDefined(this.quickLinksTitle)}</h3>` : html`<udex-accordion-item title="${ifDefined(this.quickLinksTitle)}" class="udex-footer__action-item"><ul class="udex-footer__links-list udex-footer__links-list--mobile">${ repeat(this.quickLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block15.call(this, context, tags, suffix, item, index)) }</ul></udex-accordion-item><h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__quick-links">${ifDefined(this.quickLinksTitle)}</h3>`;}
-function block15 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__quick-links" href="${ifDefined(item.url)}">${ifDefined(item.title)}</a></li>`;}
+function block15 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__quick-links" href="${ifDefined(item.url)}" @click="${this._onQuickLinksClick}">${ifDefined(item.title)}</a></li>`;}
 function block16 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-accordion-item", tags, suffix)} title="${ifDefined(this.trendingTitle)}" class="udex-footer__action-item"><ul class="udex-footer__links-list udex-footer__links-list--mobile">${ repeat(this.trendingLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block17.call(this, context, tags, suffix, item, index)) }</ul></${scopeTag("udex-accordion-item", tags, suffix)}><h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__trending">${ifDefined(this.trendingTitle)}</h3>` : html`<udex-accordion-item title="${ifDefined(this.trendingTitle)}" class="udex-footer__action-item"><ul class="udex-footer__links-list udex-footer__links-list--mobile">${ repeat(this.trendingLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block17.call(this, context, tags, suffix, item, index)) }</ul></udex-accordion-item><h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__trending">${ifDefined(this.trendingTitle)}</h3>`;}
-function block17 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__trending" href="${ifDefined(item.url)}">${ifDefined(item.title)}</a></li>`;}
+function block17 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__footer__trending" href="${ifDefined(item.url)}" @click="${this._onTrendingClick}">${ifDefined(item.title)}</a></li>`;}
 function block18 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-accordion-item", tags, suffix)} title="${ifDefined(this.aboutSapTitle)}" class="udex-footer__action-item"><ul class="udex-footer__links-list udex-footer__links-list--mobile">${ repeat(this.aboutLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block19.call(this, context, tags, suffix, item, index)) }</ul></${scopeTag("udex-accordion-item", tags, suffix)}><h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__about">${ifDefined(this.aboutSapTitle)}</h3>` : html`<udex-accordion-item title="${ifDefined(this.aboutSapTitle)}" class="udex-footer__action-item"><ul class="udex-footer__links-list udex-footer__links-list--mobile">${ repeat(this.aboutLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block19.call(this, context, tags, suffix, item, index)) }</ul></udex-accordion-item><h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__about">${ifDefined(this.aboutSapTitle)}</h3>`;}
-function block19 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__about" href="${ifDefined(item.url)}">${ifDefined(item.title)}</a></li>`;}
+function block19 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__about" href="${ifDefined(item.url)}" @click="${this._onAboutSapClick}">${ifDefined(item.title)}</a></li>`;}
 function block20 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-accordion-item", tags, suffix)} title="${ifDefined(this.siteInformationTitle)}" class="udex-footer__action-item"><ul class="udex-footer__links-list udex-footer__links-list--mobile">${ repeat(this.siteInformationLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block21.call(this, context, tags, suffix, item, index)) }</ul></${scopeTag("udex-accordion-item", tags, suffix)}><h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__site-information">${ifDefined(this.siteInformationTitle)}</h3>` : html`<udex-accordion-item title="${ifDefined(this.siteInformationTitle)}" class="udex-footer__action-item"><ul class="udex-footer__links-list udex-footer__links-list--mobile">${ repeat(this.siteInformationLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block21.call(this, context, tags, suffix, item, index)) }</ul></udex-accordion-item><h3 class="udex-footer__links-item hidden" aria-hidden="true" id="udex-footer__site-information">${ifDefined(this.siteInformationTitle)}</h3>`;}
-function block21 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a  aria-describedby="udex-footer__site-information" href="${ifDefined(item.url)}">${ifDefined(item.title)}</a></li>`;}
+function block21 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__site-information" href="${ifDefined(item.url)}" @click="${this._onSiteInformationClick}">${ifDefined(item.title)}</a></li>`;}
 function block22 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__links">${ this.quickLinksArray.length ? block23.call(this, context, tags, suffix) : undefined }${ this.trendingLinksArray.length ? block25.call(this, context, tags, suffix) : undefined }${ this.aboutLinksArray.length ? block27.call(this, context, tags, suffix) : undefined }${ this.siteInformationLinksArray.length ? block29.call(this, context, tags, suffix) : undefined }</div>`;}
 function block23 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__links-group udex-footer__quick-links"><h3 class="udex-footer__links-item" id="udex-footer__quick-links">${ifDefined(this.quickLinksTitle)}</h3><ul class="udex-footer__links-list udex-footer__links-list--desktop">${ repeat(this.quickLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block24.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block24 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__quick-links" href="${ifDefined(item.url)}">${ifDefined(item.title)}</a></li>`;}
+function block24 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__quick-links" href="${ifDefined(item.url)}" @click="${this._onQuickLinksClick}">${ifDefined(item.title)}</a></li>`;}
 function block25 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__links-group udex-footer__trending-links"><h3 class="udex-footer__links-item" id="udex-footer__trending">${ifDefined(this.trendingTitle)}</h3><ul class="udex-footer__links-list udex-footer__links-list--desktop">${ repeat(this.trendingLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block26.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block26 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__trending" href="${ifDefined(item.url)}">${ifDefined(item.title)}</a></li>`;}
+function block26 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__footer__trending" href="${ifDefined(item.url)}" @click="${this._onTrendingClick}">${ifDefined(item.title)}</a></li>`;}
 function block27 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__links-group udex-footer__about-links"><h3 class="udex-footer__links-item" id="udex-footer__about">${ifDefined(this.aboutSapTitle)}</h3><ul class="udex-footer__links-list udex-footer__links-list--desktop">${ repeat(this.aboutLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block28.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block28 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__about" href="${ifDefined(item.url)}">${ifDefined(item.title)}</a></li>`;}
+function block28 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__about" href="${ifDefined(item.url)}" @click="${this._onAboutSapClick}">${ifDefined(item.title)}</a></li>`;}
 function block29 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__links-group udex-footer__site-information-links"><h3 class="udex-footer__links-item" id="udex-footer__site-information">${ifDefined(this.siteInformationTitle)}</h3><ul class="udex-footer__links-list udex-footer__links-list--desktop">${ repeat(this.siteInformationLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block30.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block30 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__site-information" href="${ifDefined(item.url)}">${ifDefined(item.title)}</a></li>`;}
+function block30 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__site-information" href="${ifDefined(item.url)}" @click="${this._onSiteInformationClick}">${ifDefined(item.title)}</a></li>`;}
 function block31 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__social udex-footer__links-list--mobile"><div class="udex-footer__social-container">${ repeat(this.socialLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block32.call(this, context, tags, suffix, item, index)) }</div></div>`;}
-function block32 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div><a href="${ifDefined(item.url)}" class="udex-footer__social-icon"><img alt="${ifDefined(item.name)}${ifDefined(this.socialIconAccessibleName)}" src="${ifDefined(item.iconUrl)}" loading="lazy" /></a></div>`;}
+function block32 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div><a href="${ifDefined(item.url)}" class="udex-footer__social-icon" data-name="${ifDefined(item.name)}" @click="${this._onSocialMediaLinkClick}"><img alt="${ifDefined(item.name)}${ifDefined(this.socialIconAccessibleName)}" src="${ifDefined(item.iconUrl)}" loading="lazy" /></a></div>`;}
 
 
 export default block0;

package/src/generated/templates/InputGroupTemplate.lit.ts

@@ -0,0 +1,12 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type InputGroup from "../../InputGroup.js";
+	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
+	
+function block0 (this: InputGroup, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div id="${ifDefined(this._id)}-input-group" class="udex-input-group__container" role="group" aria-describedby="${ifDefined(this._id)}-valueStateDesc"><div class="udex-input-group__content">${ repeat(this._items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div>${ this.valueStateText ? block2.call(this, context, tags, suffix) : undefined }</div>`;}
+function block1 (this: InputGroup, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-input-group__item"><slot name="${ifDefined(item.item._individualSlot)}"></slot></div>`;}
+function block2 (this: InputGroup, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-message", tags, suffix)} supporting-text="${ifDefined(this.valueStateText)}" value-state="${ifDefined(this.valueState)}"></${scopeTag("udex-status-message", tags, suffix)}><span id="${ifDefined(this._id)}-valueStateDesc" class="hidden-text">${ifDefined(this.valueStateText)}</span>` : html`<udex-status-message supporting-text="${ifDefined(this.valueStateText)}" value-state="${ifDefined(this.valueState)}"></udex-status-message><span id="${ifDefined(this._id)}-valueStateDesc" class="hidden-text">${ifDefined(this.valueStateText)}</span>`;}
+
+
+export default block0;

package/src/generated/templates/MastheadMobileMenuTemplate.lit.ts

@@ -4,17 +4,22 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type MastheadMobileMenu from "../../MastheadMobileMenu.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-mobile-menu" @keydown="${this.handleKeyDown}"><div class="udex-masthead-mobile-menu__nav-holder"><div class="udex-masthead-mobile-menu__list-search"><slot name="search"></slot></div><ul class="udex-masthead-mobile-menu__list" role="menu">${ this.showNavigation ? block1.call(this, context, tags, suffix) : undefined }${ this._showCategories ? block5.call(this, context, tags, suffix) : undefined }${ this._showCategoryItems ? block7.call(this, context, tags, suffix) : undefined }</ul></div>${ this.showExploreBtn ? block10.call(this, context, tags, suffix) : undefined }</nav> `;}
-function block1 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }`;}
-function block2 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem">${ item.href ? block3.call(this, context, tags, suffix, item, index) : block4.call(this, context, tags, suffix, item, index) }</li>`;}
-function block3 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" has-border></udex-masthead-menu-item>`;}
+function block0 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-mobile-menu" @keydown="${this.handleKeyDown}"><div class="udex-masthead-mobile-menu__nav-holder">${ this.hasSearchSlot ? block1.call(this, context, tags, suffix) : undefined }<ul class="udex-masthead-mobile-menu__list" role="menu">${ this.showNavigation ? block2.call(this, context, tags, suffix) : undefined }${ this._showCategories ? block6.call(this, context, tags, suffix) : undefined }${ this._showCategoryItems ? block12.call(this, context, tags, suffix) : undefined }</ul></div>${ this.showExploreBtn ? block15.call(this, context, tags, suffix) : undefined }</nav> `;}
+function block1 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-mobile-menu__list-search"><slot name="search"></slot></div>`;}
+function block2 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }`;}
+function block3 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem">${ item.subItems ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }</li>`;}
 function block4 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></udex-masthead-menu-item>`;}
-function block5 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start back-to-nav></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ repeat(this._categories, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start back-to-nav></udex-masthead-menu-item></li>${ repeat(this._categories, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }`;}
-function block6 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" type="Button" second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" type="Button" second-level has-border icon-end></udex-masthead-menu-item></li>`;}
-function block7 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" has-border icon-start back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block8.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" has-border icon-start back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block8.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }`;}
-function block8 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} url="${ifDefined(this._category.url)}" label="${ifDefined(this.categoryLinkText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item url="${ifDefined(this._category.url)}" label="${ifDefined(this.categoryLinkText)}" has-border></udex-masthead-menu-item></li>`;}
-function block9 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></udex-masthead-menu-item></li>`;}
-function block10 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role="button" type="Button" first-level icon-end is-explore label=${ifDefined(this.exploreItem.innerText)}></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role="button" type="Button" first-level icon-end is-explore label=${ifDefined(this.exploreItem.innerText)}></udex-masthead-menu-item>`;}
+function block5 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" has-border></udex-masthead-menu-item>`;}
+function block6 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start back-to-nav></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._clickedItem.href ? block7.call(this, context, tags, suffix) : undefined }${ repeat(this._categories, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block8.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start back-to-nav></udex-masthead-menu-item></li>${ this._clickedItem.href ? block7.call(this, context, tags, suffix) : undefined }${ repeat(this._categories, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block8.call(this, context, tags, suffix, item, index)) }`;}
+function block7 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" has-border></udex-masthead-menu-item></li>`;}
+function block8 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.category ? block9.call(this, context, tags, suffix, item, index) : block10.call(this, context, tags, suffix, item, index) }`;}
+function block9 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" type="Button" second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" type="Button" second-level has-border icon-end></udex-masthead-menu-item></li>`;}
+function block10 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ repeat(item.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }`;}
+function block11 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" has-border></udex-masthead-menu-item></li>`;}
+function block12 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" has-border icon-start back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block13.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block14.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" has-border icon-start back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block13.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block14.call(this, context, tags, suffix, item, index)) }`;}
+function block13 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" has-border></udex-masthead-menu-item></li>`;}
+function block14 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></udex-masthead-menu-item></li>`;}
+function block15 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role="button" type="Button" first-level icon-end is-explore label=${ifDefined(this.exploreItem.innerText)}></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role="button" type="Button" first-level icon-end is-explore label=${ifDefined(this.exploreItem.innerText)}></udex-masthead-menu-item>`;}
 
 
 export default block0;

package/src/generated/templates/MastheadProfileMenuTemplate.lit.ts

@@ -8,7 +8,7 @@ function block0 (this: MastheadProfileMenu, context: UI5Element, tags: string[],
 function block1 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} size="L" initials="${ifDefined(this.userData.avatarInitials)}">${ this.userData.avatarUrl ? block2.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-avatar", tags, suffix)}><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p></div>` : html`<udex-avatar size="L" initials="${ifDefined(this.userData.avatarInitials)}">${ this.userData.avatarUrl ? block2.call(this, context, tags, suffix) : undefined }</udex-avatar><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p></div>`;}
 function block2 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img src="${ifDefined(this.userData.avatarUrl)}" alt="avatar"/>`;}
 function block3 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-profile-menu__message"><slot name="message"></slot></div>`;}
-function block4 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__actions" @click=${this.userLogout}><${scopeTag("udex-masthead-menu-item", tags, suffix)} url="#" label="${ifDefined(this.logoutText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}></div>` : html`<div class="udex-masthead-profile-menu__actions" @click=${this.userLogout}><udex-masthead-menu-item url="#" label="${ifDefined(this.logoutText)}"></udex-masthead-menu-item></div>`;}
+function block4 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__actions" @click=${this.userLogout}><${scopeTag("udex-masthead-menu-item", tags, suffix)} url="${ifDefined(this.logoutUrl)}" label="${ifDefined(this.logoutText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}></div>` : html`<div class="udex-masthead-profile-menu__actions" @click=${this.userLogout}><udex-masthead-menu-item url="${ifDefined(this.logoutUrl)}" label="${ifDefined(this.logoutText)}"></udex-masthead-menu-item></div>`;}
 
 
 export default block0;

package/src/generated/templates/SearchSuggestionsTemplate.lit.ts

@@ -4,16 +4,17 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type SearchSuggestions from "../../SearchSuggestions.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow _disable-initial-focus placement-type="Bottom" horizontal-align="Right" style="${styleMap(this.popoverStyles)}" id="suggestions-popover" aria-orientation="vertical" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.hasPopoverContent ? block1.call(this, context, tags, suffix) : undefined }</${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow _disable-initial-focus placement-type="Bottom" horizontal-align="Right" style="${styleMap(this.popoverStyles)}" id="suggestions-popover" aria-orientation="vertical" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.hasPopoverContent ? block1.call(this, context, tags, suffix) : undefined }</ui5-popover>`;}
-function block1 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="tree">${ this.isShowSuggestedList ? block2.call(this, context, tags, suffix) : undefined }${ this.isShowRecommendedList ? block5.call(this, context, tags, suffix) : undefined }</div>`;}
-function block2 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search-suggestions__block">${ this.suggestedHeading ? block3.call(this, context, tags, suffix) : undefined }<ul class="udex-search-suggestions__list" role="listbox" aria-labelledby="suggested-heading" tabindex="0" @keydown="${this.handleKeyDownPopover}">${ repeat(this.suggestedList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block3 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__heading" id="suggested-heading">${ifDefined(this.suggestedHeading)}</span>`;}
-function block4 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-search-suggestions__item" role="option" id="${ifDefined(item.id)}"><${scopeTag("ui5-button", tags, suffix)} icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}></li>` : html`<li class="udex-search-suggestions__item" role="option" id="${ifDefined(item.id)}"><ui5-button icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button></li>`;}
-function block5 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search-suggestions__block">${ this.recommendedHeading ? block6.call(this, context, tags, suffix) : undefined }<ul class="udex-search-suggestions__list" role="listbox" aria-labelledby="recommended-heading" tabindex="0" @keydown="${this.handleKeyDownPopover}">${ repeat(this.recommendedList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block6 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__heading" id="recommended-heading">${ifDefined(this.recommendedHeading)}</span>`;}
-function block7 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-search-suggestions__item" role="option" id="${ifDefined(item.id)}">${ item.hasCustomIcon ? block8.call(this, context, tags, suffix, item, index) : block9.call(this, context, tags, suffix, item, index) }</li>`;}
-function block8 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
-function block9 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
+function block0 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow _disable-initial-focus placement-type="Bottom" horizontal-align="Right" style="${styleMap(this.popoverStyles)}" id="suggestions-popover" aria-orientation="vertical" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow _disable-initial-focus placement-type="Bottom" horizontal-align="Right" style="${styleMap(this.popoverStyles)}" id="suggestions-popover" aria-orientation="vertical" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }</ui5-popover>`;}
+function block1 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__message">${ifDefined(this.noResultMessage)}</span>`;}
+function block2 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="tree">${ this.isShowSuggestedList ? block3.call(this, context, tags, suffix) : undefined }${ this.isShowRecommendedList ? block6.call(this, context, tags, suffix) : undefined }</div>`;}
+function block3 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search-suggestions__block" role="treeitem">${ this.suggestedHeading ? block4.call(this, context, tags, suffix) : undefined }<div class="udex-search-suggestions__list" role="listbox" aria-labelledby="suggested-heading" tabindex="0" @keydown="${this.handleKeyDownPopover}">${ repeat(this.suggestedList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</div></div>`;}
+function block4 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__heading" id="suggested-heading">${ifDefined(this.suggestedHeading)}</span>`;}
+function block5 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
+function block6 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search-suggestions__block" role="treeitem">${ this.recommendedHeading ? block7.call(this, context, tags, suffix) : undefined }<div class="udex-search-suggestions__list" role="listbox" aria-labelledby="recommended-heading" tabindex="0" @keydown="${this.handleKeyDownPopover}">${ repeat(this.recommendedList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block8.call(this, context, tags, suffix, item, index)) }</div></div>`;}
+function block7 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__heading" id="recommended-heading">${ifDefined(this.recommendedHeading)}</span>`;}
+function block8 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.hasCustomIcon ? block9.call(this, context, tags, suffix, item, index) : block10.call(this, context, tags, suffix, item, index) }`;}
+function block9 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
+function block10 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
 
 
 export default block0;

package/src/generated/templates/SearchTemplate.lit.ts

@@ -4,15 +4,16 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Search from "../../Search.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search__root"><form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }<div class="udex-search__icons">${ this.isShowResetButton ? block4.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block5.call(this, context, tags, suffix) : undefined }${ this.showSubmitButton ? block6.call(this, context, tags, suffix) : undefined }</div></form></div>`;}
-function block1 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<input id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" role="combobox" aria-controls="suggestions-popover" aria-expanded="false" aria-haspopup="${ifDefined(this.showSuggestedPopover)}" placeholder="${ifDefined(this.label)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
-function block2 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.label ? block3.call(this, context, tags, suffix) : undefined }<input id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-controls="suggestions-popover" aria-expanded="false" aria-haspopup="${ifDefined(this.showSuggestedPopover)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
-function block3 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="search-input" class="${ifDefined(this.labelClasses)}">${ifDefined(this.label)}</label>`;}
-function block4 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" icon="decline" tooltip="Reset Button" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" icon="decline" tooltip="Reset Button" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></ui5-button>`;}
-function block5 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="Voice Button" @click="${this.onVoice}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="Voice Button" @click="${this.onVoice}"></ui5-button>`;}
-function block6 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.nonInteractiveSubmitButton ? block7.call(this, context, tags, suffix) : block8.call(this, context, tags, suffix) }`;}
-function block7 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-search__icon" name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" name="search"></ui5-icon>`;}
-function block8 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="Submit Button" @click="${this.onSubmit}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="Submit Button" @click="${this.onSubmit}"></ui5-button>`;}
+function block0 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search__root ${ifDefined(this.classWithPrefix)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }<div class="udex-search__icons">${ this.isShowResetButton ? block5.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block6.call(this, context, tags, suffix) : undefined }${ this.showSubmitButton ? block7.call(this, context, tags, suffix) : undefined }</div></form></div>`;}
+function block1 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__prefix"><button type="button" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__prefix-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}></button><${scopeTag("ui5-popover", tags, suffix)} id="udex-search-prefix" class="udex-search__prefix-popover" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-search__prefix"><button type="button" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon></button><ui5-popover id="udex-search-prefix" class="udex-search__prefix-popover" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></ui5-popover></div>`;}
+function block2 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<input id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" role="combobox" aria-controls="suggestions-popover" aria-expanded="false" aria-haspopup="${ifDefined(this.showSuggestedPopover)}" placeholder="${ifDefined(this.label)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
+function block3 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.label ? block4.call(this, context, tags, suffix) : undefined }<input id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-controls="suggestions-popover" aria-expanded="false" aria-haspopup="${ifDefined(this.showSuggestedPopover)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
+function block4 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="search-input" class="${ifDefined(this.labelClasses)}">${ifDefined(this.label)}</label>`;}
+function block5 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" icon="decline" tooltip="Reset Button" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" icon="decline" tooltip="Reset Button" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></ui5-button>`;}
+function block6 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="Voice Button" @click="${this.onVoice}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="Voice Button" @click="${this.onVoice}"></ui5-button>`;}
+function block7 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.nonInteractiveSubmitButton ? block8.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }`;}
+function block8 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-search__icon" name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" name="search"></ui5-icon>`;}
+function block9 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="Submit Button" @click="${this.onSubmit}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="Submit Button" @click="${this.onSubmit}"></ui5-button>`;}
 
 
 export default block0;