@rededor/cura 1.4.0 → 1.5.0-alpha.0

package/dist/cjs/cura-alert.cjs.entry.js

@@ -54,7 +54,7 @@ const CuraAlert = class {
         return this.icon ? this.icon : iconMapping[this.type];
     }
     render() {
-        return (index.h(index.Host, { key: 'c7d36a87c8ca4ea44a53d90edf5028e27d4ab631' }, index.h("div", { key: 'c54f199ba48a8a0e0549c5f046cf7dc128d8108e', class: this.getClasses(), style: this.styles }, index.h("cura-icon", { key: 'f1607925bceeaf29a8bee7a021b1bf9e9be5b0e6', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), index.h("div", { key: '6ccb322b9594a0c963cf8fa873b4a66642d69357', class: "content" }, this.label ? (index.h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', index.h("cura-paragraph", { key: 'e70495f19e2eac2b0c593d156436061aba50c295', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, index.h("slot", { key: '043f67d199324f668aced318a81e6ecdbd3ac97a' })), index.h("slot", { key: '83cc65b83514bdbc77a3676d2fab55ebb20aa5dc', name: "actions" })), this.closeable ?
+        return (index.h(index.Host, { key: 'a0b22404673b1568b9cb937150dda71ce4c99d50' }, index.h("div", { key: 'c30bf1b97d1e1ffaf334ef3bca6cdd1f081c679c', class: this.getClasses(), style: this.styles }, index.h("cura-icon", { key: '1bd88c8a19e073d7b9d967d8df38bb74063cd110', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), index.h("div", { key: '0df09a27c27c7e1743f7cfb9e71c96b102ff4484', class: "content" }, this.label ? (index.h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', index.h("cura-paragraph", { key: '687cc7ab050299f0878c2d10ccd28e92708db85d', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, index.h("slot", { key: 'e2d85d40e65029ea71a43aa23e7298d6dcc7efa9' })), index.h("slot", { key: 'a28fe90c9bfe2b9fb22f196eab7bb2e09e408dbf', name: "actions" })), this.closeable ?
             (index.h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
             : '')));
     }

package/dist/cjs/cura-avatar.cjs.entry.js

@@ -54,7 +54,7 @@ const CuraAvatar = class {
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (index.h(index.Host, { key: '2760534555a0483e7e30c5f3009ec0cf68d0973b', style: this.hostCSSProperties(), role: "img" }, index.h("div", { key: '3daf6dd066983dc63525c38b7da498147c0bf387', class: this.getClasses(), style: this.styles }, index.h("img", { key: 'a5f4de7983722fc3f750404fa985c312590b5e98', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (index.h(index.Host, { key: '467e74004b400e80a2d7f8e1a40cd9d7e782ff8a', style: this.hostCSSProperties(), role: "img" }, index.h("div", { key: 'c38a163b8aeebd07f8aece7aea9889c336df92a5', class: this.getClasses(), style: this.styles }, index.h("img", { key: 'a22868d4aae4029afb9b325a5c8f5556fa8984ea', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cura-badge-counter.cjs.entry.js

@@ -42,13 +42,13 @@ const CuraBadgeNumber = class {
     }
     getClasses() {
         const classes = {
-            'container': true,
+            'container': true
         };
         classes[this.type.toLowerCase()] = true;
         return classes;
     }
     render() {
-        return (index.h(index.Host, { key: 'bb6ab35685970eadac6962b3a01f158ebac05515' }, this.number && this.number <= 0 ? '' : (index.h("div", { class: this.getClasses(), style: this.styles }, index.h("cura-label", { size: "xsmall", "line-height": "none", color: this.labelColor }, this.number >= 100 ? '99+' : this.number)))));
+        return (index.h(index.Host, { key: '8b67f2b913a10de53a519cdafcfbcb140b2adda5' }, this.number && this.number <= 0 ? '' : (index.h("div", { class: this.getClasses(), style: this.styles }, index.h("cura-label", { size: "xsmall", "line-height": "none", color: this.labelColor }, this.number >= 100 ? '99+' : this.number)))));
     }
     static get watchers() { return {
         "disabled": ["handleColorChange"],

package/dist/cjs/cura-badge-counter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"cura-badge-counter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,uvBAAuvB,CAAC;AACpxB,+BAAe,mBAAmB;;MCMrB,eAAe;;;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QAqB7B,eAAU,GAAG,gBAAgB,CAAC;QAC9B,gBAAW,GAAG,iBAAiB,CAAC;;qBAZR,SAAS;wBAIL,KAAK;oBAI4B,OAAO;sBAElD,EAAE;;IAOpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,SAAS;QACP,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;;QAEvC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;YAC1D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,KAAK,OAAO,CAAC;YACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;;SAEpC;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,GAAG,KAAK,UAAU,CAAC;YAC9F,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,KAAK,OAAO,CAAC;SACtE;QACD,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,GACxE,CAAA;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChE,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;SAClB,CAAC;QACF,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC;KAChB;IAGD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,IACtCD,iBAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/CA,wBAAY,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,MAAM,IAAI,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAC9B,CACT,CACL,CACI,EACP;KACH;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/badges/cura-badge-counter/cura-badge-counter.scss?tag=cura-badge-counter&encapsulation=shadow","src/components/badges/cura-badge-counter/cura-badge-counter.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n\n:host {\n  width: fit-content;\n  display: inline-block;\n  height: #{$spacing-xxs};\n  position: relative;\n\n  .container {\n    display: flex;\n    min-width: #{$spacing-xxs};\n    width: fit-content;\n    height: #{$spacing-xxs};\n    justify-content: center;\n    align-items: center;\n    border-radius: calc(#{$spacing-xxs} / 2);\n    background: var(--background-color);\n    box-sizing: border-box;\n    padding: 0 #{$spacing-tiny};\n    position: relative;\n\n    &.outline,\n    &.transparent {\n      background: transparent !important;\n    }\n\n    &.outline {\n      &::before {\n        content: \"\";\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 1px solid var(--background-color);\n        border-radius: calc(#{$spacing-xxs} / 2);\n      }\n    }\n  }\n\n}\n","import { Component, Host, Prop, h, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-counter',\n  styleUrl: 'cura-badge-counter.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  theme = window.CuraAPI.theme;\n\n  /** Número a ser representado no badge.\n   * Apresentará 99+ para números acima desse valor.\n   */\n  @Prop({ reflect: true }) number: number | null;\n  /**\n   * Cor fundamental do design system sem profundidade.\n   * Ex.: primary (padrão)\n   */\n  @Prop() color: string = 'primary';\n  /**\n   * Define o estado do badge como desabilitado ou habilitado.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Define o estilo visual entre solid (default), outline ou transparent.\n   */\n  @Prop() type: 'solid' | 'outline' | 'transparent' | string = 'solid';\n\n  @State() styles = {};\n  labelColor = 'primary-darker';\n  bgColorName = 'primary-lighter';\n\n  @Watch(\"disabled\")\n  @Watch(\"color\")\n  @Watch(\"type\")\n  handleColorChange() {\n    this.setColors();\n  }\n\n  setColors() {\n    const color = this.color.toLowerCase();\n    /** type outline and transparent */\n    if (this.type === 'outline' || this.type === 'transparent') {\n      this.bgColorName = this.disabled ? `neutral-medium` : `${color}-dark`;\n      this.labelColor = this.bgColorName;\n    /** type solid - default */\n    } else {\n      this.bgColorName = color === 'neutral' || this.disabled ? `neutral-pale` : `${color}-lighter`;\n      this.labelColor = this.disabled ? 'neutral-medium' : `${color}-dark`;\n    }\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(`${this.bgColorName}`),\n    }\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {\n      'container': true,\n    };\n    classes[this.type.toLowerCase()] = true;\n    return classes;\n  }\n\n\n  render() {\n    return (\n      <Host>\n        { this.number && this.number <= 0 ? '' : (\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-label size=\"xsmall\" line-height=\"none\" color={this.labelColor}>\n            {this.number >= 100 ? '99+' : this.number}\n          </cura-label>\n        </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-badge-counter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,uvBAAuvB,CAAC;AACpxB,+BAAe,mBAAmB;;MCMrB,eAAe;;;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QAqB7B,eAAU,GAAG,gBAAgB,CAAC;QAC9B,gBAAW,GAAG,iBAAiB,CAAC;;qBAZR,SAAS;wBAIL,KAAK;oBAI4B,OAAO;sBAElD,EAAE;;IAOpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,SAAS;QACP,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;;QAEvC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;YAC1D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,KAAK,OAAO,CAAC;YACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;;SAEpC;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,GAAG,KAAK,UAAU,CAAC;YAC9F,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,KAAK,OAAO,CAAC;SACtE;QACD,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,GACxE,CAAA;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChE,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;SAClB,CAAC;QACF,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC;KAChB;IAGD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,IACtCD,iBAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/CA,wBAAY,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,MAAM,IAAI,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAC9B,CACT,CACL,CACI,EACP;KACH;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/badges/cura-badge-counter/cura-badge-counter.scss?tag=cura-badge-counter&encapsulation=shadow","src/components/badges/cura-badge-counter/cura-badge-counter.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n\n:host {\n  width: fit-content;\n  display: inline-block;\n  height: #{$spacing-xxs};\n  position: relative;\n\n  .container {\n    display: flex;\n    min-width: #{$spacing-xxs};\n    width: fit-content;\n    height: #{$spacing-xxs};\n    justify-content: center;\n    align-items: center;\n    border-radius: calc(#{$spacing-xxs} / 2);\n    background: var(--background-color);\n    box-sizing: border-box;\n    padding: 0 #{$spacing-tiny};\n    position: relative;\n\n    &.outline,\n    &.transparent {\n      background: transparent !important;\n    }\n\n    &.outline {\n      &::before {\n        content: \"\";\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 1px solid var(--background-color);\n        border-radius: calc(#{$spacing-xxs} / 2);\n      }\n    }\n  }\n\n}\n","import { Component, Host, Prop, h, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-counter',\n  styleUrl: 'cura-badge-counter.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  theme = window.CuraAPI.theme;\n\n  /** Número a ser representado no badge.\n   * Apresentará 99+ para números acima desse valor.\n   */\n  @Prop({ reflect: true }) number: number | null;\n  /**\n   * Cor fundamental do design system sem profundidade.\n   * Ex.: primary (padrão)\n   */\n  @Prop() color: string = 'primary';\n  /**\n   * Define o estado do badge como desabilitado ou habilitado.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * Define o estilo visual entre solid (default), outline ou transparent.\n   */\n  @Prop() type: 'solid' | 'outline' | 'transparent' | string = 'solid';\n\n  @State() styles = {};\n  labelColor = 'primary-darker';\n  bgColorName = 'primary-lighter';\n\n  @Watch(\"disabled\")\n  @Watch(\"color\")\n  @Watch(\"type\")\n  handleColorChange() {\n    this.setColors();\n  }\n\n  setColors() {\n    const color = this.color.toLowerCase();\n    /** type outline and transparent */\n    if (this.type === 'outline' || this.type === 'transparent') {\n      this.bgColorName = this.disabled ? `neutral-medium` : `${color}-dark`;\n      this.labelColor = this.bgColorName;\n    /** type solid - default */\n    } else {\n      this.bgColorName = color === 'neutral' || this.disabled ? `neutral-pale` : `${color}-lighter`;\n      this.labelColor = this.disabled ? 'neutral-medium' : `${color}-dark`;\n    }\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(`${this.bgColorName}`),\n    }\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {\n      'container': true\n    };\n    classes[this.type.toLowerCase()] = true;\n    return classes;\n  }\n\n\n  render() {\n    return (\n      <Host>\n        { this.number && this.number <= 0 ? '' : (\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-label size=\"xsmall\" line-height=\"none\" color={this.labelColor}>\n            {this.number >= 100 ? '99+' : this.number}\n          </cura-label>\n        </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/cura-badge-dot.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e6d728ec.js');
+
+const curaBadgeDotCss = ":host{display:block;position:relative;width:fit-content;height:fit-content}:host .container{width:calc(var(--base-spacing) * 2px);height:calc(var(--base-spacing) * 2px);position:relative;box-sizing:border-box}:host .container::before{width:100%;height:100%;position:absolute;left:0;top:0;content:\"\";box-sizing:border-box;border-radius:50%;border:1px solid var(--color-dark);background:var(--color)}:host .container.disabled::before{background:var(--neutral-pale);border:1px solid var(--neutral-medium)}:host .container.outline::before{background:transparent;border:2px solid var(--color)}:host .container.outline.disabled::before{border:2px solid var(--neutral-medium)}:host .container.transparent::before{background:var(--color-dark);border:none}:host .container.transparent.disabled::before{background:var(--neutral-medium);border:none}";
+const CuraBadgeDotStyle0 = curaBadgeDotCss;
+
+const CuraBadgeDot = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.theme = window.CuraAPI.theme;
+        this.color = 'primary';
+        this.disabled = false;
+        this.type = 'solid';
+        this.styles = {};
+    }
+    connectedCallback() {
+        this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
+        this.styles['--neutral-medium'] = this.theme.colors.getColor('neutral-dark');
+        this.styles['--neutral-pale'] = this.theme.colors.getColor('neutral-pale');
+        this.setColors();
+    }
+    setColors() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--color': this.theme.colors.getColor(`${this.color}`), '--color-dark': this.theme.colors.getColor(`${this.color}-dark`) });
+    }
+    getClasses() {
+        const classes = {
+            'container': true,
+            'disabled': this.disabled
+        };
+        classes[`${this.type}`] = true;
+        return classes;
+    }
+    render() {
+        return (index.h(index.Host, { key: '00e335977fbb0677db9d95bab901a012ba8a5c06' }, index.h("div", { key: 'e828743793731c986f37dd6a9f7abdc78b63932b', class: this.getClasses(), style: this.styles })));
+    }
+};
+CuraBadgeDot.style = CuraBadgeDotStyle0;
+
+exports.cura_badge_dot = CuraBadgeDot;
+
+//# sourceMappingURL=cura-badge-dot.cjs.entry.js.map

package/dist/cjs/cura-badge-dot.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"cura-badge-dot.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,00BAA00B,CAAC;AACn2B,2BAAe,eAAe;;MCMjB,YAAY;;;QAEvB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;qBAML,SAAS;wBAIU,KAAK;oBAI4B,OAAO;sBAEjE,EAAE;;IAGpB,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QAC7E,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QAC3E,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,SAAS;QACP,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EACtD,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,CAAC,GACjE,CAAA;KACF;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QACF,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;QAC/B,OAAO,OAAO,CAAC;KAChB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,GAAQ,CACpD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/badges/cura-badge-dot/cura-badge-dot.scss?tag=cura-badge-dot&encapsulation=shadow","src/components/badges/cura-badge-dot/cura-badge-dot.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n\n  .container {\n    width: #{$spacing-mini};\n    height: #{$spacing-mini};\n    position: relative;\n    box-sizing: border-box;\n\n    &::before {\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      left: 0;\n      top: 0;\n      content: \"\";\n      box-sizing: border-box;\n      border-radius: 50%;\n      border: 1px solid var(--color-dark);\n      background: var(--color);\n    }\n\n    &.disabled::before {\n      background: var(--neutral-pale);\n      border: 1px solid var(--neutral-medium);\n    }\n\n    &.outline::before {\n      background: transparent;\n      border: 2px solid var(--color);\n    }\n    &.outline.disabled::before {\n      border: 2px solid var(--neutral-medium);\n    }\n\n    &.transparent::before {\n      background: var(--color-dark);\n      border: none;\n    }\n    &.transparent.disabled::before {\n      background: var(--neutral-medium);\n      border: none;\n    }\n\n  }\n}\n","import { Component, Host, h, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-dot',\n  styleUrl: 'cura-badge-dot.scss',\n  shadow: true,\n})\nexport class CuraBadgeDot {\n\n  theme = window.CuraAPI.theme;\n\n  /**\n   * Cor fundamental do design system sem profundidade.\n   * Ex.: primary (padrão)\n   */\n  @Prop() color: string = 'primary';\n  /**\n   * Define o estado do badge como desabilitado ou habilitado.\n   */\n  @Prop({reflect: true}) disabled: boolean = false;\n  /**\n   * Define o estilo visual entre solid (default), outline ou transparent.\n   */\n  @Prop({reflect: true}) type: 'solid' | 'outline' | 'transparent' | string = 'solid';\n\n  @State() styles = {};\n\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--neutral-medium'] = this.theme.colors.getColor('neutral-dark');;\n    this.styles['--neutral-pale'] = this.theme.colors.getColor('neutral-pale');;\n    this.setColors();\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color': this.theme.colors.getColor(`${this.color}`),\n      '--color-dark': this.theme.colors.getColor(`${this.color}-dark`)\n    }\n  }\n\n  getClasses() {\n    const classes = {\n      'container': true,\n      'disabled': this.disabled\n    };\n    classes[`${this.type}`] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/cura-badge-pill.cjs.entry.js

@@ -43,6 +43,7 @@ const CuraBadgePill = class {
         colors.forEach(color => {
             this.styles[color.name] = this.theme.colors.getColor(color.theme);
         });
+        this.styles = Object.assign({}, this.styles);
     }
     hostCSSProperties() {
         return {
@@ -69,7 +70,7 @@ const CuraBadgePill = class {
     }
     render() {
         const symbolColor = this.getSymbolColor();
-        return (index.h(index.Host, { key: 'b6870052543347fdc83a75629b30251ddab35e12', style: this.hostCSSProperties() }, index.h("div", { key: 'ae8b14c1c9c323b8387e7ed4e3a97bade9c712f4', class: this.getClasses(), style: this.styles }, this.getIcon(), index.h("cura-label", { key: 'd14ab9efd48f33c7b8153cf85699b2fc96ecd7af', size: 'xsmall', "line-height": "117%", color: symbolColor }, index.h("slot", { key: 'b684ca1b248d04700a2b8a7245c455fb9bdef474' })))));
+        return (index.h(index.Host, { key: 'd2b79aa7ede4462cd2b591b62321ef69b9e4fed3', style: this.hostCSSProperties() }, index.h("div", { key: 'a82383b03c02990b5879ca647ae06cabb5c32845', class: this.getClasses(), style: this.styles }, this.getIcon(), index.h("cura-label", { key: '1ccf493530fa6b7cee25db83d0fcb37cf308df3d', size: 'xsmall', "line-height": "117%", color: symbolColor }, index.h("slot", { key: '488e4fbd8b30cfcd15b25c9227e129b1c6e1ce32' })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cura-badge-pill.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"cura-badge-pill.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/badges/cura-badge-pill/cura-badge-pill.scss?tag=cura-badge-pill&encapsulation=shadow","src/components/badges/cura-badge-pill/cura-badge-pill.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n.badge-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: #{$spacing-tiny};\n  padding: #{$spacing-tiny};\n  border-radius: var(--border-radius);\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  position: relative;\n  box-sizing: border-box;\n  width: fit-content;\n  height: #{$spacing-xs};\n  min-width: #{$spacing-xs};\n\n  background-color: var(--color-background);\n\n  &::before {\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    box-sizing: border-box;\n    border: 1px solid transparent;\n    border-radius: var(--border-radius);\n    pointer-events: none;\n  }\n\n  &.icon-only {\n    cura-label {\n      display: none !important;\n    }\n  }\n\n  &.disabled {\n    background-color: var(--color-background-disabled);\n  }\n\n  &.outline {\n    background-color: transparent;\n\n    &::before {\n      border: 1px solid var(--color-base);\n    }\n\n    &.disabled::before {\n      border: 1px solid var(--color-outline-disabled);\n    }\n  }\n\n  &.transparent {\n    background-color: transparent;\n\n    &::before {\n      border: 1px solid transparent;\n    }\n\n    &.disabled {\n      background-color: transparent;\n    }\n  }\n\n  cura-icon {\n    display: flex;\n  }\n}\n","import { Component, Host, Prop, State, h, Watch, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-pill',\n  styleUrl: 'cura-badge-pill.scss',\n  shadow: true,\n})\nexport class CuraBadgePill {\n  @Element() host: HTMLElement;\n\n  /**\n   * Badge type: solid | outline | transparent\n   */\n  @Prop({ reflect: true }) type: 'solid' | 'outline' | 'transparent' = 'solid';\n\n  /**\n   * Color base from color scheme. Default: primary\n   */\n  @Prop() color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' = 'primary';\n\n  /**\n   * Name of the icon to be used from iconset\n   */\n  @Prop({ reflect: true }) iconName: string;\n\n  /**\n   * Custom iconset if needed\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n\n  /**\n   * Disabled state. Boolean\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Set badge to icon only. Boolean\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Set border-radius.\n   */\n  @Prop({ reflect: true }) borderRadius: string = \"2px\";\n\n  @State() styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  @Watch('color')\n  handleColorChange() {\n    this.setColors();\n  }\n\n  connectedCallback() {\n    this.setBaseStyles();\n    this.setColors();\n  }\n\n  private setBaseStyles() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles = { ...this.styles };\n  }\n\n  private setColors() {\n    const colors = [\n      { name: '--color-background', theme: `${this.color}-lighter` },\n      { name: '--color-base', theme: `${this.color}-dark` },\n      { name: '--color-background-disabled', theme: 'neutral-pale' },\n      { name: '--color-outline-disabled', theme: 'neutral-medium' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = this.theme.colors.getColor(color.theme);\n    });\n  }\n\n  hostCSSProperties() {\n    return {\n      '--border-radius': this.borderRadius || '2px',\n    };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['badge-container'] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes[`${this.type}`] = true;\n    return classes;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-medium'\n      : `${this.color}-dark`;\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    return <cura-icon\n      name={this.iconName}\n      iconset={this.iconset}\n      size={'micro'}\n      color={this.getSymbolColor()}\n    />;\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <div class={this.getClasses()} style={this.styles}>\n          {this.getIcon()}\n          <cura-label size='xsmall' line-height=\"117%\" color={symbolColor}>\n            <slot></slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-badge-pill.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/badges/cura-badge-pill/cura-badge-pill.scss?tag=cura-badge-pill&encapsulation=shadow","src/components/badges/cura-badge-pill/cura-badge-pill.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n.badge-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: #{$spacing-tiny};\n  padding: #{$spacing-tiny};\n  border-radius: var(--border-radius);\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  position: relative;\n  box-sizing: border-box;\n  width: fit-content;\n  height: #{$spacing-xs};\n  min-width: #{$spacing-xs};\n\n  background-color: var(--color-background);\n\n  &::before {\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    box-sizing: border-box;\n    border: 1px solid transparent;\n    border-radius: var(--border-radius);\n    pointer-events: none;\n  }\n\n  &.icon-only {\n    cura-label {\n      display: none !important;\n    }\n  }\n\n  &.disabled {\n    background-color: var(--color-background-disabled);\n  }\n\n  &.outline {\n    background-color: transparent;\n\n    &::before {\n      border: 1px solid var(--color-base);\n    }\n\n    &.disabled::before {\n      border: 1px solid var(--color-outline-disabled);\n    }\n  }\n\n  &.transparent {\n    background-color: transparent;\n\n    &::before {\n      border: 1px solid transparent;\n    }\n\n    &.disabled {\n      background-color: transparent;\n    }\n  }\n\n  cura-icon {\n    display: flex;\n  }\n}\n","import { Component, Host, Prop, State, h, Watch, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-pill',\n  styleUrl: 'cura-badge-pill.scss',\n  shadow: true,\n})\nexport class CuraBadgePill {\n  @Element() host: HTMLElement;\n\n  /**\n   * Badge type: solid | outline | transparent\n   */\n  @Prop({ reflect: true }) type: 'solid' | 'outline' | 'transparent' = 'solid';\n\n  /**\n   * Color base from color scheme. Default: primary\n   */\n  @Prop() color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' = 'primary';\n\n  /**\n   * Name of the icon to be used from iconset\n   */\n  @Prop({ reflect: true }) iconName: string;\n\n  /**\n   * Custom iconset if needed\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n\n  /**\n   * Disabled state. Boolean\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Set badge to icon only. Boolean\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Set border-radius.\n   */\n  @Prop({ reflect: true }) borderRadius: string = \"2px\";\n\n  @State() styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  @Watch('color')\n  handleColorChange() {\n    this.setColors();\n  }\n\n  connectedCallback() {\n    this.setBaseStyles();\n    this.setColors();\n  }\n\n  private setBaseStyles() {\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles = { ...this.styles };\n  }\n\n  private setColors() {\n    const colors = [\n      { name: '--color-background', theme: `${this.color}-lighter` },\n      { name: '--color-base', theme: `${this.color}-dark` },\n      { name: '--color-background-disabled', theme: 'neutral-pale' },\n      { name: '--color-outline-disabled', theme: 'neutral-medium' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = this.theme.colors.getColor(color.theme);\n    });\n    this.styles = { ...this.styles };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--border-radius': this.borderRadius || '2px',\n    };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['badge-container'] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes[`${this.type}`] = true;\n    return classes;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-medium'\n      : `${this.color}-dark`;\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    return <cura-icon\n      name={this.iconName}\n      iconset={this.iconset}\n      size={'micro'}\n      color={this.getSymbolColor()}\n    />;\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <div class={this.getClasses()} style={this.styles}>\n          {this.getIcon()}\n          <cura-label size='xsmall' line-height=\"117%\" color={symbolColor}>\n            <slot></slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/cura-button-outline.cjs.entry.js

@@ -103,7 +103,7 @@ const CuraButtonOutline = class {
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = curaButton_definitions.labelSizes[this.size] || curaButton_definitions.labelSizes["default"];
-        return (index.h(index.Host, { key: '8c7adeaec50deaf3829295d2231b390992064735' }, this.href ? (index.h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (index.h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (index.h(index.Host, { key: '0a0c25f94d0c18dbb90e4836ca3e7bcbbe10d032' }, this.href ? (index.h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (index.h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/cura-button-select.cjs.entry.js

@@ -106,7 +106,7 @@ const CuraButtonSelect = class {
     }
     render() {
         const labelSize = curaButton_definitions.labelSizes[this.size] || curaButton_definitions.labelSizes['default'];
-        return (index.h(index.Host, { key: '54bf5dc64b99128f839fdc22ff56dd709971fc8e' }, index.h("button", { key: '422e4d80d321fb9e4cddd165700220071012bea8', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("div", { key: '6c40080d1b8746e394539cf717d658e4d834c500', class: "button-container" }, this.iconName ? this.getIcon() : null, index.h("cura-label", { key: 'f2f9b54cbcd2c7a571d966ba20f344384ecaadc0', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, index.h("slot", { key: 'f5c471e0771c6c19685aa591461a73b1aaa83c47' })), this.counter ? this.getCounter() : null, this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null))));
+        return (index.h(index.Host, { key: '4b7592b68a09c5b93ec1c9ec6b84c7e5afa06ec3' }, index.h("button", { key: 'd607a733d64f73bd4bd4405e0aeb9d7f5ceebf52', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("div", { key: '14e2f5b7309bf6c2252c81ab2f02fb36670facf3', class: "button-container" }, this.iconName ? this.getIcon() : null, index.h("cura-label", { key: '0759d70b0105a56dfa42bce78f2f5b8c33b04254', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, index.h("slot", { key: 'a9935483ee6c67b8142878672804dfb7df0d8479' })), this.counter ? this.getCounter() : null, this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cura-button-transparent.cjs.entry.js

@@ -92,7 +92,7 @@ const CuraButtonTransparent = class {
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = curaButton_definitions.labelSizes[this.size] || curaButton_definitions.labelSizes["default"];
-        return (index.h(index.Host, { key: '5cdc491f0c3e80910e76c5bef2e26ce468ffda1f' }, this.href ? (index.h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (index.h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (index.h(index.Host, { key: 'f93f2f1b495403127238468c57edfcb5e9f69d43' }, this.href ? (index.h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (index.h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, index.h("span", { class: "button-container" }, this.getIcon(), index.h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, index.h("slot", null))), index.h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/cura-calendar.cjs.entry.js

@@ -3906,7 +3906,7 @@ const CuraCalendar = class {
     }
     render() {
         const { months } = this.fetchMonthNames();
-        return (index$1.h(index$1.Host, { key: 'fcea88a384ceebadccb6059ef59cea945f875a72', style: this.getHostCSSProperties() }, index$1.h("div", { key: '82c5271ba6b073439fb58471920f73b68b8f1320', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, index$1.h("header", { key: '3921fb57f3d526b9f33c59f998ad422806505bc1', class: "header" }, index$1.h("div", { key: '1f852f0f29ff927d3940c670f5b25206837cc331', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, index$1.h("cura-icon", { key: '697fda3903f24611628fe24a7f669ab87474aeab', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (index$1.h("div", { class: "select" }, index$1.h("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (index$1.h("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), index$1.h("cura-select", { size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (index$1.h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (index$1.h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), index$1.h("cura-icon", { key: '6b7f0694e978b0807c4e54629cda68f2fde27c8a', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), index$1.h("span", { key: '5a151331c2c9872cf3b50bbaea7c9b92b1476297', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (index$1.h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), index$1.h("div", { key: '7eeb57ed5dc104c953343697a205a922a1b2b912', class: "dates" }, !this.collapsed
+        return (index$1.h(index$1.Host, { key: '859c5f15de173c774dc9f8a88792845741b665e2', style: this.getHostCSSProperties() }, index$1.h("div", { key: '5838783d7ecb5b2258ef7ef73ba32ca7ddbad470', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, index$1.h("header", { key: '16245dbb73d9d0a277891b3853f451b89acccc35', class: "header" }, index$1.h("div", { key: '9a22c4386363642fa7219edebd9e9a5cfb5220aa', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, index$1.h("cura-icon", { key: '4d3ee4454dfc8bbcd8d76df101b553c86b0cea8f', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (index$1.h("div", { class: "select" }, index$1.h("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (index$1.h("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), index$1.h("cura-select", { size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (index$1.h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (index$1.h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), index$1.h("cura-icon", { key: '1f54119aafaa80816cdd016100a7987cba6656b0', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), index$1.h("span", { key: '40be6c876675cf43b42e214e30639e48873dc4bc', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (index$1.h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), index$1.h("div", { key: '72cae6b30fa5b7d5e180b796458d1844aba27ea9', class: "dates" }, !this.collapsed
             ? this.fetchDaysOfMonth().map((day, index) => (index$1.h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
             : this.fetchDaysOfWeek().map((day, index) => (index$1.h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (index$1.h("div", { class: "collapsed-container" }, index$1.h("cura-button-transparent", { onClick: () => this.showNotColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "plusCircle" }, "Veja mais datas"))) : (index$1.h("div", { class: "collapsed-container" }, index$1.h("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "minusCircle" }, "Veja menos datas")))) : null)));
     }

package/dist/cjs/cura-card.cjs.entry.js

@@ -43,7 +43,7 @@ const CuraCard = class {
         return classes;
     }
     render() {
-        return (index.h(index.Host, { key: 'db1a13cfe3bb925300e65641e1d45fade5a03f52', role: this.href ? 'link' : 'div' }, this.href ? (index.h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, index.h("slot", null))) : (index.h("div", { class: this.getClasses(), style: this.styles }, index.h("slot", null)))));
+        return (index.h(index.Host, { key: '9478ce754c108db722dbc5bcbb00a0884b6c6f38', role: this.href ? 'link' : 'div' }, this.href ? (index.h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, index.h("slot", null))) : (index.h("div", { class: this.getClasses(), style: this.styles }, index.h("slot", null)))));
     }
 };
 CuraCard.style = CuraCardStyle0;

package/dist/cjs/cura-checkbox.cjs.entry.js

@@ -164,7 +164,7 @@ const CuraCheckbox = class {
         return index.h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (index.h(index.Host, { key: '29437631c4078574a1123fcd27f471efd6738a2c' }, index.h("div", { key: '3821e17c78c011a7ab1fb4ab148258fe85be7d19', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, index.h("div", { key: '0f868dfa5f35c3cd11d870eca977bb2a9c67a7d7', class: "info" }, index.h("div", { key: '05cf807789ad779bf90946926176a2a17b1c4704', class: "label-wrapper" }, index.h("cura-label", { key: '979497d243d7296f2c8bb5347ab01d2e12568c01', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && index.h("cura-paragraph", { key: 'a8e3a3b6a891bb4c2ade3271fe8d11674770c160', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), index.h("cura-label", { key: 'afcd5016c3f232e05684b38e8ec97d6e604b8f12', color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: 'af27633296d454363d71d5b27227c40a26a4e119' }))), index.h("div", { key: 'd357e30a36326de76d1cd91332a32e3befeb03a9', class: 'checkbox', tabIndex: this.ontabindex }, index.h("input", { key: '0ef63518fced76e52746b79cd598f96065f83a60', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (index.h(index.Host, { key: 'c589b642a730e09b8d5ba60b69b45f131560ffda' }, index.h("div", { key: '85ee55dc52042e513e070d68af348dc78d1990e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, index.h("div", { key: '59e78d3b717b0bbd77d98da09ab7f1da30d02f14', class: "info" }, index.h("div", { key: '64d683966633a625e7e477fcf1b00364d5fd3fa7', class: "label-wrapper" }, index.h("cura-label", { key: '76d34006ffd837285cb899278f759d95862097c5', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && index.h("cura-paragraph", { key: '01394587736d7402d5c6729e9f7e93f7b08ad742', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), index.h("cura-label", { key: 'fcbbea9a05b9299a814111ea36d7412df6f54e92', color: this.assignColor('message'), size: "xsmall", class: "message" }, index.h("slot", { key: '99c46ed2eb8492cbebb114d828935f1ec0bf7796' }))), index.h("div", { key: '6291780f613af4e320c486b46697df6f19bdce0e', class: 'checkbox', tabIndex: this.ontabindex }, index.h("input", { key: 'b922e6498ecfd28391843cdfa45c850f045f3ab6', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

package/dist/cjs/cura-display.cjs.entry.js

@@ -69,7 +69,7 @@ const CuraDisplay = class {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (index.h(index.Host, { key: '32758f666bb547d7cd3646694e8cc132a795bc44', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (index.h(index.Host, { key: '454c94a3f6a1ee3f8ec8ba28ba77f31a5abe8f49', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cura-dropdown-search-option-title.cjs.entry.js

@@ -12,7 +12,7 @@ const CuraDropdownSearchOptionTitle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'ff083af27d3250e4722c6f238b80b33f739cb64c', slot: "dropdown-search-option" }, index.h("cura-label", { key: '62e9b2a758e000eb1ce5e5a76c1e9e555b5a4c8c', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, index.h("slot", { key: 'e96fd0daa9b210bdea256d88c17b6cc9c425c5bc' }))));
+        return (index.h(index.Host, { key: 'b378a877e6a90727e3216c284c2a064992f2dfc9', slot: "dropdown-search-option" }, index.h("cura-label", { key: 'e2d457a7d42bcacae09012322b19a54e44fb109f', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, index.h("slot", { key: 'e889fa1839988a0f138e14ad15b0e250100ba38c' }))));
     }
 };
 CuraDropdownSearchOptionTitle.style = CuraDropdownSearchOptionTitleStyle0;

package/dist/cjs/cura-dropdown-search-option.cjs.entry.js

@@ -46,12 +46,12 @@ const CuraDropdownSearchOption = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '333293644b47d0b7b8e288cf6a81e3e8916a82bd', slot: "dropdown-search-option" }, index.h("div", { key: '5a7f789204607805d65c3b0a586ffdeb54c10a02', style: this.styles, class: {
+        return (index.h(index.Host, { key: '515f662d5fb08cd77e7ad24de425ec34497e5e6e', slot: "dropdown-search-option" }, index.h("div", { key: '8decccf2416ae3ea135bba38845da2a63c9cfdce', style: this.styles, class: {
                 "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, index.h("div", { key: '7ba5fd8f0f35fe0b5856fdaeedf09c7cb8d4fd24', class: "content-container" }, index.h("div", { key: '6618b6f7248e43be1f6915800662d48bf3a08f7c', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, index.h("slot", { key: 'c8c6d3a059d221ae3871f2cb048cb6145bec3546', name: "image" }), index.h("cura-heading", { key: '4678a347d5211c38c9e05dded43ab68840cebca2', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, index.h("slot", { key: '97a34c9bb70e3aaf34fb3ead81ef5e6a0cd05782' }))), index.h("slot", { key: 'fecb411b2de2c169f01cf1a8c1ca2ed14ee049e9', name: "action" })))));
+            } }, index.h("div", { key: '8c3cce88d40c764ae87cf8c54e3fb9fe9651f62d', class: "content-container" }, index.h("div", { key: '1c674ff6a3721c42e034b994bf903d8608100cb8', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, index.h("slot", { key: '7a6545a242da0774b74a403b2dc26ce378d146fd', name: "image" }), index.h("cura-heading", { key: '860fede2f20748b5e15ddf3222cd0c6ce3ff1f8c', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, index.h("slot", { key: 'e9a7610e2d561cb399d58c44f98fb9ea0e6cf5c6' }))), index.h("slot", { key: 'c784f7cddd4d5e246126ef43ab08e82db51fc2be', name: "action" })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cura-dropdown-search.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e6d728ec.js');
 
-const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:1%;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:calc(100vh - var(--dynamic-input-search-height, 0));max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
+const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:1%;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex;margin-right:4px}.dropdown-mobile .dropdown-input-search cura-input-text{padding:12px 8px 12px 0px}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:calc(100vh - var(--dynamic-input-search-height, 0));max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
 const CuraDropdownSearchStyle0 = curaDropdownSearchCss;
 
 const CuraDropdownSearch = class {
@@ -14,16 +14,14 @@ const CuraDropdownSearch = class {
         this.onselect = index.createEvent(this, "onselect", 7);
         this.overlayElement = null;
         this.adjustInputPosition = () => {
-            window.visualViewport.addEventListener('resize', () => {
-                var _a;
-                const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
-                const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
-                if (dropdown) {
-                    dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
-                    dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';
-                    window.scroll({ top: 0, left: 0, behavior: 'smooth' });
-                }
-            });
+            var _a, _b;
+            const isKeyboardOpen = (window === null || window === void 0 ? void 0 : window.innerHeight) < this.screenDefaultHeight;
+            const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
+            if (dropdown) {
+                dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
+                dropdown.style.bottom = isKeyboardOpen ? `${((_b = window === null || window === void 0 ? void 0 : window.screen) === null || _b === void 0 ? void 0 : _b.height) - (window === null || window === void 0 ? void 0 : window.innerHeight)}px` : '0';
+                window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+            }
         };
         this.handleSlotChange = () => {
             this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
@@ -65,6 +63,10 @@ const CuraDropdownSearch = class {
                 }
             }
         };
+        this.setUp = () => {
+            this.handleResize();
+            this.adjustInputPosition();
+        };
         this.size = 'large';
         this.status = 'default';
         this.disabled = false;
@@ -86,6 +88,7 @@ const CuraDropdownSearch = class {
         this.hoveredIndex = -1;
         this.options = [];
         this.originalOverflow = '';
+        this.screenDefaultHeight = 0;
     }
     connectedCallback() {
         this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -118,12 +121,15 @@ const CuraDropdownSearch = class {
         }
     }
     componentDidLoad() {
-        window.addEventListener('resize', this.handleResize);
-        window.addEventListener('resize', this.adjustInputPosition);
+        var _a;
+        this.screenDefaultHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+        window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.setUp);
+        (_a = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.adjustInputPosition);
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize);
-        window.removeEventListener('resize', this.adjustInputPosition);
+        var _a;
+        window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.setUp);
+        (_a = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.adjustInputPosition);
     }
     showOverlay() {
         if (!this.overlayElement) {
@@ -150,7 +156,7 @@ const CuraDropdownSearch = class {
     }
     addClickListenersToOptions() {
         this.options.forEach((option, index) => {
-            option.addEventListener('optionSelected', () => this.onSelectedOption(index));
+            option === null || option === void 0 ? void 0 : option.addEventListener('optionSelected', () => this.onSelectedOption(index));
         });
     }
     updateSelectedOption(value) {
@@ -158,7 +164,7 @@ const CuraDropdownSearch = class {
         this.hoveredIndex = selectedOptionIndex;
         this.updateOptionAttribute('hovered', this.hoveredIndex);
         this.updateOptionAttribute('selected', this.hoveredIndex);
-        this.scrollIntoView();
+        this.scrollHoveredOptionIntoView();
         this.adjustInputPosition();
     }
     onSelectedOption(index) {
@@ -178,7 +184,7 @@ const CuraDropdownSearch = class {
         const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;
         this.hoveredIndex = newIndex;
         this.updateOptionAttribute('hovered', this.hoveredIndex);
-        this.scrollIntoView();
+        this.scrollHoveredOptionIntoView();
     }
     updateOptionAttribute(attribute, indexToUpdate) {
         this.options.forEach((option, index) => {
@@ -190,7 +196,7 @@ const CuraDropdownSearch = class {
         const currentValue = this.value;
         this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);
     }
-    scrollIntoView() {
+    scrollHoveredOptionIntoView() {
         var _a;
         const container = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-search-list');
         const hoveredOption = this.options[this.hoveredIndex];
@@ -257,9 +263,9 @@ const CuraDropdownSearch = class {
     }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (index.h(index.Host, { key: '5acd835c67558501ac74915597423754c1d412ea', style: this.hostCSSProperties(), class: "dropdown-overlay" }, index.h("div", { key: 'cb0ca2ec4f574f95897163726f81b75b18a4505e', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, index.h("div", { key: 'c6eac11c0c3420e35b7432af8748976f32814851', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (index.h("cura-button-transparent", { key: 'd1cd468c497877ad7f4f22a5dd1bc5bc662bfa6e', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), index.h("cura-input-text", { key: '35f3943ecd4966a1d27ed9e4fba4de08376dd767', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (index.h(index.Host, { key: 'b65367e4fa490b0dff8616bb9d82665bf3bb6f2b', style: this.hostCSSProperties(), class: "dropdown-overlay" }, index.h("div", { key: 'ab7e1b6038a6dfa6b707bc97f225d68ed97bdc07', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, index.h("div", { key: '7e3ab85750a9d868fa789d1f1841c0a907b8948c', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (index.h("cura-button-transparent", { key: 'f171dceed48f41ad15736cbb358a1ffa6288d261', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), index.h("cura-input-text", { key: '53e7aa39324cc7c4ce52388f80823d0fb144d4e0', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, index.h("slot", { key: '13cffd23e80ec86b266c5b109b2e8ecb89f28944', name: "helperText" }))), index.h("div", { key: 'f0047c0b74057fbf21893f3c92fcaf97db59e544', id: "dropdown-search-list", class: this.getDropdownClasses() }, index.h("slot", { key: '386584475924a3a621308e50697c49bcbe5f1bae', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, index.h("slot", { key: '0fec269301bc1aa23978ec2b52adb856e9e8f17d', name: "helperText" }))), index.h("div", { key: 'a6060851435b1da0bac0adb2445bfb90000c17d7', id: "dropdown-search-list", class: this.getDropdownClasses() }, index.h("slot", { key: '5443c23f1279be7243a27fccb39aa9ce35452b99', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/cura-dropdown-search.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"cura-dropdown-search.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown {\n  display: flex;\n  position: relative;\n\n  flex-direction: column;\n  width: inherit;\n\n  .dropdown-search-list {\n    z-index: 1000;\n  }\n\n  &-input-search {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n\n\n    &.dropdown-open {\n      ::part(cura-input-field) {\n        border-radius: 4px 4px 0px 0px;\n      }\n      ::slotted([slot='helperText']) {\n        display: none;\n      }\n\n      cura-input-text {\n        ::slotted([slot='helperText']) {\n          display: none;\n        }\n      }\n    }\n  }\n\n  &-search-list {\n    position: absolute;\n    top:  calc(100% - 8px);\n    width: 100%;\n    max-height: var(--dropdown-max-height);\n    padding: 12px 12px;\n    margin: 0;\n    box-sizing: border-box;\n    @include shadow-level3(--neutral-black-shadow);\n    border-radius: 0px 0px 4px 4px;\n    border-top: 0 var(--neutral-light);\n    border-right: 2px solid var(--neutral-light);\n    border-bottom: 2px solid var(--neutral-light);\n    border-left: 2px solid var(--neutral-light);\n    background-color: var(--neutral-purewhite);\n    list-style: none;\n    overflow-y: auto;\n    display: none;\n\n    &.visible {\n      display: block;\n    }\n\n    &-input-search {\n      width: inherit;\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 16px 8px;\n      border-bottom: 2px solid var(--info-base);\n      background-color: var(--neutral-purewhite);\n\n      cura-input-text {\n        width: inherit;\n      }\n\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n    }\n  }\n\n  &-mobile {\n    position: fixed;\n    top: 1%;\n    left: 0;\n    right: 0;\n    width: 100%;\n\n    z-index: 10000;\n    .dropdown-input-search {\n      display: flex;\n      gap: 4px;\n      padding: 12px 8px;\n      background-color: var(--neutral-purewhite);\n      border-bottom: 2px solid var(--info-base);\n      z-index: 10000;\n      cura-button-transparent {\n        display: flex;\n      }\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n      &.dropdown-open {\n        display: flex;\n\n        ::slotted([slot='helperText']) {\n          display: block;\n        }\n      }\n    }\n    .dropdown-search-list {\n      position: static;\n      width: 100%;\n      height: calc(100vh - var(--dynamic-input-search-height, 0));\n      max-height: none;\n      padding: 12px 12px;\n      margin: 0;\n      box-sizing: border-box;\n      box-shadow: none;\n      border: none;\n      background-color: var(--neutral-purewhite);\n      list-style: none;\n      overflow-y: auto;\n      z-index: 10000;\n    }\n  }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  /**\n   * Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n   */\n  @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the dropdown search component.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Indicates if the dropdown search is required.\n   */\n  @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n  /**\n   * Indicates if the dropdown search is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * The value of the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * The placeholder text for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n  /**\n   * The label for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) label: string = '';\n\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) iconName = 'search';\n\n  /**\n   * CSS max-height property for dropdown item.\n   * Default to 630px\n   */\n  @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Indicates if the overlay is visible.\n   */\n  @State() overlayVisible: boolean = false;\n\n  /**\n   * Event emitted when the value changes.\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  /**\n   * Indicates if the dropdown is open.\n   */\n  @State() isDropdownOpen: boolean = false;\n\n  /**\n * Styles for the component.\n\n */\n  @State() styles = {};\n\n  /**\n   * Indicates if the component is being viewed on a mobile device.\n   */\n  @State() isMobile: boolean = window.innerWidth < 768;\n\n  /**\n   * The mode of the dropdown search.\n   */\n  @State() mode: 'default' | 'transparent' = 'default';\n\n  @Event() onselect: EventEmitter;\n\n  @State() inputTextRef!: HTMLCuraInputTextElement;\n\n  /**\n   * Indicates if the input is on blur.\n   */\n  @State() isOnBlurInput: boolean = true;\n\n  /**\n   * The index of the currently hovered option.\n   */\n  @State() hoveredIndex: number = -1;\n\n  /**\n   * The options for the dropdown search.\n   * @type {HTMLCuraDropdownSearchOptionElement[]}\n   */\n\n  weights;\n\n  private overlayElement: HTMLDivElement | null = null;\n\n  @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n  /**\n   *\n   * Stores the original value of the 'overflow' style of the body\n   * before blocking the scroll.\n   */\n  @State() originalOverflow: string = '';\n\n  private adjustInputPosition = () => {\n    window.visualViewport.addEventListener('resize', () => {\n      const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;\n      const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n      if (dropdown) {\n        dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';\n        dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';\n        window.scroll({ top: 0, left: 0, behavior: 'smooth' });\n      }\n    });\n  };\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n    this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string) {\n    this.updateSelectedOption(newValue);\n    this.valueChanged.emit(newValue);\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    if (this.isDropdownOpen && this.isMobile) {\n      this.showOverlay();\n      this.getDropdownSearchListHeight();\n    } else {\n      this.removeOverlay();\n    }\n  }\n  componentDidLoad() {\n    window.addEventListener('resize', this.handleResize);\n    window.addEventListener('resize', this.adjustInputPosition);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\n    window.removeEventListener('resize', this.adjustInputPosition);\n  }\n\n  private showOverlay() {\n    if (!this.overlayElement) {\n      this.overlayElement = document.createElement('div');\n      this.overlayElement.className = 'dropdown-overlay';\n      this.overlayElement.style.position = 'fixed';\n      this.overlayElement.style.top = '0';\n      this.overlayElement.style.left = '0';\n      this.overlayElement.style.width = '100%';\n      this.overlayElement.style.height = '100%';\n      this.overlayElement.style.zIndex = '9999';\n      this.overlayElement.style.backgroundColor = 'white';\n      document.body.appendChild(this.overlayElement);\n\n      this.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  private removeOverlay() {\n    if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n      document.body.removeChild(this.overlayElement);\n      this.overlayElement = null;\n      document.body.style.overflow = this.originalOverflow;\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n    this.addClickListenersToOptions();\n    this.updateHoveredIndex();\n  };\n\n  private addClickListenersToOptions() {\n    this.options.forEach((option, index) => {\n      option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n    });\n  }\n\n  private updateSelectedOption(value: string) {\n    const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n    this.hoveredIndex = selectedOptionIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.updateOptionAttribute('selected', this.hoveredIndex);\n\n    this.scrollIntoView();\n    this.adjustInputPosition();\n  }\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.onValueChange(this.value);\n    // this.valueChanged.emit(this.value);\n  };\n\n  private onSelectedOption(index: number) {\n    const selectedOption = this.options[index];\n    if (selectedOption.selectable) {\n      const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n      this.value = selectedValue || '';\n      this.updateSelectedOption(this.value);\n\n      this.isDropdownOpen = false;\n      this.isOnBlurInput = true;\n      this.resetDropdownStyles();\n      this.removeOverlay();\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.moveHighlight(1);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.moveHighlight(-1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      if (this.hoveredIndex > -1) {\n        this.handleOnBlur();\n        this.onSelectedOption(this.hoveredIndex);\n      }\n    }\n  };\n\n  private moveHighlight(direction: number) {\n    const visibleOptions = this.options;\n    const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n    this.hoveredIndex = newIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.scrollIntoView();\n  }\n\n  private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n    this.options.forEach((option, index) => {\n      (option as any)[attribute] = index === indexToUpdate;\n    });\n  }\n\n  private updateHoveredIndex() {\n    const visibleOptions = this.options;\n    const currentValue = this.value;\n    this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n  }\n\n  private scrollIntoView() {\n    const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n    const hoveredOption = this.options[this.hoveredIndex];\n\n    if (container && hoveredOption) {\n      const optionRect = hoveredOption.getBoundingClientRect();\n      const containerRect = container.getBoundingClientRect();\n\n      if (optionRect.bottom > containerRect.bottom) {\n        container.scrollTop += optionRect.bottom - containerRect.bottom;\n      }\n\n      if (optionRect.top < containerRect.top) {\n        container.scrollTop -= containerRect.top - optionRect.top;\n      }\n    }\n  }\n\n  private handleResize = () => {\n    this.isMobile = window.innerWidth < 768;\n    if (this.isDropdownOpen) {\n      if (this.isMobile) {\n        this.showOverlay();\n      } else {\n        this.resetDropdownStyles();\n        this.removeOverlay();\n      }\n    }\n  };\n\n  handleOnBlur() {\n    if (this.isOnBlurInput === true) {\n      setTimeout(() => {\n        this.isDropdownOpen = false;\n        this.resetDropdownStyles();\n        this.removeOverlay();\n      }, 200);\n    }\n  }\n  getClasses() {\n    return {\n      'dropdown-input-search': true,\n      'dropdown-open': this.isDropdownOpen,\n      'disabled': this.disabled,\n      [this.status]: true,\n    };\n  }\n\n  getDropdownClasses() {\n    return {\n      'dropdown-search-list': true,\n      'visible': this.options.length && this.isDropdownOpen ? true : false,\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--dropdown-max-height': this.dropdownMaxHeight,\n    };\n  }\n\n  handleOnFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  getDropdownSearchListHeight() {\n    const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n    if (dropdownInputSearchElement) {\n      this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n    }\n  }\n\n  handleGoBack() {\n    this.resetDropdownStyles();\n    this.isMobile = false;\n  }\n\n  resetDropdownStyles() {\n    const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n    if (dropdown && dropdown.style.position === 'fixed') {\n      dropdown.style.position = 'relative';\n      dropdown.style.removeProperty('bottom');\n    }\n  }\n\n  render() {\n    const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n    return (\n      <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n        <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n          <div class={this.getClasses()}>\n            {this.isMobile && this.isDropdownOpen && (\n              <cura-button-transparent fontColor=\"dark\" onClick={() => this.handleGoBack()} iconName=\"arrowLeft\" size=\"medium\" iconOnly color=\"primary\"></cura-button-transparent>\n            )}\n            <cura-input-text\n              disabled={this.disabled}\n              label={this.label}\n              part=\"cura-input-field\"\n              mode={isMobileDropdown ? 'transparent' : 'default'}\n              required={this.required}\n              hideErrorIcon={this.status === 'error'}\n              iconName={this.iconName || 'search'}\n              value={this.value}\n              status={this.status}\n              onValueChange={e => this.onValueChange(e.target.value as string)}\n              onInput={e => this.handleInputChange(e)}\n              onFocus={() => this.handleOnFocus()}\n              onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n              onBlur={() => {\n                this.handleOnBlur();\n              }}\n              placeholder={this.placeholder}\n              size={this.size}\n              onKeyDown={this.handleKeyDown}\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n            <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-dropdown-search.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown {\n  display: flex;\n  position: relative;\n\n  flex-direction: column;\n  width: inherit;\n\n  .dropdown-search-list {\n    z-index: 1000;\n  }\n\n  &-input-search {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n\n\n    &.dropdown-open {\n      ::part(cura-input-field) {\n        border-radius: 4px 4px 0px 0px;\n      }\n      ::slotted([slot='helperText']) {\n        display: none;\n      }\n\n      cura-input-text {\n        ::slotted([slot='helperText']) {\n          display: none;\n        }\n      }\n    }\n  }\n\n  &-search-list {\n    position: absolute;\n    top:  calc(100% - 8px);\n    width: 100%;\n    max-height: var(--dropdown-max-height);\n    padding: 12px 12px;\n    margin: 0;\n    box-sizing: border-box;\n    @include shadow-level3(--neutral-black-shadow);\n    border-radius: 0px 0px 4px 4px;\n    border-top: 0 var(--neutral-light);\n    border-right: 2px solid var(--neutral-light);\n    border-bottom: 2px solid var(--neutral-light);\n    border-left: 2px solid var(--neutral-light);\n    background-color: var(--neutral-purewhite);\n    list-style: none;\n    overflow-y: auto;\n    display: none;\n\n    &.visible {\n      display: block;\n    }\n\n    &-input-search {\n      width: inherit;\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 16px 8px;\n      border-bottom: 2px solid var(--info-base);\n      background-color: var(--neutral-purewhite);\n\n      cura-input-text {\n        width: inherit;\n      }\n\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n    }\n  }\n\n  &-mobile {\n    position: fixed;\n    top: 1%;\n    left: 0;\n    right: 0;\n    width: 100%;\n    z-index: 10000;\n    \n    .dropdown-input-search {\n      display: flex;\n      background-color: var(--neutral-purewhite);\n      border-bottom: 2px solid var(--info-base);\n      z-index: 10000;\n      cura-button-transparent {\n        display: flex;\n        margin-right: 4px;\n      }\n      cura-input-text {\n        padding: 12px 8px 12px 0px;\n      }\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n      &.dropdown-open {\n        display: flex;\n\n        ::slotted([slot='helperText']) {\n          display: block;\n        }\n      }\n    }\n\n    .dropdown-search-list {\n      position: static;\n      width: 100%;\n      height: calc(100vh - var(--dynamic-input-search-height, 0));\n      max-height: none;\n      padding: 12px 12px;\n      margin: 0;\n      box-sizing: border-box;\n      box-shadow: none;\n      border: none;\n      background-color: var(--neutral-purewhite);\n      list-style: none;\n      overflow-y: auto;\n      z-index: 10000;\n    }\n  }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  /**\n   * Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n   */\n  @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the dropdown search component.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Indicates if the dropdown search is required.\n   */\n  @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n  /**\n   * Indicates if the dropdown search is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * The value of the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * The placeholder text for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n  /**\n   * The label for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) label: string = '';\n\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) iconName = 'search';\n\n  /**\n   * CSS max-height property for dropdown item.\n   * Default to 630px\n   */\n  @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Indicates if the overlay is visible.\n   */\n  @State() overlayVisible: boolean = false;\n\n  /**\n   * Event emitted when the value changes.\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  /**\n   * Indicates if the dropdown is open.\n   */\n  @State() isDropdownOpen: boolean = false;\n\n  /**\n * Styles for the component.\n\n */\n  @State() styles = {};\n\n  /**\n   * Indicates if the component is being viewed on a mobile device.\n   */\n  @State() isMobile: boolean = window.innerWidth < 768;\n\n  /**\n   * The mode of the dropdown search.\n   */\n  @State() mode: 'default' | 'transparent' = 'default';\n\n  @Event() onselect: EventEmitter;\n\n  @State() inputTextRef!: HTMLCuraInputTextElement;\n\n  /**\n   * Indicates if the input is on blur.\n   */\n  @State() isOnBlurInput: boolean = true;\n\n  /**\n   * The index of the currently hovered option.\n   */\n  @State() hoveredIndex: number = -1;\n\n  /**\n   * The options for the dropdown search.\n   * @type {HTMLCuraDropdownSearchOptionElement[]}\n   */\n\n  weights;\n\n  private overlayElement: HTMLDivElement | null = null;\n\n  @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n  /**\n   *\n   * Stores the original value of the 'overflow' style of the body\n   * before blocking the scroll.\n   */\n  @State() originalOverflow: string = '';\n  @State() screenDefaultHeight = 0;\n\n  private adjustInputPosition = () => {\n    const isKeyboardOpen = window?.innerHeight < this.screenDefaultHeight;\n      const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLElement;\n        if (dropdown) {\n          dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';\n          dropdown.style.bottom = isKeyboardOpen ? `${window?.screen?.height - window?.innerHeight}px` : '0';\n          window.scroll({ top: 0, left: 0, behavior: 'smooth' });\n        }\n  };\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n    this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string) {\n    this.updateSelectedOption(newValue);\n    this.valueChanged.emit(newValue);\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    if (this.isDropdownOpen && this.isMobile) {\n      this.showOverlay();\n      this.getDropdownSearchListHeight();\n    } else {\n      this.removeOverlay();\n    }\n  }\n  componentDidLoad() {\n    this.screenDefaultHeight = window?.innerHeight;\n    window?.addEventListener('resize', this.setUp);\n    window?.visualViewport?.addEventListener('resize', this.adjustInputPosition);\n  }\n\n  disconnectedCallback() {\n    window?.removeEventListener('resize', this.setUp);\n    window?.visualViewport?.removeEventListener('resize', this.adjustInputPosition);\n  }\n  \n  private showOverlay() {\n    if (!this.overlayElement) {\n      this.overlayElement = document.createElement('div');\n      this.overlayElement.className = 'dropdown-overlay';\n      this.overlayElement.style.position = 'fixed';\n      this.overlayElement.style.top = '0';\n      this.overlayElement.style.left = '0';\n      this.overlayElement.style.width = '100%';\n      this.overlayElement.style.height = '100%';\n      this.overlayElement.style.zIndex = '9999';\n      this.overlayElement.style.backgroundColor = 'white';\n      document.body.appendChild(this.overlayElement);\n\n      this.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  private removeOverlay() {\n    if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n      document.body.removeChild(this.overlayElement);\n      this.overlayElement = null;\n      document.body.style.overflow = this.originalOverflow;\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n    this.addClickListenersToOptions();\n    this.updateHoveredIndex();\n  };\n\n  private addClickListenersToOptions() {\n    this.options.forEach((option, index) => {\n      option?.addEventListener('optionSelected', () => this.onSelectedOption(index));\n    });\n  }\n\n  private updateSelectedOption(value: string) {\n    const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n    this.hoveredIndex = selectedOptionIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.updateOptionAttribute('selected', this.hoveredIndex);\n\n    this.scrollHoveredOptionIntoView();\n    this.adjustInputPosition();\n  }\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.onValueChange(this.value);\n    // this.valueChanged.emit(this.value);\n  };\n\n  private onSelectedOption(index: number) {\n    const selectedOption = this.options[index];\n    if (selectedOption.selectable) {\n      const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n      this.value = selectedValue || '';\n      this.updateSelectedOption(this.value);\n\n      this.isDropdownOpen = false;\n      this.isOnBlurInput = true;\n      this.resetDropdownStyles();\n      this.removeOverlay();\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.moveHighlight(1);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.moveHighlight(-1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      if (this.hoveredIndex > -1) {\n        this.handleOnBlur();\n        this.onSelectedOption(this.hoveredIndex);\n      }\n    }\n  };\n\n  private moveHighlight(direction: number) {\n    const visibleOptions = this.options;\n    const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n    this.hoveredIndex = newIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.scrollHoveredOptionIntoView();\n  }\n\n  private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n    this.options.forEach((option, index) => {\n      (option as any)[attribute] = index === indexToUpdate;\n    });\n  }\n\n  private updateHoveredIndex() {\n    const visibleOptions = this.options;\n    const currentValue = this.value;\n    this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n  }\n\n  private scrollHoveredOptionIntoView() {\n    const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n    const hoveredOption = this.options[this.hoveredIndex];\n\n    if (container && hoveredOption) {\n      const optionRect = hoveredOption.getBoundingClientRect();\n      const containerRect = container.getBoundingClientRect();\n\n      if (optionRect.bottom > containerRect.bottom) {\n        container.scrollTop += optionRect.bottom - containerRect.bottom;\n      }\n\n      if (optionRect.top < containerRect.top) {\n        container.scrollTop -= containerRect.top - optionRect.top;\n      }\n    }\n  }\n\n  private handleResize = () => {\n    this.isMobile = window.innerWidth < 768;\n    if (this.isDropdownOpen) {\n      if (this.isMobile) {\n        this.showOverlay();\n      } else {\n        this.resetDropdownStyles();\n        this.removeOverlay();\n      }\n    }\n  };\n\n  handleOnBlur() {\n    if (this.isOnBlurInput === true) {\n      setTimeout(() => {\n        this.isDropdownOpen = false;\n        this.resetDropdownStyles();\n        this.removeOverlay();\n      }, 200);\n    }\n  }\n  getClasses() {\n    return {\n      'dropdown-input-search': true,\n      'dropdown-open': this.isDropdownOpen,\n      'disabled': this.disabled,\n      [this.status]: true,\n    };\n  }\n\n  getDropdownClasses() {\n    return {\n      'dropdown-search-list': true,\n      'visible': this.options.length && this.isDropdownOpen ? true : false,\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--dropdown-max-height': this.dropdownMaxHeight,\n    };\n  }\n\n  handleOnFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  getDropdownSearchListHeight() {\n    const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n    if (dropdownInputSearchElement) {\n      this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n    }\n  }\n\n  handleGoBack() {\n    this.resetDropdownStyles();\n    this.isMobile = false;\n  }\n\n  resetDropdownStyles() {\n    const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n    if (dropdown && dropdown.style.position === 'fixed') {\n      dropdown.style.position = 'relative';\n      dropdown.style.removeProperty('bottom');\n    }\n  }\n\n  setUp = () => {\n    this.handleResize()\n    this.adjustInputPosition();\n  }\n\n  render() {\n    const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n    return (\n      <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n        <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n          <div class={this.getClasses()}>\n          {this.isMobile && this.isDropdownOpen && (\n              <cura-button-transparent fontColor=\"dark\" onClick={() => this.handleGoBack()} iconName=\"arrowLeft\" size=\"medium\" iconOnly color=\"primary\"></cura-button-transparent>\n            )}\n            <cura-input-text\n              disabled={this.disabled}\n              label={this.label}\n              part=\"cura-input-field\"\n              mode={isMobileDropdown ? 'transparent' : 'default'}\n              required={this.required}\n              hideErrorIcon={this.status === 'error'}\n              iconName={this.iconName || 'search'}\n              value={this.value}\n              status={this.status}\n              onValueChange={e => this.onValueChange(e.target.value as string)}\n              onInput={e => this.handleInputChange(e)}\n              onFocus={() => this.handleOnFocus()}\n              onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n              onBlur={() => {\n                this.handleOnBlur();\n              }}\n              placeholder={this.placeholder}\n              size={this.size}\n              onKeyDown={this.handleKeyDown}\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n            <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}