@sapudex/web-components 0.127.6 → 0.143.0

package/dist/CountrySelector.js

@@ -10,10 +10,13 @@ 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 { isEnter, isSpace, isBackSpace, isDelete, } 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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import TextField from "./TextField.js";
+import ValueState from "./types/common.js";
+import StatusMessage from "./StatusMessage.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";
@@ -26,7 +29,6 @@ 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
  *
@@ -38,7 +40,7 @@ import TextField from "./TextField.js";
  * For the <code>udex-country-selector</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/CountrySelector.js";</code>
+ * <code>import "@udex/web-components/dist/CountrySelector.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -48,7 +50,7 @@ import TextField from "./TextField.js";
  */
 let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSearchableListBase {
     static async onDefine() {
-        CountrySelector_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+        CountrySelector_1.i18nBundle = await getI18nBundle("@udex/web-components");
     }
     constructor() {
         super();
@@ -70,7 +72,7 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
             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.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry.toUpperCase());
         }
         this.prepareCountrySelectorItems();
         if (!this._shouldFilterItems) {
@@ -116,7 +118,13 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
         return this.selectedCountry?.flagY;
     }
     get selectedCountryName() {
-        return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName);
+        return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
+    }
+    get flagAriaLabel() {
+        return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
+    }
+    get triggerIcon() {
+        return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
     }
     get countrySelectorClasses() {
         const baseClass = "udex-country-selector__dropdown";
@@ -146,7 +154,7 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
         return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
     }
     getCountryLabel(countryName, localName) {
-        return localName ? `${countryName} (${localName})` : countryName;
+        return localName ? `${countryName} (${localName})` : countryName || null;
     }
     handleCloseSearch() {
         this._dropdown.onClose();
@@ -155,7 +163,7 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
         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.selectedCountry = this.countryList.find(country => country.iso === item._id);
         this._dropdown.onClose();
     }
     handleKeyDown(e) {
@@ -172,6 +180,10 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
                 this._dropdown.onTriggerClick();
             }
         }
+        else if (isBackSpace(keyEvent) || isDelete(keyEvent)) {
+            this.selectedCountry = undefined;
+            this._render();
+        }
         else if (this.isLetterKey(key)) {
             this._dropdown.onOpen(this.getInput());
             this._search.focus();
@@ -179,6 +191,9 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
             this.onValueSearch(key);
         }
     }
+    handleInputMouseDown(e) {
+        e.preventDefault();
+    }
     onValueSearch(searchValue) {
         this._shouldFilterItems = true;
         this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
@@ -204,7 +219,7 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
     prepareCountrySelectorItems() {
         this.items.length = 0;
         this.countryList.forEach(country => {
-            const selected = country.iso.toUpperCase() === this.selectedCountry.iso.toUpperCase();
+            const selected = country.iso.toUpperCase() === this.selectedCountry?.iso.toUpperCase();
             this.items.push({
                 label: this.getCountryLabel(country.countryName, country.localName),
                 innerHTML: this.getItemTemplate(country),
@@ -223,7 +238,7 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
         return this.shadowRoot.querySelector("udex-text-field");
     }
     get effectiveAriaLabel() {
-        return this.accessibleName || CountrySelector_1.i18nBundle.getText(COUNTRY_SELECT);
+        return this.label || this.accessibleName || CountrySelector_1.i18nBundle.getText(COUNTRY_SELECT);
     }
 };
 __decorate([
@@ -259,6 +274,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], CountrySelector.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.Standard })
+], CountrySelector.prototype, "valueState", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], CountrySelector.prototype, "supportingText", void 0);
 __decorate([
     property({ type: Boolean })
 ], CountrySelector.prototype, "hideFlagImages", void 0);
@@ -278,6 +299,7 @@ CountrySelector = CountrySelector_1 = __decorate([
             UDExDropdown,
             TextField,
             Button,
+            StatusMessage,
         ],
     })
     /**

package/dist/CountrySelector.js.map

@@ -1 +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 ResizeHandler, { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.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\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 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  _handleResizeBound: ResizeObserverCallback;\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._handleResizeBound = this._handleResize.bind(this);\n    this._filteredItems = [];\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\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  _handleResize() {\n    this._dropdown.style.setProperty(\"--udex-dropdown-pane-width\", `${this.offsetWidth}px`);\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 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  handleCloseSearch() {\n    this._dropdown.onClose();\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    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        innerHTML: this.getItemTemplate(country),\n        selected,\n        _id: country.iso.toUpperCase(),\n      } 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"]}
+{"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 {\n  isEnter, isSpace, isBackSpace, isDelete,\n} 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 ResizeHandler, { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport TextField from \"./TextField.js\";\nimport ValueState from \"./types/common.js\";\nimport StatusMessage from \"./StatusMessage.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\";\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    StatusMessage,\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 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   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property({ type: ValueState, defaultValue: ValueState.Standard })\n    valueState!: `${ValueState}`;\n\n  /**\n   * Defines supporting text under the country selector.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    supportingText!: 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 | undefined;\n\n  _dropdown!: UDExDropdown;\n  _search!: Search;\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    CountrySelector.i18nBundle = await getI18nBundle(\"@udex/web-components\");\n  }\n\n  constructor() {\n    super();\n    this._shouldFilterItems = false;\n    this._handleResizeBound = this._handleResize.bind(this);\n    this._filteredItems = [];\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\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());\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  _handleResize() {\n    this._dropdown.style.setProperty(\"--udex-dropdown-pane-width\", `${this.offsetWidth}px`);\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 selectedCountryFlagX() {\n    return this.selectedCountry?.flagX;\n  }\n\n  get selectedCountryFlagY() {\n    return this.selectedCountry?.flagY;\n  }\n\n  get selectedCountryName() {\n    return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : \"\";\n  }\n\n  get flagAriaLabel():string {\n    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || \"None\";\n  }\n\n  get triggerIcon(): string {\n    return this._open ? \"navigation-up-arrow\" : \"navigation-down-arrow\";\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): string | null {\n    return localName ? `${countryName} (${localName})` : countryName || null;\n  }\n\n  handleCloseSearch() {\n    this._dropdown.onClose();\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);\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    if (isEnter(keyEvent) || isSpace(keyEvent)) {\n      if (this._dropdown.open) {\n        this._dropdown.onClose();\n      } else {\n        this._dropdown.onTriggerClick();\n      }\n    } else if (isBackSpace(keyEvent) || isDelete(keyEvent)) {\n      this.selectedCountry = undefined;\n      this._render();\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  handleInputMouseDown(e: CustomEvent) {\n    e.preventDefault();\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        innerHTML: this.getItemTemplate(country),\n        selected,\n        _id: country.iso.toUpperCase(),\n      } 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.label || this.accessibleName || CountrySelector.i18nBundle.getText(COUNTRY_SELECT);\n  }\n}\n\nCountrySelector.define();\n\nexport default CountrySelector;\n"]}

package/dist/DatePicker.d.ts

@@ -166,5 +166,6 @@ declare class UDExDatePicker extends UI5Element {
      */
     get _calendarSelectedDates(): Array<string>;
     get accessibleIconName(): string;
+    get dateAccessibleName(): string;
 }
 export default UDExDatePicker;

package/dist/DatePicker.js

@@ -16,7 +16,7 @@ import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { CALENDAR_ICON } from "./generated/i18n/i18n-defaults.js";
+import { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 // Template
 import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
 import DatePickerPopover from "./generated/templates/DatePickerPopoverTemplate.lit.js";
@@ -53,7 +53,7 @@ export var UDExDatePickerSelectionMode;
  */
 let UDExDatePicker = UDExDatePicker_1 = class UDExDatePicker extends UI5Element {
     static async onDefine() {
-        UDExDatePicker_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+        UDExDatePicker_1.i18nBundle = await getI18nBundle("@udex/web-components");
     }
     async _getCalendar() {
         const staticAreaItem = await this.getStaticAreaItemDomRef();
@@ -141,6 +141,9 @@ let UDExDatePicker = UDExDatePicker_1 = class UDExDatePicker extends UI5Element
     get accessibleIconName() {
         return UDExDatePicker_1.i18nBundle.getText(CALENDAR_ICON);
     }
+    get dateAccessibleName() {
+        return this.accessibleName || UDExDatePicker_1.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
+    }
 };
 __decorate([
     property({ type: UDExDatePickerSelectionMode, defaultValue: "Single" })

package/dist/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\n// eslint-disable-next-line\nimport Calendar, { CalendarSelectedDatesChangeEventDetail } from \"@ui5/webcomponents/dist/Calendar.js\";\nimport CalendarDate from \"@ui5/webcomponents/dist/CalendarDate.js\";\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/appointment-2.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { CALENDAR_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport DatePickerTemplate from \"./generated/templates/DatePickerTemplate.lit.js\";\nimport DatePickerPopover from \"./generated/templates/DatePickerPopoverTemplate.lit.js\";\n\n// Styles\nimport DatePickerCss from \"./generated/themes/DatePicker.css\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport DatePickerPopoverCss from \"./generated/themes/DatePickerPopover.css.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport ValueState from \"./types/common.js\";\n\nexport enum UDExDatePickerSelectionMode {\n  Single = \"Single\",\n  Range = \"Range\",\n}\n\nexport type DatePickerSelectionChangeEventDetail = {\n  selectedValues: Array<string>;\n  selectedDates: Array<number>;\n  timestamp: number | undefined;\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-date-picker</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/DatePicker.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-date-picker\n * @public\n */\n@customElement({\n  tag: \"udex-date-picker\",\n  renderer: litRender,\n  styles: DatePickerCss,\n  template: DatePickerTemplate,\n  staticAreaTemplate: DatePickerPopover,\n  staticAreaStyles: [DatePickerPopoverCss],\n  dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],\n})\n/**\n * Fired when the selected dates change.\n *\n * @allowPreventDefault\n * @param {Array<string>} selectedValues The selected dates\n * @param {Array<number>} selectedDates The selected dates as UTC timestamps\n * @public\n */\n@event<DatePickerSelectionChangeEventDetail>(\"selection-change\", {\n  detail: {\n    /**\n     * @public\n     */\n    selectedDates: { type: Array },\n    /**\n     * @public\n     */\n    selectedValues: { type: Array },\n\n    timestamp: { type: Number },\n  },\n})\nclass UDExDatePicker extends UI5Element {\n  /**\n   * Defines selection mode of the calendar component.\n   *\n   * @default \"Single\"\n   * @public\n   */\n  @property({ type: UDExDatePickerSelectionMode, defaultValue: \"Single\" })\n    selectionMode?: `${UDExDatePickerSelectionMode}`;\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 required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\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 supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines the value of the input.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    value!: string;\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\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 label text for the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    label!: string;\n\n  /**\n   * Determines the minimum date available for selection.\n   * <br/><br/>\n   * <b>Note:</b> The minDate value must be provided in the ISO date format (YYYY-MM-dd).\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    minDate!: string;\n\n  /**\n   * Determines the maximum date available for selection.\n   * <br/><br/>\n   * <b>Note:</b> The maxDate value must be provided in the ISO date format (YYYY-MM-dd).\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    maxDate!: string;\n\n  /**\n   * Defines selected dates values.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true, defaultValue: \"\" })\n    selectedDates!: string;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property({ type: ValueState, defaultValue: \"Standard\" })\n    valueState!: \"Standard\" | \"Warning\" | \"Error\" | \"Success\";\n\n  /**\n   * Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").\n   * @default \"MMM dd, yyyy\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"MMM dd, yyyy\" })\n    formatPattern!: string;\n\n  responsivePopover?: UDExDropdown;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExDatePicker.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  async _getCalendar() {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<Calendar>(\"#ui5-calendar\")!;\n  }\n\n  async _getResponsePopover() {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-calendar__popover`)!;\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownTrigger() {\n    return this.shadowRoot!.querySelector<UDExTextField>(\".udex-date-picker__trigger\")!;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownTrigger.active = false;\n    this._dropdownTrigger.shadowRoot?.querySelector(\"input\")?.focus();\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownTrigger.active = true;\n  }\n\n  _closeRespPopover() {\n    this.responsivePopover && this.responsivePopover.onClose();\n  }\n\n  async _openRespPopover() {\n    this._dropdownTrigger.active = true;\n    this.responsivePopover = await this._getResponsePopover();\n    this.responsivePopover?.onOpen(this._dropdownTrigger);\n  }\n\n  hideCalendar(): void {\n    this._closeRespPopover();\n  }\n\n  showCalendar(): void {\n    this._openRespPopover();\n  }\n\n  handleCalendarChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>): void {\n    const { dates, timestamp, values } = e.detail;\n\n    const formattedValues = values;\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      this.value = formattedValues[0];\n      this.selectedDates = formattedValues[0];\n    }\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      if (dates.length < 2) {\n        return;\n      }\n\n      this.value = `${formattedValues[0]} - ${formattedValues[1]}`;\n      this.selectedDates = `${formattedValues[0]}, ${formattedValues[1]}`;\n    }\n\n    this.fireEvent(\n      \"selection-change\",\n      {\n        timestamp,\n        selectedDates: [...dates],\n        selectedValues: formattedValues,\n      },\n      true,\n    );\n\n    this.hideCalendar();\n  }\n\n  handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    e.preventDefault();\n\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.showCalendar();\n  }\n\n  handleInputMouseDown(e: MouseEvent): void {\n    e.preventDefault();\n  }\n\n  handleInputKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"Enter\") {\n      this.handleInputClick(e);\n    }\n  }\n\n  /**\n   * Used to provide selectedDates to the calendar based on the component's state\n   * Override in derivatives to provide different rules for setting the calendar's selected dates\n   * @protected\n   */\n  get _calendarSelectedDates(): Array<string> {\n    if (this.value) {\n      return this.value.split(\" - \");\n    }\n\n    return [];\n  }\n\n  get accessibleIconName() {\n    return UDExDatePicker.i18nBundle.getText(CALENDAR_ICON);\n  }\n}\n\nUDExDatePicker.define();\n\nexport default UDExDatePicker;\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\n// eslint-disable-next-line\nimport Calendar, { CalendarSelectedDatesChangeEventDetail } from \"@ui5/webcomponents/dist/Calendar.js\";\nimport CalendarDate from \"@ui5/webcomponents/dist/CalendarDate.js\";\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/appointment-2.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport DatePickerTemplate from \"./generated/templates/DatePickerTemplate.lit.js\";\nimport DatePickerPopover from \"./generated/templates/DatePickerPopoverTemplate.lit.js\";\n\n// Styles\nimport DatePickerCss from \"./generated/themes/DatePicker.css\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport DatePickerPopoverCss from \"./generated/themes/DatePickerPopover.css.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport ValueState from \"./types/common.js\";\n\nexport enum UDExDatePickerSelectionMode {\n  Single = \"Single\",\n  Range = \"Range\",\n}\n\nexport type DatePickerSelectionChangeEventDetail = {\n  selectedValues: Array<string>;\n  selectedDates: Array<number>;\n  timestamp: number | undefined;\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-date-picker</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/DatePicker.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-date-picker\n * @public\n */\n@customElement({\n  tag: \"udex-date-picker\",\n  renderer: litRender,\n  styles: DatePickerCss,\n  template: DatePickerTemplate,\n  staticAreaTemplate: DatePickerPopover,\n  staticAreaStyles: [DatePickerPopoverCss],\n  dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],\n})\n/**\n * Fired when the selected dates change.\n *\n * @allowPreventDefault\n * @param {Array<string>} selectedValues The selected dates\n * @param {Array<number>} selectedDates The selected dates as UTC timestamps\n * @public\n */\n@event<DatePickerSelectionChangeEventDetail>(\"selection-change\", {\n  detail: {\n    /**\n     * @public\n     */\n    selectedDates: { type: Array },\n    /**\n     * @public\n     */\n    selectedValues: { type: Array },\n\n    timestamp: { type: Number },\n  },\n})\nclass UDExDatePicker extends UI5Element {\n  /**\n   * Defines selection mode of the calendar component.\n   *\n   * @default \"Single\"\n   * @public\n   */\n  @property({ type: UDExDatePickerSelectionMode, defaultValue: \"Single\" })\n    selectionMode?: `${UDExDatePickerSelectionMode}`;\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 required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\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 supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines the value of the input.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    value!: string;\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\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 label text for the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    label!: string;\n\n  /**\n   * Determines the minimum date available for selection.\n   * <br/><br/>\n   * <b>Note:</b> The minDate value must be provided in the ISO date format (YYYY-MM-dd).\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    minDate!: string;\n\n  /**\n   * Determines the maximum date available for selection.\n   * <br/><br/>\n   * <b>Note:</b> The maxDate value must be provided in the ISO date format (YYYY-MM-dd).\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    maxDate!: string;\n\n  /**\n   * Defines selected dates values.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true, defaultValue: \"\" })\n    selectedDates!: string;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property({ type: ValueState, defaultValue: \"Standard\" })\n    valueState!: \"Standard\" | \"Warning\" | \"Error\" | \"Success\";\n\n  /**\n   * Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").\n   * @default \"MMM dd, yyyy\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"MMM dd, yyyy\" })\n    formatPattern!: string;\n\n  responsivePopover?: UDExDropdown;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExDatePicker.i18nBundle = await getI18nBundle(\"@udex/web-components\");\n  }\n\n  async _getCalendar(): Promise<Calendar> {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<Calendar>(\"#ui5-calendar\")!;\n  }\n\n  async _getResponsePopover(): Promise<UDExDropdown> {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-calendar__popover`)!;\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownTrigger(): UDExTextField {\n    return this.shadowRoot!.querySelector<UDExTextField>(\".udex-date-picker__trigger\")!;\n  }\n\n  _afterDropdownClose(): void {\n    this._dropdownTrigger.active = false;\n    this._dropdownTrigger.shadowRoot?.querySelector(\"input\")?.focus();\n  }\n\n  _afterDropdownOpen(): void {\n    this._dropdownTrigger.active = true;\n  }\n\n  _closeRespPopover(): void {\n    this.responsivePopover && this.responsivePopover.onClose();\n  }\n\n  async _openRespPopover(): Promise<void> {\n    this._dropdownTrigger.active = true;\n    this.responsivePopover = await this._getResponsePopover();\n    this.responsivePopover?.onOpen(this._dropdownTrigger);\n  }\n\n  hideCalendar(): void {\n    this._closeRespPopover();\n  }\n\n  showCalendar(): void {\n    this._openRespPopover();\n  }\n\n  handleCalendarChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>): void {\n    const { dates, timestamp, values } = e.detail;\n\n    const formattedValues = values;\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      this.value = formattedValues[0];\n      this.selectedDates = formattedValues[0];\n    }\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      if (dates.length < 2) {\n        return;\n      }\n\n      this.value = `${formattedValues[0]} - ${formattedValues[1]}`;\n      this.selectedDates = `${formattedValues[0]}, ${formattedValues[1]}`;\n    }\n\n    this.fireEvent(\n      \"selection-change\",\n      {\n        timestamp,\n        selectedDates: [...dates],\n        selectedValues: formattedValues,\n      },\n      true,\n    );\n\n    this.hideCalendar();\n  }\n\n  handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    e.preventDefault();\n\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.showCalendar();\n  }\n\n  handleInputMouseDown(e: MouseEvent): void {\n    e.preventDefault();\n  }\n\n  handleInputKeyDown(e: KeyboardEvent): void {\n    if (e.key === \"Enter\") {\n      this.handleInputClick(e);\n    }\n  }\n\n  /**\n   * Used to provide selectedDates to the calendar based on the component's state\n   * Override in derivatives to provide different rules for setting the calendar's selected dates\n   * @protected\n   */\n  get _calendarSelectedDates(): Array<string> {\n    if (this.value) {\n      return this.value.split(\" - \");\n    }\n\n    return [];\n  }\n\n  get accessibleIconName(): string {\n    return UDExDatePicker.i18nBundle.getText(CALENDAR_ICON);\n  }\n\n  get dateAccessibleName(): string {\n    return this.accessibleName || UDExDatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);\n  }\n}\n\nUDExDatePicker.define();\n\nexport default UDExDatePicker;\n"]}

package/dist/Dropdown.d.ts

@@ -14,7 +14,7 @@ import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
  * For the <code>udex-dropdown</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Dropdown.js";</code>
+ * <code>import "@udex/web-components/dist/Dropdown.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -111,6 +111,7 @@ declare class UDExDropdown extends UI5Element {
      */
     _direction?: string;
     static i18nBundle: I18nBundle;
+    _breakpointSizeXS: number;
     static onDefine(): Promise<void>;
     onAfterRendering(): void;
     handleDirection(): void;

package/dist/Dropdown.js

@@ -31,7 +31,7 @@ import DropdownCss from "./generated/themes/Dropdown.css";
  * For the <code>udex-dropdown</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Dropdown.js";</code>
+ * <code>import "@udex/web-components/dist/Dropdown.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -40,8 +40,12 @@ import DropdownCss from "./generated/themes/Dropdown.css";
  * @public
  */
 let UDExDropdown = UDExDropdown_1 = class UDExDropdown extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this._breakpointSizeXS = 640;
+    }
     static async onDefine() {
-        UDExDropdown_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+        UDExDropdown_1.i18nBundle = await getI18nBundle("@udex/web-components");
     }
     onAfterRendering() {
         this.handleDirection();
@@ -83,6 +87,7 @@ let UDExDropdown = UDExDropdown_1 = class UDExDropdown extends UI5Element {
     onOpen(opener) {
         const dropdown = this.getDropdownPane();
         dropdown.showAt(opener);
+        this.open = true;
     }
     /**
      * Close dropdown
@@ -90,8 +95,7 @@ let UDExDropdown = UDExDropdown_1 = class UDExDropdown extends UI5Element {
      * @public
      */
     onClose() {
-        const dropdown = this.getDropdownPane();
-        dropdown.close(true);
+        this.open = false;
     }
     afterDropdownClose() {
         this.open = false;
@@ -99,6 +103,14 @@ let UDExDropdown = UDExDropdown_1 = class UDExDropdown extends UI5Element {
     }
     afterDropdownOpen() {
         this.open = true;
+        const dropdownPane = this.getDropdownPane();
+        const dropdownPaneLeftOffset = +dropdownPane.style.left.split("px")[0];
+        if (dropdownPane.offsetWidth + dropdownPaneLeftOffset < this._breakpointSizeXS) {
+            this.style.setProperty("--udex-dropdown-left-offset", `${dropdownPane.style.left}`);
+        }
+        else {
+            dropdownPane.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+        }
         this.fireEvent("after-open");
     }
     beforeDropdownOpen() {

package/dist/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport PopupAccessibleRole from \"@ui5/webcomponents/dist/types/PopupAccessibleRole.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport DropdownTemplate from \"./generated/templates/DropdownTemplate.lit.js\";\nimport { PlacementType, HorizontalAlign } from \"./types/Dropdown.js\";\nimport { TRIGGER } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport DropdownCss from \"./generated/themes/Dropdown.css\";\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-dropdown</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/Dropdown.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-dropdown\n * @public\n */\n@customElement({\n  tag: \"udex-dropdown\",\n  renderer: litRender,\n  styles: [\n    DropdownCss,\n    getEffectiveScrollbarStyle(),\n  ],\n  template: DropdownTemplate,\n  dependencies: [Popover],\n})\n\n/**\n * Fired event when the user clicks the trigger.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#clickTrigger\n * @public\n */\n@event(\"click-trigger\")\n\n/**\n * Fired before the dropdown is opened.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#beforeOpen\n * @public\n */\n@event(\"before-open\")\n\n/**\n * Fired after the dropdown is opened.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#afterOpen\n * @public\n */\n@event(\"after-open\")\n\n/**\n * Fired before the menu is closed.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#beforeClose\n * @public\n */\n@event(\"before-close\")\n\n/**\n * Fired after the menu is closed.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#afterClose\n * @public\n */\n@event(\"after-close\")\nclass UDExDropdown extends UI5Element {\n  /**\n   * Allows control over the height.\n   *\n   * @public\n   */\n  @property({ type: String })\n    height?: string;\n\n  /**\n   * Determines on which side the component is placed at.\n   *\n   * @default \"Bottom\"\n   * @public\n   */\n  @property({ type: PlacementType, defaultValue: PlacementType.Bottom })\n    placementType!: `${PlacementType}`;\n\n  /**\n   * Determines the horizontal alignment of the component.\n   *\n   * @default \"Left\"\n   * @public\n   */\n  @property({ type: HorizontalAlign, defaultValue: HorizontalAlign.Left })\n    horizontalAlign!: `${HorizontalAlign}`;\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   * Allows setting a custom role.\n   * @default \"None\"\n   * @public\n   */\n  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.None })\n    accessibleRole!: `${PopupAccessibleRole}`;\n\n  /**\n   * Allows setting a custom role for dropdown trigger.\n   * @default \"combobox\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"combobox\" })\n    triggerAccessibleRole!: string;\n\n  /**\n   * Defines the content of the Dropdown.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: Array<HTMLElement>;\n\n  /**\n   * Defines the header HTML Element.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    header!: Array<HTMLElement>;\n\n  /**\n   * Defines the footer HTML Element.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    footer!: Array<HTMLElement>;\n\n  /**\n   * Defines the trigger HTML Element.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    trigger!: Array<HTMLElement>;\n\n  /**\n   * Indicates if the dropdown pane is open\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    open!: boolean;\n\n  /**\n   * Determines if there is no enough space, the component can be placed\n   * over the target.\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disableTargetOverlap?: boolean;\n\n  /**\n   * Defines direction of the component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExDropdown.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  onAfterRendering() {\n    this.handleDirection();\n  }\n\n  handleDirection() {\n    const filterMenu = this.shadowRoot?.querySelector(\".udex-dropdown\");\n    if (filterMenu) {\n      const directionStyles: string = window\n        .getComputedStyle(filterMenu)\n        .getPropertyValue(\"direction\");\n      if (!directionStyles) {\n        this._direction = \"ltr\";\n      } else {\n        this._direction = directionStyles;\n      }\n    }\n  }\n\n  getDropdownPane() {\n    return this.shadowRoot!.querySelector<Popover>(\"[ui5-popover]\")!;\n  }\n\n  getTrigger() {\n    return this.querySelector<HTMLElement>(\"[slot=trigger]\")!;\n  }\n\n  onTriggerClick() {\n    const dropdown = this.getDropdownPane();\n    const opener = this.getTrigger();\n    const isOpenerDisabled = opener.hasAttribute(\"disabled\");\n\n    if (!isOpenerDisabled) {\n      dropdown.showAt(opener);\n      this.fireEvent(\"click-trigger\");\n    }\n  }\n\n  /**\n   * Open dropdown\n   *\n   * @public\n   */\n  onOpen(opener: HTMLElement): void {\n    const dropdown = this.getDropdownPane();\n    dropdown.showAt(opener);\n  }\n\n  /**\n   * Close dropdown\n   *\n   * @public\n   */\n  onClose():void {\n    const dropdown = this.getDropdownPane();\n    dropdown.close(true);\n  }\n\n  afterDropdownClose() {\n    this.open = false;\n    this.fireEvent(\"after-close\");\n  }\n\n  afterDropdownOpen() {\n    this.open = true;\n    this.fireEvent(\"after-open\");\n  }\n\n  beforeDropdownOpen() {\n    const dropdown = this.getDropdownPane();\n    const hasContentHeight = !!this?.height?.length;\n\n    if (hasContentHeight) {\n      const content = dropdown.shadowRoot!.querySelector(\"[part=content]\") as HTMLElement;\n      content.style.maxHeight = <string> this.height;\n    }\n\n    this.fireEvent(\"before-open\");\n  }\n\n  beforeDropdownClose() {\n    this.fireEvent(\"before-close\");\n  }\n\n  get hasTriggerSlot(): boolean {\n    return !!this.trigger.length;\n  }\n\n  get hasHeaderSlot(): boolean {\n    return !!this.header.length;\n  }\n\n  get hasFooterSlot(): boolean {\n    return !!this.footer.length;\n  }\n\n  get disableAllowTargetOverlap(): boolean {\n    return this.disableTargetOverlap?.toString() !== \"true\";\n  }\n\n  get triggerAccessibleName(): string {\n    return UDExDropdown.i18nBundle.getText(TRIGGER);\n  }\n}\n\nUDExDropdown.define();\n\nexport default UDExDropdown;\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,OAAO,MAAM,oCAAoC,CAAC;AACzD,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,0BAA0B,MAAM,iEAAiE,CAAC;AACzG,OAAO,mBAAmB,MAAM,sDAAsD,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,gBAAgB,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,SAAS;AACT,OAAO,WAAW,MAAM,iCAAiC,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AAmDH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAmHE,sBAAiB,GAAG,GAAG,CAAC;IAmH1B,CAAC;IAjHC,MAAM,CAAC,KAAK,CAAC,QAAQ;QACnB,cAAY,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,sBAAsB,CAAC,CAAC;IACxE,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,eAAe;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACpE,IAAI,UAAU,EAAE;YACd,MAAM,eAAe,GAAW,MAAM;iBACnC,gBAAgB,CAAC,UAAU,CAAC;iBAC5B,gBAAgB,CAAC,WAAW,CAAC,CAAC;YACjC,IAAI,CAAC,eAAe,EAAE;gBACpB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;aACzB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC;aACnC;SACF;IACH,CAAC;IAED,eAAe;QACb,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAU,eAAe,CAAE,CAAC;IACnE,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAC,aAAa,CAAc,gBAAgB,CAAE,CAAC;IAC5D,CAAC;IAED,cAAc;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QACjC,MAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAEzD,IAAI,CAAC,gBAAgB,EAAE;YACrB,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACxB,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;SACjC;IACH,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,MAAmB;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED;;;;OAIG;IACH,OAAO;QACL,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAChC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC5C,MAAM,sBAAsB,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACvE,IAAI,YAAY,CAAC,WAAW,GAAG,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,EAAE;YAC9E,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;SACrF;aAAM;YACL,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;SACvF;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAC/B,CAAC;IAED,kBAAkB;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,MAAM,gBAAgB,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC;QAEhD,IAAI,gBAAgB,EAAE;YACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAC;YACpF,OAAO,CAAC,KAAK,CAAC,SAAS,GAAY,IAAI,CAAC,MAAM,CAAC;SAChD;QAED,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAChC,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjC,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED,IAAI,aAAa;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IAC9B,CAAC;IAED,IAAI,aAAa;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IAC9B,CAAC;IAED,IAAI,yBAAyB;QAC3B,OAAO,IAAI,CAAC,oBAAoB,EAAE,QAAQ,EAAE,KAAK,MAAM,CAAC;IAC1D,CAAC;IAED,IAAI,qBAAqB;QACvB,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAClD,CAAC;CACF,CAAA;AA/NG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACT;AAShB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC;mDACjC;AASnC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe,CAAC,IAAI,EAAE,CAAC;qDAC/B;AASvC;IADD,QAAQ,EAAE;oDACe;AAQxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,CAAC,IAAI,EAAE,CAAC;oDACpC;AAQ1C;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;2DACpB;AAS/B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CACd;AAS7B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;4CACE;AAS5B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;4CACE;AAS5B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;6CACG;AAS7B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AASf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DACK;AAQ/B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACL;AAhHlB,YAAY;IAlDjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE;YACN,WAAW;YACX,0BAA0B,EAAE;SAC7B;QACD,QAAQ,EAAE,gBAAgB;QAC1B,YAAY,EAAE,CAAC,OAAO,CAAC;KACxB,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,eAAe,CAAC;IAEvB;;;;;OAKG;;IACF,KAAK,CAAC,aAAa,CAAC;IAErB;;;;;OAKG;;IACF,KAAK,CAAC,YAAY,CAAC;IAEpB;;;;;OAKG;;IACF,KAAK,CAAC,cAAc,CAAC;IAEtB;;;;;OAKG;;IACF,KAAK,CAAC,aAAa,CAAC;GACf,YAAY,CAsOjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport PopupAccessibleRole from \"@ui5/webcomponents/dist/types/PopupAccessibleRole.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport DropdownTemplate from \"./generated/templates/DropdownTemplate.lit.js\";\nimport { PlacementType, HorizontalAlign } from \"./types/Dropdown.js\";\nimport { TRIGGER } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport DropdownCss from \"./generated/themes/Dropdown.css\";\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-dropdown</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Dropdown.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-dropdown\n * @public\n */\n@customElement({\n  tag: \"udex-dropdown\",\n  renderer: litRender,\n  styles: [\n    DropdownCss,\n    getEffectiveScrollbarStyle(),\n  ],\n  template: DropdownTemplate,\n  dependencies: [Popover],\n})\n\n/**\n * Fired event when the user clicks the trigger.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#clickTrigger\n * @public\n */\n@event(\"click-trigger\")\n\n/**\n * Fired before the dropdown is opened.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#beforeOpen\n * @public\n */\n@event(\"before-open\")\n\n/**\n * Fired after the dropdown is opened.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#afterOpen\n * @public\n */\n@event(\"after-open\")\n\n/**\n * Fired before the menu is closed.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#beforeClose\n * @public\n */\n@event(\"before-close\")\n\n/**\n * Fired after the menu is closed.\n *\n * @event sap.ui.webc.web-components.UDExDropdown#afterClose\n * @public\n */\n@event(\"after-close\")\nclass UDExDropdown extends UI5Element {\n  /**\n   * Allows control over the height.\n   *\n   * @public\n   */\n  @property({ type: String })\n    height?: string;\n\n  /**\n   * Determines on which side the component is placed at.\n   *\n   * @default \"Bottom\"\n   * @public\n   */\n  @property({ type: PlacementType, defaultValue: PlacementType.Bottom })\n    placementType!: `${PlacementType}`;\n\n  /**\n   * Determines the horizontal alignment of the component.\n   *\n   * @default \"Left\"\n   * @public\n   */\n  @property({ type: HorizontalAlign, defaultValue: HorizontalAlign.Left })\n    horizontalAlign!: `${HorizontalAlign}`;\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   * Allows setting a custom role.\n   * @default \"None\"\n   * @public\n   */\n  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.None })\n    accessibleRole!: `${PopupAccessibleRole}`;\n\n  /**\n   * Allows setting a custom role for dropdown trigger.\n   * @default \"combobox\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"combobox\" })\n    triggerAccessibleRole!: string;\n\n  /**\n   * Defines the content of the Dropdown.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: Array<HTMLElement>;\n\n  /**\n   * Defines the header HTML Element.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    header!: Array<HTMLElement>;\n\n  /**\n   * Defines the footer HTML Element.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    footer!: Array<HTMLElement>;\n\n  /**\n   * Defines the trigger HTML Element.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    trigger!: Array<HTMLElement>;\n\n  /**\n   * Indicates if the dropdown pane is open\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    open!: boolean;\n\n  /**\n   * Determines if there is no enough space, the component can be placed\n   * over the target.\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disableTargetOverlap?: boolean;\n\n  /**\n   * Defines direction of the component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  static i18nBundle: I18nBundle;\n  _breakpointSizeXS = 640;\n\n  static async onDefine(): Promise<void> {\n    UDExDropdown.i18nBundle = await getI18nBundle(\"@udex/web-components\");\n  }\n\n  onAfterRendering() {\n    this.handleDirection();\n  }\n\n  handleDirection() {\n    const filterMenu = this.shadowRoot?.querySelector(\".udex-dropdown\");\n    if (filterMenu) {\n      const directionStyles: string = window\n        .getComputedStyle(filterMenu)\n        .getPropertyValue(\"direction\");\n      if (!directionStyles) {\n        this._direction = \"ltr\";\n      } else {\n        this._direction = directionStyles;\n      }\n    }\n  }\n\n  getDropdownPane() {\n    return this.shadowRoot!.querySelector<Popover>(\"[ui5-popover]\")!;\n  }\n\n  getTrigger() {\n    return this.querySelector<HTMLElement>(\"[slot=trigger]\")!;\n  }\n\n  onTriggerClick() {\n    const dropdown = this.getDropdownPane();\n    const opener = this.getTrigger();\n    const isOpenerDisabled = opener.hasAttribute(\"disabled\");\n\n    if (!isOpenerDisabled) {\n      dropdown.showAt(opener);\n      this.fireEvent(\"click-trigger\");\n    }\n  }\n\n  /**\n   * Open dropdown\n   *\n   * @public\n   */\n  onOpen(opener: HTMLElement): void {\n    const dropdown = this.getDropdownPane();\n    dropdown.showAt(opener);\n    this.open = true;\n  }\n\n  /**\n   * Close dropdown\n   *\n   * @public\n   */\n  onClose():void {\n    this.open = false;\n  }\n\n  afterDropdownClose() {\n    this.open = false;\n    this.fireEvent(\"after-close\");\n  }\n\n  afterDropdownOpen() {\n    this.open = true;\n    const dropdownPane = this.getDropdownPane();\n    const dropdownPaneLeftOffset = +dropdownPane.style.left.split(\"px\")[0];\n    if (dropdownPane.offsetWidth + dropdownPaneLeftOffset < this._breakpointSizeXS) {\n      this.style.setProperty(\"--udex-dropdown-left-offset\", `${dropdownPane.style.left}`);\n    } else {\n      dropdownPane.style.setProperty(\"--udex-dropdown-pane-width\", `${this.offsetWidth}px`);\n    }\n    this.fireEvent(\"after-open\");\n  }\n\n  beforeDropdownOpen() {\n    const dropdown = this.getDropdownPane();\n    const hasContentHeight = !!this?.height?.length;\n\n    if (hasContentHeight) {\n      const content = dropdown.shadowRoot!.querySelector(\"[part=content]\") as HTMLElement;\n      content.style.maxHeight = <string> this.height;\n    }\n\n    this.fireEvent(\"before-open\");\n  }\n\n  beforeDropdownClose() {\n    this.fireEvent(\"before-close\");\n  }\n\n  get hasTriggerSlot(): boolean {\n    return !!this.trigger.length;\n  }\n\n  get hasHeaderSlot(): boolean {\n    return !!this.header.length;\n  }\n\n  get hasFooterSlot(): boolean {\n    return !!this.footer.length;\n  }\n\n  get disableAllowTargetOverlap(): boolean {\n    return this.disableTargetOverlap?.toString() !== \"true\";\n  }\n\n  get triggerAccessibleName(): string {\n    return UDExDropdown.i18nBundle.getText(TRIGGER);\n  }\n}\n\nUDExDropdown.define();\n\nexport default UDExDropdown;\n"]}

package/dist/FilterMenu.d.ts

@@ -1,8 +1,9 @@
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
-import UDExDropdown from "./Dropdown.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import UDExSearch from "./Search.js";
+import UDExButton from "./Button.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
 import { ListMode } from "./types/List.js";
@@ -102,7 +103,13 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
      * @public
      */
     disabled: boolean;
-    _open?: boolean;
+    /**
+     * Defines whether the dropdown is open or not.
+     *
+     * @default false
+     * @private
+     */
+    _open: boolean;
     /**
      * Hides the result button in the footer.
      *
@@ -140,12 +147,14 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
      * @public
      */
     triggerAccessibleRole: string;
-    _dropdown: UDExDropdown;
+    _trigger: UDExButton;
     _search: UDExSearch;
     _hasFooterButtons: boolean;
-    onAfterRendering(): void;
+    _popover: ResponsivePopover;
+    _breakpointSizeXS: number;
     onEnterDOM(): void;
     onBeforeRendering(): void;
+    onAfterRendering(): void;
     handleSelectAll(e: CustomEvent): void;
     handleItemPress(e: CustomEvent): void;
     handleHeaderPress(e: CustomEvent): void;
@@ -158,23 +167,29 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
     handleKeyDownSearch(e: CustomEvent): void;
     handleKeyDownResultBtn(e: KeyboardEvent): void;
     handleKeyDownResetBtn(e: KeyboardEvent): void;
-    onDropdownClose(): void;
-    getDropdown(): UDExDropdown;
+    handleTriggerClick(): void;
+    handleTriggerKeydown(e: KeyboardEvent): void;
+    toggleDropdown(): void;
+    onDropdownClose(e?: KeyboardEvent): void;
     getSearch(): UDExSearch;
     _dropdownBeforeOpen(): void;
     _dropdownAfterOpen(): void;
     _dropdownBeforeClose(): void;
     _dropdownAfterClose(): void;
+    get disableAllowTargetOverlap(): boolean;
     get hasFilterNamePrefix(): boolean;
     get getResultLabelText(): string;
     get getResetLabelText(): string;
     get disabledResultBtn(): boolean;
     get _iconAccessibleNameText(): string;
+    get triggerButtonAccessibleName(): string;
     get searchableList(): object;
     get hideActionBar(): boolean;
     get hasFooterButtons(): boolean;
     get hasResultBtn(): boolean;
     get hasResetBtn(): boolean;
+    getTriggerButton(): UDExButton;
+    getPopover(): ResponsivePopover;
     getItems(): Array<UDExListItemBase>;
     static get searchableListBaseTemplate(): typeof SearchableListBaseTemplate;
 }