@ui5/webcomponents 0.0.0-dff5837d7 → 0.0.0-e03cd01f3

package/dist/TreeItemBase.js

@@ -0,0 +1,285 @@
+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 TreeItemBase_1;
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import ListItem from "./ListItem.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import { TREE_ITEM_ARIA_LABEL, TREE_ITEM_EXPAND_NODE, TREE_ITEM_COLLAPSE_NODE, } from "./generated/i18n/i18n-defaults.js";
+// Template
+import TreeItemBaseTemplate from "./TreeItemBaseTemplate.js";
+// Styles
+import treeItemCss from "./generated/themes/TreeItem.css.js";
+/**
+ * A class to serve as a foundation
+ * for the `TreeItem` and `TreeItemCustom` classes.
+ * @abstract
+ * @constructor
+ * @extends ListItem
+ * @public
+ */
+let TreeItemBase = TreeItemBase_1 = class TreeItemBase extends ListItem {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.
+         * @protected
+         * @default 1
+         */
+        this.level = 1;
+        /**
+         * Defines whether the tree list item should display an expand/collapse button.
+         * @default false
+         * @protected
+         */
+        this.showToggleButton = false;
+        /**
+         * Defines whether the tree list item will show a collapse or expand icon inside its toggle button.
+         * @default false
+         * @public
+         */
+        this.expanded = false;
+        /**
+         * Defines whether the item is movable.
+         * @default false
+         * @public
+         * @since 2.0.0
+         */
+        this.movable = false;
+        /**
+         * Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
+         *
+         * **Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.
+         * Set this to `true` for nodes you intend to load lazily, when the user clicks the expand button.
+         * It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.
+         * @default false
+         * @public
+         */
+        this.hasChildren = false;
+        /**
+         * Defines the state of the `additionalText`.
+         *
+         * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`.
+         * @default "None"
+         * @public
+         * @since 1.0.0-rc.15
+         */
+        this.additionalTextState = "None";
+        /**
+         * @private
+         * @since 1.0.0-rc.11
+         */
+        this.forcedSetsize = 1;
+        /**
+         * @private
+         * @since 1.0.0-rc.11
+         */
+        this.forcedPosinset = 1;
+        /**
+         * Defines if the item should be collapsible or not.
+         * @private
+         * @default false
+         * @since 1.10.0
+         */
+        this._fixed = false;
+        /**
+         * @private
+         */
+        this._hasImage = false;
+    }
+    onBeforeRendering() {
+        this.showToggleButton = this.requiresToggleButton;
+        this._hasImage = this.hasImage;
+    }
+    get classes() {
+        const allClasses = super.classes;
+        allClasses.main["ui5-li-root-tree"] = true;
+        return allClasses;
+    }
+    get styles() {
+        return {
+            preContent: {
+                "padding-inline-start": `calc(var(${getScopedVarName("--_ui5-tree-indent-step")}) * ${this.effectiveLevel})`,
+            },
+        };
+    }
+    get requiresToggleButton() {
+        return !this._fixed ? (this.hasChildren || this.items.length > 0) : false;
+    }
+    get effectiveLevel() {
+        return this.level - 1;
+    }
+    get hasParent() {
+        return this.level > 1;
+    }
+    get hasImage() {
+        return !!this.image.length;
+    }
+    get _toggleIconName() {
+        return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow";
+    }
+    get _ariaLabel() {
+        return TreeItemBase_1.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
+    }
+    get _accInfo() {
+        const accInfoSettings = {
+            role: "treeitem",
+            ariaExpanded: this.showToggleButton ? this.expanded : undefined,
+            ariaLevel: this.level,
+            posinset: this.forcedPosinset,
+            setsize: this.forcedSetsize,
+            ariaSelectedText: this.ariaSelectedText,
+            listItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined,
+            ariaOwns: this.expanded ? `${this._id}-subtree` : undefined,
+            ariaHaspopup: this.accessibilityAttributes.hasPopup,
+        };
+        return { ...super._accInfo, ...accInfoSettings };
+    }
+    /**
+     * Used to duck-type TreeItem elements without using instanceof
+     * @default true
+     * @protected
+     */
+    get isTreeItem() {
+        return true;
+    }
+    /**
+     * Call this method to manually switch the `expanded` state of a tree item.
+     * @public
+     */
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    _toggleClick(e) {
+        e.stopPropagation();
+        this.fireDecoratorEvent("toggle", { item: this });
+    }
+    _onkeydown(e) {
+        super._onkeydown(e);
+        if (!this._fixed && this.showToggleButton && isRight(e)) {
+            if (!this.expanded) {
+                this.fireDecoratorEvent("toggle", { item: this });
+            }
+            else {
+                this.fireDecoratorEvent("step-in", { item: this });
+            }
+        }
+        if (!this._fixed && isLeft(e)) {
+            if (this.expanded) {
+                this.fireDecoratorEvent("toggle", { item: this });
+            }
+            else if (this.hasParent) {
+                this.fireDecoratorEvent("step-out", { item: this });
+            }
+        }
+    }
+    get iconAccessibleName() {
+        return this.expanded ? TreeItemBase_1.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeItemBase_1.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
+    }
+};
+__decorate([
+    property({ type: Number })
+], TreeItemBase.prototype, "level", void 0);
+__decorate([
+    property()
+], TreeItemBase.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "showToggleButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "movable", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "hasChildren", void 0);
+__decorate([
+    property()
+], TreeItemBase.prototype, "additionalTextState", void 0);
+__decorate([
+    property()
+], TreeItemBase.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Number, noAttribute: true })
+], TreeItemBase.prototype, "forcedSetsize", void 0);
+__decorate([
+    property({ type: Number, noAttribute: true })
+], TreeItemBase.prototype, "forcedPosinset", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "_fixed", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "_hasImage", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        invalidateOnChildChange: {
+            properties: false,
+            slots: ["default"],
+        },
+        "default": true,
+    })
+], TreeItemBase.prototype, "items", void 0);
+__decorate([
+    slot()
+], TreeItemBase.prototype, "image", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], TreeItemBase, "i18nBundle", void 0);
+TreeItemBase = TreeItemBase_1 = __decorate([
+    customElement({
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: TreeItemBaseTemplate,
+        styles: [
+            ListItem.styles,
+            treeItemCss,
+        ],
+    })
+    /**
+     * Fired when the user interacts with the expand/collapse button of the tree list item.
+     * @param {HTMLElement} item the toggled item.
+     * @protected
+     */
+    ,
+    event("toggle", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node.
+     * @param {HTMLElement} item the item on which right arrow was pressed.
+     * @protected
+     */
+    ,
+    event("step-in", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node.
+     * @param {HTMLElement} item the item on which left arrow was pressed.
+     * @protected
+     */
+    ,
+    event("step-out", {
+        bubbles: true,
+    })
+], TreeItemBase);
+export default TreeItemBase;
+//# sourceMappingURL=TreeItemBase.js.map

package/dist/TreeItemBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItemBase.js","sourceRoot":"","sources":["../src/TreeItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { isLeft, isRight } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport ListItem from \"./ListItem.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport {\n\tTREE_ITEM_ARIA_LABEL,\n\tTREE_ITEM_EXPAND_NODE,\n\tTREE_ITEM_COLLAPSE_NODE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport TreeItemBaseTemplate from \"./TreeItemBaseTemplate.js\";\n\n// Styles\nimport treeItemCss from \"./generated/themes/TreeItem.css.js\";\n\ntype TreeItemBaseEventDetail = {\n\titem: TreeItemBase,\n}\ntype TreeItemBaseToggleEventDetail = TreeItemBaseEventDetail;\ntype TreeItemBaseStepInEventDetail = TreeItemBaseEventDetail;\ntype TreeItemBaseStepOutEventDetail = TreeItemBaseEventDetail;\n\n/**\n * A class to serve as a foundation\n * for the `TreeItem` and `TreeItemCustom` classes.\n * @abstract\n * @constructor\n * @extends ListItem\n * @public\n */\n@customElement({\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TreeItemBaseTemplate,\n\tstyles: [\n\t\tListItem.styles,\n\t\ttreeItemCss,\n\t],\n})\n/**\n * Fired when the user interacts with the expand/collapse button of the tree list item.\n * @param {HTMLElement} item the toggled item.\n * @protected\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node.\n * @param {HTMLElement} item the item on which right arrow was pressed.\n * @protected\n */\n@event(\"step-in\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node.\n * @param {HTMLElement} item the item on which left arrow was pressed.\n * @protected\n */\n@event(\"step-out\", {\n\tbubbles: true,\n})\nclass TreeItemBase extends ListItem {\n\teventDetails!: ListItem[\"eventDetails\"] & {\n\t\ttoggle: TreeItemBaseToggleEventDetail;\n\t\t\"step-in\": TreeItemBaseStepInEventDetail;\n\t\t\"step-out\": TreeItemBaseStepOutEventDetail;\n\t}\n\t/**\n\t * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.\n\t * @protected\n\t * @default 1\n\t */\n\t@property({ type: Number })\n\tlevel = 1;\n\n\t/**\n\t * If set, an icon will be displayed before the text of the tree list item.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines whether the tree list item should display an expand/collapse button.\n\t * @default false\n\t * @protected\n\t */\n\t@property({ type: Boolean })\n\tshowToggleButton = false;\n\n\t/**\n\t * Defines whether the tree list item will show a collapse or expand icon inside its toggle button.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\texpanded = false;\n\n\t/**\n\t * Defines whether the item is movable.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tmovable = false;\n\n\t/**\n\t* Defines whether the selection of a tree node is displayed as partially selected.\n\t*\n\t* **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\n\t* interaction, meaning that the resulting visual state depends on the values of the `indeterminate`\n\t* and `selected` properties:\n\t*\n\t* -  If a tree node has both `selected` and `indeterminate` set to `true`, it is displayed as partially selected.\n\t* -  If a tree node has `selected` set to `true` and `indeterminate` set to `false`, it is displayed as selected.\n\t* -  If a tree node has `selected` set to `false`, it is displayed as not selected regardless of the value of the `indeterminate` property.\n\t*\n\t* **Note:** This property takes effect only when the `ui5-tree` is in `Multiple` mode.\n\t* @default false\n\t* @public\n\t* @since 1.1.0\n\t*/\n\t@property({ type: Boolean })\n\tdeclare indeterminate: boolean;\n\n\t/**\n\t * Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\n\t *\n\t * **Note:** This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\n\t * Set this to `true` for nodes you intend to load lazily, when the user clicks the expand button.\n\t * It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thasChildren = false;\n\n\t/**\n\t * Defines the state of the `additionalText`.\n\t *\n\t * Available options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.\n\t * @default \"None\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tadditionalTextState: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines the accessible name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.8.0\n\t */\n\t@property()\n\tdeclare accessibleName?: string;\n\n\t/**\n\t * @private\n\t * @since 1.0.0-rc.11\n\t */\n\t@property({ type: Number, noAttribute: true })\n\tforcedSetsize = 1;\n\n\t/**\n\t * @private\n\t * @since 1.0.0-rc.11\n\t */\n\t@property({ type: Number, noAttribute: true })\n\tforcedPosinset = 1;\n\n\t/**\n\t * Defines if the item should be collapsible or not.\n\t * @private\n\t * @default false\n\t * @since 1.10.0\n\t */\n\t@property({ type: Boolean })\n\t_fixed = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasImage = false;\n\n\t/**\n\t * Defines the items of the component.\n\t *\n\t * **Note:** Use `ui5-tree-item` or `ui5-tree-item-custom`\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: false,\n\t\t\tslots: [\"default\"],\n\t\t},\n\t\t\"default\": true,\n\t})\n\titems!: Array<TreeItemBase>;\n\n\t/**\n\t * **Note:** While the slot allows option for setting custom avatar, to match the\n\t * design guidelines, please use the `ui5-avatar` with size XS.\n\t *\n\t * **Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n\t * `ui5-tree-item` should be customized in order to fit.\n\t * @since 2.10.0\n\t * @public\n\t */\n\t@slot()\n\timage!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis.showToggleButton = this.requiresToggleButton;\n\t\tthis._hasImage = this.hasImage;\n\t}\n\n\tget classes(): ClassMap {\n\t\tconst allClasses = super.classes;\n\t\tallClasses.main[\"ui5-li-root-tree\"] = true;\n\t\treturn allClasses;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tpreContent: {\n\t\t\t\t\"padding-inline-start\": `calc(var(${getScopedVarName(\"--_ui5-tree-indent-step\")}) * ${this.effectiveLevel})`,\n\t\t\t},\n\t\t};\n\t}\n\n\tget requiresToggleButton() {\n\t\treturn !this._fixed ? (this.hasChildren || this.items.length > 0) : false;\n\t}\n\n\tget effectiveLevel() {\n\t\treturn this.level - 1;\n\t}\n\n\tget hasParent() {\n\t\treturn this.level > 1;\n\t}\n\n\tget hasImage(): boolean {\n\t\treturn !!this.image.length;\n\t}\n\n\tget _toggleIconName() {\n\t\treturn this.expanded ? \"navigation-down-arrow\" : \"navigation-right-arrow\";\n\t}\n\n\tget _ariaLabel() {\n\t\treturn TreeItemBase.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);\n\t}\n\n\tget _accInfo() {\n\t\tconst accInfoSettings = {\n\t\t\trole: \"treeitem\" as const,\n\t\t\tariaExpanded: this.showToggleButton ? this.expanded : undefined,\n\t\t\tariaLevel: this.level,\n\t\t\tposinset: this.forcedPosinset,\n\t\t\tsetsize: this.forcedSetsize,\n\t\t\tariaSelectedText: this.ariaSelectedText,\n\t\t\tlistItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined,\n\t\t\tariaOwns: this.expanded ? `${this._id}-subtree` : undefined,\n\t\t\tariaHaspopup: this.accessibilityAttributes.hasPopup,\n\t\t};\n\n\t\treturn { ...super._accInfo, ...accInfoSettings };\n\t}\n\n\t/**\n\t * Used to duck-type TreeItem elements without using instanceof\n\t * @default true\n\t * @protected\n\t */\n\tget isTreeItem(): boolean {\n\t\treturn true;\n\t}\n\n\t/**\n\t * Call this method to manually switch the `expanded` state of a tree item.\n\t * @public\n\t */\n\ttoggle(): void {\n\t\tthis.expanded = !this.expanded;\n\t}\n\n\t_toggleClick(e: MouseEvent | KeyboardEvent) {\n\t\te.stopPropagation();\n\t\tthis.fireDecoratorEvent(\"toggle\", { item: this });\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\n\t\tif (!this._fixed && this.showToggleButton && isRight(e)) {\n\t\t\tif (!this.expanded) {\n\t\t\t\tthis.fireDecoratorEvent(\"toggle\", { item: this });\n\t\t\t} else {\n\t\t\t\tthis.fireDecoratorEvent(\"step-in\", { item: this });\n\t\t\t}\n\t\t}\n\n\t\tif (!this._fixed && isLeft(e)) {\n\t\t\tif (this.expanded) {\n\t\t\t\tthis.fireDecoratorEvent(\"toggle\", { item: this });\n\t\t\t} else if (this.hasParent) {\n\t\t\t\tthis.fireDecoratorEvent(\"step-out\", { item: this });\n\t\t\t}\n\t\t}\n\t}\n\n\tget iconAccessibleName(): string {\n\t\treturn this.expanded ? TreeItemBase.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeItemBase.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);\n\t}\n}\n\nexport default TreeItemBase;\nexport type {\n\tTreeItemBaseToggleEventDetail,\n\tTreeItemBaseStepInEventDetail,\n\tTreeItemBaseStepOutEventDetail,\n};\n"]}

package/dist/TreeItemBaseTemplate.d.ts

@@ -0,0 +1,3 @@
+import type TreeItemBase from "./TreeItemBase.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+export default function TreeItemBaseTemplate(this: TreeItemBase, hooks?: Partial<ListItemHooks>): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TreeItemBaseTemplate.js

@@ -0,0 +1,36 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import ListItemTemplate from "./ListItemTemplate.js";
+import Icon from "./Icon.js";
+import navigationDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import navigatioRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+const predefinedHooks = {
+    listItemPreContent,
+    listItemContent,
+    imageBegin,
+    iconBegin,
+};
+export default function TreeItemBaseTemplate(hooks) {
+    const currentHooks = { ...predefinedHooks, ...hooks };
+    return _jsxs("div", { children: [ListItemTemplate.call(this, currentHooks), listItemPostContent.call(this)] });
+}
+function listItemPreContent() {
+    return (_jsx("div", { class: "ui5-li-tree-toggle-box", style: this.styles.preContent, children: this.showToggleButton &&
+            _jsx(Icon, { part: "toggle-icon", class: "ui5-li-tree-toggle-icon", name: this.expanded ? navigationDownArrow : navigatioRightArrow, showTooltip: true, accessibleName: this.iconAccessibleName, 
+                // @ts-expect-error
+                onClick: this._toggleClick }) }));
+}
+function listItemPostContent() {
+    if (this.expanded) {
+        return (_jsx("ul", { role: "group", id: `${this._id}-subtree`, class: "ui5-tree-li-subtree", children: _jsx("slot", {}) }));
+    }
+}
+function listItemContent() { }
+function imageBegin() {
+    if (this.hasImage) {
+        return _jsx("div", { class: "ui5-tree-item-image", children: _jsx("slot", { name: "image" }) });
+    }
+}
+function iconBegin() {
+    return this.icon ? _jsx(Icon, { part: "icon", name: this.icon, class: "ui5-li-icon" }) : _jsx(_Fragment, {});
+}
+//# sourceMappingURL=TreeItemBaseTemplate.js.map

package/dist/TreeItemBaseTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItemBaseTemplate.js","sourceRoot":"","sources":["../src/TreeItemBaseTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,mBAAmB,MAAM,wDAAwD,CAAC;AACzF,OAAO,mBAAmB,MAAM,yDAAyD,CAAC;AAG1F,MAAM,eAAe,GAA2B;IAC/C,kBAAkB;IAClB,eAAe;IACf,UAAU;IACV,SAAS;CACT,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAqB,KAA8B;IAC9F,MAAM,YAAY,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAC;IAEtD,OAAO,0BAEL,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,EAGzC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,IAC1B,CAAC;AACR,CAAC;AAED,SAAS,kBAAkB;IAC1B,OAAO,CACN,cAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,YAC/D,IAAI,CAAC,gBAAgB;YACrB,KAAC,IAAI,IACJ,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,EAC/D,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,kBAAkB;gBACvC,mBAAmB;gBACnB,OAAO,EAAE,IAAI,CAAC,YAAY,GACzB,GAEG,CAAC,CAAC;AACX,CAAC;AAED,SAAS,mBAAmB;IAC3B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,CACN,aACC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EACzB,KAAK,EAAC,qBAAqB,YAC3B,gBAAa,GACT,CAAC,CAAC;IACT,CAAC;AACF,CAAC;AAED,SAAS,eAAe,KAAK,CAAC;AAC9B,SAAS,UAAU;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,cAAK,KAAK,EAAC,qBAAqB,YACtC,eAAM,IAAI,EAAC,OAAO,GAAQ,GACrB,CAAC;IACR,CAAC;AACF,CAAC;AACD,SAAS,SAAS;IACjB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,GAAG,CAAC,CAAC,CAAC,mBAAK,CAAC;AACtF,CAAC","sourcesContent":["import type TreeItemBase from \"./TreeItemBase.js\";\nimport ListItemTemplate from \"./ListItemTemplate.js\";\nimport Icon from \"./Icon.js\";\nimport navigationDownArrow from \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport navigatioRightArrow from \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport type { ListItemHooks } from \"./ListItemTemplate.js\";\n\nconst predefinedHooks: Partial<ListItemHooks> = {\n\tlistItemPreContent,\n\tlistItemContent,\n\timageBegin,\n\ticonBegin,\n};\n\nexport default function TreeItemBaseTemplate(this: TreeItemBase, hooks?: Partial<ListItemHooks>) {\n\tconst currentHooks = { ...predefinedHooks, ...hooks };\n\n\treturn <div>\n\t\t{\n\t\t\tListItemTemplate.call(this, currentHooks)\n\t\t}\n\n\t\t{listItemPostContent.call(this)}\n\t</div>;\n}\n\nfunction listItemPreContent(this: TreeItemBase) {\n\treturn (\n\t\t<div class=\"ui5-li-tree-toggle-box\" style={this.styles.preContent}>\n\t\t\t{this.showToggleButton &&\n\t\t\t\t<Icon\n\t\t\t\t\tpart=\"toggle-icon\"\n\t\t\t\t\tclass=\"ui5-li-tree-toggle-icon\"\n\t\t\t\t\tname={this.expanded ? navigationDownArrow : navigatioRightArrow}\n\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\taccessibleName={this.iconAccessibleName}\n\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\tonClick={this._toggleClick}\n\t\t\t\t/>\n\t\t\t}\n\t\t</div >);\n}\n\nfunction listItemPostContent(this: TreeItemBase) {\n\tif (this.expanded) {\n\t\treturn (\n\t\t\t<ul\n\t\t\t\trole=\"group\"\n\t\t\t\tid={`${this._id}-subtree`}\n\t\t\t\tclass=\"ui5-tree-li-subtree\">\n\t\t\t\t<slot></slot>\n\t\t\t</ul>);\n\t}\n}\n\nfunction listItemContent() { }\nfunction imageBegin(this: TreeItemBase) {\n\tif (this.hasImage) {\n\t\treturn <div class=\"ui5-tree-item-image\">\n\t\t\t<slot name=\"image\"></slot>\n\t\t</div>;\n\t}\n}\nfunction iconBegin(this: TreeItemBase) {\n\treturn this.icon ? <Icon part=\"icon\" name={this.icon} class=\"ui5-li-icon\" /> : <></>;\n}\n"]}

package/dist/TreeItemCustom.d.ts

@@ -0,0 +1,44 @@
+import TreeItemBase from "./TreeItemBase.js";
+/**
+ * @class
+ * The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.
+ *
+ * This is the item to use inside a `ui5-tree`.
+ * You can represent an arbitrary tree structure by recursively nesting tree items.
+ *
+ * You can use this item to put any custom content inside the tree item.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/TreeItemCustom.js";`
+ * @csspart title - Used to style the title of the tree list item
+ * @csspart additionalText - Used to style the additionalText of the tree list item
+ * @csspart icon - Used to style the icon of the tree list item
+ * @constructor
+ * @extends TreeItemBase
+ * @public
+ * @since 1.9.2
+ */
+declare class TreeItemCustom extends TreeItemBase {
+    /**
+     * Defines whether the tree list item should display the selection element.
+     * @public
+     * @default false
+     */
+    hideSelectionElement: boolean;
+    /**
+     * Defines the content of the `ui5-tree-item`.
+     * @public
+     */
+    content: Array<HTMLElement>;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    /**
+     * @override
+     */
+    get placeSelectionElementBefore(): boolean;
+    /**
+     * @override
+     */
+    get placeSelectionElementAfter(): boolean;
+}
+export default TreeItemCustom;

package/dist/TreeItemCustom.js

@@ -0,0 +1,95 @@
+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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import { isTabNext, isTabPrevious, isF2, isDown, } from "@ui5/webcomponents-base/dist/Keys.js";
+import TreeItemBase from "./TreeItemBase.js";
+// Template
+import TreeItemCustomTemplate from "./TreeItemCustomTemplate.js";
+// Styles
+import treeItemCustomCss from "./generated/themes/TreeItem.css.js";
+/**
+ * @class
+ * The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.
+ *
+ * This is the item to use inside a `ui5-tree`.
+ * You can represent an arbitrary tree structure by recursively nesting tree items.
+ *
+ * You can use this item to put any custom content inside the tree item.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/TreeItemCustom.js";`
+ * @csspart title - Used to style the title of the tree list item
+ * @csspart additionalText - Used to style the additionalText of the tree list item
+ * @csspart icon - Used to style the icon of the tree list item
+ * @constructor
+ * @extends TreeItemBase
+ * @public
+ * @since 1.9.2
+ */
+let TreeItemCustom = class TreeItemCustom extends TreeItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the tree list item should display the selection element.
+         * @public
+         * @default false
+         */
+        this.hideSelectionElement = false;
+    }
+    _onkeydown(e) {
+        if (isDown(e) && this.content?.some(el => el.contains(e.target))) {
+            e.stopPropagation();
+            return;
+        }
+        const isTab = isTabNext(e) || isTabPrevious(e);
+        const isFocused = this.matches(":focus");
+        if (!isTab && !isFocused && !isF2(e)) {
+            return;
+        }
+        super._onkeydown(e);
+    }
+    _onkeyup(e) {
+        const isTab = isTabNext(e) || isTabPrevious(e);
+        const isFocused = this.matches(":focus");
+        if (!isTab && !isFocused && !isF2(e)) {
+            return;
+        }
+        super._onkeyup(e);
+    }
+    /**
+     * @override
+     */
+    get placeSelectionElementBefore() {
+        return !this.hideSelectionElement && super.placeSelectionElementBefore;
+    }
+    /**
+     * @override
+     */
+    get placeSelectionElementAfter() {
+        return !this.hideSelectionElement && super.placeSelectionElementAfter;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], TreeItemCustom.prototype, "hideSelectionElement", void 0);
+__decorate([
+    slot()
+], TreeItemCustom.prototype, "content", void 0);
+TreeItemCustom = __decorate([
+    customElement({
+        renderer: jsxRenderer,
+        tag: "ui5-tree-item-custom",
+        template: TreeItemCustomTemplate,
+        styles: [TreeItemBase.styles, treeItemCustomCss],
+    })
+], TreeItemCustom);
+TreeItemCustom.define();
+export default TreeItemCustom;
+//# sourceMappingURL=TreeItemCustom.js.map

package/dist/TreeItemCustom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItemCustom.js","sourceRoot":"","sources":["../src/TreeItemCustom.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EACN,SAAS,EACT,aAAa,EACb,IAAI,EACJ,MAAM,GACN,MAAM,sCAAsC,CAAC;AAC9C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,WAAW;AACX,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AAEjE,SAAS;AACT,OAAO,iBAAiB,MAAM,oCAAoC,CAAC;AAEnE;;;;;;;;;;;;;;;;;;GAkBG;AAOH,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;IAAzC;;QACC;;;;WAIG;QAEH,yBAAoB,GAAG,KAAK,CAAC;IAgD9B,CAAC;IAvCA,UAAU,CAAC,CAAgB;QAC1B,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,CAAC,EAAE,CAAC;YAC1E,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACR,CAAC;QACD,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;QAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAEzC,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACtC,OAAO;QACR,CAAC;QAED,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;QAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAEzC,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACtC,OAAO;QACR,CAAC;QAED,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;IAED;;OAEG;IACH,IAAI,2BAA2B;QAC9B,OAAO,CAAC,IAAI,CAAC,oBAAoB,IAAI,KAAK,CAAC,2BAA2B,CAAC;IACxE,CAAC;IAED;;OAEG;IACH,IAAI,0BAA0B;QAC7B,OAAO,CAAC,IAAI,CAAC,oBAAoB,IAAI,KAAK,CAAC,0BAA0B,CAAC;IACvE,CAAC;CACD,CAAA;AAhDA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACC;AAO7B;IADC,IAAI,EAAE;+CACsB;AAdxB,cAAc;IANnB,aAAa,CAAC;QACd,QAAQ,EAAE,WAAW;QACrB,GAAG,EAAE,sBAAsB;QAC3B,QAAQ,EAAE,sBAAsB;QAChC,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,iBAAiB,CAAC;KAChD,CAAC;GACI,cAAc,CAuDnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport {\n\tisTabNext,\n\tisTabPrevious,\n\tisF2,\n\tisDown,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport TreeItemBase from \"./TreeItemBase.js\";\n\n// Template\nimport TreeItemCustomTemplate from \"./TreeItemCustomTemplate.js\";\n\n// Styles\nimport treeItemCustomCss from \"./generated/themes/TreeItem.css.js\";\n\n/**\n * @class\n * The `ui5-tree-item-custom` represents a node in a tree structure, shown as a `ui5-list`.\n *\n * This is the item to use inside a `ui5-tree`.\n * You can represent an arbitrary tree structure by recursively nesting tree items.\n *\n * You can use this item to put any custom content inside the tree item.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/TreeItemCustom.js\";`\n * @csspart title - Used to style the title of the tree list item\n * @csspart additionalText - Used to style the additionalText of the tree list item\n * @csspart icon - Used to style the icon of the tree list item\n * @constructor\n * @extends TreeItemBase\n * @public\n * @since 1.9.2\n */\n@customElement({\n\trenderer: jsxRenderer,\n\ttag: \"ui5-tree-item-custom\",\n\ttemplate: TreeItemCustomTemplate,\n\tstyles: [TreeItemBase.styles, treeItemCustomCss],\n})\nclass TreeItemCustom extends TreeItemBase {\n\t/**\n\t * Defines whether the tree list item should display the selection element.\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\thideSelectionElement = false;\n\n\t/**\n\t * Defines the content of the `ui5-tree-item`.\n\t * @public\n\t */\n\t@slot()\n\tcontent!: Array<HTMLElement>;\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isDown(e) && this.content?.some(el => el.contains(e.target as Node))) {\n\t\t\te.stopPropagation();\n\t\t\treturn;\n\t\t}\n\t\tconst isTab = isTabNext(e) || isTabPrevious(e);\n\t\tconst isFocused = this.matches(\":focus\");\n\n\t\tif (!isTab && !isFocused && !isF2(e)) {\n\t\t\treturn;\n\t\t}\n\n\t\tsuper._onkeydown(e);\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tconst isTab = isTabNext(e) || isTabPrevious(e);\n\t\tconst isFocused = this.matches(\":focus\");\n\n\t\tif (!isTab && !isFocused && !isF2(e)) {\n\t\t\treturn;\n\t\t}\n\n\t\tsuper._onkeyup(e);\n\t}\n\n\t/**\n\t * @override\n\t */\n\tget placeSelectionElementBefore() {\n\t\treturn !this.hideSelectionElement && super.placeSelectionElementBefore;\n\t}\n\n\t/**\n\t * @override\n\t */\n\tget placeSelectionElementAfter() {\n\t\treturn !this.hideSelectionElement && super.placeSelectionElementAfter;\n\t}\n}\n\nTreeItemCustom.define();\n\nexport default TreeItemCustom;\n"]}

package/dist/TreeItemCustomTemplate.d.ts

@@ -0,0 +1,3 @@
+import type TreeItemCustom from "./TreeItemCustom.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+export default function TreeItemCustomTemplate(this: TreeItemCustom, hooks?: Partial<ListItemHooks>): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TreeItemCustomTemplate.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import TreeItemBaseTemplate from "./TreeItemBaseTemplate.js";
+const predefinedHooks = {
+    listItemContent,
+};
+export default function TreeItemCustomTemplate(hooks) {
+    const currentHooks = { ...predefinedHooks, ...hooks };
+    return TreeItemBaseTemplate.call(this, currentHooks);
+}
+function listItemContent() {
+    return (_jsx("div", { class: "ui5-li-tree-text-wrapper", children: _jsx("slot", { name: "content", slot: "content" }) }));
+}
+//# sourceMappingURL=TreeItemCustomTemplate.js.map

package/dist/TreeItemCustomTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItemCustomTemplate.js","sourceRoot":"","sources":["../src/TreeItemCustomTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAG7D,MAAM,eAAe,GAA2B;IAC/C,eAAe;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAuB,KAA8B;IAClG,MAAM,YAAY,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAC;IAEtD,OAAO,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AACtD,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,CACN,cAAK,KAAK,EAAC,0BAA0B,YACpC,eAAM,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,GAAQ,GACtC,CACN,CAAC;AACH,CAAC","sourcesContent":["import type TreeItemCustom from \"./TreeItemCustom.js\";\nimport TreeItemBaseTemplate from \"./TreeItemBaseTemplate.js\";\nimport type { ListItemHooks } from \"./ListItemTemplate.js\";\n\nconst predefinedHooks: Partial<ListItemHooks> = {\n\tlistItemContent,\n};\n\nexport default function TreeItemCustomTemplate(this: TreeItemCustom, hooks?: Partial<ListItemHooks>) {\n\tconst currentHooks = { ...predefinedHooks, ...hooks };\n\n\treturn TreeItemBaseTemplate.call(this, currentHooks);\n}\n\nfunction listItemContent(this: TreeItemCustom) {\n\treturn (\n\t\t<div class=\"ui5-li-tree-text-wrapper\">\n\t\t\t<slot name=\"content\" slot=\"content\"></slot>\n\t\t</div>\n\t);\n}\n"]}

package/dist/TreeItemTemplate.d.ts

@@ -0,0 +1,3 @@
+import type TreeItem from "./TreeItem.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+export default function TreeItemTemplate(this: TreeItem, hooks?: Partial<ListItemHooks>): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TreeItemTemplate.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import TreeItemBaseTemplate from "./TreeItemBaseTemplate.js";
+const predefinedHooks = {
+    listItemContent,
+};
+export default function TreeItemTemplate(hooks) {
+    const currentHooks = { ...predefinedHooks, ...hooks };
+    return TreeItemBaseTemplate.call(this, currentHooks);
+}
+function listItemContent() {
+    return _jsxs(_Fragment, { children: [_jsx("div", { class: "ui5-li-text-wrapper", children: !!this._showTitle &&
+                    _jsxs("div", { part: "title", class: "ui5-li-title", children: [" ", this.text] }) }), this.additionalText &&
+                _jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText })] });
+}
+//# sourceMappingURL=TreeItemTemplate.js.map

package/dist/TreeItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItemTemplate.js","sourceRoot":"","sources":["../src/TreeItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAG7D,MAAM,eAAe,GAA2B;IAC/C,eAAe;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAiB,KAA8B;IACtF,MAAM,YAAY,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAC;IAEtD,OAAO,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AACtD,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,8BACN,cAAK,KAAK,EAAC,qBAAqB,YAC9B,CAAC,CAAC,IAAI,CAAC,UAAU;oBACjB,eAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,cAAc,kBAAG,IAAI,CAAC,IAAI,IAAO,GAErD,EACL,IAAI,CAAC,cAAc;gBACnB,eAAM,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,wBAAwB,YACzD,IAAI,CAAC,cAAc,GACd,IAEN,CAAC;AACL,CAAC","sourcesContent":["import type TreeItem from \"./TreeItem.js\";\nimport TreeItemBaseTemplate from \"./TreeItemBaseTemplate.js\";\nimport type { ListItemHooks } from \"./ListItemTemplate.js\";\n\nconst predefinedHooks: Partial<ListItemHooks> = {\n\tlistItemContent,\n};\n\nexport default function TreeItemTemplate(this: TreeItem, hooks?: Partial<ListItemHooks>) {\n\tconst currentHooks = { ...predefinedHooks, ...hooks };\n\n\treturn TreeItemBaseTemplate.call(this, currentHooks);\n}\n\nfunction listItemContent(this: TreeItem) {\n\treturn <>\n\t\t<div class=\"ui5-li-text-wrapper\">\n\t\t\t{!!this._showTitle &&\n\t\t\t\t<div part=\"title\" class=\"ui5-li-title\"> {this.text}</div>\n\t\t\t}\n\t\t</div>\n\t\t{this.additionalText &&\n\t\t\t<span part=\"additional-text\" class=\"ui5-li-additional-text\">\n\t\t\t\t{this.additionalText}\n\t\t\t</span>\n\t\t}\n\t</>;\n}\n"]}

package/dist/TreeList.d.ts

@@ -0,0 +1,7 @@
+import List from "./List.js";
+import type TreeItemBase from "./TreeItemBase.js";
+declare class TreeList extends List {
+    getItems(includeCollapsed?: boolean): Array<TreeItemBase>;
+    getItemsForProcessing(): Array<TreeItemBase>;
+}
+export default TreeList;

package/dist/TreeList.js

@@ -0,0 +1,44 @@
+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 List from "./List.js";
+let TreeList = class TreeList extends List {
+    /*
+     * @override
+     */
+    getItems(includeCollapsed = false) {
+        const slottedItems = this.getSlottedNodes("items");
+        const flatItems = [];
+        if (!(slottedItems.length === 1 && slottedItems[0].hasAttribute("ui5-drop-indicator"))) {
+            flattenTree(slottedItems, flatItems, includeCollapsed);
+        }
+        return flatItems;
+    }
+    getItemsForProcessing() {
+        return this.getItems(true);
+    }
+};
+TreeList = __decorate([
+    customElement("ui5-tree-list")
+], TreeList);
+/*
+ * Converts a tree structure into a flat array
+ * @param {Array} treeItems
+ * @param {Array} result
+ * @param {Boolean} includeCollapsed
+ */
+const flattenTree = (items, result, includeCollapsed = false) => {
+    items.forEach(item => {
+        result.push(item);
+        if ((item.expanded || includeCollapsed) && item.items) {
+            flattenTree(item.items, result, includeCollapsed);
+        }
+    });
+};
+TreeList.define();
+export default TreeList;
+//# sourceMappingURL=TreeList.js.map

package/dist/TreeList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeList.js","sourceRoot":"","sources":["../src/TreeList.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,WAAW,CAAC;AAK7B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,IAAI;IAC1B;;OAEG;IACH,QAAQ,CAAC,gBAAgB,GAAG,KAAK;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAe,OAAO,CAAC,CAAC;QACjE,MAAM,SAAS,GAAwB,EAAE,CAAC;QAE1C,IAAI,CAAC,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC;YACxF,WAAW,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;QACxD,CAAC;QAED,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,qBAAqB;QACpB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;CACD,CAAA;AAlBK,QAAQ;IAFb,aAAa,CAAC,eAAe,CAAC;GAEzB,QAAQ,CAkBb;AAED;;;;;GAKG;AACH,MAAM,WAAW,GAAG,CAAC,KAA0B,EAAE,MAA2B,EAAE,gBAAgB,GAAG,KAAK,EAAE,EAAE;IACzG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACpB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAElB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACvD,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC;QACnD,CAAC;IACF,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport List from \"./List.js\";\nimport type TreeItemBase from \"./TreeItemBase.js\";\n\n@customElement(\"ui5-tree-list\")\n\nclass TreeList extends List {\n\t/*\n\t * @override\n\t */\n\tgetItems(includeCollapsed = false): Array<TreeItemBase> {\n\t\tconst slottedItems = this.getSlottedNodes<TreeItemBase>(\"items\");\n\t\tconst flatItems: Array<TreeItemBase> = [];\n\n\t\tif (!(slottedItems.length === 1 && slottedItems[0].hasAttribute(\"ui5-drop-indicator\"))) {\n\t\t\tflattenTree(slottedItems, flatItems, includeCollapsed);\n\t\t}\n\n\t\treturn flatItems;\n\t}\n\n\tgetItemsForProcessing(): Array<TreeItemBase> {\n\t\treturn this.getItems(true);\n\t}\n}\n\n/*\n * Converts a tree structure into a flat array\n * @param {Array} treeItems\n * @param {Array} result\n * @param {Boolean} includeCollapsed\n */\nconst flattenTree = (items: Array<TreeItemBase>, result: Array<TreeItemBase>, includeCollapsed = false) => {\n\titems.forEach(item => {\n\t\tresult.push(item);\n\n\t\tif ((item.expanded || includeCollapsed) && item.items) {\n\t\t\tflattenTree(item.items, result, includeCollapsed);\n\t\t}\n\t});\n};\n\nTreeList.define();\n\nexport default TreeList;\n"]}

package/dist/TreeTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Tree from "./Tree.js";
+export default function TreeTemplate(this: Tree): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;