@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-tooltip2.js

@@ -1,197 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as arrow, c as computePosition, o as offset, s as shift, f as flip, a as autoUpdate } from './floating-ui.dom.js';
-import { c as classNames } from './index2.js';
-import { t as getPixelsFromRemToken } from './utils.js';
-
-const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--visible .tooltip__popper{display:block;animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:fixed;display:none;opacity:0;border:none;padding:0;margin:0;background:transparent;overflow:visible}.tooltip__popper::backdrop{display:none}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);text-align:start;box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
-
-const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.active = true;
-        this.delay = 200;
-        this.intent = "default";
-        this.maxWidth = "17.5rem";
-        this.position = "top";
-        this.trigger = ["focus", "hover"];
-        this.visible = false;
-        this.onKeydown = (event) => {
-            if (event.code === "Escape") {
-                this.hide();
-            }
-        };
-        this.onFocusIn = () => {
-            if (this.trigger.includes("focus")) {
-                this.show();
-            }
-        };
-        this.onFocusOut = () => {
-            if (this.trigger.includes("focus")) {
-                this.hide();
-            }
-        };
-        this.reposition = async () => {
-            const referenceElement = this.el.children[0];
-            if (!Boolean(referenceElement) || !Boolean(this.popperEl)) {
-                return;
-            }
-            const middleware = [
-                ...this.options.middleware.filter((middleware) => middleware && middleware.name !== "arrow"),
-                arrow({ element: this.arrowElement, padding: 12 }),
-            ];
-            this.actualPosition = await computePosition(referenceElement, this.popperEl, { ...this.options, middleware });
-            const arrowX = this.actualPosition.middlewareData.arrow?.x;
-            const arrowY = this.actualPosition.middlewareData.arrow?.y;
-            this.arrowStyles = {
-                left: Boolean(arrowX) ? arrowX + "px" : undefined,
-                top: Boolean(arrowY) ? arrowY + "px" : undefined,
-            };
-        };
-        this.showWithDelay = () => {
-            if (!this.active) {
-                return;
-            }
-            if (Boolean(this.showTimeout)) {
-                clearTimeout(this.showTimeout);
-                this.showTimeout = undefined;
-            }
-            this.showTimeout = setTimeout(() => {
-                this.show();
-            }, this.delay);
-        };
-        this.updateOptions = () => {
-            const margin = getPixelsFromRemToken("--s-space-12");
-            const shiftPaddingY = getPixelsFromRemToken("--s-space-8");
-            const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
-            this.options = {
-                middleware: [
-                    offset(margin),
-                    shift({
-                        padding: {
-                            top: shiftPaddingY,
-                            bottom: shiftPaddingY,
-                            left: shiftPaddingX,
-                            right: shiftPaddingX,
-                        },
-                    }),
-                    flip(),
-                ],
-                placement: this.position,
-                strategy: "fixed",
-            };
-        };
-    }
-    watchPosition() {
-        this.updateOptions();
-    }
-    onMouseEnter() {
-        if (this.trigger.includes("hover")) {
-            this.showWithDelay();
-        }
-    }
-    onMouseLeave() {
-        if (this.trigger.includes("hover")) {
-            this.hide();
-        }
-    }
-    onWindowResize() {
-        if (!this.active) {
-            return;
-        }
-        this.reposition();
-    }
-    onWindowScroll() {
-        if (!this.active || !this.visible) {
-            return;
-        }
-        this.reposition();
-    }
-    componentWillLoad() {
-        this.reposition();
-    }
-    componentDidLoad() {
-        if (this.positioning !== undefined) {
-            console.warn('[Swirl] The "positioning" prop of swirl-tooltip is deprecated and will be removed with the next major release. "fixed" is now the default positioning strategy.');
-        }
-        this.updateOptions();
-    }
-    async show() {
-        if (!this.active) {
-            return;
-        }
-        this.visible = true;
-        requestAnimationFrame(() => {
-            const referenceElement = this.el.children[0];
-            if (!Boolean(referenceElement)) {
-                return;
-            }
-            this.popperEl?.showPopover();
-            this.reposition();
-            this.disableAutoUpdate = autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
-        });
-    }
-    async hide() {
-        if (Boolean(this.showTimeout)) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = undefined;
-        }
-        this.visible = false;
-        this.popperEl?.hidePopover();
-        this.disableAutoUpdate?.();
-    }
-    render() {
-        const className = classNames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, `tooltip--intent-${this.intent}`, {
-            "tooltip--visible": this.visible,
-        });
-        return (h(Host, { key: '545a6d548e872fc4c2fc9c0f186097d9eb7ae816', onKeydown: this.onKeydown }, h("span", { key: 'ecdd492c49fa180423f0149e17f5e4c5516b0e6b', class: className }, h("span", { key: 'a58bf3d6655332e345b8220c5650da07245f77fb', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: 'e3723a0627c447783280482d9ed695f3d7be97d4' })), h("span", { key: '37d9ea445ca6c7f7c0415cbe3b9188c46333c6ca', class: "tooltip__popper", popover: "manual", ref: (el) => (this.popperEl = el), style: {
-                top: Boolean(this.actualPosition)
-                    ? `${this.actualPosition?.y}px`
-                    : "",
-                left: Boolean(this.actualPosition)
-                    ? `${this.actualPosition?.x}px`
-                    : "",
-                maxWidth: this.maxWidth,
-            } }, this.visible && (h("span", { key: '86077de7054004e1e1956b1576aa6728d7112471', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'f6678ace483c51864b26692fe332c3c6f8a55efc', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'af799b95060261d14c9a67ab15e17e6cd5116845', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
-                ...this.arrowStyles,
-                visibility: this.visible ? "visible" : "hidden",
-            } })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "position": ["watchPosition"]
-    }; }
-    static get style() { return swirlTooltipCss; }
-}, [1, "swirl-tooltip", {
-        "active": [4],
-        "content": [1],
-        "delay": [2],
-        "intent": [1],
-        "maxWidth": [1, "max-width"],
-        "position": [1],
-        "positioning": [1],
-        "trigger": [16],
-        "actualPosition": [32],
-        "arrowStyles": [32],
-        "visible": [32],
-        "show": [64],
-        "hide": [64]
-    }, [[1, "mouseenter", "onMouseEnter"], [1, "mouseleave", "onMouseLeave"], [9, "resize", "onWindowResize"], [9, "scroll", "onWindowScroll"]], {
-        "position": ["watchPosition"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTooltip);
-            }
-            break;
-    } });
-}
-
-export { SwirlTooltip as S, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as o,h as i,Host as e,transformTag as s}from"@stencil/core/internal/client";import{b as a,c as n,o as r,s as l,f as p,a as h}from"./floating-ui.dom.js";import{c}from"./index2.js";import{t as d}from"./utils.js";const f=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.active=!0,this.delay=200,this.intent="default",this.maxWidth="17.5rem",this.position="top",this.trigger=["focus","hover"],this.visible=!1,this.onKeydown=t=>{"Escape"===t.code&&this.hide()},this.onFocusIn=()=>{this.trigger.includes("focus")&&this.show()},this.onFocusOut=()=>{this.trigger.includes("focus")&&this.hide()},this.reposition=async()=>{const t=this.el.children[0];if(!Boolean(t)||!Boolean(this.popperEl))return;const o=[...this.options.middleware.filter((t=>t&&"arrow"!==t.name)),a({element:this.arrowElement,padding:12})];this.actualPosition=await n(t,this.popperEl,{...this.options,middleware:o});const i=this.actualPosition.middlewareData.arrow?.x,e=this.actualPosition.middlewareData.arrow?.y;this.arrowStyles={left:Boolean(i)?i+"px":void 0,top:Boolean(e)?e+"px":void 0}},this.showWithDelay=()=>{this.active&&(Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.showTimeout=setTimeout((()=>{this.show()}),this.delay))},this.updateOptions=()=>{const t=d("--s-space-12"),o=d("--s-space-8"),i=d("--s-space-16");this.options={middleware:[r(t),l({padding:{top:o,bottom:o,left:i,right:i}}),p()],placement:this.position,strategy:"fixed"}}}watchPosition(){this.updateOptions()}onMouseEnter(){this.trigger.includes("hover")&&this.showWithDelay()}onMouseLeave(){this.trigger.includes("hover")&&this.hide()}onWindowResize(){this.active&&this.reposition()}onWindowScroll(){this.active&&this.visible&&this.reposition()}componentWillLoad(){this.reposition()}componentDidLoad(){void 0!==this.positioning&&console.warn('[Swirl] The "positioning" prop of swirl-tooltip is deprecated and will be removed with the next major release. "fixed" is now the default positioning strategy.'),this.updateOptions()}async show(){this.active&&(this.visible=!0,requestAnimationFrame((()=>{const t=this.el.children[0];Boolean(t)&&(this.popperEl?.showPopover(),this.reposition(),this.disableAutoUpdate=h(t,this.popperEl,this.reposition.bind(this)))})))}async hide(){Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.visible=!1,this.popperEl?.hidePopover(),this.disableAutoUpdate?.()}render(){const t=c("tooltip",`tooltip--actual-placement-${this.actualPosition?.placement}`,`tooltip--intent-${this.intent}`,{"tooltip--visible":this.visible});return i(e,{key:"f4c4d204d2ad9617353319b509ef965785aff9e5",onKeydown:this.onKeydown},i("span",{key:"9b915cb395ee1e54d220ba45bd90fe64e1131e36",class:t},i("span",{key:"cd9a1b3c2674c289589f56a5470433aeab151274",class:"tooltip__reference","aria-describedby":"tooltip",onFocusout:this.onFocusOut,onClick:this.hide,onFocusin:this.onFocusIn},i("slot",{key:"1345975e5cf13343d1db4f0005026053548018af"})),i("span",{key:"09abf09fc5186c1c27570e98f4ef721c303facf9",class:"tooltip__popper",popover:"manual",ref:t=>this.popperEl=t,style:{top:Boolean(this.actualPosition)?`${this.actualPosition?.y}px`:"",left:Boolean(this.actualPosition)?`${this.actualPosition?.x}px`:"",maxWidth:this.maxWidth}},this.visible&&i("span",{key:"cbaa3bc4fc328e88f3df6a6646a61354141d02ff",class:"tooltip__bubble",id:"tooltip",part:"tooltip__bubble",role:"tooltip"},i("span",{key:"082ad77318cbdd570df6dea7d6b58926804ae915",class:"tooltip__content",innerHTML:this.content})),i("span",{key:"771d235d3145d30196e61e510dfd35f15074c77a",class:"tooltip__arrow",ref:t=>this.arrowElement=t,style:{...this.arrowStyles,visibility:this.visible?"visible":"hidden"}}))))}get el(){return this}static get watchers(){return{position:[{watchPosition:0}]}}static get style(){return":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--visible .tooltip__popper{display:block;animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:fixed;display:none;opacity:0;border:none;padding:0;margin:0;background:transparent;overflow:visible}.tooltip__popper::backdrop{display:none}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);text-align:start;box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}"}},[257,"swirl-tooltip",{active:[4],content:[1],delay:[2],intent:[1],maxWidth:[1,"max-width"],position:[1],positioning:[1],trigger:[16],actualPosition:[32],arrowStyles:[32],visible:[32],show:[64],hide:[64]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"],[9,"resize","onWindowResize"],[9,"scroll","onWindowScroll"]],{position:[{watchPosition:0}]}]);function m(){"undefined"!=typeof customElements&&["swirl-tooltip"].forEach((t=>{"swirl-tooltip"===t&&(customElements.get(s(t))||customElements.define(s(t),f))}))}export{f as S,m as d}

package/dist/components/swirl-tree-navigation-item.js

@@ -1,158 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$4 } from './swirl-icon2.js';
-import { d as defineCustomElement$3 } from './swirl-icon-chevron-right2.js';
-import { d as defineCustomElement$2 } from './swirl-icon-open-in-new2.js';
-
-const swirlTreeNavigationItemCss = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}";
-
-const SwirlTreeNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeNavigationItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.expansionChange = createEvent(this, "expansionChange", 7);
-        this.level = 1;
-        this.expandable = true;
-        this.external = false;
-        this.expanded = false;
-        this.hasChildren = false;
-        this.childrenHeight = "0";
-        this.buttonId = `${this.navigationItemId}-button`;
-        this.childrenId = `${this.navigationItemId}-children`;
-        this.onKeyDown = (event) => {
-            switch (event.key) {
-                case " ":
-                    event.preventDefault();
-                    this.toggleExpanded(event);
-                    break;
-                case "ArrowRight":
-                    event.preventDefault();
-                    if (!this.expanded && this.hasChildren) {
-                        this.expand();
-                    }
-                    break;
-                case "ArrowLeft":
-                    event.preventDefault();
-                    if (this.expanded) {
-                        this.collapse();
-                    }
-                    break;
-            }
-        };
-        this.toggleExpanded = (event) => {
-            if (this.expandable && this.hasChildren && !this.href) {
-                event.preventDefault();
-                event.stopPropagation();
-                if (this.expanded) {
-                    this.collapse();
-                }
-                else {
-                    this.expand();
-                }
-            }
-        };
-    }
-    componentWillLoad() {
-        this.checkForChildren();
-    }
-    componentDidLoad() {
-        if (this.hasChildren && this.expanded) {
-            this.updateChildrenHeight();
-        }
-    }
-    updateChildrenHeight() {
-        if (this.childrenRef) {
-            const height = this.expanded ? `${this.childrenRef.scrollHeight}px` : "0";
-            this.childrenHeight = height;
-        }
-    }
-    handleExpandedChange() {
-        this.expansionChange.emit(this.expanded);
-        this.updateChildrenHeight();
-    }
-    checkForChildren() {
-        this.hasChildren = Boolean(this.el.querySelector("swirl-tree-navigation-item"));
-    }
-    async expand() {
-        if (this.expanded || !this.expandable || !this.hasChildren) {
-            return;
-        }
-        this.expanded = true;
-    }
-    async collapse() {
-        if (!this.expanded || !this.expandable || !this.hasChildren) {
-            return;
-        }
-        this.expanded = false;
-    }
-    render() {
-        const isLink = Boolean(this.href);
-        const Tag = isLink ? "a" : "button";
-        const linkClassName = classNames("tree-navigation-item__link", {
-            "tree-navigation-item__link--active": this.active,
-            "tree-navigation-item__link--has-icon": Boolean(this.icon),
-        });
-        return (h(Host, { key: 'ef555e1190309d743e3f0480ae3e5742f2ce5582', role: "none" }, h("li", { key: 'bb66b52e97352abdc8f6a8741b796530d977000c', class: {
-                "tree-navigation-item": true,
-                "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '3461f2115facf88d5c23596c7512a2bd4d81e307', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: '2d097fd43c46c6bd6ec23b0c027d3b06f48d144e', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '43348c7691cb6893f8f930d339da5c873ff371e1', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'de1915616ffa64c00430b1e891c1d6865442edb7', class: "tree-navigation-item__label" }, h("span", { key: '61b7cc19916f85d75a500e95ea4b11e2224ae848', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '4ab27dcd073eebba0710388b1a3d172b2f847d2b', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'b31126f7301680362d37ed17b7a1dc8c20580e36', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'bedf1a8d048718ffdf55212fc3bc8b8811bac28b', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'dd4fe5c2f99b905898c54d2d18d3bb7c9c2ce7ee', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '38a3c11afbc6e5e389515346713b14421793ebdc', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
-                height: this.childrenHeight,
-            } }, h("slot", { key: 'cc7005bfa4640372ff408247e8d911ae6409dac8' }))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "expanded": ["handleExpandedChange"]
-    }; }
-    static get style() { return swirlTreeNavigationItemCss; }
-}, [1, "swirl-tree-navigation-item", {
-        "active": [4],
-        "href": [1],
-        "icon": [1],
-        "label": [1],
-        "target": [1],
-        "navigationItemId": [1, "navigation-item-id"],
-        "level": [2],
-        "expandable": [4],
-        "external": [4],
-        "expanded": [32],
-        "hasChildren": [32],
-        "childrenHeight": [32],
-        "expand": [64],
-        "collapse": [64]
-    }, undefined, {
-        "expanded": ["handleExpandedChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-tree-navigation-item", "swirl-icon", "swirl-icon-chevron-right", "swirl-icon-open-in-new"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-tree-navigation-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTreeNavigationItem$1);
-            }
-            break;
-        case "swirl-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-icon-chevron-right":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-icon-open-in-new":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlTreeNavigationItem = SwirlTreeNavigationItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTreeNavigationItem, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as a,Host as n,transformTag as r}from"@stencil/core/internal/client";import{c as s}from"./index2.js";import{d as o}from"./swirl-icon2.js";import{d as l}from"./swirl-icon-chevron-right2.js";import{d as c}from"./swirl-icon-open-in-new2.js";const d=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expansionChange=t(this,"expansionChange",7),this.level=1,this.expandable=!0,this.external=!1,this.expanded=!1,this.hasChildren=!1,this.childrenHeight="0",this.buttonId=this.navigationItemId+"-button",this.childrenId=this.navigationItemId+"-children",this.onKeyDown=e=>{switch(e.key){case" ":e.preventDefault(),this.toggleExpanded(e);break;case"ArrowRight":e.preventDefault(),!this.expanded&&this.hasChildren&&this.expand();break;case"ArrowLeft":e.preventDefault(),this.expanded&&this.collapse()}},this.toggleExpanded=e=>{this.expandable&&this.hasChildren&&!this.href&&(e.preventDefault(),e.stopPropagation(),this.expanded?this.collapse():this.expand())}}componentWillLoad(){this.checkForChildren()}componentDidLoad(){this.hasChildren&&this.expanded&&this.updateChildrenHeight()}updateChildrenHeight(){this.childrenRef&&(this.childrenHeight=this.expanded?this.childrenRef.scrollHeight+"px":"0")}handleExpandedChange(){this.expansionChange.emit(this.expanded),this.updateChildrenHeight()}checkForChildren(){this.hasChildren=!!this.el.querySelector("swirl-tree-navigation-item")}async expand(){!this.expanded&&this.expandable&&this.hasChildren&&(this.expanded=!0)}async collapse(){this.expanded&&this.expandable&&this.hasChildren&&(this.expanded=!1)}render(){const e=!!this.href,i=e?"a":"button",t=s("tree-navigation-item__link",{"tree-navigation-item__link--active":this.active,"tree-navigation-item__link--has-icon":!!this.icon});return a(n,{key:"ef555e1190309d743e3f0480ae3e5742f2ce5582",role:"none"},a("li",{key:"bb66b52e97352abdc8f6a8741b796530d977000c",class:{"tree-navigation-item":!0,"tree-navigation-item--expanded":this.expanded},role:"treeitem","aria-expanded":this.hasChildren?this.expanded:void 0,"aria-level":this.level},a(i,{key:"3461f2115facf88d5c23596c7512a2bd4d81e307",onClick:this.toggleExpanded,onKeyDown:this.onKeyDown,class:t,href:this.href,target:this.target,type:e?void 0:"button",id:this.buttonId,"aria-current":this.active?"page":void 0,"aria-controls":this.hasChildren?this.childrenId:void 0,"aria-expanded":this.hasChildren?this.expanded:void 0},a("span",{key:"2d097fd43c46c6bd6ec23b0c027d3b06f48d144e",class:"tree-navigation-item__content"},this.icon&&a("swirl-icon",{key:"43348c7691cb6893f8f930d339da5c873ff371e1",class:"tree-navigation-item__icon",glyph:this.icon,size:20,"aria-hidden":"true",role:"img","aria-label":this.label+" icon"}),a("span",{key:"de1915616ffa64c00430b1e891c1d6865442edb7",class:"tree-navigation-item__label"},a("span",{key:"61b7cc19916f85d75a500e95ea4b11e2224ae848",class:"tree-navigation-item__label-text"},this.label),this.expandable&&this.hasChildren&&!this.external&&a("span",{key:"4ab27dcd073eebba0710388b1a3d172b2f847d2b",class:"tree-navigation-item__toggle-icon","aria-hidden":"true"},a("swirl-icon-chevron-right",{key:"b31126f7301680362d37ed17b7a1dc8c20580e36",size:16,role:"img","aria-label":"Expand"})),this.external&&a("span",{key:"bedf1a8d048718ffdf55212fc3bc8b8811bac28b",class:"tree-navigation-item__external-icon","aria-hidden":"true"},a("swirl-icon-open-in-new",{key:"dd4fe5c2f99b905898c54d2d18d3bb7c9c2ce7ee",size:16,role:"img","aria-label":"External link"}))))),this.hasChildren&&a("ul",{key:"38a3c11afbc6e5e389515346713b14421793ebdc",class:"tree-navigation-item__children",id:this.childrenId,role:"group","aria-label":this.label+" submenu",ref:e=>this.childrenRef=e,style:{height:this.childrenHeight}},a("slot",{key:"cc7005bfa4640372ff408247e8d911ae6409dac8"}))))}get el(){return this}static get watchers(){return{expanded:[{handleExpandedChange:0}]}}static get style(){return":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}"}},[257,"swirl-tree-navigation-item",{active:[4],href:[1],icon:[1],label:[1],target:[1],navigationItemId:[1,"navigation-item-id"],level:[2],expandable:[4],external:[4],expanded:[32],hasChildren:[32],childrenHeight:[32],expand:[64],collapse:[64]},void 0,{expanded:[{handleExpandedChange:0}]}]),h=d,g=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation-item","swirl-icon","swirl-icon-chevron-right","swirl-icon-open-in-new"].forEach((e=>{switch(e){case"swirl-tree-navigation-item":customElements.get(r(e))||customElements.define(r(e),d);break;case"swirl-icon":customElements.get(r(e))||o();break;case"swirl-icon-chevron-right":customElements.get(r(e))||l();break;case"swirl-icon-open-in-new":customElements.get(r(e))||c()}}))};export{h as SwirlTreeNavigationItem,g as defineCustomElement}

package/dist/components/swirl-tree-navigation.js

@@ -1,35 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const swirlTreeNavigationCss = ":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}";
-
-const SwirlTreeNavigation$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeNavigation extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        return (h(Host, { key: '963f21436dcefe700edda5a51bb47ecb96d157a2' }, h("ul", { key: 'ded974ad31dc3f0263104f1253e3ea5984671a2a', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '199479065b1e6488301b32ad861c56c44a0cd7be' }))));
-    }
-    static get style() { return swirlTreeNavigationCss; }
-}, [1, "swirl-tree-navigation", {
-        "label": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-tree-navigation"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-tree-navigation":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlTreeNavigation$1);
-            }
-            break;
-    } });
-}
-
-const SwirlTreeNavigation = SwirlTreeNavigation$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlTreeNavigation, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as n,transformTag as i}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return a(n,{key:"963f21436dcefe700edda5a51bb47ecb96d157a2"},a("ul",{key:"ded974ad31dc3f0263104f1253e3ea5984671a2a","aria-label":this.label,class:"tree-navigation",role:"tree"},a("slot",{key:"199479065b1e6488301b32ad861c56c44a0cd7be"})))}static get style(){return":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}"}},[257,"swirl-tree-navigation",{label:[1]}]),s=r,o=function(){"undefined"!=typeof customElements&&["swirl-tree-navigation"].forEach((e=>{"swirl-tree-navigation"===e&&(customElements.get(i(e))||customElements.define(i(e),r))}))};export{s as SwirlTreeNavigation,o as defineCustomElement}