@sapudex/web-components 0.176.0 → 0.192.2

package/src/Breadcrumbs.ts

@@ -19,8 +19,8 @@ import breadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs
 import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
 import BreadcrumbsPopover from "./generated/templates/BreadcrumbsPopoverTemplate.lit.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
-import Link from "./Link.js";
-import Dropdown from "./Dropdown.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExLink from "./Link.js";
 import {
   BREADCRUMBS_ARIA_LABEL,
   BREADCRUMBS_OVERFLOW_ARIA_LABEL,
@@ -66,7 +66,7 @@ export type UDExBreadcrumbsItemClickEventDetail = {
   template: BreadcrumbsTemplate,
   staticAreaTemplate: BreadcrumbsPopover,
   staticAreaStyles: [BreadcrumbsPopoverCss],
-  dependencies: [UDExBreadcrumbsItem, Link, Dropdown, Icon],
+  dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, Icon],
 })
 /**
  * Fires when a `BreadcrumbsItem` is clicked.
@@ -132,7 +132,7 @@ class UDExBreadcrumbs extends UI5Element {
   @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
     items!: Array<UDExBreadcrumbsItem>;
 
-  responsivePopover?: Dropdown;
+  responsivePopover?: UDExDropdown;
   _itemNavigation?: ItemNavigation;
   _shouldFocusFirstVisibleItem!: boolean;
 
@@ -156,12 +156,12 @@ class UDExBreadcrumbs extends UI5Element {
     });
   }
 
-  async _getResponsePopover(): Promise<Dropdown> {
+  async _getResponsePopover(): Promise<UDExDropdown> {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<Dropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;
+    return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;
   }
 
-  _getFocusableItems(): Array<Link> {
+  _getFocusableItems(): Array<UDExLink> {
     const items = this._links;
     items.unshift(this._dropdownArrowLink);
 
@@ -206,7 +206,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {
-    const link = e.target as Link,
+    const link = e.target as UDExLink,
       items = this._getItems(),
       item = items.find(x => `${x._id}-link` === link.id)!,
       {
@@ -251,7 +251,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _onfocusin(e: FocusEvent): void {
-    const currentItem = e.target as Link;
+    const currentItem = e.target as UDExLink;
 
     this._itemNavigation?.setCurrentItem(currentItem);
   }
@@ -272,7 +272,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _focusFirstVisibleItem(): void {
-    Array.from(this.shadowRoot!.querySelectorAll<Link>("[udex-link]"))[0].focus();
+    Array.from(this.shadowRoot!.querySelectorAll<UDExLink>("[udex-link]"))[0].focus();
     this._shouldFocusFirstVisibleItem = false;
   }
 
@@ -280,15 +280,15 @@ class UDExBreadcrumbs extends UI5Element {
    * Getter for the interactive element that opens the overflow
    * @private
    */
-  get _dropdownArrowLink(): Link {
-    return this.shadowRoot!.querySelector<Link>(".udex-breadcrumbs__trigger")!;
+  get _dropdownArrowLink(): UDExLink {
+    return this.shadowRoot!.querySelector<UDExLink>(".udex-breadcrumbs__trigger")!;
   }
 
   /**
    * Getter for the list of links corresponding to the abstract breadcrumb items
    */
-  get _links(): Array<Link> {
-    return Array.from(this.shadowRoot!.querySelectorAll<Link>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
+  get _links(): Array<UDExLink> {
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
   }
 
   /**

package/src/BreadcrumbsPopover.hbs

@@ -17,7 +17,7 @@
           target="{{this.target}}"
           class="udex-breadcrumbs__item udex-breadcrumbs__item--{{@index}} udex-breadcrumbs__item--with-icon" 
           icon={{this.icon}}
-          icon-placement="start" 
+          icon-placement="Start" 
           accessible-name="{{this.textContent}}"
           data-ui5-stable="{{this.stableDomRef}}">
           {{this.textContent}}

package/src/CountrySelector.hbs

@@ -20,9 +20,9 @@
     </udex-dropdown>
     {{#if supportingText}}
         <udex-status-message
-                ?disabled="{{disabled}}"
-                supporting-text="{{supportingText}}"
-                value-state="{{valueState}}">
+            ?disabled="{{disabled}}"
+            supporting-text="{{supportingText}}"
+            value-state="{{valueState}}">
         </udex-status-message>
     {{/if}}
 </div>
@@ -34,33 +34,33 @@
         slot="trigger">
         {{#if showFlagImages}}
             <img
-                    class="udex-country-selector__image"
-                    aria-label="{{flagAriaLabel}}"
-                    style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
+                class="udex-country-selector__image"
+                aria-label="{{flagAriaLabel}}"
+                style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
         {{/if}}
-            <udex-text-field
-                label="{{effectiveAriaLabel}}"
-                id="udexTextField"
-                class="udex-country-selector__text"
-                value="{{selectedCountryName}}"
-                value-state="{{valueState}}"
-                direction="left"
-                aria-label="{{effectiveAriaLabel}}"
-                accessible-name="{{supportingText}}"
-                accessible-name-ref="{{accessibleNameRef}}"
-                aria-controls="{{ariaControls}}"
-                role="combobox"
-                aria-haspopup="true"
-                aria-expanded="{{_open}}"
-                ?required="{{required}}"
-                ?disabled="{{disabled}}"
-                ?readonly="{{readonly}}"
-                ?displayonly="{{displayonly}}"
-                @click-trigger="{{handleKeyDown}}"
-                @mousedown="{{handleInputMouseDown}}"
-                icon="{{triggerIcon}}"
-                accessible-icon-name="{{effectiveAriaLabel}}"
-                maxlength="0">
-            </udex-text-field>
+        <udex-text-field
+            label="{{effectiveAriaLabel}}"
+            id="udexTextField"
+            class="udex-country-selector__text"
+            value="{{selectedCountryName}}"
+            value-state="{{valueState}}"
+            direction="left"
+            aria-label="{{effectiveAriaLabel}}"
+            accessible-name="{{supportingText}}"
+            accessible-name-ref="{{accessibleNameRef}}"
+            aria-controls="{{ariaControls}}"
+            role="combobox"
+            aria-haspopup="true"
+            aria-expanded="{{_open}}"
+            ?required="{{required}}"
+            ?disabled="{{disabled}}"
+            ?readonly="{{readonly}}"
+            ?displayonly="{{displayonly}}"
+            @click-trigger="{{handleKeyDown}}"
+            @mousedown="{{handleInputMouseDown}}"
+            icon="{{triggerIcon}}"
+            accessible-icon-name="{{effectiveAriaLabel}}"
+            maxlength="0">
+        </udex-text-field>
     </div>
 {{/inline}}

package/src/CountrySelector.ts

@@ -269,10 +269,10 @@ class CountrySelector extends UDExSearchableListBase {
 
   countryList: Country[] = CountryListDB;
   selectedCountry!: Country | undefined;
+  _trigger!: HTMLElement;
 
   _dropdown!: UDExDropdown;
   _search!: Search;
-
   _handleResizeBound: ResizeObserverCallback;
 
   static i18nBundle: I18nBundle;
@@ -316,6 +316,11 @@ class CountrySelector extends UDExSearchableListBase {
   onAfterRendering() {
     this._dropdown = this.getDropdown();
     this._search = this.getSearch();
+    this._trigger = this.getTrigger();
+  }
+
+  getTrigger(): HTMLElement {
+    return this.shadowRoot!.querySelector(".udex-country-selector__dropdown")!;
   }
 
   _dropdownBeforeOpen() {
@@ -346,27 +351,27 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   _handleResize() {
-    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+    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");
+    const list = this.shadowRoot!.querySelector<UDExList>("[udex-list]");
     return list?.getAttribute("id");
   }
 
-  get selectedCountryFlagX() {
+  get selectedCountryFlagX(): string | undefined {
     return this.selectedCountry?.flagX;
   }
 
-  get selectedCountryFlagY() {
+  get selectedCountryFlagY(): string | undefined {
     return this.selectedCountry?.flagY;
   }
 
-  get selectedCountryName() {
+  get selectedCountryName(): string | null {
     return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
   }
 
-  get flagAriaLabel():string {
+  get flagAriaLabel(): string {
     return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
   }
 
@@ -374,12 +379,12 @@ class CountrySelector extends UDExSearchableListBase {
     return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
   }
 
-  get countrySelectorClasses() {
+  get countrySelectorClasses(): string {
     const baseClass = "udex-country-selector__dropdown";
     return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
   }
 
-  get countrySelectorTriggerClasses() {
+  get countrySelectorTriggerClasses(): string {
     const baseClass = "udex-country-selector__trigger";
     const classes = [baseClass];
 
@@ -398,15 +403,15 @@ class CountrySelector extends UDExSearchableListBase {
     return classes.join(" ");
   }
 
-  get showFlagImages() {
+  get showFlagImages(): boolean {
     return !this.hideFlagImages;
   }
 
-  get isOpenerDisabled() {
+  get isOpenerDisabled(): boolean {
     return this.readonly || this.displayonly || this.disabled;
   }
 
-  getItemTemplate(country: Country) {
+  getItemTemplate(country: Country): string | undefined {
     return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
   }
 
@@ -415,7 +420,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   handleCloseSearch() {
-    this.getInput()?.shadowRoot!.querySelector<Button>("udex-control-button")?.focus();
+    this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
   }
 
   handleItemPress(e: CustomEvent) {
@@ -507,7 +512,7 @@ class CountrySelector extends UDExSearchableListBase {
     }
   }
 
-  dropDownClose():void {
+  dropDownClose(): void {
     this.getDropdownPopover()?.close(false, false, true);
   }
 
@@ -529,19 +534,19 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("udex-search")!;
+    return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
   }
 
-  getDropdownPopover() {
+  getDropdownPopover(): Popover {
     return this._dropdown.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   getDropdown(): UDExDropdown {
-    return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
+    return this.shadowRoot!.querySelector<UDExDropdown>("[udex-dropdown]")!;
   }
 
   getInput(): UDExTextField {
-    return this.shadowRoot!.querySelector<UDExTextField>("udex-text-field")!;
+    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 
   get effectiveAriaLabel(): string {

package/src/DatePicker.hbs

@@ -1,10 +1,9 @@
 <div
     class="udex-date-picker__container">
     <udex-text-field
-        @click="{{handleInputClick}}"
-        @mousedown="{{handleInputMouseDown}}"
-        @keydown="{{handleInputKeyDown}}"
-        class="udex-date-picker__input udex-date-picker__trigger"
+        value="{{value}}"
+        @ui5-change="{{_onInputChange}}"
+        class="udex-date-picker__input"
         label="{{label}}"
         accessible-name="{{dateAccessibleName}}"
         accessible-name-ref="{{accessibleNameRef}}"
@@ -13,8 +12,8 @@
         ?disabled="{{disabled}}"
         ?required="{{required}}"
         ?readonly="{{readonly}}"
-        value="{{value}}"
         icon="appointment-2"
+        @ui5-click-icon="{{handleInputClick}}"
         value-state="{{valueState}}"
     >
     </udex-text-field>