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

@ukic/canary-web-components 3.0.0-canary.33 → 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 (946) hide show

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 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, id: this.el.id });\n }\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 tree item id. Must be unique.\n /\n @Prop() treeItemId?: 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<{\n isExpanded: boolean;\n id: string;\n }>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.setChildTreeItems();\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 this.hostMutationCallback(mutationList);\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 };\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 (treeContent) {\n const computedHeight = parseFloat(getComputedStyle(treeContent).height);\n if (\n contentHeight &&\n computedHeight &&\n contentHeight > computedHeight &&\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\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 private setChildTreeItems = () => {\n this.childTreeItems = Array.from((this.el as HTMLElement).children).filter(\n (child) => child.tagName === this.treeItemTag\n ) as HTMLIcTreeItemElement[];\n\n this.isParent = this.childTreeItems.length > 0;\n };\n\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n this.setChildTreeItems();\n renderDynamicChildSlots(mutationList, \"icon\", this);\n };\n\n render() {\n const { disabled, label, selected, size, expanded, theme } = 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-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tree-item-truncate\": !!this.truncateTreeItem,\n }}\n id={this.treeItemId ?? `ic-tree-item-${treeItemIds++}`}\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":"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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\";\nimport \"../../../../web-components/src/components/ic-typography/ic-typography\";\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 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, id: this.el.id });\n }\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 tree item id. Must be unique.\n /\n @Prop() treeItemId?: 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<{\n isExpanded: boolean;\n id: string;\n }>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.setChildTreeItems();\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 this.hostMutationCallback(mutationList);\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 };\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 (treeContent) {\n const computedHeight = parseFloat(getComputedStyle(treeContent).height);\n if (\n contentHeight &&\n computedHeight &&\n contentHeight > computedHeight &&\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\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 private setChildTreeItems = () => {\n this.childTreeItems = Array.from((this.el as HTMLElement).children).filter(\n (child) => child.tagName === this.treeItemTag\n ) as HTMLIcTreeItemElement[];\n\n this.isParent = this.childTreeItems.length > 0;\n };\n\n private hostMutationCallback = (mutationList: MutationRecord[]) => {\n this.setChildTreeItems();\n renderDynamicChildSlots(mutationList, \"icon\", this);\n };\n\n render() {\n const { disabled, label, selected, size, expanded, theme } = 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-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tree-item-truncate\": !!this.truncateTreeItem,\n }}\n id={this.el.id \|\| this.treeItemId \|\| `ic-tree-item-${treeItemIds++}`}\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.js CHANGED Viewed

@@ -13,6 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { h, Host, } from "@stencil/core";
 import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, isPropDefined, isSlotUsed, renderDynamicChildSlots, } from "../../utils/helpers";
 import { sanitizeHTMLIconString } from "../../../../web-components/src/utils/common-helpers";
+import "../../../../web-components/src/components/ic-typography/ic-typography";
+import "../../../../web-components/src/components/ic-skip-link/ic-skip-link";
 let treeViewIds = 0;
 /**
  * @slot heading - Content is set as the tree view heading.
@@ -315,14 +317,14 @@ export class TreeView {
     }
     render() {
         const { heading, isLoaded, size, theme, truncateHeading } = this;
-        return (h(Host, { key: 'b64c96601e14f028d70d42596ab73c3adcc5c50c', "context-id": this.treeViewId, class: {
+        return (h(Host, { key: '8eb6b4a2b6572b986549e5a997bc5a9df0a8052f', "context-id": this.treeViewId, class: {
                 [`ic-tree-view-${size}`]: size !== "medium",
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tree-view-truncate": truncateHeading,
-            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (h("div", { key: '2147d52cb5d094a6b2030707832e7986452ec793', class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (h("div", { key: '884b18baa7bf9a6530578e14e554e7da405184e4', class: "icon-container" }, h("slot", { key: 'a7b165ab9a5851dd0006a0ed2d58299c6cce8008', name: "icon" }))), h("ic-typography", { key: 'b851dc0c5d16d8127ba3e3e0c0efdbbb2675bdd4', variant: "subtitle-large", class: {
+            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (h("div", { key: '0e4d5516ffe8df51a3e1d23355a6798502fd2afb', class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (h("div", { key: 'b6a6f6ab4a6de241301d8bc2ccd776795cf11444', class: "icon-container" }, h("slot", { key: 'c92eff87acaea0ecc5008dd46347ab4f3676e999', name: "icon" }))), h("ic-typography", { key: 'e250086864a60f85befcc622635a9054dce8ba74', variant: "subtitle-large", class: {
                 "tree-view-header": true,
                 "with-padding": this.truncateHeading && !isLoaded,
-            } }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (heading)))), h("slot", { key: '1e2577f386a2121c89644f395358fb746eb63cd1' })));
+            } }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (heading)))), h("slot", { key: '0c6e6ceb5017d2c0380af31e7c652a422d0cf2d8' })));
     }
     static get is() { return "ic-tree-view"; }
     static get encapsulation() { return "shadow"; }

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":"AAAA,sEAAsE;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,cAAc,MAAM,2BAA2B,CAAC;AAEvD,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM,GAAG,cAAc;SAC9B;KACF;CACF,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;GAWjB;IACD,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;GAQjB;IACD,IAAI,EAAE,iBAAiB;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBjB;IACD,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;GAiBjB;IACD,IAAI,EAAE,kBAAkB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;GAWjB;IACD,IAAI,EAAE,gCAAgC;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;GAUjB;IACD,IAAI,EAAE,yBAAyB;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BjB;IACD,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IACD,IAAI,EAAE,sBAAsB;CAC7B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BjB;IACD,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IACD,IAAI,EAAE,iBAAiB;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BjB;IACD,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IACD,IAAI,EAAE,iBAAiB;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCjB;IACD,IAAI,EAAE,qBAAqB;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCjB;IACD,IAAI,EAAE,+BAA+B;CACtC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;GAcjB;IACD,IAAI,EAAE,aAAa;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;KAWf;IACH,IAAI,EAAE,iBAAiB;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BjB;IACD,IAAI,EAAE,aAAa;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BjB;IACD,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCjB;IACD,IAAI,EAAE,sBAAsB;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCjB;IACD,IAAI,EAAE,gCAAgC;CACvC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;GAWjB;IACD,IAAI,EAAE,oBAAoB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;GAQjB;IACD,IAAI,EAAE,8BAA8B;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;GAWjB;IACD,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;GAYjB;IACD,IAAI,EAAE,gBAAgB;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BjB;IACD,IAAI,EAAE,UAAU;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBjB;IACD,IAAI,EAAE,oBAAoB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;GAkBjB;IACD,IAAI,EAAE,kBAAkB;CACzB,CAAC","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"]}

package/dist/collection/utils/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/utils/types.ts"],"names":[],"mappings":"AA8BA,MAAM,CAAN,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,sCAAe,CAAA;IACf,0CAAmB,CAAA;AACrB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;AAsED,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,4CAAmB,CAAA;IACnB,sCAAa,CAAA;IACb,wCAAe,CAAA;AACjB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC;~~AAgKD~~,MAAM,CAAN,IAAY,iBAaX;AAbD,WAAY,iBAAiB;IAC3B,+DAAS,CAAA;IACT,iEAAU,CAAA;IACV,2DAAO,CAAA;IACP,2DAAO,CAAA;IACP,uDAAK,CAAA;IACL,yDAAM,CAAA;IACN,yDAAM,CAAA;IACN,6DAAQ,CAAA;IACR,mEAAW,CAAA;IACX,+DAAS,CAAA;IACT,kEAAU,CAAA;IACV,kEAAU,CAAA;AACZ,CAAC,EAbW,iBAAiB,KAAjB,iBAAiB,QAa5B;AAED,MAAM,CAAN,IAAY,eAQX;AARD,WAAY,eAAe;IACzB,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;AACP,CAAC,EARW,eAAe,KAAf,eAAe,QAQ1B;AAED,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IACpB,+CAAQ,CAAA;IACR,+CAAQ,CAAA;IACR,iDAAS,CAAA;IACT,qDAAW,CAAA;IACX,mDAAU,CAAA;IACV,+CAAQ,CAAA;IACR,mDAAU,CAAA;AACZ,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB;AAED,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IACpB,+CAAU,CAAA;IACV,+CAAU,CAAA;IACV,iDAAW,CAAA;IACX,qDAAa,CAAA;IACb,mDAAY,CAAA;IACZ,+CAAU,CAAA;IACV,mDAAY,CAAA;AACd,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB","sourcesContent":["import {\n IcPaginationLabelTypes,\n IcPaginationTypes,\n IcPaginationAlignmentOptions,\n} from \"../components\";\n\nexport type IcFocusableComponents =\n \| HTMLIcBreadcrumbElement\n \| HTMLIcButtonElement\n \| HTMLIcCardVerticalElement\n \| HTMLIcCheckboxElement\n \| HTMLIcChipElement\n \| HTMLIcLinkElement\n \| HTMLIcNavigationButtonElement\n \| HTMLIcNavigationGroupElement\n \| HTMLIcNavigationItemElement\n \| HTMLIcRadioOptionElement\n \| HTMLIcSearchBarElement\n \| HTMLIcSelectElement\n \| HTMLIcSwitchElement\n \| HTMLIcTabElement\n \| HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n \| \"neutral\"\n \| \"info\"\n \| \"warning\"\n \| \"error\"\n \| \"success\";\n\nexport enum IcInformationStatus {\n Warning = \"warning\",\n Error = \"error\",\n Success = \"success\",\n}\n\nexport type IcSizes = \"medium\" \| \"large\" \| \"small\";\n\nexport type IcSizesNoLarge = \"medium\" \| \"small\";\n\nexport type IcInformationStatusOrEmpty = \"warning\" \| \"error\" \| \"success\" \| \"\";\n\nexport type IcNavType = \"side\" \| \"top\" \| \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n \| \"on\"\n \| \"off\"\n \| \"name\"\n \| \"honorific-prefix\"\n \| \"given-name\"\n \| \"additional-name\"\n \| \"family-name\"\n \| \"honorific-suffix\"\n \| \"nickname\"\n \| \"email\"\n \| \"username\"\n \| \"new-password\"\n \| \"current-password\"\n \| \"one-time-code\"\n \| \"organization-title\"\n \| \"organization\"\n \| \"street-address\"\n \| \"address-line1\"\n \| \"address-line2\"\n \| \"address-line3\"\n \| \"address-level4\"\n \| \"address-level3\"\n \| \"address-level2\"\n \| \"address-level1\"\n \| \"country\"\n \| \"country-name\"\n \| \"postal-code\"\n \| \"cc-name\"\n \| \"cc-given-name\"\n \| \"cc-additional-name\"\n \| \"cc-family-name\"\n \| \"cc-family-name\"\n \| \"cc-number\"\n \| \"cc-exp\"\n \| \"cc-exp-month\"\n \| \"cc-exp-year\"\n \| \"cc-csc\"\n \| \"cc-type\"\n \| \"transaction-currency\"\n \| \"transaction-amount\"\n \| \"language\"\n \| \"bday\"\n \| \"bday-day\"\n \| \"bday-month\"\n \| \"bday-year\"\n \| \"sex\"\n \| \"tel\"\n \| \"tel-country-code\"\n \| \"tel-national\"\n \| \"tel-area-code\"\n \| \"tel-local\"\n \| \"tel-extension\"\n \| \"impp\"\n \| \"url\"\n \| \"photo\";\n\nexport type IcAlignment = \"left\" \| \"center\" \| \"full-width\";\n\nexport enum IcBrandForegroundEnum {\n Default = \"default\",\n Dark = \"dark\",\n Light = \"light\",\n}\n\nexport type IcThemeMode = \"dark\" \| \"light\" \| \"inherit\";\n\nexport type IcBrandForeground = \"default\" \| \"dark\" \| \"light\";\n\nexport type IcBrandForegroundNoDefault = \"dark\" \| \"light\";\n\nexport type IcBrand = {\n mode: IcBrandForeground;\n color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" \| \"dynamic\";\n\nexport type IcColorRGB = {\n r: number;\n g: number;\n b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" \| \"manual\";\n\nexport type IcAutocorrectStates = \"on\" \| \"off\";\n\nexport type IcNavParentDetails = {\n navType: IcNavType \| \"\";\n parent: HTMLElement \| null;\n};\n\nexport type IcTypographyVariants =\n \| \"h1\"\n \| \"h2\"\n \| \"h3\"\n \| \"h4\"\n \| \"subtitle-large\"\n \| \"subtitle-small\"\n \| \"body\"\n \| \"label\"\n \| \"label-uppercase\"\n \| \"caption\"\n \| \"caption-uppercase\"\n \| \"code-large\"\n \| \"code-small\"\n \| \"code-extra-small\"\n \| \"badge\"\n \| \"badge-small\";\n\n/*\n @interface IcMenuOption\n * Set \"label\" and \"value\" props to use as the option's label and value.\n * Alternatively, custom names for these props can be used e.g. by setting the \"labelField\" and \"valueField\" props on the relevant component.\n \n Any props supplied to the \"htmlProps\" object will be spread onto the option's underlying <li> element.\n */\nexport interface IcMenuOption {\n description?: string;\n disabled?: boolean;\n recommended?: boolean;\n children?: IcMenuOption[];\n loading?: boolean;\n timedOut?: boolean;\n [key: string]: any;\n element?: {\n component: any;\n ariaLabel: string;\n };\n icon?: any;\n htmlProps?: Record<string, any>;\n}\n\nexport type IcSearchMatchPositions = \"start\" \| \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n \| string\n \| boolean\n \| number\n \| HTMLElement\n \| IcMenuOption[]\n \| undefined;\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget \| undefined;\n\nexport type IcOrientation = \"horizontal\" \| \"vertical\";\n\nexport type IcEmphasisType = \"filled\" \| \"outlined\";\n\nexport interface IcValueEventDetail {\n value: string;\n keyPressed?: string;\n}\n\nexport interface IcMultiValueEventDetail {\n value: string \| string[] \| null;\n keyPressed?: string;\n}\n\nexport interface IcBlurEventDetail {\n relatedTarget: IcRelatedTarget \| null;\n}\n\nexport type IcSelectTypes = \"single\" \| \"multi\";\n\nexport type IcSelectMethodTypes = \"auto\" \| \"manual\";\n\nexport type IcDeviceSizes = 0 \| 576 \| 768 \| 992 \| 1200;\n\ntype RGB = `rgb(${string})`;\ntype RGBA = `rgba(${string})`;\ntype HEX = `#${string}`;\n\nexport type IcColor = RGB \| RGBA \| HEX;\n\nexport type IcIconPlacementOptions = \"left\" \| \"right\" \| \"top\";\n\nexport type IcButtonTooltipPlacement = \"top\" \| \"right\" \| \"bottom\" \| \"left\";\n\nexport type IcThemeSettings = \"dark\" \| \"light\" \| \"system\";\n\nexport interface IcPaginationBarOptions {\n alignment?: IcPaginationAlignmentOptions;\n hideAllFromItemsPerPage?: boolean;\n hideCurrentPage?: boolean;\n hideFirstAndLastPageButton?: boolean;\n hideRangeLabel?: boolean;\n itemLabel?: string;\n itemsPerPageOptions?: { label: string; value: string }[];\n monochrome?: boolean;\n pageLabel?: string;\n rangeLabelType?: IcPaginationLabelTypes;\n selectedItemsPerPage?: number;\n selectItemsPerPageOnEnter?: boolean;\n setToFirstPageOnPaginationChange?: boolean;\n showGoToPageControl?: boolean;\n showItemsPerPageControl?: boolean;\n theme?: IcThemeMode;\n type?: IcPaginationTypes;\n}\n\nexport type IcDateFormat = \"DD/MM/YYYY\" \| \"MM/DD/YYYY\" \| \"YYYY/MM/DD\";\n\nexport type IcDateValueFormat = string \| Date \| null \| undefined;\n\nexport type IcTimeFormat = \"HH:MM\" \| \"HH:MM:SS\" \| \"HH:MM:SS.SSS\";\n\nexport type ~~IcTimeFormatSelector~~ = \~~"HH:MM\" \| \"HH:MM:SS\";\~~n~~\nexport type IcDisableTimeSelection =\n~~ ~~\| string\n \| Date\n \| {~~ start: string \| Date; end: string \| Date };\n\nexport enum IcDateInputMonths {\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n}\n\nexport enum IcShortDayNames {\n \"Sun\",\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n}\n\nexport enum IcDayNames {\n \"Sunday\",\n \"Monday\",\n \"Tuesday\",\n \"Wednesday\",\n \"Thursday\",\n \"Friday\",\n \"Saturday\",\n}\n\nexport enum IcWeekDays {\n Sunday = 0,\n Monday = 1,\n Tuesday = 2,\n Wednesday = 3,\n Thursday = 4,\n Friday = 5,\n Saturday = 6,\n}\n\nexport type IcPositionTopOrRight = \"top\" \| \"right\";\n\n// Matches HTML aria-live attribute options\nexport type IcAriaLive = \"polite\" \| \"assertive\" \| \"off\";\n\nexport type IcCardDensity = \"default\" \| \"spacious\";\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/utils/types.ts"],"names":[],"mappings":"AA8BA,MAAM,CAAN,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,sCAAe,CAAA;IACf,0CAAmB,CAAA;AACrB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;AAsED,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,4CAAmB,CAAA;IACnB,sCAAa,CAAA;IACb,wCAAe,CAAA;AACjB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC;AA8JD,MAAM,CAAN,IAAY,iBAaX;AAbD,WAAY,iBAAiB;IAC3B,+DAAS,CAAA;IACT,iEAAU,CAAA;IACV,2DAAO,CAAA;IACP,2DAAO,CAAA;IACP,uDAAK,CAAA;IACL,yDAAM,CAAA;IACN,yDAAM,CAAA;IACN,6DAAQ,CAAA;IACR,mEAAW,CAAA;IACX,+DAAS,CAAA;IACT,kEAAU,CAAA;IACV,kEAAU,CAAA;AACZ,CAAC,EAbW,iBAAiB,KAAjB,iBAAiB,QAa5B;AAED,MAAM,CAAN,IAAY,eAQX;AARD,WAAY,eAAe;IACzB,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;IACL,mDAAK,CAAA;AACP,CAAC,EARW,eAAe,KAAf,eAAe,QAQ1B;AAED,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IACpB,+CAAQ,CAAA;IACR,+CAAQ,CAAA;IACR,iDAAS,CAAA;IACT,qDAAW,CAAA;IACX,mDAAU,CAAA;IACV,+CAAQ,CAAA;IACR,mDAAU,CAAA;AACZ,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB;AAED,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IACpB,+CAAU,CAAA;IACV,+CAAU,CAAA;IACV,iDAAW,CAAA;IACX,qDAAa,CAAA;IACb,mDAAY,CAAA;IACZ,+CAAU,CAAA;IACV,mDAAY,CAAA;AACd,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB","sourcesContent":["import {\n IcPaginationLabelTypes,\n IcPaginationTypes,\n IcPaginationAlignmentOptions,\n} from \"../components\";\n\nexport type IcFocusableComponents =\n \| HTMLIcBreadcrumbElement\n \| HTMLIcButtonElement\n \| HTMLIcCardVerticalElement\n \| HTMLIcCheckboxElement\n \| HTMLIcChipElement\n \| HTMLIcLinkElement\n \| HTMLIcNavigationButtonElement\n \| HTMLIcNavigationGroupElement\n \| HTMLIcNavigationItemElement\n \| HTMLIcRadioOptionElement\n \| HTMLIcSearchBarElement\n \| HTMLIcSelectElement\n \| HTMLIcSwitchElement\n \| HTMLIcTabElement\n \| HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n \| \"neutral\"\n \| \"info\"\n \| \"warning\"\n \| \"error\"\n \| \"success\";\n\nexport enum IcInformationStatus {\n Warning = \"warning\",\n Error = \"error\",\n Success = \"success\",\n}\n\nexport type IcSizes = \"medium\" \| \"large\" \| \"small\";\n\nexport type IcSizesNoLarge = \"medium\" \| \"small\";\n\nexport type IcInformationStatusOrEmpty = \"warning\" \| \"error\" \| \"success\" \| \"\";\n\nexport type IcNavType = \"side\" \| \"top\" \| \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n \| \"on\"\n \| \"off\"\n \| \"name\"\n \| \"honorific-prefix\"\n \| \"given-name\"\n \| \"additional-name\"\n \| \"family-name\"\n \| \"honorific-suffix\"\n \| \"nickname\"\n \| \"email\"\n \| \"username\"\n \| \"new-password\"\n \| \"current-password\"\n \| \"one-time-code\"\n \| \"organization-title\"\n \| \"organization\"\n \| \"street-address\"\n \| \"address-line1\"\n \| \"address-line2\"\n \| \"address-line3\"\n \| \"address-level4\"\n \| \"address-level3\"\n \| \"address-level2\"\n \| \"address-level1\"\n \| \"country\"\n \| \"country-name\"\n \| \"postal-code\"\n \| \"cc-name\"\n \| \"cc-given-name\"\n \| \"cc-additional-name\"\n \| \"cc-family-name\"\n \| \"cc-family-name\"\n \| \"cc-number\"\n \| \"cc-exp\"\n \| \"cc-exp-month\"\n \| \"cc-exp-year\"\n \| \"cc-csc\"\n \| \"cc-type\"\n \| \"transaction-currency\"\n \| \"transaction-amount\"\n \| \"language\"\n \| \"bday\"\n \| \"bday-day\"\n \| \"bday-month\"\n \| \"bday-year\"\n \| \"sex\"\n \| \"tel\"\n \| \"tel-country-code\"\n \| \"tel-national\"\n \| \"tel-area-code\"\n \| \"tel-local\"\n \| \"tel-extension\"\n \| \"impp\"\n \| \"url\"\n \| \"photo\";\n\nexport type IcAlignment = \"left\" \| \"center\" \| \"full-width\";\n\nexport enum IcBrandForegroundEnum {\n Default = \"default\",\n Dark = \"dark\",\n Light = \"light\",\n}\n\nexport type IcThemeMode = \"dark\" \| \"light\" \| \"inherit\";\n\nexport type IcBrandForeground = \"default\" \| \"dark\" \| \"light\";\n\nexport type IcBrandForegroundNoDefault = \"dark\" \| \"light\";\n\nexport type IcBrand = {\n mode: IcBrandForeground;\n color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" \| \"dynamic\";\n\nexport type IcColorRGB = {\n r: number;\n g: number;\n b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" \| \"manual\";\n\nexport type IcAutocorrectStates = \"on\" \| \"off\";\n\nexport type IcNavParentDetails = {\n navType: IcNavType \| \"\";\n parent: HTMLElement \| null;\n};\n\nexport type IcTypographyVariants =\n \| \"h1\"\n \| \"h2\"\n \| \"h3\"\n \| \"h4\"\n \| \"subtitle-large\"\n \| \"subtitle-small\"\n \| \"body\"\n \| \"label\"\n \| \"label-uppercase\"\n \| \"caption\"\n \| \"caption-uppercase\"\n \| \"code-large\"\n \| \"code-small\"\n \| \"code-extra-small\"\n \| \"badge\"\n \| \"badge-small\";\n\n/*\n @interface IcMenuOption\n * Set \"label\" and \"value\" props to use as the option's label and value.\n * Alternatively, custom names for these props can be used e.g. by setting the \"labelField\" and \"valueField\" props on the relevant component.\n \n Any props supplied to the \"htmlProps\" object will be spread onto the option's underlying <li> element.\n */\nexport interface IcMenuOption {\n description?: string;\n disabled?: boolean;\n recommended?: boolean;\n children?: IcMenuOption[];\n loading?: boolean;\n timedOut?: boolean;\n [key: string]: any;\n element?: {\n component: any;\n ariaLabel: string;\n };\n icon?: any;\n htmlProps?: Record<string, any>;\n}\n\nexport type IcSearchMatchPositions = \"start\" \| \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n \| string\n \| boolean\n \| number\n \| HTMLElement\n \| IcMenuOption[]\n \| undefined;\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget \| undefined;\n\nexport type IcOrientation = \"horizontal\" \| \"vertical\";\n\nexport type IcEmphasisType = \"filled\" \| \"outlined\";\n\nexport interface IcValueEventDetail {\n value: string;\n keyPressed?: string;\n}\n\nexport interface IcMultiValueEventDetail {\n value: string \| string[] \| null;\n keyPressed?: string;\n}\n\nexport interface IcBlurEventDetail {\n relatedTarget: IcRelatedTarget \| null;\n}\n\nexport type IcSelectTypes = \"single\" \| \"multi\";\n\nexport type IcSelectMethodTypes = \"auto\" \| \"manual\";\n\nexport type IcDeviceSizes = 0 \| 576 \| 768 \| 992 \| 1200;\n\ntype RGB = `rgb(${string})`;\ntype RGBA = `rgba(${string})`;\ntype HEX = `#${string}`;\n\nexport type IcColor = RGB \| RGBA \| HEX;\n\nexport type IcIconPlacementOptions = \"left\" \| \"right\" \| \"top\";\n\nexport type IcButtonTooltipPlacement = \"top\" \| \"right\" \| \"bottom\" \| \"left\";\n\nexport type IcThemeSettings = \"dark\" \| \"light\" \| \"system\";\n\nexport interface IcPaginationBarOptions {\n alignment?: IcPaginationAlignmentOptions;\n hideAllFromItemsPerPage?: boolean;\n hideCurrentPage?: boolean;\n hideFirstAndLastPageButton?: boolean;\n hideRangeLabel?: boolean;\n itemLabel?: string;\n itemsPerPageOptions?: { label: string; value: string }[];\n monochrome?: boolean;\n pageLabel?: string;\n rangeLabelType?: IcPaginationLabelTypes;\n selectedItemsPerPage?: number;\n selectItemsPerPageOnEnter?: boolean;\n setToFirstPageOnPaginationChange?: boolean;\n showGoToPageControl?: boolean;\n showItemsPerPageControl?: boolean;\n theme?: IcThemeMode;\n type?: IcPaginationTypes;\n}\n\nexport type IcDateFormat = \"DD/MM/YYYY\" \| \"MM/DD/YYYY\" \| \"YYYY/MM/DD\";\n\nexport type IcDateValueFormat = string \| Date \| null \| undefined;\n\nexport type IcTimeFormat = \"HH:MM\" \| \"HH:MM:SS\" \| \"HH:MM:SS.SSS\";\n\nexport type IcDisableTimeSelection = {\n start: string \| Date;\n end: string \| Date;\n};\n\nexport enum IcDateInputMonths {\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n}\n\nexport enum IcShortDayNames {\n \"Sun\",\n \"Mon\",\n \"Tue\",\n \"Wed\",\n \"Thu\",\n \"Fri\",\n \"Sat\",\n}\n\nexport enum IcDayNames {\n \"Sunday\",\n \"Monday\",\n \"Tuesday\",\n \"Wednesday\",\n \"Thursday\",\n \"Friday\",\n \"Saturday\",\n}\n\nexport enum IcWeekDays {\n Sunday = 0,\n Monday = 1,\n Tuesday = 2,\n Wednesday = 3,\n Thursday = 4,\n Friday = 5,\n Saturday = 6,\n}\n\nexport type IcPositionTopOrRight = \"top\" \| \"right\";\n\n// Matches HTML aria-live attribute options\nexport type IcAriaLive = \"polite\" \| \"assertive\" \| \"off\";\n\nexport type IcCardDensity = \"default\" \| \"spacious\";\n"]}