npm - @ui5/webcomponents - Versions diffs - 0.0.0-cb061e041 → 0.0.0-cddf8ba1c - Mend

@ui5/webcomponents 0.0.0-cb061e041 → 0.0.0-cddf8ba1c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1890) hide show

package/dist/Tree.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import TreeList from "./TreeList.js";
 import ListMode from "./types/ListMode.js";
 import type TreeItemBase from "./TreeItemBase.js";
 import type { TreeItemBaseToggleEventDetail, TreeItemBaseStepInEventDetail, TreeItemBaseStepOutEventDetail } from "./TreeItemBase.js";
-import type { ClickEventDetail as ListItemClickEventDetail, DeleteEventDetail as ListItemDeleteEventDetail, SelectionChangeEventDetail as ListSelectionChangeEventDetail } from "./List.js";
+import type { ListItemClickEventDetail, ListItemDeleteEventDetail, ListSelectionChangeEventDetail } from "./List.js";
 type TreeItemEventDetail = {
     item: TreeItemBase;
 };
@@ -12,7 +12,7 @@ type TreeItemMouseoverEventDetail = TreeItemEventDetail;
 type TreeItemMouseoutEventDetail = TreeItemEventDetail;
 type TreeItemClickEventDetail = TreeItemEventDetail;
 type TreeItemDeleteEventDetail = TreeItemEventDetail;
-type TreeItemSelectionChangeEventDetail = {
+type TreeSelectionChangeEventDetail = {
     selectedItems: Array<TreeItemBase>;
     previouslySelectedItems: Array<TreeItemBase>;
     targetItem: TreeItemBase;
@@ -76,24 +76,12 @@ declare class Tree extends UI5Element {
      * Defines the mode of the component. Since the tree uses a <code>ui5-list</code> to display its structure,
      * the tree modes are exactly the same as the list modes, and are all applicable.
      *
-     * <br><br>
-     * <b>Note:</b>
-     *
-     * <ul>
-     * <li><code>None</code></li>
-     * <li><code>SingleSelect</code></li>
-     * <li><code>SingleSelectBegin</code></li>
-     * <li><code>SingleSelectEnd</code></li>
-     * <li><code>MultiSelect</code></li>
-     * <li><code>Delete</code></li>
-     * </ul>
-     *
      * @public
      * @type {sap.ui.webc.main.types.ListMode}
      * @name sap.ui.webc.main.Tree.prototype.mode
      * @defaultValue "None"
      */
-    mode: ListMode;
+    mode: `${ListMode}`;
     /**
      * Defines the text that is displayed when the component contains no items.
      *
@@ -152,20 +140,6 @@ declare class Tree extends UI5Element {
      * @since 1.10.0
      */
     accessibleRoleDescription?: string;
-    /**
-     * Shows the toggle button at the end, rather than at the beginning of the items
-     *
-     * @protected
-     * @since 1.0.0-rc.8
-     */
-    _toggleButtonEnd: boolean;
-    /**
-     * Represents the tree in a very minimal state - icons only with no text and no toggle buttons
-     *
-     * @protected
-     * @since 1.0.0-rc.8
-     */
-    _minimal: boolean;
     /**
      * Defines the items of the component. Tree items may have other tree items as children.
      * <br><br>
@@ -190,8 +164,9 @@ declare class Tree extends UI5Element {
      */
     header: Array<HTMLElement>;
     onBeforeRendering(): void;
+    onAfterRendering(): void;
     get list(): TreeList;
-    get _role(): "menubar" | "tree";
+    get _role(): string;
     get _label(): string | undefined;
     get _hasHeader(): boolean;
     _onListItemStepIn(e: CustomEvent<TreeItemBaseStepInEventDetail>): void;
@@ -232,4 +207,4 @@ declare class Tree extends UI5Element {
     _isInstanceOfTreeItemBase(object: any): object is TreeItemBase;
 }
 export default Tree;
-export type { TreeItemToggleEventDetail, TreeItemMouseoverEventDetail, TreeItemMouseoutEventDetail, TreeItemClickEventDetail, TreeItemDeleteEventDetail, TreeItemSelectionChangeEventDetail, };
+export type { TreeItemToggleEventDetail, TreeItemMouseoverEventDetail, TreeItemMouseoutEventDetail, TreeItemClickEventDetail, TreeItemDeleteEventDetail, TreeSelectionChangeEventDetail, };

package/dist/Tree.js CHANGED Viewed

@@ -76,11 +76,16 @@ let Tree = class Tree extends UI5Element {
     onBeforeRendering() {
         this._prepareTreeItems();
     }
+    onAfterRendering() {
+        // Note: this is a workaround for the problem that the list cannot invalidate itself when its only physical child is a slot (and the list items are inside the slot)
+        // This code should be removed once a framework-level fix is implemented
+        this.shadowRoot.querySelector("[ui5-tree-list]").onBeforeRendering();
+    }
     get list() {
         return this.getDomRef();
     }
     get _role() {
-        return this._minimal ? "menubar" : "tree";
+        return "tree";
     }
     get _label() {
         return getEffectiveAriaLabelText(this);
@@ -155,8 +160,6 @@ let Tree = class Tree extends UI5Element {
             const parent = item.parentNode;
             const ariaSetSize = (parent && parent.children.length) || this.items.length;
             item.setAttribute("level", level.toString());
-            item._toggleButtonEnd = this._toggleButtonEnd;
-            item._minimal = this._minimal;
             item._setsize = ariaSetSize;
             item._posinset = index + 1;
         });
@@ -221,12 +224,6 @@ __decorate([
 __decorate([
     property({ defaultValue: undefined, noAttribute: true })
 ], Tree.prototype, "accessibleRoleDescription", void 0);
-__decorate([
-    property({ type: Boolean })
-], Tree.prototype, "_toggleButtonEnd", void 0);
-__decorate([
-    property({ type: Boolean })
-], Tree.prototype, "_minimal", void 0);
 __decorate([
     slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
 ], Tree.prototype, "items", void 0);

package/dist/Tree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.js","sourceRoot":"","sources":["../src/Tree.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport TreeItem from \"./TreeItem.js\";\nimport TreeItemCustom from \"./TreeItemCustom.js\";\nimport TreeList from \"./TreeList.js\";\nimport ListMode from \"./types/ListMode.js\";\nimport type TreeItemBase from \"./TreeItemBase.js\";\nimport type {\n\tTreeItemBaseToggleEventDetail,\n\tTreeItemBaseStepInEventDetail,\n\tTreeItemBaseStepOutEventDetail,\n} from \"./TreeItemBase.js\";\nimport type {\n\tClickEventDetail as ListItemClickEventDetail,\n\tDeleteEventDetail as ListItemDeleteEventDetail,\n\tSelectionChangeEventDetail as ListSelectionChangeEventDetail,\n} from \"./List.js\";\n\n// Template\nimport TreeTemplate from \"./generated/templates/TreeTemplate.lit.js\";\n\n// Styles\nimport TreeCss from \"./generated/themes/Tree.css.js\";\n\ntype TreeItemEventDetail = {\n\titem: TreeItemBase,\n}\ntype TreeItemToggleEventDetail = TreeItemEventDetail;\ntype TreeItemMouseoverEventDetail = TreeItemEventDetail;\ntype TreeItemMouseoutEventDetail = TreeItemEventDetail;\ntype TreeItemClickEventDetail = TreeItemEventDetail;\ntype TreeItemDeleteEventDetail = TreeItemEventDetail;\ntype TreeItemSelectionChangeEventDetail = {\n\tselectedItems: Array<TreeItemBase>;\n\tpreviouslySelectedItems: Array<TreeItemBase>;\n\ttargetItem: TreeItemBase;\n}\ntype WalkCallback = (item: TreeItemBase, level: number, index: number) => void;\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-tree</code> component provides a tree structure for displaying data in a hierarchy.\n \n <h3>Usage</h3>\n \n <h4>When to use:</h4>\n * <ul>\n * <li>To display hierarchically structured items.</li>\n * <li>To select one or more items out of a set of hierarchically structured items.</li>\n * </ul>\n \n <h4>When not to use:</h4>\n * <ul>\n * <li>To display items not hierarchically strcutured. In this case, use the List component.</li>\n * <li>To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.</li>\n * <li>The hierarchy turns out to have only two levels. In this case, use List with group items.</li>\n * </ul>\n \n <h3>Keyboard Handling</h3>\n \n The <code>ui5-tree</code> provides advanced keyboard handling.\n * The user can use the following keyboard shortcuts in order to navigate trough the tree:\n * <ul>\n * <li>[UP/DOWN] - Navigates up and down the tree items that are currently visible.</li>\n * <li>[RIGHT] - Drills down the tree by expanding the tree nodes.</li>\n * <li>[LEFT] - Goes up the tree and collapses the tree nodes.</li>\n * </ul>\n * <br>\n \n The user can use the following keyboard shortcuts to perform selection,\n * when the <code>mode</code> property is in use:\n * <ul>\n * <li>[SPACE] - Selects the currently focused item upon keyup.</li>\n * <li>[ENTER] - Selects the currently focused item upon keydown.</li>\n * </ul>\n \n <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents/dist/Tree.js\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents/dist/TreeItem.js\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Tree\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-tree\n * @appenddocs sap.ui.webc.main.TreeItem sap.ui.webc.main.TreeItemCustom\n * @public\n * @since 1.0.0-rc.8\n /\n@customElement({\n\ttag: \"ui5-tree\",\n\trenderer: litRender,\n\tstyles: TreeCss,\n\ttemplate: TreeTemplate,\n\tdependencies: [\n\t\tTreeList,\n\t\tTreeItem,\n\t\tTreeItemCustom,\n\t],\n})\n/\n Fired when a tree item is expanded or collapsed.\n * <i>Note:</i> You can call <code>preventDefault()</code> on the event object to suppress the event, if needed.\n * This may be handy for example if you want to dynamically load tree items upon the user expanding a node.\n * Even if you prevented the event's default behavior, you can always manually call <code>toggle()</code> on a tree item.\n \n @event sap.ui.webc.main.Tree#item-toggle\n * @param {HTMLElement} item the toggled item.\n * @allowPreventDefault\n * @public\n /\n@event(\"item-toggle\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n/\n Fired when the mouse cursor enters the tree item borders.\n * @event sap.ui.webc.main.Tree#item-mouseover\n * @param {HTMLElement} item the hovered item.\n * @since 1.0.0-rc.16\n * @public\n /\n@event(\"item-mouseover\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n/\n Fired when the mouse cursor leaves the tree item borders.\n * @event sap.ui.webc.main.Tree#item-mouseout\n * @param {HTMLElement} item the hovered item.\n * @since 1.0.0-rc.16\n * @public\n /\n@event(\"item-mouseout\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n/\n Fired when a tree item is activated.\n \n @event sap.ui.webc.main.Tree#item-click\n * @allowPreventDefault\n * @param {HTMLElement} item The clicked item.\n * @public\n /\n@event(\"item-click\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/\n Fired when the Delete button of any tree item is pressed.\n * <br><br>\n * <b>Note:</b> A Delete button is displayed on each item,\n * when the component <code>mode</code> property is set to <code>Delete</code>.\n \n @event sap.ui.webc.main.Tree#item-delete\n * @param {HTMLElement} item the deleted item.\n * @public\n /\n@event(\"item-delete\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/\n Fired when selection is changed by user interaction\n * in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.\n \n @event sap.ui.webc.main.Tree#selection-change\n * @param {Array} selectedItems An array of the selected items.\n * @param {Array} previouslySelectedItems An array of the previously selected items.\n * @param {HTMLElement} targetItem The item triggering the event.\n * @public\n /\n@event(\"selection-change\", {\n\tdetail: {\n\t\tselectedItems: { type: Array },\n\t\tpreviouslySelectedItems: { type: Array },\n\t\ttargetItem: { type: HTMLElement },\n\t},\n})\nclass Tree extends UI5Element {\n\t/\n\t Defines the mode of the component. Since the tree uses a <code>ui5-list</code> to display its structure,\n\t * the tree modes are exactly the same as the list modes, and are all applicable.\n\t \n\t <br><br>\n\t * <b>Note:</b>\n\t \n\t <ul>\n\t * <li><code>None</code></li>\n\t * <li><code>SingleSelect</code></li>\n\t * <li><code>SingleSelectBegin</code></li>\n\t * <li><code>SingleSelectEnd</code></li>\n\t * <li><code>MultiSelect</code></li>\n\t * <li><code>Delete</code></li>\n\t * </ul>\n\t \n\t @public\n\t * @type {sap.ui.webc.main.types.ListMode}\n\t * @name sap.ui.webc.main.Tree.prototype.mode\n\t * @defaultValue \"None\"\n\t /\n\t@property({ type: ListMode, defaultValue: ListMode.None })\n\tmode!: ListMode;\n\n\t/\n\t Defines the text that is displayed when the component contains no items.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.noDataText\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\tnoDataText!: string;\n\n\t/\n\t Defines the component header text.\n\t * <br><br>\n\t * <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.headerText\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\theaderText!: string;\n\n\t/\n\t Defines the component footer text.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.footerText\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\tfooterText!: string;\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.Tree.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 the IDs of the elements that label the component.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.accessibleNameRef\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.8.0\n\t /\n\t@property()\n\taccessibleNameRef!: string;\n\n\t/\n\t Defines the description for the accessible role of the component.\n\t * @protected\n\t * @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.accessibleRoleDescription\n\t * @defaultvalue undefined\n\t * @since 1.10.0\n\t /\n\t@property({ defaultValue: undefined, noAttribute: true })\n\taccessibleRoleDescription?: string;\n\n\t/\n\t Shows the toggle button at the end, rather than at the beginning of the items\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 Represents the tree in a very minimal state - icons only with no text and no toggle buttons\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 Defines the items of the component. Tree items may have other tree items as children.\n\t * <br><br>\n\t * <b>Note:</b> Use <code>ui5-tree-item</code> for the intended design.\n\t \n\t @type {sap.ui.webc.main.ITreeItem[]}\n\t * @name sap.ui.webc.main.Tree.prototype.default\n\t * @slot items\n\t * @public\n\t /\n\t@slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n\titems!: Array<TreeItemBase>;\n\n\t/\n\t Defines the component header.\n\t * <br><br>\n\t * <b>Note:</b> When the <code>header</code> slot is set, the\n\t * <code>headerText</code> property is ignored.\n\t \n\t @type {HTMLElement[]}\n\t * @name sap.ui.webc.main.Tree.prototype.header\n\t * @slot header\n\t * @public\n\t /\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\tonBeforeRendering() {\n\t\tthis._prepareTreeItems();\n\t}\n\n\tget list() {\n\t\treturn this.getDomRef() as TreeList;\n\t}\n\n\tget _role() {\n\t\treturn this._minimal ? \"menubar\" : \"tree\";\n\t}\n\n\tget _label() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget _hasHeader() {\n\t\treturn !!this.header.length;\n\t}\n\n\t_onListItemStepIn(e: CustomEvent<TreeItemBaseStepInEventDetail>) {\n\t\tconst treeItem = e.detail.item;\n\t\tif (treeItem.items.length > 0) {\n\t\t\tconst firstChild = treeItem.items[0];\n\t\t\tconst firstChildListItem = this._getListItemForTreeItem(firstChild);\n\t\t\tfirstChildListItem && this.list.focusItem(firstChildListItem);\n\t\t}\n\t}\n\n\t_onListItemStepOut(e: CustomEvent<TreeItemBaseStepOutEventDetail>) {\n\t\tconst treeItem = e.detail.item;\n\t\tif (treeItem.parentElement !== this) {\n\t\t\tconst parent = treeItem.parentElement as TreeItemBase;\n\t\t\tconst parentListItem = this._getListItemForTreeItem(parent);\n\t\t\tparentListItem && this.list.focusItem(parentListItem);\n\t\t}\n\t}\n\n\t_onListItemToggle(e: CustomEvent<TreeItemBaseToggleEventDetail>) {\n\t\tconst treeItem = e.detail.item;\n\t\tconst defaultPrevented = !this.fireEvent<TreeItemToggleEventDetail>(\"item-toggle\", { item: treeItem }, true);\n\t\tif (!defaultPrevented) {\n\t\t\ttreeItem.toggle();\n\t\t}\n\t}\n\n\t_onListItemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst treeItem = e.detail.item as TreeItemBase;\n\n\t\tif (!this.fireEvent<TreeItemClickEventDetail>(\"item-click\", { item: treeItem }, true)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onListItemDelete(e: CustomEvent<ListItemDeleteEventDetail>) {\n\t\tconst treeItem = e.detail.item as TreeItemBase;\n\t\tthis.fireEvent<TreeItemDeleteEventDetail>(\"item-delete\", { item: treeItem });\n\t}\n\n\t_onListItemMouseOver(e: MouseEvent) {\n\t\tconst target = e.target;\n\n\t\tif (this._isInstanceOfTreeItemBase(target)) {\n\t\t\tthis.fireEvent<TreeItemMouseoverEventDetail>(\"item-mouseover\", { item: target });\n\t\t}\n\t}\n\n\t_onListItemMouseOut(e: MouseEvent) {\n\t\tconst target = e.target;\n\n\t\tif (this._isInstanceOfTreeItemBase(target)) {\n\t\t\tthis.fireEvent<TreeItemMouseoutEventDetail>(\"item-mouseout\", { item: target });\n\t\t}\n\t}\n\n\t_onListSelectionChange(e: CustomEvent<ListSelectionChangeEventDetail>) {\n\t\tconst previouslySelectedItems = e.detail.previouslySelectedItems as Array<TreeItemBase>;\n\t\tconst selectedItems = e.detail.selectedItems as Array<TreeItemBase>;\n\t\tconst targetItem = e.detail.targetItem as TreeItemBase;\n\n\t\tpreviouslySelectedItems.forEach(item => {\n\t\t\titem.selected = false;\n\t\t});\n\t\tselectedItems.forEach(item => {\n\t\t\titem.selected = true;\n\t\t});\n\n\t\tthis.fireEvent<TreeItemSelectionChangeEventDetail>(\"selection-change\", {\n\t\t\tpreviouslySelectedItems,\n\t\t\tselectedItems,\n\t\t\ttargetItem,\n\t\t});\n\t}\n\n\t_prepareTreeItems() {\n\t\t// set level to tree items\n\t\tthis.walk((item, level, index) => {\n\t\t\tconst parent = item.parentNode;\n\t\t\tconst ariaSetSize = (parent && parent.children.length) \|\| this.items.length;\n\n\t\t\titem.setAttribute(\"level\", level.toString());\n\n\t\t\titem._toggleButtonEnd = this._toggleButtonEnd;\n\t\t\titem._minimal = this._minimal;\n\t\t\titem._setsize = ariaSetSize;\n\t\t\titem._posinset = index + 1;\n\t\t});\n\t}\n\n\t/\n\t Returns the corresponding list item for a given tree item\n\t \n\t @param item The tree item\n\t * @protected\n\t /\n\t_getListItemForTreeItem(item: TreeItemBase) {\n\t\treturn this.getItems().find(listItem => listItem === item);\n\t}\n\n\t/\n\t Returns the a flat array of all tree items\n\t * @protected\n\t * @returns {Array}\n\t /\n\tgetItems(): Array<TreeItemBase> {\n\t\treturn this.list.getItems();\n\t}\n\n\t/\n\t Focus a tree item by its index in the flat array of all tree items\n\t * @protected\n\t * @param index\n\t /\n\tfocusItemByIndex(index: number) {\n\t\tconst item = this.getItems()[index];\n\t\titem && this.list.focusItem(item);\n\t}\n\n\t/\n\t Perform Depth-First-Search walk on the tree and run a callback on each node\n\t \n\t @public\n\t * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index\n\t */\n\twalk(callback: WalkCallback) {\n\t\twalkTree(this, 1, callback);\n\t}\n\n\t_isInstanceOfTreeItemBase(object: any): object is TreeItemBase {\n\t\treturn \"isTreeItem\" in object;\n\t}\n}\n\nconst walkTree = (el: Tree \| TreeItemBase, level: number, callback: WalkCallback) => {\n\t(el.items).forEach((item, index) => {\n\t\tcallback(item, level, index);\n\t\tif (item.items.length > 0) {\n\t\t\twalkTree(item, level + 1, callback);\n\t\t}\n\t});\n};\n\nTree.define();\n\nexport default Tree;\n\nexport type {\n\tTreeItemToggleEventDetail,\n\tTreeItemMouseoverEventDetail,\n\tTreeItemMouseoutEventDetail,\n\tTreeItemClickEventDetail,\n\tTreeItemDeleteEventDetail,\n\tTreeItemSelectionChangeEventDetail,\n};\n"]}
1	+ {"version":3,"file":"Tree.js","sourceRoot":"","sources":["../src/Tree.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport TreeItem from \"./TreeItem.js\";\nimport TreeItemCustom from \"./TreeItemCustom.js\";\nimport TreeList from \"./TreeList.js\";\nimport ListMode from \"./types/ListMode.js\";\nimport type TreeItemBase from \"./TreeItemBase.js\";\nimport type {\n\tTreeItemBaseToggleEventDetail,\n\tTreeItemBaseStepInEventDetail,\n\tTreeItemBaseStepOutEventDetail,\n} from \"./TreeItemBase.js\";\nimport type {\n\tListItemClickEventDetail,\n\tListItemDeleteEventDetail,\n\tListSelectionChangeEventDetail,\n} from \"./List.js\";\n\n// Template\nimport TreeTemplate from \"./generated/templates/TreeTemplate.lit.js\";\n\n// Styles\nimport TreeCss from \"./generated/themes/Tree.css.js\";\n\ntype TreeItemEventDetail = {\n\titem: TreeItemBase,\n}\ntype TreeItemToggleEventDetail = TreeItemEventDetail;\ntype TreeItemMouseoverEventDetail = TreeItemEventDetail;\ntype TreeItemMouseoutEventDetail = TreeItemEventDetail;\ntype TreeItemClickEventDetail = TreeItemEventDetail;\ntype TreeItemDeleteEventDetail = TreeItemEventDetail;\ntype TreeSelectionChangeEventDetail = {\n\tselectedItems: Array<TreeItemBase>;\n\tpreviouslySelectedItems: Array<TreeItemBase>;\n\ttargetItem: TreeItemBase;\n}\ntype WalkCallback = (item: TreeItemBase, level: number, index: number) => void;\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-tree</code> component provides a tree structure for displaying data in a hierarchy.\n \n <h3>Usage</h3>\n \n <h4>When to use:</h4>\n * <ul>\n * <li>To display hierarchically structured items.</li>\n * <li>To select one or more items out of a set of hierarchically structured items.</li>\n * </ul>\n \n <h4>When not to use:</h4>\n * <ul>\n * <li>To display items not hierarchically strcutured. In this case, use the List component.</li>\n * <li>To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.</li>\n * <li>The hierarchy turns out to have only two levels. In this case, use List with group items.</li>\n * </ul>\n \n <h3>Keyboard Handling</h3>\n \n The <code>ui5-tree</code> provides advanced keyboard handling.\n * The user can use the following keyboard shortcuts in order to navigate trough the tree:\n * <ul>\n * <li>[UP/DOWN] - Navigates up and down the tree items that are currently visible.</li>\n * <li>[RIGHT] - Drills down the tree by expanding the tree nodes.</li>\n * <li>[LEFT] - Goes up the tree and collapses the tree nodes.</li>\n * </ul>\n * <br>\n \n The user can use the following keyboard shortcuts to perform selection,\n * when the <code>mode</code> property is in use:\n * <ul>\n * <li>[SPACE] - Selects the currently focused item upon keyup.</li>\n * <li>[ENTER] - Selects the currently focused item upon keydown.</li>\n * </ul>\n \n <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents/dist/Tree.js\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents/dist/TreeItem.js\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Tree\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-tree\n * @appenddocs sap.ui.webc.main.TreeItem sap.ui.webc.main.TreeItemCustom\n * @public\n * @since 1.0.0-rc.8\n /\n@customElement({\n\ttag: \"ui5-tree\",\n\trenderer: litRender,\n\tstyles: TreeCss,\n\ttemplate: TreeTemplate,\n\tdependencies: [\n\t\tTreeList,\n\t\tTreeItem,\n\t\tTreeItemCustom,\n\t],\n})\n/\n Fired when a tree item is expanded or collapsed.\n * <i>Note:</i> You can call <code>preventDefault()</code> on the event object to suppress the event, if needed.\n * This may be handy for example if you want to dynamically load tree items upon the user expanding a node.\n * Even if you prevented the event's default behavior, you can always manually call <code>toggle()</code> on a tree item.\n \n @event sap.ui.webc.main.Tree#item-toggle\n * @param {HTMLElement} item the toggled item.\n * @allowPreventDefault\n * @public\n /\n@event(\"item-toggle\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n/\n Fired when the mouse cursor enters the tree item borders.\n * @event sap.ui.webc.main.Tree#item-mouseover\n * @param {HTMLElement} item the hovered item.\n * @since 1.0.0-rc.16\n * @public\n /\n@event(\"item-mouseover\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n/\n Fired when the mouse cursor leaves the tree item borders.\n * @event sap.ui.webc.main.Tree#item-mouseout\n * @param {HTMLElement} item the hovered item.\n * @since 1.0.0-rc.16\n * @public\n /\n@event(\"item-mouseout\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n/\n Fired when a tree item is activated.\n \n @event sap.ui.webc.main.Tree#item-click\n * @allowPreventDefault\n * @param {HTMLElement} item The clicked item.\n * @public\n /\n@event(\"item-click\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/\n Fired when the Delete button of any tree item is pressed.\n * <br><br>\n * <b>Note:</b> A Delete button is displayed on each item,\n * when the component <code>mode</code> property is set to <code>Delete</code>.\n \n @event sap.ui.webc.main.Tree#item-delete\n * @param {HTMLElement} item the deleted item.\n * @public\n /\n@event(\"item-delete\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\n\n/\n Fired when selection is changed by user interaction\n * in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.\n \n @event sap.ui.webc.main.Tree#selection-change\n * @param {Array} selectedItems An array of the selected items.\n * @param {Array} previouslySelectedItems An array of the previously selected items.\n * @param {HTMLElement} targetItem The item triggering the event.\n * @public\n /\n@event(\"selection-change\", {\n\tdetail: {\n\t\tselectedItems: { type: Array },\n\t\tpreviouslySelectedItems: { type: Array },\n\t\ttargetItem: { type: HTMLElement },\n\t},\n})\nclass Tree extends UI5Element {\n\t/\n\t Defines the mode of the component. Since the tree uses a <code>ui5-list</code> to display its structure,\n\t * the tree modes are exactly the same as the list modes, and are all applicable.\n\t \n\t @public\n\t * @type {sap.ui.webc.main.types.ListMode}\n\t * @name sap.ui.webc.main.Tree.prototype.mode\n\t * @defaultValue \"None\"\n\t /\n\t@property({ type: ListMode, defaultValue: ListMode.None })\n\tmode!: `${ListMode}`;\n\n\t/\n\t Defines the text that is displayed when the component contains no items.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.noDataText\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\tnoDataText!: string;\n\n\t/\n\t Defines the component header text.\n\t * <br><br>\n\t * <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.headerText\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\theaderText!: string;\n\n\t/\n\t Defines the component footer text.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.footerText\n\t * @defaultvalue \"\"\n\t * @public\n\t /\n\t@property()\n\tfooterText!: string;\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.Tree.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 the IDs of the elements that label the component.\n\t \n\t @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.accessibleNameRef\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.8.0\n\t /\n\t@property()\n\taccessibleNameRef!: string;\n\n\t/\n\t Defines the description for the accessible role of the component.\n\t * @protected\n\t * @type {string}\n\t * @name sap.ui.webc.main.Tree.prototype.accessibleRoleDescription\n\t * @defaultvalue undefined\n\t * @since 1.10.0\n\t /\n\t@property({ defaultValue: undefined, noAttribute: true })\n\taccessibleRoleDescription?: string;\n\n\t/\n\t Defines the items of the component. Tree items may have other tree items as children.\n\t * <br><br>\n\t * <b>Note:</b> Use <code>ui5-tree-item</code> for the intended design.\n\t \n\t @type {sap.ui.webc.main.ITreeItem[]}\n\t * @name sap.ui.webc.main.Tree.prototype.default\n\t * @slot items\n\t * @public\n\t /\n\t@slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n\titems!: Array<TreeItemBase>;\n\n\t/\n\t Defines the component header.\n\t * <br><br>\n\t * <b>Note:</b> When the <code>header</code> slot is set, the\n\t * <code>headerText</code> property is ignored.\n\t \n\t @type {HTMLElement[]}\n\t * @name sap.ui.webc.main.Tree.prototype.header\n\t * @slot header\n\t * @public\n\t /\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\tonBeforeRendering() {\n\t\tthis._prepareTreeItems();\n\t}\n\n\tonAfterRendering() {\n\t\t// Note: this is a workaround for the problem that the list cannot invalidate itself when its only physical child is a slot (and the list items are inside the slot)\n\t\t// This code should be removed once a framework-level fix is implemented\n\t\tthis.shadowRoot!.querySelector<TreeList>(\"[ui5-tree-list]\")!.onBeforeRendering();\n\t}\n\n\tget list() {\n\t\treturn this.getDomRef() as TreeList;\n\t}\n\n\tget _role() {\n\t\treturn \"tree\";\n\t}\n\n\tget _label() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget _hasHeader() {\n\t\treturn !!this.header.length;\n\t}\n\n\t_onListItemStepIn(e: CustomEvent<TreeItemBaseStepInEventDetail>) {\n\t\tconst treeItem = e.detail.item;\n\t\tif (treeItem.items.length > 0) {\n\t\t\tconst firstChild = treeItem.items[0];\n\t\t\tconst firstChildListItem = this._getListItemForTreeItem(firstChild);\n\t\t\tfirstChildListItem && this.list.focusItem(firstChildListItem);\n\t\t}\n\t}\n\n\t_onListItemStepOut(e: CustomEvent<TreeItemBaseStepOutEventDetail>) {\n\t\tconst treeItem = e.detail.item;\n\t\tif (treeItem.parentElement !== this) {\n\t\t\tconst parent = treeItem.parentElement as TreeItemBase;\n\t\t\tconst parentListItem = this._getListItemForTreeItem(parent);\n\t\t\tparentListItem && this.list.focusItem(parentListItem);\n\t\t}\n\t}\n\n\t_onListItemToggle(e: CustomEvent<TreeItemBaseToggleEventDetail>) {\n\t\tconst treeItem = e.detail.item;\n\t\tconst defaultPrevented = !this.fireEvent<TreeItemToggleEventDetail>(\"item-toggle\", { item: treeItem }, true);\n\t\tif (!defaultPrevented) {\n\t\t\ttreeItem.toggle();\n\t\t}\n\t}\n\n\t_onListItemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst treeItem = e.detail.item as TreeItemBase;\n\n\t\tif (!this.fireEvent<TreeItemClickEventDetail>(\"item-click\", { item: treeItem }, true)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onListItemDelete(e: CustomEvent<ListItemDeleteEventDetail>) {\n\t\tconst treeItem = e.detail.item as TreeItemBase;\n\t\tthis.fireEvent<TreeItemDeleteEventDetail>(\"item-delete\", { item: treeItem });\n\t}\n\n\t_onListItemMouseOver(e: MouseEvent) {\n\t\tconst target = e.target;\n\n\t\tif (this._isInstanceOfTreeItemBase(target)) {\n\t\t\tthis.fireEvent<TreeItemMouseoverEventDetail>(\"item-mouseover\", { item: target });\n\t\t}\n\t}\n\n\t_onListItemMouseOut(e: MouseEvent) {\n\t\tconst target = e.target;\n\n\t\tif (this._isInstanceOfTreeItemBase(target)) {\n\t\t\tthis.fireEvent<TreeItemMouseoutEventDetail>(\"item-mouseout\", { item: target });\n\t\t}\n\t}\n\n\t_onListSelectionChange(e: CustomEvent<ListSelectionChangeEventDetail>) {\n\t\tconst previouslySelectedItems = e.detail.previouslySelectedItems as Array<TreeItemBase>;\n\t\tconst selectedItems = e.detail.selectedItems as Array<TreeItemBase>;\n\t\tconst targetItem = e.detail.targetItem as TreeItemBase;\n\n\t\tpreviouslySelectedItems.forEach(item => {\n\t\t\titem.selected = false;\n\t\t});\n\t\tselectedItems.forEach(item => {\n\t\t\titem.selected = true;\n\t\t});\n\n\t\tthis.fireEvent<TreeSelectionChangeEventDetail>(\"selection-change\", {\n\t\t\tpreviouslySelectedItems,\n\t\t\tselectedItems,\n\t\t\ttargetItem,\n\t\t});\n\t}\n\n\t_prepareTreeItems() {\n\t\t// set level to tree items\n\t\tthis.walk((item, level, index) => {\n\t\t\tconst parent = item.parentNode;\n\t\t\tconst ariaSetSize = (parent && parent.children.length) \|\| this.items.length;\n\n\t\t\titem.setAttribute(\"level\", level.toString());\n\n\t\t\titem._setsize = ariaSetSize;\n\t\t\titem._posinset = index + 1;\n\t\t});\n\t}\n\n\t/\n\t Returns the corresponding list item for a given tree item\n\t \n\t @param item The tree item\n\t * @protected\n\t /\n\t_getListItemForTreeItem(item: TreeItemBase) {\n\t\treturn this.getItems().find(listItem => listItem === item);\n\t}\n\n\t/\n\t Returns the a flat array of all tree items\n\t * @protected\n\t * @returns {Array}\n\t /\n\tgetItems(): Array<TreeItemBase> {\n\t\treturn this.list.getItems();\n\t}\n\n\t/\n\t Focus a tree item by its index in the flat array of all tree items\n\t * @protected\n\t * @param index\n\t /\n\tfocusItemByIndex(index: number) {\n\t\tconst item = this.getItems()[index];\n\t\titem && this.list.focusItem(item);\n\t}\n\n\t/\n\t Perform Depth-First-Search walk on the tree and run a callback on each node\n\t \n\t @public\n\t * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index\n\t */\n\twalk(callback: WalkCallback) {\n\t\twalkTree(this, 1, callback);\n\t}\n\n\t_isInstanceOfTreeItemBase(object: any): object is TreeItemBase {\n\t\treturn \"isTreeItem\" in object;\n\t}\n}\n\nconst walkTree = (el: Tree \| TreeItemBase, level: number, callback: WalkCallback) => {\n\t(el.items).forEach((item, index) => {\n\t\tcallback(item, level, index);\n\t\tif (item.items.length > 0) {\n\t\t\twalkTree(item, level + 1, callback);\n\t\t}\n\t});\n};\n\nTree.define();\n\nexport default Tree;\n\nexport type {\n\tTreeItemToggleEventDetail,\n\tTreeItemMouseoverEventDetail,\n\tTreeItemMouseoutEventDetail,\n\tTreeItemClickEventDetail,\n\tTreeItemDeleteEventDetail,\n\tTreeSelectionChangeEventDetail,\n};\n"]}

package/dist/TreeItem.d.ts CHANGED Viewed

@@ -60,7 +60,7 @@ declare class TreeItem extends TreeItemBase {
      * @public
      * @since 1.0.0-rc.15
      */
-    additionalTextState: ValueState;
-    get _showTitle(): boolean | 0;
+    additionalTextState: `${ValueState}`;
+    get _showTitle(): number;
 }
 export default TreeItem;

package/dist/TreeItem.js CHANGED Viewed

@@ -45,7 +45,7 @@ import treeItemCss from "./generated/themes/TreeItem.css.js";
  */
 let TreeItem = class TreeItem extends TreeItemBase {
     get _showTitle() {
-        return this.text.length && !this._minimal;
+        return this.text.length;
     }
 };
 __decorate([

package/dist/TreeItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeItem.js","sourceRoot":"","sources":["../src/TreeItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,UAAU,MAAM,kDAAkD,CAAC;AAC1E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,WAAW;AACX,OAAO,gBAAgB,MAAM,+CAA+C,CAAC;AAE7E,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAMH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAoClC,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,~~IAAI,~~CAAC~~,IAAI,CAAC,QAAQ,CAAC~~;~~IAC3C~~,CAAC;CACD,CAAA;AA7BA;IADC,QAAQ,EAAE;sCACG;AAWd;IADC,QAAQ,EAAE;gDACa;AAaxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC;~~qDAC7B~~;~~AAlC5B~~,QAAQ;IALb,aAAa,CAAC;QACd,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,gBAAgB;QAC1B,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC;KAC1C,CAAC;GACI,QAAQ,CAuCb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport TreeItemBase from \"./TreeItemBase.js\";\n// Template\nimport TreeItemTemplate from \"./generated/templates/TreeItemTemplate.lit.js\";\n\n// Styles\nimport treeItemCss from \"./generated/themes/TreeItem.css.js\";\n\n/*\n @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-tree-item</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 <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</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/TreeItem.js\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.TreeItem\n * @extends sap.ui.webc.main.TreeItemBase\n * @tagname ui5-tree-item\n * @public\n * @implements sap.ui.webc.main.ITreeItem\n * @since 1.0.0-rc.8\n /\n@customElement({\n\ttag: \"ui5-tree-item\",\n\ttemplate: TreeItemTemplate,\n\tstyles: [TreeItemBase.styles, treeItemCss],\n})\nclass TreeItem extends TreeItemBase {\n\t/\n\t Defines the text of the tree item.\n\t \n\t @public\n\t * @type {string}\n\t * @name sap.ui.webc.main.TreeItem.prototype.text\n\t * @defaultValue \"\"\n\t /\n\t@property()\n\ttext!: string;\n\n\t/\n\t Defines the <code>additionalText</code>, displayed in the end of the tree item.\n\t * @type {string}\n\t * @name sap.ui.webc.main.TreeItem.prototype.additionalText\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t /\n\t@property()\n\tadditionalText!: string;\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.TreeItem.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\tget _showTitle() {\n\t\treturn this.text.length ~~&& !this._minimal~~;\n\t}\n}\n\nTreeItem.define();\n\nexport default TreeItem;\n"]}
1	+ {"version":3,"file":"TreeItem.js","sourceRoot":"","sources":["../src/TreeItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,UAAU,MAAM,kDAAkD,CAAC;AAC1E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,WAAW;AACX,OAAO,gBAAgB,MAAM,+CAA+C,CAAC;AAE7E,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAMH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAoClC,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IACzB,CAAC;CACD,CAAA;AA7BA;IADC,QAAQ,EAAE;sCACG;AAWd;IADC,QAAQ,EAAE;gDACa;AAaxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC;qDACxB;AAlCjC,QAAQ;IALb,aAAa,CAAC;QACd,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,gBAAgB;QAC1B,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC;KAC1C,CAAC;GACI,QAAQ,CAuCb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport TreeItemBase from \"./TreeItemBase.js\";\n// Template\nimport TreeItemTemplate from \"./generated/templates/TreeItemTemplate.lit.js\";\n\n// Styles\nimport treeItemCss from \"./generated/themes/TreeItem.css.js\";\n\n/*\n @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-tree-item</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 <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</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/TreeItem.js\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.TreeItem\n * @extends sap.ui.webc.main.TreeItemBase\n * @tagname ui5-tree-item\n * @public\n * @implements sap.ui.webc.main.ITreeItem\n * @since 1.0.0-rc.8\n /\n@customElement({\n\ttag: \"ui5-tree-item\",\n\ttemplate: TreeItemTemplate,\n\tstyles: [TreeItemBase.styles, treeItemCss],\n})\nclass TreeItem extends TreeItemBase {\n\t/\n\t Defines the text of the tree item.\n\t \n\t @public\n\t * @type {string}\n\t * @name sap.ui.webc.main.TreeItem.prototype.text\n\t * @defaultValue \"\"\n\t /\n\t@property()\n\ttext!: string;\n\n\t/\n\t Defines the <code>additionalText</code>, displayed in the end of the tree item.\n\t * @type {string}\n\t * @name sap.ui.webc.main.TreeItem.prototype.additionalText\n\t * @defaultvalue \"\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t /\n\t@property()\n\tadditionalText!: string;\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.TreeItem.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\tget _showTitle() {\n\t\treturn this.text.length;\n\t}\n}\n\nTreeItem.define();\n\nexport default TreeItem;\n"]}

package/dist/TreeItemBase.d.ts CHANGED Viewed

@@ -101,7 +101,7 @@ declare class TreeItemBase extends ListItem {
      * @public
      * @since 1.0.0-rc.15
      */
-    additionalTextState: ValueState;
+    additionalTextState: `${ValueState}`;
     /**
      * Defines the accessible name of the component.
      *
@@ -112,20 +112,6 @@ declare class TreeItemBase extends ListItem {
      * @since 1.8.0
      */
     accessibleName: string;
-    /**
-     * Defines whether the toggle button is shown at the end, rather than at the beginning of the item
-     *
-     * @protected
-     * @since 1.0.0-rc.8
-     */
-    _toggleButtonEnd: boolean;
-    /**
-     * Defines whether the item shows minimal details - only icon (no text or toggle button)
-     *
-     * @protected
-     * @since 1.0.0-rc.8
-     */
-    _minimal: boolean;
     /**
      * @private
      * @since 1.0.0-rc.11
@@ -146,7 +132,6 @@ declare class TreeItemBase extends ListItem {
     accessibleRoleDescription?: string;
     /**
      * Defines if the item should be collapsible or not.
-     * It is true, for example, for the items inside the Popover of the Side Navigation
      * @private
      * @type {boolean}
      * @defaultvalue false
@@ -159,7 +144,7 @@ declare class TreeItemBase extends ListItem {
      * @since 1.10.0
      * @private
      */
-    ariaHaspopup?: HasPopup;
+    ariaHaspopup?: `${HasPopup}`;
     /**
      * Defines the items of the component.
      * <br />
@@ -176,30 +161,28 @@ declare class TreeItemBase extends ListItem {
     get classes(): ClassMap;
     get styles(): {
         preContent: {
-            "padding-left": string;
+            "padding-inline-start": string;
         };
     };
     get requiresToggleButton(): boolean;
     get effectiveLevel(): number;
     get hasParent(): boolean;
     get _toggleIconName(): "navigation-down-arrow" | "navigation-right-arrow";
-    get _showToggleButtonBeginning(): boolean;
-    get _showToggleButtonEnd(): boolean;
     get _ariaLabel(): string | undefined;
     get _accInfo(): {
         role: string;
         ariaExpanded: boolean | undefined;
-        ariaLevel: number | undefined;
+        ariaLevel: number;
         posinset: number;
         setsize: number;
         ariaSelectedText: string | undefined;
         listItemAriaLabel: string | undefined;
         ariaOwns: string | undefined;
-        ariaHaspopup: HasPopup | undefined;
-        ariaChecked: boolean;
+        ariaHaspopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree" | undefined;
         ariaSelected: boolean;
         ariaLabel: string;
         ariaLabelRadioButton: string;
+        ariaChecked?: boolean | undefined;
     };
     /**
      * Used to duck-type TreeItem elements without using instanceof

package/dist/TreeItemBase.js CHANGED Viewed

@@ -13,6 +13,7 @@ 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 { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
@@ -47,7 +48,7 @@ let TreeItemBase = TreeItemBase_1 = class TreeItemBase extends ListItem {
     get styles() {
         return {
             preContent: {
-                "padding-left": `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+                "padding-inline-start": `calc(var(${getScopedVarName("--_ui5-tree-indent-step")}) * ${this.effectiveLevel})`,
             },
         };
     }
@@ -63,35 +64,22 @@ let TreeItemBase = TreeItemBase_1 = class TreeItemBase extends ListItem {
     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,
+            role: "treeitem",
+            ariaExpanded: this.showToggleButton ? this.expanded : undefined,
+            ariaLevel: 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,
+            ariaSelected: this.selected,
         };
-        if (this._minimal) {
-            accInfoSettings.ariaChecked = this.selected;
-        }
-        else {
-            accInfoSettings.ariaSelected = this.selected;
-        }
         return { ...super._accInfo, ...accInfoSettings };
     }
     /**
@@ -168,12 +156,6 @@ __decorate([
 __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);
@@ -190,7 +172,14 @@ __decorate([
     property({ type: HasPopup, noAttribute: true })
 ], TreeItemBase.prototype, "ariaHaspopup", void 0);
 __decorate([
-    slot({ type: HTMLElement, "default": true })
+    slot({
+        type: HTMLElement,
+        invalidateOnChildChange: {
+            properties: false,
+            slots: ["default"],
+        },
+        "default": true,
+    })
 ], TreeItemBase.prototype, "items", void 0);
 TreeItemBase = TreeItemBase_1 = __decorate([
     customElement({

package/dist/TreeItemBase.js.map CHANGED Viewed

	@@ -1 +1 @@
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"]}
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 { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.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 @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 * @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({\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\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-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 _toggleIconName() {\n\t\treturn this.expanded ? \"navigation-down-arrow\" : \"navigation-right-arrow\";\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: \"treeitem\",\n\t\t\tariaExpanded: this.showToggleButton ? this.expanded : undefined,\n\t\t\tariaLevel: 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\tariaSelected: 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/WheelSlider.js CHANGED Viewed

@@ -10,6 +10,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { isDown, isUp, isPageUp, isPageDown, } from "@ui5/webcomponents-base/dist/Keys.js";
 import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
 import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
@@ -62,7 +63,7 @@ let WheelSlider = class WheelSlider extends UI5Element {
     }
     onAfterRendering() {
         if (!this._scroller.scrollContainer) {
-            this._scroller.scrollContainer = this.shadowRoot.querySelector(`#${this._id}--wrapper`);
+            this._scroller.scrollContainer = this.shadowRoot.querySelector(`[id="${this._id}--wrapper"]`);
         }
         if (!this.expanded) {
             this._scroller.scrollTo(0, 0);
@@ -99,7 +100,7 @@ let WheelSlider = class WheelSlider extends UI5Element {
         const defaultSize = getEffectiveContentDensity(document.body) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
         if (this.shadowRoot.querySelectorAll(".ui5-wheelslider-item").length) {
             const itemComputedStyle = getComputedStyle(this.shadowRoot.querySelector(".ui5-wheelslider-item"));
-            const itemHeightValue = itemComputedStyle.getPropertyValue("--_ui5_wheelslider_item_height");
+            const itemHeightValue = itemComputedStyle.getPropertyValue(getScopedVarName("--_ui5_wheelslider_item_height"));
             const onlyDigitsValue = itemHeightValue.replace("px", "");
             return Number(onlyDigitsValue) || defaultSize;
         }
@@ -139,6 +140,9 @@ let WheelSlider = class WheelSlider extends UI5Element {
         if (this._currentElementIndex) {
             return Math.floor(this._currentElementIndex / this._items.length);
         }
+        if (this._items.length > 0 && this.cyclic) {
+            return 1;
+        }
         return 0;
     }
     _selectElementByIndex(currentIndex) {