@sapudex/web-components 0.147.0 → 0.172.0

package/src/Badge.hbs

@@ -1,5 +1,16 @@
-{{#if textType}}
-<div class="{{textClasses}}"><slot></slot></div>
-{{else}}
-<div class="{{numberClasses}}"><slot></slot></div>
-{{/if}}
+<div class="{{badgeClasses}}">
+    {{#if startIcon}}
+        <ui5-icon
+            class="udex-badge__icon udex-badge__icon--start"
+            name="{{icon}}">
+        </ui5-icon>
+    {{/if}}
+        <slot></slot>
+    {{#if endIcon}}
+        <ui5-icon
+            class="udex-badge__icon udex-badge__icon--end"
+            name="{{icon}}">
+        </ui5-icon>
+    {{/if}}
+
+</div>

package/src/Badge.ts

@@ -9,6 +9,8 @@ import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 
 // Styles
 import BadgeCss from "./generated/themes/Badge.css.js";
+import IconPlacement from "./types/IconPlacement.js";
+import { NumberBadgeDesign, TextBadgeDesign } from "./types/BadgeDesign.js";
 
 export enum BadgeType {
   text = "Text",
@@ -20,19 +22,6 @@ export enum BadgeSize {
   large = "Large",
 }
 
-export enum BadgeTextDesign {
-  Info = "Info",
-  Success = "Success",
-  Error = "Error",
-  Warning = "Warning",
-}
-
-export enum BadgeNumberDesign {
-  Blue = "Blue",
-  Red = "Red",
-  White = "White",
-}
-
 /**
  * @class
  *
@@ -82,16 +71,32 @@ class UDExBadge extends UI5Element {
    * @default "Info"
    * @public
    */
-  @property({ defaultValue: BadgeTextDesign.Info })
-    design: `${BadgeTextDesign}` = BadgeTextDesign.Info;
+  @property({ defaultValue: TextBadgeDesign.Info })
+    design!: `${TextBadgeDesign}`;
   /**
    * Defines the design of number type component.
    *
    * @default "Blue"
    * @public
    */
-  @property({ defaultValue: BadgeNumberDesign.Blue })
-    numberDesign!: `${BadgeNumberDesign}`;
+  @property({ defaultValue: NumberBadgeDesign.Blue })
+    numberDesign!: `${NumberBadgeDesign}`;
+  /**
+   * Defines icon placement if icon was provided
+  *
+  * @default "End"
+  * @public
+  */
+    @property({ type: IconPlacement, defaultValue: IconPlacement.End })
+    iconPlacement? : `${IconPlacement}`;
+  /**
+   * Defines icon name
+  *
+  * @default ""
+  * @public
+  */
+  @property()
+    icon!: string;
 
   /**
    * Defines the content of the component.
@@ -101,8 +106,12 @@ class UDExBadge extends UI5Element {
   @slot({ type: Node, "default": true })
     default!: Array<Node>;
 
-  get textType(): boolean {
-    return this.type === BadgeType.text;
+  get startIcon(): boolean {
+    return !!this.icon && this.iconPlacement === IconPlacement.Start;
+  }
+
+  get endIcon(): boolean {
+    return !!this.icon && this.iconPlacement === IconPlacement.End;
   }
 
   get textClasses(): string {
@@ -112,6 +121,14 @@ class UDExBadge extends UI5Element {
   get numberClasses(): string {
     return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;
   }
+
+  get badgeClasses(): string {
+    if (this.type === BadgeType.text) {
+      return this.textClasses;
+    }
+
+    return this.numberClasses;
+  }
 }
 
 UDExBadge.define();

package/src/Breadcrumbs.ts

@@ -4,12 +4,15 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-
+import {
+  isTabNext,
+  isTabPrevious,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import ItemNavigation, { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import breadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
@@ -29,6 +32,8 @@ import "@ui5/webcomponents-icons/dist/home.js";
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
 import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js";
 
+const triggerActiveClass = "udex-breadcrumbs__trigger--opened";
+
 export type UDExBreadcrumbsItemClickEventDetail = {
   item: UDExBreadcrumbsItem;
   altKey: boolean;
@@ -129,46 +134,41 @@ class UDExBreadcrumbs extends UI5Element {
 
   responsivePopover?: Dropdown;
   _itemNavigation?: ItemNavigation;
+  _shouldFocusFirstVisibleItem!: boolean;
+
   static i18nBundle: I18nBundle;
 
-  onBeforeRendering() {
+  static async onDefine(): Promise<void> {
+    UDExBreadcrumbs.i18nBundle = await getI18nBundle("@udex/web-components");
+  }
+
+  onBeforeRendering(): void {
     this._preprocessItems();
   }
 
-  _preprocessItems() {
+  onAfterRendering(): void {
+    this._initItemNavigation();
+  }
+
+  _preprocessItems(): void {
     this.items.forEach(item => {
       item._getRealDomRef = () => this.getDomRef()!.querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;
     });
   }
 
-  async _getResponsePopover() {
+  async _getResponsePopover(): Promise<Dropdown> {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
     return staticAreaItem!.querySelector<Dropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;
   }
 
-  /**
-   * Getter for the interactive element that opens the overflow
-   * @private
-   */
-  get _dropdownArrowLink() {
-    return this.shadowRoot!.querySelector<Link>(".udex-breadcrumbs__trigger")!;
-  }
-
-  /**
-   * Getter for the list of links corresponding to the abstract breadcrumb items
-   */
-  get _links() {
-    return Array.from(this.shadowRoot!.querySelectorAll<Link>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
-  }
-
-  _getFocusableItems() {
-    const items: Array<ITabbable> = this._links;
+  _getFocusableItems(): Array<Link> {
+    const items = this._links;
     items.unshift(this._dropdownArrowLink);
 
     return items;
   }
 
-  _initItemNavigation() {
+  _initItemNavigation(): void {
     if (!this._itemNavigation) {
       this._itemNavigation = new ItemNavigation(this, {
         navigationMode: NavigationMode.Horizontal,
@@ -177,24 +177,20 @@ class UDExBreadcrumbs extends UI5Element {
     }
   }
 
-  onAfterRendering(): void {
-    this._initItemNavigation();
-  }
-
-  _getItems() {
+  _getItems(): Array<UDExBreadcrumbsItem> {
     return this.getSlottedNodes<UDExBreadcrumbsItem>("items");
   }
 
-  _closeRespPopover() {
+  _closeRespPopover(): void {
     this.responsivePopover && this.responsivePopover.onClose();
   }
 
-  async _openRespPopover() {
+  async _openRespPopover(): Promise<void> {
     this.responsivePopover = await this._getResponsePopover();
     this.responsivePopover.onOpen(this._dropdownArrowLink);
   }
 
-  _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>) {
+  _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void {
     const listItem = e.target as HTMLElement,
       items = this._getItems(),
       item = items.find(x => `${x._id}-li` === listItem.id)!;
@@ -209,7 +205,7 @@ class UDExBreadcrumbs extends UI5Element {
     }
   }
 
-  _onLinkPress(e: CustomEvent<LinkClickEventDetail>) {
+  _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {
     const link = e.target as Link,
       items = this._getItems(),
       item = items.find(x => `${x._id}-link` === link.id)!,
@@ -231,31 +227,74 @@ class UDExBreadcrumbs extends UI5Element {
     }
   }
 
-  _isItemVisible(item: UDExBreadcrumbsItem) {
+  _isItemVisible(item: UDExBreadcrumbsItem): boolean {
     return !item.hidden;
   }
 
-  _afterDropdownOpen() {
+  _afterDropdownOpen(): void {
     this._dropdownOpened = true;
   }
 
-  _afterDropdownClose() {
+  _afterDropdownClose(): void {
     this._dropdownOpened = false;
+    if (this._shouldFocusFirstVisibleItem) {
+      this._focusFirstVisibleItem();
+    }
   }
 
-  get _visibleItems() {
-    const items = this._getItems();
-    const itemsLength = this.showItems ?? 0;
+  _toggleDropdown(): void {
+    if (this._dropdownOpened) {
+      this._closeRespPopover();
+    } else {
+      this._openRespPopover();
+    }
+  }
 
-    return this._getItems()
-      .slice(Math.max(items.length - itemsLength - 1, 0))
-      .filter(i => this._isItemVisible(i));
+  _onfocusin(e: FocusEvent): void {
+    const currentItem = e.target as Link;
+
+    this._itemNavigation?.setCurrentItem(currentItem);
+  }
+
+  _handleKeydown(e: KeyboardEvent): void {
+    const itemIndex = (e.target as HTMLElement).getAttribute("index");
+    const isLastItem = itemIndex === (this.items.length - 2).toString();
+    const isFirstItem = itemIndex === "0";
+
+    if (isTabNext(e) && isLastItem) {
+      this._closeRespPopover();
+      this._shouldFocusFirstVisibleItem = true;
+    }
+
+    if (isTabPrevious(e) && isFirstItem) {
+      this._closeRespPopover();
+    }
+  }
+
+  _focusFirstVisibleItem(): void {
+    Array.from(this.shadowRoot!.querySelectorAll<Link>("[udex-link]"))[0].focus();
+    this._shouldFocusFirstVisibleItem = false;
+  }
+
+  /**
+   * Getter for the interactive element that opens the overflow
+   * @private
+   */
+  get _dropdownArrowLink(): Link {
+    return this.shadowRoot!.querySelector<Link>(".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]"));
   }
 
   /**
    * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
    */
-  get _linksData() {
+  get _linksData(): Array<UDExBreadcrumbsItem> {
     const items = this._visibleItems;
     const itemsCount = items.length;
 
@@ -266,43 +305,30 @@ class UDExBreadcrumbs extends UI5Element {
       });
   }
 
-  get _isOverflowEmpty() {
-    return this._dropdownItems.length === 0;
-  }
+  get _visibleItems(): Array<UDExBreadcrumbsItem> {
+    const items = this._getItems();
+    const itemsLength = this.showItems ?? 0;
 
-  _toggleDropdown() {
-    if (this._dropdownOpened) {
-      this._closeRespPopover();
-    } else {
-      this._openRespPopover();
-    }
+    return this._getItems()
+      .slice(Math.max(items.length - itemsLength - 1, 0))
+      .filter(i => this._isItemVisible(i));
   }
 
-  get _dropdownItems() {
+  get _dropdownItems(): Array<UDExBreadcrumbsItem> {
     return this._getItems().filter(i => this._isItemVisible(i));
   }
 
-  get _triggerClass() {
-    return this._dropdownOpened ? "udex-breadcrumbs__trigger--opened" : "";
+  get _triggerClass(): string {
+    return this._dropdownOpened ? triggerActiveClass : "";
   }
 
-  get _accessibleNameText() {
+  get _accessibleNameText(): string {
     return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
   }
 
-  get _dropdownArrowAccessibleNameText() {
+  get _dropdownArrowAccessibleNameText(): string {
     return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);
   }
-
-  _onfocusin(e: FocusEvent) {
-    const currentItem = e.target as Link;
-
-    this._itemNavigation?.setCurrentItem(currentItem);
-  }
-
-  static async onDefine() {
-    UDExBreadcrumbs.i18nBundle = await getI18nBundle("@udex/web-components");
-  }
 }
 
 UDExBreadcrumbs.define();

package/src/BreadcrumbsItem.ts

@@ -23,7 +23,6 @@ import BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
 @customElement({
   tag: "udex-breadcrumbs-item",
   renderer: litRender,
-  dependencies: [],
 })
 class UDExBreadcrumbsItem extends BreadcrumbsItem {
   /**

package/src/BreadcrumbsPopover.hbs

@@ -1,19 +1,20 @@
 <udex-dropdown
   id="udex-{{this._id}}-breadcrumbs__popover"
-	class="udex-breadcrumbs__popover ui5-breadcrumbs-popover"
-	placement-type="Bottom"
-	horizontal-align="Left"
+  class="udex-breadcrumbs__popover ui5-breadcrumbs-popover"
+  placement-type="Bottom"
+  horizontal-align="Left"
   @after-open="{{_afterDropdownOpen}}"
   @after-close="{{_afterDropdownClose}}"
-	>
+  @keydown="{{_handleKeydown}}">
   <div class="udex-breadcrumbs__popover-content">
-		{{#each _dropdownItems}}
+    {{#each _dropdownItems}}
       {{#if this.icon}}
         <udex-link
+          index="{{@index}}"
           id="{{this._id}}-li"
           @ui5-click="{{../_onDropdownLinkPress}}"
           href="{{this.href}}"
-				  target="{{this.target}}"
+          target="{{this.target}}"
           class="udex-breadcrumbs__item udex-breadcrumbs__item--{{@index}} udex-breadcrumbs__item--with-icon" 
           icon={{this.icon}}
           icon-placement="start" 
@@ -31,16 +32,17 @@
         </span>
       {{else}}
         <udex-link
+          index="{{@index}}"
           id="{{this._id}}-li"
           @ui5-click="{{../_onDropdownLinkPress}}"
           href="{{this.href}}"
-				  target="{{this.target}}"
+          target="{{this.target}}"
           class="udex-breadcrumbs__item udex-breadcrumbs__item--{{@index}}" 
           accessible-name="{{this.accessibleName}}"
           data-ui5-stable="{{this.stableDomRef}}">
           {{this.textContent}}
         </udex-link>
       {{/if}}
-		{{/each}}
+    {{/each}}
   </div>
-</udex-dropdown>
+</udex-dropdown>

package/src/Checkbox.ts

@@ -29,7 +29,6 @@ import CheckboxCss from "./generated/themes/Checkbox.css.js";
   tag: "udex-checkbox",
   renderer: litRender,
   styles: [checkboxCss, CheckboxCss],
-  dependencies: [CheckBox],
 })
 class UDExCheckbox extends CheckBox {
 }

package/src/CountrySelector.hbs

@@ -35,7 +35,6 @@
         {{#if showFlagImages}}
             <img
                     class="udex-country-selector__image"
-                    design="Default"
                     aria-label="{{flagAriaLabel}}"
                     style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
         {{/if}}

package/src/CountrySelector.ts

@@ -6,7 +6,8 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import {
   isEnter, isSpace, isBackSpace, isDelete,
-  isEscape, isTabPrevious,
+  isEscape,
+  isTabPrevious,
   isTabNext,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
@@ -30,6 +31,8 @@ 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 isLetterKey from "./utils/isLetterKeyPressed.js";
+
 /**
  * @class
  *
@@ -423,31 +426,46 @@ class CountrySelector extends UDExSearchableListBase {
     this.dropDownClose();
   }
 
-  handleKeyDown(e: CustomEvent) {
+  handleKeyDown(e: KeyboardEvent) {
     if (this.disabled || this.readonly || this.displayonly) {
       return;
     }
 
-    const keyEvent = e.detail as KeyboardEvent;
-    const key = keyEvent.key;
-    if (isEnter(keyEvent) || isSpace(keyEvent)) {
+    const key = e.key;
+
+    const isTabNextPress = isTabNext(e) && !this._search;
+    const isTabPrevPress = isTabPrevious(e) && !this._search;
+    const isEscPress = isEscape(e) && !this._search;
+
+    if (isEnter(e) || isSpace(e)) {
       if (this._dropdown.open) {
         this.dropDownClose();
       } else {
         this._dropdown.onTriggerClick();
       }
-    } else if (isBackSpace(keyEvent) || isDelete(keyEvent)) {
+    }
+    if (isTabNextPress || isTabPrevPress || isEscPress) {
+      this._dropdown.open = false;
+    }
+    if (isBackSpace(e) || isDelete(e)) {
       this.selectedCountry = undefined;
       this._render();
-    } else if (this.isLetterKey(key)) {
-      this._dropdown.onOpen(this.getInput());
-      this._search.focus();
-      this._search.value = key;
-      this.onValueSearch(key);
     }
+    if (isLetterKey(key)) {
+      e.preventDefault();
+      this.handleKeyPress(e);
+    }
+  }
+
+  handleKeyPress(keyEvent: KeyboardEvent) {
+    const key = keyEvent.key;
+    this._dropdown.onOpen(this.getInput());
+    this._search.focus();
+    this._search.value = key;
+    this.onValueSearch(key);
   }
 
-  handleInputMouseDown(e: CustomEvent) {
+  handleInputMouseDown(e: CustomEvent): void {
     e.preventDefault();
   }
 
@@ -463,10 +481,6 @@ class CountrySelector extends UDExSearchableListBase {
     }
   }
 
-  isLetterKey(key: string) {
-    return /^[a-zA-Z]$/.test(key);
-  }
-
   handleValueSearch(e:CustomEvent) {
     this.onValueSearch(e.detail.value as string);
   }

package/src/DatePicker.ts

@@ -304,7 +304,7 @@ class UDExDatePicker extends UI5Element {
     this.hideCalendar();
   }
 
-  handleInputClick(e: MouseEvent | KeyboardEvent): void {
+  handleInputClick(e: Event | KeyboardEvent): void {
     e.preventDefault();
 
     if (this.disabled || this.readonly) {
@@ -314,7 +314,7 @@ class UDExDatePicker extends UI5Element {
     this.showCalendar();
   }
 
-  handleInputMouseDown(e: MouseEvent): void {
+  handleInputMouseDown(e: Event): void {
     e.preventDefault();
   }
 

package/src/Dropdown.ts

@@ -274,8 +274,6 @@ class UDExDropdown extends UI5Element {
     const dropdownPaneLeftOffset = +dropdownPane.style.left.split("px")[0];
     if (dropdownPane.offsetWidth + dropdownPaneLeftOffset < this._breakpointSizeXS) {
       this.style.setProperty("--udex-dropdown-left-offset", `${dropdownPane.style.left}`);
-    } else {
-      dropdownPane.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
     }
     this.fireEvent("after-open");
   }