@sapudex/web-components 0.111.0

package/dist/CountrySelector.js

@@ -0,0 +1,342 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var CountrySelector_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
+import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
+import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+// Styles
+import CountrySelectorCss from "./generated/themes/CountrySelector.css.js";
+import Search from "./Search.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExList from "./List.js";
+import { CountryListDB } from "./data/CountryListISO3166.js";
+import UDExSearchableListBase from "./SearchableListBase.js";
+import UDExListItem from "./ListItem.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import TextField from "./TextField.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-country-selector</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/CountrySelector.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UDExSearchableListBase
+ * @tagname udex-country-selector
+ * @public
+ */
+let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSearchableListBase {
+    static async onDefine() {
+        CountrySelector_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    constructor() {
+        super();
+        this._open = false;
+        this.countryList = CountryListDB;
+        this._shouldFilterItems = false;
+        this._filteredItems = [];
+    }
+    onBeforeRendering() {
+        if (this.blockedCountryCodes?.length) {
+            const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
+            this.countryList = this.countryList.filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));
+        }
+        if (!this.selectedCountry) {
+            this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry.toUpperCase()) || this.countryList[0];
+        }
+        this.prepareCountrySelectorItems();
+        if (!this._shouldFilterItems) {
+            this._filteredItems = this.getProcessedItems();
+        }
+    }
+    onAfterRendering() {
+        this._dropdown = this.getDropdown();
+        this._search = this.getSearch();
+    }
+    _dropdownBeforeOpen() {
+        this.onResetSearch();
+        this._open = true;
+        this.fireEvent("before-open");
+    }
+    _dropdownAfterClose() {
+        this._open = false;
+        this.fireEvent("after-close");
+    }
+    _dropdownAfterOpen() {
+        this.fireEvent("after-open");
+    }
+    _dropdownBeforeClose() {
+        this.fireEvent("before-close");
+    }
+    get searchableList() {
+        return executeTemplate(CountrySelector_1.searchableListBaseTemplate, this);
+    }
+    static get searchableListBaseTemplate() {
+        return SearchableListBaseTemplate;
+    }
+    get ariaControls() {
+        const list = this.shadowRoot.querySelector("udex-list");
+        return list?.getAttribute("id");
+    }
+    get holderWidth() {
+        return this.width ? this.width : "auto";
+    }
+    get selectedCountryFlagX() {
+        return this.selectedCountry?.flagX;
+    }
+    get selectedCountryFlagY() {
+        return this.selectedCountry?.flagY;
+    }
+    get selectedCountryName() {
+        return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName);
+    }
+    get countrySelectorClasses() {
+        const baseClass = "udex-country-selector__dropdown";
+        return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
+    }
+    get countrySelectorTriggerClasses() {
+        const baseClass = "udex-country-selector__trigger";
+        const classes = [baseClass];
+        if (this.disabled) {
+            classes.push(`${baseClass}--disabled`);
+        }
+        if (this.readonly) {
+            classes.push(`${baseClass}--readonly`);
+        }
+        if (this.displayonly) {
+            classes.push(`${baseClass}--displayonly`);
+        }
+        return classes.join(" ");
+    }
+    get showFlagImages() {
+        return !this.hideFlagImages;
+    }
+    get isOpenerDisabled() {
+        return this.readonly || this.displayonly || this.disabled;
+    }
+    getItemTemplate(country) {
+        return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
+    }
+    getCountryLabel(countryName, localName) {
+        return localName ? `${countryName} (${localName})` : countryName;
+    }
+    handleItemPress(e) {
+        this.onItemPress(e);
+        const target = e.target;
+        const item = this.getItemFromList(target?.getAttribute("data-token-id"));
+        this.selectedCountry = this.countryList.find(country => country.iso === item._id) || this.countryList[0];
+        this._dropdown.onClose();
+    }
+    handleKeyDown(e) {
+        if (this.disabled || this.readonly || this.displayonly) {
+            return;
+        }
+        const keyEvent = e.detail;
+        const key = keyEvent.key;
+        if (isEnter(keyEvent) || isSpace(keyEvent)) {
+            if (this._dropdown.open) {
+                this._dropdown.onClose();
+            }
+            else {
+                this._dropdown.onTriggerClick();
+            }
+        }
+        else if (this.isLetterKey(key)) {
+            this._dropdown.onOpen(this.getInput());
+            this._search.focus();
+            this._search.value = key;
+            this.onValueSearch(key);
+        }
+    }
+    onValueSearch(searchValue) {
+        this._shouldFilterItems = true;
+        this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
+        this.fireEvent("change-search", { value: searchValue });
+    }
+    handleTriggerClick() {
+        if (this._dropdown.open) {
+            this._dropdown.onClose();
+        }
+    }
+    isLetterKey(key) {
+        return /^[a-zA-Z]$/.test(key);
+    }
+    handleValueSearch(e) {
+        this.onValueSearch(e.detail.value);
+    }
+    handleSubmitSearch() {
+        this.onSubmitSearch();
+    }
+    handleResetSearch() {
+        this.onResetSearch();
+    }
+    prepareCountrySelectorItems() {
+        this.items.length = 0;
+        this.countryList.forEach(country => {
+            const selected = country.iso.toUpperCase() === this.selectedCountry.iso.toUpperCase();
+            this.items.push({
+                label: this.getCountryLabel(country.countryName, country.localName),
+                content: this.getItemTemplate(country),
+                selected,
+                _id: country.iso.toUpperCase(),
+            });
+        });
+    }
+    getSearch() {
+        return this.shadowRoot.querySelector("udex-search");
+    }
+    getDropdown() {
+        return this.shadowRoot.querySelector("udex-dropdown");
+    }
+    getInput() {
+        return this.shadowRoot.querySelector("udex-text-field");
+    }
+    get effectiveAriaLabel() {
+        return this.accessibleName || CountrySelector_1.i18nBundle.getText(COUNTRY_SELECT);
+    }
+};
+__decorate([
+    property({ type: String })
+], CountrySelector.prototype, "label", void 0);
+__decorate([
+    property()
+], CountrySelector.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], CountrySelector.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Boolean })
+], CountrySelector.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], CountrySelector.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], CountrySelector.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean })
+], CountrySelector.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], CountrySelector.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], CountrySelector.prototype, "displayonly", void 0);
+__decorate([
+    property({ type: String })
+], CountrySelector.prototype, "preselectedCountry", void 0);
+__decorate([
+    property({ type: String })
+], CountrySelector.prototype, "blockedCountryCodes", void 0);
+__decorate([
+    property({ type: String })
+], CountrySelector.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], CountrySelector.prototype, "hideFlagImages", void 0);
+__decorate([
+    property({ type: Boolean })
+], CountrySelector.prototype, "_open", void 0);
+CountrySelector = CountrySelector_1 = __decorate([
+    customElement({
+        tag: "udex-country-selector",
+        renderer: litRender,
+        styles: CountrySelectorCss,
+        template: CountrySelectorTemplate,
+        dependencies: [
+            Search,
+            UDExList,
+            UDExListItem,
+            UDExDropdown,
+            TextField,
+            Button,
+        ],
+    })
+    /**
+     * Fired before the dropdown paneis opened.
+     *
+     * @event sap.ui.webc.web-components.CountrySelector#beforeOpen
+     * @public
+     */
+    ,
+    event("before-open")
+    /**
+     * Fired after the dropdown pane is opened.
+     *
+     * @event sap.ui.webc.web-components.CountrySelector#afterOpen
+     * @public
+     */
+    ,
+    event("after-open")
+    /**
+     * Fired before the dropdown pane is closed.
+     *
+     * @event sap.ui.webc.web-components.CountrySelector#beforeClose
+     * @public
+     */
+    ,
+    event("before-close")
+    /**
+     * Fired after the dropdown pane is closed.
+     *
+     * @event sap.ui.webc.web-components.CountrySelector#afterClose
+     * @public
+     */
+    ,
+    event("after-close")
+    /**
+     * Fired event when the user submitted the value in the search.
+     *
+     * @event sap.ui.webc.web-components.CountrySelector#changeSearch
+     * @public
+     */
+    ,
+    event("change-search", {
+        detail: {
+            value: { type: String },
+        },
+    })
+    /**
+     * Fired event when the user clicks on the reset button in the search.
+     *
+     * @event sap.ui.webc.web-components.CountrySelector#resetSearch
+     * @public
+     */
+    ,
+    event("reset-search")
+    /**
+     * Fired event when the user clicks on the submitted icon in the search.
+     *
+     * @event sap.ui.webc.web-components.CountrySelector#submitSearch
+     * @public
+     */
+    ,
+    event("submit-search", {
+        detail: {
+            selectedItems: { type: Array },
+        },
+    })
+], CountrySelector);
+CountrySelector.define();
+export default CountrySelector;
+//# sourceMappingURL=CountrySelector.js.map

package/dist/CountrySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../src/CountrySelector.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport { COUNTRY_SELECT } from \"./generated/i18n/i18n-defaults.js\";\nimport CountrySelectorTemplate from \"./generated/templates/CountrySelectorTemplate.lit.js\";\nimport SearchableListBaseTemplate from \"./generated/templates/SearchableListBaseTemplate.lit.js\";\n\n// Styles\nimport CountrySelectorCss from \"./generated/themes/CountrySelector.css.js\";\n\nimport Search from \"./Search.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport { Country, CountryListDB } from \"./data/CountryListISO3166.js\";\nimport UDExSearchableListBase from \"./SearchableListBase.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport TextField from \"./TextField.js\";\n\ntype CountryItem = {\n  label: any,\n  content: any,\n  _id: any\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-country-selector</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/CountrySelector.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UDExSearchableListBase\n * @tagname udex-country-selector\n * @public\n */\n@customElement({\n  tag: \"udex-country-selector\",\n  renderer: litRender,\n  styles: CountrySelectorCss,\n  template: CountrySelectorTemplate,\n  dependencies: [\n    Search,\n    UDExList,\n    UDExListItem,\n    UDExDropdown,\n    TextField,\n    Button,\n  ],\n})\n\n/**\n * Fired before the dropdown paneis opened.\n *\n * @event sap.ui.webc.web-components.CountrySelector#beforeOpen\n * @public\n */\n@event(\"before-open\")\n\n/**\n * Fired after the dropdown pane is opened.\n *\n * @event sap.ui.webc.web-components.CountrySelector#afterOpen\n * @public\n */\n@event(\"after-open\")\n\n/**\n * Fired before the dropdown pane is closed.\n *\n * @event sap.ui.webc.web-components.CountrySelector#beforeClose\n * @public\n */\n@event(\"before-close\")\n\n/**\n * Fired after the dropdown pane is closed.\n *\n * @event sap.ui.webc.web-components.CountrySelector#afterClose\n * @public\n */\n@event(\"after-close\")\n\n/**\n * Fired event when the user submitted the value in the search.\n *\n * @event sap.ui.webc.web-components.CountrySelector#changeSearch\n * @public\n */\n@event(\"change-search\", {\n  detail: {\n    value: { type: String },\n  },\n})\n\n/**\n * Fired event when the user clicks on the reset button in the search.\n *\n * @event sap.ui.webc.web-components.CountrySelector#resetSearch\n * @public\n */\n@event(\"reset-search\")\n\n/**\n * Fired event when the user clicks on the submitted icon in the search.\n *\n * @event sap.ui.webc.web-components.CountrySelector#submitSearch\n * @public\n */\n@event(\"submit-search\", {\n  detail: {\n    selectedItems: { type: Array },\n  },\n})\n\nclass CountrySelector extends UDExSearchableListBase {\n  /**\n   * Defines label text for the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label?: string;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleName!: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property({ defaultValue: \"\" })\n    accessibleNameRef!: string;\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Allows control over the width.\n   *\n   * @public\n   */\n  @property({ type: String })\n    width?: string;\n\n  /**\n   * Allows control over the height.\n   *\n   * @public\n   */\n  @property({ type: String })\n    height?: string;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is display-only.\n   * <br><br>\n   * <b>Note:</b> A display-only component is not editable,\n   * but still provides visual feedback upon user interaction, input border is not visible.\n   *\n   * @default false\n   * @public\n   */\n\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Allows to define the initially preselected country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    preselectedCountry!: string;\n\n  /**\n   * Allows to define the list of blocked country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    blockedCountryCodes?: string;\n\n  /**\n   * Defines the placeholder of the search.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    searchPlaceholder!: string;\n\n  /**\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    hideFlagImages?: boolean;\n\n  @property({ type: Boolean })\n    _open?: boolean = false;\n\n  countryList: Country[] = CountryListDB;\n  selectedCountry!: Country;\n\n  _dropdown!: UDExDropdown;\n  _search!: Search;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    CountrySelector.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  constructor() {\n    super();\n    this._shouldFilterItems = false;\n    this._filteredItems = [];\n  }\n\n  onBeforeRendering(): void {\n    if (this.blockedCountryCodes?.length) {\n      const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n      this.countryList = this.countryList.filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));\n    }\n\n    if (!this.selectedCountry) {\n      this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry.toUpperCase()) || this.countryList[0];\n    }\n\n    this.prepareCountrySelectorItems();\n\n    if (!this._shouldFilterItems) {\n      this._filteredItems = this.getProcessedItems();\n    }\n  }\n\n  onAfterRendering() {\n    this._dropdown = this.getDropdown();\n    this._search = this.getSearch();\n  }\n\n  _dropdownBeforeOpen() {\n    this.onResetSearch();\n    this._open = true;\n    this.fireEvent(\"before-open\");\n  }\n\n  _dropdownAfterClose() {\n    this._open = false;\n    this.fireEvent(\"after-close\");\n  }\n\n  _dropdownAfterOpen() {\n    this.fireEvent(\"after-open\");\n  }\n\n  _dropdownBeforeClose() {\n    this.fireEvent(\"before-close\");\n  }\n\n  get searchableList() {\n    return executeTemplate(CountrySelector.searchableListBaseTemplate, this);\n  }\n\n  static get searchableListBaseTemplate() {\n    return SearchableListBaseTemplate;\n  }\n\n  get ariaControls(): string | null | undefined {\n    const list = this.shadowRoot!.querySelector<UDExList>(\"udex-list\");\n    return list?.getAttribute(\"id\");\n  }\n\n  get holderWidth() {\n    return this.width ? this.width : \"auto\";\n  }\n\n  get selectedCountryFlagX() {\n    return this.selectedCountry?.flagX;\n  }\n\n  get selectedCountryFlagY() {\n    return this.selectedCountry?.flagY;\n  }\n\n  get selectedCountryName() {\n    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName);\n  }\n\n  get countrySelectorClasses() {\n    const baseClass = \"udex-country-selector__dropdown\";\n    return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;\n  }\n\n  get countrySelectorTriggerClasses() {\n    const baseClass = \"udex-country-selector__trigger\";\n    const classes = [baseClass];\n\n    if (this.disabled) {\n      classes.push(`${baseClass}--disabled`);\n    }\n\n    if (this.readonly) {\n      classes.push(`${baseClass}--readonly`);\n    }\n\n    if (this.displayonly) {\n      classes.push(`${baseClass}--displayonly`);\n    }\n\n    return classes.join(\" \");\n  }\n\n  get showFlagImages() {\n    return !this.hideFlagImages;\n  }\n\n  get isOpenerDisabled() {\n    return this.readonly || this.displayonly || this.disabled;\n  }\n\n  getItemTemplate(country: Country) {\n    return this.hideFlagImages ? undefined : `<span class=\"udex-country-selector-item__image\" style=\"background-position:${country.flagX}\">`;\n  }\n\n  getCountryLabel(countryName: string, localName?: string) {\n    return localName ? `${countryName} (${localName})` : countryName;\n  }\n\n  handleItemPress(e: CustomEvent) {\n    this.onItemPress(e);\n    const target = e.target as HTMLElement;\n    const item: any = this.getItemFromList(target?.getAttribute(\"data-token-id\") as string);\n    this.selectedCountry = this.countryList.find(country => country.iso === item._id) || this.countryList[0];\n    this._dropdown.onClose();\n  }\n\n  handleKeyDown(e: CustomEvent) {\n    if (this.disabled || this.readonly || this.displayonly) {\n      return;\n    }\n\n    const keyEvent = e.detail as KeyboardEvent;\n    const key = keyEvent.key;\n\n    if (isEnter(keyEvent) || isSpace(keyEvent)) {\n      if (this._dropdown.open) {\n        this._dropdown.onClose();\n      } else {\n        this._dropdown.onTriggerClick();\n      }\n    } else if (this.isLetterKey(key)) {\n      this._dropdown.onOpen(this.getInput());\n      this._search.focus();\n      this._search.value = key;\n      this.onValueSearch(key);\n    }\n  }\n\n  onValueSearch(searchValue: string) {\n    this._shouldFilterItems = true;\n    this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);\n    this.fireEvent(\"change-search\", { value: searchValue });\n  }\n\n  handleTriggerClick() {\n    if (this._dropdown.open) {\n      this._dropdown.onClose();\n    }\n  }\n\n  isLetterKey(key: string) {\n    return /^[a-zA-Z]$/.test(key);\n  }\n\n  handleValueSearch(e:CustomEvent) {\n    this.onValueSearch(e.detail.value as string);\n  }\n\n  handleSubmitSearch() {\n    this.onSubmitSearch();\n  }\n\n  handleResetSearch() {\n    this.onResetSearch();\n  }\n\n  prepareCountrySelectorItems(): void {\n    this.items.length = 0;\n    this.countryList.forEach(country => {\n      const selected = country.iso.toUpperCase() === this.selectedCountry.iso.toUpperCase();\n      this.items.push({\n        label: this.getCountryLabel(country.countryName, country.localName),\n        content: this.getItemTemplate(country),\n        selected,\n        _id: country.iso.toUpperCase(),\n      } as CountryItem as UDExListItem);\n    });\n  }\n\n  getSearch(): Search {\n    return this.shadowRoot!.querySelector<Search>(\"udex-search\")!;\n  }\n\n  getDropdown(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(\"udex-dropdown\")!;\n  }\n\n  getInput(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(\"udex-text-field\")!;\n  }\n\n  get effectiveAriaLabel(): string {\n    return this.accessibleName || CountrySelector.i18nBundle.getText(COUNTRY_SELECT);\n  }\n}\n\nCountrySelector.define();\n\nexport default CountrySelector;\n"]}

package/dist/DatePicker.d.ts

@@ -0,0 +1,170 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import Calendar, { CalendarSelectedDatesChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/appointment-2.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExTextField from "./TextField.js";
+import UDExDropdown from "./Dropdown.js";
+export declare enum UDExDatePickerSelectionMode {
+    Single = "Single",
+    Range = "Range"
+}
+export type DatePickerSelectionChangeEventDetail = {
+    selectedValues: Array<string>;
+    selectedDates: Array<number>;
+    timestamp: number | undefined;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-date-picker</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/DatePicker.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-date-picker
+ * @public
+ */
+declare class UDExDatePicker extends UI5Element {
+    /**
+     * Defines selection mode of the calendar component.
+     *
+     * @default "Single"
+     * @public
+     */
+    selectionMode?: `${UDExDatePickerSelectionMode}`;
+    /**
+     * Defines whether the component is read-only.
+     * <br><br>
+     * <b>Note:</b> A read-only component is not editable,
+     * but still provides visual feedback upon user interaction.
+     *
+     * @default false
+     * @public
+     */
+    readonly: boolean;
+    /**
+     * Defines whether the component is required.
+     *
+     * @default false
+     * @public
+     */
+    required: boolean;
+    /**
+     * Defines whether the component is in disabled state.
+     * <br><br>
+     * <b>Note:</b> A disabled component is completely noninteractive.
+     *
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines supporting text under the input field.
+     *
+     * @default ""
+     * @public
+     */
+    supportingText: string;
+    /**
+     * Defines the value of the input.
+     *
+     * @default ""
+     * @public
+     */
+    value: string;
+    /**
+     * Sets the accessible ARIA name of the component.
+     *
+     * @default ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Receives id (or many ids) of the elements that label the component.
+     * @default ""
+     * @public
+     */
+    accessibleNameRef: string;
+    /**
+     * Defines label text for the input field.
+     *
+     * @default ""
+     * @public
+     */
+    label: string;
+    /**
+     * Determines the minimum date available for selection.
+     * <br/><br/>
+     * <b>Note:</b> The minDate value must be provided in the ISO date format (YYYY-MM-dd).
+     *
+     * @default ""
+     * @public
+     */
+    minDate: string;
+    /**
+     * Determines the maximum date available for selection.
+     * <br/><br/>
+     * <b>Note:</b> The maxDate value must be provided in the ISO date format (YYYY-MM-dd).
+     *
+     * @default ""
+     * @public
+     */
+    maxDate: string;
+    /**
+     * Defines selected dates values.
+     *
+     * @default ""
+     * @private
+     */
+    selectedDates: string;
+    /**
+     * Defines the value state of the component.
+     *
+     * @default "Standard"
+     * @public
+     */
+    valueState: "Standard" | "Warning" | "Error" | "Success";
+    /**
+     * Defines the date format pattern (e.g., \"MMM dd, yyyy\" or \"MM/dd/yyyy\").
+     * @default "MMM dd, yyyy"
+     * @public
+     */
+    formatPattern: string;
+    responsivePopover?: UDExDropdown;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    _getCalendar(): Promise<Calendar>;
+    _getResponsePopover(): Promise<UDExDropdown>;
+    /**
+     * Getter for the interactive element that opens the overflow
+     * @private
+     */
+    get _dropdownTrigger(): UDExTextField;
+    _afterDropdownClose(): void;
+    _afterDropdownOpen(): void;
+    _closeRespPopover(): void;
+    _openRespPopover(): Promise<void>;
+    hideCalendar(): void;
+    showCalendar(): void;
+    handleCalendarChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>): void;
+    handleInputClick(e: MouseEvent | KeyboardEvent): void;
+    handleInputMouseDown(e: MouseEvent): void;
+    handleInputKeyDown(e: KeyboardEvent): void;
+    /**
+     * Used to provide selectedDates to the calendar based on the component's state
+     * Override in derivatives to provide different rules for setting the calendar's selected dates
+     * @protected
+     */
+    get _calendarSelectedDates(): Array<string>;
+    get accessibleIconName(): string;
+}
+export default UDExDatePicker;