@sapudex/web-components 2.5.0 → 2.6.0

package/src/Accordion.ts

@@ -5,19 +5,15 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
-import {
-  isEnter,
-  isSpace,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import AccordionTemplate from "./generated/templates/AccordionTemplate.lit.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import AccordionTemplate from "./AccordionTemplate.js";
+import type UDExAccordionItem from "./AccordionItem.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
-import UDExButton from "./Button.js";
 
 // Styles
 import AccordionCss from "./generated/themes/Accordion.css.js";
-import type UDExAccordionItem from "./AccordionItem.js";
 
 type UDExAccordionToggleItemsEventDetail = {
   isOpen: boolean
@@ -43,10 +39,9 @@ type UDExAccordionToggleItemsEventDetail = {
  */
 @customElement({
   tag: "udex-accordion",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: AccordionCss,
   template: AccordionTemplate,
-  dependencies: [UDExButton],
 })
 
 /**
@@ -55,30 +50,36 @@ type UDExAccordionToggleItemsEventDetail = {
  * @public
  */
 @event("toggle-items", { bubbles: true })
+
 class UDExAccordion extends UI5Element {
   eventDetails!: {
     "toggle-items": UDExAccordionToggleItemsEventDetail,
   };
+
   /**
    * Used internally to store expand/collapse button state.
    *
    * @private
    */
-  @property({ type: Boolean, noAttribute: true }) _allExpanded!: boolean;
+  @property({ type: Boolean, noAttribute: true })
+    _allExpanded!: boolean;
+
   /**
    * Defines if expandAll button should be displayed.
    *
    * @default false
    * @public
    */
-  @property({ type: Boolean }) hideExpandButton!: boolean;
+  @property({ type: Boolean })
+    hideExpandButton!: boolean;
 
   /**
    * Defines direction of the accordion component.
    *
    * @private
    */
-  @property({ type: String }) _direction?: string;
+  @property({ type: String })
+    _direction?: string;
 
   /**
    * Defines the headline text of the accordion component.
@@ -86,7 +87,8 @@ class UDExAccordion extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String }) headline!: string;
+  @property({ type: String })
+    headline!: string;
 
   /**
    * Slot for accordion items.
@@ -94,7 +96,8 @@ class UDExAccordion extends UI5Element {
    * @slot
    * @public
    */
-  @slot({ type: HTMLElement, "default": true, individualSlots: true }) _items!: Array<UDExAccordionItem>;
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    _items!: Array<UDExAccordionItem>;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -107,22 +110,8 @@ class UDExAccordion extends UI5Element {
     this._activeItemIndex = -1;
   }
 
-  get toggleAllText(): string {
-    return this._allExpanded
-      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
-      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);
-  }
-
-  get isExpanded(): boolean {
-    return this._allExpanded;
-  }
-
-  get items(): {item: HTMLElement}[] {
-    return this._items.map(el => {
-      return {
-        item: el,
-      };
-    });
+  onEnterDOM() {
+    this.updateAllExpandedStatus();
   }
 
   toggleAllHandler(e: Event) {
@@ -187,6 +176,24 @@ class UDExAccordion extends UI5Element {
       this._activeItemIndex = this._items?.indexOf(target) ?? -1;
     }
   }
+
+  updateAllExpandedStatus() {
+    this._allExpanded = this._items.every(item => item.expanded);
+  }
+
+  get toggleAllText(): string {
+    return this._allExpanded
+      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
+      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);
+  }
+
+  get items(): {item: UDExAccordionItem}[] {
+    return this._items.map(el => {
+      return {
+        item: el,
+      };
+    });
+  }
 }
 
 UDExAccordion.define();

package/src/AccordionItem.ts

@@ -3,14 +3,10 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import UDExBadge from "./Badge.js";
-
-import AccordionItemTemplate from "./generated/templates/AccordionItemTemplate.lit.js";
+import AccordionItemTemplate from "./AccordionItemTemplate.js";
 
 // Styles
 import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
@@ -36,10 +32,9 @@ import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
  */
 @customElement({
   tag: "udex-accordion-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: AccordionItemCss,
   template: AccordionItemTemplate,
-  dependencies: [UDExBadge, Icon],
 })
 
 /**
@@ -48,9 +43,16 @@ import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
  */
 @event("accordion-item-focus", { bubbles: true })
 
+/**
+ * Triggered when the user clicks on an accordion item.
+ * @public
+ */
+@event("accordion-item-click", { bubbles: true })
+
 class UDExAccordionItem extends UI5Element {
   eventDetails!: {
     "accordion-item-focus": void,
+    "accordion-item-click": void,
   };
   /**
    * Defines the Badge at the end of the label item.
@@ -58,7 +60,8 @@ class UDExAccordionItem extends UI5Element {
    * @default ""
    * @public
    */
-  @property() numberBadge!: string;
+  @property()
+    numberBadge!: string;
 
   /**
    * Defines the label of the accordion item component.
@@ -66,7 +69,8 @@ class UDExAccordionItem extends UI5Element {
    * @default ""
    * @public
    */
-  @property() label!: string;
+  @property()
+    label!: string;
 
   /**
    * Defines if the accordion item is expanded by default
@@ -74,7 +78,8 @@ class UDExAccordionItem extends UI5Element {
    * @default false
    * @public
    */
-  @property({ type: Boolean }) expanded!: boolean;
+  @property({ type: Boolean })
+    expanded = false;
 
   /**
    * Used internally to understand the component's open or closed state.
@@ -82,14 +87,16 @@ class UDExAccordionItem extends UI5Element {
    * @default false
    * @private
    */
-  @property({ type: Boolean, noAttribute: true }) isOpen = false;
+  @property({ type: Boolean, noAttribute: true })
+    isOpen = false;
 
   /**
    * Defines direction of the accordion item.
    *
    * @public
    */
-  @property({ type: String }) _direction?: string;
+  @property({ type: String })
+    _direction?: string;
 
   /**
    * Slot for accordion item content.
@@ -97,7 +104,8 @@ class UDExAccordionItem extends UI5Element {
    * @slot
    * @public
    */
-  @slot({ type: Node, "default": true }) content!: Array<Node>;
+  @slot({ type: Node, "default": true })
+    content!: Array<Node>;
 
   constructor() {
     super();
@@ -119,20 +127,8 @@ class UDExAccordionItem extends UI5Element {
 
   itemClickHandler(e: Event) {
     e.preventDefault();
-    this.toggleItemState(e.currentTarget as HTMLElement, this.expanded);
-    this.toggleExpanded();
-  }
-
-  toggleItemState(el: HTMLElement, isActive: boolean) {
-    if (isActive) {
-      el.setAttribute("aria-expanded", "false");
-    } else {
-      el.setAttribute("aria-expanded", "true");
-    }
-  }
-
-  toggleExpanded(): void {
     this.expanded = !this.expanded;
+    this.fireDecoratorEvent("accordion-item-click");
   }
 
   focusHandler() {

package/src/AccordionItemTemplate.tsx

@@ -0,0 +1,54 @@
+import type AccordionItem from "./AccordionItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+import UDExBadge from "./Badge.js";
+
+export default function AccordionItemTemplate(this: AccordionItem) {
+  const ariaControlsId = `udex-accordion-item__${this._id}-content`;
+  const ariaLabelledbyId = `udex-accordion-item__${this._id}`;
+  const rootClass = "udex-accordion-item";
+
+  return (
+    <>
+      <button
+        id={ariaLabelledbyId}
+        aria-controls={ariaControlsId}
+        className={`${rootClass}__header`}
+        onFocusIn={this.focusHandler}
+        onClick={this.itemClickHandler}
+        onKeyDown={this.keydownHandler}
+        aria-expanded={this.expanded}
+        type="button">
+        <div className={`${rootClass}__icon-wrapper`}>
+          <UI5Icon
+            class={`${rootClass}__icon`}
+            mode={IconMode.Decorative}
+            name={slimArrowRight}>
+          </UI5Icon>
+        </div>
+        <span className={`${rootClass}__title`}>
+          {this.label}
+          {this.numberBadge &&
+            <UDExBadge
+              class={`${rootClass}__badge`}
+              number-design={UDExNumberBadgeDesign.Blue}
+              type={UDExTypeBadgeDesign.Number}
+              size={UDExSizeBadgeDesign.Medium}>
+              {this.numberBadge}
+            </UDExBadge>
+          }
+        </span>
+      </button>
+      <div
+        id={ariaControlsId}
+        aria-labelledby={ariaLabelledbyId}
+        className={`${rootClass}__content`}
+        onKeyDown={this.contentKeydown}
+        role="region">
+        <slot></slot>
+      </div>
+    </>
+  );
+}

package/src/AccordionTemplate.tsx

@@ -0,0 +1,37 @@
+import type Accordion from "./Accordion.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+
+export default function AccordionTemplate(this: Accordion) {
+  const rootClass = "udex-accordion";
+
+  return (
+    <div
+      className={rootClass}
+      onKeyDown={this.keydownHandler}
+      onui5-accordion-item-click={this.updateAllExpandedStatus}
+      onui5-accordion-item-focus={this.itemFocusHandler}>
+      <div className={`${rootClass}__head`} part="head">
+        {this.headline &&
+          <h3 className={`${rootClass}__headline`}>{this.headline}</h3>
+        }
+        {!this.hideExpandButton &&
+          <UDExButton class={`${rootClass}__btn`}
+            size={UDExButtonSize.Large}
+            design={UDExButtonDesign.Tertiary}
+            onClick={this.toggleAllHandler}
+            onKeyDown={this.toggleKeyAllHandler}
+            accessibleName={this.toggleAllText}>
+            {this.toggleAllText}
+          </UDExButton>
+        }
+      </div>
+      <div className={`${rootClass}__content`}>
+        {this.items.map(itemInfo =>
+          <slot name={itemInfo.item._individualSlot}></slot>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/AssetsVariables.ts

@@ -1,6 +1,10 @@
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
-const variablesOverwrite = `:root {
+const variablesOverwrite = `
+  ${getEffectiveScrollbarStyle()}
+  
+  :root {
   /* Browser Scrollbar */
   ${getScopedVarName("--browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);
 

package/src/Avatar.ts

@@ -1,16 +1,15 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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-strict.js";
-import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
-
+import type AvatarColorScheme from "@ui5/webcomponents/dist/types/AvatarColorScheme.js";
 // Template
-import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
+import AvatarTemplate from "./AvatarTemplate.js";
 
 // Styles
 import AvatarCss from "./generated/themes/Avatar.css.js";
@@ -42,18 +41,18 @@ export enum UDExAvatarSize {
   XL = "XL",
 }
 
-const udexToUi5ColorSchemeMap = {
+const UDExToUi5ColorSchemeMap = {
   Mango: "Accent1",
   Red: "Accent2",
   Raspberry: "Accent3",
   Pink: "Accent4",
   Indigo: "Accent5",
   Blue: "Accent6",
+  Transparent: "Accent6",
+  Neutral: "Accent6",
   Teal: "Accent7",
   Green: "Accent8",
   Grey: "Accent10",
-  Transparent: "Accent6",
-  Neutral: "Accent6",
 };
 
 /**
@@ -75,10 +74,9 @@ const udexToUi5ColorSchemeMap = {
  */
 @customElement({
   tag: "udex-avatar",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: AvatarCss,
   template: AvatarTemplate,
-  dependencies: [Avatar],
 })
 
 /**
@@ -233,8 +231,8 @@ class UDExAvatar extends UI5Element {
     return this.getAttribute("color-scheme") as UDExAvatarColorScheme || this.colorScheme;
   }
 
-  get getUDExAvatarColorScheme(): string {
-    return udexToUi5ColorSchemeMap[this.colorScheme];
+  get getUDExAvatarColorScheme(): AvatarColorScheme {
+    return UDExToUi5ColorSchemeMap[this.colorScheme] as AvatarColorScheme;
   }
 
   get imageSlot(): boolean {

package/src/AvatarTemplate.tsx

@@ -0,0 +1,22 @@
+import type Avatar from "./Avatar.js";
+import UI5Avatar from "@ui5/webcomponents/dist/Avatar.js";
+
+export default function AvatarTemplate(this: Avatar) {
+  return (
+    <UI5Avatar
+      class={this.udexAvatarClass}
+      accessibleName={this.avatarAccessibleName}
+      colorScheme={this.getUDExAvatarColorScheme}
+      onClick={this.handleClick}
+      disabled={this.disabled}
+      initials={this.initials}
+      interactive={this.interactive}
+      fallbackIcon={this.fallbackIcon}
+      icon={this.icon}
+      shape={this.shape}
+      size={this.size}>
+      {this.imageSlot && <slot></slot>}
+      {this.badgeSlot && <slot name="badge" slot="badge"></slot>}
+    </UI5Avatar>
+  );
+}

package/src/Badge.ts

@@ -2,25 +2,21 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-
-import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
-
-// Styles
-import BadgeCss from "./generated/themes/Badge.css.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import BadgeTemplate from "./BadgeTemplate.js";
 import UDExIconPlacement from "./types/IconPlacement.js";
-
 import {
   UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,
 } from "./types/BadgeDesign.js";
 
+// Styles
+import BadgeCss from "./generated/themes/Badge.css.js";
+
 /**
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- *
  * <h3>Usage</h3>
  *
  * For the <code>udex-badge</code>
@@ -34,11 +30,11 @@ import {
  */
 @customElement({
   tag: "udex-badge",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: BadgeCss,
   template: BadgeTemplate,
-  dependencies: [Icon],
 })
+
 class UDExBadge extends UI5Element {
   /**
    * Defines the type of the component.
@@ -61,7 +57,7 @@ class UDExBadge extends UI5Element {
   /**
    * Defines the design of text type component.
    *
-   * @default "Info"
+   * @default "Information"
    * @public
    */
   @property()

package/src/BadgeTemplate.tsx

@@ -0,0 +1,22 @@
+import type Badge from "./Badge.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function BadgeTemplate(this: Badge) {
+  return (
+    <div className={this.badgeClasses}>
+      {this.startIcon &&
+        <UI5Icon
+          class="udex-badge__icon udex-badge__icon--start"
+          name={this.icon}>
+        </UI5Icon>
+      }
+      <slot></slot>
+      {this.endIcon &&
+        <UI5Icon
+          class="udex-badge__icon udex-badge__icon--end"
+          name={this.icon}>
+        </UI5Icon>
+      }
+    </div>
+  );
+}

package/src/Carousel.ts

@@ -2,38 +2,44 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  isUp,
-  isDown,
-  isRight,
-  isLeft,
+  isUp, isDown, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
-import {
-  CAROUSEL_NEXT_ARROW_TEXT,
-  CAROUSEL_PREVIOUS_ARROW_TEXT,
-} from "./generated/i18n/i18n-defaults.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
+import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 
-import CarouselTemplate from "./generated/templates/CarouselTemplate.lit.js";
+import CarouselTemplate from "./CarouselTemplate.js";
 
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
-import UDExButton from "./Button.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
   bottom = "bottom",
 }
 
+export enum UDExCarouselButtonDesign {
+  Secondary = "Secondary",
+  Tertiary = "Tertiary",
+}
+
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-carousel</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Carousel.js";</code>
+ *
  * @constructor
  * @extends UI5Element
  * @tagname udex-carousel
@@ -41,11 +47,11 @@ export enum UDExCarouselNavigationPosition {
  */
 @customElement({
   tag: "udex-carousel",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: CarouselCss,
   template: CarouselTemplate,
-  dependencies: [UI5Carousel, UDExButton],
 })
+
 class UDExCarousel extends UI5Element {
   /**
    * Defines the position of the navigation.
@@ -100,11 +106,11 @@ class UDExCarousel extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  get nextPageText() {
+  get nextPageText(): string {
     return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
   }
 
-  get previousPageText() {
+  get previousPageText(): string {
     return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
   }
 
@@ -114,24 +120,24 @@ class UDExCarousel extends UI5Element {
     return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
   }
 
-  get buttonDesign() {
+  get buttonDesign(): UDExCarouselButtonDesign {
     return this.navigationPlacement === UDExCarouselNavigationPosition.top
-      ? "Secondary"
-      : "Tertiary";
+      ? UDExCarouselButtonDesign.Secondary
+      : UDExCarouselButtonDesign.Tertiary;
   }
 
-  get showNavigationButtons() {
+  get showNavigationButtons(): { top: boolean; bottom: boolean } {
     return {
       top: this.navigationPlacement === UDExCarouselNavigationPosition.top,
       bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,
     };
   }
 
-  get _hidePageIndicator() {
+  get _hidePageIndicator(): boolean {
     return this.navigationPlacement === UDExCarouselNavigationPosition.top;
   }
 
-  get _carousel() {
+  get _carousel(): UI5Carousel | null {
     return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
   }