@sapudex/web-components 0.111.0

package/global.d.ts

@@ -0,0 +1,14 @@
+// eslint-disable-next-line
+import "@ui5/webcomponents-base/global";
+export {};
+
+type ParametersJson = {
+ "_": {"packageName": string, "fileName": string, content: string }
+}
+
+declare global {
+ module "*.css.json" {
+  const content: ParametersJson;
+  export default content;
+ }
+}

package/package-scripts.js

@@ -0,0 +1,17 @@
+const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js"); //eslint-disable-line
+
+const options = {
+  port: 8080,
+  typescript: true,
+};
+
+const scripts = getScripts(options);
+
+// Change baseline Vite dev server config to not open app in browser since we use Storybook
+const customWatchBundle = scripts.watch.bundle.split(' ');
+customWatchBundle[1] = './config/dev-server.js';
+scripts.watch.bundle = customWatchBundle.join(' ');
+
+module.exports = {
+  scripts,
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@sapudex/web-components",
+  "version": "0.111.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "ui5": {
+    "webComponentsPackage": true
+  },
+  "customElements": "./dist/custom-elements.json",
+  "scripts": {
+    "clean": "wc-dev clean",
+    "lint": "npx eslint .",
+    "lint:fix": "npx eslint --fix .",
+    "prepare": "wc-dev prepare",
+    "start": "wc-dev watch",
+    "start:devserver": "wc-dev start",
+    "build": "wc-dev build",
+    "test": "wc-dev test",
+    "create-ui5-element": "wc-create-ui5-element",
+    "prepack": "npm run build"
+  },
+  "exports": {
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.js": "./bundle.js",
+    "./*": "./dist/*"
+  },
+  "dependencies": {
+    "@types/vimeo__player": "^2.18.3",
+    "@types/youtube": "^0.1.0",
+    "@ui5/webcomponents": "1.24.12",
+    "@ui5/webcomponents-base": "1.24.12",
+    "@ui5/webcomponents-fiori": "1.24.12",
+    "@ui5/webcomponents-icons": "1.24.12",
+    "@ui5/webcomponents-theming": "1.24.12",
+    "@vimeo/player": "^2.24.0",
+    "video.js": "8.19.2"
+  },
+  "devDependencies": {
+    "@ui5/webcomponents-tools": "1.24.12",
+    "chromedriver": "^131.0.1",
+    "cross-env": "^7.0.3",
+    "typescript": "^4.9.4",
+    "wdio-chromedriver-service": "^8.1.1",
+    "webdriverio": "^8.16.12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.tools.sap/sapudex/digital-design-system",
+    "directory": ""
+  },
+  "files": [
+    "!test/**",
+    "!dist/test/**",
+    "./**"
+  ]
+}

package/src/Accordion.hbs

@@ -0,0 +1,24 @@
+<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>

package/src/Accordion.ts

@@ -0,0 +1,212 @@
+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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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";
+
+// Styles
+import AccordionCss from "./generated/themes/Accordion.css.js";
+import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-accordion</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Accordion.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-accordion
+ * @public
+ */
+@customElement({
+  tag: "udex-accordion",
+  renderer: litRender,
+  styles: AccordionCss,
+  template: AccordionTemplate,
+  dependencies: [],
+})
+
+/**
+ * Triggered when the user click on on Expand/Collapse All button.
+ *
+ * @event sap.ui.webc.web-components.UDExAccordion#toggleItems
+ * @public
+ */
+@event("toggle-items", {
+  detail:
+    {
+      isOpen:
+        { type: Boolean },
+    },
+})
+class UDExAccordion extends UI5Element {
+  /**
+   * Used internally to store expand/collapse button state.
+   *
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true }) _allExpanded!: boolean;
+
+  /**
+   * Defines direction of the accordion component.
+   *
+   * @private
+   */
+  @property({ type: String }) _direction?: string;
+
+  /**
+   * Defines the headline text of the accordion component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String }) headline!: string;
+
+  /**
+   * Slot for accordion items.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true, individualSlots: true }) _items!: Array<HTMLElement>;
+
+  _activeItemIndex: number;
+
+  static i18nBundle: I18nBundle;
+
+  constructor() {
+    super();
+    this._allExpanded = false;
+    this._activeItemIndex = -1;
+  }
+
+  static async onDefine() {
+    UDExAccordion.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
+  get accordionClass(): string {
+    let classes = "udex-accordion";
+    if (this._direction === "rtl") {
+      classes = `${classes} udex-accordion--${this._direction}`;
+    }
+
+    return classes;
+  }
+
+  get toggleAllText(): string {
+    return this._allExpanded
+      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
+      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);
+  }
+
+  get isExpanded(): boolean {
+    return this._allExpanded;
+  }
+
+  get items() {
+    return this._items.map(el => {
+      return {
+        item: el,
+      };
+    });
+  }
+
+  get headlineText() {
+    return this.headline ? this.headline : "Default headline";
+  }
+
+  toggleAllHandler(e: Event) {
+    e.preventDefault();
+    this.fireEvent("toggle-items", { isOpen: this._allExpanded });
+    this._allExpanded = !this._allExpanded;
+  }
+
+  toggleKeyAllHandler(e: KeyboardEvent) {
+    if (isEnter(e) || isSpace(e)) {
+      this.fireEvent("toggle-items", { isOpen: this._allExpanded });
+      this._allExpanded = !this._allExpanded;
+    }
+  }
+
+  keydownHandler(e: KeyboardEvent) {
+    if (e.key !== "Tab") {
+      e.preventDefault();
+    }
+    const len = this._items.length;
+    const focusOnItem = (itemIndex: number) => {
+      const item = this._items[itemIndex];
+      this._activeItemIndex = itemIndex;
+      (item?.shadowRoot?.querySelector(".udex-accordion-item__header") as HTMLElement)?.focus();
+    };
+
+    switch (e.key) {
+    case "Home":
+      focusOnItem(0);
+      break;
+    case "End":
+      focusOnItem(len - 1);
+      break;
+    case "ArrowUp":
+      if (this._activeItemIndex > 0) {
+        focusOnItem(this._activeItemIndex - 1);
+      } else if (this._activeItemIndex === 0) {
+        focusOnItem(len - 1);
+      }
+      break;
+    case "ArrowDown":
+      if (this._activeItemIndex < len - 1) {
+        focusOnItem(this._activeItemIndex + 1);
+      } else if (this._activeItemIndex === len - 1) {
+        focusOnItem(0);
+      }
+      break;
+    default:
+      break;
+    }
+  }
+
+  itemFocusHandler(e: CustomEvent) {
+    const target = e.target as HTMLElement;
+    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();
+
+export default UDExAccordion;

package/src/AccordionItem.hbs

@@ -0,0 +1,25 @@
+<li class={{accordionItemsClass}}
+    aria-expanded="{{expanded}}"
+    role="listitem"
+    @keydown={{keydownHandler}}>
+    <div class="udex-accordion-item__header-wrapper"
+         aria-level="2"
+         role="heading">
+      <div role="button"
+           class="udex-accordion-item__header"
+           tabindex="0"
+           aria-expanded="false"
+           aria-controls="udex-accordion-item__{{_id}}-content"
+           aria-labelledby="{{ariaLabelledby}}"
+           @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>
+          <h4 class="udex-accordion-item__title">{{title}}</h4>
+      </div>
+    </div>
+    <div id="udex-accordion-item__{{_id}}-content" @keydown={{contentKeydown}} class="udex-accordion-item__content">
+        <slot></slot>
+    </div>
+</li>

package/src/AccordionItem.ts

@@ -0,0 +1,192 @@
+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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+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 AccordionItemTemplate from "./generated/templates/AccordionItemTemplate.lit.js";
+
+// Styles
+import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
+
+type ToggleAllEvent = {
+  isOpen: boolean
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-accordion-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/AccordionItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-accordion-item
+ * @public
+ */
+@customElement({
+  tag: "udex-accordion-item",
+  renderer: litRender,
+  styles: AccordionItemCss,
+  template: AccordionItemTemplate,
+  dependencies: [],
+})
+
+/**
+ * Triggered when the user focuses on an accordion item.
+ * @public
+ */
+@event("accordion-item-focus")
+
+class UDExAccordionItem extends UI5Element {
+  /**
+   * Defines the title of the accordion item component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String }) title!: string;
+
+  /**
+   * Defines if the accordion item is expanded by default
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean }) expanded!: boolean;
+
+  /**
+   * Used internally to understand the component's open or closed state.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true }) isOpen = false;
+
+  /**
+   * Defines direction of the accordion item.
+   *
+   * @public
+   */
+  @property({ type: String }) _direction?: string;
+
+  /**
+   * Slot for accordion item content.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: Node, "default": true }) content!: Array<Node>;
+
+  _el: HTMLElement | null = null;
+
+  constructor() {
+    super();
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
+  contentKeydown(e: KeyboardEvent) {
+    e.stopPropagation();
+  }
+
+  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); }
+  }
+
+  toggleItemState(el: HTMLElement, isActive: boolean) {
+    if (isActive) {
+      el.classList.remove("active");
+      el.querySelector(".udex-accordion-item__header")?.setAttribute("aria-expanded", "false");
+    } else {
+      el.classList.add("active");
+      el.querySelector(".udex-accordion-item__header")?.setAttribute("aria-expanded", "true");
+    }
+  }
+
+  toggleExpanded(): void {
+    this.expanded = !this.expanded;
+  }
+
+  focusHandler() {
+    this.fireEvent("accordion-item-focus");
+  }
+
+  keydownHandler(e: KeyboardEvent) {
+    switch (e.key) {
+    case "Enter":
+    case " ":
+      this.itemClickHandler(e);
+      break;
+    default:
+      break;
+    }
+  }
+
+  get accordionItemsClass(): string {
+    let classes = "udex-accordion-item";
+    if (this._direction === "rtl") {
+      classes = `${classes} ${this._direction}`;
+    }
+    return classes;
+  }
+
+  get ariaLabelledby() {
+    return `${this._id}-header-title`;
+  }
+
+  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;
+      }
+    }
+
+    if (this._el) {
+      this.toggleItemState(this._el, !this.expanded);
+    }
+
+    this?.parentElement?.addEventListener("ui5-toggle-items", this.toggleAllHandler.bind(this));
+  }
+}
+
+UDExAccordionItem.define();
+
+export default UDExAccordionItem;

package/src/Assets.ts

@@ -0,0 +1,15 @@
+import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
+
+// own web-components package assets
+import "./generated/json-imports/Themes.js";
+import "./generated/json-imports/i18n.js";
+
+import { registerCustomThemePropertiesLoader } from "@ui5/webcomponents-base/dist/AssetRegistry.js";
+
+const customThemeLoader = async () => {
+  return (
+    await import("./generated/assets/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.json")
+  ).default;
+};
+
+registerCustomThemePropertiesLoader("@ui5/webcomponents", "sap_glow", customThemeLoader);

package/src/Avatar.hbs

@@ -0,0 +1,19 @@
+<ui5-avatar
+    class="{{udexAvatarClass}}"
+    ?disabled="{{disabled}}"
+    initials="{{initials}}"
+    ?interactive="{{interactive}}"
+    accessible-name="{{avatarAccessibleName}}"
+    color-scheme="{{getUI5AvatarColorScheme}}"
+    fallback-icon="{{fallbackIcon}}"
+    icon="{{icon}}"
+    shape="{{shape}}"
+    size="{{size}}"
+    @click="{{handleClick}}">
+    {{#if imageSlot}}
+        <slot></slot>
+    {{/if}}
+    {{#if badgeSlot}}
+        <slot name="badge" slot="badge"></slot>
+    {{/if}}
+</ui5-avatar>