@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC5

package/dist/components/z-skip-to-content.js

@@ -1,93 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { T as ThemeVariant } from './index2.js';
-import { e as getElementTree, h as handleKeyboardSubmit } from './utils.js';
-
-const stylesCss = ".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg);text-align:center}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{display:inline-flex;height:100%;align-items:center}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--color-surface05);color:var(--color-surface01)}.light.sc-z-skip-to-content-h{border:var(--border-size-medium) solid var(--color-surface05);background-color:var(--color-surface01);color:var(--color-default-text)}@media (min-width: 768px){.sc-z-skip-to-content-h{text-align:start}}@media (min-width: 1152px){.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{padding:0 calc(var(--space-unit) * 3);border-right:var(--border-size-small) solid var(--color-surface05)}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{border-right:var(--border-size-small) solid var(--color-surface01)}}";
-const ZSkipToContentStyle0 = stylesCss;
-
-const ZSkipToContent$1 = /*@__PURE__*/ proxyCustomElement(class ZSkipToContent extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.variant = undefined;
-        this.links = [];
-        this.visible = false;
-        this.visibleLink = "";
-    }
-    handleFocusOutSkipToContent(e) {
-        if (this.isInSkipToContent(e.target)) {
-            this.visible = false;
-        }
-    }
-    handleFocusSkipToContent(e) {
-        if (this.isInSkipToContent(e.target)) {
-            this.visible = true;
-        }
-    }
-    componentDidLoad() {
-        this.showFirstChild();
-    }
-    componentWillRender() {
-        if (this.links) {
-            this.links = typeof this.links === "string" ? JSON.parse(this.links) : this.links;
-        }
-    }
-    isInSkipToContent(elem) {
-        const tree = getElementTree(elem);
-        const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-skip-to-content");
-        return !!menuParent;
-    }
-    showFirstChild() {
-        var _a;
-        const firstChild = (_a = this.hostElement.children) === null || _a === void 0 ? void 0 : _a[0];
-        if (firstChild) {
-            this.visibleLink = firstChild.id;
-        }
-    }
-    handleLinkClick() {
-        this.visible = false;
-    }
-    render() {
-        return (h(Host, { key: '8b913cd494118ddb3e53d529d40a60693b75a157', class: {
-                [this.variant]: true,
-                "skip-to-content-visible": this.visible,
-            } }, this.links.map((link, i) => {
-            const id = `skip-to-content-${i}`;
-            return (h("div", { class: "link-container" }, h("a", { id: id, class: {
-                    "body-1-sb": true,
-                    "z-link": true,
-                    "z-link-underline": true,
-                    "z-link-inverse": this.variant === ThemeVariant.DARK,
-                    "link-visible": id == this.visibleLink,
-                    "link-invisible": id != this.visibleLink,
-                }, "aria-label": link.ariaLabel || link.label, href: link.href, onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label)));
-        })));
-    }
-    get hostElement() { return this; }
-    static get style() { return ZSkipToContentStyle0; }
-}, [2, "z-skip-to-content", {
-        "variant": [513],
-        "links": [1025],
-        "visible": [32],
-        "visibleLink": [32]
-    }, [[4, "focusout", "handleFocusOutSkipToContent"], [4, "focusin", "handleFocusSkipToContent"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-skip-to-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-skip-to-content":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZSkipToContent$1);
-            }
-            break;
-    } });
-}
-
-const ZSkipToContent = ZSkipToContent$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZSkipToContent, defineCustomElement };
-
-//# sourceMappingURL=z-skip-to-content.js.map
+import{proxyCustomElement as t,HTMLElement as i,h as n,Host as o,transformTag as s}from"@stencil/core/internal/client";import{T as e}from"./index2.js";import{f as c,h as l}from"./utils.js";const r=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.links=[],this.visible=!1,this.visibleLink=""}handleFocusOutSkipToContent(t){this.isInSkipToContent(t.target)&&(this.visible=!1)}handleFocusSkipToContent(t){this.isInSkipToContent(t.target)&&(this.visible=!0)}componentDidLoad(){this.showFirstChild()}componentWillRender(){this.links&&(this.links="string"==typeof this.links?JSON.parse(this.links):this.links)}isInSkipToContent(t){const i=c(t).find((t=>"z-skip-to-content"===t.nodeName.toLowerCase()));return!!i}showFirstChild(){var t;const i=null===(t=this.hostElement.children)||void 0===t?void 0:t[0];i&&(this.visibleLink=i.id)}handleLinkClick(){this.visible=!1}render(){return n(o,{key:"453b88d07dba674089b87d0e203154d57967ae20",class:{[this.variant]:!0,"skip-to-content-visible":this.visible}},this.links.map(((t,i)=>{const o="skip-to-content-"+i;return n("div",{class:"link-container"},n("a",{id:o,class:{"body-1-sb":!0,"z-link":!0,"z-link-underline":!0,"z-link-inverse":this.variant===e.DARK,"link-visible":o==this.visibleLink,"link-invisible":o!=this.visibleLink},"aria-label":t.ariaLabel||t.label,href:t.href,onFocus:()=>this.visibleLink=o,onClick:()=>this.handleLinkClick(),onKeyUp:t=>l(t,this.handleLinkClick.bind(this))},t.label))})))}get hostElement(){return this}static get style(){return".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg);text-align:center}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{display:inline-flex;height:100%;align-items:center}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--color-surface05);color:var(--color-surface01)}.light.sc-z-skip-to-content-h{border:var(--border-size-medium) solid var(--color-surface05);background-color:var(--color-surface01);color:var(--color-default-text)}@media (min-width: 768px){.sc-z-skip-to-content-h{text-align:start}}@media (min-width: 1152px){.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{padding:0 calc(var(--space-unit) * 3);border-right:var(--border-size-small) solid var(--color-surface05)}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{border-right:var(--border-size-small) solid var(--color-surface01)}}"}},[2,"z-skip-to-content",{variant:[513],links:[1025],visible:[32],visibleLink:[32]},[[4,"focusout","handleFocusOutSkipToContent"],[4,"focusin","handleFocusSkipToContent"]]]),a=r,h=function(){"undefined"!=typeof customElements&&["z-skip-to-content"].forEach((t=>{"z-skip-to-content"===t&&(customElements.get(s(t))||customElements.define(s(t),r))}))};export{a as ZSkipToContent,h as defineCustomElement}

package/dist/components/z-slideshow.js

@@ -1,161 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { p as Device } from './index2.js';
-import { i as convertJson, g as getDevice, h as handleKeyboardSubmit } from './utils.js';
-import { d as defineCustomElement$2 } from './index10.js';
-
-const stylesCss = ":host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-background);grid-template:2 / 2;grid-template-areas:\"center center\" \"left right\"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-background);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:\"left center right\"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}";
-const ZSlideshowStyle0 = stylesCss;
-
-/**
- * Check if data is an array of strings.
- * @param {unknown} data Data to check
- * @returns {boolean}
- */
-function isStringArray(data) {
-    return Array.isArray(data) && data.every((datum) => typeof datum === "string");
-}
-const ZSlideshow$1 = /*@__PURE__*/ proxyCustomElement(class ZSlideshow extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.slideshowid = undefined;
-        this.data = undefined;
-        this.device = undefined;
-        this.currentSlide = 0;
-    }
-    watchData() {
-        this.parseLinks();
-    }
-    componentWillLoad() {
-        this.parseLinks();
-        this.setDevice();
-        window.addEventListener("resize", this.handleResize.bind(this));
-    }
-    componentDidRender() {
-        this.setStyle();
-    }
-    handleResize() {
-        this.setDevice();
-        this.setStyle();
-    }
-    parseLinks() {
-        var _a;
-        switch (typeof this.data) {
-            case "string": {
-                const parsed = (_a = convertJson(this.data)) !== null && _a !== void 0 ? _a : [];
-                if (!isStringArray(parsed)) {
-                    throw new Error("Passed data is invalid");
-                }
-                this.links = parsed;
-                break;
-            }
-            default:
-                this.links = this.data;
-                break;
-        }
-    }
-    setStyle() {
-        const refSlides = this.el.shadowRoot.querySelector("#slides");
-        if (!refSlides) {
-            return;
-        }
-        const allImages = this.el.shadowRoot.querySelectorAll(".slide");
-        const width = this.el.offsetWidth;
-        const fullwidth = width * this.links.length;
-        refSlides.style.width = `${fullwidth}px`;
-        refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;
-        allImages.forEach((item) => {
-            const img = item.querySelector("img");
-            img.style.width = `${width}px`;
-        });
-    }
-    setDevice() {
-        this.device = getDevice();
-    }
-    setCurrentSlide(index) {
-        this.currentSlide = index;
-    }
-    getBulletDimension() {
-        switch (this.device) {
-            case Device.MOBILE:
-                return 24;
-            case Device.TABLET:
-                return 32;
-            default:
-                return 40;
-        }
-    }
-    renderSlides(items) {
-        return (h("div", { id: "slides" }, items.map((item, i) => (h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` }, h("img", { src: item }))))));
-    }
-    renderScroll(direction) {
-        let disabled = false, nextSlide = this.currentSlide;
-        if (direction === "left") {
-            disabled = this.currentSlide === 0;
-            nextSlide--;
-        }
-        else if (direction === "right") {
-            disabled = this.currentSlide === this.links.length - 1;
-            nextSlide++;
-        }
-        return (h("z-icon", { class: `scroll ${direction} ${disabled && "disabled"}`, width: this.getBulletDimension(), height: this.getBulletDimension(), name: `chevron-${direction}-circle`, onClick: () => {
-                !disabled && this.setCurrentSlide(nextSlide);
-            }, onKeyUp: (e) => !disabled &&
-                handleKeyboardSubmit(e, () => {
-                    this.setCurrentSlide(nextSlide);
-                }), tabindex: 0, role: "button" }));
-    }
-    renderSlideshowMain() {
-        return (h("main", null, this.renderScroll("left"), this.renderSlides(this.links), this.renderScroll("right")));
-    }
-    renderBullet(i) {
-        return (h("a", { class: `bullet ${this.currentSlide === i && "selected"}`, onClick: () => this.setCurrentSlide(i), onKeyUp: (e) => handleKeyboardSubmit(e, () => this.setCurrentSlide(i)), tabindex: 0, role: "button" }));
-    }
-    renderSlideshowFooter() {
-        return (h("footer", null, h("div", { class: "footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "footer-center" }, h("div", { class: "bullet-container" }, Object.keys(this.links).map((i) => this.renderBullet(parseInt(i))))), h("div", { class: "footer-right" }, h("slot", { name: "footer-right" }))));
-    }
-    render() {
-        if (!this.links || !this.links.length) {
-            return h("div", null);
-        }
-        return (h("div", { id: this.slideshowid }, this.renderSlideshowMain(), this.renderSlideshowFooter()));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "data": ["watchData"]
-    }; }
-    static get style() { return ZSlideshowStyle0; }
-}, [1, "z-slideshow", {
-        "slideshowid": [1],
-        "data": [1],
-        "device": [32],
-        "currentSlide": [32]
-    }, undefined, {
-        "data": ["watchData"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-slideshow", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-slideshow":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZSlideshow$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZSlideshow = ZSlideshow$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZSlideshow, defineCustomElement };
-
-//# sourceMappingURL=z-slideshow.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as i,transformTag as r}from"@stencil/core/internal/client";import{p as s}from"./index2.js";import{i as o,g as n,h as a}from"./utils.js";import{d as l}from"./index3.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.currentSlide=0}watchData(){this.parseLinks()}componentWillLoad(){this.parseLinks(),this.setDevice(),window.addEventListener("resize",this.handleResize.bind(this))}componentDidRender(){this.setStyle()}handleResize(){this.setDevice(),this.setStyle()}parseLinks(){var t;switch(typeof this.data){case"string":{const e=null!==(t=o(this.data))&&void 0!==t?t:[];if(!function(t){return Array.isArray(t)&&t.every((t=>"string"==typeof t))}(e))throw Error("Passed data is invalid");this.links=e;break}default:this.links=this.data}}setStyle(){const t=this.el.shadowRoot.querySelector("#slides");if(!t)return;const e=this.el.shadowRoot.querySelectorAll(".slide"),i=this.el.offsetWidth;t.style.width=i*this.links.length+"px",t.style.transform=`translate(-${i*this.currentSlide}px)`,e.forEach((t=>{t.querySelector("img").style.width=i+"px"}))}setDevice(){this.device=n()}setCurrentSlide(t){this.currentSlide=t}getBulletDimension(){switch(this.device){case s.MOBILE:return 24;case s.TABLET:return 32;default:return 40}}renderSlides(t){return i("div",{id:"slides"},t.map(((t,e)=>i("div",{id:"slide"+e,class:"slide "+(this.currentSlide!==e&&"hide")},i("img",{src:t})))))}renderScroll(t){let e=!1,r=this.currentSlide;return"left"===t?(e=0===this.currentSlide,r--):"right"===t&&(e=this.currentSlide===this.links.length-1,r++),i("z-icon",{class:`scroll ${t} ${e&&"disabled"}`,width:this.getBulletDimension(),height:this.getBulletDimension(),name:`chevron-${t}-circle`,onClick:()=>{e||this.setCurrentSlide(r)},onKeyUp:t=>!e&&a(t,(()=>{this.setCurrentSlide(r)})),tabindex:0,role:"button"})}renderSlideshowMain(){return i("main",null,this.renderScroll("left"),this.renderSlides(this.links),this.renderScroll("right"))}renderBullet(t){return i("a",{class:"bullet "+(this.currentSlide===t&&"selected"),onClick:()=>this.setCurrentSlide(t),onKeyUp:e=>a(e,(()=>this.setCurrentSlide(t))),tabindex:0,role:"button"})}renderSlideshowFooter(){return i("footer",null,i("div",{class:"footer-left"},i("slot",{name:"footer-left"})),i("div",{class:"footer-center"},i("div",{class:"bullet-container"},Object.keys(this.links).map((t=>this.renderBullet(parseInt(t)))))),i("div",{class:"footer-right"},i("slot",{name:"footer-right"})))}render(){return this.links&&this.links.length?i("div",{id:this.slideshowid},this.renderSlideshowMain(),this.renderSlideshowFooter()):i("div",null)}get el(){return this}static get watchers(){return{data:[{watchData:0}]}}static get style(){return':host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-background);grid-template:2 / 2;grid-template-areas:"center center" "left right"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-background);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:"left center right"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}'}},[257,"z-slideshow",{slideshowid:[1],data:[1],device:[32],currentSlide:[32]},void 0,{data:[{watchData:0}]}]),h=d,c=function(){"undefined"!=typeof customElements&&["z-slideshow","z-icon"].forEach((t=>{switch(t){case"z-slideshow":customElements.get(r(t))||customElements.define(r(t),d);break;case"z-icon":customElements.get(r(t))||l()}}))};export{h as ZSlideshow,c as defineCustomElement}

package/dist/components/z-stepper-item.js

@@ -1,60 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './index10.js';
-
-const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:\"\"}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]),:host([pressed]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-default-success);color:var(--color-default-success)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-default-success)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
-const ZStepperItemStyle0 = stylesCss;
-
-const ZStepperItem$1 = /*@__PURE__*/ proxyCustomElement(class ZStepperItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.index = undefined;
-        this.href = undefined;
-        this.pressed = undefined;
-        this.checked = undefined;
-        this.disabled = undefined;
-    }
-    getAttributes() {
-        const href = this.href && !this.pressed && !this.disabled ? { onClick: () => (location.href = this.href) } : undefined;
-        const role = href ? { role: "link" } : undefined;
-        const current = this.pressed && !this.disabled ? { "aria-current": "step" } : undefined;
-        const tabindex = this.pressed || this.href === "" ? { tabIndex: -1 } : undefined;
-        return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
-    }
-    render() {
-        return (h(Host, { key: '19c73e3cc4e553720f5fb782f73931737007f7a4', role: "listitem" }, h("button", Object.assign({ key: 'b2bcbd197fe0ba3b90442544f354589394ac0007', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'bc7e3054c6ece39171d65a03360ff16502a46b3c', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'e18deeb657c6ff859ba1e6cff18103550bf0a4db' }, h("slot", { key: '7646d57e96b50b8268e5353003a118737687c2b5' })))));
-    }
-    static get style() { return ZStepperItemStyle0; }
-}, [1, "z-stepper-item", {
-        "index": [514],
-        "href": [513],
-        "pressed": [516],
-        "checked": [516],
-        "disabled": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-stepper-item", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-stepper-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZStepperItem$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZStepperItem = ZStepperItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZStepperItem, defineCustomElement };
-
-//# sourceMappingURL=z-stepper-item.js.map
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as r,transformTag as o}from"@stencil/core/internal/client";import{d as a}from"./index3.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}getAttributes(){const e=!this.href||this.pressed||this.disabled?void 0:{onClick:()=>location.href=this.href},t=e?{role:"link"}:void 0,i=this.pressed&&!this.disabled?{"aria-current":"step"}:void 0,r=this.pressed||""===this.href?{tabIndex:-1}:void 0;return Object.assign(Object.assign(Object.assign(Object.assign({},e),t),i),r)}render(){return i(r,{key:"7aa1de5d716837aadddf7f403322ff3cd296848e",role:"listitem"},i("button",Object.assign({key:"beb11602a3c794d7a745ab82a58d033b6e0752e5",class:"stepper-item",disabled:this.disabled},this.getAttributes()),i("div",{key:"892e9dc3c317594f13616a6f3581ad2451721cf1",class:"indicator"},this.checked?i("z-icon",{name:"checkmark"}):this.index),i("span",{key:"4e91ebaf7ed054394482485c8a67c973a783ed48"},i("slot",{key:"7faef9a6f126d000f742e4e8a58d6b37cdf48504"}))))}static get style(){return':host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:""}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]),:host([pressed]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-default-success);color:var(--color-default-success)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-default-success)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}'}},[257,"z-stepper-item",{index:[514],href:[513],pressed:[516],checked:[516],disabled:[516]}]),s=c,n=function(){"undefined"!=typeof customElements&&["z-stepper-item","z-icon"].forEach((e=>{switch(e){case"z-stepper-item":customElements.get(o(e))||customElements.define(o(e),c);break;case"z-icon":customElements.get(o(e))||a()}}))};export{s as ZStepperItem,n as defineCustomElement}

package/dist/components/z-stepper.js

@@ -1,36 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const stylesCss = ":host{position:relative;display:flex;width:100%;max-width:100%;box-sizing:border-box;flex-direction:row;padding:0;margin:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);list-style:none}@media (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}";
-const ZStepperStyle0 = stylesCss;
-
-const ZStepper$1 = /*@__PURE__*/ proxyCustomElement(class ZStepper extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        return (h(Host, { key: '1d1f9c22822efd4ff78ada101c84a0989da9f71b', role: "navigation" }, h("slot", { key: 'f6068efbdab8ba800c82f5c89ed1e88e983ef369' })));
-    }
-    static get style() { return ZStepperStyle0; }
-}, [1, "z-stepper"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-stepper"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-stepper":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZStepper$1);
-            }
-            break;
-    } });
-}
-
-const ZStepper = ZStepper$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZStepper, defineCustomElement };
-
-//# sourceMappingURL=z-stepper.js.map
+import{proxyCustomElement as e,HTMLElement as t,h as n,Host as i,transformTag as s}from"@stencil/core/internal/client";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(i,{key:"ebb63998048529b08157000dd0b6e444732ccb28",role:"navigation"},n("slot",{key:"14743c8ee6a293c944b32b522ff78e763be263c2"}))}static get style(){return":host{position:relative;display:flex;width:100%;max-width:100%;box-sizing:border-box;flex-direction:row;padding:0;margin:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);list-style:none}@media (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}"}},[257,"z-stepper"]),r=o,a=function(){"undefined"!=typeof customElements&&["z-stepper"].forEach((e=>{"z-stepper"===e&&(customElements.get(s(e))||customElements.define(s(e),o))}))};export{r as ZStepper,a as defineCustomElement}

package/dist/components/z-table.js

@@ -1,68 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import './index2.js';
-import './breakpoints.js';
-import './iconset.js';
-import './index24.js';
-
-const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";
-const ZTableStyle0 = stylesCss;
-
-const ZTable$1 = /*@__PURE__*/ proxyCustomElement(class ZTable extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.bordered = false;
-        this.expandable = false;
-    }
-    updateExpandable() {
-        this.expandable = this.host.querySelectorAll("z-tr[expandable]").length > 0;
-    }
-    /**
-     * Setup the table creating a mutation observer for the expandable attribute.
-     */
-    componentWillLoad() {
-        this.expandableMutationObserver = new MutationObserver(() => {
-            this.updateExpandable();
-        });
-        this.expandableMutationObserver.observe(this.host, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ["expandable"],
-            attributeOldValue: false,
-        });
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        return (h(Host, { key: '1dc0b6a5869c0b8fe376b4459f3e42645b02f572', expandable: this.expandable }, h("div", { key: '2f74e8b9fb38796d46b548d1b556be3bdb709494', class: "table", role: "table" }, h("slot", { key: '7eda6a332ac172f427851eabc16aca07667f871e' }))));
-    }
-    get host() { return this; }
-    static get style() { return ZTableStyle0; }
-}, [1, "z-table", {
-        "bordered": [516],
-        "expandable": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-table"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-table":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTable$1);
-            }
-            break;
-    } });
-}
-
-const ZTable = ZTable$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTable, defineCustomElement };
-
-//# sourceMappingURL=z-table.js.map
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as s,transformTag as i}from"@stencil/core/internal/client";import"./index2.js";import"./breakpoints.js";import"./iconset.js";import"./index17.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.bordered=!1,this.expandable=!1}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()})),this.expandableMutationObserver.observe(this.host,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["expandable"],attributeOldValue:!1})}disconnectedCallback(){var e;null===(e=this.expandableMutationObserver)||void 0===e||e.disconnect()}render(){return a(s,{key:"19ac617eed1f9fc7c962e5f34e30c1c0feb0fa87",expandable:this.expandable},a("div",{key:"648951c6bb94c6cc149f593ca42a50eafa287337",class:"table",role:"table"},a("slot",{key:"08fb16a4c3ee50be9634833b2227593ba8651c01"})))}get host(){return this}static get style(){return":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}"}},[257,"z-table",{bordered:[516],expandable:[32]}]),r=o,l=function(){"undefined"!=typeof customElements&&["z-table"].forEach((e=>{"z-table"===e&&(customElements.get(i(e))||customElements.define(i(e),o))}))};export{r as ZTable,l as defineCustomElement}

package/dist/components/z-tag.js

@@ -1,8 +1 @@
-import { Z as ZTag$1, d as defineCustomElement$1 } from './index26.js';
-
-const ZTag = ZTag$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTag, defineCustomElement };
-
-//# sourceMappingURL=z-tag.js.map
+import{Z as o,d as s}from"./index14.js";const r=o,t=s;export{r as ZTag,t as defineCustomElement}

package/dist/components/z-tbody.js

@@ -1,36 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const stylesCss = ":host{display:block;box-sizing:border-box}";
-const ZTbodyStyle0 = stylesCss;
-
-const ZTbody$1 = /*@__PURE__*/ proxyCustomElement(class ZTbody extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        return (h(Host, { key: '3ad959681c2649e9742c43b6b338802c75601707', role: "rowgroup" }, h("slot", { key: 'fa42cbad29615f222b8fe60843b35e4871007bd3' })));
-    }
-    static get style() { return ZTbodyStyle0; }
-}, [1, "z-tbody"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-tbody"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-tbody":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTbody$1);
-            }
-            break;
-    } });
-}
-
-const ZTbody = ZTbody$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTbody, defineCustomElement };
-
-//# sourceMappingURL=z-tbody.js.map
+import{proxyCustomElement as e,HTMLElement as t,h as o,Host as s,transformTag as c}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return o(s,{key:"62b5b227fbdaac2918101db68c60cb68ae9e1ed8",role:"rowgroup"},o("slot",{key:"ecfc5c26435fb7f03b5e9ea89111499b3b75f3ca"}))}static get style(){return":host{display:block;box-sizing:border-box}"}},[257,"z-tbody"]),n=r,b=function(){"undefined"!=typeof customElements&&["z-tbody"].forEach((e=>{"z-tbody"===e&&(customElements.get(c(e))||customElements.define(c(e),r))}))};export{n as ZTbody,b as defineCustomElement}

package/dist/components/z-td.js

@@ -1,89 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P as PopoverPosition, B as ButtonVariant, e as ControlSize } from './index2.js';
-import { d as defineCustomElement$4 } from './index5.js';
-import { d as defineCustomElement$3 } from './index10.js';
-import { d as defineCustomElement$2 } from './index24.js';
-
-const stylesCss = ":host{position:relative;display:flex;max-width:100%;align-items:center;padding:calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}";
-const ZTdStyle0 = stylesCss;
-
-const ZTd$1 = /*@__PURE__*/ proxyCustomElement(class ZTd extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.colspanChange = createEvent(this, "colspanChange", 6);
-        this.colspan = undefined;
-        this.sticky = false;
-        this.showMenu = null;
-        this.popoverPosition = PopoverPosition.AUTO;
-        this.isMenuOpen = false;
-    }
-    updateColspan() {
-        if (this.colspan) {
-            this.host.style.gridColumn = `span ${this.colspan}`;
-        }
-        else {
-            this.host.style.removeProperty("grid-column");
-        }
-        this.colspanChange.emit(this.colspan || 1);
-    }
-    onMenuButtonClick(ev) {
-        ev.stopPropagation();
-        this.popoverEl.open = !this.popoverEl.open;
-    }
-    componentWillLoad() {
-        this.updateColspan();
-    }
-    render() {
-        return (h(Host, { key: 'eaa97de639cf8d1f64bb3e4a8b826a3dd2debfb4', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '11e1bf9ba47637968fd0373d489e5d8844bb4304', class: "cell--content" }, h("slot", { key: 'f09ea15ae261639c73fc13abbf1382cf21c7ab44' }), this.showMenu && (h("div", { key: 'b59ec3e965b62f42a7c07a56fed17a1ffc4251a4', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '836df0132f086767313c774f15a5118b52031da5', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '5f67dc7eb6f5273d536a399b46e5c3e7b3ab1573', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'ee20304c588e9e8ebdd4a31ac410f247c5fa560c', name: "contextual-menu" })))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "colspan": ["updateColspan"]
-    }; }
-    static get style() { return ZTdStyle0; }
-}, [1, "z-td", {
-        "colspan": [2],
-        "sticky": [516],
-        "showMenu": [513, "show-menu"],
-        "popoverPosition": [1, "popover-position"],
-        "isMenuOpen": [32]
-    }, undefined, {
-        "colspan": ["updateColspan"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-td", "z-button", "z-icon", "z-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-td":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTd$1);
-            }
-            break;
-        case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZTd = ZTd$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTd, defineCustomElement };
-
-//# sourceMappingURL=z-td.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as n,h as o,Host as s,transformTag as i}from"@stencil/core/internal/client";import{P as c,e as a,B as l}from"./index2.js";import{d as r}from"./index5.js";import{d as p}from"./index3.js";import{d as h}from"./index17.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.colspanChange=n(this,"colspanChange",6),this.sticky=!1,this.showMenu=null,this.popoverPosition=c.AUTO,this.isMenuOpen=!1}updateColspan(){this.colspan?this.host.style.gridColumn="span "+this.colspan:this.host.style.removeProperty("grid-column"),this.colspanChange.emit(this.colspan||1)}onMenuButtonClick(e){e.stopPropagation(),this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return o(s,{key:"65102becbf97d8f480c9e9c140965963e1b829a3",role:"cell","menu-open":this.isMenuOpen},o("div",{key:"a91b370f73c8684038a75db6483ec88dd8b3f4d6",class:"cell--content"},o("slot",{key:"2a9451f11c23f2dae4047b360d8af92606ce3e76"}),this.showMenu&&o("div",{key:"0a4f91d75fce51604253ada3775f06ec9c230ce0",class:"cell--menu-container prevent-expand"},o("z-button",{key:"fe6623726d645f2796ff88246bd887b2e5ec9396",variant:l.TERTIARY,icon:"contextual-menu",size:a.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),o("z-popover",{key:"1ce2729d0209e5218515c52f4425c3f02b05c1bd",class:"cell-popover",ref:e=>this.popoverEl=e,bindTo:this.menuTrigger,onOpenChange:e=>this.isMenuOpen=e.detail.open,position:this.popoverPosition},o("slot",{key:"b060d20d5e15380360f8bab9d502f85eb70a7995",name:"contextual-menu"})))))}get host(){return this}static get watchers(){return{colspan:[{updateColspan:0}]}}static get style(){return':host{position:relative;display:flex;max-width:100%;align-items:center;padding:calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}'}},[257,"z-td",{colspan:[2],sticky:[516],showMenu:[513,"show-menu"],popoverPosition:[1,"popover-position"],isMenuOpen:[32]},void 0,{colspan:[{updateColspan:0}]}]),u=d,m=function(){"undefined"!=typeof customElements&&["z-td","z-button","z-icon","z-popover"].forEach((e=>{switch(e){case"z-td":customElements.get(i(e))||customElements.define(i(e),d);break;case"z-button":customElements.get(i(e))||r();break;case"z-icon":customElements.get(i(e))||p();break;case"z-popover":customElements.get(i(e))||h()}}))};export{u as ZTd,m as defineCustomElement}