@sapudex/web-components 0.111.0

package/dist/ListItem.js

@@ -0,0 +1,309 @@
+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 UDExListItem_1;
+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 { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExCheckbox from "./Checkbox.js";
+import UDExListItemBase from "./ListItemBase.js";
+import UDExAvatar, { AvatarShape, AvatarSize } from "./Avatar.js";
+import UDExButton from "./Button.js";
+import { ListItemSize, ListMode, AdditionalTextState, } from "./types/List.js";
+import UDExRadioButton from "./RadioButton.js";
+import { DELETE_BUTTON, EDIT_BUTTON, INDETERMINATE, SELECTED, UNSELECTED, } from "./generated/i18n/i18n-defaults.js";
+import ListItemTemplate from "./generated/templates/ListItemTemplate.lit.js";
+// Styles
+import ListItemCss from "./generated/themes/ListItem.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-list-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/ListItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UDExListItemBase
+ * @tagname udex-list-item
+ * @public
+ */
+let UDExListItem = UDExListItem_1 = class UDExListItem extends UDExListItemBase {
+    constructor() {
+        super();
+        this.deactivate = () => {
+            if (this.active) {
+                this.active = false;
+            }
+        };
+    }
+    static async onDefine() {
+        UDExListItem_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    onEnterDOM() {
+        document.addEventListener("mouseup", this.deactivate);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    onExitDOM() {
+        document.removeEventListener("mouseup", this.deactivate);
+    }
+    handleMouseDown() {
+        this.activate();
+    }
+    handleMouseUp() {
+        this.deactivate();
+    }
+    handleKeyUp(e) {
+        e.preventDefault();
+        if (isSpace(e) || isEnter(e)) {
+            this.deactivate();
+        }
+    }
+    handleKeyDown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isSpace(e) || isEnter(e)) {
+            this.activate();
+            this.handleItemClick(e);
+        }
+    }
+    handleKeyDownIcon(e) {
+        e.stopPropagation();
+    }
+    handleItemClick(e) {
+        if (this.disabled) {
+            return;
+        }
+        if (!this.indeterminate && !this.controlled) {
+            this.selected = !this.selected;
+        }
+        this.fireItemPress(e);
+    }
+    handleFocusIn() {
+        if (!this.disabled) {
+            this.focused = true;
+            this.fireEvent("item-focus", {
+                item: this,
+            });
+        }
+    }
+    handleFocusOut() {
+        if (!this.disabled) {
+            this.focused = false;
+            this.deactivate();
+        }
+    }
+    handleDeleteClick(e) {
+        if (!this.disabled) {
+            e.stopPropagation();
+            this.fireEvent("delete-press", {
+                item: this,
+            });
+        }
+    }
+    handleEditClick(e) {
+        if (!this.disabled) {
+            e.stopPropagation();
+            this.fireEvent("edit-press", {
+                item: this,
+            });
+        }
+    }
+    fireItemPress(e) {
+        if (isEnter(e)) {
+            e.preventDefault();
+        }
+        this.fireEvent("item-press", {
+            selected: this.selected,
+            item: this,
+        });
+    }
+    activate() {
+        if (!this.disabled) {
+            this.active = true;
+        }
+    }
+    get className() {
+        const isGroupChild = this?.parentElement;
+        const className = "udex-list__item";
+        const controlledClassName = this.controlled ? `${className}_controlled` : "";
+        const groupClassName = isGroupChild?.isGroup ? `${className}_group` : "";
+        const largeSizeClassName = this.isLargeSize ? `${className}_large` : "";
+        return `${className} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`;
+    }
+    get roleItem() {
+        return this.accessibleRole.length > 0 ? this.accessibleRole : "listitem";
+    }
+    get _ariaDisabled() {
+        return this.disabled ? true : undefined;
+    }
+    get _tabIndex() {
+        if (this.disabled) {
+            return -1;
+        }
+        return 0;
+    }
+    get modeSingleContent() {
+        return this.mode === ListMode.SingleContent;
+    }
+    get modeRadioGroup() {
+        return this.mode === ListMode.RadioGroup;
+    }
+    get modeSelected() {
+        return [ListMode.SingleSelect, ListMode.MultiSelect, ListMode.RadioGroup].includes(this.mode);
+    }
+    get isLargeSize() {
+        return this.size === ListItemSize.Large;
+    }
+    get _accessibleNameRef() {
+        if (this.accessibleName) {
+            return `${this._id}-invisibleText`;
+        }
+        return `${this._id}-content`;
+    }
+    get stateAccessibleName() {
+        if (this.indeterminate) {
+            return UDExListItem_1.i18nBundle.getText(INDETERMINATE);
+        }
+        return `${this.selected ? UDExListItem_1.i18nBundle.getText(SELECTED) : UDExListItem_1.i18nBundle.getText(UNSELECTED)} `;
+    }
+    get editButtonAccessibleName() {
+        return UDExListItem_1.i18nBundle.getText(EDIT_BUTTON);
+    }
+    get deleteButtonAccessibleName() {
+        return UDExListItem_1.i18nBundle.getText(DELETE_BUTTON);
+    }
+};
+__decorate([
+    property()
+], UDExListItem.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: String })
+], UDExListItem.prototype, "flagPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExListItem.prototype, "flag", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExListItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExListItem.prototype, "focused", void 0);
+__decorate([
+    property({ type: String })
+], UDExListItem.prototype, "additionalText", void 0);
+__decorate([
+    property({ type: AdditionalTextState, defaultValue: AdditionalTextState.None })
+], UDExListItem.prototype, "additionalTextState", void 0);
+__decorate([
+    property({ type: String })
+], UDExListItem.prototype, "image", void 0);
+__decorate([
+    property({ type: String })
+], UDExListItem.prototype, "imageAlt", void 0);
+__decorate([
+    property({ type: AvatarShape, defaultValue: AvatarShape.Circle })
+], UDExListItem.prototype, "imageShape", void 0);
+__decorate([
+    property({ type: AvatarSize, defaultValue: AvatarSize.S })
+], UDExListItem.prototype, "imageSize", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExListItem.prototype, "editIcon", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExListItem.prototype, "deleteIcon", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], UDExListItem.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], UDExListItem.prototype, "accessibleRole", void 0);
+__decorate([
+    property({ type: String })
+], UDExListItem.prototype, "_additionalClassName", void 0);
+UDExListItem = UDExListItem_1 = __decorate([
+    customElement({
+        tag: "udex-list-item",
+        renderer: litRender,
+        styles: ListItemCss,
+        template: ListItemTemplate,
+        dependencies: [
+            UDExAvatar,
+            UDExButton,
+            UDExRadioButton,
+            UDExCheckbox,
+            Icon,
+        ],
+    })
+    /**
+     * Fired event when the user click on a list item.
+     *
+     * @event sap.ui.webc.web-components.UDExListItem#itemPress
+     * @public
+     */
+    ,
+    event("item-press", {
+        detail: {
+            selected: { type: Boolean },
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired event when the user focuses on a list item.
+     *
+     * @event sap.ui.webc.web-components.UDExListItem#itemFocus
+     * @public
+     */
+    ,
+    event("item-focus", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired event when the user click on the delete icon.
+     *
+     * @event sap.ui.webc.web-components.UDExListItem#deletePress
+     * @public
+     */
+    ,
+    event("delete-press", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired event when the user click on the edit icon.
+     *
+     * @event sap.ui.webc.web-components.UDExListItem#editPress
+     * @public
+     */
+    ,
+    event("edit-press", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+], UDExListItem);
+UDExListItem.define();
+export default UDExListItem;
+//# sourceMappingURL=ListItem.js.map

package/dist/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../src/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import 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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport I18nBundle, { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExCheckbox from \"./Checkbox.js\";\nimport UDExListItemBase from \"./ListItemBase.js\";\nimport UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport UDExAvatar, { AvatarShape, AvatarSize } from \"./Avatar.js\";\nimport UDExButton from \"./Button.js\";\nimport {\n  ListItemSize, ListMode, AdditionalTextState,\n} from \"./types/List.js\";\nimport UDExRadioButton from \"./RadioButton.js\";\nimport {\n  DELETE_BUTTON, EDIT_BUTTON, INDETERMINATE, SELECTED, UNSELECTED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport ListItemTemplate from \"./generated/templates/ListItemTemplate.lit.js\";\n\n// Styles\nimport ListItemCss from \"./generated/themes/ListItem.css.js\";\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-list-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/ListItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UDExListItemBase\n * @tagname udex-list-item\n * @public\n */\n\n@customElement({\n  tag: \"udex-list-item\",\n  renderer: litRender,\n  styles: ListItemCss,\n  template: ListItemTemplate,\n  dependencies: [\n    UDExAvatar,\n    UDExButton,\n    UDExRadioButton,\n    UDExCheckbox,\n    Icon,\n  ],\n})\n\n/**\n * Fired event when the user click on a list item.\n *\n * @event sap.ui.webc.web-components.UDExListItem#itemPress\n * @public\n */\n@event(\"item-press\", {\n  detail: {\n    selected: { type: Boolean },\n    item: { type: HTMLElement },\n  },\n})\n/**\n * Fired event when the user focuses on a list item.\n *\n * @event sap.ui.webc.web-components.UDExListItem#itemFocus\n * @public\n */\n@event(\"item-focus\", {\n  detail: {\n    item: { type: HTMLElement },\n  },\n})\n/**\n * Fired event when the user click on the delete icon.\n *\n * @event sap.ui.webc.web-components.UDExListItem#deletePress\n * @public\n */\n@event(\"delete-press\", {\n  detail: {\n    item: { type: HTMLElement },\n  },\n})\n/**\n * Fired event when the user click on the edit icon.\n *\n * @event sap.ui.webc.web-components.UDExListItem#editPress\n * @public\n */\n@event(\"edit-press\", {\n  detail: {\n    item: { type: HTMLElement },\n  },\n})\n\nclass UDExListItem extends UDExListItemBase {\n  /**\n   * Defines the accessible name of the item.\n   *\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  /**\n   * Defines the position for flag image.\n   *\n   * @public\n   */\n  @property({ type: String })\n    flagPosition?: string;\n\n  /**\n   * Defines the image, displayed at the start of the item.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    flag?: boolean;\n\n  /**\n   * Indicates if the item is active.\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    active!: boolean;\n\n  /**\n   * Indicates if the item is on focus\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    focused!: boolean;\n\n  /**\n   * Defines the additionalText, displayed at the end of the list item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    additionalText?: string;\n\n  /**\n   * Defines the state of the additionalText.\n   *\n   * @defaultvalue \"Circle\"\n   * @public\n   */\n  @property({ type: AdditionalTextState, defaultValue: AdditionalTextState.None })\n    additionalTextState?: `${AdditionalTextState}`;\n\n  /**\n   * Allows control over the image source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    image?: string;\n\n  /**\n   * Allows control over the alternative text of the image.\n   *\n   * @public\n   */\n  @property({ type: String })\n    imageAlt?: string;\n\n  /**\n   * Defines the shape of the image.\n   *\n   * @defaultvalue \"Circle\"\n   * @public\n   */\n  @property({ type: AvatarShape, defaultValue: AvatarShape.Circle })\n    imageShape?: `${AvatarShape}`;\n\n  /**\n   * Allows control over the size of the image.\n   *\n   * @defaultvalue \"S\"\n   * @public\n   */\n  @property({ type: AvatarSize, defaultValue: AvatarSize.S })\n    imageSize!: `${AvatarSize}`;\n\n  /**\n   * Defines the name of the edit icon, displayed in the end of the list item.\n   *\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    editIcon?: string;\n\n  /**\n   * Defines the name of the delete icon, displayed in the end of the list item.\n   *\n   * @defaultvalue \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    deleteIcon?: string;\n\n  /**\n   * Slot for list item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  /**\n  * Defines the role attribute of component\n  *\n  * @public\n  */\n  @property({ type: String })\n    accessibleRole!: string;\n\n  @property({ type: String })\n    _additionalClassName!: string;\n\n  deactivate: () => void;\n\n  static i18nBundle: I18nBundle;\n\n  constructor() {\n    super();\n\n    this.deactivate = () => {\n      if (this.active) {\n        this.active = false;\n      }\n    };\n  }\n\n  static async onDefine(): Promise<void> {\n    UDExListItem.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  onEnterDOM() {\n    document.addEventListener(\"mouseup\", this.deactivate);\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  onExitDOM() {\n    document.removeEventListener(\"mouseup\", this.deactivate);\n  }\n\n  handleMouseDown() {\n    this.activate();\n  }\n\n  handleMouseUp() {\n    this.deactivate();\n  }\n\n  handleKeyUp(e: KeyboardEvent) {\n    e.preventDefault();\n    if (isSpace(e) || isEnter(e)) {\n      this.deactivate();\n    }\n  }\n\n  handleKeyDown(e: KeyboardEvent) {\n    if (isSpace(e)) {\n      e.preventDefault();\n    }\n    if (isSpace(e) || isEnter(e)) {\n      this.activate();\n      this.handleItemClick(e);\n    }\n  }\n\n  handleKeyDownIcon(e: KeyboardEvent) {\n    e.stopPropagation();\n  }\n\n  handleItemClick(e: Event) {\n    if (this.disabled) {\n      return;\n    }\n    if (!this.indeterminate && !this.controlled) {\n      this.selected = !this.selected;\n    }\n    this.fireItemPress(e);\n  }\n\n  handleFocusIn() {\n    if (!this.disabled) {\n      this.focused = true;\n      this.fireEvent(\"item-focus\", {\n        item: this,\n      });\n    }\n  }\n\n  handleFocusOut() {\n    if (!this.disabled) {\n      this.focused = false;\n      this.deactivate();\n    }\n  }\n\n  handleDeleteClick(e: Event) {\n    if (!this.disabled) {\n      e.stopPropagation();\n      this.fireEvent(\"delete-press\", {\n        item: this,\n      });\n    }\n  }\n\n  handleEditClick(e: Event) {\n    if (!this.disabled) {\n      e.stopPropagation();\n      this.fireEvent(\"edit-press\", {\n        item: this,\n      });\n    }\n  }\n\n  fireItemPress(e: Event) {\n    if (isEnter(e as KeyboardEvent)) {\n      e.preventDefault();\n    }\n    this.fireEvent(\"item-press\", {\n      selected: this.selected,\n      item: this,\n    });\n  }\n\n  activate() {\n    if (!this.disabled) {\n      this.active = true;\n    }\n  }\n\n  get className() {\n    const isGroupChild = this?.parentElement as UDExListGroupHeaderBase;\n    const className = \"udex-list__item\";\n    const controlledClassName = this.controlled ? `${className}_controlled` : \"\";\n    const groupClassName = isGroupChild?.isGroup ? `${className}_group` : \"\";\n    const largeSizeClassName = this.isLargeSize ? `${className}_large` : \"\";\n    return `${className} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`;\n  }\n\n  get roleItem() {\n    return this.accessibleRole.length > 0 ? this.accessibleRole : \"listitem\";\n  }\n\n  get _ariaDisabled() {\n    return this.disabled ? true : undefined;\n  }\n\n  get _tabIndex() {\n    if (this.disabled) {\n      return -1;\n    }\n    return 0;\n  }\n\n  get modeSingleContent() {\n    return this.mode === ListMode.SingleContent;\n  }\n\n  get modeRadioGroup() {\n    return this.mode === ListMode.RadioGroup;\n  }\n\n  get modeSelected() {\n    return [ListMode.SingleSelect, ListMode.MultiSelect, ListMode.RadioGroup].includes(this.mode as ListMode);\n  }\n\n  get isLargeSize() {\n    return this.size === ListItemSize.Large;\n  }\n\n  get _accessibleNameRef(): string {\n    if (this.accessibleName) {\n      return `${this._id}-invisibleText`;\n    }\n\n    return `${this._id}-content`;\n  }\n\n  get stateAccessibleName(): string {\n    if (this.indeterminate) { return UDExListItem.i18nBundle.getText(INDETERMINATE); }\n    return `${this.selected ? UDExListItem.i18nBundle.getText(SELECTED) : UDExListItem.i18nBundle.getText(UNSELECTED)} `;\n  }\n\n  get editButtonAccessibleName(): string {\n    return UDExListItem.i18nBundle.getText(EDIT_BUTTON);\n  }\n\n  get deleteButtonAccessibleName(): string {\n    return UDExListItem.i18nBundle.getText(DELETE_BUTTON);\n  }\n}\n\nUDExListItem.define();\n\nexport default UDExListItem;\n"]}

package/dist/ListItemBase.d.ts

@@ -0,0 +1,92 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { ListItemSize, ListMode, ListStyleType } from "./types/List.js";
+/**
+ * @class
+ *
+ * A class to serve as a foundation
+ * for the <code>UDExListItem</code>,<code>UDExFilterMenuItem</code> and <code>UDExGroupHeaderBase</code> classes.
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExListItemBase extends UI5Element {
+    /**
+     * Defines the <code>label</code> for the item.
+     *
+     * @public
+     */
+    label: string;
+    /**
+     * Defines whether a visual separator should be rendered after the item.
+     *
+     * @default false
+     * @public
+     */
+    divider: boolean;
+    /**
+     * Defines whether <code> list item</code> is in disabled state.
+     *
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines the supportingText, displayed in the end of the item.
+     *
+     * @public
+     */
+    supportingText: string;
+    /**
+     * Defines the selected state of the item.
+     *
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Defines whether the selection of a  list is displayed as partially selected.
+     *
+     * @default false
+     * @public
+     */
+    indeterminate?: boolean;
+    /**
+     * Defines the controlled state of the item.
+     *
+     * @default false
+     * @public
+     */
+    controlled?: boolean;
+    /**
+     * Defines the mode of the item.
+     *
+     * @default "SingleSelect"
+     * @public
+     */
+    mode: `${ListMode}`;
+    /**
+     * Defines the size of the item.
+     *
+     * @defaultvalue "Standard"
+     * @public
+     */
+    size?: `${ListItemSize}`;
+    /**
+     * Defines the type of the item.
+     *
+     * @defaultvalue "None"
+     * @public
+     */
+    type: `${ListStyleType}`;
+    _icon?: string;
+    get numberOfItem(): number;
+    get isGroup(): boolean;
+    get modeRadioGroup(): boolean;
+    get modeMultiSelect(): boolean;
+    get modeMultiSelectOrRadioGroup(): boolean;
+    get typeNumber(): boolean;
+    get typeCircle(): boolean;
+    get typeIcon(): boolean;
+}
+export default UDExListItemBase;

package/dist/ListItemBase.js

@@ -0,0 +1,88 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { ListItemSize, ListMode, ListStyleType } from "./types/List.js";
+/**
+ * @class
+ *
+ * A class to serve as a foundation
+ * for the <code>UDExListItem</code>,<code>UDExFilterMenuItem</code> and <code>UDExGroupHeaderBase</code> classes.
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @public
+ */
+let UDExListItemBase = class UDExListItemBase extends UI5Element {
+    get numberOfItem() {
+        return [...this.parentNode.children].indexOf(this) + 1;
+    }
+    get isGroup() {
+        return false;
+    }
+    get modeRadioGroup() {
+        return this.mode === ListMode.RadioGroup;
+    }
+    get modeMultiSelect() {
+        return this.mode === ListMode.MultiSelect;
+    }
+    get modeMultiSelectOrRadioGroup() {
+        return this.modeMultiSelect || this.modeRadioGroup;
+    }
+    get typeNumber() {
+        return this.type === ListStyleType.Number;
+    }
+    get typeCircle() {
+        return this.type === ListStyleType.Circle;
+    }
+    get typeIcon() {
+        return this.type === ListStyleType.Icon;
+    }
+};
+__decorate([
+    property()
+], UDExListItemBase.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExListItemBase.prototype, "divider", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExListItemBase.prototype, "disabled", void 0);
+__decorate([
+    property()
+], UDExListItemBase.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExListItemBase.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExListItemBase.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExListItemBase.prototype, "controlled", void 0);
+__decorate([
+    property({ type: ListMode, defaultValue: ListMode.SingleSelect })
+], UDExListItemBase.prototype, "mode", void 0);
+__decorate([
+    property({ type: ListItemSize, defaultValue: ListItemSize.Standard })
+], UDExListItemBase.prototype, "size", void 0);
+__decorate([
+    property({ type: ListStyleType, defaultValue: ListStyleType.None })
+], UDExListItemBase.prototype, "type", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExListItemBase.prototype, "_icon", void 0);
+UDExListItemBase = __decorate([
+    customElement({
+        renderer: litRender,
+    })
+], UDExListItemBase);
+export default UDExListItemBase;
+//# sourceMappingURL=ListItemBase.js.map

package/dist/ListItemBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemBase.js","sourceRoot":"","sources":["../src/ListItemBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAExE;;;;;;;;;;GAUG;AAMH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IA2FvC,IAAI,YAAY;QACd,OAAO,CAAC,GAAG,IAAI,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,UAAU,CAAC;IAC3C,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,WAAW,CAAC;IAC5C,CAAC;IAED,IAAI,2BAA2B;QAC7B,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,cAAc,CAAC;IACrD,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,MAAM,CAAC;IAC5C,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,MAAM,CAAC;IAC5C,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI,CAAC;IAC1C,CAAC;CACF,CAAA;AAnHG;IADD,QAAQ,EAAE;+CACM;AASf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACR;AAQlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACP;AAQnB;IADD,QAAQ,EAAE;wDACe;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACP;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACF;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACL;AASrB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC,YAAY,EAAE,CAAC;8CAC3C;AASrB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;8CAC3C;AASzB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,CAAC,IAAI,EAAE,CAAC;8CACxC;AAG1B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;+CAC5B;AAzFb,gBAAgB;IAJrB,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;KACpB,CAAC;GAEI,gBAAgB,CA0HrB;AAED,eAAe,gBAAgB,CAAC","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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { ListItemSize, ListMode, ListStyleType } from \"./types/List.js\";\n\n/**\n * @class\n *\n * A class to serve as a foundation\n * for the <code>UDExListItem</code>,<code>UDExFilterMenuItem</code> and <code>UDExGroupHeaderBase</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n  renderer: litRender,\n})\n\nclass UDExListItemBase extends UI5Element {\n  /**\n   * Defines the <code>label</code> for the item.\n   *\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines whether a visual separator should be rendered after the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    divider!: boolean;\n\n  /**\n   * Defines whether <code> list item</code> is in disabled state.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the supportingText, displayed in the end of the item.\n   *\n   * @public\n   */\n  @property()\n    supportingText!: string;\n\n  /**\n   * Defines the selected state of the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines whether the selection of a  list is displayed as partially selected.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    indeterminate?: boolean;\n\n  /**\n   * Defines the controlled state of the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    controlled?: boolean;\n\n  /**\n   * Defines the mode of the item.\n   *\n   * @default \"SingleSelect\"\n   * @public\n   */\n  @property({ type: ListMode, defaultValue: ListMode.SingleSelect })\n    mode!: `${ListMode}`;\n\n  /**\n   * Defines the size of the item.\n   *\n   * @defaultvalue \"Standard\"\n   * @public\n   */\n  @property({ type: ListItemSize, defaultValue: ListItemSize.Standard })\n    size?: `${ListItemSize}`;\n\n  /**\n   * Defines the type of the item.\n   *\n   * @defaultvalue \"None\"\n   * @public\n   */\n  @property({ type: ListStyleType, defaultValue: ListStyleType.None })\n    type!: `${ListStyleType}`;\n\n  @property({ type: String, defaultValue: \"\" })\n    _icon?: string;\n\n  get numberOfItem() {\n    return [...this.parentNode!.children].indexOf(this) + 1;\n  }\n\n  get isGroup(): boolean {\n    return false;\n  }\n\n  get modeRadioGroup() {\n    return this.mode === ListMode.RadioGroup;\n  }\n\n  get modeMultiSelect() {\n    return this.mode === ListMode.MultiSelect;\n  }\n\n  get modeMultiSelectOrRadioGroup() {\n    return this.modeMultiSelect || this.modeRadioGroup;\n  }\n\n  get typeNumber() {\n    return this.type === ListStyleType.Number;\n  }\n\n  get typeCircle() {\n    return this.type === ListStyleType.Circle;\n  }\n\n  get typeIcon() {\n    return this.type === ListStyleType.Icon;\n  }\n}\n\nexport default UDExListItemBase;\n"]}

package/dist/ListSelectAll.d.ts

@@ -0,0 +1,33 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
+import { ListMode } from "./types/List.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex--list-select-all</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/ListSelectAll.js";</code>
+ *
+ * @constructor
+ * @extends UDExListGroupHeaderBase
+ * @public
+ */
+declare class UDExListSelectAll extends UDExListGroupHeaderBase {
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    handleSelectAllPress(): void;
+    handleSelectAllGroupItemsPress(): void;
+    handleKeyDownPress(e: KeyboardEvent): void;
+    get isSelectAllHeader(): boolean;
+    get multiselectMode(): ListMode;
+    get selectAllLabel(): string;
+    get additionalClassName(): string;
+    get groupListClassName(): string;
+}
+export default UDExListSelectAll;

package/dist/ListSelectAll.js

@@ -0,0 +1,96 @@
+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 UDExListSelectAll_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
+import { ListMode } from "./types/List.js";
+import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
+import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit";
+// Styles
+import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex--list-select-all</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/ListSelectAll.js";</code>
+ *
+ * @constructor
+ * @extends UDExListGroupHeaderBase
+ * @public
+ */
+let UDExListSelectAll = UDExListSelectAll_1 = class UDExListSelectAll extends UDExListGroupHeaderBase {
+    static async onDefine() {
+        UDExListSelectAll_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    handleSelectAllPress() {
+        if (!this.controlled) {
+            this.handleSelectionGroupState();
+        }
+        this.fireEvent("select-all", {
+            item: this,
+        });
+    }
+    handleSelectAllGroupItemsPress() {
+        if (!this.controlled) {
+            this.handleHeaderState();
+        }
+    }
+    handleKeyDownPress(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isSpace(e) || isEnter(e)) {
+            this.handleSelectAllPress();
+        }
+    }
+    get isSelectAllHeader() {
+        return true;
+    }
+    get multiselectMode() {
+        return ListMode.MultiSelect;
+    }
+    get selectAllLabel() {
+        const hasLabel = this.label !== "undefined" && this.label?.length > 0;
+        return hasLabel ? this.label : UDExListSelectAll_1.i18nBundle.getText(SELECT_ALL);
+    }
+    get additionalClassName() {
+        const selectAllClassName = "udex-list__header-select-all";
+        return `${selectAllClassName} ${this._additionalClassName}`;
+    }
+    get groupListClassName() {
+        const className = "udex-list__group-list";
+        const selectAllClassName = "udex--list__header-select-all";
+        return `${className} ${this._additionalClassName} ${selectAllClassName}`;
+    }
+};
+UDExListSelectAll = UDExListSelectAll_1 = __decorate([
+    customElement({
+        tag: "udex-list-select-all",
+        renderer: litRender,
+        styles: ListGroupHeaderCss,
+        template: ListSelectAllTemplate,
+    }),
+    event("select-all", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+], UDExListSelectAll);
+UDExListSelectAll.define();
+export default UDExListSelectAll;
+//# sourceMappingURL=ListSelectAll.js.map