npm - @ukic/canary-web-components - Versions diffs - 3.0.0-canary.34 → 3.0.0-canary.35 - Mend

@ukic/canary-web-components 3.0.0-canary.34 → 3.0.0-canary.35

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-tree-view.js","sourceRoot":"","sources":["../../../../../src/components/ic-tree-view/ic-tree-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n Watch,\n State,\n Listen,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { sanitizeHTMLIconString } from \"../../../../web-components/src/utils/common-helpers\";\nimport { IcTreeItemOptions } from \"./ic-tree-view.types\";\n\nlet treeViewIds = 0;\n\n/*\n @slot heading - Content is set as the tree view heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-tree-view\",\n styleUrl: \"ic-tree-view.css\",\n shadow: true,\n})\nexport class TreeView {\n private treeViewId = `ic-tree-view-${treeViewIds++}`;\n private treeItemTag = \"IC-TREE-ITEM\";\n private hostMutationObserver: MutationObserver \| null = null;\n private isLoaded = false;\n private resizeObserver: ResizeObserver \| null = null;\n private TOOLTIP = \"ic-tooltip\";\n\n private previousTruncateHeading: boolean = false;\n private previousTruncateTreeItems: boolean = false;\n\n @Element() el: HTMLIcTreeViewElement;\n\n @State() smallDevice: boolean = false;\n @Watch(\"smallDevice\")\n watchSmallDeviceHandler(): void {\n if (this.smallDevice) {\n this.previousTruncateHeading = this.truncateHeading;\n this.previousTruncateTreeItems = this.truncateTreeItems;\n this.removeTruncation();\n } else {\n this.truncateHeading = this.previousTruncateHeading;\n this.truncateTreeItems = this.previousTruncateTreeItems;\n }\n }\n\n @State() treeItems: HTMLIcTreeItemElement[];\n\n /\n The heading of the tree view.\n /\n @Prop() heading: string = \"\";\n\n /\n The size of the tree view.\n /\n @Prop() size?: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.size = this.size;\n });\n }\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 @Watch(\"theme\")\n watchThemeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.theme = this.theme;\n });\n }\n\n /\n The content within the tree view tree items. This will take precedence over slotted content.\n * /\n @Prop() treeItemData: IcTreeItemOptions[] = [];\n @Watch(\"treeItemData\")\n watchTreeItemOptionsHandler(): void {\n this.setTreeItems();\n }\n\n /\n If `true`, the tree view heading will be truncated instead of text wrapping.\n * When used on small devices, this prop will be overridden and headings will be set to text-wrap.\n /\n @Prop({ mutable: true }) truncateHeading: boolean = false;\n\n /\n If `true`, tree items will be truncated, unless they are individually overridden.\n * When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.\n */\n @Prop({ mutable: true }) truncateTreeItems: boolean = false;\n @Watch(\"truncateTreeItems\")\n watchTruncateTreeItemsHandler(): void {\n this.treeItems.forEach((treeItem) => {\n if (this.smallDevice) {\n treeItem.previousTruncateTreeItem = treeItem.truncateTreeItem;\n treeItem.truncateTreeItem = this.truncateTreeItems;\n } else {\n treeItem.truncateTreeItem = treeItem.previousTruncateTreeItem;\n }\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n }\n componentWillLoad(): void {\n this.setTreeItems();\n\n this.previousTruncateHeading = this.truncateHeading;\n this.previousTruncateTreeItems = this.truncateTreeItems;\n\n checkResizeObserver(this.runResizeObserver);\n\n this.watchSizeHandler();\n this.watchThemeHandler();\n this.treeItems.forEach((treeItem) => {\n if (treeItem.truncateTreeItem === undefined) {\n treeItem.truncateTreeItem = this.truncateTreeItems;\n }\n });\n }\n\n componentDidRender(): void {\n this.truncateHeading\n ? this.truncateTreeViewHeading()\n : this.removeHeadingTruncation();\n }\n\n componentDidLoad(): void {\n this.createMutationObserver();\n\n this.isLoaded = true;\n }\n\n @Listen(\"icTreeItemSelected\")\n handleTreeItemSelected(event: CustomEvent): void {\n this.treeItems.forEach((treeItem) => {\n if (treeItem.selected && treeItem.id !== event.detail.id) {\n treeItem.selected = false;\n }\n });\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n this.hostMutationObserver?.disconnect();\n renderDynamicChildSlots(mutationList, \"icon\", this);\n this.setTreeItems();\n this.createMutationObserver();\n };\n\n private createMutationObserver = () => {\n this.hostMutationObserver = new MutationObserver((mutationList) => {\n this.hostMutationCallback(mutationList);\n });\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const isSmallDevice = getCurrentDeviceSize() <= DEVICE_SIZES.S;\n if (this.smallDevice !== isSmallDevice) this.smallDevice = isSmallDevice;\n });\n\n this.resizeObserver.observe(document.body);\n };\n\n private removeTruncation = (): void => {\n this.truncateHeading = false;\n this.truncateTreeItems = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const focussedChild = this.treeItems.indexOf(\n this.treeItems.filter((el) => el === document.activeElement)[0]\n );\n const expanded = this.treeItems[focussedChild]?.expanded;\n switch (event.key) {\n case \"ArrowDown\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, true)\n ].setFocus();\n if (focussedChild !== this.treeItems.length - 1) {\n event.preventDefault();\n }\n break;\n case \"ArrowUp\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, false)\n ].setFocus();\n if (focussedChild !== 0) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (this.treeItems[focussedChild].isParent && !expanded) {\n this.treeItems[focussedChild].expanded = true;\n this.treeItems[focussedChild].hasParentExpanded = true;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (this.treeItems[focussedChild].isParent && expanded) {\n (\n this.treeItems[focussedChild].children[0] as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (this.treeItems[focussedChild].isParent && expanded) {\n this.treeItems[focussedChild].expanded = false;\n this.treeItems[focussedChild].hasParentExpanded = false;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (\n this.treeItems[focussedChild].parentElement?.tagName ===\n this.treeItemTag\n ) {\n (\n this.treeItems[focussedChild].parentElement as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numItems = this.treeItems.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = 0;\n } else if (nextItem > numItems) {\n nextItem = numItems;\n }\n\n const maxAttempts = numItems + 1;\n let attempts = 0;\n\n while (attempts < maxAttempts) {\n if (nextItem < 0 \|\| nextItem > numItems) {\n return currentItem;\n }\n\n if (\n this.treeItems[nextItem].parentElement?.tagName !== this.treeItemTag \|\|\n ((this.treeItems[nextItem].parentElement as HTMLIcTreeItemElement)\n .expanded &&\n this.treeItems[nextItem].offsetHeight > 0)\n ) {\n return nextItem;\n }\n\n if (nextItem === numItems && this.treeItems[nextItem].disabled) {\n return currentItem;\n }\n\n nextItem = movingDown ? nextItem + 1 : nextItem - 1;\n attempts++;\n }\n\n return currentItem;\n };\n\n private linkTreeItems = () => {\n this.treeItems.forEach((treeItem) => {\n treeItem.setAttribute(\"context-id\", this.treeViewId);\n });\n };\n\n private setTreeItems = () => {\n this.treeItems = this.getAllTreeItems(this.el as HTMLElement);\n\n this.linkTreeItems();\n };\n\n private getAllTreeItems(element: HTMLElement): HTMLIcTreeItemElement[] {\n const treeItems: HTMLIcTreeItemElement[] = [];\n\n const collectTreeItemsFromSlottedContent = (el: HTMLElement) => {\n Array.from(el.children).forEach((child) => {\n if (child.tagName === this.treeItemTag) {\n treeItems.push(child as HTMLIcTreeItemElement);\n }\n\n collectTreeItemsFromSlottedContent(child as HTMLElement);\n });\n };\n\n const collectTreeItemsFromData = (\n items: IcTreeItemOptions[],\n parentElement: HTMLElement\n ) => {\n Array.from(parentElement.children).forEach((child) => {\n if (child.tagName === this.treeItemTag) {\n parentElement.removeChild(child);\n }\n });\n\n items.forEach((item) => {\n const treeItem = document.createElement(\n this.treeItemTag\n ) as HTMLIcTreeItemElement;\n const { children, icon, ...props } = item;\n Object.assign(treeItem, props);\n\n if (icon) {\n const iconSlot = document.createElement(\"div\");\n iconSlot.setAttribute(\"slot\", \"icon\");\n iconSlot.innerHTML = sanitizeHTMLIconString(icon);\n treeItem.appendChild(iconSlot);\n }\n\n parentElement.appendChild(treeItem);\n treeItems.push(treeItem);\n\n if (children && children.length > 0) {\n collectTreeItemsFromData(children, treeItem);\n }\n });\n };\n\n if (this.treeItemData.length > 0) {\n collectTreeItemsFromData(this.treeItemData, element);\n } else {\n collectTreeItemsFromSlottedContent(element);\n }\n\n return treeItems;\n }\n\n private truncateTreeViewHeading = () => {\n const typographyEl =\n this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n \".tree-view-header\"\n );\n const tooltip = typographyEl?.closest(this.TOOLTIP);\n const headingContainer = this.el.shadowRoot?.querySelector<HTMLElement>(\n \".heading-area-container\"\n );\n\n if (\n typographyEl &&\n headingContainer &&\n typographyEl.scrollHeight > headingContainer.clientHeight\n ) {\n typographyEl.classList.add(\"ic-text-overflow\");\n\n if (!tooltip) {\n const tooltipEl = document.createElement(\"ic-tooltip\");\n tooltipEl.setAttribute(\"target\", this.el.id);\n tooltipEl.setAttribute(\"label\", typographyEl.textContent!);\n tooltipEl.classList.add(\"ic-tooltip-overflow\");\n tooltipEl.setAttribute(\"placement\", \"right\");\n headingContainer.appendChild(tooltipEl);\n tooltipEl.appendChild(typographyEl);\n }\n }\n };\n\n private removeHeadingTruncation = () => {\n const typographyEl =\n this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n \".tree-view-header\"\n );\n const tooltipEl = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n\n if (tooltipEl && typographyEl) {\n typographyEl.classList.remove(\"ic-text-overflow\");\n this.el.shadowRoot\n ?.querySelector(\".heading-area-container\")\n ?.replaceChild(typographyEl, tooltipEl);\n }\n };\n\n private isHeadingDefined = () =>\n isPropDefined(this.heading) && this.heading !== null;\n\n private hasHeadingAreaContent = (): boolean => {\n return (\n isSlotUsed(this.el, \"heading\") \|\|\n this.isHeadingDefined() \|\|\n isSlotUsed(this.el, \"icon\")\n );\n };\n\n render() {\n const { heading, isLoaded, size, theme, truncateHeading } = this;\n\n return (\n <Host\n context-id={this.treeViewId}\n class={{\n [`ic-tree-view-${size}`]: size !== \"medium\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tree-view-truncate\": truncateHeading,\n }}\n onKeyDown={this.handleKeyDown}\n aria-label={this.isHeadingDefined() ? heading : null}\n >\n {this.hasHeadingAreaContent() && (\n <div class=\"heading-area-container\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"subtitle-large\"\n class={{\n \"tree-view-header\": true,\n \"with-padding\": this.truncateHeading && !isLoaded,\n }}\n >\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n heading\n )}\n </ic-typography>\n </div>\n )}\n\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-tree-view.js","sourceRoot":"","sources":["../../../../../src/components/ic-tree-view/ic-tree-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n Watch,\n State,\n Listen,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n isPropDefined,\n isSlotUsed,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { sanitizeHTMLIconString } from \"../../../../web-components/src/utils/common-helpers\";\nimport { IcTreeItemOptions } from \"./ic-tree-view.types\";\n\nimport \"../../../../web-components/src/components/ic-typography/ic-typography\";\nimport \"../../../../web-components/src/components/ic-skip-link/ic-skip-link\";\n\nlet treeViewIds = 0;\n\n/*\n @slot heading - Content is set as the tree view heading.\n * @slot icon - Content is placed to the left of the heading.\n /\n\n@Component({\n tag: \"ic-tree-view\",\n styleUrl: \"ic-tree-view.css\",\n shadow: true,\n})\nexport class TreeView {\n private treeViewId = `ic-tree-view-${treeViewIds++}`;\n private treeItemTag = \"IC-TREE-ITEM\";\n private hostMutationObserver: MutationObserver \| null = null;\n private isLoaded = false;\n private resizeObserver: ResizeObserver \| null = null;\n private TOOLTIP = \"ic-tooltip\";\n\n private previousTruncateHeading: boolean = false;\n private previousTruncateTreeItems: boolean = false;\n\n @Element() el: HTMLIcTreeViewElement;\n\n @State() smallDevice: boolean = false;\n @Watch(\"smallDevice\")\n watchSmallDeviceHandler(): void {\n if (this.smallDevice) {\n this.previousTruncateHeading = this.truncateHeading;\n this.previousTruncateTreeItems = this.truncateTreeItems;\n this.removeTruncation();\n } else {\n this.truncateHeading = this.previousTruncateHeading;\n this.truncateTreeItems = this.previousTruncateTreeItems;\n }\n }\n\n @State() treeItems: HTMLIcTreeItemElement[];\n\n /\n The heading of the tree view.\n /\n @Prop() heading: string = \"\";\n\n /\n The size of the tree view.\n /\n @Prop() size?: IcSizes = \"medium\";\n @Watch(\"size\")\n watchSizeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.size = this.size;\n });\n }\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 @Watch(\"theme\")\n watchThemeHandler(): void {\n this.treeItems.forEach((treeItem) => {\n treeItem.theme = this.theme;\n });\n }\n\n /\n The content within the tree view tree items. This will take precedence over slotted content.\n * /\n @Prop() treeItemData: IcTreeItemOptions[] = [];\n @Watch(\"treeItemData\")\n watchTreeItemOptionsHandler(): void {\n this.setTreeItems();\n }\n\n /\n If `true`, the tree view heading will be truncated instead of text wrapping.\n * When used on small devices, this prop will be overridden and headings will be set to text-wrap.\n /\n @Prop({ mutable: true }) truncateHeading: boolean = false;\n\n /\n If `true`, tree items will be truncated, unless they are individually overridden.\n * When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.\n */\n @Prop({ mutable: true }) truncateTreeItems: boolean = false;\n @Watch(\"truncateTreeItems\")\n watchTruncateTreeItemsHandler(): void {\n this.treeItems.forEach((treeItem) => {\n if (this.smallDevice) {\n treeItem.previousTruncateTreeItem = treeItem.truncateTreeItem;\n treeItem.truncateTreeItem = this.truncateTreeItems;\n } else {\n treeItem.truncateTreeItem = treeItem.previousTruncateTreeItem;\n }\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n }\n componentWillLoad(): void {\n this.setTreeItems();\n\n this.previousTruncateHeading = this.truncateHeading;\n this.previousTruncateTreeItems = this.truncateTreeItems;\n\n checkResizeObserver(this.runResizeObserver);\n\n this.watchSizeHandler();\n this.watchThemeHandler();\n this.treeItems.forEach((treeItem) => {\n if (treeItem.truncateTreeItem === undefined) {\n treeItem.truncateTreeItem = this.truncateTreeItems;\n }\n });\n }\n\n componentDidRender(): void {\n this.truncateHeading\n ? this.truncateTreeViewHeading()\n : this.removeHeadingTruncation();\n }\n\n componentDidLoad(): void {\n this.createMutationObserver();\n\n this.isLoaded = true;\n }\n\n @Listen(\"icTreeItemSelected\")\n handleTreeItemSelected(event: CustomEvent): void {\n this.treeItems.forEach((treeItem) => {\n if (treeItem.selected && treeItem.id !== event.detail.id) {\n treeItem.selected = false;\n }\n });\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n this.hostMutationObserver?.disconnect();\n renderDynamicChildSlots(mutationList, \"icon\", this);\n this.setTreeItems();\n this.createMutationObserver();\n };\n\n private createMutationObserver = () => {\n this.hostMutationObserver = new MutationObserver((mutationList) => {\n this.hostMutationCallback(mutationList);\n });\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const isSmallDevice = getCurrentDeviceSize() <= DEVICE_SIZES.S;\n if (this.smallDevice !== isSmallDevice) this.smallDevice = isSmallDevice;\n });\n\n this.resizeObserver.observe(document.body);\n };\n\n private removeTruncation = (): void => {\n this.truncateHeading = false;\n this.truncateTreeItems = false;\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const focussedChild = this.treeItems.indexOf(\n this.treeItems.filter((el) => el === document.activeElement)[0]\n );\n const expanded = this.treeItems[focussedChild]?.expanded;\n switch (event.key) {\n case \"ArrowDown\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, true)\n ].setFocus();\n if (focussedChild !== this.treeItems.length - 1) {\n event.preventDefault();\n }\n break;\n case \"ArrowUp\":\n this.treeItems[\n this.getNextItemToSelect(focussedChild, false)\n ].setFocus();\n if (focussedChild !== 0) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (this.treeItems[focussedChild].isParent && !expanded) {\n this.treeItems[focussedChild].expanded = true;\n this.treeItems[focussedChild].hasParentExpanded = true;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (this.treeItems[focussedChild].isParent && expanded) {\n (\n this.treeItems[focussedChild].children[0] as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (this.treeItems[focussedChild].isParent && expanded) {\n this.treeItems[focussedChild].expanded = false;\n this.treeItems[focussedChild].hasParentExpanded = false;\n this.treeItems[focussedChild].updateAriaLabel();\n } else if (\n this.treeItems[focussedChild].parentElement?.tagName ===\n this.treeItemTag\n ) {\n (\n this.treeItems[focussedChild].parentElement as HTMLIcTreeItemElement\n ).setFocus();\n }\n event.preventDefault();\n break;\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numItems = this.treeItems.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n if (nextItem < 0) {\n nextItem = 0;\n } else if (nextItem > numItems) {\n nextItem = numItems;\n }\n\n const maxAttempts = numItems + 1;\n let attempts = 0;\n\n while (attempts < maxAttempts) {\n if (nextItem < 0 \|\| nextItem > numItems) {\n return currentItem;\n }\n\n if (\n this.treeItems[nextItem].parentElement?.tagName !== this.treeItemTag \|\|\n ((this.treeItems[nextItem].parentElement as HTMLIcTreeItemElement)\n .expanded &&\n this.treeItems[nextItem].offsetHeight > 0)\n ) {\n return nextItem;\n }\n\n if (nextItem === numItems && this.treeItems[nextItem].disabled) {\n return currentItem;\n }\n\n nextItem = movingDown ? nextItem + 1 : nextItem - 1;\n attempts++;\n }\n\n return currentItem;\n };\n\n private linkTreeItems = () => {\n this.treeItems.forEach((treeItem) => {\n treeItem.setAttribute(\"context-id\", this.treeViewId);\n });\n };\n\n private setTreeItems = () => {\n this.treeItems = this.getAllTreeItems(this.el as HTMLElement);\n\n this.linkTreeItems();\n };\n\n private getAllTreeItems(element: HTMLElement): HTMLIcTreeItemElement[] {\n const treeItems: HTMLIcTreeItemElement[] = [];\n\n const collectTreeItemsFromSlottedContent = (el: HTMLElement) => {\n Array.from(el.children).forEach((child) => {\n if (child.tagName === this.treeItemTag) {\n treeItems.push(child as HTMLIcTreeItemElement);\n }\n\n collectTreeItemsFromSlottedContent(child as HTMLElement);\n });\n };\n\n const collectTreeItemsFromData = (\n items: IcTreeItemOptions[],\n parentElement: HTMLElement\n ) => {\n Array.from(parentElement.children).forEach((child) => {\n if (child.tagName === this.treeItemTag) {\n parentElement.removeChild(child);\n }\n });\n\n items.forEach((item) => {\n const treeItem = document.createElement(\n this.treeItemTag\n ) as HTMLIcTreeItemElement;\n const { children, icon, ...props } = item;\n Object.assign(treeItem, props);\n\n if (icon) {\n const iconSlot = document.createElement(\"div\");\n iconSlot.setAttribute(\"slot\", \"icon\");\n iconSlot.innerHTML = sanitizeHTMLIconString(icon);\n treeItem.appendChild(iconSlot);\n }\n\n parentElement.appendChild(treeItem);\n treeItems.push(treeItem);\n\n if (children && children.length > 0) {\n collectTreeItemsFromData(children, treeItem);\n }\n });\n };\n\n if (this.treeItemData.length > 0) {\n collectTreeItemsFromData(this.treeItemData, element);\n } else {\n collectTreeItemsFromSlottedContent(element);\n }\n\n return treeItems;\n }\n\n private truncateTreeViewHeading = () => {\n const typographyEl =\n this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n \".tree-view-header\"\n );\n const tooltip = typographyEl?.closest(this.TOOLTIP);\n const headingContainer = this.el.shadowRoot?.querySelector<HTMLElement>(\n \".heading-area-container\"\n );\n\n if (\n typographyEl &&\n headingContainer &&\n typographyEl.scrollHeight > headingContainer.clientHeight\n ) {\n typographyEl.classList.add(\"ic-text-overflow\");\n\n if (!tooltip) {\n const tooltipEl = document.createElement(\"ic-tooltip\");\n tooltipEl.setAttribute(\"target\", this.el.id);\n tooltipEl.setAttribute(\"label\", typographyEl.textContent!);\n tooltipEl.classList.add(\"ic-tooltip-overflow\");\n tooltipEl.setAttribute(\"placement\", \"right\");\n headingContainer.appendChild(tooltipEl);\n tooltipEl.appendChild(typographyEl);\n }\n }\n };\n\n private removeHeadingTruncation = () => {\n const typographyEl =\n this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n \".tree-view-header\"\n );\n const tooltipEl = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n\n if (tooltipEl && typographyEl) {\n typographyEl.classList.remove(\"ic-text-overflow\");\n this.el.shadowRoot\n ?.querySelector(\".heading-area-container\")\n ?.replaceChild(typographyEl, tooltipEl);\n }\n };\n\n private isHeadingDefined = () =>\n isPropDefined(this.heading) && this.heading !== null;\n\n private hasHeadingAreaContent = (): boolean => {\n return (\n isSlotUsed(this.el, \"heading\") \|\|\n this.isHeadingDefined() \|\|\n isSlotUsed(this.el, \"icon\")\n );\n };\n\n render() {\n const { heading, isLoaded, size, theme, truncateHeading } = this;\n\n return (\n <Host\n context-id={this.treeViewId}\n class={{\n [`ic-tree-view-${size}`]: size !== \"medium\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tree-view-truncate\": truncateHeading,\n }}\n onKeyDown={this.handleKeyDown}\n aria-label={this.isHeadingDefined() ? heading : null}\n >\n {this.hasHeadingAreaContent() && (\n <div class=\"heading-area-container\">\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon-container\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"subtitle-large\"\n class={{\n \"tree-view-header\": true,\n \"with-padding\": this.truncateHeading && !isLoaded,\n }}\n >\n {isSlotUsed(this.el, \"heading\") ? (\n <slot name=\"heading\" />\n ) : (\n heading\n )}\n </ic-typography>\n </div>\n )}\n\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

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

@@ -112,14 +112,44 @@ export const SlottedCustomIds = {
       <ic-tree-view heading="Menu">
         <ic-tree-item label="Coffee" tree-item-id="coffee-1">
           <ic-tree-item label="Americano">
-            <ic-tree-item label="With milk" tree-item-id="with-milk-1"></ic-tree-item>
+            <ic-tree-item
+              label="With milk"
+              tree-item-id="with-milk-1"
+            ></ic-tree-item>
           </ic-tree-item>
         </ic-tree-item>
-        <ic-tree-item label="Tea" tree-item-id="tea-1"></ic-tree-view>
+        <ic-tree-item label="Tea" tree-item-id="tea-1"></ic-tree-item>
+      </ic-tree-view>
     </div>
   `,
     name: "Custom IDs with Slotted",
 };
+export const CustomID = {
+    render: () => html `
+    <div style="width:250px">
+      <ic-tree-view heading="Menu">
+        <ic-tree-item label="Coffee" id="coffee-1"></ic-tree-item>
+        <ic-tree-item label="Tea" id="tea-1"></ic-tree-item>
+        <ic-tree-item label="Hot chocolate" id="hot-chocolate-1"></ic-tree-item>
+      </ic-tree-view>
+    </div>
+    <script>
+      const coffee = document.querySelector("#coffee-1");
+      coffee.addEventListener("icTreeItemSelected", function (event) {
+        console.log(event.detail.id);
+      });
+      const tea = document.querySelector("#tea-1");
+      tea.addEventListener("icTreeItemSelected", function (event) {
+        console.log(event.detail.id);
+      });
+      const hotChocolate = document.querySelector("#hot-chocolate-1");
+      hotChocolate.addEventListener("icTreeItemSelected", function (event) {
+        console.log(event.detail.id);
+      });
+    </script>
+  `,
+    name: "Custom IDs using ID",
+};
 export const WithIcons = {
     render: () => html `
     <div style="width:250px">

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 CustomIDs = {\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 { label: \"Coffee\", treeItemId: \"coffee-1\" },\n { label: \"Tea\", treeItemId: \"tea-1\" },\n { label: \"Hot chocolate\", treeItemId: \"hot-chocolate-1\" },\n ];\n </script>\n `,\n name: \"Custom IDs with Tree Item Data\",\n};\n\nexport const SlottedCustomIds = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" tree-item-id=\"coffee-1\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item label=\"With milk\" tree-item-id=\"with-milk-1\"></ic-tree-item>\n </ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\" tree-item-id=\"tea-1\"></ic-tree-view>\n </div>\n `,\n name: \"Custom IDs with 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\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 CustomIDs = {\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 { label: \"Coffee\", treeItemId: \"coffee-1\" },\n { label: \"Tea\", treeItemId: \"tea-1\" },\n { label: \"Hot chocolate\", treeItemId: \"hot-chocolate-1\" },\n ];\n </script>\n `,\n name: \"Custom IDs with Tree Item Data\",\n};\n\nexport const SlottedCustomIds = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" tree-item-id=\"coffee-1\">\n <ic-tree-item label=\"Americano\">\n <ic-tree-item\n label=\"With milk\"\n tree-item-id=\"with-milk-1\"\n ></ic-tree-item>\n </ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\" tree-item-id=\"tea-1\"></ic-tree-item>\n </ic-tree-view>\n </div>\n `,\n name: \"Custom IDs with Slotted\",\n};\n\nexport const CustomID = {\n render: () => html`\n <div style=\"width:250px\">\n <ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" id=\"coffee-1\"></ic-tree-item>\n <ic-tree-item label=\"Tea\" id=\"tea-1\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" id=\"hot-chocolate-1\"></ic-tree-item>\n </ic-tree-view>\n </div>\n <script>\n const coffee = document.querySelector(\"#coffee-1\");\n coffee.addEventListener(\"icTreeItemSelected\", function (event) {\n console.log(event.detail.id);\n });\n const tea = document.querySelector(\"#tea-1\");\n tea.addEventListener(\"icTreeItemSelected\", function (event) {\n console.log(event.detail.id);\n });\n const hotChocolate = document.querySelector(\"#hot-chocolate-1\");\n hotChocolate.addEventListener(\"icTreeItemSelected\", function (event) {\n console.log(event.detail.id);\n });\n </script>\n `,\n name: \"Custom IDs using ID\",\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\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"]}