@sapudex/web-components 0.127.6 → 0.138.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapudex/web-components",
-  "version": "0.127.6",
+  "version": "0.138.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -30,16 +30,16 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.0",
-    "@ui5/webcomponents": "1.24.15",
-    "@ui5/webcomponents-base": "1.24.15",
-    "@ui5/webcomponents-fiori": "1.24.15",
-    "@ui5/webcomponents-icons": "1.24.15",
-    "@ui5/webcomponents-theming": "1.24.15",
+    "@ui5/webcomponents": "1.24.17",
+    "@ui5/webcomponents-base": "1.24.17",
+    "@ui5/webcomponents-fiori": "1.24.17",
+    "@ui5/webcomponents-icons": "1.24.17",
+    "@ui5/webcomponents-theming": "1.24.17",
     "@vimeo/player": "^2.24.0",
-    "video.js": "8.19.2"
+    "video.js": "8.22.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.24.15",
+    "@ui5/webcomponents-tools": "1.24.17",
     "chromedriver": "132.0.2",
     "cross-env": "^7.0.3",
     "typescript": "^4.9.4",

package/src/Accordion.ts

@@ -28,7 +28,7 @@ import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
  * For the <code>udex-accordion</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Accordion.js";</code>
+ * <code>import "@udex/web-components/dist/Accordion.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/AccordionItem.ts

@@ -29,7 +29,7 @@ type ToggleAllEvent = {
  * For the <code>udex-accordion-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/AccordionItem.js";</code>
+ * <code>import "@udex/web-components/dist/AccordionItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -191,7 +191,7 @@ class UDExAccordionItem extends UI5Element {
     }
 
     this?.parentElement?.addEventListener("ui5-toggle-items", this.toggleAllHandler.bind(this));
-    // TODO: this should be removed with transition to UI5 2.x, wne changed "title" attribute name.
+    // This should be removed with transition to UI5 2.x, we changed "title" attribute name.
     // Fix was provided to avoid reading "title" property by screen readers, which results reading title twice.
     this.setAttribute("aria-hidden", "true");
   }

package/src/Checkbox.ts

@@ -17,7 +17,7 @@ import CheckboxCss from "./generated/themes/Checkbox.css.js";
  * For the <code>udex-checkbox</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Checkbox.js";</code>
+ * <code>import "@udex/web-components/dist/Checkbox.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/CountrySelector.hbs

@@ -16,47 +16,51 @@
         {{> trigger}}
         {{searchableList}}
     </udex-dropdown>
+    {{#if supportingText}}
+        <udex-status-message
+                ?disabled="{{disabled}}"
+                supporting-text="{{supportingText}}"
+                value-state="{{valueState}}">
+        </udex-status-message>
+    {{/if}}
 </div>
 
 {{#*inline "trigger"}}
     <div
         class="{{countrySelectorTriggerClasses}}"
         ?disabled="{{isOpenerDisabled}}"
-        value="{{selectedCountryName}}"
         slot="trigger">
-            {{#if showFlagImages}}
-                <img
+        {{#if showFlagImages}}
+            <img
                     class="udex-country-selector__image"
                     design="Default"
-                    icon="decline"
-                    tooltip="Reset Button"
-                    aria-label="{{selectedCountryName}}"
+                    aria-label="{{flagAriaLabel}}"
                     style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
-            {{/if}}
+        {{/if}}
             <udex-text-field
-                label="{{label}}"
+                label="{{effectiveAriaLabel}}"
                 id="udexTextField"
                 class="udex-country-selector__text"
-                value-state="Standard"
+                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}}"
+                ?active="{{_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>
-            {{#unless displayonly}}
-                <ui5-icon
-                    class="udex-country-selector__icon"
-                    name="navigation-down-arrow">
-                </ui5-icon>
-            {{/unless}}
     </div>
 {{/inline}}

package/src/CountrySelector.ts

@@ -8,6 +8,9 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ResizeHandler, { ResizeObserverCallback } 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";
@@ -22,7 +25,6 @@ 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";
-import TextField from "./TextField.js";
 
 /**
  * @class
@@ -35,7 +37,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
@@ -55,6 +57,7 @@ import TextField from "./TextField.js";
     UDExDropdown,
     TextField,
     Button,
+    StatusMessage,
   ],
 })
 
@@ -229,6 +232,24 @@ class CountrySelector extends UDExSearchableListBase {
   @property({ type: String })
     searchPlaceholder!: string;
 
+  /**
+   * Defines the value state of the component.
+   *
+   * @default "Standard"
+   * @public
+   */
+  @property({ type: ValueState, defaultValue: ValueState.Standard })
+    valueState!: `${ValueState}`;
+
+  /**
+   * Defines supporting text under the country selector.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    supportingText!: string;
+
   /**
    *
    * @public
@@ -240,7 +261,7 @@ class CountrySelector extends UDExSearchableListBase {
     _open?: boolean = false;
 
   countryList: Country[] = CountryListDB;
-  selectedCountry!: Country;
+  selectedCountry!: Country | undefined;
 
   _dropdown!: UDExDropdown;
   _search!: Search;
@@ -275,7 +296,7 @@ class CountrySelector extends UDExSearchableListBase {
     }
 
     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();
@@ -338,6 +359,14 @@ class CountrySelector extends UDExSearchableListBase {
     return 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() {
     const baseClass = "udex-country-selector__dropdown";
     return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
@@ -374,8 +403,8 @@ class CountrySelector extends UDExSearchableListBase {
     return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
   }
 
-  getCountryLabel(countryName: string, localName?: string) {
-    return localName ? `${countryName} (${localName})` : countryName;
+  getCountryLabel(countryName?: string, localName?: string): string | null {
+    return localName ? `${countryName} (${localName})` : countryName || null;
   }
 
   handleCloseSearch() {
@@ -386,7 +415,7 @@ class CountrySelector extends UDExSearchableListBase {
     this.onItemPress(e);
     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.countryList[0];
+    this.selectedCountry = this.countryList.find(country => country.iso === item._id);
     this._dropdown.onClose();
   }
 
@@ -411,6 +440,10 @@ class CountrySelector extends UDExSearchableListBase {
     }
   }
 
+  handleInputMouseDown(e: CustomEvent) {
+    e.preventDefault();
+  }
+
   onValueSearch(searchValue: string) {
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
@@ -442,7 +475,7 @@ class CountrySelector extends UDExSearchableListBase {
   prepareCountrySelectorItems(): void {
     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),
@@ -465,7 +498,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   get effectiveAriaLabel(): string {
-    return this.accessibleName || CountrySelector.i18nBundle.getText(COUNTRY_SELECT);
+    return this.label || this.accessibleName || CountrySelector.i18nBundle.getText(COUNTRY_SELECT);
   }
 }
 

package/src/DatePicker.hbs

@@ -1,16 +1,15 @@
 <div
-    class="udex-date-picker__container"
->
+    class="udex-date-picker__container">
     <udex-text-field
         @click="{{handleInputClick}}"
         @mousedown="{{handleInputMouseDown}}"
         @keydown="{{handleInputKeyDown}}"
         class="udex-date-picker__input udex-date-picker__trigger"
         label="{{label}}"
-        accessible-name="{{accessibleName}}"
+        accessible-name="{{dateAccessibleName}}"
         accessible-name-ref="{{accessibleNameRef}}"
         accessible-icon-name="{{accessibleIconName}}"
-        aria-haspopup="grid"
+        _aria-has-popup="grid"
         ?disabled="{{disabled}}"
         ?required="{{required}}"
         ?readonly="{{readonly}}"
@@ -20,10 +19,10 @@
     >
     </udex-text-field>
     {{#if supportingText}}
-      <udex-status-message 
-      ?disabled="{{disabled}}" 
-      supporting-text="{{supportingText}}" 
-      value-state="{{valueState}}">
+      <udex-status-message
+          ?disabled="{{disabled}}"
+          supporting-text="{{supportingText}}"
+          value-state="{{valueState}}">
       </udex-status-message>
     {{/if}}
 </div>

package/src/DatePicker.ts

@@ -10,7 +10,7 @@ import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { 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";
@@ -223,16 +223,16 @@ class UDExDatePicker extends UI5Element {
 
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
+  static async onDefine(): Promise<void> {
     UDExDatePicker.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  async _getCalendar() {
+  async _getCalendar(): Promise<Calendar> {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
     return staticAreaItem!.querySelector<Calendar>("#ui5-calendar")!;
   }
 
-  async _getResponsePopover() {
+  async _getResponsePopover(): Promise<UDExDropdown> {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
     return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-calendar__popover`)!;
   }
@@ -241,24 +241,24 @@ class UDExDatePicker extends UI5Element {
    * Getter for the interactive element that opens the overflow
    * @private
    */
-  get _dropdownTrigger() {
+  get _dropdownTrigger(): UDExTextField {
     return this.shadowRoot!.querySelector<UDExTextField>(".udex-date-picker__trigger")!;
   }
 
-  _afterDropdownClose() {
+  _afterDropdownClose(): void {
     this._dropdownTrigger.active = false;
     this._dropdownTrigger.shadowRoot?.querySelector("input")?.focus();
   }
 
-  _afterDropdownOpen() {
+  _afterDropdownOpen(): void {
     this._dropdownTrigger.active = true;
   }
 
-  _closeRespPopover() {
+  _closeRespPopover(): void {
     this.responsivePopover && this.responsivePopover.onClose();
   }
 
-  async _openRespPopover() {
+  async _openRespPopover(): Promise<void> {
     this._dropdownTrigger.active = true;
     this.responsivePopover = await this._getResponsePopover();
     this.responsivePopover?.onOpen(this._dropdownTrigger);
@@ -337,9 +337,13 @@ class UDExDatePicker extends UI5Element {
     return [];
   }
 
-  get accessibleIconName() {
+  get accessibleIconName(): string {
     return UDExDatePicker.i18nBundle.getText(CALENDAR_ICON);
   }
+
+  get dateAccessibleName(): string {
+    return this.accessibleName || UDExDatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
+  }
 }
 
 UDExDatePicker.define();

package/src/Dropdown.hbs

@@ -7,6 +7,7 @@
             aria-expanded="{{open}}"
             aria-haspopup="true"
             aria-controls="{{this._id}}_udex-dropdown"
+            id="{{this._id}}-trigger"
             @click="{{onTriggerClick}}">
             <slot slot="trigger" name="trigger"></slot>
         </div>
@@ -16,6 +17,8 @@
         class="udex-dropdown__pane"
         ?allow-target-overlap="{{disableAllowTargetOverlap}}"
         hide-arrow
+        .open="{{open}}"
+        opener="{{this._id}}-trigger"
         placement-type="{{placementType}}"
         horizontal-align="{{horizontalAlign}}"
         accessible-name="{{accessibleName}}"

package/src/Dropdown.ts

@@ -27,7 +27,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
@@ -250,6 +250,7 @@ class UDExDropdown extends UI5Element {
   onOpen(opener: HTMLElement): void {
     const dropdown = this.getDropdownPane();
     dropdown.showAt(opener);
+    this.open = true;
   }
 
   /**
@@ -258,8 +259,7 @@ class UDExDropdown extends UI5Element {
    * @public
    */
   onClose():void {
-    const dropdown = this.getDropdownPane();
-    dropdown.close(true);
+    this.open = false;
   }
 
   afterDropdownClose() {

package/src/FilterMenu.hbs

@@ -1,64 +1,63 @@
-<udex-dropdown
-    id="{{this._id}}_dropdown-menu"
-    class="udex-filter-menu"
-    ?disable-target-overlap="{{disableTargetOverlap}}"
-    placement-type="{{placementType}}"
-    horizontal-align="{{horizontalAlign}}"
-    height="{{height}}"
-    accessible-role="{{accessibleRole}}"
-    @ui5-select-all="{{handleSelectAll}}"
-    @ui5-item-press="{{handleItemPress}}"
-    @ui5-header-press="{{handleHeaderPress}}"
-    @ui5-before-open="{{_dropdownBeforeOpen}}"
-    @ui5-after-open="{{_dropdownAfterOpen}}"
-    @ui5-before-close="{{_dropdownBeforeClose}}"
-    @ui5-after-close="{{_dropdownAfterClose}}"
-    @click-trigger="{{onDropdownClose}}"
-    @search-keydown="{{handleKeyDownSearch}}"
-    @keydown="{{handleKeyDownList}}"
-    @ui5-submit-search-value="{{handleSubmitSearch}}"
-    @ui5-handle-value-search="{{handleValueSearch}}"
-    @ui5-handle-value-reset="{{handleResetSearch}}">
-    {{> trigger}}
-    {{searchableList}}
-    {{#if modeMultiSelect}}
-        {{> buttons}}
-    {{/if}}
-</udex-dropdown>
-
-{{#*inline "trigger"}}
+<div>
     <button
-        aria-label="{{accessibleName}}"
-        aria-expanded="{{_open}}"
-        aria-haspopup="true"
-        role="{{triggerAccessibleRole}}"
-        aria-controls="{{this._id}}_dropdown-menu"
-        ?disabled="{{disabled}}"
-        class="udex-filter-menu__trigger"
-        slot="trigger"
-        tabindex="0">
-        {{#if hasFilterNamePrefix}}
-            <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
+    id="filterMenuTrigger"
+    @click="{{handleTriggerClick}}"
+    @keydown="{{handleTriggerKeydown}}"
+    aria-label="{{triggerButtonAccessibleName}}"
+    aria-expanded="{{_open}}"
+    aria-haspopup="true"
+    role="{{triggerAccessibleRole}}"
+    aria-controls="{{this._id}}_udex-filter-menu-dropdown"
+    ?disabled="{{disabled}}"
+    class="udex-filter-menu__trigger"
+    tabindex="0">
+    {{#if hasFilterNamePrefix}}
+        <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
+    {{/if}}
+    <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
+        <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
+        {{#if badgeValue}}
+            <udex-badge
+                class="udex-filter-menu__badge"
+                type="Number"
+                design="Info"
+                size="Small">
+                {{badgeValue}}
+            </udex-badge>
         {{/if}}
-        <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
-            <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
-            {{#if badgeValue}}
-                <udex-badge
-                    class="udex-filter-menu__badge"
-                    type="Number"
-                    design="Info"
-                    size="Small">
-                    {{badgeValue}}
-                </udex-badge>
-            {{/if}}
-            <ui5-icon
-                class="udex-filter-menu__trigger-icon"
-                name="navigation-down-arrow"
-                accessible-name="{{_iconAccessibleNameText}}">
-            </ui5-icon>
-        </span>
-    </button>
-{{/inline}}
+        <ui5-icon
+            class="udex-filter-menu__trigger-icon"
+            name="navigation-down-arrow"
+            accessible-name="{{_iconAccessibleNameText}}">
+        </ui5-icon>
+    </span>
+</button>
+    <ui5-popover
+        id="{{this._id}}_udex-filter-menu-dropdown"
+        hide-arrow
+        ?allow-target-overlap="{{disableAllowTargetOverlap}}"
+        placement-type="{{placementType}}"
+        horizontal-align="{{horizontalAlign}}"
+        @ui5-item-press="{{handleItemPress}}"
+        @ui5-header-press="{{handleHeaderPress}}"
+        @keydown="{{handleKeyDownList}}"
+        @search-keydown="{{handleKeyDownSearch}}"
+        @ui5-before-open="{{_dropdownBeforeOpen}}"
+        @ui5-after-open="{{_dropdownAfterOpen}}"
+        @ui5-before-close="{{_dropdownBeforeClose}}"
+        @ui5-after-close="{{_dropdownAfterClose}}"
+        @ui5-select-all="{{handleSelectAll}}"
+        @ui5-submit-search-value="{{handleSubmitSearch}}"
+        @ui5-handle-value-search="{{handleValueSearch}}"
+        @ui5-handle-value-reset="{{handleResetSearch}}">
+        {{searchableList}}
+        {{#if modeMultiSelect}}
+            {{> buttons}}
+        {{/if}}
+    </ui5-popover>
+</div>
+
+
 
 {{#*inline "buttons"}}
     {{#unless hideActionBar}}