@sapudex/web-components 0.199.3 → 0.225.0

package/src/ListItem.ts

@@ -39,7 +39,7 @@ const listItemRole: string = "option";
  * For the <code>udex-list-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ListItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/ListItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -109,6 +109,22 @@ const listItemRole: string = "option";
 })
 
 class UDExListItem extends UDExListItemBase {
+  /**
+   * Defines the name of the edit icon, displayed in the end of the list item.
+   *
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    editIcon!: string;
+  /**
+   * Defines the name of the delete icon, displayed in the end of the list item.
+   *
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    deleteIcon!: string;
   /**
    * Defines the accessible name of the item.
    *
@@ -200,33 +216,30 @@ class UDExListItem extends UDExListItemBase {
    */
   @property({ type: AvatarSize, defaultValue: AvatarSize.S })
     imageSize!: `${AvatarSize}`;
-
   /**
-   * Defines the name of the edit icon, displayed in the end of the list item.
+   * Slot for list item content.
    *
-   * @defaultvalue ""
+   * @slot
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    editIcon?: string;
-
+  @slot({ type: Node, "default": true })
+    content!: Array<Node>;
   /**
-   * Defines the name of the delete icon, displayed in the end of the list item.
+   * Slot for first icon.
    *
-   * @defaultvalue ""
+   * @slot
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    deleteIcon?: string;
-
+  @slot()
+    firstIcon!: Array<HTMLElement>;
   /**
-   * Slot for list item content.
+   * Slot for second icon.
    *
    * @slot
    * @public
    */
-  @slot({ type: Node, "default": true })
-    content!: Array<Node>;
+  @slot()
+    secondIcon!: Array<HTMLElement>;
 
   /**
   * Defines the role attribute of component
@@ -254,7 +267,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   static async onDefine(): Promise<void> {
-    UDExListItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExListItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onEnterDOM() {
@@ -264,12 +277,6 @@ class UDExListItem extends UDExListItemBase {
     }
   }
 
-  onAfterRendering() {
-    if (!this.accessibleRole || this.accessibleRole === listItemRole) {
-      this.shadowRoot?.querySelector("li")?.removeAttribute("aria-selected");
-    }
-  }
-
   onExitDOM() {
     document.removeEventListener("mouseup", this.deactivate);
   }

package/src/ListSelectAll.ts

@@ -27,7 +27,7 @@ const groupListClass: string = "udex-list__group-list";
  * For the <code>udex-list-select-all</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ListSelectAll.js";</code>
+ * <code>import "@sapudex/web-components/dist/ListSelectAll.js";</code>
  *
  * @constructor
  * @extends UDExListGroupHeaderBase
@@ -51,7 +51,7 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExListSelectAll.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExListSelectAll.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   handleSelectAllPress() {

package/src/MastheadCountrySelector.hbs

@@ -0,0 +1,67 @@
+<div class="udex-masthead-country-selector" @keydown="{{handleKeyDown}}">
+    {{#if _isActiveRegionOpen}}
+        <span class="udex-masthead-country-selector__title">
+            {{countryTitle}}
+        </span>
+        {{#unless this.isSingleMode}}
+            <udex-masthead-menu-item
+                class="udex-masthead-country-selector__region-back-item"
+                @click="{{backToRegions}}"
+                label="{{_activeRegion?.title}}"
+                type="Button"
+                is-back
+                icon-start>
+            </udex-masthead-menu-item>
+        {{/unless}}
+        <udex-search
+            class="udex-masthead-country-selector__search"
+            @ui5-handle-value-search="{{handleSearch}}"
+            @ui5-handle-value-reset="{{handleSearchReset}}"
+            @ui5-submit-search-value="{{handleSearch}}"
+            language-voice="{{languageVoice}}"
+            label="{{searchLabel}}"
+            mode="{{homeSearchMode}}"
+            ?show-voice-button="{{showSearchVoiceButton}}"
+            non-interactive-submit-button
+            show-submit-button>
+        </udex-search>
+        <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
+            {{#each _activeCountries}}
+                <li role="menuitem">
+                    <udex-masthead-menu-item
+                        class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
+                        @click="{{../fireEventCountryItemClick}}"
+                        _country-code="{{this.countryCode}}"
+                        url="{{this.url}}"
+                        label="{{this.displayTitle}}"
+                        index="{{@index}}"
+                        is-nav-item>
+                    </udex-masthead-menu-item>
+                </li>
+            {{/each}}
+        </ul>
+    {{else}}
+        <span class="udex-masthead-country-selector__title">
+            {{regionTitle}}
+        </span>
+        <ul class="udex-masthead-country-selector__list" role="menu">
+            {{#each regionsData}}
+                <li role="menuitem">
+                    <udex-masthead-menu-item
+                        id="{{this._id}}"
+                        @click="{{../handleRegionClick}}"
+                        index="{{@index}}"
+                        class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
+                        aria-has-popup="true"
+                        accessible-role="button"
+                        type="Button"
+                        is-nav-item
+                        has-border
+                        icon-end
+                        label="{{this.title}}">
+                    </udex-masthead-menu-item>
+                </li>
+            {{/each}}
+        </ul>
+    {{/if}}
+</div>

package/src/MastheadCountrySelector.ts

@@ -0,0 +1,500 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import {
+  isUp, isDown, isRight, isLeft, isEnd, isHome,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
+
+import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
+
+// Styles
+import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
+
+export type RegionItemClickEventDetail = {
+  item: {
+    title: string,
+    countries: Array<Country>,
+  },
+  originalEvent: Event,
+}
+
+export type CountryItemClickEventDetail = {
+  item: {
+    displayTitle: string,
+    countryCode: string,
+    url: string,
+  },
+  originalEvent: Event,
+}
+
+export type SearchEventDetail = {
+  value: string,
+}
+
+export type Region = {
+  title: string,
+  countries: Array<Country>,
+};
+
+export type Country = {
+  displayTitle: string,
+  countryCode: string,
+  url: string,
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>masthead-country-selector</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/MastheadCountrySelector.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-masthead-country-selector",
+  renderer: litRender,
+  styles: MastheadCountrySelectorCss,
+  template: MastheadCountrySelectorTemplate,
+  dependencies: [UI5Icon, UDExMastheadMenuItem, UDExSearch],
+})
+
+/**
+ * Fires when region item is clicked
+ *
+ * @public
+ */
+@event("region-item-click", {
+  detail: {
+    item: {
+      type: HTMLElement,
+    },
+    originalEvent: {
+      type: Event,
+    },
+  },
+})
+
+/**
+ * Fires when region item is clicked
+ *
+ * @public
+ */
+@event("country-item-click", {
+  detail: {
+    item: {
+      type: HTMLElement,
+    },
+    originalEvent: {
+      type: Event,
+    },
+  },
+})
+
+/**
+ * Fired event when the user typed to search field.
+ *
+ * @public
+ */
+@event("country-selector-search", {
+  detail: {
+    value: { type: String },
+  },
+})
+
+class UDExMastheadCountrySelector extends UI5Element {
+  /**
+   * Defines title of the regions menu
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    regionTitle!: string;
+
+  /**
+   * Defines title of the countries menu
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    countryTitle!: string;
+
+  /**
+   * Defines the object of the regions
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    regions!: string;
+
+  /**
+   * Defines the label of the search
+   *
+   * @default "en-US"
+   * @public
+   */
+  @property()
+    searchLabel!: string;
+
+  /**
+   * Defines display the voice button for the search field.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    showSearchVoiceButton!: boolean;
+
+  /**
+   * Defines the language voice of the search
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    languageVoice!: string;
+
+  /**
+   * Defines the country list of the region is opened
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isActiveRegionOpen!: boolean;
+
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
+  /**
+   * Defines direction of the component.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _direction!: string;
+
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
+  _activeRegion!: Region | null;
+  _activeCountries!: Array<Country>;
+  _shouldFocusBackBtn!: boolean;
+  _shouldFocusRegionByIndex!: boolean;
+  _activeRegionIndex!: number;
+
+  constructor() {
+    super();
+    this._activeCountries = [];
+  }
+
+  onAfterRendering(): void {
+    this.handleFocusItem();
+    this.setTabIndexForItems();
+    this.handleDirection();
+    this.handleOutsideClick();
+
+    if (this.isSingleMode) {
+      this.handleSingleRegionMode();
+    }
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
+  handleRegionClick(e: CustomEvent): void {
+    this.openCountriesByRegion(e);
+    this.fireEventRegionItemClick(e);
+  }
+
+  handleKeyDown(e: KeyboardEvent): void {
+    const item = e.target as UDExMastheadMenuItem;
+
+    if (item.hasAttribute("is-back")) {
+      this.handleBackKeyboard(e);
+      return;
+    }
+
+    if (item.hasAttribute("is-nav-item")) {
+      this.handleUpArrow(e);
+      this.handleDownArrow(e);
+      this.handleRightArrow(e);
+      this.handleLeftArrow(e);
+      this.handleHomeKey(e);
+      this.handleEndKey(e);
+    }
+  }
+
+  handleBackKeyboard(e: KeyboardEvent): void {
+    if (isLeft(e) && !this.isRtlDirection) {
+      return this.backToRegions();
+    }
+    if (isRight(e) && this.isRtlDirection) {
+      return this.backToRegions();
+    }
+  }
+
+  handleRightArrow(e: KeyboardEvent): void {
+    if (isRight(e) && !this.isRtlDirection) {
+      this.openCountriesByRegion(e);
+      this.fireEventRegionItemClick(e);
+    }
+  }
+
+  handleLeftArrow(e: KeyboardEvent): void {
+    if (isLeft(e) && this.isRtlDirection) {
+      this.openCountriesByRegion(e);
+      this.fireEventRegionItemClick(e);
+    }
+  }
+
+  handleUpArrow(e: KeyboardEvent): void {
+    if (isUp(e)) {
+      e.preventDefault();
+      this.focusPreviousItem(e);
+    }
+  }
+
+  handleDownArrow(e: KeyboardEvent): void {
+    if (isDown(e)) {
+      e.preventDefault();
+      this.focusNextItem(e);
+    }
+  }
+
+  handleSearch(e: CustomEvent): void {
+    const searchTerm = e.detail.value.toLowerCase().trim() as string;
+
+    if (!this._activeRegion || !this._activeRegion.countries) {
+      this.setActiveCountries([]);
+      return;
+    }
+
+    if (!searchTerm) {
+      this.setActiveCountries([...this._activeRegion.countries]);
+    } else {
+      this.setActiveCountries(this._activeRegion.countries.filter(country => country.displayTitle.toLowerCase().includes(searchTerm)));
+    }
+
+    this._shouldFocusBackBtn = false;
+    this.fireEvent<SearchEventDetail>("country-selector-search", {
+      value: e.detail.value,
+    });
+    this.refreshRendering();
+  }
+
+  handleSearchReset(): void {
+    this.setActiveCountries([...this._activeRegion?.countries || []]);
+    this.refreshRendering();
+  }
+
+  handleFocusItem(): void {
+    if (this._shouldFocusBackBtn) {
+      this.focusBackBtn();
+    }
+
+    if (this._shouldFocusRegionByIndex) {
+      this.focusRegionByIndex();
+    }
+  }
+
+  refreshRendering(): void {
+    this._requestRender = !this._requestRender;
+  }
+
+  handleDirection() {
+    const directionStyles: string = window
+      .getComputedStyle(this)
+      .getPropertyValue("direction");
+    if (!directionStyles) {
+      this._direction = "ltr";
+    } else {
+      this._direction = directionStyles;
+    }
+  }
+
+  handleOutsideClick(): void {
+    document.addEventListener("mousedown", (e: Event): void => {
+      if (e.target !== this) {
+        this.handleSearchReset();
+        this._isActiveRegionOpen = false;
+        this.setActiveRegion(null);
+      }
+    });
+  }
+
+  openCountriesByRegion(e: CustomEvent | KeyboardEvent): void {
+    const item = e.target as UDExMastheadMenuItem;
+    const activeRegion = this.regionsData[item.index];
+    this.setActiveRegion(activeRegion);
+    this.setActiveCountries(activeRegion.countries);
+    this._isActiveRegionOpen = true;
+    this._activeRegionIndex = item.index;
+    this._shouldFocusBackBtn = true;
+    this._shouldFocusRegionByIndex = false;
+  }
+
+  backToRegions(): void {
+    this._isActiveRegionOpen = false;
+    this.setActiveRegion(null);
+    this._shouldFocusRegionByIndex = true;
+  }
+
+  focusPreviousItem(e: KeyboardEvent): void {
+    const currentIndex = (e.target as UDExMastheadMenuItem).index;
+    const lastItemIndex = this.items.length - 1;
+    const prevIndex = currentIndex - 1 < 0 ? lastItemIndex : currentIndex - 1;
+    const prevItem = this.items[prevIndex];
+
+    this.items[currentIndex]._tabIndex = "-1";
+    prevItem._tabIndex = "0";
+    prevItem.focus();
+  }
+
+  focusNextItem(e: KeyboardEvent): void {
+    const currentIndex = (e.target as UDExMastheadMenuItem).index;
+    const lastItemIndex = this.items.length - 1;
+    const nextIndex = currentIndex + 1 > lastItemIndex ? 0 : currentIndex + 1;
+    const nextItem = this.items[nextIndex];
+
+    this.items[currentIndex]._tabIndex = "-1";
+    nextItem._tabIndex = "0";
+    nextItem.focus();
+  }
+
+  handleEndKey(e: KeyboardEvent): void {
+    if (isEnd(e)) {
+      e.preventDefault();
+      const currentIndex = (e.target as UDExMastheadMenuItem).index;
+      const lastItemIndex = this.items.length - 1;
+      const lastItem = this.items[lastItemIndex];
+
+      this.items[currentIndex]._tabIndex = "-1";
+      lastItem._tabIndex = "0";
+      lastItem.focus();
+    }
+  }
+
+  handleHomeKey(e: KeyboardEvent): void {
+    if (isHome(e)) {
+      e.preventDefault();
+      const currentIndex = (e.target as UDExMastheadMenuItem).index;
+      const firstItem = this.items[0];
+
+      this.items[currentIndex]._tabIndex = "-1";
+      firstItem._tabIndex = "0";
+      firstItem.focus();
+    }
+  }
+
+  handleSingleRegionMode(): void {
+    this.setActiveRegion(this.regionsData[0]);
+    this.setActiveCountries([...this.regionsData[0].countries]);
+    this._isActiveRegionOpen = true;
+  }
+
+  focusBackBtn(): void {
+    const backBtn = this.shadowRoot?.querySelector<HTMLElement>(".udex-masthead-country-selector__region-back-item") || null;
+    backBtn?.focus();
+  }
+
+  focusRegionByIndex(): void {
+    const regionItems = this.shadowRoot?.querySelectorAll<HTMLElement>(".udex-masthead-country-selector__item_region") || [];
+    regionItems[this._activeRegionIndex].focus();
+  }
+
+  fireEventRegionItemClick(e: CustomEvent | KeyboardEvent): void {
+    const { label } = e.target as UDExMastheadMenuItem;
+
+    this.fireEvent<RegionItemClickEventDetail>("region-item-click", {
+      item: {
+        title: label,
+        countries: this._activeRegion?.countries || [],
+      },
+      originalEvent: e,
+    });
+  }
+
+  fireEventCountryItemClick(e: CustomEvent | KeyboardEvent): void {
+    const item = e.target as UDExMastheadMenuItem;
+    const { label, url } = item;
+
+    this.fireEvent<CountryItemClickEventDetail>("country-item-click", {
+      item: {
+        displayTitle: label,
+        countryCode: item.getAttribute("_country-code") || "",
+        url: url || "",
+      },
+      originalEvent: e,
+    });
+  }
+
+  setActiveRegion(region: Region | null): void {
+    this._activeRegion = region;
+  }
+
+  setActiveCountries(countries: Array<Country>): void {
+    this._activeCountries = countries;
+  }
+
+  setTabIndexForItems(): void {
+    this.items.forEach((item, index) => {
+      if (this._activeRegionIndex > 0 && this._shouldFocusRegionByIndex) {
+        item._tabIndex = index === this._activeRegionIndex ? "0" : "-1";
+        return;
+      }
+
+      item._tabIndex = index === 0 ? "0" : "-1";
+    });
+  }
+
+  get items(): Array<UDExMastheadMenuItem> {
+    const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(".udex-masthead-country-selector__item");
+    return items ? Array.from(items) : [];
+  }
+
+  get regionsData(): Array<Region> {
+    return this.regions ? JSON.parse(this.regions) as Array<Region> : [];
+  }
+
+  get isRtlDirection(): boolean {
+    return this._direction === "rtl";
+  }
+
+  get homeSearchMode(): UDExSearchMode {
+    return UDExSearchMode.HomeSearch;
+  }
+
+  get isSingleMode(): boolean {
+    return this.regionsData.length === 1;
+  }
+}
+
+UDExMastheadCountrySelector.define();
+
+export default UDExMastheadCountrySelector;