@rededor/cura 1.6.0-alpha.0 → 1.6.0-alpha.2

package/dist/cura/{p-e98a1ad2.entry.js → p-89671cd4.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as t,H as c,g as a}from"./p-af3ac476.js";const r=":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:calc(var(--cura-spacing-base) * 3px);gap:calc(var(--cura-spacing-base) * 3px);flex-shrink:0;border:1px solid var(--color-base);border-radius:4px;background-color:var(--color-lighter)}:host .conteiner.floating{box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host .content{flex:1;flex-direction:column;display:flex;gap:calc(var(--cura-spacing-base) * 1px)}:host .icon-right{cursor:pointer}";const i=r;const o=class{constructor(t){e(this,t);this.close=s(this,"close",7);this.handleClose=()=>{this.close.emit();this.host.remove()};this.type="info";this.floating=false;this.label=undefined;this.closeable=true;this.icon=undefined;this.styles={}}setColors(){const e=[{name:"--color-lighter",theme:`${this.type}-lighter`},{name:"--neutral-black",theme:"neutral-black"},{name:"--color-light",theme:`${this.type}-light`},{name:"--color-base",theme:`${this.type}-base`}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.theme)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.setColors()}getClasses(){const e={};e["conteiner"]=true;e["floating"]=this.floating;return e}getNameIcon(){const e={info:"infoCircle",success:"checkCircle",warning:"alertCircle",error:"alertTriangle"};return this.icon?this.icon:e[this.type]}render(){return t(c,{key:"a0b22404673b1568b9cb937150dda71ce4c99d50"},t("div",{key:"c30bf1b97d1e1ffaf334ef3bca6cdd1f081c679c",class:this.getClasses(),style:this.styles},t("cura-icon",{key:"1bd88c8a19e073d7b9d967d8df38bb74063cd110",name:this.getNameIcon(),class:"icon-left",size:16,color:`${this.type}-dark`}),t("div",{key:"0df09a27c27c7e1743f7cfb9e71c96b102ff4484",class:"content"},this.label?t("cura-label",{class:"title",size:"small",color:"neutral-darker",weight:"bold"},this.label):"",t("cura-paragraph",{key:"687cc7ab050299f0878c2d10ccd28e92708db85d",class:"text",color:`${this.type}-darker`,size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},t("slot",{key:"e2d85d40e65029ea71a43aa23e7298d6dcc7efa9"})),t("slot",{key:"a28fe90c9bfe2b9fb22f196eab7bb2e09e408dbf",name:"actions"})),this.closeable?t("cura-icon",{name:"close",size:16,color:"error-dark",class:"icon-right",onClick:this.handleClose}):""))}get host(){return a(this)}static get watchers(){return{type:["setColors"]}}};o.style=i;export{o as cura_alert};
-//# sourceMappingURL=p-e98a1ad2.entry.js.map
+import{r as e,c as s,h as t,H as a,g as c}from"./p-af3ac476.js";const i=":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:calc(var(--cura-spacing-base) * 3px);gap:calc(var(--cura-spacing-base) * 3px);flex-shrink:0;border:1px solid var(--color-base);border-radius:4px;background-color:var(--color-lighter)}:host .conteiner.floating{box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host .content{flex:1;flex-direction:column;display:flex;gap:calc(var(--cura-spacing-base) * 1px)}:host .icon-right{cursor:pointer}";const r=i;const o=class{constructor(t){e(this,t);this.close=s(this,"close",7);this.handleClose=()=>{this.close.emit();this.host.remove()};this.type="info";this.floating=false;this.label=undefined;this.closeable=true;this.icon=undefined;this.styles={}}setColors(){const e=[{name:"--color-lighter",theme:`${this.type}-lighter`},{name:"--neutral-black",theme:"neutral-black"},{name:"--color-light",theme:`${this.type}-light`},{name:"--color-base",theme:`${this.type}-base`}];e.forEach((e=>{this.styles[e.name]=window.CuraAPI.theme.colors.getColor(e.theme)}));this.styles=Object.assign({},this.styles)}connectedCallback(){this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.setColors()}getClasses(){const e={};e["conteiner"]=true;e["floating"]=this.floating;return e}getNameIcon(){const e={info:"infoCircle",success:"checkCircle",warning:"alertCircle",error:"alertTriangle"};return this.icon?this.icon:e[this.type]}render(){return t(a,{key:"a0b22404673b1568b9cb937150dda71ce4c99d50"},t("div",{key:"c30bf1b97d1e1ffaf334ef3bca6cdd1f081c679c",class:this.getClasses(),style:this.styles},t("cura-icon",{key:"1bd88c8a19e073d7b9d967d8df38bb74063cd110",name:this.getNameIcon(),class:"icon-left",size:16,color:`${this.type}-dark`}),t("div",{key:"0df09a27c27c7e1743f7cfb9e71c96b102ff4484",class:"content"},this.label?t("cura-heading",{class:"title",size:"xsmall",color:"neutral-black",weight:"bold","margin-block":"1px 0"},this.label):"",t("cura-paragraph",{key:"00a039ac0b80bac62eb261c5cf8401b605e867a4",class:"text",color:`${this.type}-darker`,size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},t("slot",{key:"ba6989082e1f15337d5bb390b799b3dc3fda12eb"})),t("slot",{key:"def5ab8aeca163432a52c9eb810f69c95d012313",name:"actions"})),this.closeable?t("cura-icon",{name:"close",size:16,color:"error-dark",class:"icon-right",onClick:this.handleClose}):""))}get host(){return c(this)}static get watchers(){return{type:["setColors"]}}};o.style=r;export{o as cura_alert};
+//# sourceMappingURL=p-89671cd4.entry.js.map

package/dist/cura/{p-e98a1ad2.entry.js.map → p-89671cd4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["curaAlertCss","CuraAlertStyle0","CuraAlert","this","handleClose","close","emit","host","remove","setColors","colors","name","theme","type","forEach","color","styles","window","CuraAPI","getColor","Object","assign","connectedCallback","spacing","getSpacing","getClasses","classes","floating","getNameIcon","iconMapping","info","success","warning","error","icon","render","h","Host","key","class","style","size","label","weight","marginBlock","lineHeight","closeable","onClick"],"sources":["src/components/cura-alert/cura-alert.scss?tag=cura-alert&encapsulation=shadow","src/components/cura-alert/cura-alert.tsx"],"sourcesContent":["@import \"../../scss/mixins/spacing.scss\";\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    padding: #{$spacing-xxxs};\n    gap: #{$spacing-xxxs};\n    flex-shrink: 0;\n    border: 1px solid var(--color-base);\n    border-radius: 4px;\n    background-color: var(--color-lighter);\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n\n  .content {\n    flex: 1;\n    flex-direction: column;\n    display: flex;\n    gap: #{$spacing-tiny};\n  }\n\n  .icon-right {\n    cursor: pointer;\n  }\n\n}\n","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n\n  @State() styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            { this.label ? (\n            <cura-label class=\"title\" size=\"small\" color=\"neutral-darker\" weight=\"bold\">\n              {this.label}\n            </cura-label>\n            ) : ''}\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,+eACrB,MAAAC,EAAeD,E,MCKFE,EAAS,M,sDAkDpBC,KAAAC,YAAc,KACZD,KAAKE,MAAMC,OACXH,KAAKI,KAAKC,QAAQ,E,UAjDqC,O,cACrB,M,oCAEC,K,gCAGnB,E,CAKlB,SAAAC,GACE,MAAMC,EAAS,CACb,CAAEC,KAAM,kBAAmBC,MAAO,GAAGT,KAAKU,gBAC1C,CAAEF,KAAM,kBAAmBC,MAAO,iBAClC,CAAED,KAAM,gBAAiBC,MAAO,GAAGT,KAAKU,cACxC,CAAEF,KAAM,eAAgBC,MAAO,GAAGT,KAAKU,cAGzCH,EAAOI,SAAQC,IACbZ,KAAKa,OAAOD,EAAMJ,MAAQM,OAAOC,QAAQN,MAAMF,OAAOS,SAASJ,EAAMH,MAAM,IAE7ET,KAAKa,OAAMI,OAAAC,OAAA,GAAOlB,KAAKa,O,CAGzB,iBAAAM,GACEnB,KAAKa,OAAO,kBAAoBC,OAAOC,QAAQN,MAAMW,QAAQC,aAC7DrB,KAAKM,W,CAGP,UAAAgB,GACE,MAAMC,EAAU,GAChBA,EAAQ,aAAe,KACvBA,EAAQ,YAAcvB,KAAKwB,SAC3B,OAAOD,C,CAGT,WAAAE,GACE,MAAMC,EAAc,CAClBC,KAAM,aACNC,QAAS,cACTC,QAAS,cACTC,MAAO,iBAET,OAAO9B,KAAK+B,KAAO/B,KAAK+B,KAAOL,EAAY1B,KAAKU,K,CAQlD,MAAAsB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAOpC,KAAKsB,aAAce,MAAOrC,KAAKa,QACzCoB,EAAA,aAAAE,IAAA,2CAAW3B,KAAMR,KAAKyB,cAAeW,MAAM,YAAYE,KAAM,GAAI1B,MAAO,GAAGZ,KAAKU,cAChFuB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPpC,KAAKuC,MACPN,EAAA,cAAYG,MAAM,QAAQE,KAAK,QAAQ1B,MAAM,iBAAiB4B,OAAO,QAClExC,KAAKuC,OAEJ,GACJN,EAAA,kBAAAE,IAAA,2CAAgBC,MAAM,OAAOxB,MAAO,GAAGZ,KAAKU,cAAe4B,KAAK,SAASG,YAAY,IAAIC,WAAW,WAClGT,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAM3B,KAAK,aAEXR,KAAK2C,UACNV,EAAA,aAAWzB,KAAK,QAAQ8B,KAAM,GAAI1B,MAAM,aAAawB,MAAM,aAAaQ,QAAS5C,KAAKC,cACrF,I","ignoreList":[]}
+{"version":3,"names":["curaAlertCss","CuraAlertStyle0","CuraAlert","this","handleClose","close","emit","host","remove","setColors","colors","name","theme","type","forEach","color","styles","window","CuraAPI","getColor","Object","assign","connectedCallback","spacing","getSpacing","getClasses","classes","floating","getNameIcon","iconMapping","info","success","warning","error","icon","render","h","Host","key","class","style","size","label","weight","marginBlock","lineHeight","closeable","onClick"],"sources":["src/components/cura-alert/cura-alert.scss?tag=cura-alert&encapsulation=shadow","src/components/cura-alert/cura-alert.tsx"],"sourcesContent":["@import \"../../scss/mixins/spacing.scss\";\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    padding: #{$spacing-xxxs};\n    gap: #{$spacing-xxxs};\n    flex-shrink: 0;\n    border: 1px solid var(--color-base);\n    border-radius: 4px;\n    background-color: var(--color-lighter);\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n\n  .content {\n    flex: 1;\n    flex-direction: column;\n    display: flex;\n    gap: #{$spacing-tiny};\n  }\n\n  .icon-right {\n    cursor: pointer;\n  }\n\n}\n","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n\n  @State() styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            { this.label ? (\n            <cura-heading class=\"title\" size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"1px 0\">\n              {this.label}\n            </cura-heading>\n            ) : ''}\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,+eACrB,MAAAC,EAAeD,E,MCKFE,EAAS,M,sDAkDpBC,KAAAC,YAAc,KACZD,KAAKE,MAAMC,OACXH,KAAKI,KAAKC,QAAQ,E,UAjDqC,O,cACrB,M,oCAEC,K,gCAGnB,E,CAKlB,SAAAC,GACE,MAAMC,EAAS,CACb,CAAEC,KAAM,kBAAmBC,MAAO,GAAGT,KAAKU,gBAC1C,CAAEF,KAAM,kBAAmBC,MAAO,iBAClC,CAAED,KAAM,gBAAiBC,MAAO,GAAGT,KAAKU,cACxC,CAAEF,KAAM,eAAgBC,MAAO,GAAGT,KAAKU,cAGzCH,EAAOI,SAAQC,IACbZ,KAAKa,OAAOD,EAAMJ,MAAQM,OAAOC,QAAQN,MAAMF,OAAOS,SAASJ,EAAMH,MAAM,IAE7ET,KAAKa,OAAMI,OAAAC,OAAA,GAAOlB,KAAKa,O,CAGzB,iBAAAM,GACEnB,KAAKa,OAAO,kBAAoBC,OAAOC,QAAQN,MAAMW,QAAQC,aAC7DrB,KAAKM,W,CAGP,UAAAgB,GACE,MAAMC,EAAU,GAChBA,EAAQ,aAAe,KACvBA,EAAQ,YAAcvB,KAAKwB,SAC3B,OAAOD,C,CAGT,WAAAE,GACE,MAAMC,EAAc,CAClBC,KAAM,aACNC,QAAS,cACTC,QAAS,cACTC,MAAO,iBAET,OAAO9B,KAAK+B,KAAO/B,KAAK+B,KAAOL,EAAY1B,KAAKU,K,CAQlD,MAAAsB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAOpC,KAAKsB,aAAce,MAAOrC,KAAKa,QACzCoB,EAAA,aAAAE,IAAA,2CAAW3B,KAAMR,KAAKyB,cAAeW,MAAM,YAAYE,KAAM,GAAI1B,MAAO,GAAGZ,KAAKU,cAChFuB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACPpC,KAAKuC,MACPN,EAAA,gBAAcG,MAAM,QAAQE,KAAK,SAAS1B,MAAM,gBAAgB4B,OAAO,OAAM,eAAc,SACxFxC,KAAKuC,OAEJ,GACJN,EAAA,kBAAAE,IAAA,2CAAgBC,MAAM,OAAOxB,MAAO,GAAGZ,KAAKU,cAAe4B,KAAK,SAASG,YAAY,IAAIC,WAAW,WAClGT,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAM3B,KAAK,aAEXR,KAAK2C,UACNV,EAAA,aAAWzB,KAAK,QAAQ8B,KAAM,GAAI1B,MAAM,aAAawB,MAAM,aAAaQ,QAAS5C,KAAKC,cACrF,I","ignoreList":[]}

package/dist/cura/{p-c0f445b5.entry.js → p-bf69b32f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as r,h as a,H as e,g as o}from"./p-af3ac476.js";const i=':host{position:absolute;z-index:99999;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 s=i;const n=768;const c=class{constructor(a){t(this,a);this.tooltipClosed=r(this,"tooltipClosed",7);this.styles={};this.handleClose=()=>{this.closeContainer()};this.elementId="";this.interactive=true;this.delay=250;this.maxWidth="280px";this.position="top";this.label=undefined;this.closeButton=false;this.isMobile=false}onWindowResize(){this.setPosition(this.targetElement)}onWindowScroll(){this.setPosition(this.targetElement)}connectedCallback(){this.setStyle()}render(){return a(e,{key:"8d60e1300b236087fdb740e018c1c0537cae8d14",role:"tooltip",id:this.elementId},a("div",{key:"1ee4abd823d291a62a0890f15e6dcf7de93d27ce",class:"container",style:this.styles},a("div",{key:"5b77522f5bfa31f0c57d1461c4fe74bb28056853",class:"content"},a("cura-heading",{key:"1829def9107ea1a6d4c26a7529f6342b9d1c3a4e",level:4,size:"xsmall",color:"neutral-black",weight:"bold","margin-block":"0"},this.label),a("cura-paragraph",{key:"d7ef9857d141ef5aea60b1d9d1d79f47ebe1f6f8",color:"neutral-dark","spot-color":"secondary-darker",size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},a("slot",{key:"f2dc8c8e8142205d0553af200875131a0cc09111"}))),this.closeButton&&!this.isMobile&&a("cura-icon",{key:"e7666bb54a3366f8c2ab3b0429237f7b5307b36a",class:"close-icon",name:"close",size:16,color:"error-dark",onClick:this.handleClose}),this.isMobile&&a("cura-button-transparent",{key:"cc64d822bf10b1d7788fd2df85a6b97287b7f7ee",class:"close-button",size:"small",type:"button",color:"error","icon-name":"close","icon-position":"right",onClick:this.handleClose},"OK, entendi.")))}componentDidLoad(){var t,r,a,e,o;this.targetElement=document.querySelector(`[aria-labelledby="${this.elementId}"]`);if(!this.interactive){this.host.style.visibility="visible"}else{this.host.style.visibility="hidden";let i=null;let s=null;(t=this.targetElement)===null||t===void 0?void 0:t.addEventListener("mouseenter",(()=>{clearTimeout(s);i=setTimeout((()=>{this.host.style.visibility="visible"}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}));(r=this.targetElement)===null||r===void 0?void 0:r.addEventListener("mouseleave",(()=>{clearTimeout(i);s=setTimeout((()=>{this.handleClose()}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}));(a=this.host)===null||a===void 0?void 0:a.addEventListener("mouseenter",(()=>{if(window.getComputedStyle(this.host).visibility==="visible"){clearTimeout(s)}}));(e=this.host)===null||e===void 0?void 0:e.addEventListener("mouseleave",(()=>{clearTimeout(i);this.handleClose()}));(o=this.targetElement)===null||o===void 0?void 0:o.addEventListener("click",(()=>{if(window.getComputedStyle(this.host).visibility==="hidden"){i=setTimeout((()=>{this.host.style.visibility="visible"}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}else{clearTimeout(i);this.handleClose()}}));document===null||document===void 0?void 0:document.addEventListener("click",(t=>{if(!this.targetElement.contains(t.target)&&!this.host.contains(t.target)){clearTimeout(i);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`,.16)})}getClasses(){const[t,r]=this.position.split("-");const a={};a["container"]=true;if(t){a[t]=true}if(r){a[r]=true}return a}setPosition(t){const r=window.innerWidth;const a=window.innerHeight;const e=this.host.shadowRoot.querySelector(".container");this.isMobile=r<=n;this.host.style.position=this.isMobile?"fixed":"absolute";this.host.style.bottom=this.isMobile?"0":"unset";e.style.flexDirection=this.isMobile?"column":"row";if(this.isMobile){this.host.style.left="0";this.host.style.top="unset";return}const o={top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth,height:t.offsetHeight};const i=this.host.getBoundingClientRect();const s=10;const c=10;const l=o.width*.5+18;const d=o.height*.5+18;const h=this.styles["--neutral-light"];let p=0;let b=0;const u=Object.keys(this.getClasses()).filter((t=>["top","left","bottom","right","start","end"].includes(t)));const f=({arrowTop:t="",arrowLeft:r="",translate:a="",borderColor:e=""})=>{if(r)this.host.style.setProperty("--arrow-left",r);if(t)this.host.style.setProperty("--arrow-top",t);if(a)this.host.style.setProperty("--arrow-translate",a);if(e)this.host.style.setProperty("--arrow-border-color",e)};if(u.includes("top")||u.includes("bottom")){f({arrowLeft:"50%",translate:"translateX(-50%)"});if(u.includes("top")){b=o.top-i.height-c;f({arrowTop:"calc(100% - 6px)",borderColor:`transparent ${h} ${h} transparent`});if(b<s){b=o.top+o.height+c;f({arrowTop:"-6px",borderColor:`${h} transparent transparent ${h}`})}}if(u.includes("bottom")){b=o.top+o.height+c;f({arrowTop:"-6px",borderColor:`${h} transparent transparent ${h}`});if(b+i.height>a-s){b=o.top-i.height-c;f({arrowTop:"calc(100% - 6px)",borderColor:`transparent ${h} ${h} transparent`})}}p=o.left+(o.width-i.width)/2;if(u.includes("start")){p=o.left-i.width+l;f({arrowLeft:"calc(100% - 18px)"});if(p<s){p=o.left+o.width-l;f({arrowLeft:"18px"})}}if(u.includes("end")){p=o.left+o.width-l;f({arrowLeft:"18px"});if(p+i.width>r-s){p=o.left-i.width+l;f({arrowLeft:"calc(100% - 18px)"})}}}if(u.includes("right")||u.includes("left")){f({arrowTop:"50%",translate:"translateY(-50%)"});if(u.includes("right")){p=o.left+o.width+c;f({arrowLeft:"-6px",borderColor:`transparent transparent ${h} ${h}`});if(p+i.width>r-s){p=o.left-i.width-c;f({arrowLeft:"calc(100% - 6px)",borderColor:`${h} ${h} transparent transparent`})}}if(u.includes("left")){p=o.left-i.width-c;f({arrowLeft:"calc(100% - 6px)",borderColor:`${h} ${h} transparent transparent`});if(p<s){p=o.left+o.width+c;f({arrowLeft:"-6px",borderColor:`transparent transparent ${h} ${h}`})}}b=o.top+(o.height-i.height)/2;if(u.includes("start")){b=o.top-i.height+d;f({arrowTop:"calc(100% - 18px)"});if(b<s){b=o.top+o.height-d;f({arrowTop:"18px"})}}if(u.includes("end")){b=o.top+o.height-d;f({arrowTop:"18px"});if(b+i.height>a-s){b=o.top-i.height+d;f({arrowTop:"calc(100% - 18px)"})}}}this.host.style.left=`${p}px`;this.host.style.top=`${b}px`}closeContainer(){this.host.style.visibility="hidden";this.tooltipClosed.emit()}get host(){return o(this)}};c.style=s;export{c as cura_tooltip};
-//# sourceMappingURL=p-c0f445b5.entry.js.map
+import{r as t,c as r,h as a,H as e,g as o}from"./p-af3ac476.js";const i=':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 s=i;const n=768;const c=class{constructor(a){t(this,a);this.tooltipClosed=r(this,"tooltipClosed",7);this.styles={};this.handleClose=()=>{this.closeContainer()};this.elementId="";this.interactive=true;this.delay=250;this.maxWidth="280px";this.position="top";this.label=undefined;this.closeButton=false;this.isMobile=false}onWindowResize(){this.setPosition(this.targetElement)}onWindowScroll(){this.setPosition(this.targetElement)}connectedCallback(){this.setStyle()}render(){return a(e,{key:"8d60e1300b236087fdb740e018c1c0537cae8d14",role:"tooltip",id:this.elementId},a("div",{key:"1ee4abd823d291a62a0890f15e6dcf7de93d27ce",class:"container",style:this.styles},a("div",{key:"5b77522f5bfa31f0c57d1461c4fe74bb28056853",class:"content"},a("cura-heading",{key:"1829def9107ea1a6d4c26a7529f6342b9d1c3a4e",level:4,size:"xsmall",color:"neutral-black",weight:"bold","margin-block":"0"},this.label),a("cura-paragraph",{key:"d7ef9857d141ef5aea60b1d9d1d79f47ebe1f6f8",color:"neutral-dark","spot-color":"secondary-darker",size:"xsmall",marginBlock:"0",lineHeight:"133.33%"},a("slot",{key:"f2dc8c8e8142205d0553af200875131a0cc09111"}))),this.closeButton&&!this.isMobile&&a("cura-icon",{key:"e7666bb54a3366f8c2ab3b0429237f7b5307b36a",class:"close-icon",name:"close",size:16,color:"error-dark",onClick:this.handleClose}),this.isMobile&&a("cura-button-transparent",{key:"cc64d822bf10b1d7788fd2df85a6b97287b7f7ee",class:"close-button",size:"small",type:"button",color:"error","icon-name":"close","icon-position":"right",onClick:this.handleClose},"OK, entendi.")))}componentDidLoad(){var t,r,a,e,o;this.targetElement=document.querySelector(`[aria-labelledby="${this.elementId}"]`);if(!this.interactive){this.host.style.visibility="visible"}else{this.host.style.visibility="hidden";let i=null;let s=null;(t=this.targetElement)===null||t===void 0?void 0:t.addEventListener("mouseenter",(()=>{clearTimeout(s);i=setTimeout((()=>{this.host.style.visibility="visible"}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}));(r=this.targetElement)===null||r===void 0?void 0:r.addEventListener("mouseleave",(()=>{clearTimeout(i);s=setTimeout((()=>{this.handleClose()}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}));(a=this.host)===null||a===void 0?void 0:a.addEventListener("mouseenter",(()=>{if(window.getComputedStyle(this.host).visibility==="visible"){clearTimeout(s)}}));(e=this.host)===null||e===void 0?void 0:e.addEventListener("mouseleave",(()=>{clearTimeout(i);this.handleClose()}));(o=this.targetElement)===null||o===void 0?void 0:o.addEventListener("click",(()=>{if(window.getComputedStyle(this.host).visibility==="hidden"){i=setTimeout((()=>{this.host.style.visibility="visible"}),typeof this.delay==="number"&&this.delay>250?this.delay:250)}else{clearTimeout(i);this.handleClose()}}));document===null||document===void 0?void 0:document.addEventListener("click",(t=>{if(!this.targetElement.contains(t.target)&&!this.host.contains(t.target)){clearTimeout(i);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`,.16)})}getClasses(){const[t,r]=this.position.split("-");const a={};a["container"]=true;if(t){a[t]=true}if(r){a[r]=true}return a}setPosition(t){const r=window.innerWidth;const a=window.innerHeight;const e=this.host.shadowRoot.querySelector(".container");this.isMobile=r<=n;this.host.style.position=this.isMobile?"fixed":"absolute";this.host.style.bottom=this.isMobile?"0":"unset";e.style.flexDirection=this.isMobile?"column":"row";if(this.isMobile){this.host.style.left="0";this.host.style.top="unset";return}const o={top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth,height:t.offsetHeight};const i=this.host.getBoundingClientRect();const s=10;const c=10;const l=o.width*.5+18;const d=o.height*.5+18;const h=this.styles["--neutral-light"];let p=0;let b=0;const u=Object.keys(this.getClasses()).filter((t=>["top","left","bottom","right","start","end"].includes(t)));const f=({arrowTop:t="",arrowLeft:r="",translate:a="",borderColor:e=""})=>{if(r)this.host.style.setProperty("--arrow-left",r);if(t)this.host.style.setProperty("--arrow-top",t);if(a)this.host.style.setProperty("--arrow-translate",a);if(e)this.host.style.setProperty("--arrow-border-color",e)};if(u.includes("top")||u.includes("bottom")){f({arrowLeft:"50%",translate:"translateX(-50%)"});if(u.includes("top")){b=o.top-i.height-c;f({arrowTop:"calc(100% - 6px)",borderColor:`transparent ${h} ${h} transparent`});if(b<s){b=o.top+o.height+c;f({arrowTop:"-6px",borderColor:`${h} transparent transparent ${h}`})}}if(u.includes("bottom")){b=o.top+o.height+c;f({arrowTop:"-6px",borderColor:`${h} transparent transparent ${h}`});if(b+i.height>a-s){b=o.top-i.height-c;f({arrowTop:"calc(100% - 6px)",borderColor:`transparent ${h} ${h} transparent`})}}p=o.left+(o.width-i.width)/2;if(u.includes("start")){p=o.left-i.width+l;f({arrowLeft:"calc(100% - 18px)"});if(p<s){p=o.left+o.width-l;f({arrowLeft:"18px"})}}if(u.includes("end")){p=o.left+o.width-l;f({arrowLeft:"18px"});if(p+i.width>r-s){p=o.left-i.width+l;f({arrowLeft:"calc(100% - 18px)"})}}}if(u.includes("right")||u.includes("left")){f({arrowTop:"50%",translate:"translateY(-50%)"});if(u.includes("right")){p=o.left+o.width+c;f({arrowLeft:"-6px",borderColor:`transparent transparent ${h} ${h}`});if(p+i.width>r-s){p=o.left-i.width-c;f({arrowLeft:"calc(100% - 6px)",borderColor:`${h} ${h} transparent transparent`})}}if(u.includes("left")){p=o.left-i.width-c;f({arrowLeft:"calc(100% - 6px)",borderColor:`${h} ${h} transparent transparent`});if(p<s){p=o.left+o.width+c;f({arrowLeft:"-6px",borderColor:`transparent transparent ${h} ${h}`})}}b=o.top+(o.height-i.height)/2;if(u.includes("start")){b=o.top-i.height+d;f({arrowTop:"calc(100% - 18px)"});if(b<s){b=o.top+o.height-d;f({arrowTop:"18px"})}}if(u.includes("end")){b=o.top+o.height-d;f({arrowTop:"18px"});if(b+i.height>a-s){b=o.top-i.height+d;f({arrowTop:"calc(100% - 18px)"})}}}this.host.style.left=`${p}px`;this.host.style.top=`${b}px`}closeContainer(){this.host.style.visibility="hidden";this.tooltipClosed.emit()}get host(){return o(this)}};c.style=s;export{c as cura_tooltip};
+//# sourceMappingURL=p-bf69b32f.entry.js.map

package/dist/cura/p-bf69b32f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["curaTooltipCss","CuraTooltipStyle0","BREAKPOINT_SMALL_MAX","CuraTooltip","this","styles","handleClose","closeContainer","onWindowResize","setPosition","targetElement","onWindowScroll","connectedCallback","setStyle","render","h","Host","key","role","id","elementId","class","style","level","size","color","weight","label","marginBlock","lineHeight","closeButton","isMobile","name","onClick","type","componentDidLoad","document","querySelector","interactive","host","visibility","openTimeoutID","closeTimeoutID","_a","addEventListener","clearTimeout","setTimeout","delay","_b","_c","window","getComputedStyle","_d","_e","event","contains","target","Object","assign","maxWidth","CuraAPI","theme","spacing","getSpacing","colors","getColor","getClasses","firstPosition","secondPosition","position","split","classes","element","windowWidth","innerWidth","windowHeight","innerHeight","container","shadowRoot","bottom","flexDirection","left","top","elementRect","offsetTop","offsetLeft","width","offsetWidth","height","offsetHeight","tooltipRect","getBoundingClientRect","SCREEN_LIMIT","SPACE_TO_ELEMENT","ARROW_HORIZONTAL_ADJUSTMENT","ARROW_VERTICAL_ADJUSTMENT","BORDER_COLOR","positions","keys","filter","p","includes","setArrowProperties","arrowTop","arrowLeft","translate","borderColor","setProperty","tooltipClosed","emit"],"sources":["src/components/cura-tooltip/cura-tooltip.scss?tag=cura-tooltip&encapsulation=shadow","src/components/cura-tooltip/cura-tooltip.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/spacing.scss';\n\n:host {\n  position: absolute;\n  z-index: 99998;\n  display: block;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: border-box;\n\n  @include mobile-only() {\n    width: 100%;\n  }\n\n  .container {\n    display: flex;\n    box-sizing: border-box;\n    max-width: var(--max-width);\n    height: auto;\n    padding: calc(#{$base-spacing} * 2px);\n    border: 1px solid var(--neutral-light);\n    border-radius: calc(#{$base-spacing} * 1px);\n    background-color: var(--neutral-purewhite);\n    @include shadow-level3(--neutral-black-shadow);\n\n    @include mobile-only() {\n      max-width: 90%;\n      height: fit-content;\n      padding: calc(#{$base-spacing} * 4px) calc(#{$base-spacing} * 4px) 0 calc(#{$base-spacing} * 4px);\n      margin: 0 auto;\n      border: 2px solid;\n      border-radius: calc(#{$base-spacing} * 3px) calc(#{$base-spacing} * 3px) 0 0;\n      border-color: var(--neutral-light) var(--neutral-light) transparent var(--neutral-light);\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      z-index: 99999;\n      width: calc(#{$base-spacing} * 2.5px);\n      height: calc(#{$base-spacing} * 2.5px);\n      border: 1px solid;\n      border-radius: 2px;\n      background-color: var(--neutral-purewhite);\n\n      left: var(--arrow-left);\n      top: var(--arrow-top);\n      border-color: var(--arrow-border-color);\n      transform: var(--arrow-translate) rotate(45deg);\n\n      @include mobile-only() {\n        display: none;\n      }\n    }\n\n    .content {\n      flex: 1 1 0;\n      display: flex;\n      flex-direction: column;\n      gap: calc(#{$base-spacing} * 1px);\n\n      @include mobile-only() {\n        padding-bottom: calc(#{$base-spacing} * 4px);\n        border-bottom: 1px dashed var(--neutral-light);\n      }\n    }\n\n    .close-icon {\n      margin-left: calc(#{$base-spacing} * 3px);\n      cursor: pointer;\n    }\n\n    .close-button {\n      padding: calc(#{$base-spacing} * 2px) 0;\n    }\n  }\n}\n","import { Component, Element, EventEmitter, Host, Prop, State, h, Event, Listen } from '@stencil/core';\n\nconst BREAKPOINT_SMALL_MAX = 768;\n\n@Component({\n  tag: 'cura-tooltip',\n  styleUrl: 'cura-tooltip.scss',\n  shadow: true,\n})\nexport class CuraTooltip {\n  @Element() host: HTMLElement;\n\n  @Prop() elementId = '';\n  @Prop() interactive = true;\n  @Prop() delay = 250;\n  @Prop() maxWidth = '280px';\n  @Prop({ reflect: true }) position: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' = 'top';\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeButton = false;\n\n  @State() isMobile = false;\n\n  @Event({ eventName: 'tooltipClosed' }) tooltipClosed: EventEmitter<void>;\n\n  targetElement: HTMLElement;\n\n  styles = {};\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.setPosition(this.targetElement);\n  }\n\n  @Listen('scroll', { target: 'window' })\n  onWindowScroll() {\n    this.setPosition(this.targetElement);\n  }\n\n  connectedCallback() {\n    this.setStyle();\n  }\n\n  render() {\n    return (\n      <Host role=\"tooltip\" id={this.elementId}>\n        <div class=\"container\" style={this.styles}>\n          <div class=\"content\">\n            <cura-heading level={4} size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\">\n              {this.label}\n            </cura-heading>\n            <cura-paragraph color=\"neutral-dark\" spot-color=\"secondary-darker\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n          </div>\n        {this.closeButton && !this.isMobile && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n        {this.isMobile && <cura-button-transparent class=\"close-button\" size=\"small\" type=\"button\" color=\"error\" icon-name=\"close\" icon-position=\"right\" onClick={this.handleClose}>OK, entendi.</cura-button-transparent>}\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.targetElement = document.querySelector(`[aria-labelledby=\"${this.elementId}\"]`) as HTMLElement;\n\n    if (!this.interactive) {\n      this.host.style.visibility = 'visible';\n    } else {\n      this.host.style.visibility = 'hidden';\n\n      let openTimeoutID = null;\n      let closeTimeoutID = null;\n\n      this.targetElement?.addEventListener('mouseenter', () => {\n        clearTimeout(closeTimeoutID);\n        openTimeoutID = setTimeout(() => {\n          this.host.style.visibility = 'visible';\n        }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n      });\n  \n      this.targetElement?.addEventListener('mouseleave', () => {\n        clearTimeout(openTimeoutID);\n        closeTimeoutID = setTimeout(() => {\n          this.handleClose();\n        }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n      });\n\n      this.host?.addEventListener('mouseenter', () => {\n        if (window.getComputedStyle(this.host).visibility === 'visible') {\n          clearTimeout(closeTimeoutID);\n        }\n      });\n\n      this.host?.addEventListener('mouseleave', () => {\n        clearTimeout(openTimeoutID);\n        this.handleClose();\n      });\n\n      this.targetElement?.addEventListener('click', () => {\n        if (window.getComputedStyle(this.host).visibility === 'hidden') {\n          openTimeoutID = setTimeout(() => {\n            this.host.style.visibility = 'visible';\n          }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n        } else {\n        clearTimeout(openTimeoutID);\n          this.handleClose();\n        }\n      });\n  \n      document?.addEventListener('click', (event: MouseEvent) => {\n        if(!this.targetElement.contains(event.target as HTMLElement) && !this.host.contains(event.target as HTMLElement)) {\n          clearTimeout(openTimeoutID);\n          this.handleClose();\n        }\n      });\n    }\n\n    setTimeout(() => {\n      this.setPosition(this.targetElement);\n    }, 100);\n  }\n\n  setStyle() {\n    this.styles = {\n      ...this.styles,\n      '--max-width': this.maxWidth,\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`),\n      '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16),\n    }\n  }\n\n  getClasses() {\n    const [firstPosition, secondPosition] = this.position.split('-');\n    const classes = {};\n\n    classes['container'] = true;\n    if (firstPosition) { classes[firstPosition] = true; }\n    if (secondPosition) { classes[secondPosition] = true; }\n\n    return classes;\n  }\n\n  setPosition(element: HTMLElement) {\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n\n    this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;\n\n    this.host.style.position = this.isMobile ? 'fixed' : 'absolute';\n    this.host.style.bottom = this.isMobile ? '0' : 'unset';\n    container.style.flexDirection = this.isMobile ? 'column' : 'row';\n\n    if (this.isMobile) {\n      this.host.style.left = '0';\n      this.host.style.top = 'unset';\n      return;\n    }\n\n    const elementRect = { \n      top: element.offsetTop, \n      left: element.offsetLeft, \n      width: element.offsetWidth, \n      height: element.offsetHeight\n    };\n    const tooltipRect = this.host.getBoundingClientRect();\n\n    const SCREEN_LIMIT = 10;\n    const SPACE_TO_ELEMENT = 10;\n    const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;\n    const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;\n    const BORDER_COLOR = this.styles['--neutral-light'];\n\n    let left = 0;\n    let top = 0;\n\n    const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));\n\n    const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {\n      if (arrowLeft) this.host.style.setProperty('--arrow-left', arrowLeft);\n      if (arrowTop) this.host.style.setProperty('--arrow-top', arrowTop);\n      if (translate) this.host.style.setProperty('--arrow-translate', translate);\n      if (borderColor) this.host.style.setProperty('--arrow-border-color', borderColor);\n    };\n\n    //Posicionamento vertical\n    if (positions.includes('top') || positions.includes('bottom')) {\n      setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });\n\n      if (positions.includes('top')) {\n        top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n\n        if (top < SCREEN_LIMIT) {\n          top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n        }\n      }\n\n      if (positions.includes('bottom')) {\n        top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n\n        if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n          top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n        }\n      }\n\n      left = elementRect.left + (elementRect.width - tooltipRect.width)/2;\n      \n      if (positions.includes('start')) {\n        left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n        setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n\n        if (left < SCREEN_LIMIT) {\n          left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n          setArrowProperties({ arrowLeft: '18px' });\n        }\n      }\n\n      if (positions.includes('end')) {\n        left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n        setArrowProperties({ arrowLeft: '18px' });\n\n        if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n          left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n          setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n        }\n      }\n    }\n\n    //Posicionamento horizontal\n    if (positions.includes('right') || positions.includes('left')) {\n      setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });\n\n      if (positions.includes('right')) {\n        left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n\n        if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n          left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n        }\n      }\n\n      if (positions.includes('left')) {\n        left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n        \n        if (left < SCREEN_LIMIT) {\n          left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n        }\n      }\n      \n      top = elementRect.top + (elementRect.height - tooltipRect.height)/2;\n\n      if (positions.includes('start')) {\n        top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n        setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n\n        if (top < SCREEN_LIMIT) {\n          top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n          setArrowProperties({ arrowTop: '18px' });\n        }\n      }\n\n      if (positions.includes('end')) {\n        top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n        setArrowProperties({ arrowTop: '18px' });\n\n        if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n          top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n          setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n        }\n      }\n    }\n\n    this.host.style.left = `${left}px`;\n    this.host.style.top = `${top}px`;\n  }\n\n  closeContainer() {\n    this.host.style.visibility = 'hidden';\n    this.tooltipClosed.emit();\n  }\n\n  handleClose = () => {\n    this.closeContainer();\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/cura-accordion_18.entry.js

@@ -153,9 +153,7 @@ const CuraAvatar = class {
         this.styles = {};
     }
     sizeHandler(size) {
-        const avatarSize = avatarSizes[size];
-        this.styles['--border'] = this.border && `${avatarSize.border}px`;
-        this.styles['--size'] = `${this.size}px`;
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--size': `${size}px` });
     }
     getClasses() {
         const classes = {};
@@ -168,17 +166,19 @@ const CuraAvatar = class {
         this.sizeHandler(this.size);
     }
     hostCSSProperties() {
+        const avatarSize = avatarSizes[this.size];
         return {
             '--background-color': window.CuraAPI.theme.colors.getColor(this.backgroundColor),
             '--border-color': window.CuraAPI.theme.colors.getColor(this.borderColor),
             '--border-radius': `${this.borderRadius}`,
+            '--border': this.border ? `${avatarSize.border}px` : '0',
         };
     }
     onSrcError() {
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: '467e74004b400e80a2d7f8e1a40cd9d7e782ff8a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: 'c38a163b8aeebd07f8aece7aea9889c336df92a5', class: this.getClasses(), style: this.styles }, h("img", { key: 'a22868d4aae4029afb9b325a5c8f5556fa8984ea', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (h(Host, { key: '4e81726b8f163587f37fc80a537470147ca0b8f8', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '0e844cd40171f401e51fef97a434e4ffbad1c946', class: this.getClasses(), style: this.styles }, h("img", { key: '92e0ecfb0996f822b53bcb41e91b92f619e1fbf6', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -649,10 +649,6 @@ const CuraDropdownSearchNew = class {
         this.isOnFocus = false;
         this.dropdownItems = [];
     }
-    handleMaxHeightChange(newValue, oldValue) {
-        if (newValue !== oldValue)
-            this.styles = Object.assign(Object.assign({}, this.styles), { '--max-height': newValue });
-    }
     /**
      * Set focus to input field.
      */
@@ -679,7 +675,6 @@ const CuraDropdownSearchNew = class {
         this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
         this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
         this.styles['--font-weight-medium'] = this.weights.medium;
-        this.handleMaxHeightChange(this.maxheight, '');
         window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.handleWindowResize);
         window === null || window === void 0 ? void 0 : window.addEventListener('orientationchange', this.handleWindowResize);
         this.isMobile = checkMobile();
@@ -810,13 +805,15 @@ const CuraDropdownSearchNew = class {
             "error": this.status === 'error'
         };
     }
+    getHostCSSProperties() {
+        return {
+            '--max-height': this.maxheight || '400px'
+        };
+    }
     render() {
-        return (h(Host, { key: '2fddf33d55ce7fd0e9648270012a462827fed62b' }, h("div", { key: 'c45c76906309db7a3bd9789bc87bebeef5fdfdb0', class: this.getClasses(), style: this.styles }, h("div", { key: 'be29c3debdb21abcdf90dd2446dfef2de8f1f5f6', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: 'a27635ad3101a80d7116c3d6a605d37577b45893', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: 'b96c64c5f5b01a487c6fc190e19af136576eb45f', name: "helperText" }))), h("div", { key: '249a0fd49fd854c7b69565194a06b27781b93b9b', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: '9e2e0ea5eaaade2a22956383baab4d8fc84d35a2', onSlotchange: () => this.handleSlotChange() })))));
+        return (h(Host, { key: '1ebfc600579b7a386966dcf00cf7136085e13709', style: this.getHostCSSProperties() }, h("div", { key: '80dcb14a6abaa3128197884188ef1f1ebd08d019', class: this.getClasses(), style: this.styles }, h("div", { key: '1255e6429cad5132e46c6492e379393632d30297', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: 'e603b95729405c50726a68897d543355cb131f3f', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: 'a5a0f6df5162929eba35f75db09b2f7bf2f25636', name: "helperText" }))), h("div", { key: 'c39b6cf44904bbd755bb43791055d925ffb78d2b', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: 'd0fc526af6d27f793d195030165be8224ebd356c', onSlotchange: () => this.handleSlotChange() })))));
     }
     get host() { return getElement(this); }
-    static get watchers() { return {
-        "maxheight": ["handleMaxHeightChange"]
-    }; }
 };
 CuraDropdownSearchNew.style = CuraDropdownSearchNewStyle0;
 
@@ -872,7 +869,7 @@ const CuraDropdownSearchOptionNew = class {
 };
 CuraDropdownSearchOptionNew.style = CuraDropdownSearchOptionNewStyle0;
 
-const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.8571428571em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.8571428571em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-spot);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-spot);text-decoration:underline dashed 1px var(--color-spot);text-underline-offset:10%;cursor:default}:host ::slotted(i){font-weight:var(--font-weight-medium)}:host ::slotted(em){color:var(--color-spot);font-weight:var(--font-weight-bold);font-style:normal}";
+const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.8571428571em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1 ::slotted(b),:host h1 ::slotted(strong),:host h2 ::slotted(b),:host h2 ::slotted(strong),:host h3 ::slotted(b),:host h3 ::slotted(strong),:host h4 ::slotted(b),:host h4 ::slotted(strong),:host h5 ::slotted(b),:host h5 ::slotted(strong),:host h6 ::slotted(b),:host h6 ::slotted(strong){font-weight:var(--font-weight-medium)}:host h1 ::slotted(a),:host h2 ::slotted(a),:host h3 ::slotted(a),:host h4 ::slotted(a),:host h5 ::slotted(a),:host h6 ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-spot);text-underline-offset:10%;cursor:pointer}:host h1 ::slotted(u),:host h2 ::slotted(u),:host h3 ::slotted(u),:host h4 ::slotted(u),:host h5 ::slotted(u),:host h6 ::slotted(u){text-underline-offset:10%}:host h1 ::slotted(abbr),:host h2 ::slotted(abbr),:host h3 ::slotted(abbr),:host h4 ::slotted(abbr),:host h5 ::slotted(abbr),:host h6 ::slotted(abbr){color:var(--color-spot);text-decoration:underline dashed 1px var(--color-spot);text-underline-offset:10%;cursor:default}:host h1 ::slotted(i),:host h2 ::slotted(i),:host h3 ::slotted(i),:host h4 ::slotted(i),:host h5 ::slotted(i),:host h6 ::slotted(i){font-weight:var(--font-weight-medium)}:host h1 ::slotted(em),:host h2 ::slotted(em),:host h3 ::slotted(em),:host h4 ::slotted(em),:host h5 ::slotted(em),:host h6 ::slotted(em){color:var(--color-spot);font-weight:var(--font-weight-bold);font-style:normal}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.8571428571em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}";
 const CuraHeadingStyle0 = curaHeadingCss;
 
 const CuraHeading = class {
@@ -939,7 +936,7 @@ const CuraHeading = class {
 };
 CuraHeading.style = CuraHeadingStyle0;
 
-const curaIconCss = ":host{width:var(--size);height:var(--size)}:host svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
+const curaIconCss = ":host{width:var(--size);height:var(--size);display:inline-block}:host svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
 const CuraIconStyle0 = curaIconCss;
 
 const CuraIcon = class {