@sapudex/web-components 0.199.3 → 0.225.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapudex/web-components",
-  "version": "0.199.3",
+  "version": "0.225.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -30,17 +30,17 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.0",
-    "@ui5/webcomponents": "1.24.20",
-    "@ui5/webcomponents-base": "1.24.20",
-    "@ui5/webcomponents-fiori": "1.24.20",
-    "@ui5/webcomponents-icons": "1.24.20",
-    "@ui5/webcomponents-theming": "1.24.20",
+    "@ui5/webcomponents": "1.24.23",
+    "@ui5/webcomponents-base": "1.24.23",
+    "@ui5/webcomponents-fiori": "1.24.23",
+    "@ui5/webcomponents-icons": "1.24.23",
+    "@ui5/webcomponents-theming": "1.24.23",
     "@vimeo/player": "^2.24.0",
     "video.js": "8.22.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.24.20",
-    "chromedriver": "136.0.0",
+    "@ui5/webcomponents-tools": "1.24.23",
+    "chromedriver": "138.0.1",
     "cross-env": "^7.0.3",
     "typescript": "^4.9.4",
     "wdio-chromedriver-service": "^8.1.1",

package/src/Accordion.hbs

@@ -1,24 +1,21 @@
-<div class="{{accordionClass}}"
-   @keydown={{keydownHandler}}
-   @ui5-accordion-item-focus={{itemFocusHandler}}
-  >
-  <div class="udex-accordion__head" part="head">
-    <h3 class="udex-accordion__headline" >{{headlineText}}</h3>
-    <udex-button class="udex-accordion__btn"
-     size="Large"
-     design="Tertiary"
-     @click={{toggleAllHandler}}
-     @keydown={{toggleKeyAllHandler}}
-     accessible-name={{toggleAllText}}
-    >
-      {{toggleAllText}}
-    </udex-button>
-  </div>
-  <div class="udex-accordion__content">
-    <ul class="udex-accordion__list" role="list">
-      {{#each items}}
-        <slot name="{{this.item._individualSlot}}"></slot>
-      {{/each}}
-    </ul>
-  </div>
+<div
+    class="udex-accordion"
+    @keydown="{{keydownHandler}}"
+    @ui5-accordion-item-focus="{{itemFocusHandler}}">
+    <div class="udex-accordion__head" part="head">
+        <h3 class="udex-accordion__headline">{{headlineText}}</h3>
+        <udex-button class="udex-accordion__btn"
+            size="Large"
+            design="Tertiary"
+            @click="{{toggleAllHandler}}"
+            @keydown="{{toggleKeyAllHandler}}"
+            accessible-name="{{toggleAllText}}">
+            {{toggleAllText}}
+        </udex-button>
+    </div>
+    <div class="udex-accordion__content">
+        {{#each items}}
+            <slot name="{{this.item._individualSlot}}"></slot>
+        {{/each}}
+    </div>
 </div>

package/src/Accordion.ts

@@ -12,11 +12,12 @@ import {
   isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import AccordionTemplate from "./generated/templates/AccordionTemplate.lit.js";
+import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
+import UDExButton from "./Button.js";
+import UDExAccordionItem from "./AccordionItem.js";
 
 // Styles
 import AccordionCss from "./generated/themes/Accordion.css.js";
-import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
-import UDExButton from "./Button.js";
 
 /**
  * @class
@@ -29,7 +30,7 @@ import UDExButton from "./Button.js";
  * For the <code>udex-accordion</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Accordion.js";</code>
+ * <code>import "@sapudex/web-components/dist/Accordion.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -87,7 +88,7 @@ class UDExAccordion extends UI5Element {
    * @slot
    * @public
    */
-  @slot({ type: HTMLElement, "default": true, individualSlots: true }) _items!: Array<HTMLElement>;
+  @slot({ type: HTMLElement, "default": true, individualSlots: true }) _items!: Array<UDExAccordionItem>;
 
   _activeItemIndex: number;
 
@@ -100,16 +101,7 @@ class UDExAccordion extends UI5Element {
   }
 
   static async onDefine() {
-    UDExAccordion.i18nBundle = await getI18nBundle("@udex/web-components");
-  }
-
-  get accordionClass(): string {
-    let classes = "udex-accordion";
-    if (this._direction === "rtl") {
-      classes = `${classes} udex-accordion--${this._direction}`;
-    }
-
-    return classes;
+    UDExAccordion.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get toggleAllText(): string {
@@ -122,7 +114,7 @@ class UDExAccordion extends UI5Element {
     return this._allExpanded;
   }
 
-  get items() {
+  get items(): {item: HTMLElement}[] {
     return this._items.map(el => {
       return {
         item: el,
@@ -130,20 +122,26 @@ class UDExAccordion extends UI5Element {
     });
   }
 
-  get headlineText() {
+  get headlineText(): string {
     return this.headline ? this.headline : "Default headline";
   }
 
   toggleAllHandler(e: Event) {
     e.preventDefault();
-    this.fireEvent("toggle-items", { isOpen: this._allExpanded });
     this._allExpanded = !this._allExpanded;
+    this.toggleOpenItems(this._allExpanded);
+    this.fireEvent("toggle-items", { isOpen: this._allExpanded });
+  }
+
+  toggleOpenItems(isOpen: boolean) {
+    this._items.forEach(item => {
+      item.expanded = isOpen;
+    });
   }
 
   toggleKeyAllHandler(e: KeyboardEvent) {
     if (isEnter(e) || isSpace(e)) {
-      this.fireEvent("toggle-items", { isOpen: this._allExpanded });
-      this._allExpanded = !this._allExpanded;
+      this.toggleAllHandler(e);
     }
   }
 
@@ -185,27 +183,11 @@ class UDExAccordion extends UI5Element {
   }
 
   itemFocusHandler(e: CustomEvent) {
-    const target = e.target as HTMLElement;
+    const target = e.target as UDExAccordionItem;
     if (target) {
       this._activeItemIndex = this._items?.indexOf(target) ?? -1;
     }
   }
-
-  onAfterRendering() {
-    const accordion = this.shadowRoot?.querySelector<HTMLElement>(
-      ".udex-accordion",
-    );
-    if (accordion) {
-      const directionStyles: string = window
-        .getComputedStyle(accordion)
-        .getPropertyValue("direction");
-      if (!directionStyles) {
-        this._direction = "ltr";
-      } else {
-        this._direction = directionStyles;
-      }
-    }
-  }
 }
 
 UDExAccordion.define();

package/src/AccordionItem.hbs

@@ -1,33 +1,36 @@
-<li class={{accordionItemsClass}}
-    aria-expanded="{{expanded}}"
-    role="listitem"
-    @keydown={{keydownHandler}}>
-    <div class="udex-accordion-item__header-wrapper">
-      <div role="button"
-           class="udex-accordion-item__header"
-           tabindex="0"
-           aria-expanded="false"
-           aria-controls="udex-accordion-item__{{_id}}-content"
-           @focus={{focusHandler}}
-           @click={{itemClickHandler}}>
-          <div class="udex-accordion-item__icon-wrapper">
-            <ui5-icon class="udex-accordion-item__icon" name="slim-arrow-right"></ui5-icon>
-          </div>
-          <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>
+<button
+    id="udex-accordion-item__{{_id}}"
+    type="button"
+    class="udex-accordion-item__header"
+    aria-expanded="false"
+    aria-controls="udex-accordion-item__{{_id}}-content"
+    @focus="{{focusHandler}}"
+    @click="{{itemClickHandler}}"
+    @keydown="{{keydownHandler}}">
+    <div class="udex-accordion-item__icon-wrapper">
+        <ui5-icon
+            class="udex-accordion-item__icon"
+            name="slim-arrow-right">
+        </ui5-icon>
     </div>
-    <div id="udex-accordion-item__{{_id}}-content" @keydown={{contentKeydown}} class="udex-accordion-item__content">
-        <slot></slot>
-    </div>
-</li>
+    <span class="udex-accordion-item__title">
+        {{title}}
+        {{#if numberBadge}}
+            <udex-badge
+                class="udex-accordion-item__badge"
+                number-design="Blue"
+                type="Number"
+                size="Large">
+                {{numberBadge}}
+            </udex-badge>
+        {{/if}}
+    </span>
+</button>
+<div
+    id="udex-accordion-item__{{_id}}-content"
+    class="udex-accordion-item__content"
+    aria-labelledby="udex-accordion-item__{{_id}}"
+    @keydown="{{contentKeydown}}"
+    role="region">
+    <slot></slot>
+</div>

package/src/AccordionItem.ts

@@ -4,6 +4,7 @@ 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/AllIcons.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
@@ -15,9 +16,6 @@ import AccordionItemTemplate from "./generated/templates/AccordionItemTemplate.l
 // Styles
 import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
 
-type ToggleAllEvent = {
-  isOpen: boolean
-}
 /**
  * @class
  *
@@ -29,7 +27,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 "@sapudex/web-components/dist/AccordionItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -101,12 +99,14 @@ class UDExAccordionItem extends UI5Element {
    */
   @slot({ type: Node, "default": true }) content!: Array<Node>;
 
-  _el: HTMLElement | null = null;
-
   constructor() {
     super();
   }
 
+  onAfterRendering() {
+    this.handleDirection();
+  }
+
   onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
@@ -119,26 +119,15 @@ class UDExAccordionItem extends UI5Element {
 
   itemClickHandler(e: Event) {
     e.preventDefault();
-    if (this._el) {
-      const isActive = this._el.classList.contains("active");
-      this.toggleItemState(this._el, isActive);
-      this.toggleExpanded();
-    }
-  }
-
-  toggleAllHandler(e: Event) {
-    e.preventDefault();
-    const customEvent = e as CustomEvent<ToggleAllEvent>;
-    if (this._el) { this.toggleItemState(this._el, customEvent.detail.isOpen); }
+    this.toggleItemState(e.currentTarget as HTMLElement, this.expanded);
+    this.toggleExpanded();
   }
 
   toggleItemState(el: HTMLElement, isActive: boolean) {
     if (isActive) {
-      el.classList.remove("active");
-      el.querySelector(".udex-accordion-item__header")?.setAttribute("aria-expanded", "false");
+      el.setAttribute("aria-expanded", "false");
     } else {
-      el.classList.add("active");
-      el.querySelector(".udex-accordion-item__header")?.setAttribute("aria-expanded", "true");
+      el.setAttribute("aria-expanded", "true");
     }
   }
 
@@ -151,49 +140,21 @@ class UDExAccordionItem extends UI5Element {
   }
 
   keydownHandler(e: KeyboardEvent) {
-    switch (e.key) {
-    case "Enter":
-    case " ":
+    if (isEnter(e) || isSpace(e)) {
       this.itemClickHandler(e);
-      break;
-    default:
-      break;
-    }
-  }
-
-  get accordionItemsClass(): string {
-    let classes = "udex-accordion-item";
-    if (this._direction === "rtl") {
-      classes = `${classes} ${this._direction}`;
     }
-    return classes;
   }
 
-  onAfterRendering() {
-    this._el = this.shadowRoot?.querySelector(".udex-accordion-item") || null;
-    const accordion = this.shadowRoot?.querySelector<HTMLElement>(
-      ".udex-accordion-item",
-    ) || null;
-
-    if (accordion) {
-      const directionStyles: string = window
-        .getComputedStyle(accordion)
-        .getPropertyValue("direction");
-      if (!directionStyles) {
-        this._direction = "ltr";
-      } else {
-        this._direction = directionStyles;
-      }
-    }
+  handleDirection() {
+    const directionStyles: string = window
+      .getComputedStyle(this)
+      .getPropertyValue("direction");
 
-    if (this._el) {
-      this.toggleItemState(this._el, !this.expanded);
+    if (!directionStyles) {
+      this._direction = "ltr";
+    } else {
+      this._direction = directionStyles;
     }
-
-    this?.parentElement?.addEventListener("ui5-toggle-items", this.toggleAllHandler.bind(this));
-    // 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/Avatar.ts

@@ -65,7 +65,7 @@ const udexToUi5ColorSchemeMap = {
  * For the <code>udex-avatar</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Avatar.js";</code>
+ * <code>import "@sapudex/web-components/dist/Avatar.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -190,7 +190,11 @@ class UDExAvatar extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExAvatar.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExAvatar.i18nBundle = await getI18nBundle("@sapudex/web-components");
+  }
+
+  onAfterRendering(): void {
+    this.title = this.initials;
   }
 
   handleClick(e: Event) {
@@ -215,7 +219,7 @@ class UDExAvatar extends UI5Element {
    * @default "Blue"
    * @private
    */
-  get еffectiveBackgroundColor(): AvatarColorScheme {
+  get effectiveBackgroundColor(): AvatarColorScheme {
     // we read the attribute, because the "background-color" property will always have a default value
     return this.getAttribute("color-scheme") as AvatarColorScheme || this.colorScheme;
   }

package/src/AvatarGroup.ts

@@ -43,7 +43,7 @@ const avatarOffsets = {
  * For the <code>udex-avatar-group</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/AvatarGroup.js";</code>
+ * <code>import "@sapudex/web-components/dist/AvatarGroup.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/Badge.ts

@@ -14,13 +14,13 @@ import IconPlacement from "./types/IconPlacement.js";
 import { NumberBadgeDesign, TextBadgeDesign } from "./types/BadgeDesign.js";
 
 export enum BadgeType {
-  text = "Text",
-  number = "Number",
+  Text = "Text",
+  Number = "Number",
 }
 
 export enum BadgeSize {
-  small = "Small",
-  large = "Large",
+  Small = "Small",
+  Large = "Large",
 }
 
 /**
@@ -34,7 +34,7 @@ export enum BadgeSize {
  * For the <code>udex-badge</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Badge.js";</code>
+ * <code>import "@sapudex/web-components/dist/Badge.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -54,7 +54,7 @@ class UDExBadge extends UI5Element {
    * @default "Text"
    * @public
    */
-  @property({ defaultValue: BadgeType.text })
+  @property({ type: BadgeType, defaultValue: BadgeType.Text })
     type!: `${BadgeType}`;
 
   /**
@@ -63,7 +63,7 @@ class UDExBadge extends UI5Element {
    * @default "Large"
    * @public
    */
-  @property({ defaultValue: BadgeSize.large })
+  @property({ type: BadgeSize, defaultValue: BadgeSize.Large })
     size!: `${BadgeSize}`;
 
   /**
@@ -124,7 +124,7 @@ class UDExBadge extends UI5Element {
   }
 
   get badgeClasses(): string {
-    if (this.type === BadgeType.text) {
+    if (this.type === BadgeType.Text) {
       return this.textClasses;
     }
 

package/src/Breadcrumbs.ts

@@ -53,7 +53,7 @@ export type UDExBreadcrumbsItemClickEventDetail = {
  * For the <code>udex-breadcrumbs</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Breadcrumbs.js";</code>
+ * <code>import "@sapudex/web-components/dist/Breadcrumbs.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -104,6 +104,20 @@ export type UDExBreadcrumbsItemClickEventDetail = {
     shiftKey: { type: Boolean },
   },
 })
+/**
+ * Fired after the dropdown is opened.
+ *
+ * @public
+ */
+@event("open")
+
+/**
+ * Fired after the dropdown is closed.
+ *
+ * @public
+ */
+@event("close")
+
 class UDExBreadcrumbs extends UI5Element {
   /**
    * Indicates if dropdown is opened
@@ -139,7 +153,7 @@ class UDExBreadcrumbs extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExBreadcrumbs.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExBreadcrumbs.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onBeforeRendering(): void {
@@ -233,6 +247,7 @@ class UDExBreadcrumbs extends UI5Element {
 
   _afterDropdownOpen(): void {
     this._dropdownOpened = true;
+    this.fireEvent("open");
   }
 
   _afterDropdownClose(): void {
@@ -240,6 +255,8 @@ class UDExBreadcrumbs extends UI5Element {
     if (this._shouldFocusFirstVisibleItem) {
       this._focusFirstVisibleItem();
     }
+
+    this.fireEvent("close");
   }
 
   _toggleDropdown(): void {

package/src/BreadcrumbsItem.ts

@@ -14,7 +14,7 @@ import BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
  * For the <code>udex-breadcrumbs-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/BreadcrumbsItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/BreadcrumbsItem.js";</code>
  *
  * @constructor
  * @extends BreadcrumbsItem

package/src/BreadcrumbsPopover.hbs

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

package/src/Carousel.hbs

@@ -1,4 +1,4 @@
-<div class="{{carouselClass}}" @keydown={{_onkeydown}}>
+<div class="{{carouselClass}}" @keydown="{{_onkeydown}}">
   {{#if showNavigationButtons.top}}
       {{> navigation}}
   {{/if}}
@@ -7,7 +7,7 @@
     hide-navigation-arrows
     arrows-placement="Navigation"
     accessible-name="{{accessibleName}}"
-    ?hide-page-indicator={{_hidePageIndicator}}>
+    ?hide-page-indicator="{{_hidePageIndicator}}">
     {{#each items}}
       <slot name="{{_individualSlot}}"></slot>
     {{/each}}
@@ -21,25 +21,25 @@
   <div class="udex-carousel__navigation-wrapper" part="navigation">
     <udex-button
       size="Large"
-      design={{buttonDesign}}
+      design="{{buttonDesign}}"
       arrow-back
       class="udex-carousel__navigation-button"
       icon="slim-arrow-left"
       tooltip="{{previousPageText}}"
       part="prev-button"
-      @click={{_prevButtonClick}}
-      ?disabled={{isPrevButtonDisabled}}
+      @click="{{_prevButtonClick}}"
+      ?disabled="{{isPrevButtonDisabled}}"
     ></udex-button>
     <udex-button
       size="Large"
-      design={{buttonDesign}}
+      design="{{buttonDesign}}"
       arrow-forward
       class="udex-carousel__navigation-button"
       icon="slim-arrow-right"
       tooltip="{{nextPageText}}"
       part="next-button"
-      @click={{_nextButtonClick}}
-      ?disabled={{isNextButtonDisabled}}
+      @click="{{_nextButtonClick}}"
+      ?disabled="{{isNextButtonDisabled}}"
     ></udex-button>
   </div>
 {{/inline}}

package/src/Carousel.ts

@@ -102,7 +102,7 @@ class UDExCarousel extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExCarousel.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExCarousel.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get nextPageText() {

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 "@sapudex/web-components/dist/Checkbox.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/ControlButton.ts

@@ -18,7 +18,7 @@ import UDExButtonSize from "./types/ButtonSize.js";
  * For the <code>udex-control-button</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ControlButton.js";</code>
+ * <code>import "@sapudex/web-components/dist/ControlButton.js";</code>
  *
  * @constructor
  * @extends Button

package/src/CountrySelector.hbs

@@ -8,7 +8,6 @@
         @ui5-after-open="{{_dropdownAfterOpen}}"
         @ui5-before-close="{{_dropdownBeforeClose}}"
         @ui5-after-close="{{_dropdownAfterClose}}"
-        @click-trigger="{{handleTriggerClick}}"
         @ui5-submit-search-value="{{handleSubmitSearch}}"
         @ui5-handle-value-search="{{handleValueSearch}}"
         @ui5-handle-value-reset="{{handleResetSearch}}"
@@ -56,7 +55,7 @@
             ?disabled="{{disabled}}"
             ?readonly="{{readonly}}"
             ?displayonly="{{displayonly}}"
-            @click-trigger="{{handleKeyDown}}"
+            @click="{{handleTriggerClick}}"
             @mousedown="{{handleInputMouseDown}}"
             icon="{{triggerIcon}}"
             accessible-icon-name="{{effectiveAriaLabel}}"