@sapudex/web-components 0.127.6 → 0.138.0

package/src/TextField.hbs

@@ -16,6 +16,7 @@
          @input="{{handleInput}}"
          @focus="{{handleFocus}}"
          @blur="{{handleBlur}}"
+         @click="{{handleClick}}"
          @keydown="{{handleKeyDown}}"
          maxlength="{{maxlength}}"
          ?disabled="{{disabled}}"
@@ -25,9 +26,10 @@
          aria-readonly="{{isInputReadonly}}"
          ?aria-disabled="{{readonlyNotDisabled}}"
          aria-invalid="{{accInfo.ariaInvalid}}"
-         ?aria-describedby="{{accInfo.ariaDescribedBy}}"
-         ?aria-label="{{accInfo.ariaLabel}}"
-         ?aria-labelledby="{{accInfo.ariaLabelledBy}}"
+         aria-describedby="{{accInfo.ariaDescribedBy}}"
+         aria-haspopup="{{accInfo.ariaHasPopup}}"
+         aria-label="{{accInfo.ariaLabel}}"
+         aria-labelledby="{{accInfo.ariaLabelledBy}}"
          part="textfield-input"
          min="{{min}}"
          max="{{max}}"
@@ -52,9 +54,9 @@
 
   {{#if supportingText}}
     <udex-status-message
-    ?disabled="{{disabled}}"
-    supporting-text="{{supportingText}}"
-    value-state="{{valueState}}">
+      ?disabled="{{disabled}}"
+      supporting-text="{{supportingText}}"
+      value-state="{{valueState}}">
     </udex-status-message>
   {{/if}}
 

package/src/TextField.ts

@@ -8,6 +8,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   VALUE_STATE_SUCCESS,
   VALUE_STATE_INFORMATION,
@@ -17,13 +18,21 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import UDExControlButton from "./ControlButton.js";
 import ValueState from "./types/common.js";
+import UDExStatusMessage from "./StatusMessage.js";
 
 // Template
 import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
-import UDExStatusMessage from "./StatusMessage.js";
+
+type AccInfo = {
+  ariaInvalid?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+  ariaLabel?: string;
+  ariaHasPopup?: string,
+}
 
 /**
  * @class
@@ -176,8 +185,8 @@ class UDExTextField extends UI5Element {
    * @default "Standard"
    * @public
    */
-  @property({ type: ValueState, defaultValue: "Standard" })
-    valueState!: "Standard" | "Warning" | "Error" | "Success";
+  @property({ type: ValueState, defaultValue: ValueState.Standard })
+    valueState!: `${ValueState}`;
 
   /**
    * Defines supporting text under the input field.
@@ -287,13 +296,28 @@ class UDExTextField extends UI5Element {
   @property()
     ariaDescribedBy?: string;
 
+  /**
+   * Defines the aria-has-popup attribute of the input.
+   * @private
+   */
+  @property({ type: String })
+    _ariaHasPopup?: string;
+
+  /**
+   * Defines is it the touch of the input field (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
+  static async onDefine(): Promise<void> {
     UDExTextField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  get valueStateTypeMappings() {
+  get valueStateTypeMappings(): Record<string, string> {
     return {
       "Success": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),
       "Standard": UDExTextField.i18nBundle.getText(VALUE_STATE_INFORMATION),
@@ -302,15 +326,15 @@ class UDExTextField extends UI5Element {
     };
   }
 
-  get hasValueState() {
+  get hasValueState(): boolean {
     return this.valueState !== ValueState.Standard;
   }
 
-  get valueStateText() {
+  get valueStateText(): string | undefined {
     return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
   }
 
-  get readOnlyStateText() {
+  get readOnlyStateText(): string {
     return UDExTextField.i18nBundle.getText(READ_ONLY);
   }
 
@@ -318,28 +342,29 @@ class UDExTextField extends UI5Element {
     return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();
   }
 
-  get supportingTextId():string {
+  get supportingTextId(): string {
     return this.supportingText ? `${this._id}-supportingTextDesc` : "";
   }
 
-  get valueStateTextId():string {
+  get valueStateTextId(): string {
     return this.hasValueState ? `${this._id}-valueStateDesc` : "";
   }
 
-  get readOnlyStateTextId():string {
+  get readOnlyStateTextId(): string {
     return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
   }
 
-  get accInfo() {
+  get accInfo(): AccInfo {
     return {
       "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
       "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
       "ariaLabelledBy": this.accessibleNameRef,
       "ariaLabel": this.accessibleName || undefined,
+      "ariaHasPopup": this._ariaHasPopup || undefined,
     };
   }
 
-  handleChange = () => {
+  handleChange = (): void => {
     this.fireEvent("change");
   };
 
@@ -348,14 +373,20 @@ class UDExTextField extends UI5Element {
     this.fireEvent("input");
   };
 
-  handleFocus = () => {
+  handleClick = (): void => {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
+  };
+
+  handleFocus = (): void => {
     if (!this.disabled && !this.readonly && !this.displayonly) {
       this.labelActiveClass = this._labelActiveClassName;
       this.active = true;
     }
   };
 
-  handleBlur = () => {
+  handleBlur = (): void => {
     this.active = false;
 
     if (this.value) {
@@ -363,9 +394,10 @@ class UDExTextField extends UI5Element {
     } else {
       this.labelActiveClass = "";
     }
+    this._isTouched = false;
   };
 
-  handleKeyDown = (keyboardEvent: KeyboardEvent) => {
+  handleKeyDown = (keyboardEvent: KeyboardEvent): void => {
     keyboardEvent.stopPropagation();
     this.fireEvent("click-trigger", keyboardEvent);
   };
@@ -374,7 +406,7 @@ class UDExTextField extends UI5Element {
     this.fireEvent("click-icon");
   }
 
-  onBeforeRendering() {
+  onBeforeRendering(): void {
     if ((this.value || this.active) && this.labelActiveClass === "") {
       this.labelActiveClass = this._labelActiveClassName;
     } else if (!this.active && !this.value && this.labelActiveClass.length) {
@@ -398,7 +430,7 @@ class UDExTextField extends UI5Element {
     }
   }
 
-  get readonlyNotDisabled() {
+  get readonlyNotDisabled(): boolean {
     return this.isInputReadonly && !this.disabled;
   }
 }

package/src/Tooltip.ts

@@ -31,7 +31,7 @@ export enum PlacementType {
  * For the <code>udex-tooltip</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Tooltip.js";</code>
+ * <code>import "@udex/web-components/dist/Tooltip.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/generated/i18n/i18n-defaults.ts

@@ -1,3 +1,3 @@
 import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-const COUNT: I18nText = {key: "COUNT", defaultText: "Count"};const OF: I18nText = {key: "OF", defaultText: "of"};const PAGINATION_PAGE: I18nText = {key: "PAGINATION_PAGE", defaultText: "Pagination page"};const SELECTED: I18nText = {key: "SELECTED", defaultText: "Selected"};const FIRST_PAGE: I18nText = {key: "FIRST_PAGE", defaultText: "First page"};const LAST_PAGE: I18nText = {key: "LAST_PAGE", defaultText: "Last page"};const PREVIOUS_PAGE: I18nText = {key: "PREVIOUS_PAGE", defaultText: "Previous page"};const NEXT_PAGE: I18nText = {key: "NEXT_PAGE", defaultText: "Next page"};const ACTIVATE_PAGE: I18nText = {key: "ACTIVATE_PAGE", defaultText: "Activate page number"};const BUTTON_ARIA_TYPE_PRIMARY: I18nText = {key: "BUTTON_ARIA_TYPE_PRIMARY", defaultText: "Primary"};const BUTTON_ARIA_TYPE_SECONDARY: I18nText = {key: "BUTTON_ARIA_TYPE_SECONDARY", defaultText: "Secondary"};const BUTTON_ARIA_TYPE_TERTIARY: I18nText = {key: "BUTTON_ARIA_TYPE_TERTIARY", defaultText: "Tertiary"};const BUTTON_ARIA_TYPE_WARNING: I18nText = {key: "BUTTON_ARIA_TYPE_WARNING", defaultText: "Warning"};const BUTTON_ARIA_TYPE_POSITIVE: I18nText = {key: "BUTTON_ARIA_TYPE_POSITIVE", defaultText: "Positive"};const BUTTON_ARIA_TYPE_NEGATIVE: I18nText = {key: "BUTTON_ARIA_TYPE_NEGATIVE", defaultText: "Negative"};const BUTTON_ARIA_EMPHASIZED: I18nText = {key: "BUTTON_ARIA_EMPHASIZED", defaultText: "Emphasized"};const BUTTON_ARIA_DEFAULT: I18nText = {key: "BUTTON_ARIA_DEFAULT", defaultText: "Default"};const BUTTON_ARIA_TRANSPARENT: I18nText = {key: "BUTTON_ARIA_TRANSPARENT", defaultText: "Transparent"};const BUTTON_ARIA_ATTENTION: I18nText = {key: "BUTTON_ARIA_ATTENTION", defaultText: "Attention"};const TOGGLED: I18nText = {key: "TOGGLED", defaultText: "Toggled"};const SUGGESTED_TEXT: I18nText = {key: "SUGGESTED_TEXT", defaultText: "Suggested searches"};const ACCESSIBLE_NAME_RESET_ICON: I18nText = {key: "ACCESSIBLE_NAME_RESET_ICON", defaultText: "Clear"};const ACCESSIBLE_NAME_SEARCH_ICON: I18nText = {key: "ACCESSIBLE_NAME_SEARCH_ICON", defaultText: "Search"};const TOOLTIP_RESET_BUTTON: I18nText = {key: "TOOLTIP_RESET_BUTTON", defaultText: "Clear"};const TOOLTIP_VOICE_BUTTON: I18nText = {key: "TOOLTIP_VOICE_BUTTON", defaultText: "Voice"};const TOOLTIP_SUBMIT_BUTTON: I18nText = {key: "TOOLTIP_SUBMIT_BUTTON", defaultText: "Submit"};const AVAILABLE_VALUES: I18nText = {key: "AVAILABLE_VALUES", defaultText: "Available Values"};const RECOMMENDED_TEXT: I18nText = {key: "RECOMMENDED_TEXT", defaultText: "Recommended pages"};const EXPAND_ALL: I18nText = {key: "EXPAND_ALL", defaultText: "Expand All"};const COLLAPSE_ALL: I18nText = {key: "COLLAPSE_ALL", defaultText: "Collapse All"};const MORE: I18nText = {key: "MORE", defaultText: "More"};const ATTENTION_BADGE: I18nText = {key: "ATTENTION_BADGE", defaultText: "Attention badge"};const REVIEWS: I18nText = {key: "REVIEWS", defaultText: "reviews"};const STARS: I18nText = {key: "STARS", defaultText: "stars"};const READ_MORE: I18nText = {key: "READ_MORE", defaultText: "Read more"};const READ_LESS: I18nText = {key: "READ_LESS", defaultText: "Read less"};const RATING_INDICATOR_TEXT: I18nText = {key: "RATING_INDICATOR_TEXT", defaultText: "Rating Indicator"};const RATING_INDICATOR_TOOLTIP_TEXT: I18nText = {key: "RATING_INDICATOR_TOOLTIP_TEXT", defaultText: "Rating"};const RATING_INDICATOR_ARIA_DESCRIPTION: I18nText = {key: "RATING_INDICATOR_ARIA_DESCRIPTION", defaultText: "Required"};const TOTAL: I18nText = {key: "TOTAL", defaultText: "Total"};const MESSAGE_STRIP_CLOSE_BUTTON: I18nText = {key: "MESSAGE_STRIP_CLOSE_BUTTON", defaultText: "Message Strip Close Button"};const MESSAGE_STRIP_INFORMATION: I18nText = {key: "MESSAGE_STRIP_INFORMATION", defaultText: "Information"};const MESSAGE_STRIP_SUCCESS: I18nText = {key: "MESSAGE_STRIP_SUCCESS", defaultText: "Positive"};const MESSAGE_STRIP_WARNING: I18nText = {key: "MESSAGE_STRIP_WARNING", defaultText: "Warning"};const MESSAGE_STRIP_ERROR: I18nText = {key: "MESSAGE_STRIP_ERROR", defaultText: "Negative"};const ARIA_LABEL_LIST_MULTISELECTABLE: I18nText = {key: "ARIA_LABEL_LIST_MULTISELECTABLE", defaultText: "Contains Multi-Selectable Items"};const ARIA_LABEL_LIST_SELECTABLE: I18nText = {key: "ARIA_LABEL_LIST_SELECTABLE", defaultText: "Contains Selectable Items"};const UNSELECTED: I18nText = {key: "UNSELECTED", defaultText: "Unselected"};const INDETERMINATE: I18nText = {key: "INDETERMINATE", defaultText: "Indeterminate"};const EDIT_BUTTON: I18nText = {key: "EDIT_BUTTON", defaultText: "Edit button"};const DELETE_BUTTON: I18nText = {key: "DELETE_BUTTON", defaultText: "Delete button"};const TEXTAREA_CHARACTERS_LEFT: I18nText = {key: "TEXTAREA_CHARACTERS_LEFT", defaultText: "{0} characters remaining"};const VALUE_STATE_TYPE_ERROR: I18nText = {key: "VALUE_STATE_TYPE_ERROR", defaultText: "Field State Error"};const VALUE_STATE_TYPE_WARNING: I18nText = {key: "VALUE_STATE_TYPE_WARNING", defaultText: "Field State Warning"};const VALUE_STATE_TYPE_SUCCESS: I18nText = {key: "VALUE_STATE_TYPE_SUCCESS", defaultText: "Field State Success"};const VALUE_STATE_TYPE_STANDARD: I18nText = {key: "VALUE_STATE_TYPE_STANDARD", defaultText: "Field State Standard"};const CAROUSEL_PREVIOUS_ARROW_TEXT: I18nText = {key: "CAROUSEL_PREVIOUS_ARROW_TEXT", defaultText: "Previous Page"};const CAROUSEL_NEXT_ARROW_TEXT: I18nText = {key: "CAROUSEL_NEXT_ARROW_TEXT", defaultText: "Next Page"};const SHOW_RESULTS: I18nText = {key: "SHOW_RESULTS", defaultText: "Show Results"};const RESET: I18nText = {key: "RESET", defaultText: "Reset"};const SELECT_OPTIONS: I18nText = {key: "SELECT_OPTIONS", defaultText: "Select Options"};const SELECT_ALL: I18nText = {key: "SELECT_ALL", defaultText: "Select All"};const BREADCRUMBS_ARIA_LABEL: I18nText = {key: "BREADCRUMBS_ARIA_LABEL", defaultText: "Breadcrumb Trail"};const BREADCRUMBS_OVERFLOW_ARIA_LABEL: I18nText = {key: "BREADCRUMBS_OVERFLOW_ARIA_LABEL", defaultText: "More"};const STEPINPUT_INC_ICON_TITLE: I18nText = {key: "STEPINPUT_INC_ICON_TITLE", defaultText: "Increase Quantity by"};const STEPINPUT_DEC_ICON_TITLE: I18nText = {key: "STEPINPUT_DEC_ICON_TITLE", defaultText: "Decrease Quantity by"};const NO_MATCHES_FOUND: I18nText = {key: "NO_MATCHES_FOUND", defaultText: "No matches found."};const VALUE_STATE_ERROR: I18nText = {key: "VALUE_STATE_ERROR", defaultText: "Invalid entry"};const VALUE_STATE_WARNING: I18nText = {key: "VALUE_STATE_WARNING", defaultText: "Warning issued"};const VALUE_STATE_INFORMATION: I18nText = {key: "VALUE_STATE_INFORMATION", defaultText: "Informative entry"};const VALUE_STATE_SUCCESS: I18nText = {key: "VALUE_STATE_SUCCESS", defaultText: "Entry successfully validated"};const READ_ONLY: I18nText = {key: "READ_ONLY", defaultText: "Read only"};const LOGOUT: I18nText = {key: "LOGOUT", defaultText: "Logout"};const COUNTRY_SELECT: I18nText = {key: "COUNTRY_SELECT", defaultText: "Country Select"};const OVERVIEW: I18nText = {key: "OVERVIEW", defaultText: "Overview"};const SHOW_HIDE_PASSWORD: I18nText = {key: "SHOW_HIDE_PASSWORD", defaultText: "Show/Hide Password Button"};const SOCIAL_LINK_ICON: I18nText = {key: "SOCIAL_LINK_ICON", defaultText: "Link Graphic"};const PHONE_NUMBER: I18nText = {key: "PHONE_NUMBER", defaultText: "Phone number"};const CONTACT_US: I18nText = {key: "CONTACT_US", defaultText: "Contact us"};const EMAIL: I18nText = {key: "EMAIL", defaultText: "Email"};const CHAT_WITH_US: I18nText = {key: "CHAT_WITH_US", defaultText: "Chat with us"};const QUICK_LINKS: I18nText = {key: "QUICK_LINKS", defaultText: "Quick Links"};const TRENDING: I18nText = {key: "TRENDING", defaultText: "Trending"};const ABOUT_SAP: I18nText = {key: "ABOUT_SAP", defaultText: "About SAP"};const SITE_INFORMATION: I18nText = {key: "SITE_INFORMATION", defaultText: "Site Information"};const SEE_COMPLETE_LIST: I18nText = {key: "SEE_COMPLETE_LIST", defaultText: "Or see our complete list of"};const LOCAL_COUNTRY_NAMES: I18nText = {key: "LOCAL_COUNTRY_NAMES", defaultText: "local country numbers"};const AVATAR_TEXT: I18nText = {key: "AVATAR_TEXT", defaultText: "Avatar"};const DISABLED: I18nText = {key: "DISABLED", defaultText: "Disabled"};const STATUS_BADGE_TEXT: I18nText = {key: "STATUS_BADGE_TEXT", defaultText: "Status badge"};const STATUS_BADGE_EDIT_TITLE: I18nText = {key: "STATUS_BADGE_EDIT_TITLE", defaultText: "Click to edit profile"};const STATUS_BADGE_INFORMATION_TITLE: I18nText = {key: "STATUS_BADGE_INFORMATION_TITLE", defaultText: "Click to open profile information"};const STATUS_BADGE_WARNING_TITLE: I18nText = {key: "STATUS_BADGE_WARNING_TITLE", defaultText: "Warning, potential risk with the profile"};const STATUS_BADGE_ERROR_TITLE: I18nText = {key: "STATUS_BADGE_ERROR_TITLE", defaultText: "There is an error with the profile"};const STATUS_BADGE_SUCCESS_TITLE: I18nText = {key: "STATUS_BADGE_SUCCESS_TITLE", defaultText: "Successfully verified profile"};const CALENDAR_ICON: I18nText = {key: "CALENDAR_ICON", defaultText: "Open Calendar icon"};const TABLE_NO_DATA_FOUND: I18nText = {key: "TABLE_NO_DATA_FOUND", defaultText: "No data found"};const LIST_ITEM_EDIT_ICON: I18nText = {key: "LIST_ITEM_EDIT_ICON", defaultText: "Edit list item entry"};const LIST_ITEM_DELETE_ICON: I18nText = {key: "LIST_ITEM_DELETE_ICON", defaultText: "Delete list item entry"};const BACK_BUTTON_LABEL: I18nText = {key: "BACK_BUTTON_LABEL", defaultText: "back button"};const TRIGGER: I18nText = {key: "TRIGGER", defaultText: "Dropdown trigger"};
-export {COUNT,OF,PAGINATION_PAGE,SELECTED,FIRST_PAGE,LAST_PAGE,PREVIOUS_PAGE,NEXT_PAGE,ACTIVATE_PAGE,BUTTON_ARIA_TYPE_PRIMARY,BUTTON_ARIA_TYPE_SECONDARY,BUTTON_ARIA_TYPE_TERTIARY,BUTTON_ARIA_TYPE_WARNING,BUTTON_ARIA_TYPE_POSITIVE,BUTTON_ARIA_TYPE_NEGATIVE,BUTTON_ARIA_EMPHASIZED,BUTTON_ARIA_DEFAULT,BUTTON_ARIA_TRANSPARENT,BUTTON_ARIA_ATTENTION,TOGGLED,SUGGESTED_TEXT,ACCESSIBLE_NAME_RESET_ICON,ACCESSIBLE_NAME_SEARCH_ICON,TOOLTIP_RESET_BUTTON,TOOLTIP_VOICE_BUTTON,TOOLTIP_SUBMIT_BUTTON,AVAILABLE_VALUES,RECOMMENDED_TEXT,EXPAND_ALL,COLLAPSE_ALL,MORE,ATTENTION_BADGE,REVIEWS,STARS,READ_MORE,READ_LESS,RATING_INDICATOR_TEXT,RATING_INDICATOR_TOOLTIP_TEXT,RATING_INDICATOR_ARIA_DESCRIPTION,TOTAL,MESSAGE_STRIP_CLOSE_BUTTON,MESSAGE_STRIP_INFORMATION,MESSAGE_STRIP_SUCCESS,MESSAGE_STRIP_WARNING,MESSAGE_STRIP_ERROR,ARIA_LABEL_LIST_MULTISELECTABLE,ARIA_LABEL_LIST_SELECTABLE,UNSELECTED,INDETERMINATE,EDIT_BUTTON,DELETE_BUTTON,TEXTAREA_CHARACTERS_LEFT,VALUE_STATE_TYPE_ERROR,VALUE_STATE_TYPE_WARNING,VALUE_STATE_TYPE_SUCCESS,VALUE_STATE_TYPE_STANDARD,CAROUSEL_PREVIOUS_ARROW_TEXT,CAROUSEL_NEXT_ARROW_TEXT,SHOW_RESULTS,RESET,SELECT_OPTIONS,SELECT_ALL,BREADCRUMBS_ARIA_LABEL,BREADCRUMBS_OVERFLOW_ARIA_LABEL,STEPINPUT_INC_ICON_TITLE,STEPINPUT_DEC_ICON_TITLE,NO_MATCHES_FOUND,VALUE_STATE_ERROR,VALUE_STATE_WARNING,VALUE_STATE_INFORMATION,VALUE_STATE_SUCCESS,READ_ONLY,LOGOUT,COUNTRY_SELECT,OVERVIEW,SHOW_HIDE_PASSWORD,SOCIAL_LINK_ICON,PHONE_NUMBER,CONTACT_US,EMAIL,CHAT_WITH_US,QUICK_LINKS,TRENDING,ABOUT_SAP,SITE_INFORMATION,SEE_COMPLETE_LIST,LOCAL_COUNTRY_NAMES,AVATAR_TEXT,DISABLED,STATUS_BADGE_TEXT,STATUS_BADGE_EDIT_TITLE,STATUS_BADGE_INFORMATION_TITLE,STATUS_BADGE_WARNING_TITLE,STATUS_BADGE_ERROR_TITLE,STATUS_BADGE_SUCCESS_TITLE,CALENDAR_ICON,TABLE_NO_DATA_FOUND,LIST_ITEM_EDIT_ICON,LIST_ITEM_DELETE_ICON,BACK_BUTTON_LABEL,TRIGGER};
+const COUNT: I18nText = {key: "COUNT", defaultText: "Count"};const OF: I18nText = {key: "OF", defaultText: "of"};const PAGINATION_PAGE: I18nText = {key: "PAGINATION_PAGE", defaultText: "Pagination page"};const SELECTED: I18nText = {key: "SELECTED", defaultText: "Selected"};const FIRST_PAGE: I18nText = {key: "FIRST_PAGE", defaultText: "First page"};const LAST_PAGE: I18nText = {key: "LAST_PAGE", defaultText: "Last page"};const PREVIOUS_PAGE: I18nText = {key: "PREVIOUS_PAGE", defaultText: "Previous page"};const NEXT_PAGE: I18nText = {key: "NEXT_PAGE", defaultText: "Next page"};const ACTIVATE_PAGE: I18nText = {key: "ACTIVATE_PAGE", defaultText: "Activate page number"};const BUTTON_ARIA_TYPE_PRIMARY: I18nText = {key: "BUTTON_ARIA_TYPE_PRIMARY", defaultText: "Primary"};const BUTTON_ARIA_TYPE_SECONDARY: I18nText = {key: "BUTTON_ARIA_TYPE_SECONDARY", defaultText: "Secondary"};const BUTTON_ARIA_TYPE_TERTIARY: I18nText = {key: "BUTTON_ARIA_TYPE_TERTIARY", defaultText: "Tertiary"};const BUTTON_ARIA_TYPE_WARNING: I18nText = {key: "BUTTON_ARIA_TYPE_WARNING", defaultText: "Warning"};const BUTTON_ARIA_TYPE_POSITIVE: I18nText = {key: "BUTTON_ARIA_TYPE_POSITIVE", defaultText: "Positive"};const BUTTON_ARIA_TYPE_NEGATIVE: I18nText = {key: "BUTTON_ARIA_TYPE_NEGATIVE", defaultText: "Negative"};const BUTTON_ARIA_EMPHASIZED: I18nText = {key: "BUTTON_ARIA_EMPHASIZED", defaultText: "Emphasized"};const BUTTON_ARIA_DEFAULT: I18nText = {key: "BUTTON_ARIA_DEFAULT", defaultText: "Default"};const BUTTON_ARIA_TRANSPARENT: I18nText = {key: "BUTTON_ARIA_TRANSPARENT", defaultText: "Transparent"};const BUTTON_ARIA_ATTENTION: I18nText = {key: "BUTTON_ARIA_ATTENTION", defaultText: "Attention"};const TOGGLED: I18nText = {key: "TOGGLED", defaultText: "Toggled"};const SUGGESTED_TEXT: I18nText = {key: "SUGGESTED_TEXT", defaultText: "Suggested searches"};const ACCESSIBLE_NAME_RESET_ICON: I18nText = {key: "ACCESSIBLE_NAME_RESET_ICON", defaultText: "Clear"};const ACCESSIBLE_NAME_SEARCH_ICON: I18nText = {key: "ACCESSIBLE_NAME_SEARCH_ICON", defaultText: "Search"};const TOOLTIP_RESET_BUTTON: I18nText = {key: "TOOLTIP_RESET_BUTTON", defaultText: "Clear"};const TOOLTIP_VOICE_BUTTON: I18nText = {key: "TOOLTIP_VOICE_BUTTON", defaultText: "Voice"};const TOOLTIP_SUBMIT_BUTTON: I18nText = {key: "TOOLTIP_SUBMIT_BUTTON", defaultText: "Submit"};const AVAILABLE_VALUES: I18nText = {key: "AVAILABLE_VALUES", defaultText: "Available Values"};const RECOMMENDED_TEXT: I18nText = {key: "RECOMMENDED_TEXT", defaultText: "Recommended pages"};const EXPAND_ALL: I18nText = {key: "EXPAND_ALL", defaultText: "Expand All"};const COLLAPSE_ALL: I18nText = {key: "COLLAPSE_ALL", defaultText: "Collapse All"};const MORE: I18nText = {key: "MORE", defaultText: "More"};const ATTENTION_BADGE: I18nText = {key: "ATTENTION_BADGE", defaultText: "Attention badge"};const REVIEWS: I18nText = {key: "REVIEWS", defaultText: "reviews"};const STARS: I18nText = {key: "STARS", defaultText: "stars"};const READ_MORE: I18nText = {key: "READ_MORE", defaultText: "Read more"};const READ_LESS: I18nText = {key: "READ_LESS", defaultText: "Read less"};const RATING_INDICATOR_TEXT: I18nText = {key: "RATING_INDICATOR_TEXT", defaultText: "Rating Indicator"};const RATING_INDICATOR_TOOLTIP_TEXT: I18nText = {key: "RATING_INDICATOR_TOOLTIP_TEXT", defaultText: "Rating"};const RATING_INDICATOR_ARIA_DESCRIPTION: I18nText = {key: "RATING_INDICATOR_ARIA_DESCRIPTION", defaultText: "Required"};const TOTAL: I18nText = {key: "TOTAL", defaultText: "Total"};const MESSAGE_STRIP_CLOSE_BUTTON: I18nText = {key: "MESSAGE_STRIP_CLOSE_BUTTON", defaultText: "Message Strip Close Button"};const MESSAGE_STRIP_INFORMATION: I18nText = {key: "MESSAGE_STRIP_INFORMATION", defaultText: "Information"};const MESSAGE_STRIP_SUCCESS: I18nText = {key: "MESSAGE_STRIP_SUCCESS", defaultText: "Positive"};const MESSAGE_STRIP_WARNING: I18nText = {key: "MESSAGE_STRIP_WARNING", defaultText: "Warning"};const MESSAGE_STRIP_ERROR: I18nText = {key: "MESSAGE_STRIP_ERROR", defaultText: "Negative"};const ARIA_LABEL_LIST_MULTISELECTABLE: I18nText = {key: "ARIA_LABEL_LIST_MULTISELECTABLE", defaultText: "Contains Multi-Selectable Items"};const ARIA_LABEL_LIST_SELECTABLE: I18nText = {key: "ARIA_LABEL_LIST_SELECTABLE", defaultText: "Contains Selectable Items"};const UNSELECTED: I18nText = {key: "UNSELECTED", defaultText: "Unselected"};const INDETERMINATE: I18nText = {key: "INDETERMINATE", defaultText: "Indeterminate"};const EDIT_BUTTON: I18nText = {key: "EDIT_BUTTON", defaultText: "Edit"};const DELETE_BUTTON: I18nText = {key: "DELETE_BUTTON", defaultText: "Delete"};const TEXTAREA_CHARACTERS_LEFT: I18nText = {key: "TEXTAREA_CHARACTERS_LEFT", defaultText: "{0} characters remaining"};const VALUE_STATE_TYPE_ERROR: I18nText = {key: "VALUE_STATE_TYPE_ERROR", defaultText: "Field State Error"};const VALUE_STATE_TYPE_WARNING: I18nText = {key: "VALUE_STATE_TYPE_WARNING", defaultText: "Field State Warning"};const VALUE_STATE_TYPE_SUCCESS: I18nText = {key: "VALUE_STATE_TYPE_SUCCESS", defaultText: "Field State Success"};const VALUE_STATE_TYPE_STANDARD: I18nText = {key: "VALUE_STATE_TYPE_STANDARD", defaultText: "Field State Standard"};const CAROUSEL_PREVIOUS_ARROW_TEXT: I18nText = {key: "CAROUSEL_PREVIOUS_ARROW_TEXT", defaultText: "Previous Page"};const CAROUSEL_NEXT_ARROW_TEXT: I18nText = {key: "CAROUSEL_NEXT_ARROW_TEXT", defaultText: "Next Page"};const SHOW_RESULTS: I18nText = {key: "SHOW_RESULTS", defaultText: "Show Results"};const RESET: I18nText = {key: "RESET", defaultText: "Reset"};const SELECT_OPTIONS: I18nText = {key: "SELECT_OPTIONS", defaultText: "Select Options"};const SELECT_ALL: I18nText = {key: "SELECT_ALL", defaultText: "Select All"};const BREADCRUMBS_ARIA_LABEL: I18nText = {key: "BREADCRUMBS_ARIA_LABEL", defaultText: "Breadcrumb Trail"};const BREADCRUMBS_OVERFLOW_ARIA_LABEL: I18nText = {key: "BREADCRUMBS_OVERFLOW_ARIA_LABEL", defaultText: "More"};const STEPINPUT_INC_ICON_TITLE: I18nText = {key: "STEPINPUT_INC_ICON_TITLE", defaultText: "Increase Quantity by"};const STEPINPUT_DEC_ICON_TITLE: I18nText = {key: "STEPINPUT_DEC_ICON_TITLE", defaultText: "Decrease Quantity by"};const NO_MATCHES_FOUND: I18nText = {key: "NO_MATCHES_FOUND", defaultText: "No matches found."};const VALUE_STATE_ERROR: I18nText = {key: "VALUE_STATE_ERROR", defaultText: "Invalid entry"};const VALUE_STATE_WARNING: I18nText = {key: "VALUE_STATE_WARNING", defaultText: "Warning issued"};const VALUE_STATE_INFORMATION: I18nText = {key: "VALUE_STATE_INFORMATION", defaultText: "Informative entry"};const VALUE_STATE_SUCCESS: I18nText = {key: "VALUE_STATE_SUCCESS", defaultText: "Entry successfully validated"};const READ_ONLY: I18nText = {key: "READ_ONLY", defaultText: "Read only"};const LOGOUT: I18nText = {key: "LOGOUT", defaultText: "Logout"};const PROFILE: I18nText = {key: "PROFILE", defaultText: "Profile"};const COUNTRY_SELECT: I18nText = {key: "COUNTRY_SELECT", defaultText: "Select country"};const OVERVIEW: I18nText = {key: "OVERVIEW", defaultText: "Overview"};const SHOW_HIDE_PASSWORD: I18nText = {key: "SHOW_HIDE_PASSWORD", defaultText: "Show/Hide Password Button"};const SOCIAL_LINK_ICON: I18nText = {key: "SOCIAL_LINK_ICON", defaultText: "Link Graphic"};const PHONE_NUMBER: I18nText = {key: "PHONE_NUMBER", defaultText: "Phone number"};const CONTACT_US: I18nText = {key: "CONTACT_US", defaultText: "Contact us"};const EMAIL: I18nText = {key: "EMAIL", defaultText: "Email"};const CHAT_WITH_US: I18nText = {key: "CHAT_WITH_US", defaultText: "Chat with us"};const QUICK_LINKS: I18nText = {key: "QUICK_LINKS", defaultText: "Quick Links"};const TRENDING: I18nText = {key: "TRENDING", defaultText: "Trending"};const ABOUT_SAP: I18nText = {key: "ABOUT_SAP", defaultText: "About SAP"};const SITE_INFORMATION: I18nText = {key: "SITE_INFORMATION", defaultText: "Site Information"};const SEE_COMPLETE_LIST: I18nText = {key: "SEE_COMPLETE_LIST", defaultText: "Or see our complete list of"};const LOCAL_COUNTRY_NAMES: I18nText = {key: "LOCAL_COUNTRY_NAMES", defaultText: "local country numbers"};const AVATAR_TEXT: I18nText = {key: "AVATAR_TEXT", defaultText: "Avatar"};const DISABLED: I18nText = {key: "DISABLED", defaultText: "Disabled"};const STATUS_BADGE_TEXT: I18nText = {key: "STATUS_BADGE_TEXT", defaultText: "Status badge"};const STATUS_BADGE_EDIT_TITLE: I18nText = {key: "STATUS_BADGE_EDIT_TITLE", defaultText: "Click to edit profile"};const STATUS_BADGE_INFORMATION_TITLE: I18nText = {key: "STATUS_BADGE_INFORMATION_TITLE", defaultText: "Click to open profile information"};const STATUS_BADGE_WARNING_TITLE: I18nText = {key: "STATUS_BADGE_WARNING_TITLE", defaultText: "Warning, potential risk with the profile"};const STATUS_BADGE_ERROR_TITLE: I18nText = {key: "STATUS_BADGE_ERROR_TITLE", defaultText: "There is an error with the profile"};const STATUS_BADGE_SUCCESS_TITLE: I18nText = {key: "STATUS_BADGE_SUCCESS_TITLE", defaultText: "Successfully verified profile"};const CALENDAR_ICON: I18nText = {key: "CALENDAR_ICON", defaultText: "Open Calendar icon"};const DATEPICKER_DATE_DESCRIPTION: I18nText = {key: "DATEPICKER_DATE_DESCRIPTION", defaultText: "Date Input"};const TABLE_NO_DATA_FOUND: I18nText = {key: "TABLE_NO_DATA_FOUND", defaultText: "No data found"};const LIST_ITEM_EDIT_ICON: I18nText = {key: "LIST_ITEM_EDIT_ICON", defaultText: "Edit list item entry"};const LIST_ITEM_DELETE_ICON: I18nText = {key: "LIST_ITEM_DELETE_ICON", defaultText: "Delete list item entry"};const BACK_BUTTON_LABEL: I18nText = {key: "BACK_BUTTON_LABEL", defaultText: "back button"};const TRIGGER: I18nText = {key: "TRIGGER", defaultText: "Dropdown trigger"};
+export {COUNT,OF,PAGINATION_PAGE,SELECTED,FIRST_PAGE,LAST_PAGE,PREVIOUS_PAGE,NEXT_PAGE,ACTIVATE_PAGE,BUTTON_ARIA_TYPE_PRIMARY,BUTTON_ARIA_TYPE_SECONDARY,BUTTON_ARIA_TYPE_TERTIARY,BUTTON_ARIA_TYPE_WARNING,BUTTON_ARIA_TYPE_POSITIVE,BUTTON_ARIA_TYPE_NEGATIVE,BUTTON_ARIA_EMPHASIZED,BUTTON_ARIA_DEFAULT,BUTTON_ARIA_TRANSPARENT,BUTTON_ARIA_ATTENTION,TOGGLED,SUGGESTED_TEXT,ACCESSIBLE_NAME_RESET_ICON,ACCESSIBLE_NAME_SEARCH_ICON,TOOLTIP_RESET_BUTTON,TOOLTIP_VOICE_BUTTON,TOOLTIP_SUBMIT_BUTTON,AVAILABLE_VALUES,RECOMMENDED_TEXT,EXPAND_ALL,COLLAPSE_ALL,MORE,ATTENTION_BADGE,REVIEWS,STARS,READ_MORE,READ_LESS,RATING_INDICATOR_TEXT,RATING_INDICATOR_TOOLTIP_TEXT,RATING_INDICATOR_ARIA_DESCRIPTION,TOTAL,MESSAGE_STRIP_CLOSE_BUTTON,MESSAGE_STRIP_INFORMATION,MESSAGE_STRIP_SUCCESS,MESSAGE_STRIP_WARNING,MESSAGE_STRIP_ERROR,ARIA_LABEL_LIST_MULTISELECTABLE,ARIA_LABEL_LIST_SELECTABLE,UNSELECTED,INDETERMINATE,EDIT_BUTTON,DELETE_BUTTON,TEXTAREA_CHARACTERS_LEFT,VALUE_STATE_TYPE_ERROR,VALUE_STATE_TYPE_WARNING,VALUE_STATE_TYPE_SUCCESS,VALUE_STATE_TYPE_STANDARD,CAROUSEL_PREVIOUS_ARROW_TEXT,CAROUSEL_NEXT_ARROW_TEXT,SHOW_RESULTS,RESET,SELECT_OPTIONS,SELECT_ALL,BREADCRUMBS_ARIA_LABEL,BREADCRUMBS_OVERFLOW_ARIA_LABEL,STEPINPUT_INC_ICON_TITLE,STEPINPUT_DEC_ICON_TITLE,NO_MATCHES_FOUND,VALUE_STATE_ERROR,VALUE_STATE_WARNING,VALUE_STATE_INFORMATION,VALUE_STATE_SUCCESS,READ_ONLY,LOGOUT,PROFILE,COUNTRY_SELECT,OVERVIEW,SHOW_HIDE_PASSWORD,SOCIAL_LINK_ICON,PHONE_NUMBER,CONTACT_US,EMAIL,CHAT_WITH_US,QUICK_LINKS,TRENDING,ABOUT_SAP,SITE_INFORMATION,SEE_COMPLETE_LIST,LOCAL_COUNTRY_NAMES,AVATAR_TEXT,DISABLED,STATUS_BADGE_TEXT,STATUS_BADGE_EDIT_TITLE,STATUS_BADGE_INFORMATION_TITLE,STATUS_BADGE_WARNING_TITLE,STATUS_BADGE_ERROR_TITLE,STATUS_BADGE_SUCCESS_TITLE,CALENDAR_ICON,DATEPICKER_DATE_DESCRIPTION,TABLE_NO_DATA_FOUND,LIST_ITEM_EDIT_ICON,LIST_ITEM_DELETE_ICON,BACK_BUTTON_LABEL,TRIGGER};

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

@@ -4,9 +4,9 @@ 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)}" @ui5-handle-close-search="${ifDefined(this.handleCloseSearch)}"><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)}" @ui5-handle-close-search="${ifDefined(this.handleCloseSearch)}"><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>`;}
+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)}" @ui5-handle-close-search="${ifDefined(this.handleCloseSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" slot="trigger">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-text-field", tags, suffix)} label="${ifDefined(this.effectiveAriaLabel)}" id="udexTextField" class="udex-country-selector__text" value="${ifDefined(this.selectedCountryName)}" value-state="${ifDefined(this.valueState)}" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name="${ifDefined(this.supportingText)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?active="${this._open}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" @mousedown="${this.handleInputMouseDown}" icon="${ifDefined(this.triggerIcon)}" accessible-icon-name="${ifDefined(this.effectiveAriaLabel)}" maxlength="0"></${scopeTag("udex-text-field", tags, suffix)}></div>${ifDefined(this.searchableList)}</${scopeTag("udex-dropdown", tags, suffix)}>${ this.supportingText ? block2.call(this, context, tags, suffix) : undefined }</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)}" @ui5-handle-close-search="${ifDefined(this.handleCloseSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" slot="trigger">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<udex-text-field label="${ifDefined(this.effectiveAriaLabel)}" id="udexTextField" class="udex-country-selector__text" value="${ifDefined(this.selectedCountryName)}" value-state="${ifDefined(this.valueState)}" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name="${ifDefined(this.supportingText)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?active="${this._open}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" @mousedown="${this.handleInputMouseDown}" icon="${ifDefined(this.triggerIcon)}" accessible-icon-name="${ifDefined(this.effectiveAriaLabel)}" maxlength="0"></udex-text-field></div>${ifDefined(this.searchableList)}</udex-dropdown>${ this.supportingText ? block2.call(this, context, tags, suffix) : undefined }</div> `;}
+function block1 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-country-selector__image" design="Default" aria-label="${ifDefined(this.flagAriaLabel)}" 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("udex-status-message", tags, suffix)} ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></${scopeTag("udex-status-message", tags, suffix)}>` : html`<udex-status-message ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></udex-status-message>`;}
 
 
 export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type DatePicker from "../../DatePicker.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: DatePicker, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-date-picker__container"><${scopeTag("udex-text-field", tags, suffix)} @click="${this.handleInputClick}" @mousedown="${this.handleInputMouseDown}" @keydown="${this.handleInputKeyDown}" class="udex-date-picker__input udex-date-picker__trigger" label="${ifDefined(this.label)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.accessibleIconName)}" aria-haspopup="grid" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" icon="appointment-2" value-state="${ifDefined(this.valueState)}"></${scopeTag("udex-text-field", tags, suffix)}>${ this.supportingText ? block1.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-date-picker__container"><udex-text-field @click="${this.handleInputClick}" @mousedown="${this.handleInputMouseDown}" @keydown="${this.handleInputKeyDown}" class="udex-date-picker__input udex-date-picker__trigger" label="${ifDefined(this.label)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.accessibleIconName)}" aria-haspopup="grid" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" icon="appointment-2" value-state="${ifDefined(this.valueState)}"></udex-text-field>${ this.supportingText ? block1.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: DatePicker, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-date-picker__container"><${scopeTag("udex-text-field", tags, suffix)} @click="${this.handleInputClick}" @mousedown="${this.handleInputMouseDown}" @keydown="${this.handleInputKeyDown}" class="udex-date-picker__input udex-date-picker__trigger" label="${ifDefined(this.label)}" accessible-name="${ifDefined(this.dateAccessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.accessibleIconName)}" _aria-has-popup="grid" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" icon="appointment-2" value-state="${ifDefined(this.valueState)}"></${scopeTag("udex-text-field", tags, suffix)}>${ this.supportingText ? block1.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-date-picker__container"><udex-text-field @click="${this.handleInputClick}" @mousedown="${this.handleInputMouseDown}" @keydown="${this.handleInputKeyDown}" class="udex-date-picker__input udex-date-picker__trigger" label="${ifDefined(this.label)}" accessible-name="${ifDefined(this.dateAccessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.accessibleIconName)}" _aria-has-popup="grid" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" icon="appointment-2" value-state="${ifDefined(this.valueState)}"></udex-text-field>${ this.supportingText ? block1.call(this, context, tags, suffix) : undefined }</div>`;}
 function block1 (this: DatePicker, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-message", tags, suffix)} ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></${scopeTag("udex-status-message", tags, suffix)}>` : html`<udex-status-message ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></udex-status-message>`;}
 
 

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

@@ -4,8 +4,8 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Dropdown from "../../Dropdown.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Dropdown, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-dropdown">${ this.hasTriggerSlot ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}_udex-dropdown" class="udex-dropdown__pane" ?allow-target-overlap="${this.disableAllowTargetOverlap}" hide-arrow placement-type="${ifDefined(this.placementType)}" horizontal-align="${ifDefined(this.horizontalAlign)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-role="${ifDefined(this.accessibleRole)}" @ui5-after-open=${ifDefined(this.afterDropdownOpen)} @ui5-before-open=${ifDefined(this.beforeDropdownOpen)} @ui5-after-close=${ifDefined(this.afterDropdownClose)} @ui5-before-close=${ifDefined(this.beforeDropdownClose)}>${ this.hasHeaderSlot ? block2.call(this, context, tags, suffix) : undefined }<slot></slot>${ this.hasFooterSlot ? block3.call(this, context, tags, suffix) : undefined }</${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-dropdown">${ this.hasTriggerSlot ? block1.call(this, context, tags, suffix) : undefined }<ui5-popover id="${ifDefined(this._id)}_udex-dropdown" class="udex-dropdown__pane" ?allow-target-overlap="${this.disableAllowTargetOverlap}" hide-arrow placement-type="${ifDefined(this.placementType)}" horizontal-align="${ifDefined(this.horizontalAlign)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-role="${ifDefined(this.accessibleRole)}" @ui5-after-open=${ifDefined(this.afterDropdownOpen)} @ui5-before-open=${ifDefined(this.beforeDropdownOpen)} @ui5-after-close=${ifDefined(this.afterDropdownClose)} @ui5-before-close=${ifDefined(this.beforeDropdownClose)}>${ this.hasHeaderSlot ? block2.call(this, context, tags, suffix) : undefined }<slot></slot>${ this.hasFooterSlot ? block3.call(this, context, tags, suffix) : undefined }</ui5-popover></div>`;}
-function block1 (this: Dropdown, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-dropdown__opener" role="${ifDefined(this.triggerAccessibleRole)}" aria-label="${ifDefined(this.triggerAccessibleName)}" aria-expanded="${ifDefined(this.open)}" aria-haspopup="true" aria-controls="${ifDefined(this._id)}_udex-dropdown" @click="${this.onTriggerClick}"><slot slot="trigger" name="trigger"></slot></div>`;}
+function block0 (this: Dropdown, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-dropdown">${ this.hasTriggerSlot ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}_udex-dropdown" class="udex-dropdown__pane" ?allow-target-overlap="${this.disableAllowTargetOverlap}" hide-arrow .open="${ifDefined(this.open)}" opener="${ifDefined(this._id)}-trigger" placement-type="${ifDefined(this.placementType)}" horizontal-align="${ifDefined(this.horizontalAlign)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-role="${ifDefined(this.accessibleRole)}" @ui5-after-open=${ifDefined(this.afterDropdownOpen)} @ui5-before-open=${ifDefined(this.beforeDropdownOpen)} @ui5-after-close=${ifDefined(this.afterDropdownClose)} @ui5-before-close=${ifDefined(this.beforeDropdownClose)}>${ this.hasHeaderSlot ? block2.call(this, context, tags, suffix) : undefined }<slot></slot>${ this.hasFooterSlot ? block3.call(this, context, tags, suffix) : undefined }</${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-dropdown">${ this.hasTriggerSlot ? block1.call(this, context, tags, suffix) : undefined }<ui5-popover id="${ifDefined(this._id)}_udex-dropdown" class="udex-dropdown__pane" ?allow-target-overlap="${this.disableAllowTargetOverlap}" hide-arrow .open="${ifDefined(this.open)}" opener="${ifDefined(this._id)}-trigger" placement-type="${ifDefined(this.placementType)}" horizontal-align="${ifDefined(this.horizontalAlign)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-role="${ifDefined(this.accessibleRole)}" @ui5-after-open=${ifDefined(this.afterDropdownOpen)} @ui5-before-open=${ifDefined(this.beforeDropdownOpen)} @ui5-after-close=${ifDefined(this.afterDropdownClose)} @ui5-before-close=${ifDefined(this.beforeDropdownClose)}>${ this.hasHeaderSlot ? block2.call(this, context, tags, suffix) : undefined }<slot></slot>${ this.hasFooterSlot ? block3.call(this, context, tags, suffix) : undefined }</ui5-popover></div>`;}
+function block1 (this: Dropdown, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-dropdown__opener" role="${ifDefined(this.triggerAccessibleRole)}" aria-label="${ifDefined(this.triggerAccessibleName)}" aria-expanded="${ifDefined(this.open)}" aria-haspopup="true" aria-controls="${ifDefined(this._id)}_udex-dropdown" id="${ifDefined(this._id)}-trigger" @click="${this.onTriggerClick}"><slot slot="trigger" name="trigger"></slot></div>`;}
 function block2 (this: Dropdown, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot slot="header" name="header"></slot>`;}
 function block3 (this: Dropdown, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot slot="footer" name="footer"></slot>`;}
 

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type FilterMenu from "../../FilterMenu.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-dropdown", tags, suffix)} id="${ifDefined(this._id)}_dropdown-menu" class="udex-filter-menu" ?disable-target-overlap="${this.disableTargetOverlap}" placement-type="${ifDefined(this.placementType)}" horizontal-align="${ifDefined(this.horizontalAlign)}" height="${ifDefined(this.height)}" accessible-role="${ifDefined(this.accessibleRole)}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @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.onDropdownClose}" @search-keydown="${this.handleKeyDownSearch}" @keydown="${this.handleKeyDownList}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}"><button aria-label="${ifDefined(this.accessibleName)}" aria-expanded="${ifDefined(this._open)}" aria-haspopup="true" role="${ifDefined(this.triggerAccessibleRole)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" ?disabled="${this.disabled}" class="udex-filter-menu__trigger" slot="trigger" tabindex="0">${ this.hasFilterNamePrefix ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-filter-menu__trigger-wrap" ?disabled="${this.disabled}"><span class="udex-filter-menu__trigger-name">${ifDefined(this.filterName)}</span>${ this.badgeValue ? block2.call(this, context, tags, suffix) : undefined }<${scopeTag("ui5-icon", tags, suffix)} class="udex-filter-menu__trigger-icon" name="navigation-down-arrow" accessible-name="${ifDefined(this._iconAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></span></button>${ifDefined(this.searchableList)}${ this.modeMultiSelect ? block3.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-dropdown", tags, suffix)}> ` : html`<udex-dropdown id="${ifDefined(this._id)}_dropdown-menu" class="udex-filter-menu" ?disable-target-overlap="${this.disableTargetOverlap}" placement-type="${ifDefined(this.placementType)}" horizontal-align="${ifDefined(this.horizontalAlign)}" height="${ifDefined(this.height)}" accessible-role="${ifDefined(this.accessibleRole)}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @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.onDropdownClose}" @search-keydown="${this.handleKeyDownSearch}" @keydown="${this.handleKeyDownList}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}"><button aria-label="${ifDefined(this.accessibleName)}" aria-expanded="${ifDefined(this._open)}" aria-haspopup="true" role="${ifDefined(this.triggerAccessibleRole)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" ?disabled="${this.disabled}" class="udex-filter-menu__trigger" slot="trigger" tabindex="0">${ this.hasFilterNamePrefix ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-filter-menu__trigger-wrap" ?disabled="${this.disabled}"><span class="udex-filter-menu__trigger-name">${ifDefined(this.filterName)}</span>${ this.badgeValue ? block2.call(this, context, tags, suffix) : undefined }<ui5-icon class="udex-filter-menu__trigger-icon" name="navigation-down-arrow" accessible-name="${ifDefined(this._iconAccessibleNameText)}"></ui5-icon></span></button>${ifDefined(this.searchableList)}${ this.modeMultiSelect ? block3.call(this, context, tags, suffix) : undefined }</udex-dropdown> `;}
+function block0 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div><button id="filterMenuTrigger" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeydown}" aria-label="${ifDefined(this.triggerButtonAccessibleName)}" aria-expanded="${ifDefined(this._open)}" aria-haspopup="true" role="${ifDefined(this.triggerAccessibleRole)}" aria-controls="${ifDefined(this._id)}_udex-filter-menu-dropdown" ?disabled="${this.disabled}" class="udex-filter-menu__trigger" tabindex="0">${ this.hasFilterNamePrefix ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-filter-menu__trigger-wrap" ?disabled="${this.disabled}"><span class="udex-filter-menu__trigger-name">${ifDefined(this.filterName)}</span>${ this.badgeValue ? block2.call(this, context, tags, suffix) : undefined }<${scopeTag("ui5-icon", tags, suffix)} class="udex-filter-menu__trigger-icon" name="navigation-down-arrow" accessible-name="${ifDefined(this._iconAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></span></button><${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}_udex-filter-menu-dropdown" hide-arrow ?allow-target-overlap="${this.disableAllowTargetOverlap}" placement-type="${ifDefined(this.placementType)}" horizontal-align="${ifDefined(this.horizontalAlign)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @keydown="${this.handleKeyDownList}" @search-keydown="${this.handleKeyDownSearch}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}">${ifDefined(this.searchableList)}${ this.modeMultiSelect ? block3.call(this, context, tags, suffix) : undefined }</${scopeTag("ui5-popover", tags, suffix)}></div> ` : html`<div><button id="filterMenuTrigger" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeydown}" aria-label="${ifDefined(this.triggerButtonAccessibleName)}" aria-expanded="${ifDefined(this._open)}" aria-haspopup="true" role="${ifDefined(this.triggerAccessibleRole)}" aria-controls="${ifDefined(this._id)}_udex-filter-menu-dropdown" ?disabled="${this.disabled}" class="udex-filter-menu__trigger" tabindex="0">${ this.hasFilterNamePrefix ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-filter-menu__trigger-wrap" ?disabled="${this.disabled}"><span class="udex-filter-menu__trigger-name">${ifDefined(this.filterName)}</span>${ this.badgeValue ? block2.call(this, context, tags, suffix) : undefined }<ui5-icon class="udex-filter-menu__trigger-icon" name="navigation-down-arrow" accessible-name="${ifDefined(this._iconAccessibleNameText)}"></ui5-icon></span></button><ui5-popover id="${ifDefined(this._id)}_udex-filter-menu-dropdown" hide-arrow ?allow-target-overlap="${this.disableAllowTargetOverlap}" placement-type="${ifDefined(this.placementType)}" horizontal-align="${ifDefined(this.horizontalAlign)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @keydown="${this.handleKeyDownList}" @search-keydown="${this.handleKeyDownSearch}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}">${ifDefined(this.searchableList)}${ this.modeMultiSelect ? block3.call(this, context, tags, suffix) : undefined }</ui5-popover></div> `;}
 function block1 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-filter-menu__trigger-prefix">${ifDefined(this.filterNamePrefix)}</span>`;}
 function block2 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-filter-menu__badge" type="Number" design="Info" size="Small">${ifDefined(this.badgeValue)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-filter-menu__badge" type="Number" design="Info" size="Small">${ifDefined(this.badgeValue)}</udex-badge>`;}
 function block3 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ !this.hideActionBar ? block4.call(this, context, tags, suffix) : undefined }`;}

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

@@ -17,24 +17,24 @@ function block9 (this: Footer, context: UI5Element, tags: string[], suffix: stri
 function block10 (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 block11 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-accordion", tags, suffix)} class="udex-footer__accordion">${ this.quickLinksArray.length ? block12.call(this, context, tags, suffix) : undefined }${ this.trendingLinksArray.length ? block14.call(this, context, tags, suffix) : undefined }${ this.aboutLinksArray.length ? block16.call(this, context, tags, suffix) : undefined }${ this.siteInformationLinksArray.length ? block18.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-accordion", tags, suffix)}>` : html`<udex-accordion class="udex-footer__accordion">${ this.quickLinksArray.length ? block12.call(this, context, tags, suffix) : undefined }${ this.trendingLinksArray.length ? block14.call(this, context, tags, suffix) : undefined }${ this.aboutLinksArray.length ? block16.call(this, context, tags, suffix) : undefined }${ this.siteInformationLinksArray.length ? block18.call(this, context, tags, suffix) : undefined }</udex-accordion>`;}
 function block12 (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) => block13.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) => block13.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 block13 (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)}" data-id="${ifDefined(item.id)}" @click="${this._onQuickLinksClick}">${ifDefined(item.title)}</a></li>`;}
+function block13 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a target="${ifDefined(item.target)}" aria-describedby="udex-footer__quick-links" href="${ifDefined(item.url)}" data-id="${ifDefined(item.id)}" @click="${this._onQuickLinksClick}">${ifDefined(item.title)}</a></li>`;}
 function block14 (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) => 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__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) => 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__trending">${ifDefined(this.trendingTitle)}</h3>`;}
-function block15 (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}" data-id="${ifDefined(item.id)}">${ifDefined(item.title)}</a></li>`;}
+function block15 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a target="${ifDefined(item.target)}" aria-describedby="udex-footer__footer__trending" href="${ifDefined(item.url)}" @click="${this._onTrendingClick}" data-id="${ifDefined(item.id)}">${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.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) => 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__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) => 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__about">${ifDefined(this.aboutSapTitle)}</h3>`;}
-function block17 (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)}" data-id="${ifDefined(item.id)}" @click="${this._onAboutSapClick}">${ifDefined(item.title)}</a></li>`;}
+function block17 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a target="${ifDefined(item.target)}" aria-describedby="udex-footer__about" href="${ifDefined(item.url)}" data-id="${ifDefined(item.id)}" @click="${this._onAboutSapClick}">${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.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) => 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__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) => 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__site-information">${ifDefined(this.siteInformationTitle)}</h3>`;}
-function block19 (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)}" data-id="${ifDefined(item.id)}" @click="${this._onSiteInformationClick}">${ifDefined(item.title)}</a></li>`;}
+function block19 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a target="${ifDefined(item.target)}" aria-describedby="udex-footer__site-information" href="${ifDefined(item.url)}" data-id="${ifDefined(item.id)}" @click="${this._onSiteInformationClick}">${ifDefined(item.title)}</a></li>`;}
 function block20 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__links">${ this.quickLinksArray.length ? block21.call(this, context, tags, suffix) : undefined }${ this.trendingLinksArray.length ? block23.call(this, context, tags, suffix) : undefined }${ this.aboutLinksArray.length ? block25.call(this, context, tags, suffix) : undefined }${ this.siteInformationLinksArray.length ? block27.call(this, context, tags, suffix) : undefined }</div>`;}
 function block21 (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) => block22.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block22 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a aria-describedby="udex-footer__quick-links" data-id="${ifDefined(item.id)}" href="${ifDefined(item.url)}" @click="${this._onQuickLinksClick}">${ifDefined(item.title)}</a></li>`;}
+function block22 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a target="${ifDefined(item.target)}" aria-describedby="udex-footer__quick-links" data-id="${ifDefined(item.id)}" href="${ifDefined(item.url)}" @click="${this._onQuickLinksClick}">${ifDefined(item.title)}</a></li>`;}
 function block23 (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) => 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__footer__trending" data-id="${ifDefined(item.id)}" href="${ifDefined(item.url)}" @click="${this._onTrendingClick}">${ifDefined(item.title)}</a></li>`;}
+function block24 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a target="${ifDefined(item.target)}" aria-describedby="udex-footer__footer__trending" data-id="${ifDefined(item.id)}" href="${ifDefined(item.url)}" @click="${this._onTrendingClick}">${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__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) => 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__about" data-id="${ifDefined(item.id)}" href="${ifDefined(item.url)}" @click="${this._onAboutSapClick}">${ifDefined(item.title)}</a></li>`;}
+function block26 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a target="${ifDefined(item.target)}" aria-describedby="udex-footer__about" data-id="${ifDefined(item.id)}" href="${ifDefined(item.url)}" @click="${this._onAboutSapClick}">${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__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) => 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__site-information" data-id="${ifDefined(item.id)}" href="${ifDefined(item.url)}" @click="${this._onSiteInformationClick}">${ifDefined(item.title)}</a></li>`;}
+function block28 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li><a target="${ifDefined(item.target)}" aria-describedby="udex-footer__site-information" data-id="${ifDefined(item.id)}" href="${ifDefined(item.url)}" @click="${this._onSiteInformationClick}">${ifDefined(item.title)}</a></li>`;}
 function block29 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__social-container">${ repeat(this.socialLinksArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block30.call(this, context, tags, suffix, item, index)) }</div>`;}
-function block30 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<a href="${ifDefined(item.url)}" class="udex-footer__social-icon" data-name="${ifDefined(item.name)}" data-id="${ifDefined(item.id)}" @click="${this._onSocialMediaLinkClick}"><img data-name="${ifDefined(item.name)}" data-id="${ifDefined(item.id)}" alt="${ifDefined(item.name)}${ifDefined(this.socialIconAccessibleName)}" src="${ifDefined(item.iconUrl)}" loading="lazy" /></a>`;}
+function block30 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<a target="${ifDefined(item.target)}" href="${ifDefined(item.url)}" class="udex-footer__social-icon" data-name="${ifDefined(item.name)}" data-id="${ifDefined(item.id)}" @click="${this._onSocialMediaLinkClick}"><img data-name="${ifDefined(item.name)}" data-id="${ifDefined(item.id)}" alt="${ifDefined(item.name)}${ifDefined(this.socialIconAccessibleName)}" src="${ifDefined(item.iconUrl)}" loading="lazy" /></a>`;}
 
 
 export default block0;

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

@@ -4,15 +4,14 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type HeroBanner from "../../HeroBanner.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.heroBannerClasses)}" part="wrapper" style="background-color: ${ifDefined(this.wrapperBackgroundColor)}">${ this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</div> `;}
-function block1 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown=${this._handleKeydown}><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<slot id="udex-hero-banner__content" name="content" part="content"></slot>${ this.hasAdditionalContent ? block3.call(this, context, tags, suffix) : undefined }<button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click=${this._toggleMediaButton}><${scopeTag("ui5-icon", tags, suffix)} name=${ifDefined(this.mediaButtonIconName)}></${scopeTag("ui5-icon", tags, suffix)}></button></div>` : html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown=${this._handleKeydown}><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<slot id="udex-hero-banner__content" name="content" part="content"></slot>${ this.hasAdditionalContent ? block3.call(this, context, tags, suffix) : undefined }<button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click=${this._toggleMediaButton}><ui5-icon name=${ifDefined(this.mediaButtonIconName)}></ui5-icon></button></div>`;}
+function block0 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.heroBannerClasses)}" part="wrapper" style="background-color: ${ifDefined(this.wrapperBackgroundColor)}">${ this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div> `;}
+function block1 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown=${this._handleKeydown}><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click=${this._toggleMediaButton}><${scopeTag("ui5-icon", tags, suffix)} name=${ifDefined(this.mediaButtonIconName)}></${scopeTag("ui5-icon", tags, suffix)}></button></div>` : html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown=${this._handleKeydown}><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click=${this._toggleMediaButton}><ui5-icon name=${ifDefined(this.mediaButtonIconName)}></ui5-icon></button></div>`;}
 function block2 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`;}
-function block3 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>`;}
-function block4 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-hero-banner__container">${ this.hasCustomBackgroundPicture ? block5.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot>${ this.hasAdditionalContent ? block8.call(this, context, tags, suffix) : undefined }</div></div>`;}
-function block5 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="backgroundPicture"></slot>`;}
-function block6 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasBackgroundImage ? block7.call(this, context, tags, suffix) : undefined }`;}
-function block7 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`;}
-function block8 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>`;}
+function block3 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-hero-banner__container">${ this.hasCustomBackgroundPicture ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot>${ this.hasAdditionalContent ? block7.call(this, context, tags, suffix) : undefined }</div></div>`;}
+function block4 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="backgroundPicture"></slot>`;}
+function block5 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasBackgroundImage ? block6.call(this, context, tags, suffix) : undefined }`;}
+function block6 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`;}
+function block7 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>`;}
 
 
 export default block0;

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block16.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" aria-labelledby="${ifDefined(this._accessibleNameRef)}" class="${ifDefined(this.className)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" aria-selected="${ifDefined(this.selected)}" aria-current="${ifDefined(this.selected)}" ?divider="${this.divider}" _id="${ifDefined(this._id)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div id="${ifDefined(this._id)}-content" class="udex-list__content-wrap">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block5.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block6.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }${ this.image ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block9.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</div></div></li>`;}
+function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" aria-selected="${ifDefined(this.selected)}" aria-current="${ifDefined(this.selected)}" ?divider="${this.divider}" _id="${ifDefined(this._id)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block5.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block6.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }${ this.image ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block9.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleName)}</div></div></li>`;}
 function block2 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-checkbox", tags, suffix)} class="udex-list__checkbox" part="checkbox" tabindex="-1" ?aria-checked="${this.selected}" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-checkbox", tags, suffix)}>` : html`<udex-checkbox class="udex-list__checkbox" part="checkbox" tabindex="-1" ?aria-checked="${this.selected}" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-checkbox>`;}
 function block3 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-radio-button", tags, suffix)} class="udex-list__radio" part="radio" tabindex="-1" ?aria-checked="${this.selected}" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-radio-button", tags, suffix)}>` : html`<udex-radio-button class="udex-list__radio" part="radio" tabindex="-1" ?aria-checked="${this.selected}" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-radio-button>`;}
 function block4 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
@@ -18,9 +18,9 @@ function block10 (this: ListItem, context: UI5Element, tags: string[], suffix: s
 function block11 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block12.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block13.call(this, context, tags, suffix) : undefined }${ this.editIcon ? block14.call(this, context, tags, suffix) : undefined }${ this.deleteIcon ? block15.call(this, context, tags, suffix) : undefined }`;}
 function block12 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
 function block13 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
-function block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" size="Small"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" size="Small"></udex-button>`;}
-function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></udex-button>`;}
-function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" class="${ifDefined(this.className)}"><div id="${ifDefined(this._id)}-content" class="udex-list__content-wrap">${ this.flag ? block17.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block18.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block19.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block20.call(this, context, tags, suffix) : undefined }${ this.image ? block21.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block22.call(this, context, tags, suffix) : block24.call(this, context, tags, suffix) }</div></div></li>`;}
+function block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" size="Small"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" size="Small"></udex-button>`;}
+function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></udex-button>`;}
+function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" class="${ifDefined(this.className)}"><div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText">${ this.flag ? block17.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block18.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block19.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block20.call(this, context, tags, suffix) : undefined }${ this.image ? block21.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block22.call(this, context, tags, suffix) : block24.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleName)}</div></div></li>`;}
 function block17 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
 function block18 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
 function block19 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
@@ -31,8 +31,8 @@ function block23 (this: ListItem, context: UI5Element, tags: string[], suffix: s
 function block24 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block25.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block26.call(this, context, tags, suffix) : undefined }${ this.editIcon ? block27.call(this, context, tags, suffix) : undefined }${ this.deleteIcon ? block28.call(this, context, tags, suffix) : undefined }`;}
 function block25 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
 function block26 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
-function block27 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" size="Small"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" size="Small"></udex-button>`;}
-function block28 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></udex-button>`;}
+function block27 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" size="Small"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" size="Small"></udex-button>`;}
+function block28 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></udex-button>`;}
 
 
 export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type ListSelectAll from "../../ListSelectAll.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: ListSelectAll, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<ul class="udex-list__group-list"><li part="item" class="udex-list__group"><ul class="${ifDefined(this.groupListClassName)}" @ui5-item-press="${ifDefined(this.handleSelectAllGroupItemsPress)}"><${scopeTag("udex-list-item", tags, suffix)} _tab-index="${ifDefined(this._effectiveTabIndex)}" role="list" _additional-class-name="${ifDefined(this.additionalClassName)}" class="${ifDefined(this.className)}" ?selected="${this.selected}" aria-selected="${ifDefined(this.selected)}" ?indeterminate="${this.indeterminate}" mode="${ifDefined(this.multiselectMode)}" part="group-item" @click="${this.handleSelectAllPress}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @keydown="${this.handleKeyDownPress}" divider>${ifDefined(this.selectAllLabel)}</${scopeTag("udex-list-item", tags, suffix)}><slot></slot></ul></li></ul>` : html`<ul class="udex-list__group-list"><li part="item" class="udex-list__group"><ul class="${ifDefined(this.groupListClassName)}" @ui5-item-press="${ifDefined(this.handleSelectAllGroupItemsPress)}"><udex-list-item _tab-index="${ifDefined(this._effectiveTabIndex)}" role="list" _additional-class-name="${ifDefined(this.additionalClassName)}" class="${ifDefined(this.className)}" ?selected="${this.selected}" aria-selected="${ifDefined(this.selected)}" ?indeterminate="${this.indeterminate}" mode="${ifDefined(this.multiselectMode)}" part="group-item" @click="${this.handleSelectAllPress}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @keydown="${this.handleKeyDownPress}" divider>${ifDefined(this.selectAllLabel)}</udex-list-item><slot></slot></ul></li></ul>`;}
+function block0 (this: ListSelectAll, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<ul class="udex-list__group-list"><li part="item" class="udex-list__group"><ul class="${ifDefined(this.groupListClassName)}" @ui5-item-press="${ifDefined(this.handleSelectAllGroupItemsPress)}"><${scopeTag("udex-list-item", tags, suffix)} _tab-index="${ifDefined(this._effectiveTabIndex)}" role="list" _additional-class-name="${ifDefined(this.additionalClassName)}" class="${ifDefined(this.className)}" ?selected="${this.selected}" aria-current="${ifDefined(this.selected)}" ?indeterminate="${this.indeterminate}" mode="${ifDefined(this.multiselectMode)}" part="group-item" @click="${this.handleSelectAllPress}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @keydown="${this.handleKeyDownPress}" divider>${ifDefined(this.selectAllLabel)}</${scopeTag("udex-list-item", tags, suffix)}><slot></slot></ul></li></ul>` : html`<ul class="udex-list__group-list"><li part="item" class="udex-list__group"><ul class="${ifDefined(this.groupListClassName)}" @ui5-item-press="${ifDefined(this.handleSelectAllGroupItemsPress)}"><udex-list-item _tab-index="${ifDefined(this._effectiveTabIndex)}" role="list" _additional-class-name="${ifDefined(this.additionalClassName)}" class="${ifDefined(this.className)}" ?selected="${this.selected}" aria-current="${ifDefined(this.selected)}" ?indeterminate="${this.indeterminate}" mode="${ifDefined(this.multiselectMode)}" part="group-item" @click="${this.handleSelectAllPress}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @keydown="${this.handleKeyDownPress}" divider>${ifDefined(this.selectAllLabel)}</udex-list-item><slot></slot></ul></li></ul>`;}
 
 
 export default block0;