@sapudex/web-components 0.111.0 → 0.117.1

package/src/AccordionItem.hbs

@@ -16,7 +16,18 @@
           <div class="udex-accordion-item__icon-wrapper">
             <ui5-icon class="udex-accordion-item__icon" name="slim-arrow-right"></ui5-icon>
           </div>
-          <h4 class="udex-accordion-item__title">{{title}}</h4>
+          <span class="udex-accordion-item__title">
+              {{title}}
+              {{#if numberBadge}}
+                  <udex-badge
+                      class="udex-accordion-item__badge"
+                      type="Number"
+                      number-design="Blue"
+                      size="Large">
+                      {{numberBadge}}
+                  </udex-badge>
+              {{/if}}
+          </span>
       </div>
     </div>
     <div id="udex-accordion-item__{{_id}}-content" @keydown={{contentKeydown}} class="udex-accordion-item__content">

package/src/AccordionItem.ts

@@ -8,6 +8,7 @@ import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/AllIcons.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import UDExBadge from "./Badge.js";
 
 import AccordionItemTemplate from "./generated/templates/AccordionItemTemplate.lit.js";
 
@@ -41,7 +42,7 @@ type ToggleAllEvent = {
   renderer: litRender,
   styles: AccordionItemCss,
   template: AccordionItemTemplate,
-  dependencies: [],
+  dependencies: [UDExBadge],
 })
 
 /**
@@ -51,13 +52,21 @@ type ToggleAllEvent = {
 @event("accordion-item-focus")
 
 class UDExAccordionItem extends UI5Element {
+  /**
+   * Defines the Badge at the end of the title item.
+   *
+   * @default ""
+   * @public
+   */
+  @property() numberBadge!: string;
+
   /**
    * Defines the title of the accordion item component.
    *
    * @default ""
    * @public
    */
-  @property({ type: String }) title!: string;
+  @property() title!: string;
 
   /**
    * Defines if the accordion item is expanded by default

package/src/Avatar.ts

@@ -5,7 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
+import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
 
 // Template
 import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
@@ -152,7 +152,7 @@ class UDExAvatar extends UI5Element {
     shape!: `${AvatarShape}`;
 
   /**
-   * Controls id of the element that label the component
+   * Defines predefined size of the component.
    *
    * @default "S"
    * @public
@@ -160,6 +160,15 @@ class UDExAvatar extends UI5Element {
   @property({ type: AvatarSize, defaultValue: AvatarSize.S })
     size!: `${AvatarSize}`;
 
+  /**
+   * Defines the displaying attention badge.
+   *
+   * @public
+   * @default false
+   */
+    @property({ type: Boolean })
+      showAttentionBadge!: boolean;
+
   /**
    * Receives the desired <img> tag
    *
@@ -214,7 +223,7 @@ class UDExAvatar extends UI5Element {
   }
 
   get avatarAccessibleName(): string {
-    return `${this.accessibleName ? this.accessibleName : UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : ""}`;
+    return `${this.accessibleName ? this.accessibleName : UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : ""} ${this.showAttentionBadge ? UDExAvatar.i18nBundle.getText(ATTENTION_BADGE) : ""}`;
   }
 }
 

package/src/CountrySelector.hbs

@@ -11,7 +11,8 @@
         @click-trigger="{{handleTriggerClick}}"
         @ui5-submit-search-value="{{handleSubmitSearch}}"
         @ui5-handle-value-search="{{handleValueSearch}}"
-        @ui5-handle-value-reset="{{handleResetSearch}}">
+        @ui5-handle-value-reset="{{handleResetSearch}}"
+        @ui5-handle-close-search="{{handleCloseSearch}}">
         {{> trigger}}
         {{searchableList}}
     </udex-dropdown>
@@ -22,8 +23,7 @@
         class="{{countrySelectorTriggerClasses}}"
         ?disabled="{{isOpenerDisabled}}"
         value="{{selectedCountryName}}"
-        slot="trigger"
-        style="width:{{holderWidth}}">
+        slot="trigger">
             {{#if showFlagImages}}
                 <img
                     class="udex-country-selector__image"

package/src/CountrySelector.ts

@@ -7,6 +7,7 @@ import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTempla
 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 { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
 import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
 import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
@@ -23,12 +24,6 @@ import UDExListItem from "./ListItem.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import TextField from "./TextField.js";
 
-type CountryItem = {
-  label: any,
-  content: any,
-  _id: any
-}
-
 /**
  * @class
  *
@@ -163,14 +158,6 @@ class CountrySelector extends UDExSearchableListBase {
   @property({ type: Boolean })
     required!: boolean;
 
-  /**
-   * Allows control over the width.
-   *
-   * @public
-   */
-  @property({ type: String })
-    width?: string;
-
   /**
    * Allows control over the height.
    *
@@ -258,6 +245,8 @@ class CountrySelector extends UDExSearchableListBase {
   _dropdown!: UDExDropdown;
   _search!: Search;
 
+  _handleResizeBound: ResizeObserverCallback;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
@@ -267,9 +256,18 @@ class CountrySelector extends UDExSearchableListBase {
   constructor() {
     super();
     this._shouldFilterItems = false;
+    this._handleResizeBound = this._handleResize.bind(this);
     this._filteredItems = [];
   }
 
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
   onBeforeRendering(): void {
     if (this.blockedCountryCodes?.length) {
       const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
@@ -319,15 +317,15 @@ class CountrySelector extends UDExSearchableListBase {
     return SearchableListBaseTemplate;
   }
 
+  _handleResize() {
+    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+  }
+
   get ariaControls(): string | null | undefined {
     const list = this.shadowRoot!.querySelector<UDExList>("udex-list");
     return list?.getAttribute("id");
   }
 
-  get holderWidth() {
-    return this.width ? this.width : "auto";
-  }
-
   get selectedCountryFlagX() {
     return this.selectedCountry?.flagX;
   }
@@ -380,6 +378,10 @@ class CountrySelector extends UDExSearchableListBase {
     return localName ? `${countryName} (${localName})` : countryName;
   }
 
+  handleCloseSearch() {
+    this._dropdown.onClose();
+  }
+
   handleItemPress(e: CustomEvent) {
     this.onItemPress(e);
     const target = e.target as HTMLElement;
@@ -395,7 +397,6 @@ class CountrySelector extends UDExSearchableListBase {
 
     const keyEvent = e.detail as KeyboardEvent;
     const key = keyEvent.key;
-
     if (isEnter(keyEvent) || isSpace(keyEvent)) {
       if (this._dropdown.open) {
         this._dropdown.onClose();
@@ -444,10 +445,10 @@ class CountrySelector extends UDExSearchableListBase {
       const selected = country.iso.toUpperCase() === this.selectedCountry.iso.toUpperCase();
       this.items.push({
         label: this.getCountryLabel(country.countryName, country.localName),
-        content: this.getItemTemplate(country),
+        innerHTML: this.getItemTemplate(country),
         selected,
         _id: country.iso.toUpperCase(),
-      } as CountryItem as UDExListItem);
+      } as UDExListItem);
     });
   }
 

package/src/Dropdown.hbs

@@ -3,7 +3,6 @@
         <div
             class="udex-dropdown__opener"
             aria-haspopup="true"
-            aria-expanded="{{open}}"
             aria-controls="udex-dropdown"
             @click="{{onTriggerClick}}">
             <slot slot="trigger" name="trigger"></slot>

package/src/Dropdown.ts

@@ -225,11 +225,21 @@ class UDExDropdown extends UI5Element {
     }
   }
 
+  /**
+   * Open dropdown
+   *
+   * @public
+   */
   onOpen(opener: HTMLElement): void {
     const dropdown = this.getDropdownPane();
     dropdown.showAt(opener);
   }
 
+  /**
+   * Close dropdown
+   *
+   * @public
+   */
   onClose():void {
     const dropdown = this.getDropdownPane();
     dropdown.close(true);

package/src/FilterMenu.hbs

@@ -12,7 +12,9 @@
     @ui5-after-open="{{_dropdownAfterOpen}}"
     @ui5-before-close="{{_dropdownBeforeClose}}"
     @ui5-after-close="{{_dropdownAfterClose}}"
-    @click-trigger="{{handleTriggerClick}}"
+    @click-trigger="{{onDropdownClose}}"
+    @search-keydown="{{handleKeyDownSearch}}"
+    @keydown="{{handleKeyDownList}}"
     @ui5-submit-search-value="{{handleSubmitSearch}}"
     @ui5-handle-value-search="{{handleValueSearch}}"
     @ui5-handle-value-reset="{{handleResetSearch}}">
@@ -64,6 +66,7 @@
                     size="Medium"
                     design="Primary"
                     ?disabled="{{disabledResultBtn}}"
+                    @keydown="{{handleKeyDownResultBtn}}"
                     @click="{{handleResult}}">
                     {{getResultLabelText}}
                 </udex-button>
@@ -73,6 +76,7 @@
                     class="udex-filter-menu__reset-btn"
                     size="Medium"
                     design="Tertiary"
+                    @keydown="{{handleKeyDownResetBtn}}"
                     @click="{{handleReset}}">
                     {{getResetLabelText}}
                 </udex-button>

package/src/FilterMenu.ts

@@ -7,6 +7,7 @@ import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isTabPrevious, isTabNext, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
@@ -14,14 +15,15 @@ import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExFilterMenuItem from "./FilterMenuItem.js";
 import UDExFilterMenuGroupHeader from "./FilterMenuGroupHeader.js";
-import Search from "./Search.js";
-import Button from "./Button.js";
+import UDExSearch from "./Search.js";
+import UDEButton from "./Button.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
 import { ListMode } from "./types/List.js";
 import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
 import UDExListSelectAll from "./ListSelectAll.js";
 import UDExBadge from "./Badge.js";
+import UDExListItemBase from "./ListItemBase.js";
 
 import { RESET, SHOW_RESULTS, SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
 import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
@@ -64,8 +66,8 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
     UDExListItem,
     UDExListGroupHeader,
     UDExBadge,
-    Search,
-    Button,
+    UDExSearch,
+    UDEButton,
   ],
 })
 
@@ -274,11 +276,13 @@ class UDExFilterMenu extends UDExSearchableListBase {
     accessibleRole!: `${PopupAccessibleRole}`;
 
   _dropdown!: UDExDropdown;
-  _search!: Search;
+  _search!: UDExSearch;
+  _hasFooterButtons!: boolean;
 
   onAfterRendering() {
     this._dropdown = this.getDropdown();
     this._search = this.getSearch();
+    this._hasFooterButtons = this.hasFooterButtons;
   }
 
   onEnterDOM(): void {
@@ -300,7 +304,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this.onItemPress(e);
 
     if (this.modeSingleSelect) {
-      this._dropdown.onClose();
+      this.onDropdownClose();
     }
   }
 
@@ -313,7 +317,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleSubmitSearch() {
-    this._dropdown.onClose();
+    this.onDropdownClose();
     this.onSubmitSearch();
   }
 
@@ -337,7 +341,37 @@ class UDExFilterMenu extends UDExSearchableListBase {
     }
   }
 
-  handleTriggerClick() {
+  handleKeyDownList(e: KeyboardEvent) {
+    const isTabNextPress = isTabNext(e) && !this._hasFooterButtons;
+    const isTabPrevPress = isTabPrevious(e) && !this._search;
+
+    if (isTabNextPress || isTabPrevPress) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownSearch(e: CustomEvent) {
+    const keyEvent = e.detail as KeyboardEvent;
+    if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownResultBtn(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (isTabNext(e) && !this.hasResetBtn) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownResetBtn(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (isTabNext(e)) {
+      this.onDropdownClose();
+    }
+  }
+
+  onDropdownClose() {
     if (this._dropdown.open) {
       this._dropdown.onClose();
     }
@@ -347,8 +381,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
   }
 
-  getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("udex-search")!;
+  getSearch(): UDExSearch {
+    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
   }
 
   _dropdownBeforeOpen() {
@@ -399,6 +433,22 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.hideResultBtn && this.hideResetBtn;
   }
 
+  get hasFooterButtons(): boolean {
+    return (this.hasResultBtn || this.hasResetBtn) && this.modeMultiSelect;
+  }
+
+  get hasResultBtn(): boolean {
+    return !this.hideResultBtn && !this.disabledResultBtn;
+  }
+
+  get hasResetBtn(): boolean {
+    return !this.hideResetBtn;
+  }
+
+  getItems(): Array<UDExListItemBase> {
+    return this.getSlottedNodes<UDExListItemBase>("items");
+  }
+
   static get searchableListBaseTemplate() {
     return SearchableListBaseTemplate;
   }