@sapudex/web-components 2.21.0 → 2.23.0

package/src/SocialMediaButton.ts

@@ -45,6 +45,8 @@ const baseIconsURL = "https://cdn.udex.services.sap.com/dds/design-tokens/assets
 /**
  * Triggered when the user clicks on an item.
  * @public
+ * @param {LinkClickEventDetail} detail - Details of the clicked link.
+ *
  */
 @event("click", { cancelable: true, bubbles: true })
 

package/src/StepInput.ts

@@ -63,6 +63,8 @@ type UDExStepInputValueStateChangeEventDetail = {
 /**
  * Fired when the input operation has finished by pressing Enter or on focusout.
  * @public
+ * @param {number} value The new value of the component.
+ *
  */
 @event("change", { bubbles: true })
 /**

package/src/TabNavigation.ts

@@ -79,12 +79,15 @@ type UDExTabContainerTabSelectEventDetail = {
  * Fires when the tab was clicked.
  *
  * @public
+ * @param {number} currentPage The current selected tab index.
  */
 @event("click", { bubbles: true })
 /**
  * Fired when a tab is selected.
  *
  * @public
+ * @param {Tab} tab The selected tab.
+ * @param {number} tabIndex The index of the selected tab.
  */
 @event("tab-select", { bubbles: true })
 

package/src/Tag.ts

@@ -75,6 +75,7 @@ type UDExTagLinkClickEventDetail = {
  * Emitted when tag link was clicked
  *
  * @public
+ * @param {Event} originalEvent the original event object
  */
 @event("tagLinkClick", { cancelable: true, bubbles: true })
 class UDExTag extends UI5Element {

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,
@@ -57,12 +57,14 @@ type UDExTagKeydownEventDetail = {
  * Emitted when tag was clicked
  *
  * @public
+ * @param {UDExTag} tag the clicked tag
  */
 @event("tag-click", { bubbles: true })
 /**
  * Emitted when icon in tag was clicked
  *
  * @public
+ * @param {HTMLElement} tag the tag containing the clicked icon
  */
 @event("tag-icon-click", { bubbles: true })
 /**
@@ -76,6 +78,7 @@ type UDExTagKeydownEventDetail = {
  * Emitted custom event with keycode and tag details
  *
  * @public
+ * @param {KeyboardEvent} originalEvent the original keyboard event
  */
 @event("tag-keydown", { cancelable: true, bubbles: true })
 class UDExTagGroup extends UI5Element {
@@ -93,6 +96,7 @@ class UDExTagGroup extends UI5Element {
    */
   @property({ type: Boolean })
     tokenizerExpanded: boolean = false;
+
   /**
    * Defines whether the component is in disabled state.
    *
@@ -123,6 +127,7 @@ class UDExTagGroup extends UI5Element {
   /**
    * Defines the tags.
    *
+   * @default "[]"
    * @public
    */
   @slot({ type: HTMLElement, "default": true })
@@ -138,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;
@@ -152,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) {
@@ -179,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;
@@ -210,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;
@@ -230,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.
  *
@@ -76,13 +85,15 @@ type UDExTextFieldKeydownEventDetail = {
  * Fired event when the key is pressed in the input.
  *
  * @private
+ * @param {KeyboardEvent} keyboardEvent The native keyboard event.
  */
 @event("keydown", { bubbles: true })
 class UDExTextField extends UI5Element {
   eventDetails!: {
     "keydown": UDExTextFieldKeydownEventDetail,
     "input": void,
-    "change": void,
+    "change": UDExTextFieldChangeEventDetail,
+    "blur": UDExTextFieldBlurEventDetail,
     "click-icon": void,
   };
   _labelActiveClassName = "udex-text-field__label_active";
@@ -139,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 ""
@@ -147,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.
    *
@@ -381,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) => {
@@ -402,7 +431,8 @@ class UDExTextField extends UI5Element {
     }
   };
 
-  handleBlur = (): void => {
+  handleBlur = (e: FocusEvent): void => {
+    this.fireDecoratorEvent("blur", { originalEvent: e });
     this.active = false;
 
     if (this.value) {
@@ -487,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/Tile.ts

@@ -36,6 +36,7 @@ type UDExTileClickEventDetail = {
 /**
  * Fires when the user clicks inside the component in interactive mode.
  * @public
+ * @param {MouseEvent} originalEvent the original event object
  */
 @event("click", { bubbles: true })
 class UDExTile extends UI5Element {

package/src/Upload.ts

@@ -66,6 +66,7 @@ type UDExUploadFileChangeEventDetail = {
  * Triggered when the uploaded file exceeds the maximum allowed size.
  *
  * @public
+ * @param {Array<FileData>} files An array of files that exceed the maximum allowed size.
  */
 @event("file-size-exceed", { bubbles: true })
 
@@ -73,6 +74,7 @@ type UDExUploadFileChangeEventDetail = {
  * Triggered when the user deletes the uploaded item.
  *
  * @public
+ * @param {UDExUploadItem} file The deleted upload item.
  */
 @event("file-delete", { bubbles: true })
 
@@ -80,6 +82,7 @@ type UDExUploadFileChangeEventDetail = {
  * Triggered when the user uploads the item.
  *
  * @public
+ * @param {Array<UDExUploadItem>} files An array of the uploaded items.
  */
 @event("file-change", { bubbles: true })
 
@@ -87,6 +90,7 @@ type UDExUploadFileChangeEventDetail = {
  * Triggered when the user attempts to upload a duplicate file.
  *
  * @public
+ * @param {Array<FileData>} files An array of duplicate files.
  */
 @event("file-duplicate", { bubbles: true })
 
@@ -94,6 +98,7 @@ type UDExUploadFileChangeEventDetail = {
  * Triggered when the user attempts to upload a file.
  *
  * @public
+ * @param {FileList} files The uploaded files.
  */
 @event("change", { bubbles: true })
 

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;