@sapudex/web-components 0.111.0

package/dist/HeroBanner.js

@@ -0,0 +1,144 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/media-play.js";
+import "@ui5/webcomponents-icons/dist/media-pause.js";
+import HeroBannerTemplate from "./generated/templates/HeroBannerTemplate.lit.js";
+// Styles
+import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
+export var imageLoadingStrategies;
+(function (imageLoadingStrategies) {
+    imageLoadingStrategies["eager"] = "eager";
+    imageLoadingStrategies["lazy"] = "lazy";
+})(imageLoadingStrategies || (imageLoadingStrategies = {}));
+/**
+ * @class
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-hero-banner
+ * @public
+ */
+let UDExHeroBanner = class UDExHeroBanner extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this._isHTMLDivElement = (element) => {
+            return element.tagName === "DIV";
+        };
+    }
+    get hasBackgroundImage() {
+        return !!this.backgroundImage;
+    }
+    get hasBackgroundVideo() {
+        return !!this.backgroundVideo;
+    }
+    get wrapperBackgroundColor() {
+        return this.backgroundColor ? this.backgroundColor : "transparent";
+    }
+    /**
+     * Determines if the video should autoplay based on the user's global preference.
+     */
+    get shouldVideoAutoplay() {
+        return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    get heroBannerClasses() {
+        const heroBannerClasses = ["udex-hero-banner"];
+        if (this.hasBackgroundVideo) {
+            heroBannerClasses.push("udex-hero-banner--video");
+        }
+        return heroBannerClasses.join(" ");
+    }
+    get hasAdditionalContent() {
+        return !!this.additionalContent?.length;
+    }
+    get hasCustomBackgroundPicture() {
+        return !!this.backgroundPicture?.length;
+    }
+    get mediaButtonIconName() {
+        return this._isVideoRunning ? "media-pause" : "media-play";
+    }
+    get _video() {
+        return this.shadowRoot?.querySelector("video");
+    }
+    _toggleMediaButton() {
+        if (this._video?.paused) {
+            this._video?.play();
+        }
+        else {
+            this._video?.pause();
+        }
+        this._calculateMediaButtonState();
+    }
+    _calculateMediaButtonState() {
+        this._isVideoRunning = !this._video?.paused ?? false;
+    }
+    _handleKeydown(event) {
+        const target = event.target;
+        if (this._isHTMLDivElement(target) && isSpace(event)) {
+            event.preventDefault();
+            event.stopPropagation();
+            this._toggleMediaButton();
+        }
+    }
+    onEnterDOM() {
+        if (this.backgroundVideo) {
+            this._video?.addEventListener("play", () => {
+                this._calculateMediaButtonState();
+            });
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExHeroBanner.prototype, "backgroundImage", void 0);
+__decorate([
+    property({
+        type: imageLoadingStrategies,
+        defaultValue: imageLoadingStrategies.eager,
+    })
+], UDExHeroBanner.prototype, "backgroundImageLoadingStrategy", void 0);
+__decorate([
+    property({ type: String })
+], UDExHeroBanner.prototype, "backgroundImageLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExHeroBanner.prototype, "backgroundVideo", void 0);
+__decorate([
+    property({ type: String })
+], UDExHeroBanner.prototype, "backgroundVideoLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExHeroBanner.prototype, "backgroundColor", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExHeroBanner.prototype, "_isVideoRunning", void 0);
+__decorate([
+    slot()
+], UDExHeroBanner.prototype, "content", void 0);
+__decorate([
+    slot()
+], UDExHeroBanner.prototype, "additionalContent", void 0);
+__decorate([
+    slot()
+], UDExHeroBanner.prototype, "backgroundPicture", void 0);
+UDExHeroBanner = __decorate([
+    customElement({
+        tag: "udex-hero-banner",
+        renderer: litRender,
+        styles: HeroBannerCss,
+        template: HeroBannerTemplate,
+    })
+], UDExHeroBanner);
+UDExHeroBanner.define();
+export default UDExHeroBanner;
+//# sourceMappingURL=HeroBanner.js.map

package/dist/HeroBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroBanner.js","sourceRoot":"","sources":["../src/HeroBanner.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/media-play.js\";\nimport \"@ui5/webcomponents-icons/dist/media-pause.js\";\n\nimport HeroBannerTemplate from \"./generated/templates/HeroBannerTemplate.lit.js\";\n\n// Styles\nimport HeroBannerCss from \"./generated/themes/HeroBanner.css.js\";\n\nexport enum imageLoadingStrategies {\n  eager = \"eager\",\n  lazy = \"lazy\",\n}\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-hero-banner\n * @public\n */\n@customElement({\n  tag: \"udex-hero-banner\",\n  renderer: litRender,\n  styles: HeroBannerCss,\n  template: HeroBannerTemplate,\n})\nclass UDExHeroBanner extends UI5Element {\n  /**\n   * Allows control over the background image source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundImage?: string;\n\n  /**\n   * Allows control over the background image loading strategy.\n   *\n   * @public\n   */\n  @property({\n    type: imageLoadingStrategies,\n    defaultValue: imageLoadingStrategies.eager,\n  })\n    backgroundImageLoadingStrategy?: `${imageLoadingStrategies}`;\n\n  /**\n   * Used as the label for background image.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundImageLabel?: string;\n\n  /**\n   * Allows control over the background video source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundVideo?: string;\n\n  /**\n   * Used as the label for background video.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundVideoLabel?: string;\n\n  /**\n   * Allows control over the background color.\n   * Value provided should be compatible with standard CSS rendering, e.g:\n   *  - HEX: \"#FFF\", \"#FFFFFF\", \"FFFFFFFF\"\n   *  - RGB/A: \"rgb(255, 255, 255)\", \"rgba(255, 255, 255, 1)\"\n   *  - HSL/A: \"hsl(0, 100%, 100%)\", \"hsla(0, 100%, 100%, 1\"\n   *  - Variables: \"var(--sapShell_Background)\", \"var(--udexColorNeutralWhite)\"\n   *  - Text values: \"white\", \"red\"\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundColor?: string;\n\n  @property({ type: Boolean, noAttribute: true })\n    _isVideoRunning?: boolean;\n\n  /**\n   * Slot for primary content.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    content?: Array<HTMLElement>;\n\n  /**\n   * Slot for any additional content.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    additionalContent?: Array<HTMLElement>;\n\n  /**\n   * Slot background picture override.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    backgroundPicture?: Array<HTMLElement>;\n\n  get hasBackgroundImage() {\n    return !!this.backgroundImage;\n  }\n  get hasBackgroundVideo() {\n    return !!this.backgroundVideo;\n  }\n  get wrapperBackgroundColor() {\n    return this.backgroundColor ? this.backgroundColor : \"transparent\";\n  }\n\n  /**\n   * Determines if the video should autoplay based on the user's global preference.\n   */\n  get shouldVideoAutoplay() {\n    return !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  }\n\n  get heroBannerClasses(): string {\n    const heroBannerClasses = [\"udex-hero-banner\"];\n    if (this.hasBackgroundVideo) {\n      heroBannerClasses.push(\"udex-hero-banner--video\");\n    }\n    return heroBannerClasses.join(\" \");\n  }\n  get hasAdditionalContent() {\n    return !!this.additionalContent?.length;\n  }\n\n  get hasCustomBackgroundPicture() {\n    return !!this.backgroundPicture?.length;\n  }\n\n  get mediaButtonIconName() {\n    return this._isVideoRunning ? \"media-pause\" : \"media-play\";\n  }\n  get _video() {\n    return this.shadowRoot?.querySelector<HTMLVideoElement>(\"video\");\n  }\n\n  _toggleMediaButton(): void {\n    if (this._video?.paused) {\n      this._video?.play();\n    } else {\n      this._video?.pause();\n    }\n    this._calculateMediaButtonState();\n  }\n\n  _calculateMediaButtonState() {\n    this._isVideoRunning = !this._video?.paused ?? false;\n  }\n\n  _isHTMLDivElement = (element: HTMLElement): element is HTMLDivElement => {\n    return element.tagName === \"DIV\";\n  };\n\n  _handleKeydown(event: KeyboardEvent): void {\n    const target = <HTMLElement>event.target;\n    if (this._isHTMLDivElement(target) && isSpace(event)) {\n      event.preventDefault();\n      event.stopPropagation();\n      this._toggleMediaButton();\n    }\n  }\n\n  onEnterDOM() {\n    if (this.backgroundVideo) {\n      this._video?.addEventListener(\"play\", () => {\n        this._calculateMediaButtonState();\n      });\n    }\n  }\n}\nUDExHeroBanner.define();\n\nexport default UDExHeroBanner;\n"]}

package/dist/Link.d.ts

@@ -0,0 +1,43 @@
+import Link from "@ui5/webcomponents/dist/Link.js";
+export declare enum IconPlacement {
+    start = "start",
+    end = "end"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-link</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Link.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends Link
+ * @tagname udex-link
+ * @public
+ */
+declare class UDExLink extends Link {
+    /**
+     * Used as the label for background image.
+     *
+     * @public
+    */
+    icon?: string;
+    /**
+     * Used as the label for background image.
+     *
+     * @public
+     * @default "end"
+    */
+    iconPlacement?: `${IconPlacement}`;
+    get startIcon(): boolean | "" | undefined;
+    get endIcon(): boolean | "" | undefined;
+    get linkClass(): "udex-link" | "udex-link udex-link--with-icon";
+}
+export default UDExLink;

package/dist/Link.js

@@ -0,0 +1,66 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 Link from "@ui5/webcomponents/dist/Link.js";
+import linkCss from "@ui5/webcomponents/dist/generated/themes/Link.css.js";
+import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
+// Styles
+import LinkCss from "./generated/themes/Link.css.js";
+export var IconPlacement;
+(function (IconPlacement) {
+    IconPlacement["start"] = "start";
+    IconPlacement["end"] = "end";
+})(IconPlacement || (IconPlacement = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-link</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Link.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends Link
+ * @tagname udex-link
+ * @public
+ */
+let UDExLink = class UDExLink extends Link {
+    get startIcon() {
+        return this.icon && this.iconPlacement === IconPlacement.start;
+    }
+    get endIcon() {
+        return this.icon && this.iconPlacement === IconPlacement.end;
+    }
+    get linkClass() {
+        return this.icon ? "udex-link udex-link--with-icon" : "udex-link";
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExLink.prototype, "icon", void 0);
+__decorate([
+    property({ type: IconPlacement, defaultValue: IconPlacement.end })
+], UDExLink.prototype, "iconPlacement", void 0);
+UDExLink = __decorate([
+    customElement({
+        tag: "udex-link",
+        renderer: litRender,
+        styles: [linkCss, LinkCss],
+        template: LinkTemplate,
+    })
+], UDExLink);
+UDExLink.define();
+export default UDExLink;
+//# sourceMappingURL=Link.js.map

package/dist/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,OAAO,OAAO,MAAM,sDAAsD,CAAC;AAC3E,OAAO,YAAY,MAAM,2CAA2C,CAAC;AAErE,SAAS;AACT,OAAO,OAAO,MAAM,gCAAgC,CAAC;AAErD,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,gCAAe,CAAA;IACf,4BAAW,CAAA;AACb,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AAQH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,IAAI;IAkBvB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;IACjE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,CAAC;IAC/D,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,WAAW,CAAC;IACpE,CAAC;CACJ,CAAA;AAtBK;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AASd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC;+CAC9B;AAhBnC,QAAQ;IAPb,aAAa,CAAC;QACb,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;QAC1B,QAAQ,EAAE,YAAY;KACvB,CAAC;GAEI,QAAQ,CA6Bb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Link from \"@ui5/webcomponents/dist/Link.js\";\n\nimport linkCss from \"@ui5/webcomponents/dist/generated/themes/Link.css.js\";\nimport LinkTemplate from \"./generated/templates/LinkTemplate.lit.js\";\n\n// Styles\nimport LinkCss from \"./generated/themes/Link.css.js\";\n\nexport enum IconPlacement {\n  start = \"start\",\n  end = \"end\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-link</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/Link.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends Link\n * @tagname udex-link\n * @public\n */\n@customElement({\n  tag: \"udex-link\",\n  renderer: litRender,\n  styles: [linkCss, LinkCss],\n  template: LinkTemplate,\n})\n\nclass UDExLink extends Link {\n    /**\n     * Used as the label for background image.\n     *\n     * @public\n    */\n    @property({ type: String })\n      icon?: string;\n\n    /**\n     * Used as the label for background image.\n     *\n     * @public\n     * @default \"end\"\n    */\n    @property({ type: IconPlacement, defaultValue: IconPlacement.end })\n      iconPlacement?: `${IconPlacement}`;\n\n    get startIcon() {\n      return this.icon && this.iconPlacement === IconPlacement.start;\n    }\n\n    get endIcon() {\n      return this.icon && this.iconPlacement === IconPlacement.end;\n    }\n\n    get linkClass() {\n      return this.icon ? \"udex-link udex-link--with-icon\" : \"udex-link\";\n    }\n}\n\nUDExLink.define();\n\nexport default UDExLink;\n"]}

package/dist/List.d.ts

@@ -0,0 +1,115 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExListItem from "./ListItem.js";
+import { ListStyleType, ListMode } from "./types/List.js";
+import UDExListGroupHeader from "./ListGroupHeader.js";
+export type UDExListItemBase = UDExListItem & UDExListGroupHeader;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *\e
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-list</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/List.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-list
+ * @public
+ */
+declare class UDExList extends UI5Element {
+    /**
+     * Defines the accessible role of the component.
+     *
+     * @default "list"
+     * @public
+     */
+    accessibleRole: string;
+    /**
+     * Defines the accessible name of the component.
+     *
+     * @default ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Defines the mode of the component.
+     *
+     * @default "SingleSelect"
+     * @public
+     */
+    mode: `${ListMode}`;
+    /**
+     * Defines the type of the item.
+     *
+     * @defaultvalue "None"
+     * @public
+     */
+    type: `${ListStyleType}`;
+    /**
+     * Allows control over the height.
+     *
+     * @public
+     */
+    height?: string;
+    /**
+     * Defines the controlled of the component.
+     *
+     * @default false
+     * @public
+     */
+    controlled?: boolean;
+    /**
+     * Defines the headerText, displayed in the top of the list.
+     *
+     * @public
+     */
+    headerText?: string;
+    /**
+     * Defines the name of the UI5 Icon, that will be displayed for each item of the list.
+     *
+     * @defaultvalue ""
+     * @private
+     */
+    itemIcon?: string;
+    /**
+     * Slot for list items.
+     *
+     * @slot items
+     * @public
+     */
+    items: Array<UDExListItemBase>;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    onBeforeRendering(): void;
+    handleItemPress(e: CustomEvent): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleUpArrow(e: KeyboardEvent): void;
+    handleDownArrow(e: KeyboardEvent): void;
+    handleHomeKey(e: KeyboardEvent): void;
+    handleEndKey(e: KeyboardEvent): void;
+    revertSelectedItems(items: Array<UDExListItemBase>): void;
+    focusHeader(item: UDExListItemBase): void;
+    getItems(): Array<UDExListItemBase>;
+    getSelectedItems(): Array<UDExListItemBase>;
+    getCurrentIndex(items: Array<UDExListItemBase>, item: UDExListItemBase): number;
+    getItemsWithoutHeader(): Array<UDExListItemBase>;
+    getKeyboardNavigationItems(): Array<UDExListItemBase>;
+    getItemsFromList(): Array<UDExListItemBase>;
+    prepareListItemsMode(): void;
+    get ariaLabelModeText(): string;
+    get ariaLabelledBy(): string;
+    get modeRadioGroup(): boolean;
+    get modeMultiSelect(): boolean;
+    get modeSingleSelect(): boolean;
+    get modeSingleContent(): boolean;
+    get modeSelected(): boolean;
+    get holderHeight(): string;
+}
+export default UDExList;

package/dist/List.js

@@ -0,0 +1,258 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var UDExList_1;
+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 { isUp, isDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import { ListStyleType, ListMode } from "./types/List.js";
+import { ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_SELECTABLE, } from "./generated/i18n/i18n-defaults.js";
+import ListTemplate from "./generated/templates/ListTemplate.lit.js";
+// Styles
+import ListCss from "./generated/themes/List.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *\e
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-list</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/List.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-list
+ * @public
+ */
+let UDExList = UDExList_1 = class UDExList extends UI5Element {
+    static async onDefine() {
+        UDExList_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    onBeforeRendering() {
+        this.prepareListItemsMode();
+    }
+    handleItemPress(e) {
+        const clickedItem = e.detail.item;
+        if (this.modeSingleSelect && !this.controlled) {
+            this.revertSelectedItems(this.getSelectedItems());
+            clickedItem.selected = true;
+        }
+        if (this.modeRadioGroup && !this.controlled) {
+            const groupHeader = clickedItem.parentElement;
+            const groupItems = groupHeader.getItems();
+            this.revertSelectedItems(groupItems);
+            clickedItem.selected = true;
+        }
+        this.fireEvent("selection-change", {
+            listItems: this.getItemsFromList(),
+            selectedItems: this.getSelectedItems(),
+            item: clickedItem,
+        });
+    }
+    handleKeyDown(e) {
+        this.handleUpArrow(e);
+        this.handleDownArrow(e);
+        this.handleHomeKey(e);
+        this.handleEndKey(e);
+    }
+    handleUpArrow(e) {
+        if (isUp(e)) {
+            e.preventDefault();
+            const items = this.getKeyboardNavigationItems();
+            const currentSelectedIndex = this.getCurrentIndex(items, e.target);
+            const lastItemIndex = items.length - 1;
+            const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
+            const isHeaderItem = items[previousSelectIndex].isGroup;
+            const nonInteractiveHeader = items[previousSelectIndex].nonInteractive;
+            if (nonInteractiveHeader && previousSelectIndex === 0) {
+                items[lastItemIndex].focus();
+                return;
+            }
+            if (nonInteractiveHeader) {
+                items[previousSelectIndex - 1].focus();
+                return;
+            }
+            if (isHeaderItem) {
+                this.focusHeader(items[previousSelectIndex]);
+                return;
+            }
+            items[previousSelectIndex].focus();
+        }
+    }
+    handleDownArrow(e) {
+        if (isDown(e)) {
+            e.preventDefault();
+            const items = this.getKeyboardNavigationItems();
+            const currentSelectedIndex = this.getCurrentIndex(items, e.target);
+            const nextSelectIndex = currentSelectedIndex + 1 > items.length - 1 ? 0 : currentSelectedIndex + 1;
+            const isHeaderItem = items[nextSelectIndex].isGroup;
+            const nonInteractiveHeader = items[nextSelectIndex].nonInteractive;
+            if (nonInteractiveHeader) {
+                items[nextSelectIndex + 1].focus();
+                return;
+            }
+            if (isHeaderItem) {
+                this.focusHeader(items[nextSelectIndex]);
+                return;
+            }
+            items[nextSelectIndex].focus();
+        }
+    }
+    handleHomeKey(e) {
+        if (isHome(e)) {
+            e.preventDefault();
+            const items = this.getKeyboardNavigationItems();
+            const firstItem = items[0];
+            const isHeaderItem = firstItem.isGroup;
+            const nonInteractiveItem = firstItem.nonInteractive;
+            if (nonInteractiveItem) {
+                items[1].focus();
+                return;
+            }
+            if (isHeaderItem) {
+                this.focusHeader(items[0]);
+                return;
+            }
+            items[0].focus();
+        }
+    }
+    handleEndKey(e) {
+        if (isEnd(e)) {
+            e.preventDefault();
+            const items = this.getKeyboardNavigationItems();
+            items[items.length - 1].focus();
+        }
+    }
+    revertSelectedItems(items) {
+        items.forEach((item) => {
+            if (!item.disabled) {
+                item.selected = false;
+            }
+        });
+    }
+    focusHeader(item) {
+        const header = item.shadowRoot?.querySelector(".udex-list__group-header");
+        header.focus();
+    }
+    getItems() {
+        return this.getSlottedNodes("items");
+    }
+    getSelectedItems() {
+        return this.getItemsFromList().filter(item => item.selected);
+    }
+    getCurrentIndex(items, item) {
+        return items.indexOf(item);
+    }
+    getItemsWithoutHeader() {
+        return this.getItemsFromList().filter(item => !item.isGroup);
+    }
+    getKeyboardNavigationItems() {
+        const items = this.modeMultiSelect ? this.getItemsFromList() : this.getItemsWithoutHeader();
+        return items.filter(item => !item.disabled);
+    }
+    getItemsFromList() {
+        const items = [];
+        const slottedItems = this.getItems();
+        slottedItems.forEach(item => {
+            const childItems = item.isGroup ? item.children : [];
+            items.push(item, ...childItems);
+        });
+        return items;
+    }
+    prepareListItemsMode() {
+        const slottedItems = this.getItemsFromList();
+        slottedItems.forEach(item => {
+            item.mode = this.mode;
+            item.controlled = this.controlled;
+            item.type = this.type;
+            item._icon = this.itemIcon;
+        });
+    }
+    get ariaLabelModeText() {
+        if (this.modeSingleSelect || this.modeRadioGroup) {
+            return UDExList_1.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);
+        }
+        return UDExList_1.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
+    }
+    get ariaLabelledBy() {
+        return `${this._id}-mode-label`;
+    }
+    get modeRadioGroup() {
+        return this.mode === ListMode.RadioGroup;
+    }
+    get modeMultiSelect() {
+        return this.mode === ListMode.MultiSelect;
+    }
+    get modeSingleSelect() {
+        return this.mode === ListMode.SingleSelect;
+    }
+    get modeSingleContent() {
+        return this.mode === ListMode.SingleContent;
+    }
+    get modeSelected() {
+        return [ListMode.SingleSelect, ListMode.MultiSelect, ListMode.RadioGroup].includes(this.mode);
+    }
+    get holderHeight() {
+        return this.height ? this.height : "auto";
+    }
+};
+__decorate([
+    property({ defaultValue: "list" })
+], UDExList.prototype, "accessibleRole", void 0);
+__decorate([
+    property()
+], UDExList.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: ListMode, defaultValue: ListMode.SingleSelect })
+], UDExList.prototype, "mode", void 0);
+__decorate([
+    property({ type: ListStyleType, defaultValue: ListStyleType.None })
+], UDExList.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], UDExList.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExList.prototype, "controlled", void 0);
+__decorate([
+    property({ type: String })
+], UDExList.prototype, "headerText", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExList.prototype, "itemIcon", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExList.prototype, "items", void 0);
+UDExList = UDExList_1 = __decorate([
+    customElement({
+        tag: "udex-list",
+        renderer: litRender,
+        styles: [ListCss, getEffectiveScrollbarStyle()],
+        template: ListTemplate,
+        dependencies: [],
+    }),
+    event("selection-change", {
+        detail: {
+            listItems: { type: Array },
+            selectedItems: { type: Array },
+            item: { type: HTMLElement },
+        },
+    })
+], UDExList);
+UDExList.define();
+export default UDExList;
+//# sourceMappingURL=List.js.map