@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

package/dist/components/ic-tree-item.js

@@ -0,0 +1,300 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { r as removeDisabledFalse, i as isSlotUsed, o as onComponentRequiredPropUndefined, a as renderDynamicChildSlots } from './helpers2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
+</svg>`;
+
+const icTreeItemCss = ":host{display:block;border:none;position:relative}:host .tree-item-content{display:flex;align-items:center;min-height:calc(var(--ic-space-xl) + var(--ic-space-xs));padding:0 var(--ic-space-xs);text-decoration:none;color:var(--ic-primary-text)}::slotted([slot=\"router-item\"]){display:flex;align-items:center;min-height:calc(var(--ic-space-xl) + var(--ic-space-xs));text-decoration:none;font-family:var(--ic-font-body-family);color:var(--ic-primary-text);padding:0 var(--ic-space-xs) !important}:host(.ic-tree-item-truncate) .tree-item-content,:host(.ic-tree-item-truncate) ::slotted([slot=\"router-item\"]){height:calc(var(--ic-space-xl) + var(--ic-space-xs))}::slotted([slot=\"router-item\"].ic-tree-item-single){padding-left:calc(var(--ic-space-xl) + var(--ic-space-xs)) !important}:host .tree-item-content:focus,::slotted([slot=\"router-item\"]:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}:host .tree-item-content:hover,::slotted([slot=\"router-item\"]:hover){background-color:var(--ic-action-dark-bg-hover) !important;cursor:pointer}:host .tree-item-content:active,::slotted([slot=\"router-item\"]:active){background-color:var(--ic-action-dark-bg-active) !important}:host(.ic-tree-item-light) .tree-item-content:hover,:host(.ic-tree-item-light) ::slotted([slot=\"router-item\"]:hover){background-color:var(--ic-action-light-bg-hover) !important}:host(.ic-tree-item-light) .tree-item-content:active,:host(.ic-tree-item-light) ::slotted([slot=\"router-item\"]:active){background-color:var(--ic-action-light-bg-active) !important}:host(.ic-tree-item-selected) .tree-item-content,:host(.ic-tree-item-selected) ::slotted([slot=\"router-item\"]){background-color:var(--ic-action-default-bg-hover)}:host(.ic-tree-item-small) .tree-item-content,:host(.ic-tree-item-small) ::slotted([slot=\"router-item\"]){min-height:var(--ic-space-xl)}:host(.ic-tree-item-large) .tree-item-content,:host(.ic-tree-item-large) ::slotted([slot=\"router-item\"]){min-height:var(--ic-space-xxl)}:host(.ic-tree-item-truncate.ic-tree-item-small) .tree-item-content,:host(.ic-tree-item-truncate.ic-tree-item-small) ::slotted([slot=\"router-item\"]){height:var(--ic-space-xl)}:host(.ic-tree-item-truncate.ic-tree-item-large) .tree-item-content,:host(.ic-tree-item-truncate.ic-tree-item-large) ::slotted([slot=\"router-item\"]){height:var(--ic-space-xxl)}:host(.ic-tree-item-disabled){pointer-events:none}:host(.ic-tree-item-disabled) .tree-item-content,:host(.ic-tree-item-disabled) .arrow-dropdown,:host(.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),:host(.ic-tree-item-disabled) ::slotted([slot=\"router-item\"]){color:var(--ic-architectural-200);fill:var(--ic-architectural-200);pointer-events:none}:host(.ic-tree-item-light) .tree-item-content,:host(.ic-tree-item-light) .arrow-dropdown,:host(.ic-tree-item-light) ::slotted([slot=\"icon\"]),:host(.ic-tree-item-light) ::slotted([slot=\"router-item\"]){color:var(--ic-architectural-white);fill:var(--ic-architectural-white)}:host(.ic-tree-item-light.ic-tree-item-disabled) .tree-item-content,:host(.ic-tree-item-light.ic-tree-item-disabled) .arrow-dropdown,:host(.ic-tree-item-light.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),:host(.ic-tree-item-light.ic-tree-item-disabled) ::slotted([slot=\"router-item\"]){color:var(--ic-architectural-300);fill:var(--ic-architectural-300)}:host .arrow-dropdown{color:var(--ic-action-default);margin-right:var(--ic-space-xs)}:host(.ic-tree-item-small) .arrow-dropdown{margin-right:var(--ic-space-xxs)}:host .tree-item-expanded{transform:rotate(180deg);margin-top:calc(-1 * var(--ic-space-xxs))}:host .ic-tree-item-single{padding-left:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-tree-item-small) .ic-tree-item-single{padding-left:calc(var(--ic-space-xl) + var(--ic-space-xxs))}.icon-container{width:var(--ic-space-lg);height:var(--ic-space-lg);margin:0 var(--ic-space-xs) 0 0}:host(.ic-tree-item-small) .icon-container{margin:0 var(--ic-space-xxs) 0 0}.ic-text-overflow{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ic-tooltip-overflow{overflow:hidden}@media (forced-colors: active){::slotted([slot=\"icon\"]){fill:currentcolor}:host(.ic-tree-item-disabled) .tree-item-content,:host(.ic-tree-item-disabled) .arrow-dropdown,:host(.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),:host(.ic-tree-item-disabled) ::slotted([slot=\"router-item\"]){color:GrayText !important;fill:GrayText !important}:host .tree-item-content:focus,::slotted([slot=\"router-item\"]:focus){border:var(--ic-hc-border) !important}:host(.ic-tree-item-selected) .tree-item-content,:host(.ic-tree-item-selected) ::slotted([slot=\"router-item\"]){color:Highlight}}";
+
+let treeItemIds = 0;
+const TreeItem = /*@__PURE__*/ proxyCustomElement(class TreeItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icTreeItemSelected = createEvent(this, "icTreeItemSelected", 7);
+        this.treeItemId = `ic-tree-item-${treeItemIds++}`;
+        this.treeItemTag = "IC-TREE-ITEM";
+        this.hostMutationObserver = null;
+        this.TOOLTIP = "ic-tooltip";
+        this.handleTreeItemClicked = () => {
+            if (this.isParent) {
+                this.expanded = !this.expanded;
+                this.hasParentExpanded = true;
+            }
+            this.updateAriaLabel();
+            this.selected = true;
+            this.watchSelectedHandler();
+        };
+        this.setTreeItemPadding = () => {
+            let level = 1;
+            let parentElement = this.el.parentElement;
+            const treeItemContent = this.el.shadowRoot.querySelector(".tree-item-content");
+            const isSiblingOfParent = Array.from(parentElement.children)
+                .map((sibling) => {
+                if (sibling !== this.el &&
+                    !sibling.querySelector('[slot="router-item"]') &&
+                    !sibling.querySelector('[slot="label"]')) {
+                    return sibling.children.length > 0;
+                }
+                else {
+                    return false;
+                }
+            })
+                .includes(true);
+            const isChild = parentElement.tagName === this.treeItemTag;
+            const isRouterItem = this.hasRouterSlot();
+            if ((isSiblingOfParent && !this.el.isParent) ||
+                (isChild && !this.el.isParent)) {
+                if (isRouterItem) {
+                    this.routerSlot.classList.add("ic-tree-item-single");
+                }
+                else {
+                    treeItemContent.classList.add("ic-tree-item-single");
+                }
+            }
+            while (parentElement) {
+                if (parentElement.tagName === this.treeItemTag) {
+                    level++;
+                    if (!this.el.isParent && isSiblingOfParent) {
+                        treeItemContent.style.paddingLeft = `calc(var(--ic-space-xl) + ${level * 16}px)`;
+                    }
+                    else if (!this.el.isParent) {
+                        treeItemContent.style.paddingLeft = `calc(var(--ic-space-xs) + ${level * 24}px`;
+                    }
+                    else {
+                        treeItemContent.style.paddingLeft = `${level * 16}px`;
+                    }
+                }
+                parentElement = parentElement.parentElement;
+            }
+        };
+        this.truncateTreeItemLabel = (treeItem) => {
+            const typographyEl = treeItem.shadowRoot.querySelector(".tree-item-label");
+            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
+            const treeContent = treeItem.shadowRoot.querySelector(".tree-item-content");
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (treeContent === null || treeContent === void 0 ? void 0 : treeContent.clientHeight)) {
+                typographyEl.classList.add("ic-text-overflow");
+                if (!tooltip) {
+                    const tooltipEl = document.createElement("ic-tooltip");
+                    tooltipEl.setAttribute("target", this.el.id);
+                    tooltipEl.setAttribute("label", typographyEl.textContent);
+                    tooltipEl.classList.add("ic-tooltip-overflow");
+                    tooltipEl.setAttribute("placement", "right");
+                    treeContent.appendChild(tooltipEl);
+                    tooltipEl.appendChild(typographyEl);
+                }
+            }
+        };
+        this.handleDisplayTooltip = (display) => {
+            const typographyEl = this.el.shadowRoot.querySelector(".tree-item-label");
+            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP);
+            tooltip === null || tooltip === void 0 ? void 0 : tooltip.displayTooltip(display);
+        };
+        this.childTreeItems = undefined;
+        this.appearance = "dark";
+        this.disabled = false;
+        this.expanded = false;
+        this.hasParentExpanded = false;
+        this.href = undefined;
+        this.hreflang = "";
+        this.isParent = false;
+        this.label = "";
+        this.referrerpolicy = undefined;
+        this.rel = undefined;
+        this.selected = false;
+        this.size = "default";
+        this.target = undefined;
+        this.truncateTreeItem = undefined;
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    watchSelectedHandler() {
+        if (this.selected) {
+            this.icTreeItemSelected.emit({ id: this.el.id });
+        }
+        this.updateAriaLabel();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentWillLoad() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        this.childTreeItems = Array.from(this.el.children).filter((child) => child.tagName === this.treeItemTag);
+        if (this.childTreeItems.length > 0) {
+            this.isParent = true;
+        }
+        this.setTreeItemPadding();
+        this.updateAriaLabel();
+        setTimeout(() => {
+            this.truncateTreeItem && this.truncateTreeItemLabel(this.el);
+        }, 100);
+        !isSlotUsed(this.el, "label") &&
+            onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tree item");
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "icon", this));
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
+    }
+    componentDidRender() {
+        this.truncateTreeItem && this.truncateTreeItemLabel(this.el);
+        if (this.expanded) {
+            this.childTreeItems.forEach((child) => {
+                child.truncateTreeItem && this.truncateTreeItemLabel(child);
+            });
+        }
+    }
+    componentDidUpdate() {
+        if (this.hasParentExpanded) {
+            this.childTreeItems.forEach((child) => {
+                child.truncateTreeItem && this.truncateTreeItemLabel(child);
+            });
+            this.hasParentExpanded = false;
+        }
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Enter" || ev.key === " ") {
+            ev.stopImmediatePropagation();
+            this.handleTreeItemClicked();
+        }
+    }
+    /**
+     * Sets focus on the native `input`.
+     */
+    async setFocus() {
+        var _a, _b;
+        if (this.hasRouterSlot()) {
+            (_a = this.routerSlot) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = this.treeItemElement) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    /**
+     * @internal Updates the aria-label of the tree item.
+     */
+    async updateAriaLabel() {
+        let ariaLabel;
+        if (this.hasRouterSlot()) {
+            ariaLabel = this.routerSlot.textContent;
+        }
+        else if (isSlotUsed(this.el, "label")) {
+            ariaLabel = this.el.querySelector('[slot="label"]').textContent;
+        }
+        else {
+            ariaLabel = this.label;
+        }
+        if (this.isParent) {
+            ariaLabel = `${ariaLabel}, triggers submenu, ${this.expanded ? "expanded" : "collapsed"}`;
+        }
+        if (this.el.parentElement) {
+            const treeItems = Array.from(this.el.parentElement.children).filter((child) => child.tagName === this.treeItemTag);
+            const index = treeItems.indexOf(this.el) + 1;
+            const parentChildren = treeItems.length;
+            ariaLabel = `${ariaLabel}, ${index} of ${parentChildren}`;
+        }
+        if (this.selected) {
+            ariaLabel = `${ariaLabel}, active`;
+        }
+        if (this.disabled) {
+            ariaLabel = `${ariaLabel}, dimmed`;
+        }
+        if (this.hasRouterSlot()) {
+            this.routerSlot.ariaLabel = ariaLabel;
+        }
+        else {
+            this.treeItemElement.ariaLabel = ariaLabel;
+        }
+    }
+    hasRouterSlot() {
+        this.routerSlot = this.el.querySelector('[slot="router-item"]');
+        return !!this.routerSlot;
+    }
+    render() {
+        const { appearance, disabled, label, selected, size, expanded } = this;
+        const Component = this.href && !this.disabled ? "a" : "div";
+        const attrs = Component == "a" && {
+            href: this.href,
+            hrefLang: this.hreflang,
+            referrerPolicy: this.referrerpolicy,
+            rel: this.rel,
+            target: this.target,
+        };
+        return (h(Host, { class: {
+                [`ic-tree-item-${appearance}`]: true,
+                "ic-tree-item-disabled": disabled,
+                "ic-tree-item-selected": !disabled && selected,
+                [`ic-tree-item-${size}`]: size !== "default",
+                "ic-tree-item-truncate": this.truncateTreeItem,
+            }, id: this.treeItemId }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(Component, Object.assign({ class: {
+                "tree-item-content": true,
+            }, tabIndex: disabled ? -1 : 0, onClick: this.handleTreeItemClicked, ref: (el) => (this.treeItemElement = el), "aria-disabled": disabled ? "true" : "false", "aria-live": "polite" }, attrs, { onFocus: () => this.handleDisplayTooltip(true), onBlur: () => this.handleDisplayTooltip(false) }), this.isParent && (h("span", { class: {
+                ["arrow-dropdown"]: true,
+                ["tree-item-expanded"]: expanded,
+            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), h("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? h("slot", { name: "label" }) : label))), expanded && (h("div", { "aria-hidden": `${!expanded}` }, h("slot", null)))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
+        "selected": ["watchSelectedHandler"]
+    }; }
+    static get style() { return icTreeItemCss; }
+}, [1, "ic-tree-item", {
+        "appearance": [1],
+        "disabled": [4],
+        "expanded": [1028],
+        "hasParentExpanded": [1028, "has-parent-expanded"],
+        "href": [1],
+        "hreflang": [1],
+        "isParent": [1028, "is-parent"],
+        "label": [1],
+        "referrerpolicy": [1],
+        "rel": [1],
+        "selected": [1028],
+        "size": [1],
+        "target": [1],
+        "truncateTreeItem": [4, "truncate-tree-item"],
+        "childTreeItems": [32],
+        "setFocus": [64],
+        "updateAriaLabel": [64]
+    }, [[0, "keydown", "handleKeyDown"]], {
+        "disabled": ["watchDisabledHandler"],
+        "selected": ["watchSelectedHandler"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-tree-item", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-tree-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TreeItem);
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IcTreeItem = TreeItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcTreeItem, defineCustomElement };
+
+//# sourceMappingURL=ic-tree-item.js.map

package/dist/components/ic-tree-item.js.map

@@ -0,0 +1 @@
+{"file":"ic-tree-item.js","mappings":"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","names":[],"sources":["src/components/ic-tree-item/ic-tree-item.css?tag=ic-tree-item&encapsulation=shadow","src/components/ic-tree-item/ic-tree-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  border: none;\n  position: relative;\n}\n\n:host .tree-item-content {\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  padding: 0 var(--ic-space-xs);\n  text-decoration: none;\n  color: var(--ic-primary-text);\n}\n\n::slotted([slot=\"router-item\"]) {\n  display: flex;\n  align-items: center;\n  min-height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  text-decoration: none;\n  font-family: var(--ic-font-body-family);\n  color: var(--ic-primary-text);\n  padding: 0 var(--ic-space-xs) !important;\n}\n\n:host(.ic-tree-item-truncate) .tree-item-content,\n:host(.ic-tree-item-truncate) ::slotted([slot=\"router-item\"]) {\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n::slotted([slot=\"router-item\"].ic-tree-item-single) {\n  padding-left: calc(var(--ic-space-xl) + var(--ic-space-xs)) !important;\n}\n\n:host .tree-item-content:focus,\n::slotted([slot=\"router-item\"]:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n  outline: none;\n}\n\n:host .tree-item-content:hover,\n::slotted([slot=\"router-item\"]:hover) {\n  background-color: var(--ic-action-dark-bg-hover) !important;\n  cursor: pointer;\n}\n\n:host .tree-item-content:active,\n::slotted([slot=\"router-item\"]:active) {\n  background-color: var(--ic-action-dark-bg-active) !important;\n}\n\n:host(.ic-tree-item-light) .tree-item-content:hover,\n:host(.ic-tree-item-light) ::slotted([slot=\"router-item\"]:hover) {\n  background-color: var(--ic-action-light-bg-hover) !important;\n}\n\n:host(.ic-tree-item-light) .tree-item-content:active,\n:host(.ic-tree-item-light) ::slotted([slot=\"router-item\"]:active) {\n  background-color: var(--ic-action-light-bg-active) !important;\n}\n\n:host(.ic-tree-item-selected) .tree-item-content,\n:host(.ic-tree-item-selected) ::slotted([slot=\"router-item\"]) {\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.ic-tree-item-small) .tree-item-content,\n:host(.ic-tree-item-small) ::slotted([slot=\"router-item\"]) {\n  min-height: var(--ic-space-xl);\n}\n\n:host(.ic-tree-item-large) .tree-item-content,\n:host(.ic-tree-item-large) ::slotted([slot=\"router-item\"]) {\n  min-height: var(--ic-space-xxl);\n}\n\n:host(.ic-tree-item-truncate.ic-tree-item-small) .tree-item-content,\n:host(.ic-tree-item-truncate.ic-tree-item-small)\n  ::slotted([slot=\"router-item\"]) {\n  height: var(--ic-space-xl);\n}\n\n:host(.ic-tree-item-truncate.ic-tree-item-large) .tree-item-content,\n:host(.ic-tree-item-truncate.ic-tree-item-large)\n  ::slotted([slot=\"router-item\"]) {\n  height: var(--ic-space-xxl);\n}\n\n:host(.ic-tree-item-disabled) {\n  pointer-events: none;\n}\n\n:host(.ic-tree-item-disabled) .tree-item-content,\n:host(.ic-tree-item-disabled) .arrow-dropdown,\n:host(.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),\n:host(.ic-tree-item-disabled) ::slotted([slot=\"router-item\"]) {\n  color: var(--ic-architectural-200);\n  fill: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n:host(.ic-tree-item-light) .tree-item-content,\n:host(.ic-tree-item-light) .arrow-dropdown,\n:host(.ic-tree-item-light) ::slotted([slot=\"icon\"]),\n:host(.ic-tree-item-light) ::slotted([slot=\"router-item\"]) {\n  color: var(--ic-architectural-white);\n  fill: var(--ic-architectural-white);\n}\n\n:host(.ic-tree-item-light.ic-tree-item-disabled) .tree-item-content,\n:host(.ic-tree-item-light.ic-tree-item-disabled) .arrow-dropdown,\n:host(.ic-tree-item-light.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),\n:host(.ic-tree-item-light.ic-tree-item-disabled)\n  ::slotted([slot=\"router-item\"]) {\n  color: var(--ic-architectural-300);\n  fill: var(--ic-architectural-300);\n}\n\n:host .arrow-dropdown {\n  color: var(--ic-action-default);\n  margin-right: var(--ic-space-xs);\n}\n\n:host(.ic-tree-item-small) .arrow-dropdown {\n  margin-right: var(--ic-space-xxs);\n}\n\n:host .tree-item-expanded {\n  transform: rotate(180deg);\n  margin-top: calc(-1 * var(--ic-space-xxs));\n}\n\n:host .ic-tree-item-single {\n  padding-left: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-tree-item-small) .ic-tree-item-single {\n  padding-left: calc(var(--ic-space-xl) + var(--ic-space-xxs));\n}\n\n.icon-container {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  margin: 0 var(--ic-space-xs) 0 0;\n}\n\n:host(.ic-tree-item-small) .icon-container {\n  margin: 0 var(--ic-space-xxs) 0 0;\n}\n\n.ic-text-overflow {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.ic-tooltip-overflow {\n  overflow: hidden;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  ::slotted([slot=\"icon\"]) {\n    fill: currentcolor;\n  }\n\n  :host(.ic-tree-item-disabled) .tree-item-content,\n  :host(.ic-tree-item-disabled) .arrow-dropdown,\n  :host(.ic-tree-item-disabled) ::slotted([slot=\"icon\"]),\n  :host(.ic-tree-item-disabled) ::slotted([slot=\"router-item\"]) {\n    color: GrayText !important;\n    fill: GrayText !important;\n  }\n\n  :host .tree-item-content:focus,\n  ::slotted([slot=\"router-item\"]:focus) {\n    border: var(--ic-hc-border) !important;\n  }\n\n  :host(.ic-tree-item-selected) .tree-item-content,\n  :host(.ic-tree-item-selected) ::slotted([slot=\"router-item\"]) {\n    color: Highlight;\n  }\n}\n","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, IcThemeForegroundNoDefault } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet treeItemIds = 0;\n\n/**\n * @slot label - Content is set as the tree item label.\n * @slot icon - Content is placed to the left of the label.\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n@Component({\n  tag: \"ic-tree-item\",\n  styleUrl: \"ic-tree-item.css\",\n  shadow: true,\n})\nexport class TreeItem {\n  private treeItemId = `ic-tree-item-${treeItemIds++}`;\n  private treeItemElement: HTMLElement;\n  private treeItemTag = \"IC-TREE-ITEM\";\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n  private TOOLTIP = \"ic-tooltip\";\n\n  @Element() el: HTMLIcTreeItemElement;\n\n  @State() childTreeItems: HTMLIcTreeItemElement[];\n\n  /**\n   * @internal Determines whether the light or dark variant of the tree item should be displayed.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /**\n   * If `true`, the tree item appears in the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the tree item appears in the expanded state.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * @internal 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   * 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() {\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 = \"default\";\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   * If `true`, the tree item label will be truncated instead of text wrapping.\n   */\n  @Prop() truncateTreeItem?: boolean;\n\n  /**\n   * Emitted when tree item is selected.\n   */\n  @Event() icTreeItemSelected: EventEmitter<{ id: string }>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    this.childTreeItems = Array.from((this.el as HTMLElement).children).filter(\n      (child) => child.tagName === this.treeItemTag\n    ) as HTMLIcTreeItemElement[];\n\n    if (this.childTreeItems.length > 0) {\n      this.isParent = true;\n    }\n\n    this.setTreeItemPadding();\n\n    this.updateAriaLabel();\n\n    setTimeout(() => {\n      this.truncateTreeItem && this.truncateTreeItemLabel(this.el);\n    }, 100);\n\n    !isSlotUsed(this.el, \"label\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Tree item\"\n      );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, \"icon\", this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n  componentDidRender(): void {\n    this.truncateTreeItem && this.truncateTreeItemLabel(this.el);\n    if (this.expanded) {\n      this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n        child.truncateTreeItem && this.truncateTreeItemLabel(child);\n      });\n    }\n  }\n\n  componentDidUpdate(): void {\n    if (this.hasParentExpanded) {\n      this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n        child.truncateTreeItem && this.truncateTreeItemLabel(child);\n      });\n      this.hasParentExpanded = false;\n    }\n  }\n\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      ev.stopImmediatePropagation();\n      this.handleTreeItemClicked();\n    }\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.hasRouterSlot()) {\n      this.routerSlot?.focus();\n    } else {\n      this.treeItemElement?.focus();\n    }\n  }\n\n  private handleTreeItemClicked = (): void => {\n    if (this.isParent) {\n      this.expanded = !this.expanded;\n      this.hasParentExpanded = true;\n    }\n\n    this.updateAriaLabel();\n    this.selected = true;\n    this.watchSelectedHandler();\n  };\n\n  /**\n   * @internal Updates the aria-label of the tree item.\n   */\n  @Method()\n  async updateAriaLabel(): Promise<void> {\n    let ariaLabel;\n\n    if (this.hasRouterSlot()) {\n      ariaLabel = this.routerSlot.textContent;\n    } else if (isSlotUsed(this.el, \"label\")) {\n      ariaLabel = this.el.querySelector('[slot=\"label\"]').textContent;\n    } else {\n      ariaLabel = this.label;\n    }\n\n    if (this.isParent) {\n      ariaLabel = `${ariaLabel}, triggers submenu, ${\n        this.expanded ? \"expanded\" : \"collapsed\"\n      }`;\n    }\n\n    if (this.el.parentElement) {\n      const treeItems = Array.from(\n        (this.el.parentElement as HTMLElement).children\n      ).filter(\n        (child) => child.tagName === this.treeItemTag\n      ) as HTMLIcTreeItemElement[];\n\n      const index = treeItems.indexOf(this.el) + 1;\n      const parentChildren = treeItems.length;\n\n      ariaLabel = `${ariaLabel}, ${index} of ${parentChildren}`;\n    }\n\n    if (this.selected) {\n      ariaLabel = `${ariaLabel}, active`;\n    }\n\n    if (this.disabled) {\n      ariaLabel = `${ariaLabel}, dimmed`;\n    }\n\n    if (this.hasRouterSlot()) {\n      this.routerSlot.ariaLabel = ariaLabel;\n    } else {\n      this.treeItemElement.ariaLabel = ariaLabel;\n    }\n  }\n\n  private setTreeItemPadding = () => {\n    let level = 1;\n    let parentElement = this.el.parentElement;\n    const treeItemContent = this.el.shadowRoot.querySelector(\n      \".tree-item-content\"\n    ) as HTMLElement;\n\n    const isSiblingOfParent = Array.from(parentElement.children)\n      .map((sibling) => {\n        if (\n          sibling !== this.el &&\n          !sibling.querySelector('[slot=\"router-item\"]') &&\n          !sibling.querySelector('[slot=\"label\"]')\n        ) {\n          return sibling.children.length > 0;\n        } else {\n          return false;\n        }\n      })\n      .includes(true);\n\n    const isChild = parentElement.tagName === this.treeItemTag;\n\n    const isRouterItem = this.hasRouterSlot();\n\n    if (\n      (isSiblingOfParent && !this.el.isParent) ||\n      (isChild && !this.el.isParent)\n    ) {\n      if (isRouterItem) {\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        if (!this.el.isParent && isSiblingOfParent) {\n          treeItemContent.style.paddingLeft = `calc(var(--ic-space-xl) + ${\n            level * 16\n          }px)`;\n        } else if (!this.el.isParent) {\n          treeItemContent.style.paddingLeft = `calc(var(--ic-space-xs) + ${\n            level * 24\n          }px`;\n        } else {\n          treeItemContent.style.paddingLeft = `${level * 16}px`;\n        }\n      }\n      parentElement = parentElement.parentElement;\n    }\n  };\n\n  private truncateTreeItemLabel = (treeItem: HTMLIcTreeItemElement) => {\n    const typographyEl: HTMLIcTypographyElement =\n      treeItem.shadowRoot.querySelector(\".tree-item-label\");\n    const tooltip = typographyEl?.closest(this.TOOLTIP);\n    const treeContent: HTMLElement =\n      treeItem.shadowRoot.querySelector(\".tree-item-content\");\n\n    if (typographyEl?.scrollHeight > treeContent?.clientHeight) {\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        treeContent.appendChild(tooltipEl);\n        tooltipEl.appendChild(typographyEl);\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: HTMLIcTypographyElement =\n      this.el.shadowRoot.querySelector(\".tree-item-label\");\n    const tooltip: HTMLIcTooltipElement = typographyEl?.closest(this.TOOLTIP);\n\n    tooltip?.displayTooltip(display);\n  };\n\n  render() {\n    const { appearance, disabled, label, selected, size, expanded } = 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-${appearance}`]: true,\n          \"ic-tree-item-disabled\": disabled,\n          \"ic-tree-item-selected\": !disabled && selected,\n          [`ic-tree-item-${size}`]: size !== \"default\",\n          \"ic-tree-item-truncate\": this.truncateTreeItem,\n        }}\n        id={this.treeItemId}\n      >\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\" />\n        ) : (\n          <Component\n            class={{\n              \"tree-item-content\": true,\n            }}\n            tabIndex={disabled ? -1 : 0}\n            onClick={this.handleTreeItemClicked}\n            ref={(el) => (this.treeItemElement = el)}\n            aria-disabled={disabled ? \"true\" : \"false\"}\n            aria-live=\"polite\"\n            {...attrs}\n            onFocus={() => this.handleDisplayTooltip(true)}\n            onBlur={() => this.handleDisplayTooltip(false)}\n          >\n            {this.isParent && (\n              <span\n                class={{\n                  [\"arrow-dropdown\"]: true,\n                  [\"tree-item-expanded\"]: expanded,\n                }}\n                aria-hidden=\"true\"\n                innerHTML={arrowDropdown}\n              />\n            )}\n            {isSlotUsed(this.el, \"icon\") && (\n              <div class=\"icon-container\">\n                <slot name=\"icon\" />\n              </div>\n            )}\n            <ic-typography class=\"tree-item-label\">\n              {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n            </ic-typography>\n          </Component>\n        )}\n        {expanded && (\n          <div aria-hidden={`${!expanded}`}>\n            <slot />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-tree-view.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcTreeView extends Components.IcTreeView, HTMLElement {}
+export const IcTreeView: {
+    prototype: IcTreeView;
+    new (): IcTreeView;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-tree-view.js

@@ -0,0 +1,252 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as isPropDefined, i as isSlotUsed, a as renderDynamicChildSlots } from './helpers2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const icTreeViewCss = ":host{display:block;width:var(--tree-view-width, 100%)}:host .heading-area-container{border-bottom:var(--ic-border-default);display:flex;align-items:center;min-height:calc(\n    var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px)\n  );padding:0 var(--ic-space-xs)}:host(.ic-tree-view-small) .heading-area-container{min-height:calc(var(--ic-space-xl) - var(--ic-space-1px))}:host(.ic-tree-view-large) .heading-area-container{min-height:calc(var(--ic-space-xxl) - var(--ic-space-1px))}:host(.ic-tree-view-truncate) .heading-area-container{height:calc(var(--ic-space-xl) + var(--ic-space-xs) - var(--ic-space-1px))}:host(.ic-tree-view-truncate.ic-tree-view-small) .heading-area-container{height:calc(var(--ic-space-xl) - var(--ic-space-1px))}:host(.ic-tree-view-truncate.ic-tree-view-large) .heading-area-container{height:calc(var(--ic-space-xxl) - var(--ic-space-1px))}:host(.ic-tree-view-light) .heading-area-container{color:var(--ic-architectural-white);fill:var(--ic-architectural-white)}.icon-container{width:var(--ic-space-lg);height:var(--ic-space-lg);margin:0 var(--ic-space-xs) 0 0}:host(.ic-tree-view-small) .icon-container{margin:0 var(--ic-space-xxs) 0 0}.ic-text-overflow{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ic-tooltip-overflow{overflow:hidden}.tree-view-header.with-padding{padding-right:var(--ic-space-xs)}@media (forced-colors: active){::slotted([slot=\"icon\"]){fill:currentcolor}}";
+
+let treeViewIds = 0;
+const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.treeViewId = `ic-tree-view-${treeViewIds++}`;
+        this.treeItemTag = "IC-TREE-ITEM";
+        this.hostMutationObserver = null;
+        this.isLoaded = false;
+        this.handleKeyDown = (event) => {
+            var _a;
+            const focussedChild = this.treeItems.indexOf(this.treeItems.filter((el) => el === document.activeElement)[0]);
+            const expanded = (_a = this.treeItems[focussedChild]) === null || _a === void 0 ? void 0 : _a.expanded;
+            switch (event.key) {
+                case "ArrowDown":
+                    this.treeItems[this.getNextItemToSelect(focussedChild, true)].setFocus();
+                    if (focussedChild !== this.treeItems.length - 1) {
+                        event.preventDefault();
+                    }
+                    break;
+                case "ArrowUp":
+                    this.treeItems[this.getNextItemToSelect(focussedChild, false)].setFocus();
+                    if (focussedChild !== 0) {
+                        event.preventDefault();
+                    }
+                    break;
+                case "ArrowRight":
+                    if (this.treeItems[focussedChild].isParent && !expanded) {
+                        this.treeItems[focussedChild].expanded = true;
+                        this.treeItems[focussedChild].hasParentExpanded = true;
+                        this.treeItems[focussedChild].updateAriaLabel();
+                    }
+                    else if (this.treeItems[focussedChild].isParent && expanded) {
+                        this.treeItems[focussedChild].children[0].setFocus();
+                    }
+                    event.preventDefault();
+                    break;
+                case "ArrowLeft":
+                    if (this.treeItems[focussedChild].isParent && expanded) {
+                        this.treeItems[focussedChild].expanded = false;
+                        this.treeItems[focussedChild].hasParentExpanded = false;
+                        this.treeItems[focussedChild].updateAriaLabel();
+                    }
+                    else if (this.treeItems[focussedChild].parentElement.tagName ===
+                        this.treeItemTag) {
+                        this.treeItems[focussedChild].parentElement.setFocus();
+                    }
+                    event.preventDefault();
+                    break;
+            }
+        };
+        this.getNextItemToSelect = (currentItem, movingDown) => {
+            const numItems = this.treeItems.length - 1;
+            if (currentItem < 1) {
+                currentItem = 0;
+            }
+            let nextItem = movingDown ? currentItem + 1 : currentItem - 1;
+            if (nextItem < 0) {
+                nextItem = 0;
+            }
+            else if (nextItem > numItems) {
+                nextItem = numItems;
+            }
+            const maxAttempts = numItems + 1;
+            let attempts = 0;
+            while (attempts < maxAttempts) {
+                if (nextItem < 0 || nextItem > numItems) {
+                    return currentItem;
+                }
+                if (!this.treeItems[nextItem].disabled &&
+                    (this.treeItems[nextItem].parentElement.tagName !== this.treeItemTag ||
+                        this.treeItems[nextItem].parentElement
+                            .expanded)) {
+                    return nextItem;
+                }
+                if (nextItem === numItems && this.treeItems[nextItem].disabled) {
+                    return currentItem;
+                }
+                nextItem = movingDown ? nextItem + 1 : nextItem - 1;
+                attempts++;
+            }
+            return currentItem;
+        };
+        this.linkTreeItems = () => {
+            this.treeItems.forEach((treeItem) => {
+                treeItem.setAttribute("context-id", this.treeViewId);
+            });
+        };
+        this.setTreeItems = () => {
+            this.treeItems = this.getAllTreeItems(this.el);
+            this.linkTreeItems();
+        };
+        this.addSlotChangeListener = () => {
+            this.el.addEventListener("slotchange", this.setTreeItems);
+        };
+        this.truncateTreeViewHeading = () => {
+            const typographyEl = this.el.shadowRoot.querySelector(".tree-view-header");
+            const tooltip = typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest("ic-tooltip");
+            const headingContainer = this.el.shadowRoot.querySelector(".heading-area-container");
+            if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (headingContainer === null || headingContainer === void 0 ? void 0 : headingContainer.clientHeight)) {
+                typographyEl.classList.add("ic-text-overflow");
+                if (!tooltip) {
+                    const tooltipEl = document.createElement("ic-tooltip");
+                    tooltipEl.setAttribute("target", this.el.id);
+                    tooltipEl.setAttribute("label", typographyEl.textContent);
+                    tooltipEl.classList.add("ic-tooltip-overflow");
+                    tooltipEl.setAttribute("placement", "right");
+                    headingContainer.appendChild(tooltipEl);
+                    tooltipEl.appendChild(typographyEl);
+                }
+            }
+        };
+        this.isHeadingDefined = () => isPropDefined(this.heading) && this.heading !== null;
+        this.hasHeadingAreaContent = () => {
+            return (isSlotUsed(this.el, "heading") ||
+                this.isHeadingDefined() ||
+                isSlotUsed(this.el, "icon"));
+        };
+        this.treeItems = undefined;
+        this.appearance = "dark";
+        this.heading = "";
+        this.size = "default";
+        this.truncateHeading = false;
+        this.truncateTreeItems = false;
+    }
+    watchAppearanceHandler() {
+        this.treeItems.forEach((treeItem) => {
+            treeItem.appearance = this.appearance;
+        });
+    }
+    watchSizeHandler() {
+        this.treeItems.forEach((treeItem) => {
+            treeItem.size = this.size;
+        });
+    }
+    watchTruncateTreeItemsHandler() {
+        this.treeItems.forEach((treeItem) => {
+            if (treeItem.truncateTreeItem === undefined) {
+                treeItem.truncateTreeItem = this.truncateTreeItems;
+            }
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.removeEventListener("slotchange", this.setTreeItems);
+        (_b = this.hostMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    componentWillLoad() {
+        this.setTreeItems();
+        this.watchAppearanceHandler();
+        this.watchSizeHandler();
+        this.watchTruncateTreeItemsHandler();
+    }
+    componentDidRender() {
+        this.truncateHeading && this.truncateTreeViewHeading();
+    }
+    componentDidLoad() {
+        this.addSlotChangeListener();
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "icon", this));
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
+        this.isLoaded = true;
+    }
+    handleTreeItemSelected(event) {
+        this.treeItems.forEach((treeItem) => {
+            if (treeItem.selected && treeItem.id !== event.detail.id) {
+                treeItem.selected = false;
+            }
+        });
+    }
+    getAllTreeItems(element) {
+        const treeItems = [];
+        const collectTreeItems = (el) => {
+            Array.from(el.children).forEach((child) => {
+                if (child.tagName === this.treeItemTag) {
+                    treeItems.push(child);
+                }
+                collectTreeItems(child);
+            });
+        };
+        collectTreeItems(element);
+        return treeItems;
+    }
+    render() {
+        const { appearance, isLoaded, heading, size, truncateHeading } = this;
+        return (h(Host, { "context-id": this.treeViewId, class: {
+                [`ic-tree-view-${appearance}`]: true,
+                [`ic-tree-view-${size}`]: size !== "default",
+                "ic-tree-view-truncate": truncateHeading,
+            }, onKeyDown: this.handleKeyDown, "aria-label": this.isHeadingDefined() ? heading : null }, this.hasHeadingAreaContent() && (h("div", { class: "heading-area-container" }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "subtitle-large", class: {
+                "tree-view-header": true,
+                "with-padding": truncateHeading && !isLoaded,
+            } }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (heading)))), h("slot", null)));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "appearance": ["watchAppearanceHandler"],
+        "size": ["watchSizeHandler"],
+        "truncateTreeItems": ["watchTruncateTreeItemsHandler"]
+    }; }
+    static get style() { return icTreeViewCss; }
+}, [1, "ic-tree-view", {
+        "appearance": [1],
+        "heading": [1],
+        "size": [1],
+        "truncateHeading": [4, "truncate-heading"],
+        "truncateTreeItems": [4, "truncate-tree-items"],
+        "treeItems": [32]
+    }, [[0, "icTreeItemSelected", "handleTreeItemSelected"]], {
+        "appearance": ["watchAppearanceHandler"],
+        "size": ["watchSizeHandler"],
+        "truncateTreeItems": ["watchTruncateTreeItemsHandler"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-tree-view", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-tree-view":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TreeView);
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IcTreeView = TreeView;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcTreeView, defineCustomElement };
+
+//# sourceMappingURL=ic-tree-view.js.map