@sapudex/web-components 0.226.0 → 2.1.0

package/src/ControlButton.ts

@@ -1,11 +1,11 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ControlButtonCss from "./generated/themes/ControlButton.css.js";
-import UDExButtonSize from "./types/ButtonSize.js";
+import { UDExButtonSize, UDExControlButtonDesign } from "./types/Button.js";
 
 /**
  * @class
@@ -26,7 +26,7 @@ import UDExButtonSize from "./types/ButtonSize.js";
  */
 @customElement({
   tag: "udex-control-button",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [Button.styles, ControlButtonCss],
 })
 
@@ -37,8 +37,8 @@ class UDExControlButton extends Button {
    * @default "Medium"
    * @public
    */
-  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
-    size!: `${UDExButtonSize}`;
+  @property()
+    size: `${UDExButtonSize}` = UDExButtonSize.Medium;
 
   /**
    * Determines whether the component is displayed as read-only.
@@ -48,6 +48,15 @@ class UDExControlButton extends Button {
   @property({ type: Boolean })
     readonly!: boolean;
 
+  /**
+   * Determines whether the component is displayed as read-only.
+   * @default "Default"
+   * @public
+   */
+  @property({ type: String })
+    /** @ts-expect-error */
+    design!: `${UDExControlButtonDesign}` = UDExControlButtonDesign.Default;
+
   /**
    * Determines Combobox role for the button.
    * @default false

package/src/CountrySelector.hbs

@@ -1,20 +1,20 @@
 <div class="{{countrySelectorClasses}}">
+    {{> trigger}}
     <udex-dropdown
         id="dropdown"
-        horizontal-align="Left"
+        opener="udex-{{this._id}}-country-selector__opener"
+        horizontal-align="Start"
         height="{{height}}"
         @ui5-item-press="{{handleItemPress}}"
         @ui5-before-open="{{_dropdownBeforeOpen}}"
-        @ui5-after-open="{{_dropdownAfterOpen}}"
+        @ui5-open="{{_dropdownOpen}}"
         @ui5-before-close="{{_dropdownBeforeClose}}"
-        @ui5-after-close="{{_dropdownAfterClose}}"
+        @ui5-close="{{_dropdownClose}}"
         @ui5-submit-search-value="{{handleSubmitSearch}}"
         @ui5-handle-value-search="{{handleValueSearch}}"
         @ui5-handle-value-reset="{{handleResetSearch}}"
         @ui5-search-keydown="{{handleKeyDownSearch}}"
-        @keydown="{{handleKeyDownDropdown}}"
-        @ui5-handle-close-search="{{handleCloseSearch}}">
-        {{> trigger}}
+        @keydown="{{handleKeyDownDropdown}}">
         {{searchableList}}
     </udex-dropdown>
     {{#if supportingText}}
@@ -28,8 +28,10 @@
 
 {{#*inline "trigger"}}
     <div
+        id="udex-{{this._id}}-country-selector__opener"
         class="{{countrySelectorTriggerClasses}}"
         ?disabled="{{isOpenerDisabled}}"
+        @click="{{handleTriggerClick}}"
         slot="trigger">
         {{#if showFlagImages}}
             <img
@@ -55,7 +57,7 @@
             ?disabled="{{disabled}}"
             ?readonly="{{readonly}}"
             ?displayonly="{{displayonly}}"
-            @click="{{handleTriggerClick}}"
+            @ui5-click-icon="{{handleTriggerClick}}"
             @mousedown="{{handleInputMouseDown}}"
             icon="{{triggerIcon}}"
             accessible-icon-name="{{effectiveAriaLabel}}"

package/src/CountrySelector.ts

@@ -1,35 +1,43 @@
 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import {
   isEscape,
   isTabPrevious,
   isTabNext,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import Popover from "@ui5/webcomponents/dist/Popover.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import type Popover from "@ui5/webcomponents/dist/Popover.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
+import type { Country } from "./data/CountryListISO3166.js";
+import { CountryListDB } from "./data/CountryListISO3166.js";
+import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
+import Search from "./Search.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExList from "./List.js";
+import UDExSearchableListBase from "./SearchableListBase.js";
+import UDExListItem from "./ListItem.js";
 import UDExTextField from "./TextField.js";
-import ValueState from "./types/common.js";
+import UDExValueState from "./types/common.js";
 import StatusMessage from "./StatusMessage.js";
-import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
+import type { UDExSearchKeydownEventDetail } from "./Search.js";
+import type { UDExSearchableListBaseEvents } from "./SearchableListBase.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 { Country, CountryListDB } from "./data/CountryListISO3166.js";
-import UDExSearchableListBase from "./SearchableListBase.js";
-import UDExListItem from "./ListItem.js";
-import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+type UDExCountrySelectorChangeSearchEventDetail = {
+  value: string,
+}
 
 /**
  * @class
@@ -45,7 +53,6 @@ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
  * <code>import "@sapudex/web-components/dist/CountrySelector.js";</code>
  *
  * @constructor
- * @author SAP SE
  * @extends UDExSearchableListBase
  * @tagname udex-country-selector
  * @public
@@ -57,84 +64,77 @@ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
   template: CountrySelectorTemplate,
   dependencies: [
     Search,
+    Button,
     UDExList,
     UDExListItem,
     UDExDropdown,
     UDExTextField,
-    Button,
     StatusMessage,
   ],
 })
 
 /**
- * Fired before the dropdown paneis opened.
+ * Fired before the dropdown pane is opened.
  *
- * @event sap.ui.webc.web-components.CountrySelector#beforeOpen
  * @public
  */
-@event("before-open")
+@event("before-open", { bubbles: true })
 
 /**
  * Fired after the dropdown pane is opened.
  *
- * @event sap.ui.webc.web-components.CountrySelector#afterOpen
  * @public
  */
-@event("after-open")
+@event("open", { bubbles: true })
 
 /**
  * Fired before the dropdown pane is closed.
  *
- * @event sap.ui.webc.web-components.CountrySelector#beforeClose
  * @public
  */
-@event("before-close")
+@event("before-close", { bubbles: true })
 
 /**
  * Fired after the dropdown pane is closed.
  *
- * @event sap.ui.webc.web-components.CountrySelector#afterClose
  * @public
  */
-@event("after-close")
+@event("close", { bubbles: true })
 
 /**
  * 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 },
-  },
-})
+@event("change-search", { bubbles: true })
 
 /**
  * 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")
+@event("reset-search", { bubbles: true })
 
 /**
  * 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 },
-  },
-})
+@event("submit-search", { bubbles: true })
 
 class UDExCountrySelector extends UDExSearchableListBase {
+  eventDetails!: {
+    "open": void,
+    "close": void,
+    "before-close": void,
+    "before-open": void,
+    "change-search": UDExCountrySelectorChangeSearchEventDetail,
+  } & Omit<UDExSearchableListBaseEvents, "change-search">;
+
   /**
    * Defines label text for the input field.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property({ type: String })
@@ -143,19 +143,19 @@ class UDExCountrySelector extends UDExSearchableListBase {
   /**
    * Defines the accessible ARIA name of the component.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
   @property()
-    accessibleName!: string;
+    accessibleName?: string;
 
   /**
    * Receives id (or many ids) of the elements that label the component.
    * @default ""
    * @public
    */
-  @property({ defaultValue: "" })
-    accessibleNameRef!: string;
+  @property()
+    accessibleNameRef: string = "";
 
   /**
    * Defines whether the component is required.
@@ -243,17 +243,17 @@ class UDExCountrySelector extends UDExSearchableListBase {
    * @default "Standard"
    * @public
    */
-  @property({ type: ValueState, defaultValue: ValueState.Standard })
-    valueState!: `${ValueState}`;
+  @property()
+    valueState: `${UDExValueState}` = UDExValueState.Standard;
 
   /**
    * Defines supporting text under the country selector.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    supportingText!: string;
+  @property({ type: String })
+    supportingText?: string;
 
   /**
    *
@@ -273,12 +273,9 @@ class UDExCountrySelector extends UDExSearchableListBase {
   _search!: Search;
   _handleResizeBound: ResizeObserverCallback;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
-    UDExCountrySelector.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   constructor() {
     super();
     this._shouldFilterItems = false;
@@ -301,7 +298,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
     }
 
     if (!this.selectedCountry) {
-      this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry.toUpperCase());
+      this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry?.toUpperCase());
     }
 
     this.prepareCountrySelectorItems();
@@ -321,26 +318,27 @@ class UDExCountrySelector extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector(".udex-country-selector__dropdown")!;
   }
 
-  _dropdownBeforeOpen() {
-    this.onResetSearch();
-    this._open = true;
-    this.fireEvent("before-open");
+  _dropdownClose() {
+    this.fireDecoratorEvent("close");
   }
 
-  _dropdownAfterClose() {
-    this._open = false;
-    this.fireEvent("after-close");
+  _dropdownOpen() {
+    this.fireDecoratorEvent("open");
   }
 
-  _dropdownAfterOpen() {
-    this.fireEvent("after-open");
+  _dropdownBeforeOpen() {
+    this._open = true;
+    this.onResetSearch();
+    this.fireDecoratorEvent("before-open");
   }
 
   _dropdownBeforeClose() {
-    this.fireEvent("before-close");
+    this._open = false;
+    this.fireDecoratorEvent("before-close");
   }
 
   get searchableList() {
+    this.defaultAccessibleRole = "listbox";
     return executeTemplate(UDExCountrySelector.searchableListBaseTemplate, this);
   }
 
@@ -352,73 +350,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this._trigger.offsetWidth}px`);
   }
 
-  get ariaControls(): string | null | undefined {
-    const list = this.shadowRoot!.querySelector<UDExList>("[udex-list]");
-    return list?.getAttribute("id");
-  }
-
-  get selectedCountryFlagX(): string | undefined {
-    return this.selectedCountry?.flagX;
-  }
-
-  get selectedCountryFlagY(): string | undefined {
-    return this.selectedCountry?.flagY;
-  }
-
-  get selectedCountryName(): string | null {
-    return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
-  }
-
-  get flagAriaLabel(): string {
-    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
-  }
-
-  get triggerIcon(): string {
-    return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
-  }
-
-  get countrySelectorClasses(): string {
-    const baseClass = "udex-country-selector__dropdown";
-    return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
-  }
-
-  get countrySelectorTriggerClasses(): string {
-    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(): boolean {
-    return !this.hideFlagImages;
-  }
-
-  get isOpenerDisabled(): boolean {
-    return this.readonly || this.displayonly || this.disabled;
-  }
-
-  getItemTemplate(country: Country): string | undefined {
-    return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
-  }
-
-  getCountryLabel(countryName?: string, localName?: string): string | null {
-    return localName ? `${countryName} (${localName})` : countryName || null;
-  }
-
   handleCloseSearch() {
-    this.dropdownClose();
     this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
   }
 
@@ -427,12 +359,12 @@ class UDExCountrySelector extends UDExSearchableListBase {
     const target = e.target as HTMLElement;
     const item: any = this.getItemFromList(target?.getAttribute("data-token-id") as string);
     this.selectedCountry = this.countryList.find(country => country.iso === item._id);
-    this.dropdownClose();
+    this.dropDownClose();
   }
 
   handleKeyPress(keyEvent: KeyboardEvent) {
     const key = keyEvent.key;
-    this._dropdown.onOpen(this.getInput());
+    this._dropdown.open = true;
     this._search.focus();
     this._search.value = key;
     this.onValueSearch(key);
@@ -445,14 +377,16 @@ class UDExCountrySelector extends UDExSearchableListBase {
   onValueSearch(searchValue: string) {
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
-    this.fireEvent("change-search", { value: searchValue });
+    this.fireDecoratorEvent("change-search", { value: searchValue });
   }
 
   handleTriggerClick() {
-    this._dropdown.open = !this._dropdown.open;
+    if (!this.isOpenerDisabled) {
+      this._dropdown.open = !this._dropdown.open;
+    }
   }
 
-  handleValueSearch(e:CustomEvent) {
+  handleValueSearch(e: CustomEvent) {
     this.onValueSearch(e.detail.value as string);
   }
 
@@ -460,26 +394,24 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this.onSubmitSearch();
   }
 
-  handleKeyDownSearch(e: CustomEvent) {
-    const keyEvent = e.detail as KeyboardEvent;
+  handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>) {
+    const { detail: { e } } = keyEvent;
 
-    if (isTabPrevious(keyEvent)) {
-      this.dropdownClose();
-    }
-    if (isEscape(keyEvent)) {
-      keyEvent.preventDefault();
-      this.getDropdownPopover()?.close();
+    if (isTabPrevious(e) || isEscape(e)) {
+      e.preventDefault();
+      this.dropDownClose();
+      this.handleCloseSearch();
     }
   }
 
   handleKeyDownDropdown(e: KeyboardEvent) {
     if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {
-      this.dropdownClose();
+      this.dropDownClose();
     }
   }
 
-  dropdownClose(): void {
-    this.getDropdownPopover()?.close(false, false, true);
+  dropDownClose(): void {
+    this._dropdown.open = false;
   }
 
   handleResetSearch() {
@@ -499,6 +431,71 @@ class UDExCountrySelector extends UDExSearchableListBase {
     });
   }
 
+  getItemTemplate(country: Country) {
+    return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
+  }
+
+  getCountryLabel(countryName?: string, localName?: string): string | null {
+    return localName ? `${countryName} (${localName})` : countryName || null;
+  }
+
+  get ariaControls(): string | null | undefined {
+    const list = this.shadowRoot!.querySelector<UDExList>("[udex-list]");
+    return list?.getAttribute("id");
+  }
+
+  get selectedCountryFlagX(): string | undefined {
+    return this.selectedCountry?.flagX;
+  }
+
+  get selectedCountryFlagY(): string | undefined {
+    return this.selectedCountry?.flagY;
+  }
+
+  get selectedCountryName(): string | null {
+    return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
+  }
+
+  get flagAriaLabel(): string {
+    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
+  }
+
+  get triggerIcon(): string {
+    return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
+  }
+
+  get countrySelectorClasses(): string {
+    const baseClass = "udex-country-selector__dropdown";
+    return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
+  }
+
+  get countrySelectorTriggerClasses(): string {
+    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(): boolean {
+    return !this.hideFlagImages;
+  }
+
+  get isOpenerDisabled(): boolean {
+    return this.readonly || this.displayonly || this.disabled;
+  }
+
   getSearch(): Search {
     return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
   }

package/src/DatePicker.hbs

@@ -1,27 +1,28 @@
 <div
     class="udex-date-picker__container">
     <udex-text-field
-        value="{{value}}"
-        @ui5-change="{{_onInputChange}}"
         class="udex-date-picker__input"
+        _aria-has-popup="grid"
+        icon="appointment-2"
+        value="{{value}}"
         label="{{label}}"
         accessible-name="{{dateAccessibleName}}"
         accessible-name-ref="{{accessibleNameRef}}"
         accessible-icon-name="{{accessibleIconName}}"
-        _aria-has-popup="grid"
         ?disabled="{{disabled}}"
         ?required="{{required}}"
         ?readonly="{{readonly}}"
-        icon="appointment-2"
         @ui5-click-icon="{{handleInputClick}}"
-        value-state="{{valueState}}"
-    >
+        @ui5-change="{{_onInputChange}}"
+        value-state="{{valueState}}">
     </udex-text-field>
     {{#if supportingText}}
-      <udex-status-message
-          ?disabled="{{disabled}}"
-          supporting-text="{{supportingText}}"
-          value-state="{{valueState}}">
-      </udex-status-message>
+        <udex-status-message
+            ?disabled="{{disabled}}"
+            supporting-text="{{supportingText}}"
+            value-state="{{valueState}}">
+        </udex-status-message>
     {{/if}}
 </div>
+
+{{>include "./DatePickerPopover.hbs"}}