npm - @ukic/canary-web-components - Versions diffs - 3.0.0-canary.17 → 3.0.0-canary.18 - Mend

@ukic/canary-web-components 3.0.0-canary.17 → 3.0.0-canary.18

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 (501) hide show

package/dist/collection/components/ic-tree-item/ic-tree-item.js CHANGED Viewed

@@ -159,6 +159,9 @@ export class TreeItem {
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
+    watchExpandedHandler() {
+        this.icTreeItemExpanded.emit({ isExpanded: this.expanded });
+    }
     watchSelectedHandler() {
         if (this.selected) {
             this.icTreeItemSelected.emit({ id: this.el.id });
@@ -276,7 +279,7 @@ export class TreeItem {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '982527f405c1e35ef67d0780b6c82aaf2e80600c', class: {
+        return (h(Host, { key: '1421c6963e01047532edb262823d1a43cdb51609', class: {
                 "ic-tree-item-disabled": disabled,
                 "ic-tree-item-selected": !disabled && selected,
                 [`ic-tree-item-${size}`]: size !== "medium",
@@ -288,7 +291,7 @@ export class TreeItem {
             }, tabIndex: disabled ? -1 : 0, onClick: this.handleTreeItemClicked, ref: (el) => (this.treeItemElement = el), "aria-disabled": disabled ? "true" : "false", "aria-live": "polite" }, attrs, { onFocus: () => this.handleDisplayTooltip(true), onBlur: () => this.handleDisplayTooltip(false) }), this.isParent && (h("span", { class: {
                 ["arrow-dropdown"]: true,
                 ["tree-item-expanded"]: expanded,
-            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), h("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? h("slot", { name: "label" }) : label))), expanded && (h("div", { key: '74e55a9772c6239dc28e1f73b1d4dcb8f4d76299', "aria-hidden": `${!expanded}` }, h("slot", { key: '8103f61424d791ea64f4c51c0258f64b5cd06701' })))));
+            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), h("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? h("slot", { name: "label" }) : label))), expanded && (h("div", { key: '4090790d0b574a472c05c29198856a989342e078', "aria-hidden": `${!expanded}` }, h("slot", { key: 'ca48ba749e07761278710f0808c252929ce31497' })))));
     }
     static get is() { return "ic-tree-item"; }
     static get encapsulation() { return "shadow"; }
@@ -673,6 +676,21 @@ export class TreeItem {
                     "resolved": "{ id: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "icTreeItemExpanded",
+                "name": "icTreeItemExpanded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when tree item is expanded."
+                },
+                "complexType": {
+                    "original": "{ isExpanded: boolean }",
+                    "resolved": "{ isExpanded: boolean; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -729,6 +747,9 @@ export class TreeItem {
         return [{
                 "propName": "disabled",
                 "methodName": "watchDisabledHandler"
+            }, {
+                "propName": "expanded",
+                "methodName": "watchExpandedHandler"
             }, {
                 "propName": "selected",
                 "methodName": "watchSelectedHandler"

package/dist/collection/components/ic-tree-item/ic-tree-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tree-item.js","sourceRoot":"","sources":["../../../src/components/ic-tree-item/ic-tree-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n State,\n Listen,\n Method,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet treeItemIds = 0;\n\n/*\n @slot label - Content is set as the tree item label.\n * @slot icon - Content is placed to the left of the label.\n * @slot router-item - Handle routing by nesting your routes in this slot.\n /\n@Component({\n tag: \"ic-tree-item\",\n styleUrl: \"ic-tree-item.css\",\n shadow: true,\n})\nexport class TreeItem {\n private treeItemId = `ic-tree-item-${treeItemIds++}`;\n private treeItemElement: HTMLElement \| undefined;\n private treeItemTag = \"IC-TREE-ITEM\";\n private routerSlot: HTMLElement \| null;\n private hostMutationObserver: MutationObserver \| null = null;\n private TOOLTIP = \"ic-tooltip\";\n private TREE_ITEM_LABEL_CLASS_SELECTOR = \".tree-item-label\";\n private TREE_ITEM_CONTENT_CLASS_SELECTOR = \".tree-item-content\";\n\n @Element() el: HTMLIcTreeItemElement;\n\n @State() childTreeItems: HTMLIcTreeItemElement[];\n\n /\n If `true`, the tree item appears in the disabled state.\n /\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the tree item appears in the expanded state.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /\n @internal If `true`, the tree item will have an inset focus border.\n /\n @Prop() focusInset: boolean = false;\n\n /\n @internal Determines if the parent tree item has been expanded.\n /\n @Prop({ mutable: true }) hasParentExpanded: boolean = false;\n\n /\n The URL that the tree item link points to. If set, the tree item will render as an \"a\" tag, otherwise it will render as a div.\n /\n @Prop() href?: string \| undefined;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string = \"\";\n\n /\n @internal If `true`, the tree item is a parent of other tree items.\n /\n @Prop({ mutable: true }) isParent: boolean = false;\n\n /\n The label of the tree item.\n /\n @Prop() label: string = \"\";\n\n /\n @internal Holds the previous truncation state before the screen switches to a small viewport, so it can be reset when screen size changes again.\n /\n @Prop() previousTruncateTreeItem?: boolean;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n If `true`, the tree item appears in the selected state.\n /\n @Prop({ mutable: true }) selected: boolean = false;\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n if (this.selected) {\n this.icTreeItemSelected.emit({ id: this.el.id });\n }\n this.updateAriaLabel();\n }\n\n /\n @internal Determines the size of the tree item.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the tree item label will be truncated instead of text wrapping.\n /\n @Prop() truncateTreeItem?: boolean;\n\n /\n Emitted when tree item is selected.\n /\n @Event() icTreeItemSelected: EventEmitter<{ id: string }>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.childTreeItems = Array.from((this.el as HTMLElement).children).filter(\n (child) => child.tagName === this.treeItemTag\n ) as HTMLIcTreeItemElement[];\n\n if (this.childTreeItems.length > 0) {\n this.isParent = true;\n }\n }\n\n componentDidLoad(): void {\n this.setTreeItemPadding();\n\n this.updateAriaLabel();\n\n !isSlotUsed(this.el, \"label\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tree item\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"icon\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n componentDidRender(): void {\n this.truncateTreeItem\n ? this.truncateTreeItemLabel(this.el)\n : this.removeTreeItemTruncation(this.el);\n if (this.expanded) {\n this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n child.truncateTreeItem\n ? this.truncateTreeItemLabel(child)\n : this.removeTreeItemTruncation(child);\n });\n }\n }\n\n componentDidUpdate(): void {\n if (this.hasParentExpanded) {\n this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n child.truncateTreeItem\n ? this.truncateTreeItemLabel(child)\n : this.removeTreeItemTruncation(child);\n });\n this.hasParentExpanded = false;\n }\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\" \|\| ev.key === \" \") {\n ev.stopImmediatePropagation();\n this.handleTreeItemClicked();\n }\n }\n\n /\n Sets focus on the native `input`.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.hasRouterSlot()) {\n this.routerSlot?.focus();\n } else {\n this.treeItemElement?.focus();\n }\n }\n\n private handleTreeItemClicked = (): void => {\n if (this.isParent) {\n this.expanded = !this.expanded;\n this.hasParentExpanded = true;\n }\n\n this.updateAriaLabel();\n this.selected = true;\n this.watchSelectedHandler();\n };\n\n /\n @internal Updates the aria-label of the tree item.\n /\n @Method()\n async updateAriaLabel(): Promise<void> {\n let ariaLabel;\n\n if (this.hasRouterSlot()) {\n ariaLabel = this.routerSlot!.textContent;\n } else if (isSlotUsed(this.el, \"label\")) {\n ariaLabel = this.el.querySelector('[slot=\"label\"]')!.textContent;\n } else {\n ariaLabel = this.label;\n }\n\n if (this.isParent) {\n ariaLabel = `${ariaLabel}, triggers submenu, ${\n this.expanded ? \"expanded\" : \"collapsed\"\n }`;\n }\n\n if (this.el.parentElement) {\n const treeItems = Array.from(\n (this.el.parentElement as HTMLElement).children\n ).filter(\n (child) => child.tagName === this.treeItemTag\n ) as HTMLIcTreeItemElement[];\n\n const index = treeItems.indexOf(this.el) + 1;\n const parentChildren = treeItems.length;\n\n ariaLabel = `${ariaLabel}, ${index} of ${parentChildren}`;\n }\n\n if (this.selected) {\n ariaLabel = `${ariaLabel}, active`;\n }\n\n if (this.disabled) {\n ariaLabel = `${ariaLabel}, dimmed`;\n }\n\n if (this.hasRouterSlot()) {\n this.routerSlot!.ariaLabel = ariaLabel;\n } else {\n this.treeItemElement!.ariaLabel = ariaLabel;\n }\n }\n\n private setTreeItemPadding = () => {\n let level = 1;\n let parentElement = this.el.parentElement;\n const treeItemContent = this.el.shadowRoot?.querySelector(\n this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n ) as HTMLElement;\n\n if (!parentElement) {\n return;\n }\n\n const isSiblingOfParent = Array.from(parentElement.children).some(\n (sibling) =>\n sibling !== this.el &&\n !sibling.querySelector('[slot=\"router-item\"]') &&\n !sibling.querySelector('[slot=\"label\"]') &&\n sibling.children.length > 0\n );\n\n if (\n (isSiblingOfParent && !this.el.isParent) \|\|\n (parentElement.tagName === this.treeItemTag && !this.el.isParent)\n ) {\n if (this.hasRouterSlot()) {\n this.routerSlot!.classList.add(\"ic-tree-item-single\");\n } else {\n treeItemContent.classList.add(\"ic-tree-item-single\");\n }\n }\n\n while (parentElement) {\n if (parentElement.tagName === this.treeItemTag) {\n level++;\n treeItemContent.style.paddingLeft = !this.el.isParent\n ? `calc(var(--ic-space-${isSiblingOfParent ? \"xl\" : \"xs\"}) + ${\n level (isSiblingOfParent ? 16 : 24)\n }px)`\n : `${level * 16}px`;\n }\n parentElement = parentElement.parentElement;\n }\n };\n\n private truncateTreeItemLabel = (treeItem: HTMLIcTreeItemElement) => {\n let typographyEl =\n treeItem.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n this.TREE_ITEM_LABEL_CLASS_SELECTOR\n );\n const slottedContent = treeItem.querySelector(\"[slot='router-item']\");\n let contentHeight = slottedContent?.scrollHeight;\n\n if (!typographyEl && slottedContent) {\n const newTypographyEl = document.createElement(\"ic-typography\");\n newTypographyEl.innerHTML = slottedContent.textContent!;\n newTypographyEl.classList.add(\"tree-item-label\");\n slottedContent.replaceChild(newTypographyEl, slottedContent.firstChild!);\n typographyEl = newTypographyEl;\n } else if (typographyEl) {\n contentHeight = typographyEl.scrollHeight;\n }\n\n const tooltipAlreadyExists = !!typographyEl?.closest(this.TOOLTIP);\n const treeContent =\n treeItem.shadowRoot?.querySelector(\n this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n ) \|\| slottedContent;\n\n if (\n contentHeight &&\n treeContent?.clientHeight &&\n contentHeight > treeContent.clientHeight &&\n !tooltipAlreadyExists &&\n typographyEl\n ) {\n const tooltipEl = document.createElement(\"ic-tooltip\");\n tooltipEl.setAttribute(\"target\", this.el.id);\n tooltipEl.setAttribute(\"label\", typographyEl.textContent!);\n tooltipEl.setAttribute(\"placement\", \"right\");\n\n if (treeContent === slottedContent) {\n treeContent.addEventListener(\"focus\", () =>\n this.handleDisplayTooltip(true)\n );\n treeContent.addEventListener(\"blur\", () =>\n this.handleDisplayTooltip(false)\n );\n tooltipEl.setAttribute(\"style\", \"overflow:hidden;\");\n typographyEl.setAttribute(\n \"style\",\n \"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\n );\n } else {\n tooltipEl.classList.add(\"ic-tooltip-overflow\");\n typographyEl.classList.add(\"ic-text-overflow\");\n }\n\n treeContent.appendChild(tooltipEl);\n tooltipEl.appendChild(typographyEl);\n }\n };\n\n private removeTreeItemTruncation = (treeItem: HTMLIcTreeItemElement) => {\n const slottedContent = treeItem.querySelector(\"[slot='router-item']\");\n const typographyEl: HTMLIcTypographyElement =\n treeItem.shadowRoot?.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR) \|\|\n slottedContent!.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR)!;\n const tooltipEl = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n const treeContent =\n treeItem.shadowRoot?.querySelector(\n this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n ) \|\| slottedContent!;\n\n if (tooltipEl) {\n typographyEl.classList.remove(\"ic-text-overflow\");\n treeContent.replaceChild(\n treeContent === slottedContent\n ? typographyEl.firstChild!\n : typographyEl,\n tooltipEl\n );\n }\n };\n\n private hasRouterSlot(): boolean {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n return !!this.routerSlot;\n }\n\n private handleDisplayTooltip = (display: boolean) => {\n const typographyEl =\n this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n this.TREE_ITEM_LABEL_CLASS_SELECTOR\n ) \|\| this.el.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR);\n const tooltip = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n\n tooltip?.displayTooltip(display);\n };\n\n render() {\n const { disabled, label, selected, size, expanded, focusInset, theme } =\n this;\n\n const Component = this.href && !this.disabled ? \"a\" : \"div\";\n\n const attrs = Component == \"a\" && {\n href: this.href,\n hrefLang: this.hreflang,\n referrerPolicy: this.referrerpolicy,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <Host\n class={{\n \"ic-tree-item-disabled\": disabled,\n \"ic-tree-item-selected\": !disabled && selected,\n [`ic-tree-item-${size}`]: size !== \"medium\",\n \"ic-tree-item-focus-inset\": focusInset,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tree-item-truncate\": !!this.truncateTreeItem,\n }}\n id={this.treeItemId}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\" />\n ) : (\n <Component\n class={{\n \"tree-item-content\": true,\n }}\n tabIndex={disabled ? -1 : 0}\n onClick={this.handleTreeItemClicked}\n ref={(el) => (this.treeItemElement = el)}\n aria-disabled={disabled ? \"true\" : \"false\"}\n aria-live=\"polite\"\n {...attrs}\n onFocus={() => this.handleDisplayTooltip(true)}\n onBlur={() => this.handleDisplayTooltip(false)}\n >\n {this.isParent && (\n <span\n class={{\n [\"arrow-dropdown\"]: true,\n [\"tree-item-expanded\"]: expanded,\n }}\n aria-hidden=\"true\"\n innerHTML={arrowDropdown}\n />\n )}\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography class=\"tree-item-label\">\n {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n </ic-typography>\n </Component>\n )}\n {expanded && (\n <div aria-hidden={`${!expanded}`}>\n <slot />\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tree-item.js","sourceRoot":"","sources":["../../../src/components/ic-tree-item/ic-tree-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,aAAa,MAAM,iCAAiC,CAAC;AAE5D,IAAI,WAAW,GAAG,CAAC,CAAC;AAEpB;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAMU,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;QAE7C,gBAAW,GAAG,cAAc,CAAC;QAE7B,yBAAoB,GAA4B,IAAI,CAAC;QACrD,YAAO,GAAG,YAAY,CAAC;QACvB,mCAA8B,GAAG,kBAAkB,CAAC;QACpD,qCAAgC,GAAG,oBAAoB,CAAC;QAMhE;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAMlC;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAKnD;;WAEG;QACK,eAAU,GAAY,KAAK,CAAC;QAEpC;;WAEG;QACsB,sBAAiB,GAAY,KAAK,CAAC;QAO5D;;WAEG;QACK,aAAQ,GAAY,EAAE,CAAC;QAE/B;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAiB3B;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QASnD;;WAEG;QACK,SAAI,GAAa,QAAQ,CAAC;QAOlC;;WAEG;QACK,UAAK,GAAiB,SAAS,CAAC;QA+FhC,0BAAqB,GAAG,GAAS,EAAE;YACzC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC/B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAChC,CAAC;YAED,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC,CAAC;QAmDM,uBAAkB,GAAG,GAAG,EAAE;;YAChC,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,IAAI,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YAC1C,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CACvD,IAAI,CAAC,gCAAgC,CACvB,CAAC;YAEjB,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YAED,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC/D,CAAC,OAAO,EAAE,EAAE,CACV,OAAO,KAAK,IAAI,CAAC,EAAE;gBACnB,CAAC,OAAO,CAAC,aAAa,CAAC,sBAAsB,CAAC;gBAC9C,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC;gBACxC,OAAO,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAC9B,CAAC;YAEF,IACE,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;gBACxC,CAAC,aAAa,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EACjE,CAAC;gBACD,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;oBACzB,IAAI,CAAC,UAAW,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;gBACxD,CAAC;qBAAM,CAAC;oBACN,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;gBACvD,CAAC;YACH,CAAC;YAED,OAAO,aAAa,EAAE,CAAC;gBACrB,IAAI,aAAa,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;oBAC/C,KAAK,EAAE,CAAC;oBACR,eAAe,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ;wBACnD,CAAC,CAAC,uBAAuB,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,OACpD,KAAK,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CACtC,KAAK;wBACP,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,IAAI,CAAC;gBACxB,CAAC;gBACD,aAAa,GAAG,aAAa,CAAC,aAAa,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC;QAEM,0BAAqB,GAAG,CAAC,QAA+B,EAAE,EAAE;;YAClE,IAAI,YAAY,GACd,MAAA,QAAQ,CAAC,UAAU,0CAAE,aAAa,CAChC,IAAI,CAAC,8BAA8B,CACpC,CAAC;YACJ,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;YACtE,IAAI,aAAa,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,CAAC;YAEjD,IAAI,CAAC,YAAY,IAAI,cAAc,EAAE,CAAC;gBACpC,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;gBAChE,eAAe,CAAC,SAAS,GAAG,cAAc,CAAC,WAAY,CAAC;gBACxD,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;gBACjD,cAAc,CAAC,YAAY,CAAC,eAAe,EAAE,cAAc,CAAC,UAAW,CAAC,CAAC;gBACzE,YAAY,GAAG,eAAe,CAAC;YACjC,CAAC;iBAAM,IAAI,YAAY,EAAE,CAAC;gBACxB,aAAa,GAAG,YAAY,CAAC,YAAY,CAAC;YAC5C,CAAC;YAED,MAAM,oBAAoB,GAAG,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA,CAAC;YACnE,MAAM,WAAW,GACf,CAAA,MAAA,QAAQ,CAAC,UAAU,0CAAE,aAAa,CAChC,IAAI,CAAC,gCAAgC,CACtC,KAAI,cAAc,CAAC;YAEtB,IACE,aAAa;iBACb,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,YAAY,CAAA;gBACzB,aAAa,GAAG,WAAW,CAAC,YAAY;gBACxC,CAAC,oBAAoB;gBACrB,YAAY,EACZ,CAAC;gBACD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;gBACvD,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;gBAC7C,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,WAAY,CAAC,CAAC;gBAC3D,SAAS,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;gBAE7C,IAAI,WAAW,KAAK,cAAc,EAAE,CAAC;oBACnC,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CACzC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAChC,CAAC;oBACF,WAAW,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE,CACxC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CACjC,CAAC;oBACF,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;oBACpD,YAAY,CAAC,YAAY,CACvB,OAAO,EACP,4DAA4D,CAC7D,CAAC;gBACJ,CAAC;qBAAM,CAAC;oBACN,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;oBAC/C,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;gBACjD,CAAC;gBAED,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gBACnC,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YACtC,CAAC;QACH,CAAC,CAAC;QAEM,6BAAwB,GAAG,CAAC,QAA+B,EAAE,EAAE;;YACrE,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;YACtE,MAAM,YAAY,GAChB,CAAA,MAAA,QAAQ,CAAC,UAAU,0CAAE,aAAa,CAAC,IAAI,CAAC,8BAA8B,CAAC;gBACvE,cAAe,CAAC,aAAa,CAAC,IAAI,CAAC,8BAA8B,CAAE,CAAC;YACtE,MAAM,SAAS,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAuB,IAAI,CAAC,OAAO,CAAC,CAAC;YAC5E,MAAM,WAAW,GACf,CAAA,MAAA,QAAQ,CAAC,UAAU,0CAAE,aAAa,CAChC,IAAI,CAAC,gCAAgC,CACtC,KAAI,cAAe,CAAC;YAEvB,IAAI,SAAS,EAAE,CAAC;gBACd,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;gBAClD,WAAW,CAAC,YAAY,CACtB,WAAW,KAAK,cAAc;oBAC5B,CAAC,CAAC,YAAY,CAAC,UAAW;oBAC1B,CAAC,CAAC,YAAY,EAChB,SAAS,CACV,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAOM,yBAAoB,GAAG,CAAC,OAAgB,EAAE,EAAE;;YAClD,MAAM,YAAY,GAChB,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC/B,IAAI,CAAC,8BAA8B,CACpC,KAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;YAClE,MAAM,OAAO,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAuB,IAAI,CAAC,OAAO,CAAC,CAAC;YAE1E,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC,CAAC;KAwEH;IA7bC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC;IAOD,oBAAoB;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC9D,CAAC;IAmDD,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACnD,CAAC;QACD,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAgCD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAE,IAAI,CAAC,EAAkB,CAAC,QAAQ,CAAC,CAAC,MAAM,CACxE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,CACnB,CAAC;QAE7B,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;YAC3B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChE,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,CACpD,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IACD,kBAAkB;QAChB,IAAI,CAAC,gBAAgB;YACnB,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC;YACrC,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,KAA4B,EAAE,EAAE;gBAC3D,KAAK,CAAC,gBAAgB;oBACpB,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC;oBACnC,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,KAA4B,EAAE,EAAE;gBAC3D,KAAK,CAAC,gBAAgB;oBACpB,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC;oBACnC,CAAC,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACzC,EAAE,CAAC,wBAAwB,EAAE,CAAC;YAC9B,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YACzB,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK,EAAE,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,MAAA,IAAI,CAAC,eAAe,0CAAE,KAAK,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAaD;;OAEG;IAEH,KAAK,CAAC,eAAe;QACnB,IAAI,SAAS,CAAC;QAEd,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YACzB,SAAS,GAAG,IAAI,CAAC,UAAW,CAAC,WAAW,CAAC;QAC3C,CAAC;aAAM,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC;YACxC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC,WAAW,CAAC;QACnE,CAAC;aAAM,CAAC;YACN,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,SAAS,GAAG,GAAG,SAAS,uBACtB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAC/B,EAAE,CAAC;QACL,CAAC;QAED,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC;YAC1B,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CACzB,IAAI,CAAC,EAAE,CAAC,aAA6B,CAAC,QAAQ,CAChD,CAAC,MAAM,CACN,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,CACnB,CAAC;YAE7B,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;YAC7C,MAAM,cAAc,GAAG,SAAS,CAAC,MAAM,CAAC;YAExC,SAAS,GAAG,GAAG,SAAS,KAAK,KAAK,OAAO,cAAc,EAAE,CAAC;QAC5D,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,SAAS,GAAG,GAAG,SAAS,UAAU,CAAC;QACrC,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,SAAS,GAAG,GAAG,SAAS,UAAU,CAAC;QACrC,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YACzB,IAAI,CAAC,UAAW,CAAC,SAAS,GAAG,SAAS,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAgB,CAAC,SAAS,GAAG,SAAS,CAAC;QAC9C,CAAC;IACH,CAAC;IA6HO,aAAa;QACnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAChE,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IAYD,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,GACpE,IAAI,CAAC;QAEP,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QAE5D,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,IAAI;YAChC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,uBAAuB,EAAE,QAAQ;gBACjC,uBAAuB,EAAE,CAAC,QAAQ,IAAI,QAAQ;gBAC9C,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,QAAQ;gBAC3C,0BAA0B,EAAE,UAAU;gBACtC,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;gBAC1C,uBAAuB,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB;aACjD,EACD,EAAE,EAAE,IAAI,CAAC,UAAU;YAElB,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CACtB,YAAM,IAAI,EAAC,aAAa,GAAG,CAC5B,CAAC,CAAC,CAAC,CACF,EAAC,SAAS,kBACR,KAAK,EAAE;oBACL,mBAAmB,EAAE,IAAI;iBAC1B,EACD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,mBACzB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,eAChC,QAAQ,IACd,KAAK,IACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAC9C,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;gBAE7C,IAAI,CAAC,QAAQ,IAAI,CAChB,YACE,KAAK,EAAE;wBACL,CAAC,gBAAgB,CAAC,EAAE,IAAI;wBACxB,CAAC,oBAAoB,CAAC,EAAE,QAAQ;qBACjC,iBACW,MAAM,EAClB,SAAS,EAAE,aAAa,GACxB,CACH;gBACA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAC9B,WAAK,KAAK,EAAC,gBAAgB;oBACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP;gBACD,qBAAe,KAAK,EAAC,iBAAiB,IACnC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,CAC/C,CACN,CACb;YACA,QAAQ,IAAI,CACX,2EAAkB,GAAG,CAAC,QAAQ,EAAE;gBAC9B,8DAAQ,CACJ,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Host,\n Watch,\n State,\n Listen,\n Method,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet treeItemIds = 0;\n\n/*\n @slot label - Content is set as the tree item label.\n * @slot icon - Content is placed to the left of the label.\n * @slot router-item - Handle routing by nesting your routes in this slot.\n /\n@Component({\n tag: \"ic-tree-item\",\n styleUrl: \"ic-tree-item.css\",\n shadow: true,\n})\nexport class TreeItem {\n private treeItemId = `ic-tree-item-${treeItemIds++}`;\n private treeItemElement: HTMLElement \| undefined;\n private treeItemTag = \"IC-TREE-ITEM\";\n private routerSlot: HTMLElement \| null;\n private hostMutationObserver: MutationObserver \| null = null;\n private TOOLTIP = \"ic-tooltip\";\n private TREE_ITEM_LABEL_CLASS_SELECTOR = \".tree-item-label\";\n private TREE_ITEM_CONTENT_CLASS_SELECTOR = \".tree-item-content\";\n\n @Element() el: HTMLIcTreeItemElement;\n\n @State() childTreeItems: HTMLIcTreeItemElement[];\n\n /\n If `true`, the tree item appears in the disabled state.\n /\n @Prop() disabled: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the tree item appears in the expanded state.\n /\n @Prop({ mutable: true }) expanded: boolean = false;\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.icTreeItemExpanded.emit({ isExpanded: this.expanded });\n }\n /\n @internal If `true`, the tree item will have an inset focus border.\n /\n @Prop() focusInset: boolean = false;\n\n /\n @internal Determines if the parent tree item has been expanded.\n /\n @Prop({ mutable: true }) hasParentExpanded: boolean = false;\n\n /\n The URL that the tree item link points to. If set, the tree item will render as an \"a\" tag, otherwise it will render as a div.\n /\n @Prop() href?: string \| undefined;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string = \"\";\n\n /\n @internal If `true`, the tree item is a parent of other tree items.\n /\n @Prop({ mutable: true }) isParent: boolean = false;\n\n /\n The label of the tree item.\n /\n @Prop() label: string = \"\";\n\n /\n @internal Holds the previous truncation state before the screen switches to a small viewport, so it can be reset when screen size changes again.\n /\n @Prop() previousTruncateTreeItem?: boolean;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n If `true`, the tree item appears in the selected state.\n /\n @Prop({ mutable: true }) selected: boolean = false;\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n if (this.selected) {\n this.icTreeItemSelected.emit({ id: this.el.id });\n }\n this.updateAriaLabel();\n }\n\n /\n @internal Determines the size of the tree item.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the tree item label will be truncated instead of text wrapping.\n /\n @Prop() truncateTreeItem?: boolean;\n\n /\n Emitted when tree item is selected.\n /\n @Event() icTreeItemSelected: EventEmitter<{ id: string }>;\n\n /\n Emitted when tree item is expanded.\n /\n @Event() icTreeItemExpanded: EventEmitter<{ isExpanded: boolean }>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.childTreeItems = Array.from((this.el as HTMLElement).children).filter(\n (child) => child.tagName === this.treeItemTag\n ) as HTMLIcTreeItemElement[];\n\n if (this.childTreeItems.length > 0) {\n this.isParent = true;\n }\n }\n\n componentDidLoad(): void {\n this.setTreeItemPadding();\n\n this.updateAriaLabel();\n\n !isSlotUsed(this.el, \"label\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tree item\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"icon\", this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n componentDidRender(): void {\n this.truncateTreeItem\n ? this.truncateTreeItemLabel(this.el)\n : this.removeTreeItemTruncation(this.el);\n if (this.expanded) {\n this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n child.truncateTreeItem\n ? this.truncateTreeItemLabel(child)\n : this.removeTreeItemTruncation(child);\n });\n }\n }\n\n componentDidUpdate(): void {\n if (this.hasParentExpanded) {\n this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n child.truncateTreeItem\n ? this.truncateTreeItemLabel(child)\n : this.removeTreeItemTruncation(child);\n });\n this.hasParentExpanded = false;\n }\n }\n\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Enter\" \|\| ev.key === \" \") {\n ev.stopImmediatePropagation();\n this.handleTreeItemClicked();\n }\n }\n\n /\n Sets focus on the native `input`.\n /\n @Method()\n async setFocus(): Promise<void> {\n if (this.hasRouterSlot()) {\n this.routerSlot?.focus();\n } else {\n this.treeItemElement?.focus();\n }\n }\n\n private handleTreeItemClicked = (): void => {\n if (this.isParent) {\n this.expanded = !this.expanded;\n this.hasParentExpanded = true;\n }\n\n this.updateAriaLabel();\n this.selected = true;\n this.watchSelectedHandler();\n };\n\n /\n @internal Updates the aria-label of the tree item.\n /\n @Method()\n async updateAriaLabel(): Promise<void> {\n let ariaLabel;\n\n if (this.hasRouterSlot()) {\n ariaLabel = this.routerSlot!.textContent;\n } else if (isSlotUsed(this.el, \"label\")) {\n ariaLabel = this.el.querySelector('[slot=\"label\"]')!.textContent;\n } else {\n ariaLabel = this.label;\n }\n\n if (this.isParent) {\n ariaLabel = `${ariaLabel}, triggers submenu, ${\n this.expanded ? \"expanded\" : \"collapsed\"\n }`;\n }\n\n if (this.el.parentElement) {\n const treeItems = Array.from(\n (this.el.parentElement as HTMLElement).children\n ).filter(\n (child) => child.tagName === this.treeItemTag\n ) as HTMLIcTreeItemElement[];\n\n const index = treeItems.indexOf(this.el) + 1;\n const parentChildren = treeItems.length;\n\n ariaLabel = `${ariaLabel}, ${index} of ${parentChildren}`;\n }\n\n if (this.selected) {\n ariaLabel = `${ariaLabel}, active`;\n }\n\n if (this.disabled) {\n ariaLabel = `${ariaLabel}, dimmed`;\n }\n\n if (this.hasRouterSlot()) {\n this.routerSlot!.ariaLabel = ariaLabel;\n } else {\n this.treeItemElement!.ariaLabel = ariaLabel;\n }\n }\n\n private setTreeItemPadding = () => {\n let level = 1;\n let parentElement = this.el.parentElement;\n const treeItemContent = this.el.shadowRoot?.querySelector(\n this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n ) as HTMLElement;\n\n if (!parentElement) {\n return;\n }\n\n const isSiblingOfParent = Array.from(parentElement.children).some(\n (sibling) =>\n sibling !== this.el &&\n !sibling.querySelector('[slot=\"router-item\"]') &&\n !sibling.querySelector('[slot=\"label\"]') &&\n sibling.children.length > 0\n );\n\n if (\n (isSiblingOfParent && !this.el.isParent) \|\|\n (parentElement.tagName === this.treeItemTag && !this.el.isParent)\n ) {\n if (this.hasRouterSlot()) {\n this.routerSlot!.classList.add(\"ic-tree-item-single\");\n } else {\n treeItemContent.classList.add(\"ic-tree-item-single\");\n }\n }\n\n while (parentElement) {\n if (parentElement.tagName === this.treeItemTag) {\n level++;\n treeItemContent.style.paddingLeft = !this.el.isParent\n ? `calc(var(--ic-space-${isSiblingOfParent ? \"xl\" : \"xs\"}) + ${\n level (isSiblingOfParent ? 16 : 24)\n }px)`\n : `${level * 16}px`;\n }\n parentElement = parentElement.parentElement;\n }\n };\n\n private truncateTreeItemLabel = (treeItem: HTMLIcTreeItemElement) => {\n let typographyEl =\n treeItem.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n this.TREE_ITEM_LABEL_CLASS_SELECTOR\n );\n const slottedContent = treeItem.querySelector(\"[slot='router-item']\");\n let contentHeight = slottedContent?.scrollHeight;\n\n if (!typographyEl && slottedContent) {\n const newTypographyEl = document.createElement(\"ic-typography\");\n newTypographyEl.innerHTML = slottedContent.textContent!;\n newTypographyEl.classList.add(\"tree-item-label\");\n slottedContent.replaceChild(newTypographyEl, slottedContent.firstChild!);\n typographyEl = newTypographyEl;\n } else if (typographyEl) {\n contentHeight = typographyEl.scrollHeight;\n }\n\n const tooltipAlreadyExists = !!typographyEl?.closest(this.TOOLTIP);\n const treeContent =\n treeItem.shadowRoot?.querySelector(\n this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n ) \|\| slottedContent;\n\n if (\n contentHeight &&\n treeContent?.clientHeight &&\n contentHeight > treeContent.clientHeight &&\n !tooltipAlreadyExists &&\n typographyEl\n ) {\n const tooltipEl = document.createElement(\"ic-tooltip\");\n tooltipEl.setAttribute(\"target\", this.el.id);\n tooltipEl.setAttribute(\"label\", typographyEl.textContent!);\n tooltipEl.setAttribute(\"placement\", \"right\");\n\n if (treeContent === slottedContent) {\n treeContent.addEventListener(\"focus\", () =>\n this.handleDisplayTooltip(true)\n );\n treeContent.addEventListener(\"blur\", () =>\n this.handleDisplayTooltip(false)\n );\n tooltipEl.setAttribute(\"style\", \"overflow:hidden;\");\n typographyEl.setAttribute(\n \"style\",\n \"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\n );\n } else {\n tooltipEl.classList.add(\"ic-tooltip-overflow\");\n typographyEl.classList.add(\"ic-text-overflow\");\n }\n\n treeContent.appendChild(tooltipEl);\n tooltipEl.appendChild(typographyEl);\n }\n };\n\n private removeTreeItemTruncation = (treeItem: HTMLIcTreeItemElement) => {\n const slottedContent = treeItem.querySelector(\"[slot='router-item']\");\n const typographyEl: HTMLIcTypographyElement =\n treeItem.shadowRoot?.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR) \|\|\n slottedContent!.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR)!;\n const tooltipEl = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n const treeContent =\n treeItem.shadowRoot?.querySelector(\n this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n ) \|\| slottedContent!;\n\n if (tooltipEl) {\n typographyEl.classList.remove(\"ic-text-overflow\");\n treeContent.replaceChild(\n treeContent === slottedContent\n ? typographyEl.firstChild!\n : typographyEl,\n tooltipEl\n );\n }\n };\n\n private hasRouterSlot(): boolean {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n return !!this.routerSlot;\n }\n\n private handleDisplayTooltip = (display: boolean) => {\n const typographyEl =\n this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n this.TREE_ITEM_LABEL_CLASS_SELECTOR\n ) \|\| this.el.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR);\n const tooltip = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n\n tooltip?.displayTooltip(display);\n };\n\n render() {\n const { disabled, label, selected, size, expanded, focusInset, theme } =\n this;\n\n const Component = this.href && !this.disabled ? \"a\" : \"div\";\n\n const attrs = Component == \"a\" && {\n href: this.href,\n hrefLang: this.hreflang,\n referrerPolicy: this.referrerpolicy,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <Host\n class={{\n \"ic-tree-item-disabled\": disabled,\n \"ic-tree-item-selected\": !disabled && selected,\n [`ic-tree-item-${size}`]: size !== \"medium\",\n \"ic-tree-item-focus-inset\": focusInset,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tree-item-truncate\": !!this.truncateTreeItem,\n }}\n id={this.treeItemId}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\" />\n ) : (\n <Component\n class={{\n \"tree-item-content\": true,\n }}\n tabIndex={disabled ? -1 : 0}\n onClick={this.handleTreeItemClicked}\n ref={(el) => (this.treeItemElement = el)}\n aria-disabled={disabled ? \"true\" : \"false\"}\n aria-live=\"polite\"\n {...attrs}\n onFocus={() => this.handleDisplayTooltip(true)}\n onBlur={() => this.handleDisplayTooltip(false)}\n >\n {this.isParent && (\n <span\n class={{\n [\"arrow-dropdown\"]: true,\n [\"tree-item-expanded\"]: expanded,\n }}\n aria-hidden=\"true\"\n innerHTML={arrowDropdown}\n />\n )}\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography class=\"tree-item-label\">\n {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n </ic-typography>\n </Component>\n )}\n {expanded && (\n <div aria-hidden={`${!expanded}`}>\n <slot />\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js CHANGED Viewed

@@ -701,6 +701,10 @@ export const Expanded = {
         },
         { label: "Hot chocolate" },
       ];
+      const expandElement = document.querySelector("#expanded-tree-view");
+      expandElement.addEventListener("icTreeItemExpanded", function (event) {
+        console.log("icTreeItemExpanded", event.detail);
+      });
     </script>
   `,
     name: "Expanded",
@@ -708,7 +712,7 @@ export const Expanded = {
 export const ExpandedSlotted = {
     render: () => html `
     <div style="width:250px">
-      <ic-tree-view heading="Menu">
+      <ic-tree-view heading="Menu" id="expanded-slotted-tree-view">
         <ic-tree-item label="Coffee" expanded="true">
           <ic-tree-item label="Americano" expanded="true">
             <ic-tree-item label="With milk"></ic-tree-item>
@@ -722,6 +726,14 @@ export const ExpandedSlotted = {
         </ic-tree-item>
         <ic-tree-item label="Hot chocolate"></ic-tree-item>
       </ic-tree-view>
+      <script>
+        const expandElement = document.querySelector(
+          "#expanded-slotted-tree-view"
+        );
+        expandElement.addEventListener("icTreeItemExpanded", function (event) {
+          console.log("icTreeItemExpanded - Slotted", event.detail);
+        });
+      </script>
     </div>
   `,
     name: "Expanded - slotted",

package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tree-view.stories.js","sourceRoot":"","sources":["../../../src/components/ic-tree-view/ic-tree-view.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\nimport treeItemReadme from \"../ic-tree-item/readme.md\";\n\nexport default {\n title: \"Web Components/Tree view\",\n component: \"ic-tree-view\",\n parameters: {\n componentAPI: {\n data: readme + treeItemReadme,\n },\n },\n};\n\n/\n Use the tree view component to display hierarchical data in a tree structure. The tree view component is useful for displaying nested data, such as a file system or a category hierarchy.\n \n Click the 'Component API' tab to view all the available attributes, events and slots for tree view.\n \n To use the tree view component, import `@ukic/canary-web-components` into your application.\n /\nexport const Basic = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"basic-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#basic-tree-view\").treeItemData = [\n { label: \"Coffee\" },\n { label: \"Tea\" },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Basic\",\n};\n\nexport const BasicSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Basic - slotted\",\n};\n\nexport const Nested = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"nested-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#nested-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n children: [\n { label: \"Americano\", children: [{ label: \"With milk\" }] },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Nested\",\n};\n\nexport const NestedSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Nested - slotted\",\n};\n\nexport const WithIcons = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"icon-tree-view\" heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#icon-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"With icons\",\n};\n\nexport const WithIconsSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"With icons - slotted\",\n};\n\n/\n Small and large styling will be passed down from tree view to tree items and nested tree items.\n /\nexport const Small = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"small-tree-view\" heading=\"Menu\" size=\"small\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#small-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Small\",\n};\n\nexport const SmallSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" size=\"small\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Small - slotted\",\n};\n\nexport const Large = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"large-tree-view\" heading=\"Menu\" size=\"large\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#large-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Large\",\n};\n\nexport const LargeSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" size=\"large\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Large - slotted\",\n};\n\n/\n Individual tree-items can be disabled using the `disabled` prop.\n /\nexport const DisabledTreeItems = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"disabled-tree-view\" heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#disabled-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n disabled: true,\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\", disabled: true }],\n },\n { label: \"Hot chocolate\", disabled: true },\n ];\n </script>\n `,\n name: \"Disabled tree items\",\n};\n\nexport const DisabledTreeItemsSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\" disabled=\"true\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\" disabled=\"true\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" disabled=\"true\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Disabled tree items - slotted\",\n};\n\n/\n Custom links and router-items can be passed in using the `router-item` slot.\n /\nexport const RouterItem = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" truncate-tree-items=\"true\">\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/\"\n >Hot chocolate with marshmallows and whipped cream</a\n >\n </ic-tree-item>\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/tea\">Tea</a>\n </ic-tree-item>\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Router item\",\n};\n\n/\n Custom content can be passed to both the tree view (using the `heading` slot) and the tree-item (using the `label` slot).\n /\nexport const SlottedContent = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view>\n <ic-typography variant=\"subtitle-large\" slot=\"heading\">Menu</ic-typography>\n <ic-tree-item>\n <ic-typography slot=\"label\">Coffee<ic-typography>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Slotted content\",\n};\n\n/\n When the heading/label exceeds the width of the container, the text will wrap unless `truncate-tree-item` is set to `true`.\n /\nexport const MaxContent = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n id=\"max-content-tree-view\"\n heading=\"Menu with nested options\"\n >\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#max-content-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n { label: \"Latte with extra milk and sugar\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate with marshmallows\" },\n ];\n </script>\n `,\n name: \"Max content\",\n};\n\nexport const MaxContentSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu with nested options\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Max content - slotted\",\n};\n\n/\n When `truncate-tree-items` or `truncate-heading` are set to `true`, and the heading/label exceeds the width of the container, they will be truncated with an ellipsis.\n /\nexport const TruncationBehaviour = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n id=\"truncated-tree-view\"\n heading=\"Menu with nested options\"\n truncate-tree-items=\"true\"\n truncate-heading=\"true\"\n >\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#truncated-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n { label: \"Latte with extra milk and sugar\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [\n { label: \"Earl grey\" },\n {\n label: \"Earl Grey with truncation false\",\n truncateTreeItem: false,\n },\n { label: \"Chai\" },\n ],\n },\n { label: \"Hot chocolate with marshmallows\" },\n ];\n </script>\n `,\n name: \"Truncation behaviour\",\n};\n\nexport const TruncationBehaviourSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n heading=\"Menu with nested options\"\n truncate-tree-items=\"true\"\n truncate-heading=\"true\"\n >\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\" expanded=\"true\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\" expanded=\"true\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item\n label=\"Earl Grey with truncation false\"\n truncate-tree-item=\"false\"\n ></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Truncation behaviour - slotted\",\n};\n\n/\n Utilising the `selected` attribute on `ic-tree-item` will turn it into a controlled component, displaying the selected state when set to `true`.\n /\nexport const SelectedTreeItem = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"selected-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#selected-tree-view\").treeItemData = [\n { label: \"Coffee\" },\n { label: \"Tea\" },\n { label: \"Hot chocolate\", selected: true },\n ];\n </script>\n `,\n name: \"Selected tree item\",\n};\n\nexport const SelectedTreeItemSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" selected=\"true\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Selected tree item - slotted\",\n};\n\n/\n When setting the `href` attribute, the tree-item will function as a link.\n /\nexport const Link = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"link-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#link-tree-view\").treeItemData = [\n { label: \"Coffee\", href: \"#\" },\n { label: \"Tea\", href: \"#\", selected: true },\n { label: \"Hot chocolate\", disabled: true, href: \"#\" },\n ];\n </script>\n `,\n name: \"Link\",\n};\n\nexport const LinkSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" href=\"#\"></ic-tree-item>\n <ic-tree-item label=\"Tea\" selected=\"true\" href=\"#\"></ic-tree-item>\n <ic-tree-item\n label=\"Hot chocolate\"\n disabled=\"true\"\n href=\"#\"\n ></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Link - slotted\",\n};\n\n/\n An example with the `expanded` prop set to `true` on a parent tree item.\n /\nexport const Expanded = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"expanded-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#expanded-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n expanded: true,\n children: [\n {\n label: \"Americano\",\n expanded: true,\n children: [{ label: \"With milk\" }],\n },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Expanded\",\n};\n\nexport const ExpandedSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" expanded=\"true\">\n <ic-tree-item label=\"Americano\" expanded=\"true\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Expanded - slotted\",\n};\n\n/\n An example with the tree item `focus-inset` prop set to `true`. This sets the focus indicator to appear inside the tree item, around the label.\n */\nexport const FocusInset = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n id=\"focus-inset-tree-view\"\n heading=\"Menu\"\n focus-inset=\"true\"\n >\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#focus-inset-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n children: [\n { label: \"Americano\", children: [{ label: \"With milk\" }] },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Focus inset\",\n};\n\nexport const FocusInsetSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" focus-inset=\"true\">\n <ic-tree-item label=\"Coffee\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Focus inset - slotted\",\n};\n\nexport const WithNestedSkipLink = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-skip-link target=\"next-content\" inline=\"true\"></ic-skip-link>\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Nested skip link\",\n};\n"]}
1	+ {"version":3,"file":"ic-tree-view.stories.js","sourceRoot":"","sources":["../../../src/components/ic-tree-view/ic-tree-view.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\nimport treeItemReadme from \"../ic-tree-item/readme.md\";\n\nexport default {\n title: \"Web Components/Tree view\",\n component: \"ic-tree-view\",\n parameters: {\n componentAPI: {\n data: readme + treeItemReadme,\n },\n },\n};\n\n/\n Use the tree view component to display hierarchical data in a tree structure. The tree view component is useful for displaying nested data, such as a file system or a category hierarchy.\n \n Click the 'Component API' tab to view all the available attributes, events and slots for tree view.\n \n To use the tree view component, import `@ukic/canary-web-components` into your application.\n /\nexport const Basic = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"basic-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#basic-tree-view\").treeItemData = [\n { label: \"Coffee\" },\n { label: \"Tea\" },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Basic\",\n};\n\nexport const BasicSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Basic - slotted\",\n};\n\nexport const Nested = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"nested-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#nested-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n children: [\n { label: \"Americano\", children: [{ label: \"With milk\" }] },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Nested\",\n};\n\nexport const NestedSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Nested - slotted\",\n};\n\nexport const WithIcons = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"icon-tree-view\" heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#icon-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"With icons\",\n};\n\nexport const WithIconsSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"With icons - slotted\",\n};\n\n/\n Small and large styling will be passed down from tree view to tree items and nested tree items.\n /\nexport const Small = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"small-tree-view\" heading=\"Menu\" size=\"small\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#small-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Small\",\n};\n\nexport const SmallSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" size=\"small\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Small - slotted\",\n};\n\nexport const Large = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"large-tree-view\" heading=\"Menu\" size=\"large\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#large-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Large\",\n};\n\nexport const LargeSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" size=\"large\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Large - slotted\",\n};\n\n/\n Individual tree-items can be disabled using the `disabled` prop.\n /\nexport const DisabledTreeItems = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"disabled-tree-view\" heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#disabled-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n {\n label: \"Latte\",\n disabled: true,\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\", disabled: true }],\n },\n { label: \"Hot chocolate\", disabled: true },\n ];\n </script>\n `,\n name: \"Disabled tree items\",\n};\n\nexport const DisabledTreeItemsSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\" disabled=\"true\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\" disabled=\"true\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" disabled=\"true\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Disabled tree items - slotted\",\n};\n\n/\n Custom links and router-items can be passed in using the `router-item` slot.\n /\nexport const RouterItem = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" truncate-tree-items=\"true\">\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/\"\n >Hot chocolate with marshmallows and whipped cream</a\n >\n </ic-tree-item>\n <ic-tree-item>\n <a slot=\"router-item\" href=\"/tea\">Tea</a>\n </ic-tree-item>\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Router item\",\n};\n\n/\n Custom content can be passed to both the tree view (using the `heading` slot) and the tree-item (using the `label` slot).\n /\nexport const SlottedContent = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view>\n <ic-typography variant=\"subtitle-large\" slot=\"heading\">Menu</ic-typography>\n <ic-tree-item>\n <ic-typography slot=\"label\">Coffee<ic-typography>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Slotted content\",\n};\n\n/\n When the heading/label exceeds the width of the container, the text will wrap unless `truncate-tree-item` is set to `true`.\n /\nexport const MaxContent = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n id=\"max-content-tree-view\"\n heading=\"Menu with nested options\"\n >\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#max-content-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n { label: \"Latte with extra milk and sugar\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate with marshmallows\" },\n ];\n </script>\n `,\n name: \"Max content\",\n};\n\nexport const MaxContentSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu with nested options\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Max content - slotted\",\n};\n\n/\n When `truncate-tree-items` or `truncate-heading` are set to `true`, and the heading/label exceeds the width of the container, they will be truncated with an ellipsis.\n /\nexport const TruncationBehaviour = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n id=\"truncated-tree-view\"\n heading=\"Menu with nested options\"\n truncate-tree-items=\"true\"\n truncate-heading=\"true\"\n >\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#truncated-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" /></svg>',\n children: [\n { label: \"Americano\" },\n { label: \"Latte with extra milk and sugar\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [\n { label: \"Earl grey\" },\n {\n label: \"Earl Grey with truncation false\",\n truncateTreeItem: false,\n },\n { label: \"Chai\" },\n ],\n },\n { label: \"Hot chocolate with marshmallows\" },\n ];\n </script>\n `,\n name: \"Truncation behaviour\",\n};\n\nexport const TruncationBehaviourSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n heading=\"Menu with nested options\"\n truncate-tree-items=\"true\"\n truncate-heading=\"true\"\n >\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\" expanded=\"true\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\" expanded=\"true\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item\n label=\"Earl Grey with truncation false\"\n truncate-tree-item=\"false\"\n ></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Truncation behaviour - slotted\",\n};\n\n/\n Utilising the `selected` attribute on `ic-tree-item` will turn it into a controlled component, displaying the selected state when set to `true`.\n /\nexport const SelectedTreeItem = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"selected-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#selected-tree-view\").treeItemData = [\n { label: \"Coffee\" },\n { label: \"Tea\" },\n { label: \"Hot chocolate\", selected: true },\n ];\n </script>\n `,\n name: \"Selected tree item\",\n};\n\nexport const SelectedTreeItemSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" selected=\"true\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Selected tree item - slotted\",\n};\n\n/\n When setting the `href` attribute, the tree-item will function as a link.\n /\nexport const Link = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"link-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#link-tree-view\").treeItemData = [\n { label: \"Coffee\", href: \"#\" },\n { label: \"Tea\", href: \"#\", selected: true },\n { label: \"Hot chocolate\", disabled: true, href: \"#\" },\n ];\n </script>\n `,\n name: \"Link\",\n};\n\nexport const LinkSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" href=\"#\"></ic-tree-item>\n <ic-tree-item label=\"Tea\" selected=\"true\" href=\"#\"></ic-tree-item>\n <ic-tree-item\n label=\"Hot chocolate\"\n disabled=\"true\"\n href=\"#\"\n ></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Link - slotted\",\n};\n\n/\n An example with the `expanded` prop set to `true` on a parent tree item.\n /\nexport const Expanded = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view id=\"expanded-tree-view\" heading=\"Menu\"> </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#expanded-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n expanded: true,\n children: [\n {\n label: \"Americano\",\n expanded: true,\n children: [{ label: \"With milk\" }],\n },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n const expandElement = document.querySelector(\"#expanded-tree-view\");\n expandElement.addEventListener(\"icTreeItemExpanded\", function (event) {\n console.log(\"icTreeItemExpanded\", event.detail);\n });\n </script>\n `,\n name: \"Expanded\",\n};\n\nexport const ExpandedSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" id=\"expanded-slotted-tree-view\">\n <ic-tree-item label=\"Coffee\" expanded=\"true\">\n <ic-tree-item label=\"Americano\" expanded=\"true\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n <script>\n const expandElement = document.querySelector(\n \"#expanded-slotted-tree-view\"\n );\n expandElement.addEventListener(\"icTreeItemExpanded\", function (event) {\n console.log(\"icTreeItemExpanded - Slotted\", event.detail);\n });\n </script>\n </div>\n `,\n name: \"Expanded - slotted\",\n};\n\n/\n An example with the tree item `focus-inset` prop set to `true`. This sets the focus indicator to appear inside the tree item, around the label.\n */\nexport const FocusInset = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view\n id=\"focus-inset-tree-view\"\n heading=\"Menu\"\n focus-inset=\"true\"\n >\n </ic-tree-view>\n </div>\n <script>\n document.querySelector(\"#focus-inset-tree-view\").treeItemData = [\n {\n label: \"Coffee\",\n children: [\n { label: \"Americano\", children: [{ label: \"With milk\" }] },\n { label: \"Latte\" },\n { label: \"Espresso\" },\n ],\n },\n {\n label: \"Tea\",\n children: [{ label: \"Earl grey\" }, { label: \"Chai\" }],\n },\n { label: \"Hot chocolate\" },\n ];\n </script>\n `,\n name: \"Focus inset\",\n};\n\nexport const FocusInsetSlotted = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\" focus-inset=\"true\">\n <ic-tree-item label=\"Coffee\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Focus inset - slotted\",\n};\n\nexport const WithNestedSkipLink = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-skip-link target=\"next-content\" inline=\"true\"></ic-skip-link>\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item label=\"With milk\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Nested skip link\",\n};\n"]}

package/dist/components/helpers.js CHANGED Viewed

@@ -173,7 +173,6 @@ const IGNORED_KEYBOARD_CHARACTERS = [
 const DARK_MODE_THRESHOLD = 133.3505;
 const ANYWHERE_SEARCH_POSITION = "anywhere";
 const icInput = "ic-input";
-const linkIcInput = "input.ic-input";
 /**
  * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
  * to a variable that is later used in the render function.
@@ -184,11 +183,9 @@ const linkIcInput = "input.ic-input";
 const inheritAttributes = (element, attributes = []) => {
     const attributeObject = {};
     attributes.forEach((attr) => {
-        if (element.hasAttribute(attr)) {
-            const value = element.getAttribute(attr);
-            if (value !== null) {
-                attributeObject[attr] = value;
-            }
+        const value = element.getAttribute(attr);
+        if (value !== null) {
+            attributeObject[attr] = value;
             element.removeAttribute(attr);
         }
     });
@@ -215,34 +212,27 @@ const debounce = (func, wait = 0) => {
  * allows it to be picked up inside of forms. It should contain the same
  * values as the host element.
  *
- * @param always Add a hidden input even if the container does not use Shadow
  * @param container The element where the input will be added
- * @param name The name of the input
  * @param value The value of the input
+ * @param name The name of the input
  * @param disabled If true, the input is disabled
+ * @param always Add a hidden input even if the container does not use Shadow
  */
-const renderHiddenInput = (always, container, name, value, disabled) => {
-    if (name !== undefined && (always || hasShadowDom(container))) {
-        const inputs = container.querySelectorAll(linkIcInput);
-        const inputEls = Array.from(inputs);
-        const filtered = inputEls.filter((el) => container === el.parentElement);
-        let input = filtered[0];
-        if (input === null || input === undefined) {
+const renderHiddenInput = (container, value, name, disabled = false, always = true) => {
+    if (name && (always || hasShadowDom(container))) {
+        let input = getHiddenInputElement(container);
+        if (!input) {
             input = container.ownerDocument.createElement("input");
             input.type = "hidden";
             input.classList.add(icInput);
             container.appendChild(input);
         }
-        input.disabled = !!disabled;
+        input.disabled = disabled;
         input.name = name;
-        if (value instanceof Date) {
-            input.value = value ? value.toISOString() : "";
-        }
-        else {
-            input.value = value || "";
-        }
+        input.value = value instanceof Date ? value.toISOString() : value || "";
     }
 };
+const getHiddenInputElement = (container) => Array.from(container.querySelectorAll(`input.${icInput}`)).filter((el) => container === el.parentElement)[0];
 /**
  * This method is used to add a hidden file input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -252,17 +242,14 @@ const renderHiddenInput = (always, container, name, value, disabled) => {
  * @param event: The event that is emitted once a file is selected.
  * @param container The element where the input will be added
  * @param multiple If true, multiple files can be selected
- * @param name The name of the input
- * @param value The value of the input
  * @param disabled If true, the input is disabled
  * @param accept A string of the accepted files
+ * @param name The name of the input
+ * @param value The value of the input
  */
-const renderFileHiddenInput = (event, container, multiple, name, value, disabled, accept) => {
+const renderFileHiddenInput = (event, container, multiple, disabled, accept, name, value) => {
     if (name !== undefined && hasShadowDom(container)) {
-        const inputs = container.querySelectorAll(linkIcInput);
-        const inputEls = Array.from(inputs);
-        const filtered = inputEls.filter((el) => container === el.parentElement);
-        let input = filtered[0];
+        let input = getHiddenInputElement(container);
         if (input === null || input === undefined) {
             input = container.ownerDocument.createElement("input");
             input.classList.add(icInput);
@@ -284,13 +271,10 @@ const renderFileHiddenInput = (event, container, multiple, name, value, disabled
     }
 };
 const removeHiddenInput = (container) => {
-    const inputs = container.querySelectorAll("input.ic-input");
-    const inputEls = Array.from(inputs);
-    const filtered = inputEls.filter((el) => container === el.parentElement);
-    const input = filtered[0];
-    input === null || input === void 0 ? void 0 : input.remove();
+    var _a;
+    (_a = getHiddenInputElement(container)) === null || _a === void 0 ? void 0 : _a.remove();
 };
-const hasShadowDom = (el) => el ? !!el.shadowRoot && !!el.attachShadow : false;
+const hasShadowDom = (el) => !!el && !!el.shadowRoot && !!el.attachShadow;
 const getInputHelperTextID = (id) => id + "-helper-text";
 const getInputValidationTextID = (id) => id + "-validation-text";
 const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
@@ -352,7 +336,7 @@ const handleHiddenFormButtonClick = (form, button) => {
     hiddenFormButton.click();
     hiddenFormButton.remove();
 };
-const isEmptyString = (value) => value ? value.trim().length === 0 : true;
+const isEmptyString = (value) => !value || value.trim().length === 0;
 // A helper function that checks if a prop has been defined
 const isPropDefined = (prop) => prop !== undefined ? prop : undefined;
 /**