@rededor/cura 1.8.3-alpha.0 → 2.0.0-alpha.11

package/dist/components/cura-tabs.js

@@ -1,146 +1 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D1cPOZpG.js';
-import { l as labelSizes } from './p-CHcd-uKK.js';
-import { d as defineCustomElement$3 } from './p-B5aO1chh.js';
-import { d as defineCustomElement$2 } from './p-DR1RHrEX.js';
-
-const curaTabsCss = ":host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none;min-width:120px;width:fit-content;display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button.border-bottom,:host a.border-bottom{border-bottom:1px solid var(--border-bottom-color)}:host button:not(.disabled,.selected):hover,:host a:not(.disabled,.selected):hover{background-color:var(--background-color-hover)}:host button:not(.disabled,.selected):hover.light,:host a:not(.disabled,.selected):hover.light{border-bottom-color:var(--primary-dark)}:host button:not(.disabled,.selected):hover.dark,:host a:not(.disabled,.selected):hover.dark{border-bottom-color:var(--neutral-purewhite)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px)}:host button:focus,:host a:focus{border:2px solid var(--primary-light)}:host button cura-icon,:host a cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--background-color-selected)}:host button.selected.disabled,:host a.selected.disabled{background-color:var(--background-disabled-selected)}:host button.disabled,:host a.disabled{cursor:not-allowed}";
-
-const CuraTabs$1 = /*@__PURE__*/ proxyCustomElement(class CuraTabs extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.tabSelect = createEvent(this, "tabSelect");
-        this.selected = false;
-        this.disabled = false;
-        this.borderBottom = true;
-        this.size = 'large';
-        this.colorMode = 'light';
-        this.hovered = false;
-        this.styles = {};
-    }
-    setColors() {
-        const colors = [
-            { name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-lighter' },
-            { name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-lighter' : null },
-            {
-                name: '--background-disabled-selected',
-                theme: this.colorMode === 'light' ? 'neutral-pale' : 'neutral-black',
-            },
-            {
-                name: '--border-bottom-color',
-                theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',
-            },
-        ];
-        colors.forEach(c => {
-            if (c.theme)
-                this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);
-        });
-        this.styles = Object.assign({}, this.styles);
-    }
-    computeContentColor() {
-        if (this.disabled)
-            return 'neutral-dark';
-        if (this.colorMode === 'dark') {
-            if (this.hovered && !this.selected) {
-                return 'neutral-purewhite';
-            }
-            return this.selected ? 'neutral-black' : 'primary-lighter';
-        }
-        return this.selected ? 'neutral-purewhite' : 'primary-dark';
-    }
-    updateDynamicStyles() {
-        if (this.colorMode === 'dark' && this.hovered && !this.selected) {
-            this.styles = Object.assign(Object.assign({}, this.styles), { '--border-bottom-color': window.CuraAPI.theme.colors.getColor('neutral-purewhite') });
-        }
-    }
-    getIcon() {
-        if (!this.iconName)
-            return '';
-        const iconSize = this.size === 'large' ? 20 : 16;
-        const iconColor = this.computeContentColor();
-        return h("cura-icon", { name: this.iconName, size: iconSize, color: iconColor });
-    }
-    getClasses() {
-        return {
-            [this.size]: true,
-            [this.colorMode]: true,
-            'selected': this.selected,
-            'disabled': this.disabled,
-            'border-bottom': this.borderBottom,
-        };
-    }
-    connectedCallback() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
-        this.setColors();
-    }
-    handleMouseEnter() {
-        if (this.disabled)
-            return;
-        this.hovered = true;
-    }
-    handleMouseLeave() {
-        this.hovered = false;
-    }
-    handleClick(e) {
-        if (this.disabled) {
-            e.preventDefault();
-            return;
-        }
-        this.selected = !this.selected;
-        this.tabSelect.emit({ name: this.name });
-    }
-    render() {
-        const labelSize = labelSizes[this.size] || labelSizes['default'];
-        const labelColor = this.computeContentColor();
-        this.updateDynamicStyles();
-        return (h(Host, { key: '3966968b73a9a51ec26f3206cdb09fbfcb3d3daf', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, h("button", { key: '00cc6382c635a05c52fd74b3e02e968c2d94cacb', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), h("cura-label", { key: 'e193500f156c10cf0442e6f504e19d552c19f849', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, h("slot", { key: '8a0ac7c4b2ff4990093d13b4110e370616cf39f4' })))));
-    }
-    static get watchers() { return {
-        "colorMode": ["setColors"]
-    }; }
-    static get style() { return curaTabsCss; }
-}, [1, "cura-tabs", {
-        "name": [513],
-        "iconName": [513, "icon-name"],
-        "selected": [1540],
-        "disabled": [1540],
-        "borderBottom": [1540, "border-bottom"],
-        "size": [513],
-        "colorMode": [1537, "color-mode"],
-        "hovered": [32],
-        "styles": [32]
-    }, undefined, {
-        "colorMode": ["setColors"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["cura-tabs", "cura-icon", "cura-label"];
-    components.forEach(tagName => { switch (tagName) {
-        case "cura-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CuraTabs$1);
-            }
-            break;
-        case "cura-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "cura-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const CuraTabs = CuraTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { CuraTabs, defineCustomElement };
-//# sourceMappingURL=cura-tabs.js.map
-
-//# sourceMappingURL=cura-tabs.js.map
+import{p as t,H as e,k as o,i as s,j as r,t as a}from"./p-DBXUEjWh.js";import{l as i}from"./p-CHcd-uKK.js";import{d as c}from"./p-fn4zJrKE.js";import{d as n}from"./p-BSdkRryc.js";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tabSelect=o(this,"tabSelect"),this.selected=!1,this.disabled=!1,this.borderBottom=!0,this.size="large",this.colorMode="light",this.hovered=!1,this.styles={}}setColors(){[{name:"--background-color-selected",theme:"light"===this.colorMode?"primary-base":"primary-lighter"},{name:"--background-color-hover",theme:"light"===this.colorMode?"primary-lighter":null},{name:"--background-disabled-selected",theme:"light"===this.colorMode?"neutral-pale":"neutral-black"},{name:"--border-bottom-color",theme:"light"===this.colorMode?"neutral-base":"primary"}].forEach((t=>{t.theme&&(this.styles[t.name]=window.CuraAPI.theme.colors.getColor(t.theme))})),this.styles=Object.assign({},this.styles)}computeContentColor(){return this.disabled?"neutral-dark":"dark"===this.colorMode?this.hovered&&!this.selected?"neutral-purewhite":this.selected?"neutral-black":"primary-lighter":this.selected?"neutral-purewhite":"primary-dark"}updateDynamicStyles(){"dark"===this.colorMode&&this.hovered&&!this.selected&&(this.styles=Object.assign(Object.assign({},this.styles),{"--border-bottom-color":window.CuraAPI.theme.colors.getColor("neutral-purewhite")}))}getIcon(){if(!this.iconName)return"";const t="large"===this.size?20:16,e=this.computeContentColor();return s("cura-icon",{name:this.iconName,size:t,color:e})}getClasses(){return{[this.size]:!0,[this.colorMode]:!0,selected:this.selected,disabled:this.disabled,"border-bottom":this.borderBottom}}connectedCallback(){this.styles=Object.assign(Object.assign({},this.styles),{"--primary-dark":window.CuraAPI.theme.colors.getColor("primary-dark"),"--neutral-purewhite":window.CuraAPI.theme.colors.getColor("neutral-purewhite"),"--base-spacing":window.CuraAPI.theme.spacing.getSpacing()}),this.setColors()}handleMouseEnter(){this.disabled||(this.hovered=!0)}handleMouseLeave(){this.hovered=!1}handleClick(t){this.disabled?t.preventDefault():(this.selected=!this.selected,this.tabSelect.emit({name:this.name}))}render(){const t=i[this.size]||i.default,e=this.computeContentColor();return this.updateDynamicStyles(),s(r,{key:"3966968b73a9a51ec26f3206cdb09fbfcb3d3daf",role:"button","aria-pressed":this.selected,"aria-disabled":this.disabled},s("button",{key:"00cc6382c635a05c52fd74b3e02e968c2d94cacb",class:this.getClasses(),style:this.styles,onClick:t=>this.handleClick(t),disabled:this.disabled,onMouseEnter:this.handleMouseEnter.bind(this),onMouseLeave:this.handleMouseLeave.bind(this)},this.getIcon(),s("cura-label",{key:"e193500f156c10cf0442e6f504e19d552c19f849",size:t,color:e,lineHeight:"0",marginBlock:"0"},s("slot",{key:"8a0ac7c4b2ff4990093d13b4110e370616cf39f4"}))))}static get watchers(){return{colorMode:[{setColors:0}]}}static get style(){return":host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none;min-width:120px;width:fit-content;display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button.border-bottom,:host a.border-bottom{border-bottom:1px solid var(--border-bottom-color)}:host button:not(.disabled,.selected):hover,:host a:not(.disabled,.selected):hover{background-color:var(--background-color-hover)}:host button:not(.disabled,.selected):hover.light,:host a:not(.disabled,.selected):hover.light{border-bottom-color:var(--primary-dark)}:host button:not(.disabled,.selected):hover.dark,:host a:not(.disabled,.selected):hover.dark{border-bottom-color:var(--neutral-purewhite)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px)}:host button:focus,:host a:focus{border:2px solid var(--primary-light)}:host button cura-icon,:host a cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--background-color-selected)}:host button.selected.disabled,:host a.selected.disabled{background-color:var(--background-disabled-selected)}:host button.disabled,:host a.disabled{cursor:not-allowed}"}},[257,"cura-tabs",{name:[513],iconName:[513,"icon-name"],selected:[1540],disabled:[1540],borderBottom:[1540,"border-bottom"],size:[513],colorMode:[1537,"color-mode"],hovered:[32],styles:[32]},void 0,{colorMode:[{setColors:0}]}]),d=l,h=function(){"undefined"!=typeof customElements&&["cura-tabs","cura-icon","cura-label"].forEach((t=>{switch(t){case"cura-tabs":customElements.get(a(t))||customElements.define(a(t),l);break;case"cura-icon":customElements.get(a(t))||c();break;case"cura-label":customElements.get(a(t))||n()}}))};export{d as CuraTabs,h as defineCustomElement}

package/dist/components/cura-toast.js

@@ -1,162 +1 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D1cPOZpG.js';
-import { d as defineCustomElement$5 } from './p-BHEafDKD.js';
-import { d as defineCustomElement$4 } from './p-B5aO1chh.js';
-import { d as defineCustomElement$3 } from './p-KIQMkSRF.js';
-import { d as defineCustomElement$2 } from './p-DI4g-ZH4.js';
-
-const curaToastCss = ":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:320px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}";
-
-const CuraToast$1 = /*@__PURE__*/ proxyCustomElement(class CuraToast extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.toastClosed = createEvent(this, "toastClosed");
-        this.type = 'info';
-        this.position = 'top-right';
-        this.closeButton = true;
-        this.loader = true;
-        this.autoCloseDelay = 10000;
-        this.styles = {};
-        this.progress = 0;
-        this.handleClose = () => {
-            this.closeContainer();
-        };
-    }
-    /**
-     * Method to close toast component
-     */
-    async close() {
-        this.closeContainer();
-    }
-    handleChangeType() {
-        this.setStyle();
-    }
-    connectedCallback() {
-        this.setStyle();
-    }
-    render() {
-        return (h(Host, { key: 'c65f4295ed41485cdeb992dc29a76b4aeef87a39', role: "alert", "aria-live": "polite", "aria-atomic": "true", "aria-label": this.label }, h("div", { key: '62ec0a3170f862d0634df42ac4ccf0708c80fa32', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'bdb68633080a0032c4fdc2f3bb53a668e5b8ab1b', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: '42516aa76455a7b2c7e96613d6e0f38d8f9fbfba', class: "content" }, h("cura-heading", { key: '07402cf186ed3626248d682239b1105378dc2ae6', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'f8239bb5c4ca52e3ce55cc50fab46bd45440e2ee', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'd0491202942530967ddb5d34ecf1333975c8dda0' })), h("slot", { key: '3024563fbc18c2b4a4954849f74014b0be6b34ee', name: "actions" })), this.closeButton && h("cura-icon", { key: '20b315655b9d8ff4ddfc6c2cec6ebc8981f64643', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: 'a81f9da8704799af13009fa046b58e9d6eeb453c', color: `${this.type}-base`, progress: this.progress }))));
-    }
-    componentDidLoad() {
-        this.openContainer();
-        this.startAnimation();
-    }
-    setStyle() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--primary-base': window.CuraAPI.theme.colors.getColor(`primary-base`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.type}-base`) });
-    }
-    getClasses() {
-        const [firstPosition, secondPosition] = this.position.split('-');
-        const classes = {};
-        classes['container'] = true;
-        classes[firstPosition] = true;
-        classes[secondPosition] = true;
-        if (this.loader) {
-            classes['loader'] = true;
-        }
-        return classes;
-    }
-    getNameIcon() {
-        const iconMapping = {
-            info: 'infoCircle',
-            success: 'checkCircle',
-            warning: 'alertCircle',
-            error: 'alertTriangle',
-        };
-        return this.icon ? this.icon : iconMapping[this.type];
-    }
-    openContainer() {
-        this.container = this.host.shadowRoot.querySelector('.container');
-        this.container.classList.add('active');
-    }
-    closeContainer() {
-        this.container.classList.remove('active');
-        setTimeout(() => {
-            this.toastClosed.emit();
-            this.host.remove();
-        }, 500);
-    }
-    startAnimation() {
-        if (!!this.autoCloseDelay) {
-            if (this.loader) {
-                this.progress = 0;
-                let intervalId = setInterval(() => {
-                    if (this.progress >= 100) {
-                        clearInterval(intervalId);
-                        this.closeContainer();
-                    }
-                    else {
-                        this.progress++;
-                    }
-                }, this.autoCloseDelay / 100);
-            }
-            else {
-                let intervalId = setInterval(() => {
-                    clearInterval(intervalId);
-                    this.closeContainer();
-                }, this.autoCloseDelay);
-            }
-        }
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "type": ["handleChangeType"],
-        "position": ["handleChangeType"]
-    }; }
-    static get style() { return curaToastCss; }
-}, [1, "cura-toast", {
-        "type": [1],
-        "position": [1],
-        "icon": [513],
-        "label": [513],
-        "closeButton": [516, "close-button"],
-        "loader": [516],
-        "autoCloseDelay": [514, "auto-close-delay"],
-        "styles": [32],
-        "progress": [32],
-        "close": [64]
-    }, undefined, {
-        "type": ["handleChangeType"],
-        "position": ["handleChangeType"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["cura-toast", "cura-heading", "cura-icon", "cura-loader-bar", "cura-paragraph"];
-    components.forEach(tagName => { switch (tagName) {
-        case "cura-toast":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CuraToast$1);
-            }
-            break;
-        case "cura-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "cura-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "cura-loader-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "cura-paragraph":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const CuraToast = CuraToast$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { CuraToast, defineCustomElement };
-//# sourceMappingURL=cura-toast.js.map
-
-//# sourceMappingURL=cura-toast.js.map
+import{p as t,H as e,k as a,i as o,j as s,t as i}from"./p-DBXUEjWh.js";import{d as r}from"./p-fR02COZb.js";import{d as n}from"./p-fn4zJrKE.js";import{d as c}from"./p-CCkEqDZb.js";import{d as l}from"./p-D7WNwjv-.js";const h=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toastClosed=a(this,"toastClosed"),this.type="info",this.position="top-right",this.closeButton=!0,this.loader=!0,this.autoCloseDelay=1e4,this.styles={},this.progress=0,this.handleClose=()=>{this.closeContainer()}}async close(){this.closeContainer()}handleChangeType(){this.setStyle()}connectedCallback(){this.setStyle()}render(){return o(s,{key:"c65f4295ed41485cdeb992dc29a76b4aeef87a39",role:"alert","aria-live":"polite","aria-atomic":"true","aria-label":this.label},o("div",{key:"62ec0a3170f862d0634df42ac4ccf0708c80fa32",class:this.getClasses(),style:this.styles},o("cura-icon",{key:"bdb68633080a0032c4fdc2f3bb53a668e5b8ab1b",class:"default-icon",name:this.getNameIcon(),size:16,color:this.type+"-dark"}),o("div",{key:"42516aa76455a7b2c7e96613d6e0f38d8f9fbfba",class:"content"},o("cura-heading",{key:"07402cf186ed3626248d682239b1105378dc2ae6",level:4,size:"xsmall",color:this.type+"-dark",weight:"bold","margin-block":"0"},this.label),o("cura-paragraph",{key:"f8239bb5c4ca52e3ce55cc50fab46bd45440e2ee",color:this.type+"-darker",size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},o("slot",{key:"d0491202942530967ddb5d34ecf1333975c8dda0"})),o("slot",{key:"3024563fbc18c2b4a4954849f74014b0be6b34ee",name:"actions"})),this.closeButton&&o("cura-icon",{key:"20b315655b9d8ff4ddfc6c2cec6ebc8981f64643",class:"close-icon",name:"close",size:16,color:"error-dark",onClick:this.handleClose}),this.loader&&!!this.autoCloseDelay&&o("cura-loader-bar",{key:"a81f9da8704799af13009fa046b58e9d6eeb453c",color:this.type+"-base",progress:this.progress})))}componentDidLoad(){this.openContainer(),this.startAnimation()}setStyle(){this.styles=Object.assign(Object.assign({},this.styles),{"--neutral-purewhite":window.CuraAPI.theme.colors.getColor("neutral-purewhite"),"--neutral-base":window.CuraAPI.theme.colors.getColor("neutral-base",.2),"--primary-base":window.CuraAPI.theme.colors.getColor("primary-base"),"--color-base":window.CuraAPI.theme.colors.getColor(this.type+"-base")})}getClasses(){const[t,e]=this.position.split("-"),a={container:!0};return a[t]=!0,a[e]=!0,this.loader&&(a.loader=!0),a}getNameIcon(){return this.icon?this.icon:{info:"infoCircle",success:"checkCircle",warning:"alertCircle",error:"alertTriangle"}[this.type]}openContainer(){this.container=this.host.shadowRoot.querySelector(".container"),this.container.classList.add("active")}closeContainer(){this.container.classList.remove("active"),setTimeout((()=>{this.toastClosed.emit(),this.host.remove()}),500)}startAnimation(){if(this.autoCloseDelay)if(this.loader){this.progress=0;let t=setInterval((()=>{this.progress>=100?(clearInterval(t),this.closeContainer()):this.progress++}),this.autoCloseDelay/100)}else{let t=setInterval((()=>{clearInterval(t),this.closeContainer()}),this.autoCloseDelay)}}get host(){return this}static get watchers(){return{type:[{handleChangeType:0}],position:[{handleChangeType:0}]}}static get style(){return":host{display:block;box-sizing:border-box}:host .container{position:fixed;z-index:99999;display:flex;box-sizing:border-box;min-width:320px;height:fit-content;padding:16px;border:1px solid var(--color-base);border-radius:12px;background-color:var(--neutral-purewhite);overflow:hidden;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12))}:host .container.loader{padding:16px 16px 20px}:host .container.top{top:24px}:host .container.top.center{top:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, top 0.5s ease-in-out}:host .container.top.center.active{top:24px;opacity:1}:host .container.bottom{bottom:24px}:host .container.bottom.center{bottom:-100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.5s ease-in-out, bottom 0.5s ease-in-out}:host .container.bottom.center.active{bottom:24px;opacity:1}:host .container.left{left:-100%;opacity:0;transition:opacity 0.5s ease-in-out, left 0.5s ease-in-out}@media (max-width: 768px){:host .container.left{right:unset;left:50%;transform:translateX(-50%)}}:host .container.left.active{left:24px;opacity:1}:host .container.right{right:-100%;opacity:0;transition:opacity 0.5s ease-in-out, right 0.5s ease-in-out}@media (max-width: 768px){:host .container.right{right:unset;left:50%;transform:translateX(-50%)}}:host .container.right.active{right:24px;opacity:1}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:4px}:host .container .default-icon{margin-right:12px}:host .container .close-icon{margin-left:12px;cursor:pointer}"}},[257,"cura-toast",{type:[1],position:[1],icon:[513],label:[513],closeButton:[516,"close-button"],loader:[516],autoCloseDelay:[514,"auto-close-delay"],styles:[32],progress:[32],close:[64]},void 0,{type:[{handleChangeType:0}],position:[{handleChangeType:0}]}]),p=h,d=function(){"undefined"!=typeof customElements&&["cura-toast","cura-heading","cura-icon","cura-loader-bar","cura-paragraph"].forEach((t=>{switch(t){case"cura-toast":customElements.get(i(t))||customElements.define(i(t),h);break;case"cura-heading":customElements.get(i(t))||r();break;case"cura-icon":customElements.get(i(t))||n();break;case"cura-loader-bar":customElements.get(i(t))||c();break;case"cura-paragraph":customElements.get(i(t))||l()}}))};export{p as CuraToast,d as defineCustomElement}

package/dist/components/cura-tooltip.js

@@ -1,291 +1 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D1cPOZpG.js';
-import { d as defineCustomElement$7 } from './p-BRDqwZ4N.js';
-import { d as defineCustomElement$6 } from './p-BHEafDKD.js';
-import { d as defineCustomElement$5 } from './p-B5aO1chh.js';
-import { d as defineCustomElement$4 } from './p-DR1RHrEX.js';
-import { d as defineCustomElement$3 } from './p-Dqm2sAwv.js';
-import { d as defineCustomElement$2 } from './p-DI4g-ZH4.js';
-
-const curaTooltipCss = ":host{position:absolute;z-index:99998;display:block;width:fit-content;height:fit-content;box-sizing:border-box}@media (max-width: 768px){:host{width:100%}}:host .container{display:flex;box-sizing:border-box;max-width:var(--max-width);height:auto;padding:calc(var(--cura-spacing-base) * 2px);border:1px solid var(--neutral-light);border-radius:calc(var(--cura-spacing-base) * 1px);background-color:var(--neutral-purewhite);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}@media (max-width: 768px){:host .container{max-width:90%;height:fit-content;padding:calc(var(--cura-spacing-base) * 4px) calc(var(--cura-spacing-base) * 4px) 0 calc(var(--cura-spacing-base) * 4px);margin:0 auto;border:2px solid;border-radius:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px) 0 0;border-color:var(--neutral-light) var(--neutral-light) transparent var(--neutral-light)}}:host .container::after{content:\"\";position:absolute;z-index:99999;width:calc(var(--cura-spacing-base) * 2.5px);height:calc(var(--cura-spacing-base) * 2.5px);border:1px solid;border-radius:2px;background-color:var(--neutral-purewhite);left:var(--arrow-left);top:var(--arrow-top);border-color:var(--arrow-border-color);transform:var(--arrow-translate) rotate(45deg)}@media (max-width: 768px){:host .container::after{display:none}}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:calc(var(--cura-spacing-base) * 1px)}@media (max-width: 768px){:host .container .content{padding-bottom:calc(var(--cura-spacing-base) * 4px);border-bottom:1px dashed var(--neutral-light)}}:host .container .close-icon{margin-left:calc(var(--cura-spacing-base) * 3px);cursor:pointer}:host .container .close-button{padding:calc(var(--cura-spacing-base) * 2px) 0}";
-
-const BREAKPOINT_SMALL_MAX = 768;
-const CuraTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CuraTooltip extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.tooltipClosed = createEvent(this, "tooltipClosed");
-        this.elementId = '';
-        this.interactive = true;
-        this.delay = 250;
-        this.maxWidth = '280px';
-        this.position = 'top';
-        this.closeButton = false;
-        this.isMobile = false;
-        this.styles = {};
-        this.handleClose = () => {
-            this.closeContainer();
-        };
-    }
-    onWindowResize() {
-        this.setPosition(this.targetElement);
-    }
-    onWindowScroll() {
-        this.setPosition(this.targetElement);
-    }
-    connectedCallback() {
-        this.setStyle();
-    }
-    render() {
-        return (h(Host, { key: '655c6aae9efc3aad790c6a45a7192ef01baeac97', role: "tooltip", id: this.elementId }, h("div", { key: 'c552ffd20262eed5e71f4cd93c078852cc52c1ca', class: "container", style: this.styles }, h("div", { key: '110f11205496428b674431e1b2bc8c3f95f9397a', class: "content" }, h("cura-heading", { key: 'd2a0caf6a338c9c0b839ea8671c6d524b943ca86', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'bd7addb352119fead424151294e01eae111915e2', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '2323f1af541803e16caa042e9969953557a28976' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '92a672d383b057c53ce1771bea1ff9374a9a50a7', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'a31de7e78e092b4fbf6b0e0b85c0c664399081a0', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
-    }
-    componentDidLoad() {
-        var _a, _b, _c, _d, _e;
-        this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);
-        if (!this.interactive) {
-            this.host.style.visibility = 'visible';
-        }
-        else {
-            this.host.style.visibility = 'hidden';
-            let openTimeoutID = null;
-            let closeTimeoutID = null;
-            (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', () => {
-                clearTimeout(closeTimeoutID);
-                openTimeoutID = setTimeout(() => {
-                    this.host.style.visibility = 'visible';
-                }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
-            });
-            (_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', () => {
-                clearTimeout(openTimeoutID);
-                closeTimeoutID = setTimeout(() => {
-                    this.handleClose();
-                }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
-            });
-            (_c = this.host) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseenter', () => {
-                if (window.getComputedStyle(this.host).visibility === 'visible') {
-                    clearTimeout(closeTimeoutID);
-                }
-            });
-            (_d = this.host) === null || _d === void 0 ? void 0 : _d.addEventListener('mouseleave', () => {
-                clearTimeout(openTimeoutID);
-                this.handleClose();
-            });
-            (_e = this.targetElement) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => {
-                if (window.getComputedStyle(this.host).visibility === 'hidden') {
-                    openTimeoutID = setTimeout(() => {
-                        this.host.style.visibility = 'visible';
-                    }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
-                }
-                else {
-                    clearTimeout(openTimeoutID);
-                    this.handleClose();
-                }
-            });
-            document === null || document === void 0 ? void 0 : document.addEventListener('click', (event) => {
-                if (!this.targetElement.contains(event.target) && !this.host.contains(event.target)) {
-                    clearTimeout(openTimeoutID);
-                    this.handleClose();
-                }
-            });
-        }
-        setTimeout(() => {
-            this.setPosition(this.targetElement);
-        }, 100);
-    }
-    setStyle() {
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--max-width': this.maxWidth, '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`), '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16) });
-    }
-    getClasses() {
-        const [firstPosition, secondPosition] = this.position.split('-');
-        const classes = {};
-        classes['container'] = true;
-        if (firstPosition) {
-            classes[firstPosition] = true;
-        }
-        if (secondPosition) {
-            classes[secondPosition] = true;
-        }
-        return classes;
-    }
-    setPosition(element) {
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight;
-        const container = this.host.shadowRoot.querySelector('.container');
-        this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;
-        this.host.style.position = this.isMobile ? 'fixed' : 'absolute';
-        this.host.style.bottom = this.isMobile ? '0' : 'unset';
-        container.style.flexDirection = this.isMobile ? 'column' : 'row';
-        if (this.isMobile) {
-            this.host.style.left = '0';
-            this.host.style.top = 'unset';
-            return;
-        }
-        const elementRect = {
-            top: element.offsetTop,
-            left: element.offsetLeft,
-            width: element.offsetWidth,
-            height: element.offsetHeight
-        };
-        const tooltipRect = this.host.getBoundingClientRect();
-        const SCREEN_LIMIT = 10;
-        const SPACE_TO_ELEMENT = 10;
-        const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;
-        const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;
-        const BORDER_COLOR = this.styles['--neutral-light'];
-        let left = 0;
-        let top = 0;
-        const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));
-        const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {
-            if (arrowLeft)
-                this.host.style.setProperty('--arrow-left', arrowLeft);
-            if (arrowTop)
-                this.host.style.setProperty('--arrow-top', arrowTop);
-            if (translate)
-                this.host.style.setProperty('--arrow-translate', translate);
-            if (borderColor)
-                this.host.style.setProperty('--arrow-border-color', borderColor);
-        };
-        //Posicionamento vertical
-        if (positions.includes('top') || positions.includes('bottom')) {
-            setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });
-            if (positions.includes('top')) {
-                top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;
-                setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });
-                if (top < SCREEN_LIMIT) {
-                    top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;
-                    setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });
-                }
-            }
-            if (positions.includes('bottom')) {
-                top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;
-                setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });
-                if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {
-                    top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;
-                    setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });
-                }
-            }
-            left = elementRect.left + (elementRect.width - tooltipRect.width) / 2;
-            if (positions.includes('start')) {
-                left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;
-                setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });
-                if (left < SCREEN_LIMIT) {
-                    left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;
-                    setArrowProperties({ arrowLeft: '18px' });
-                }
-            }
-            if (positions.includes('end')) {
-                left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;
-                setArrowProperties({ arrowLeft: '18px' });
-                if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {
-                    left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;
-                    setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });
-                }
-            }
-        }
-        //Posicionamento horizontal
-        if (positions.includes('right') || positions.includes('left')) {
-            setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });
-            if (positions.includes('right')) {
-                left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;
-                setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });
-                if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {
-                    left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;
-                    setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });
-                }
-            }
-            if (positions.includes('left')) {
-                left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;
-                setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });
-                if (left < SCREEN_LIMIT) {
-                    left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;
-                    setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });
-                }
-            }
-            top = elementRect.top + (elementRect.height - tooltipRect.height) / 2;
-            if (positions.includes('start')) {
-                top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;
-                setArrowProperties({ arrowTop: 'calc(100% - 18px)' });
-                if (top < SCREEN_LIMIT) {
-                    top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;
-                    setArrowProperties({ arrowTop: '18px' });
-                }
-            }
-            if (positions.includes('end')) {
-                top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;
-                setArrowProperties({ arrowTop: '18px' });
-                if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {
-                    top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;
-                    setArrowProperties({ arrowTop: 'calc(100% - 18px)' });
-                }
-            }
-        }
-        this.host.style.left = `${left}px`;
-        this.host.style.top = `${top}px`;
-    }
-    closeContainer() {
-        this.host.style.visibility = 'hidden';
-        this.tooltipClosed.emit();
-    }
-    get host() { return this; }
-    static get style() { return curaTooltipCss; }
-}, [1, "cura-tooltip", {
-        "elementId": [1, "element-id"],
-        "interactive": [4],
-        "delay": [2],
-        "maxWidth": [1, "max-width"],
-        "position": [513],
-        "label": [513],
-        "closeButton": [516, "close-button"],
-        "isMobile": [32]
-    }, [[9, "resize", "onWindowResize"], [9, "scroll", "onWindowScroll"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["cura-tooltip", "cura-button-transparent", "cura-heading", "cura-icon", "cura-label", "cura-loader-circle", "cura-paragraph"];
-    components.forEach(tagName => { switch (tagName) {
-        case "cura-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CuraTooltip$1);
-            }
-            break;
-        case "cura-button-transparent":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "cura-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "cura-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "cura-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "cura-loader-circle":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "cura-paragraph":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const CuraTooltip = CuraTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { CuraTooltip, defineCustomElement };
-//# sourceMappingURL=cura-tooltip.js.map
-
-//# sourceMappingURL=cura-tooltip.js.map
+import{p as t,H as a,k as r,i as e,j as o,t as s}from"./p-DBXUEjWh.js";import{d as i}from"./p-DXlGQp3a.js";import{d as n}from"./p-fR02COZb.js";import{d as c}from"./p-fn4zJrKE.js";import{d as l}from"./p-BSdkRryc.js";import{d as p}from"./p-Bf21UQXV.js";import{d as h}from"./p-D7WNwjv-.js";const d=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=r(this,"tooltipClosed"),this.elementId="",this.interactive=!0,this.delay=250,this.maxWidth="280px",this.position="top",this.closeButton=!1,this.isMobile=!1,this.styles={},this.handleClose=()=>{this.closeContainer()}}onWindowResize(){this.setPosition(this.targetElement)}onWindowScroll(){this.setPosition(this.targetElement)}connectedCallback(){this.setStyle()}render(){return e(o,{key:"655c6aae9efc3aad790c6a45a7192ef01baeac97",role:"tooltip",id:this.elementId},e("div",{key:"c552ffd20262eed5e71f4cd93c078852cc52c1ca",class:"container",style:this.styles},e("div",{key:"110f11205496428b674431e1b2bc8c3f95f9397a",class:"content"},e("cura-heading",{key:"d2a0caf6a338c9c0b839ea8671c6d524b943ca86",level:4,size:"xsmall",color:"neutral-black",weight:"bold","margin-block":"0"},this.label),e("cura-paragraph",{key:"bd7addb352119fead424151294e01eae111915e2",color:"neutral-dark","spot-color":"secondary-darker",size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},e("slot",{key:"2323f1af541803e16caa042e9969953557a28976"}))),this.closeButton&&!this.isMobile&&e("cura-icon",{key:"92a672d383b057c53ce1771bea1ff9374a9a50a7",class:"close-icon",name:"close",size:16,color:"error-dark",onClick:this.handleClose}),this.isMobile&&e("cura-button-transparent",{key:"a31de7e78e092b4fbf6b0e0b85c0c664399081a0",class:"close-button",size:"small",type:"button",color:"error","icon-name":"close","icon-position":"right",onClick:this.handleClose},"OK, entendi.")))}componentDidLoad(){var t,a,r,e,o;if(this.targetElement=document.querySelector(`[aria-labelledby="${this.elementId}"]`),this.interactive){this.host.style.visibility="hidden";let s=null,i=null;null===(t=this.targetElement)||void 0===t||t.addEventListener("mouseenter",(()=>{clearTimeout(i),s=setTimeout((()=>{this.host.style.visibility="visible"}),"number"==typeof this.delay&&this.delay>250?this.delay:250)})),null===(a=this.targetElement)||void 0===a||a.addEventListener("mouseleave",(()=>{clearTimeout(s),i=setTimeout((()=>{this.handleClose()}),"number"==typeof this.delay&&this.delay>250?this.delay:250)})),null===(r=this.host)||void 0===r||r.addEventListener("mouseenter",(()=>{"visible"===window.getComputedStyle(this.host).visibility&&clearTimeout(i)})),null===(e=this.host)||void 0===e||e.addEventListener("mouseleave",(()=>{clearTimeout(s),this.handleClose()})),null===(o=this.targetElement)||void 0===o||o.addEventListener("click",(()=>{"hidden"===window.getComputedStyle(this.host).visibility?s=setTimeout((()=>{this.host.style.visibility="visible"}),"number"==typeof this.delay&&this.delay>250?this.delay:250):(clearTimeout(s),this.handleClose())})),null===document||void 0===document||document.addEventListener("click",(t=>{this.targetElement.contains(t.target)||this.host.contains(t.target)||(clearTimeout(s),this.handleClose())}))}else this.host.style.visibility="visible";setTimeout((()=>{this.setPosition(this.targetElement)}),100)}setStyle(){this.styles=Object.assign(Object.assign({},this.styles),{"--max-width":this.maxWidth,"--base-spacing":window.CuraAPI.theme.spacing.getSpacing(),"--neutral-purewhite":window.CuraAPI.theme.colors.getColor("neutral-purewhite"),"--neutral-light":window.CuraAPI.theme.colors.getColor("neutral-light"),"--neutral-black-shadow":window.CuraAPI.theme.colors.getColor("neutral-black",.16)})}getClasses(){const[t,a]=this.position.split("-"),r={container:!0};return t&&(r[t]=!0),a&&(r[a]=!0),r}setPosition(t){const a=window.innerWidth,r=window.innerHeight,e=this.host.shadowRoot.querySelector(".container");if(this.isMobile=a<=768,this.host.style.position=this.isMobile?"fixed":"absolute",this.host.style.bottom=this.isMobile?"0":"unset",e.style.flexDirection=this.isMobile?"column":"row",this.isMobile)return this.host.style.left="0",void(this.host.style.top="unset");const o=t.offsetTop,s=t.offsetLeft,i=t.offsetWidth,n=t.offsetHeight,c=this.host.getBoundingClientRect(),l=10,p=10,h=.5*i+18,d=.5*n+18,u=this.styles["--neutral-light"];let b=0,m=0;const w=Object.keys(this.getClasses()).filter((t=>["top","left","bottom","right","start","end"].includes(t))),x=({arrowTop:t="",arrowLeft:a="",translate:r="",borderColor:e=""})=>{a&&this.host.style.setProperty("--arrow-left",a),t&&this.host.style.setProperty("--arrow-top",t),r&&this.host.style.setProperty("--arrow-translate",r),e&&this.host.style.setProperty("--arrow-border-color",e)};(w.includes("top")||w.includes("bottom"))&&(x({arrowLeft:"50%",translate:"translateX(-50%)"}),w.includes("top")&&(m=o-c.height-p,x({arrowTop:"calc(100% - 6px)",borderColor:`transparent ${u} ${u} transparent`}),m<l&&(m=o+n+p,x({arrowTop:"-6px",borderColor:`${u} transparent transparent ${u}`}))),w.includes("bottom")&&(m=o+n+p,x({arrowTop:"-6px",borderColor:`${u} transparent transparent ${u}`}),m+c.height>r-l&&(m=o-c.height-p,x({arrowTop:"calc(100% - 6px)",borderColor:`transparent ${u} ${u} transparent`}))),b=s+(i-c.width)/2,w.includes("start")&&(b=s-c.width+h,x({arrowLeft:"calc(100% - 18px)"}),b<l&&(b=s+i-h,x({arrowLeft:"18px"}))),w.includes("end")&&(b=s+i-h,x({arrowLeft:"18px"}),b+c.width>a-l&&(b=s-c.width+h,x({arrowLeft:"calc(100% - 18px)"})))),(w.includes("right")||w.includes("left"))&&(x({arrowTop:"50%",translate:"translateY(-50%)"}),w.includes("right")&&(b=s+i+p,x({arrowLeft:"-6px",borderColor:`transparent transparent ${u} ${u}`}),b+c.width>a-l&&(b=s-c.width-p,x({arrowLeft:"calc(100% - 6px)",borderColor:`${u} ${u} transparent transparent`}))),w.includes("left")&&(b=s-c.width-p,x({arrowLeft:"calc(100% - 6px)",borderColor:`${u} ${u} transparent transparent`}),b<l&&(b=s+i+p,x({arrowLeft:"-6px",borderColor:`transparent transparent ${u} ${u}`}))),m=o+(n-c.height)/2,w.includes("start")&&(m=o-c.height+d,x({arrowTop:"calc(100% - 18px)"}),m<l&&(m=o+n-d,x({arrowTop:"18px"}))),w.includes("end")&&(m=o+n-d,x({arrowTop:"18px"}),m+c.height>r-l&&(m=o-c.height+d,x({arrowTop:"calc(100% - 18px)"})))),this.host.style.left=b+"px",this.host.style.top=m+"px"}closeContainer(){this.host.style.visibility="hidden",this.tooltipClosed.emit()}get host(){return this}static get style(){return':host{position:absolute;z-index:99998;display:block;width:fit-content;height:fit-content;box-sizing:border-box}@media (max-width: 768px){:host{width:100%}}:host .container{display:flex;box-sizing:border-box;max-width:var(--max-width);height:auto;padding:calc(var(--cura-spacing-base) * 2px);border:1px solid var(--neutral-light);border-radius:calc(var(--cura-spacing-base) * 1px);background-color:var(--neutral-purewhite);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}@media (max-width: 768px){:host .container{max-width:90%;height:fit-content;padding:calc(var(--cura-spacing-base) * 4px) calc(var(--cura-spacing-base) * 4px) 0 calc(var(--cura-spacing-base) * 4px);margin:0 auto;border:2px solid;border-radius:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px) 0 0;border-color:var(--neutral-light) var(--neutral-light) transparent var(--neutral-light)}}:host .container::after{content:"";position:absolute;z-index:99999;width:calc(var(--cura-spacing-base) * 2.5px);height:calc(var(--cura-spacing-base) * 2.5px);border:1px solid;border-radius:2px;background-color:var(--neutral-purewhite);left:var(--arrow-left);top:var(--arrow-top);border-color:var(--arrow-border-color);transform:var(--arrow-translate) rotate(45deg)}@media (max-width: 768px){:host .container::after{display:none}}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:calc(var(--cura-spacing-base) * 1px)}@media (max-width: 768px){:host .container .content{padding-bottom:calc(var(--cura-spacing-base) * 4px);border-bottom:1px dashed var(--neutral-light)}}:host .container .close-icon{margin-left:calc(var(--cura-spacing-base) * 3px);cursor:pointer}:host .container .close-button{padding:calc(var(--cura-spacing-base) * 2px) 0}'}},[257,"cura-tooltip",{elementId:[1,"element-id"],interactive:[4],delay:[2],maxWidth:[1,"max-width"],position:[513],label:[513],closeButton:[516,"close-button"],isMobile:[32]},[[9,"resize","onWindowResize"],[9,"scroll","onWindowScroll"]]]),u=d,b=function(){"undefined"!=typeof customElements&&["cura-tooltip","cura-button-transparent","cura-heading","cura-icon","cura-label","cura-loader-circle","cura-paragraph"].forEach((t=>{switch(t){case"cura-tooltip":customElements.get(s(t))||customElements.define(s(t),d);break;case"cura-button-transparent":customElements.get(s(t))||i();break;case"cura-heading":customElements.get(s(t))||n();break;case"cura-icon":customElements.get(s(t))||c();break;case"cura-label":customElements.get(s(t))||l();break;case"cura-loader-circle":customElements.get(s(t))||p();break;case"cura-paragraph":customElements.get(s(t))||h()}}))};export{u as CuraTooltip,b as defineCustomElement}