@sapudex/web-components 2.22.0 → 2.24.0

package/src/TagGroup.ts

@@ -10,12 +10,12 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import UDExTag from "./Tag.js";
 import UDExTooltip from "./Tooltip.js";
+import { Placement } from "./types/Dropdown.js";
 
 import TagGroupTemplate from "./TagGroupTemplate.js";
 
 // Styles
 import TagGroupCss from "./generated/themes/TagGroup.css.js";
-import { Placement } from "./types/Dropdown.js";
 
 type UDExTagClickEventDetail = {
   tag: UDExTag,
@@ -96,6 +96,7 @@ class UDExTagGroup extends UI5Element {
    */
   @property({ type: Boolean })
     tokenizerExpanded: boolean = false;
+
   /**
    * Defines whether the component is in disabled state.
    *
@@ -126,6 +127,7 @@ class UDExTagGroup extends UI5Element {
   /**
    * Defines the tags.
    *
+   * @default "[]"
    * @public
    */
   @slot({ type: HTMLElement, "default": true })
@@ -141,11 +143,32 @@ class UDExTagGroup extends UI5Element {
     tooltipPlacement: `${Placement}` = Placement.Bottom;
 
   /**
+   * Determines whether there are hidden tags in the component.
+   *
+   * @default false
    * @private
    */
   @property({ type: Boolean })
     _isHiddenTags!: boolean;
 
+  /**
+   * Determines whether the "More" button should skip focus.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _skipMoreButtonFocus!: boolean;
+
+  /**
+   * Determines whether the tokenizer should scroll to the end.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _scrollToEnd: boolean = false;
+
   _tokenizer!: Tokenizer;
   _nMoreBtn!: HTMLElement | null;
   _resizeHandler: () => void;
@@ -155,25 +178,33 @@ class UDExTagGroup extends UI5Element {
     this._resizeHandler = this._onResize.bind(this);
   }
 
-  get hiddenTags(): Token[] {
-    return this._tokenizer?.overflownTokens || [];
-  }
-
-  get isReadOrDisplayOnly(): boolean {
-    return this.readonly || this.displayonly;
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._resizeHandler);
   }
 
-  get tokenizer(): Tokenizer {
-    return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._resizeHandler);
+    this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
   }
 
   onAfterRendering(): void {
     this._tokenizer = this.tokenizer;
     this._nMoreBtn = this._tokenizer.moreLink || null;
+
     if (!this.readonly && !this.disabled && this._nMoreBtn && !this._nMoreBtn.hasAttribute("tabindex")) {
       this._nMoreBtn.setAttribute("tabindex", "0");
       this._nMoreBtn.addEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
     }
+
+    if (!this.displayonly && this._skipMoreButtonFocus && this._nMoreBtn) {
+      this._nMoreBtn.setAttribute("tabindex", "-1");
+    }
+
+    if (this._scrollToEnd) {
+      setTimeout(() => {
+        this._tokenizer.scrollToEnd();
+      }, 50);
+    }
   }
 
   _nMoreKeyDownHandler(e: Event) {
@@ -182,15 +213,6 @@ class UDExTagGroup extends UI5Element {
     }
   }
 
-  onEnterDOM(): void {
-    ResizeHandler.register(this, this._resizeHandler);
-  }
-
-  onExitDOM(): void {
-    ResizeHandler.deregister(this, this._resizeHandler);
-    this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
-  }
-
   _onResize(): void {
     this._isHiddenTags = false;
     this._isHiddenTags = this._tokenizer?._nMoreCount > 0;
@@ -213,7 +235,7 @@ class UDExTagGroup extends UI5Element {
   handleTagKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
 
-    if (isEscape(e)) {
+    if (isEscape(e) && this.tooltip) {
       this.tooltip.open = false;
       this._nMoreBtn?.focus();
       return;
@@ -233,6 +255,18 @@ class UDExTagGroup extends UI5Element {
     }
   }
 
+  get hiddenTags(): Token[] {
+    return this._tokenizer?.overflownTokens || [];
+  }
+
+  get isReadOrDisplayOnly(): boolean {
+    return this.readonly || this.displayonly;
+  }
+
+  get tokenizer(): Tokenizer {
+    return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;
+  }
+
   get tooltip(): UDExTooltip {
     return this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
   }

package/src/TagTemplate.tsx

@@ -1,6 +1,8 @@
 import type UDExTag from "./Tag.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+// Move it to SelectBox template after rewriting to TSX
+import { cleanLabel } from "./utils/listItemLabelUtils.js";
 
 export default function TagTemplate(this: UDExTag) {
   const rootClass = "udex-tag";
@@ -8,7 +10,7 @@ export default function TagTemplate(this: UDExTag) {
   return (
     this.readOnly ? (
       <div class={this.tagClasses}>
-        <span class={`${rootClass}__text`}>{this.text}</span>
+        <span class={`${rootClass}__text`}>{cleanLabel(this.text)}</span>
       </div>
     ) : this.href ? (
       <a class={this.tagClasses}
@@ -44,7 +46,7 @@ function tagContent(this: UDExTag, rootClass: string, isIconClickable: boolean =
       {this.startIcon && (
         isIconBtn ? tagBtnIcon.call(this, rootClass, "start")
           : tagIcon.call(this, rootClass, "start", isIconClickable))}
-      <span class={`${rootClass}__text`}>{this.text}</span>
+      <span class={`${rootClass}__text`}>{cleanLabel(this.text)}</span>
       {this.endIcon && (
         isIconBtn ? tagBtnIcon.call(this, rootClass, "end")
           : tagIcon.call(this, rootClass, "end", isIconClickable))}

package/src/TextArea.ts

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -23,7 +23,7 @@ import "@ui5/webcomponents-icons/dist/alert.js";
 
 import UDExStatusMessage from "./StatusMessage.js";
 import UDExValueState from "./types/common.js";
-import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
+import TextAreaTemplate from "./TextAreaTemplate.js";
 
 // Styles
 import TextAreaCss from "./generated/themes/TextArea.css.js";
@@ -39,7 +39,7 @@ import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
  */
 @customElement({
   tag: "udex-textarea",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [TextAreaCss, getEffectiveScrollbarStyle()],
   template: TextAreaTemplate,
   dependencies: [UDExStatusMessage],
@@ -320,8 +320,8 @@ class UDExTextArea extends UI5Element {
     return this.getDomRef()!.querySelector<HTMLTextAreaElement>("textarea")!;
   }
 
-  get ariaInvalid(): string | null {
-    return this.valueState === UDExValueState.Error ? "true" : null;
+  get _ariaInvalid(): boolean {
+    return this.valueState === UDExValueState.Error;
   }
 
   get hasValueState(): boolean {

package/src/TextAreaTemplate.tsx

@@ -0,0 +1,67 @@
+import type TextArea from "./TextArea.js";
+import UDExStatusMessage from "./StatusMessage.js";
+
+export default function TextAreaTemplate(this: TextArea) {
+  const rootClass = "udex-textarea";
+  const hiddenClass = "hidden-text";
+
+  return (
+    <div class={`${rootClass}`}>
+      <div class={`${rootClass}__wrapper`}>
+        {this.label
+          ? <label class={this.labelClasses} for="textarea" part="label">
+            {this.label}{this.required && " * "}
+          </label>
+          : <label class="hidden-label" for="textarea">
+            {this.textHiddenLabel}
+          </label>
+        }
+        <textarea
+          id="textarea"
+          class={`${rootClass}__field`}
+          part="textarea"
+          value={this.value}
+          maxlength={this.maxlength}
+          rows={this.rows}
+          disabled={this.disabled}
+          readonly={this.isInputReadonly}
+          required={this.required}
+          aria-label={this.accessibleName}
+          aria-describedby={this.ariaDescribedBy}
+          aria-labelledby={this.accessibleNameRef}
+          aria-required={this.required}
+          aria-readonly={this.isInputReadonly}
+          aria-invalid={this._ariaInvalid}
+          onInput={this.handleInput}
+          onFocus={this.handleFocus}
+          onClick={this.handleClick}
+          onBlur={this.handleBlur}
+          onChange={this.handleChange}>
+        </textarea>
+      </div>
+      {this._supportingText &&
+        <>
+          <UDExStatusMessage
+            supporting-text={this._supportingText}
+            supporting-text-alignment="Right"
+            value-state={this.valueState}
+            disabled={this.disabled ? "true" : undefined}>
+          </UDExStatusMessage>
+          <span id={`${this._id}-supportingTextDesc`} class={hiddenClass}>
+            {this._supportingText}
+          </span>
+        </>
+      }
+      {this.hasValueState &&
+        <span id={`${this._id}-valueStateDesc`} class={hiddenClass}>
+          {this.ariaValueStateHiddenText}
+        </span>
+      }
+      {this.readonly &&
+        <span id={`${this._id}-readonlyDesc`} class={hiddenClass}>
+          {this.readOnlyText}
+        </span>
+      }
+    </div>
+  );
+}

package/src/TextField.ts

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -9,18 +9,13 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import {
-  VALUE_STATE_SUCCESS,
-  VALUE_STATE_INFORMATION,
-  VALUE_STATE_WARNING,
-  VALUE_STATE_ERROR,
-  READ_ONLY,
+  VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_WARNING, VALUE_STATE_ERROR, READ_ONLY,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExControlButton from "./ControlButton.js";
-import UDExValueState from "./types/common.js";
+import UDExValueState, { valueStateToControlButtonDesign } from "./types/common.js";
+import type UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 import UDExStatusMessage from "./StatusMessage.js";
-
-// Template
-import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit.js";
+import TextFieldTemplate from "./TextFieldTemplate.js";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
@@ -37,6 +32,14 @@ type UDExTextFieldKeydownEventDetail = {
   keyboardEvent: KeyboardEvent;
 }
 
+type UDExTextFieldChangeEventDetail = {
+  originalEvent: Event,
+}
+
+type UDExTextFieldBlurEventDetail = {
+  originalEvent: FocusEvent,
+}
+
 /**
  * @class
  *
@@ -47,24 +50,30 @@ type UDExTextFieldKeydownEventDetail = {
  */
 @customElement({
   tag: "udex-text-field",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: TextFieldCss,
   template: TextFieldTemplate,
   dependencies: [UDExControlButton, Icon, UDExStatusMessage],
 })
 
 /**
-   * Fired when the value of the component changes at each keystroke.
-   *
-   * @public
-   */
+ * Fired when the value of the component changes at each keystroke.
+ *
+ * @public
+ */
 @event("input", { bubbles: true })
 /**
-   * Fired when the input operation has finished by pressing Enter or on focusout.
-   *
-   * @public
-   */
+ * Fired when the input operation has finished by pressing Enter or on focusout.
+ *
+ * @public
+ */
 @event("change", { bubbles: true })
+/**
+ * Fired on input focusout.
+ *
+ * @public
+ */
+@event("blur", { bubbles: true })
 /**
  * Fired event when the user clicks the icon.
  *
@@ -83,7 +92,8 @@ class UDExTextField extends UI5Element {
   eventDetails!: {
     "keydown": UDExTextFieldKeydownEventDetail,
     "input": void,
-    "change": void,
+    "change": UDExTextFieldChangeEventDetail,
+    "blur": UDExTextFieldBlurEventDetail,
     "click-icon": void,
   };
   _labelActiveClassName = "udex-text-field__label_active";
@@ -140,6 +150,15 @@ class UDExTextField extends UI5Element {
   @property()
     accessibleName!: string;
 
+  /**
+   * Defines the name of the input element.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    name!: string;
+
   /**
    * Receives id (or many ids) of the elements that label the component.
    * @default ""
@@ -148,6 +167,15 @@ class UDExTextField extends UI5Element {
   @property()
     accessibleNameRef: string = "";
 
+  /**
+   * Defines the ref of the input element.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    fieldRef?: ((el: HTMLInputElement | null) => void) | { current: HTMLInputElement | null };
+
   /**
    * Defines the accessible ARIA name of the component.
    *
@@ -382,8 +410,8 @@ class UDExTextField extends UI5Element {
     this.fireDecoratorEvent("keydown", { keyboardEvent: e });
   }
 
-  handleChange = (): void => {
-    this.fireDecoratorEvent("change");
+  handleChange = (e: Event): void => {
+    this.fireDecoratorEvent("change", { originalEvent: e });
   };
 
   handleInput = (inputEvent: InputEvent) => {
@@ -403,7 +431,8 @@ class UDExTextField extends UI5Element {
     }
   };
 
-  handleBlur = (): void => {
+  handleBlur = (e: FocusEvent): void => {
+    this.fireDecoratorEvent("blur", { originalEvent: e });
     this.active = false;
 
     if (this.value) {
@@ -488,9 +517,13 @@ class UDExTextField extends UI5Element {
     const label = this._isComboboxRole ? this.value : "";
     return `${label} ${this.supportingText || ""} ${this.valueStateText}`;
   }
+
+  get controlButtonDesign(): UDExControlButtonDesign {
+    return valueStateToControlButtonDesign[this.valueState];
+  }
 }
 
 UDExTextField.define();
 
 export default UDExTextField;
-export type { UDExTextFieldKeydownEventDetail };
+export type { UDExTextFieldKeydownEventDetail, UDExTextFieldChangeEventDetail, UDExTextFieldBlurEventDetail };

package/src/TextFieldTemplate.tsx

@@ -0,0 +1,90 @@
+import type TextField from "./TextField.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import type { Booleanish } from "@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js";
+import UDExControlButton from "./ControlButton.js";
+import UDExStatusMessage from "./StatusMessage.js";
+
+export default function TextFieldTemplate(this: TextField) {
+  const rootClass = "udex-text-field";
+  const hiddenClass = "hidden-text";
+
+  return (
+    <div class={`${rootClass}__container`}>
+      {this.label &&
+        <label for={`${this._id}-input`} class={this.labelClasses} part="label">
+          {this.label}{this.required && " * "}
+        </label>
+      }
+      <div class={`${rootClass}__wrap`}>
+        <input id={`${this._id}-input`} class={`${rootClass}__input`}
+          type={this.type}
+          value={this.value}
+          maxlength={this.maxlength}
+          disabled={this.disabled}
+          readonly={this.isInputReadonly}
+          required={this.required}
+          aria-required={this.required}
+          aria-readonly={this.isInputReadonly}
+          autocomplete={this.autocomplete}
+          role={this.inputRole as AriaRole}
+          name={this.name}
+          ref={this.fieldRef}
+          aria-disabled={this.readonlyNotDisabled}
+          aria-invalid={this.accInfo.ariaInvalid as Booleanish}
+          aria-describedby={this.accInfo.ariaDescribedBy}
+          aria-haspopup={this.accInfo.ariaHasPopup as Booleanish}
+          aria-label={this.accInfo.ariaLabel}
+          part="textfield-input"
+          min={this.min}
+          max={this.max}
+          step={this.step}
+          onChange={this.handleChange}
+          onInput={this.handleInput}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          onClick={this.handleClick}
+          onKeyDown={this.handleKeydown} />
+        {this.icon &&
+          <UDExControlButton
+            part="textfield-control-btn"
+            class={`${rootClass}__icon-container`}
+            size="Large"
+            tooltip={this.showButtonTooltip}
+            active={this.active}
+            disabled={this.disabled}
+            readonly={this.readonly}
+            non-interactive={this.readonly}
+            design={this.controlButtonDesign}
+            icon={this.icon}
+            _is-combobox-role={this._isComboboxRole}
+            accessible-name={this.buttonAccessibleName}
+            accessible-description={this.buttonAccessibleDescription}
+            onClick={this.handleIconClick}>
+          </UDExControlButton>
+        }
+      </div>
+      {this.supportingText &&
+        <>
+          <UDExStatusMessage
+            supporting-text={this.supportingText}
+            value-state={this.valueState}
+            disabled={this.disabled ? "true" : undefined}>
+          </UDExStatusMessage>
+          <span id={`${this._id}-supportingTextDesc`} class={hiddenClass}>
+            {this.supportingText}
+          </span>
+        </>
+      }
+      {this.hasValueState &&
+        <span id={`${this._id}-valueStateDesc`} class={hiddenClass}>
+          {this.valueStateText}
+        </span>
+      }
+      {this.readonly &&
+        <span id={`${this._id}-stateReadOnlyDesc`} class={hiddenClass}>
+          {this.readOnlyStateText}
+        </span>
+      }
+    </div>
+  );
+}

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

@@ -5,8 +5,8 @@ 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)}"><div id="udex-${ifDefined(this._id)}-country-selector__opener" class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" @click="${this.handleTriggerClick}" 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)}" supporting-text="${ifDefined(this.supportingText)}" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name="${ifDefined(this.supportingText)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @ui5-click-icon="${ifDefined(this.handleTriggerClick)}" @mousedown="${this.handleInputMouseDown}" icon="${ifDefined(this.triggerIcon)}" accessible-icon-name="${ifDefined(this.effectiveAriaLabel)}" maxlength="0" _is-combobox-role></${scopeTag("udex-text-field", tags, suffix)}></div><${scopeTag("udex-dropdown", tags, suffix)} id="dropdown" opener="udex-${ifDefined(this._id)}-country-selector__opener" horizontal-align="Start" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-open="${ifDefined(this._dropdownOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-close="${ifDefined(this._dropdownClose)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-search-keydown="${ifDefined(this.handleKeyDownSearch)}" @keydown="${this.handleKeyDownDropdown}">${ifDefined(this.searchableList)}</${scopeTag("udex-dropdown", tags, suffix)}></div> ` : html`<div class="${ifDefined(this.countrySelectorClasses)}"><div id="udex-${ifDefined(this._id)}-country-selector__opener" class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" @click="${this.handleTriggerClick}" 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)}" supporting-text="${ifDefined(this.supportingText)}" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name="${ifDefined(this.supportingText)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @ui5-click-icon="${ifDefined(this.handleTriggerClick)}" @mousedown="${this.handleInputMouseDown}" icon="${ifDefined(this.triggerIcon)}" accessible-icon-name="${ifDefined(this.effectiveAriaLabel)}" maxlength="0" _is-combobox-role></udex-text-field></div><udex-dropdown id="dropdown" opener="udex-${ifDefined(this._id)}-country-selector__opener" horizontal-align="Start" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-open="${ifDefined(this._dropdownOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-close="${ifDefined(this._dropdownClose)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-search-keydown="${ifDefined(this.handleKeyDownSearch)}" @keydown="${this.handleKeyDownDropdown}">${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" aria-label="${ifDefined(this.flagAriaLabel)}" style="background-position-x: ${ifDefined(this.selectedCountryFlagX)}; background-position-y: ${ifDefined(this.selectedCountryFlagY)}">`;}
+function block0 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ !this.hideFlagImages ? block1.call(this, context, tags, suffix) : undefined } `;}
+function block1 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-text-field__image" aria-label="${ifDefined(this.flagAriaLabel)}" style="background-position-x: ${ifDefined(this.selectedCountryFlagX)}; background-position-y: ${ifDefined(this.selectedCountryFlagY)}">`;}
 
 function template(this: CountrySelector) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

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

@@ -8,7 +8,7 @@ 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 ? block20.call(this, context, tags, suffix) : undefined } `;}
 function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" role="${ifDefined(this.roleItem)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?divider="${this.divider}" _id="${ifDefined(this._id)}" data-selected="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.itemDescribedBy)}">${ 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" aria-label="${ifDefined(this.accessibleListItemName)}">${ 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 ? block10.call(this, context, tags, suffix) : block15.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
 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" ?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" ?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" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?aria-selected="${this.selected}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-radio-button", tags, suffix)}>` : html`<udex-radio-button class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?aria-selected="${this.selected}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-radio-button>`;}
+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" 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" 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>`;}
 function block5 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
 function block6 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}

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

@@ -5,17 +5,18 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type SelectBox from "../../SelectBox.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div class="udex-text-field__wrap"><div role="combobox" @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-tag-icon-click="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="${ifDefined(this.listboxRole)}" aria-controls="${ifDefined(this.popoverId)}" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div></div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><${scopeTag("ui5-popover", tags, suffix)} hide-arrow id="${ifDefined(this.popoverId)}" class="udex-select-box__dropdown" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-after-close="${ifDefined(this.handleDropdownAfterClose)}" @search-keydown="${this.handleKeyDownSearch}" horizontal-align="Start" placement="Bottom">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div class="udex-text-field__wrap"><div role="combobox" @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-tag-icon-click="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="${ifDefined(this.listboxRole)}" aria-controls="${ifDefined(this.popoverId)}" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div></div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><ui5-popover hide-arrow id="${ifDefined(this.popoverId)}" class="udex-select-box__dropdown" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-after-close="${ifDefined(this.handleDropdownAfterClose)}" @search-keydown="${this.handleKeyDownSearch}" horizontal-align="Start" placement="Bottom">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</ui5-popover></div>`;}
-function block1 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="${ifDefined(this.labelClass)}">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</span><span class="hidden" id="${ifDefined(this._id)}-single-label">${ifDefined(this.accInfo.ariaLabel)}</span></span>`;}
-function block2 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
-function block3 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__text-holder"><span class="udex-text-field__single-label" aria-hidden="true">${unsafeHTML(this._singleSelectedOption)}</span></div>`;}
-function block4 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-tag-group", tags, suffix)} class="udex-tag-group" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" tooltip-placement="${ifDefined(this.tooltipPlacement)}" @ui5-tag-click="${ifDefined(this.handleTagClick)}" @ui5-show-more-tags="${ifDefined(this.getHandlerShowMoreItems)}" @ui5-tag-keydown="${ifDefined(this.handleKeyDownTag)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.selectedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-tag-group", tags, suffix)}>` : html`<udex-tag-group class="udex-tag-group" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" tooltip-placement="${ifDefined(this.tooltipPlacement)}" @ui5-tag-click="${ifDefined(this.handleTagClick)}" @ui5-show-more-tags="${ifDefined(this.getHandlerShowMoreItems)}" @ui5-tag-keydown="${ifDefined(this.handleKeyDownTag)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.selectedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</udex-tag-group>`;}
-function block5 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ !item.isGroup ? block6.call(this, context, tags, suffix, item, index) : undefined }`;}
-function block6 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} text="${ifDefined(item.label)}" id="${ifDefined(item._id)}" icon="decline"></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag text="${ifDefined(item.label)}" id="${ifDefined(item._id)}" icon="decline"></udex-tag>`;}
-function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button role="combobox" aria-labelledby="${ifDefined(this._id)}-single-label" aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this.accessibilityAttributes.hasPopup)}" class="udex-text-field__trigger" tabindex="${ifDefined(this.triggerTabIndex)}" @keydown="${this.handleKeyDownTrigger}" @click="${this.getHandleMultiSelectOpen}"><${scopeTag("ui5-icon", tags, suffix)} name="navigation-down-arrow"></${scopeTag("ui5-icon", tags, suffix)}><span class="hidden">${ifDefined(this.accessibilityAttributes.ariaLabel)}</span></button>` : html`<button role="combobox" aria-labelledby="${ifDefined(this._id)}-single-label" aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this.accessibilityAttributes.hasPopup)}" class="udex-text-field__trigger" tabindex="${ifDefined(this.triggerTabIndex)}" @keydown="${this.handleKeyDownTrigger}" @click="${this.getHandleMultiSelectOpen}"><ui5-icon name="navigation-down-arrow"></ui5-icon><span class="hidden">${ifDefined(this.accessibilityAttributes.ariaLabel)}</span></button>`;}
-function block8 (this: SelectBox, 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>`;}
+function block0 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this._rootClass)}"><div class="udex-text-field__container"><div class="udex-text-field__wrap" ?displayonly="${this.displayonly}">${ this.showMultiSelectedOptions ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-text-field__input" @focusin="${this.handleInputFocusIn}" @focusout="${this.handleInputFocusOut}" ?readonly="${this.readonly}" ?disabled="${this.isDisabled}" ?open="${this._open}">${ this.label ? block4.call(this, context, tags, suffix) : undefined }${ this.showImageFlags ? block6.call(this, context, tags, suffix) : undefined }<div class="udex-text-field__holder"><input role="combobox" type="text" id="search-input" name="search" class="udex-text-field__search" .value="${ifDefined(this._inputValue)}" @input="${this.handleSearchChange}" @click="${this.handleInputClick}" @keydown="${this.handleKeyDownSearch}" ?disabled="${this.isDisabled}" ?readonly="${this.isReadOrDisplayOnly}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="${ifDefined(this.listboxRole)}" aria-controls="${ifDefined(this.popoverId)}" aria-expanded="${ifDefined(this._open)}" aria-autocomplete="${ifDefined(this._ariaAutoComplete)}" aria-describedby="${ifDefined(this._id)}-aria-describedby" autocomplete="off" />${ this._selectedOption ? block7.call(this, context, tags, suffix) : undefined }</div>${ !this.displayonly ? block8.call(this, context, tags, suffix) : undefined }<${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this.popoverId)}" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-open="${ifDefined(this.fireEventDropdownOpen)}" @ui5-before-close="${ifDefined(this.handleDropdownBeforeClose)}" @ui5-close="${ifDefined(this.handleDropdownClose)}" class="udex-select-box__dropdown" horizontal-align="Start" placement="Bottom" prevent-focus-restore prevent-initial-focus hide-arrow>${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span></div></div>${ this.supportingText ? block11.call(this, context, tags, suffix) : undefined }</div></div>` : html`<div class="${ifDefined(this._rootClass)}"><div class="udex-text-field__container"><div class="udex-text-field__wrap" ?displayonly="${this.displayonly}">${ this.showMultiSelectedOptions ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-text-field__input" @focusin="${this.handleInputFocusIn}" @focusout="${this.handleInputFocusOut}" ?readonly="${this.readonly}" ?disabled="${this.isDisabled}" ?open="${this._open}">${ this.label ? block4.call(this, context, tags, suffix) : undefined }${ this.showImageFlags ? block6.call(this, context, tags, suffix) : undefined }<div class="udex-text-field__holder"><input role="combobox" type="text" id="search-input" name="search" class="udex-text-field__search" .value="${ifDefined(this._inputValue)}" @input="${this.handleSearchChange}" @click="${this.handleInputClick}" @keydown="${this.handleKeyDownSearch}" ?disabled="${this.isDisabled}" ?readonly="${this.isReadOrDisplayOnly}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="${ifDefined(this.listboxRole)}" aria-controls="${ifDefined(this.popoverId)}" aria-expanded="${ifDefined(this._open)}" aria-autocomplete="${ifDefined(this._ariaAutoComplete)}" aria-describedby="${ifDefined(this._id)}-aria-describedby" autocomplete="off" />${ this._selectedOption ? block7.call(this, context, tags, suffix) : undefined }</div>${ !this.displayonly ? block8.call(this, context, tags, suffix) : undefined }<ui5-popover id="${ifDefined(this.popoverId)}" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-open="${ifDefined(this.fireEventDropdownOpen)}" @ui5-before-close="${ifDefined(this.handleDropdownBeforeClose)}" @ui5-close="${ifDefined(this.handleDropdownClose)}" class="udex-select-box__dropdown" horizontal-align="Start" placement="Bottom" prevent-focus-restore prevent-initial-focus hide-arrow>${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</ui5-popover><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span></div></div>${ this.supportingText ? block11.call(this, context, tags, suffix) : undefined }</div></div>`;}
+function block1 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-tag-group", tags, suffix)} class="udex-tag-group" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focusout="${this.resetTagsTabIndexes}" tooltip-placement="${ifDefined(this.tooltipPlacement)}" @ui5-tag-icon-click="${ifDefined(this.handleRemoveTag)}" @ui5-tag-click="${ifDefined(this.handleTagClick)}" @ui5-show-more-tags="${ifDefined(this.handlerShowMoreItems)}" @ui5-tag-keydown="${ifDefined(this.handleKeyDownTag)}" ?tokenizer-expanded="${this.tokenizerExpanded}" _skip-more-button-focus>${ repeat(this.selectedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-tag-group", tags, suffix)}>` : html`<udex-tag-group class="udex-tag-group" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focusout="${this.resetTagsTabIndexes}" tooltip-placement="${ifDefined(this.tooltipPlacement)}" @ui5-tag-icon-click="${ifDefined(this.handleRemoveTag)}" @ui5-tag-click="${ifDefined(this.handleTagClick)}" @ui5-show-more-tags="${ifDefined(this.handlerShowMoreItems)}" @ui5-tag-keydown="${ifDefined(this.handleKeyDownTag)}" ?tokenizer-expanded="${this.tokenizerExpanded}" _skip-more-button-focus>${ repeat(this.selectedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</udex-tag-group>`;}
+function block2 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ !item.isGroup ? block3.call(this, context, tags, suffix, item, index) : undefined }`;}
+function block3 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} text="${ifDefined(item.label)}" id="${ifDefined(item._id)}" icon="decline"></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag text="${ifDefined(item.label)}" id="${ifDefined(item._id)}" icon="decline"></udex-tag>`;}
+function block4 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="search-input" class="${ifDefined(this.labelClass)}">${ifDefined(this.label)}${ this.required ? block5.call(this, context, tags, suffix) : undefined }</label><span class="hidden" id="${ifDefined(this._id)}-aria-describedby">${ifDefined(this.ariaDescribedbyText)}</span>`;}
+function block5 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`*`;}
+function block6 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ifDefined(this.countryFlag)}`;}
+function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__text-holder"><span class="udex-text-field__single-label" aria-hidden="true">${unsafeHTML(this._selectedOption)}</span></div>`;}
+function block8 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button @click="${this.handleButtonClick}" ?disabled="${this.isDisabled}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" class="udex-text-field__trigger" tabindex="-1"><${scopeTag("ui5-icon", tags, suffix)} mode="Decorative" name="navigation-down-arrow"></${scopeTag("ui5-icon", tags, suffix)}></button>` : html`<button @click="${this.handleButtonClick}" ?disabled="${this.isDisabled}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" class="udex-text-field__trigger" tabindex="-1"><ui5-icon mode="Decorative" name="navigation-down-arrow"></ui5-icon></button>`;}
 function block9 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-truncatable-tag-content"><span class="udex-truncatable-tag-content__label">${ifDefined(this.truncatableTagLabel)}</span><${scopeTag("ui5-icon", tags, suffix)} @click="${this.handleRemoveTruncatableTag}" class="udex-truncatable-tag-content__icon" mode="Decorative" name="decline"></${scopeTag("ui5-icon", tags, suffix)}></div>` : html`<div class="udex-truncatable-tag-content"><span class="udex-truncatable-tag-content__label">${ifDefined(this.truncatableTagLabel)}</span><ui5-icon @click="${this.handleRemoveTruncatableTag}" class="udex-truncatable-tag-content__icon" mode="Decorative" name="decline"></ui5-icon></div>`;}
 function block10 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ifDefined(this.searchableList)}`;}
+function block11 (this: SelectBox, 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>`;}
 
 function template(this: SelectBox) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;