@ui5/webcomponents 0.0.0-b6f02e4b3 → 0.0.0-b93bc8b37

package/dist/TreeItemBase.js

@@ -0,0 +1,248 @@
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import ListItem from "./ListItem.js";
+import Icon from "./Icon.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 "./generated/templates/TreeItemBaseTemplate.lit.js";
+// Styles
+import treeItemCss from "./generated/themes/TreeItem.css.js";
+import HasPopup from "./types/HasPopup.js";
+/**
+ * A class to serve as a foundation
+ * for the <code>TreeItem</code> and <code>TreeItemCustom</code> classes.
+ *
+ * @abstract
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TreeItemBase
+ * @extends sap.ui.webc.main.ListItem
+ * @public
+ */
+let TreeItemBase = TreeItemBase_1 = class TreeItemBase extends ListItem {
+    onBeforeRendering() {
+        this.actionable = false;
+        this.showToggleButton = this.requiresToggleButton;
+    }
+    get classes() {
+        const allClasses = super.classes;
+        allClasses.main["ui5-li-root-tree"] = true;
+        return allClasses;
+    }
+    get styles() {
+        return {
+            preContent: {
+                "padding-left": `calc(var(--_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 _toggleIconName() {
+        return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow";
+    }
+    get _showToggleButtonBeginning() {
+        return this.showToggleButton && !this._minimal && !this._toggleButtonEnd;
+    }
+    get _showToggleButtonEnd() {
+        return this.showToggleButton && !this._minimal && this._toggleButtonEnd;
+    }
+    get _ariaLabel() {
+        return this.accessibleRoleDescription ? undefined : TreeItemBase_1.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
+    }
+    get _accInfo() {
+        const accInfoSettings = {
+            role: this._minimal ? "menuitemradio" : "treeitem",
+            ariaExpanded: this.showToggleButton && !this._minimal ? this.expanded : undefined,
+            ariaLevel: this._minimal ? undefined : this.level,
+            posinset: this._posinset,
+            setsize: this._setsize,
+            ariaSelectedText: this.ariaSelectedText,
+            listItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined,
+            ariaOwns: this.expanded ? `${this._id}-subtree` : undefined,
+            ariaHaspopup: this.ariaHaspopup || undefined,
+            ariaChecked: false,
+            ariaSelected: false,
+        };
+        if (this._minimal) {
+            accInfoSettings.ariaChecked = this.selected;
+        }
+        else {
+            accInfoSettings.ariaSelected = this.selected;
+        }
+        return { ...super._accInfo, ...accInfoSettings };
+    }
+    /**
+     * Used to duck-type TreeItem elements without using instanceof
+     * @returns {boolean}
+     * @protected
+     */
+    get isTreeItem() {
+        return true;
+    }
+    /**
+     * Call this method to manually switch the <code>expanded</code> state of a tree item.
+     * @public
+     * @method
+     * @name sap.ui.webc.main.TreeItemBase#toggle
+     */
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    _toggleClick(e) {
+        e.stopPropagation();
+        this.fireEvent("toggle", { item: this });
+    }
+    _onkeydown(e) {
+        super._onkeydown(e);
+        if (!this._fixed && this.showToggleButton && isRight(e)) {
+            if (!this.expanded) {
+                this.fireEvent("toggle", { item: this });
+            }
+            else {
+                this.fireEvent("step-in", { item: this });
+            }
+        }
+        if (!this._fixed && isLeft(e)) {
+            if (this.expanded) {
+                this.fireEvent("toggle", { item: this });
+            }
+            else if (this.hasParent) {
+                this.fireEvent("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);
+    }
+    static async onDefine() {
+        [TreeItemBase_1.i18nBundle] = await Promise.all([
+            getI18nBundle("@ui5/webcomponents"),
+            super.onDefine(),
+        ]);
+    }
+};
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], 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, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "hasChildren", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], TreeItemBase.prototype, "additionalTextState", void 0);
+__decorate([
+    property()
+], TreeItemBase.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "_toggleButtonEnd", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "_minimal", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1, noAttribute: true })
+], TreeItemBase.prototype, "_setsize", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1, noAttribute: true })
+], TreeItemBase.prototype, "_posinset", void 0);
+__decorate([
+    property({ type: String, defaultValue: undefined, noAttribute: true })
+], TreeItemBase.prototype, "accessibleRoleDescription", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeItemBase.prototype, "_fixed", void 0);
+__decorate([
+    property({ type: HasPopup, noAttribute: true })
+], TreeItemBase.prototype, "ariaHaspopup", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], TreeItemBase.prototype, "items", void 0);
+TreeItemBase = TreeItemBase_1 = __decorate([
+    customElement({
+        languageAware: true,
+        template: TreeItemBaseTemplate,
+        styles: [
+            ListItem.styles,
+            treeItemCss,
+        ],
+        dependencies: [
+            ...ListItem.dependencies,
+            Icon,
+        ],
+    })
+    /**
+     * Fired when the user interacts with the expand/collapse button of the tree list item.
+     * @event
+     * @param {HTMLElement} item the toggled item.
+     * @protected
+     */
+    ,
+    event("toggle", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node.
+     *
+     * @event sap.ui.webc.main.TreeItemBase#step-in
+     * @param {HTMLElement} item the item on which right arrow was pressed.
+     * @protected
+     */
+    ,
+    event("step-in", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node.
+     *
+     * @event sap.ui.webc.main.TreeItemBase#step-out
+     * @param {HTMLElement} item the item on which left arrow was pressed.
+     * @protected
+     */
+    ,
+    event("step-out", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+], 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { isLeft, isRight } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport ListItem from \"./ListItem.js\";\nimport Icon from \"./Icon.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 \"./generated/templates/TreeItemBaseTemplate.lit.js\";\n\n// Styles\nimport treeItemCss from \"./generated/themes/TreeItem.css.js\";\n\nimport HasPopup from \"./types/HasPopup.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 <code>TreeItem</code> and <code>TreeItemCustom</code> classes.\n *\n * @abstract\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.TreeItemBase\n * @extends sap.ui.webc.main.ListItem\n * @public\n */\n@customElement({\n\tlanguageAware: true,\n\ttemplate: TreeItemBaseTemplate,\n\tstyles: [\n\t\tListItem.styles,\n\t\ttreeItemCss,\n\t],\n\tdependencies: [\n\t\t...ListItem.dependencies,\n\t\tIcon,\n\t],\n})\n/**\n * Fired when the user interacts with the expand/collapse button of the tree list item.\n * @event\n * @param {HTMLElement} item the toggled item.\n * @protected\n */\n@event(\"toggle\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/**\n * Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node.\n *\n * @event sap.ui.webc.main.TreeItemBase#step-in\n * @param {HTMLElement} item the item on which right arrow was pressed.\n * @protected\n */\n@event(\"step-in\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/**\n * Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node.\n *\n * @event sap.ui.webc.main.TreeItemBase#step-out\n * @param {HTMLElement} item the item on which left arrow was pressed.\n * @protected\n */\n@event(\"step-out\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\nclass TreeItemBase extends ListItem {\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 *\n\t * @type {sap.ui.webc.base.types.Integer}\n\t * @name sap.ui.webc.main.TreeItemBase.prototype.level\n\t * @protected\n\t * @defaultValue 1\n\t */\n\t@property({ validator: Integer, defaultValue: 1 })\n\tlevel!: number;\n\n\t/**\n\t * If set, an icon will be displayed before the text of the tree list item.\n\t *\n\t * @public\n\t * @name sap.ui.webc.main.TreeItemBase.prototype.icon\n\t * @type {string}\n\t * @defaultValue \"\"\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 *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.TreeItemBase.prototype.showToggleButton\n\t * @defaultvalue false\n\t * @protected\n\t */\n\t@property({ type: Boolean })\n\tshowToggleButton!: boolean;\n\n\t/**\n\t * Defines whether the tree list item will show a collapse or expand icon inside its toggle button.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.TreeItemBase.prototype.expanded\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\texpanded!: boolean;\n\n\t/**\n\t* Defines whether the selection of a tree node is displayed as partially selected.\n\t* <br><br>\n\t* <b>Note:</b> 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 <code>indeterminate</code>\n\t* and <code>selected</code> properties:\n\t* <ul>\n\t* <li> If a tree node has both <code>selected</code> and <code>indeterminate</code> set to <code>true</code>, it is displayed as partially selected.\n\t* <li> If a tree node has <code>selected</code> set to <code>true</code> and <code>indeterminate</code> set to <code>false</code>, it is displayed as selected.\n\t* <li> If a tree node has <code>selected</code> set to <code>false</code>, it is displayed as not selected regardless of the value of the <code>indeterminate</code> property.\n\t* </ul>\n\t* <br>\n\t* <b>Note:</b> This property takes effect only when the <code>ui5-tree</code> is in <code>MultiSelect</code> mode.\n\t* @type {boolean}\n\t* @name sap.ui.webc.main.TreeItemBase.prototype.indeterminate\n\t* @defaultvalue false\n\t* @public\n\t* @since 1.1.0\n\t*/\n\t@property({ type: Boolean })\n\tindeterminate!: 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 * <br>\n\t * <i>Note:</i> 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 <code>true</code> 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 *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.TreeItemBase.prototype.hasChildren\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thasChildren!: boolean;\n\n\t/**\n\t * Defines the state of the <code>additionalText</code>.\n\t * <br>\n\t * Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Error\"</code>.\n\t * @type {sap.ui.webc.base.types.ValueState}\n\t * @name sap.ui.webc.main.TreeItemBase.prototype.additionalTextState\n\t * @defaultvalue \"None\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ type: ValueState, defaultValue: ValueState.None })\n\tadditionalTextState!: ValueState;\n\n\t/**\n\t * Defines the accessible name of the component.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.TreeItemBase.prototype.accessibleName\n\t * @defaultvalue: \"\"\n\t * @public\n\t * @since 1.8.0\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Defines whether the toggle button is shown at the end, rather than at the beginning of the item\n\t *\n\t * @protected\n\t * @since 1.0.0-rc.8\n\t */\n\t@property({ type: Boolean })\n\t_toggleButtonEnd!: boolean;\n\n\t/**\n\t * Defines whether the item shows minimal details - only icon (no text or toggle button)\n\t *\n\t * @protected\n\t * @since 1.0.0-rc.8\n\t */\n\t@property({ type: Boolean })\n\t_minimal!: boolean;\n\n\t/**\n\t * @private\n\t * @since 1.0.0-rc.11\n\t */\n\t@property({ validator: Integer, defaultValue: 1, noAttribute: true })\n\t_setsize!: number;\n\n\t/**\n\t * @private\n\t * @since 1.0.0-rc.11\n\t */\n\t@property({ validator: Integer, defaultValue: 1, noAttribute: true })\n\t_posinset!: number;\n\n\t/**\n\t * Defines the description for the accessible role of the component.\n\t * @protected\n\t * @type {string}\n\t * @defaultvalue undefined\n\t * @since 1.10.0\n\t */\n\t@property({ type: String, defaultValue: undefined, noAttribute: true })\n\taccessibleRoleDescription?: string;\n\n\t/**\n\t * Defines if the item should be collapsible or not.\n\t * It is true, for example, for the items inside the Popover of the Side Navigation\n\t * @private\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @since 1.10.0\n\t */\n\t@property({ type: Boolean })\n\t_fixed!: boolean;\n\n\t/**\n\t * Defines the availability and type of interactive popup element that can be triggered by the component on which the property is set.\n\t * @type {sap.ui.webc.main.types.HasPopup}\n\t * @since 1.10.0\n\t * @private\n\t */\n\t@property({ type: HasPopup, noAttribute: true })\n\tariaHaspopup?: HasPopup;\n\n\t/**\n\t * Defines the items of the component.\n\t * <br />\n\t * <br />\n\t * <b>Note:</b> Use <code>ui5-tree-item</code> or <code>ui5-tree-item-custom</code>\n\t *\n\t * @type {sap.ui.webc.main.ITreeItem[]}\n\t * @name sap.ui.webc.main.TreeItemBase.prototype.default\n\t * @slot items\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<TreeItemBase>;\n\n\tonBeforeRendering() {\n\t\tthis.actionable = false;\n\t\tthis.showToggleButton = this.requiresToggleButton;\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-left\": `calc(var(--_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 _toggleIconName() {\n\t\treturn this.expanded ? \"navigation-down-arrow\" : \"navigation-right-arrow\";\n\t}\n\n\tget _showToggleButtonBeginning() {\n\t\treturn this.showToggleButton && !this._minimal && !this._toggleButtonEnd;\n\t}\n\n\tget _showToggleButtonEnd() {\n\t\treturn this.showToggleButton && !this._minimal && this._toggleButtonEnd;\n\t}\n\n\tget _ariaLabel() {\n\t\treturn this.accessibleRoleDescription ? undefined : TreeItemBase.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);\n\t}\n\n\tget _accInfo() {\n\t\tconst accInfoSettings = {\n\t\t\trole: this._minimal ? \"menuitemradio\" : \"treeitem\",\n\t\t\tariaExpanded: this.showToggleButton && !this._minimal ? this.expanded : undefined,\n\t\t\tariaLevel: this._minimal ? undefined : this.level,\n\t\t\tposinset: this._posinset,\n\t\t\tsetsize: this._setsize,\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.ariaHaspopup || undefined,\n\t\t\tariaChecked: false,\n\t\t\tariaSelected: false,\n\t\t};\n\n\t\tif (this._minimal) {\n\t\t\taccInfoSettings.ariaChecked = this.selected;\n\t\t} else {\n\t\t\taccInfoSettings.ariaSelected = this.selected;\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 * @returns {boolean}\n\t * @protected\n\t */\n\tget isTreeItem() {\n\t\treturn true;\n\t}\n\n\t/**\n\t * Call this method to manually switch the <code>expanded</code> state of a tree item.\n\t * @public\n\t * @method\n\t * @name sap.ui.webc.main.TreeItemBase#toggle\n\t */\n\ttoggle() {\n\t\tthis.expanded = !this.expanded;\n\t}\n\n\t_toggleClick(e: MouseEvent | KeyboardEvent) {\n\t\te.stopPropagation();\n\t\tthis.fireEvent<TreeItemBaseToggleEventDetail>(\"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.fireEvent<TreeItemBaseToggleEventDetail>(\"toggle\", { item: this });\n\t\t\t} else {\n\t\t\t\tthis.fireEvent<TreeItemBaseStepInEventDetail>(\"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.fireEvent<TreeItemBaseToggleEventDetail>(\"toggle\", { item: this });\n\t\t\t} else if (this.hasParent) {\n\t\t\t\tthis.fireEvent<TreeItemBaseStepOutEventDetail>(\"step-out\", { item: this });\n\t\t\t}\n\t\t}\n\t}\n\n\tget iconAccessibleName() {\n\t\treturn this.expanded ? TreeItemBase.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeItemBase.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);\n\t}\n\n\tstatic async onDefine() {\n\t\t[TreeItemBase.i18nBundle] = await Promise.all([\n\t\t\tgetI18nBundle(\"@ui5/webcomponents\"),\n\t\t\tsuper.onDefine(),\n\t\t]);\n\t}\n}\n\nexport default TreeItemBase;\nexport type {\n\tTreeItemBaseToggleEventDetail,\n\tTreeItemBaseStepInEventDetail,\n\tTreeItemBaseStepOutEventDetail,\n};\n"]}

package/dist/TreeItemCustom.d.ts

@@ -0,0 +1,62 @@
+import TreeItemBase from "./TreeItemBase.js";
+/**
+ * @class
+ * The <code>ui5-tree-item-custom</code> represents a node in a tree structure, shown as a <code>ui5-list</code>.
+ * <br>
+ * This is the item to use inside a <code>ui5-tree</code>.
+ * 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.
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-tree-item-custom</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the tree list item</li>
+ * <li>additionalText - Used to style the additionalText of the tree list item</li>
+ * <li>icon - Used to style the icon of the tree list item</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/TreeItemCustom.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TreeItemCustom
+ * @extends sap.ui.webc.main.TreeItemBase
+ * @tagname ui5-tree-item-custom
+ * @public
+ * @implements sap.ui.webc.main.ITreeItem
+ * @since 1.9.2
+ */
+declare class TreeItemCustom extends TreeItemBase {
+    /**
+     * Defines whether the tree list item should display the selection element.
+     *
+     * @type {Boolean}
+     * @name sap.ui.webc.main.TreeItemCustom.prototype.hideSelectionElement
+     * @public
+     * @defaultValue false
+     */
+    hideSelectionElement: boolean;
+    /**
+     * Defines the content of the <code>ui5-tree-item</code>.
+     *
+     * @type {HTMLElement[]}
+     * @name sap.ui.webc.main.TreeItemCustom.prototype.content
+     * @slot content
+     * @public
+     */
+    content: Array<HTMLElement>;
+    /**
+     * @override
+     */
+    get placeSelectionElementBefore(): boolean;
+    /**
+     * @override
+     */
+    get placeSelectionElementAfter(): boolean;
+}
+export default TreeItemCustom;

package/dist/TreeItemCustom.js

@@ -0,0 +1,76 @@
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import TreeItemBase from "./TreeItemBase.js";
+// Template
+import TreeItemCustomTemplate from "./generated/templates/TreeItemCustomTemplate.lit.js";
+// Styles
+import treeItemCustomCss from "./generated/themes/TreeItem.css.js";
+/**
+ * @class
+ * The <code>ui5-tree-item-custom</code> represents a node in a tree structure, shown as a <code>ui5-list</code>.
+ * <br>
+ * This is the item to use inside a <code>ui5-tree</code>.
+ * 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.
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-tree-item-custom</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the tree list item</li>
+ * <li>additionalText - Used to style the additionalText of the tree list item</li>
+ * <li>icon - Used to style the icon of the tree list item</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/TreeItemCustom.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TreeItemCustom
+ * @extends sap.ui.webc.main.TreeItemBase
+ * @tagname ui5-tree-item-custom
+ * @public
+ * @implements sap.ui.webc.main.ITreeItem
+ * @since 1.9.2
+ */
+let TreeItemCustom = class TreeItemCustom extends TreeItemBase {
+    /**
+     * @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({
+        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,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,WAAW;AACX,OAAO,sBAAsB,MAAM,qDAAqD,CAAC;AAEzF,SAAS;AACT,OAAO,iBAAiB,MAAM,oCAAoC,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAMH,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;IAuBxC;;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;AA1BA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACG;AAW/B;IADC,IAAI,EAAE;+CACsB;AArBxB,cAAc;IALnB,aAAa,CAAC;QACd,GAAG,EAAE,sBAAsB;QAC3B,QAAQ,EAAE,sBAAsB;QAChC,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,iBAAiB,CAAC;KAChD,CAAC;GACI,cAAc,CAoCnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","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 TreeItemBase from \"./TreeItemBase.js\";\n\n// Template\nimport TreeItemCustomTemplate from \"./generated/templates/TreeItemCustomTemplate.lit.js\";\n\n// Styles\nimport treeItemCustomCss from \"./generated/themes/TreeItem.css.js\";\n\n/**\n * @class\n * The <code>ui5-tree-item-custom</code> represents a node in a tree structure, shown as a <code>ui5-list</code>.\n * <br>\n * This is the item to use inside a <code>ui5-tree</code>.\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 * <h3>CSS Shadow Parts</h3>\n *\n * <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-tree-item-custom</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>title - Used to style the title of the tree list item</li>\n * <li>additionalText - Used to style the additionalText of the tree list item</li>\n * <li>icon - Used to style the icon of the tree list item</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents/dist/TreeItemCustom.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.TreeItemCustom\n * @extends sap.ui.webc.main.TreeItemBase\n * @tagname ui5-tree-item-custom\n * @public\n * @implements sap.ui.webc.main.ITreeItem\n * @since 1.9.2\n */\n@customElement({\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 *\n\t * @type {Boolean}\n\t * @name sap.ui.webc.main.TreeItemCustom.prototype.hideSelectionElement\n\t * @public\n\t * @defaultValue false\n\t */\n\t@property({ type: Boolean })\n\thideSelectionElement!: boolean;\n\n\t/**\n\t * Defines the content of the <code>ui5-tree-item</code>.\n\t *\n\t * @type {HTMLElement[]}\n\t * @name sap.ui.webc.main.TreeItemCustom.prototype.content\n\t * @slot content\n\t * @public\n\t */\n\t@slot()\n\tcontent!: Array<HTMLElement>;\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/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,43 @@
+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 = [];
+        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,WAAW,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;QAEvD,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,qBAAqB;QACpB,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;CACD,CAAA;AAhBK,QAAQ;IAFb,aAAa,CAAC,eAAe,CAAC;GAEzB,QAAQ,CAgBb;AAED;;;;;;GAMG;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;YACtD,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC;SAClD;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\tflattenTree(slottedItems, flatItems, includeCollapsed);\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 *\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/WheelSlider.d.ts

@@ -0,0 +1,117 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
+type WheelSliderSelectEventDetail = {
+    value: string;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * <h3>Usage</h3>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/WheelSlider.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.WheelSlider
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-wheelslider
+ * @public
+ * @since 1.0.0-rc.6
+ */
+declare class WheelSlider extends UI5Element {
+    /**
+     * Defines whether the component is disabled
+     * (default is set to <code>false</code>).
+     * A disabled component can't be pressed or
+     * focused, and it is not in the tab chain.
+     *
+     * @type {boolean}
+     * @name sap.ui.webc.main.WheelSlider.prototype.disabled
+     * @defaultvalue false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines the currently selected value
+     * @type {string}
+     * @name sap.ui.webc.main.WheelSlider.prototype.value
+     * @defaultvalue ""
+     * @public
+     */
+    value: string;
+    /**
+     * Defines the label of the wheelslider.
+     * @type {string}
+     * @name sap.ui.webc.main.WheelSlider.prototype.label
+     * @defaultvalue ""
+     * @public
+     */
+    label: string;
+    /**
+     * Indicates if the wheelslider is expanded.
+     * @type {boolean}
+     * @name sap.ui.webc.main.WheelSlider.prototype.expanded
+     * @defaultvalue false
+     * @public
+     */
+    expanded: boolean;
+    /**
+     * Indicates if the wheelslider has a cyclic behaviour.
+     * @type {boolean}
+     * @name sap.ui.webc.main.WheelSlider.prototype.cyclic
+     * @defaultvalue false
+     * @public
+     */
+    cyclic: boolean;
+    _items: Array<string>;
+    _itemsToShow: Array<{
+        value: string;
+        selected: boolean;
+    }>;
+    _currentElementIndex: number;
+    _scroller: ScrollEnablement;
+    _prevWheelTimestamp?: number;
+    constructor();
+    onBeforeRendering(): void;
+    onAfterRendering(): true | undefined;
+    get classes(): {
+        root: {
+            "ui5-wheelslider-root": boolean;
+            "ui5-phone": boolean;
+        };
+    };
+    expandSlider(): void;
+    collapseSlider(): void;
+    get _itemCellHeight(): number;
+    _updateScrolling(): void;
+    _handleScrollTouchEnd(): void;
+    _selectElement(element: HTMLElement): void;
+    _getCurrentRepetition(): number;
+    _selectElementByIndex(currentIndex: number): void;
+    _timesMultipliedOnCyclic(): number;
+    _buildItemsToShow(): void;
+    _handleArrayBorderReached(currentIndex: number): number;
+    /**
+     *
+     * @param {event} e Wheel Event
+     * @private
+     *
+     * The listener for this event can't be passive as it calls preventDefault()
+     */
+    _handleWheel(e: WheelEvent): void;
+    _onclick(e: MouseEvent): void;
+    _onArrowDown(e: KeyboardEvent): void;
+    _onArrowUp(e: KeyboardEvent): void;
+    _itemDown(): void;
+    _itemUp(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _selectLimitCell(e: KeyboardEvent, isMax: boolean): void;
+}
+export default WheelSlider;
+export type { WheelSliderSelectEventDetail };