@rededor/cura 1.2.0 → 1.3.0

package/dist/components/cura-alert.js.map

@@ -1 +1 @@
-{"file":"cura-alert.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,wbAAwb,CAAC;AAC9c,wBAAe,YAAY;;MCKdA,WAAS;;;;;;QAiDpB,gBAAW,GAAG;YACZ,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;SACpB,CAAC;oBAjDuD,MAAM;wBAC3B,KAAK;;yBAEJ,IAAI;;sBAGhC,EAAE;;IAKX,SAAS;QACP,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,UAAU,EAAE;YAC1D,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,EAAE;YACnD,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,QAAQ,EAAE;YACtD,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,EAAE;SACrD,CAAC;QAEF,MAAM,CAAC,OAAO,CAAC,KAAK;YAClB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SAC7E,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,qBAAO,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,OAAO,OAAO,CAAC;KAChB;IAED,WAAW;QACT,MAAM,WAAW,GAAG;YAClB,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,aAAa;YACtB,KAAK,EAAE,eAAe;SACvB,CAAC;QACF,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACvD;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,kEAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,OAAO,GAAc,EACzG,4DAAK,KAAK,EAAC,SAAS,IAClB,mEAAY,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,EAAC,MAAM,EAAC,MAAM,IACxE,IAAI,CAAC,KAAK,CACA,EACb,uEAAgB,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,SAAS,IAC3G,8DAAa,CACE,EACjB,4DAAK,KAAK,EAAC,SAAS,IAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,EACJ,IAAI,CAAC,SAAS;aACf,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,GAAc;cAC9G,EAAE,CACA,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAlert"],"sources":["src/components/cura-alert/cura-alert.scss?tag=cura-alert&encapsulation=shadow","src/components/cura-alert/cura-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    padding: 12px;\n    gap: 12px;\n    flex-shrink: 0;\n    border: 1px solid var(--color-base);\n    border-radius: 4px;\n    background-color: var(--color-lighter);\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n\n  .icon-left {\n    margin-right: 5px;\n  }\n\n  .icon-right {\n    margin-left: auto;\n    cursor: pointer;\n  }\n\n  .text {\n    margin-top: 3px;\n  }\n\n  .actions {\n    margin-top: 5px;\n  }\n}\n","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n  @State()\n  styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            <cura-label class=\"title\" size=\"small\" color=\"neutral-darker\" weight=\"bold\">\n              {this.label}\n            </cura-label>\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-alert.js","mappings":"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","names":["CuraAlert"],"sources":["src/components/cura-alert/cura-alert.scss?tag=cura-alert&encapsulation=shadow","src/components/cura-alert/cura-alert.tsx"],"sourcesContent":["@import \"../../scss/mixins/spacing.scss\";\n\n:host {\n  display: block;\n  box-sizing: border-box;\n\n  .conteiner {\n    display: flex;\n    box-sizing: border-box;\n    padding: #{$spacing-xxxs};\n    gap: #{$spacing-xxxs};\n    flex-shrink: 0;\n    border: 1px solid var(--color-base);\n    border-radius: 4px;\n    background-color: var(--color-lighter);\n    &.floating {\n      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n    }\n  }\n\n  .content {\n    flex: 1;\n    flex-direction: column;\n    display: flex;\n    gap: #{$spacing-tiny};\n  }\n\n  .icon-right {\n    cursor: pointer;\n  }\n\n}\n","import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n\n  @State() styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            { this.label ? (\n            <cura-label class=\"title\" size=\"small\" color=\"neutral-darker\" weight=\"bold\">\n              {this.label}\n            </cura-label>\n            ) : ''}\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-avatar.js

@@ -52,7 +52,7 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: '2760534555a0483e7e30c5f3009ec0cf68d0973b', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '3daf6dd066983dc63525c38b7da498147c0bf387', class: this.getClasses(), style: this.styles }, h("img", { key: 'a5f4de7983722fc3f750404fa985c312590b5e98', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (h(Host, { key: '01de93bd7f04abfba6c189c944f71cc75528b187', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '8d34f270a8c70a46678f7ec16d7d210eecc6b43e', class: this.getClasses(), style: this.styles }, h("img", { key: 'c0997bfcdb3468d5017ca5902c76e8ec0e8ea6f9', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-badge-distance.js

@@ -26,7 +26,7 @@ const CuraDistance = /*@__PURE__*/ proxyCustomElement(class CuraDistance extends
         this.formatDistance();
     }
     render() {
-        return (h(Host, { key: 'afc9605f43777e15c026ee00b0ca3fc18b648489' }, h("div", { key: '5e970213baad148605f9fcd0e0f0307f32a99375', class: "container", style: this.styles }, h("cura-label", { key: 'd56a580850734dedf9d7e72c0dce45d05be26119', size: 'xsmall', weight: 'bold', color: 'neutral-black' }, this.displayDistance, this.isThousandRounded ? 'K' : ''), h("cura-label", { key: 'e0ec3d1a6919b3931d807f75054b5d861e6015b3', size: 'xsmall', weight: 'bold', color: 'neutral-dark' }, this.label))));
+        return (h(Host, { key: '7027189b17f2ad1759f9d43bc5dbc9cbb1fe47cc' }, h("div", { key: 'bc57ac9c32c0651469d4bd6ee75d0f97408fde34', class: "container", style: this.styles }, h("cura-label", { key: '913db081273caf2e7d46d92b22e1988cf28ddeb3', size: 'xsmall', weight: 'bold', color: 'neutral-black' }, this.displayDistance, this.isThousandRounded ? 'K' : ''), h("cura-label", { key: '4c327bd9d55466bb2d9c614d9aa0420e42da23ce', size: 'xsmall', weight: 'bold', color: 'neutral-dark' }, this.label))));
     }
     setCssProperties() {
         this.styles = {

package/dist/components/cura-badge-number2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './cura-label2.js';
 
-const curaBadgeNumberCss = ":host .container{display:flex;width:20px;height:20px;min-width:16px;padding:4px;justify-content:center;align-items:center;gap:4px;border-radius:500px;background:var(--background-color)}";
+const curaBadgeNumberCss = ":host .container{display:flex;width:20px;height:20px;min-width:16px;justify-content:center;align-items:center;border-radius:500px;background:var(--background-color)}";
 const CuraBadgeNumberStyle0 = curaBadgeNumberCss;
 
 const CuraBadgeNumber = /*@__PURE__*/ proxyCustomElement(class CuraBadgeNumber extends HTMLElement {
@@ -18,7 +18,7 @@ const CuraBadgeNumber = /*@__PURE__*/ proxyCustomElement(class CuraBadgeNumber e
         this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': this.theme.colors.getColor(this.color) });
     }
     render() {
-        return (h(Host, { key: 'ba26c547e809b1a03edb15ddc562b760ddb002d3' }, h("div", { key: '46dac81c75727004adf3ace19afe8be87950bf4a', class: "container", style: this.styles }, h("cura-label", { key: 'a914d1a332c709c1e61269c2d0b7a82cf3a6e7fa' }, h("slot", { key: '17b996446d288b77126ea2c0ca23b0c77018dbe5' }, this.number)))));
+        return (h(Host, { key: 'a20934b4bec43ab7024e1bc4ad7537ff0d54b937' }, h("div", { key: 'a3fc8332932a117db4be61092050c3df3e4142bc', class: "container", style: this.styles }, h("cura-label", { key: 'ff53c0645348be0d392728778e3486c353243af5' }, h("slot", { key: 'f0774cc8f8ad07287b68bb3c59bf22cd4fc69755' }, this.number)))));
     }
     static get style() { return CuraBadgeNumberStyle0; }
 }, [1, "cura-badge-number", {

package/dist/components/cura-badge-number2.js.map

@@ -1 +1 @@
-{"file":"cura-badge-number2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,2LAA2L,CAAC;AACvN,8BAAe,kBAAkB;;MCMpB,eAAe;;;;;QAI1B,WAAM,GAAG,EAAE,CAAC;QAEZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;;IAE7B,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAC7D,CAAA;KACF;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvC,qEACE,+DAAO,IAAI,CAAC,MAAM,CAAQ,CACf,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-number/cura-badge-number.scss?tag=cura-badge-number&encapsulation=shadow","src/components/badges/cura-badge-number/cura-badge-number.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n  .container{\n    display: flex;\n    width: 20px;\n    height: 20px;\n    min-width: 16px;\n    padding: 4px;\n    justify-content: center;\n    align-items: center;\n    gap: 4px;\n    border-radius:  500px;\n    background: var(--background-color);\n  }\n}\n","import { Component, Host, Prop,  h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-number',\n  styleUrl: 'cura-badge-number.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  @Prop({ reflect: true }) number: number | null\n  @Prop({ reflect: true}) color: string \n  styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(this.color),\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label>\n            <slot>{this.number}</slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-badge-number2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,uKAAuK,CAAC;AACnM,8BAAe,kBAAkB;;MCMpB,eAAe;;;;;QAI1B,WAAM,GAAG,EAAE,CAAC;QAEZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;;IAE7B,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAC7D,CAAA;KACF;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvC,qEACE,+DAAO,IAAI,CAAC,MAAM,CAAQ,CACf,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-number/cura-badge-number.scss?tag=cura-badge-number&encapsulation=shadow","src/components/badges/cura-badge-number/cura-badge-number.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n\n:host {\n  .container {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    min-width: 16px;\n    justify-content: center;\n    align-items: center;\n    border-radius: 500px;\n    background: var(--background-color);\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-number',\n  styleUrl: 'cura-badge-number.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  @Prop({ reflect: true }) number: number | null\n  @Prop({ reflect: true }) color: string\n  styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(this.color),\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label>\n            <slot>{this.number}</slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-button-outline.js

@@ -98,7 +98,7 @@ const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOut
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: '3ce0297b4cfd44f8baffbcd78de14a02d15ba307' }, this.href ? (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() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (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 }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (h(Host, { key: '5adde27bc83165040d4279e4835646e13b08a412' }, this.href ? (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() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (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 }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/components/cura-button-select.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './cura-badge-number2.js';
 import { d as defineCustomElement$3 } from './cura-icon2.js';
 import { d as defineCustomElement$2 } from './cura-label2.js';
 
-const curaButtonSelectCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:var(--neutral-purewhite);box-sizing:border-box;border:2px solid var(--color-border)}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover-pressed)}:host button:focus,:host a:focus{border-color:var(--color-border) !important}:host button.large,:host a.large{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 10px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 2px);min-height:calc(var(--base-spacing) * 8px)}:host button cura-label,:host a cura-label{flex:1;text-align:var(--text-align, \"left\")}:host button .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative;gap:10px}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button.justify .button-container,:host a.justify .button-container{width:100%}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-select);border-color:var(--color-select)}:host button.selected:not(.disabled):hover,:host a.selected:not(.disabled):hover{background-color:var(--color-border-hover-pressed);border-color:var(--color-border-hover-pressed)}:host button.selected:focus,:host a.selected:focus{border-color:var(--color-select-focus) !important}:host button.selected.disabled,:host a.selected.disabled{background-color:var(--color-disable-select);border-color:var(--color-disable-select)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);border-color:var(--color-border-disable-unselect)}";
+const curaButtonSelectCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:var(--neutral-purewhite);box-sizing:border-box;border:none}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button::before,:host a::before{content:\"\";width:100%;height:100%;position:absolute;left:0px;top:0px;box-sizing:border-box;border:2px solid var(--color-border);border-radius:var(--border-radius)}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover-pressed)}:host button:focus,:host a:focus{border-color:var(--color-border) !important}:host button.large,:host a.large{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 10px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 2px);min-height:calc(var(--base-spacing) * 8px)}:host button cura-label,:host a cura-label{flex:1;text-align:var(--text-align, \"left\")}:host button .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative;flex-direction:row !important}:host button .button-container .badge-number,:host a .button-container .badge-number{margin-left:10px}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button.justify .button-container,:host a.justify .button-container{width:100%}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host button.small.icon-left cura-icon,:host a.medium.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2px)}:host button.medium.icon-right cura-icon,:host button.small.icon-right cura-icon,:host a.medium.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2px)}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-select);border-color:var(--color-select)}:host button.selected:not(.disabled):hover,:host a.selected:not(.disabled):hover{background-color:var(--color-border-hover-pressed);border-color:var(--color-border-hover-pressed)}:host button.selected:focus,:host a.selected:focus{border-color:var(--color-select-focus) !important}:host button.selected.disabled,:host a.selected.disabled{background-color:var(--color-disable-select);border-color:var(--color-disable-select)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);border-color:var(--color-border-disable-unselect)}";
 const CuraButtonSelectStyle0 = curaButtonSelectCss;
 
 const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSelect extends HTMLElement {
@@ -16,11 +16,12 @@ const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSele
         this.theme = window.CuraAPI.theme;
         this.selected = false;
         this.iconName = undefined;
-        this.size = undefined;
+        this.size = 'medium';
         this.counter = undefined;
         this.disabled = undefined;
-        this.background = undefined;
-        this.color = undefined;
+        this.background = 'light';
+        this.color = 'primary';
+        this.iconPosition = undefined;
         this.hovered = false;
         this.styles = {};
     }
@@ -44,7 +45,7 @@ const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSele
         var _a;
         const classes = {};
         classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
-        classes['icon'] = true;
+        classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
         classes['disabled'] = this.disabled;
         classes['selected'] = this.selected;
         return classes;
@@ -86,11 +87,18 @@ const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSele
         return `${this.color}-darker`;
     }
     getIcon() {
-        const iconSize = this.size === 'large' ? 24 : this.size === 'medium' ? 20 : 16;
-        return h("cura-icon", { class: "button-icon", name: this.iconName, size: iconSize, color: this.getLabelFontColor() });
+        const iconSize = this.size === 'large' ? 20 : 16;
+        if (this.iconPosition === 'right') {
+            return;
+        }
+        return h("cura-icon", { name: this.iconName, size: iconSize, color: this.getLabelFontColor() });
     }
     getCounter() {
-        return (h("cura-badge-number", { color: this.getColorCounter() }, h("cura-label", { color: this.getColorBagdeNumber() }, this.counter)));
+        return (h("cura-badge-number", { color: this.getColorCounter(), class: "badge-number" }, h("cura-label", { color: this.getColorBagdeNumber(), size: "small" }, this.counter)));
+    }
+    getCheckIconRight() {
+        const iconSize = this.size === 'large' ? 20 : 16;
+        return h("cura-icon", { name: "check", size: iconSize, color: this.getLabelFontColor() });
     }
     handleMouseEnter() {
         if (this.disabled)
@@ -108,7 +116,7 @@ const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSele
     }
     render() {
         const labelSize = labelSizes[this.size] || labelSizes['default'];
-        return (h(Host, { key: '368f94693c0ce8ec2d95a9eb258fd6e411ade7a5' }, h("button", { key: 'ddc421e819342b29772d763b0a62f98a4aca37c0', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '70bb7a295f1fb8984aabc432edf6e8e3f464daf1', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '281bbb73ff59a231f2daef9bac9a49b46f3c55df', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, h("slot", { key: 'ef955647ac927fea6bb1dc686720031260fc5212' })), this.counter ? this.getCounter() : null))));
+        return (h(Host, { key: '8b766a3e23c2af13a47d113884047d19717702f2' }, h("button", { key: '90b57f260baa61de7c73e09965e190cd13eb62e1', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'f318438fa59f43846ce5043e4ee290faf3cf05d4', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '2d069740c62b32dd3aa0fd74bdafb951d8deb73b', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, h("slot", { key: 'e71e072d1dd91bbbafa939181cc22ba7b7c6189e' })), this.counter ? this.getCounter() : null, this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -124,6 +132,7 @@ const CuraButtonSelect$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonSele
         "disabled": [516],
         "background": [1],
         "color": [1],
+        "iconPosition": [513, "icon-position"],
         "hovered": [32],
         "styles": [32]
     }, undefined, {

package/dist/components/cura-button-select.js.map

@@ -1 +1 @@
-{"file":"cura-button-select.js","mappings":"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","names":["CuraButtonSelect"],"sources":["src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/buttons.scss';\n\n:host {\n  @include button-host();\n\n  button,\n  a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      box-sizing: border-box;\n      border: 2px solid var(--color-border);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-background-hover);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-border) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label();\n\n    // Children Elements\n    @include button-container() {\n      gap: 10px;\n    }\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-select);\n      border-color: var(--color-select);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-border-hover-pressed);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-select-focus) !important;\n      }\n\n      &.disabled {\n        background-color: var(--color-disable-select);\n        border-color: var(--color-disable-select);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      border-color: var(--color-border-disable-unselect);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\nexport class CuraButtonSelect {\n  @Element() host: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) selected = false;\n  @Prop({ reflect: true, mutable: true }) iconName: string;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large';\n  @Prop({ reflect: true, mutable: true }) counter: string | number | null;\n  @Prop({ reflect: true }) disabled: boolean;\n  @Prop() background: 'dark' | 'light';\n  @Prop() color: string;\n\n  @State() hovered = false;\n  @State() styles = {};\n\n  @Event({ eventName: 'onclick' }) onclick: EventEmitter<{ selected: boolean }>;\n\n  theme = window.CuraAPI.theme;\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n      { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n      { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n      { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n      { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n      { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n      { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n      { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n      { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n      { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },\n    ];\n\n    colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n    this.styles = { ...this.styles };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes['icon'] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\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    this.setColors();\n  }\n\n  getLabelFontColor() {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.background === 'dark') {\n      return this.selected ? 'neutral-black' : 'neutral-white';\n    }\n    if (this.background === 'light') {\n      return this.selected ? 'neutral-white' : 'neutral-black';\n    }\n  }\n\n  getColorCounter() {\n    if (this.background === 'dark' && this.disabled) {\n      return !this.selected ? 'neutral-black' : 'neutral-dark';\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-pale';\n    }\n    return `${this.color}-lighter`;\n  }\n\n  getColorBagdeNumber() {\n    if (this.background === 'dark' && this.disabled) {\n      return this.selected ? 'neutral-black' : 'neutral-dark';\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-medium';\n    }\n\n    return `${this.color}-darker`;\n  }\n\n  getIcon() {\n    const iconSize = this.size === 'large' ? 24 : this.size === 'medium' ? 20 : 16;\n\n    return <cura-icon class=\"button-icon\" name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n  }\n\n  getCounter() {\n    return (\n      <cura-badge-number color={this.getColorCounter()}>\n        <cura-label color={this.getColorBagdeNumber()}>{this.counter}</cura-label>\n      </cura-badge-number>\n    );\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    return (\n      <Host>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={e => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}\n        >\n          <div class=\"button-container\">\n            {this.iconName ? this.getIcon() : null}\n            <cura-label class=\"label\" size={labelSize} lineHeight=\"0%\" color={this.getLabelFontColor()} weight=\"regular\">\n              <slot></slot>\n            </cura-label>\n            {this.counter ? this.getCounter() : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-button-select.js","mappings":"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","names":["CuraButtonSelect"],"sources":["src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","src/components/buttons/cura-button-select/cura-button-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/buttons.scss';\n\n:host {\n  @include button-host();\n\n  button,\n  a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      box-sizing: border-box;\n      border: none;\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: 2px solid var(--color-border);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):hover {\n        background-color: var(--color-background-hover);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-border) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label();\n\n    // Children Elements\n    @include button-container() {\n      flex-direction: row !important;\n\n      .badge-number {\n        margin-left: 10px;\n      }\n    }\n\n    @include button-icon();\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-select);\n      border-color: var(--color-select);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-border-hover-pressed);\n        border-color: var(--color-border-hover-pressed);\n      }\n\n      &:focus {\n        border-color: var(--color-select-focus) !important;\n      }\n\n      &.disabled {\n        background-color: var(--color-disable-select);\n        border-color: var(--color-disable-select);\n      }\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      border-color: var(--color-border-disable-unselect);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\nexport class CuraButtonSelect {\n  @Element() host: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) selected = false;\n  @Prop({ reflect: true, mutable: true }) iconName: string;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop({ reflect: true, mutable: true }) counter: string | number | null;\n  @Prop({ reflect: true }) disabled: boolean;\n  @Prop() background: 'dark' | 'light' = 'light';\n  @Prop() color: string = 'primary';\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right';\n\n  @State() hovered = false;\n  @State() styles = {};\n\n  @Event({ eventName: 'onclick' }) onclick: EventEmitter<{ selected: boolean }>;\n\n  theme = window.CuraAPI.theme;\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n      { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n      { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n      { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n      { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n      { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n      { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n      { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n      { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n      { name: '--color-counter', thema: !this.disabled && 'primary-lighter' },\n    ];\n\n    colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n    this.styles = { ...this.styles };\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\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    this.setColors();\n  }\n\n  getLabelFontColor() {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.background === 'dark') {\n      return this.selected ? 'neutral-black' : 'neutral-white';\n    }\n    if (this.background === 'light') {\n      return this.selected ? 'neutral-white' : 'neutral-black';\n    }\n  }\n\n  getColorCounter() {\n    if (this.background === 'dark' && this.disabled) {\n      return !this.selected ? 'neutral-black' : 'neutral-dark';\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-pale';\n    }\n    return `${this.color}-lighter`;\n  }\n\n  getColorBagdeNumber() {\n    if (this.background === 'dark' && this.disabled) {\n      return this.selected ? 'neutral-black' : 'neutral-dark';\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-medium';\n    }\n\n    return `${this.color}-darker`;\n  }\n\n  getIcon() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    if (this.iconPosition === 'right') {\n      return;\n    }\n\n    return <cura-icon name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n  }\n\n  getCounter() {\n    return (\n      <cura-badge-number color={this.getColorCounter()} class=\"badge-number\">\n        <cura-label color={this.getColorBagdeNumber()} size=\"small\">\n          {this.counter}\n        </cura-label>\n      </cura-badge-number>\n    );\n  }\n\n  getCheckIconRight() {\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name=\"check\" size={iconSize} color={this.getLabelFontColor()}></cura-icon>;\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    return (\n      <Host>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={e => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}\n        >\n          <div class=\"button-container\">\n            {this.iconName ? this.getIcon() : null}\n            <cura-label class=\"label\" size={labelSize} lineHeight=\"0%\" color={this.getLabelFontColor()} weight=\"regular\">\n              <slot></slot>\n            </cura-label>\n            {this.counter ? this.getCounter() : null}\n            {this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-button-transparent2.js

@@ -87,7 +87,7 @@ const CuraButtonTransparent = /*@__PURE__*/ proxyCustomElement(class CuraButtonT
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: 'd7bfd59d8a84d299a3d59dfd2d7b48ca6a9f56ee' }, this.href ? (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() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (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 }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (h(Host, { key: '60ab1e67798d35b9bb391ad491e4a9e6f3bc123f' }, this.href ? (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() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (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 }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/components/cura-button.js

@@ -99,7 +99,7 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: '69971f4a6e86d948b2eb7c3c6bbc0dd5da6826e5' }, this.href ? (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() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (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 }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (h(Host, { key: '2831f74cc53bbadcaf1648c759090204cf3c20ea' }, this.href ? (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() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (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 }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/components/cura-calendar2.js

@@ -3569,7 +3569,7 @@ var locale = {
 };
 const ptBR = locale;
 
-const curaCalendarCss = ":host{display:block;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);margin:0 auto}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);min-width:var(--min-width);border-radius:4px;overflow:hidden;background:#fff;font-family:var(--font-family)}:host .calendar.embedded{border:2px solid var(--neutral-light);padding:0px 12px 12px 12px}:host .calendar.floating{box-shadow:0 4px 8px var(--neutral-light)}:host .header{position:relative;padding:12px 0}:host .header::after{content:\"\";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:7px 10px 0px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:\"\";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--accent-base);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}:host .icon:active::before{transform:translate(-50%, -50%) scale(1)}:host .icon:active{transform:scale(1)}:host .collapsed-container{text-align:center;position:relative;display:flex;align-items:center;justify-content:center;padding-top:10px}:host .collapsed-container::before{content:\"\";position:absolute;bottom:0;top:0;left:2px;right:2px;border-top:2px dotted var(--neutral-light)}:host .date{display:flex;justify-content:center;align-items:center;height:auto;width:14.2857142857%;aspect-ratio:1;font-size:14px;cursor:pointer;position:relative;box-sizing:border-box;text-align:center;flex-shrink:0}:host .date.today{border:2px solid var(--primary-darker);border-radius:50%;color:var(--primary-darker)}:host .date.selected,:host .date.default-dates{color:var(--neutral-black) !important;background:var(--accent-base);border-radius:50%;border:none}:host .date.invalid{color:var(--neutral-dark) !important;cursor:not-allowed}:host .date.invalid:hover{background:none;box-shadow:none}:host .date.valid{color:var(--primary-darker);font-weight:var(--font-weight-bold)}:host .date.range.start{border-radius:50% 0 0 50%;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date.range.interval{border-radius:0;background-color:var(--accent-light);color:var(--neutral-black)}:host .date.range.interval.today{border:none}:host .date.range.end{border-radius:0 50% 50% 0;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date:hover{background:var(--accent-light);border-radius:50%;color:var(--neutral-black)}:host select,:host input{width:60px;font-size:16px;box-shadow:0 2px 2px var(--neutral-black);padding:5px;border-radius:4px;border:1px solid #ccc;background:#f7f7f7}.teste{width:100%}";
+const curaCalendarCss = ":host{display:block;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);margin:0 auto}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);border-radius:4px;overflow:hidden;background:#fff;font-family:var(--font-family)}:host .calendar.embedded{border:2px solid var(--neutral-light);padding:0px 12px 12px 12px}:host .calendar.floating{box-shadow:0 4px 8px var(--neutral-light)}:host .header{position:relative;padding:12px 0}:host .header::after{content:\"\";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:7px 10px 0px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:\"\";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--accent-base);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}:host .icon:active::before{transform:translate(-50%, -50%) scale(1)}:host .icon:active{transform:scale(1)}:host .collapsed-container{text-align:center;position:relative;display:flex;align-items:center;justify-content:center;padding-top:10px}:host .collapsed-container::before{content:\"\";position:absolute;bottom:0;top:0;left:2px;right:2px;border-top:2px dotted var(--neutral-light)}:host .date{display:flex;justify-content:center;align-items:center;height:auto;width:14.2857142857%;aspect-ratio:1;font-size:14px;cursor:pointer;position:relative;box-sizing:border-box;text-align:center;flex-shrink:0}:host .date.today{border:2px solid var(--primary-darker);border-radius:50%;color:var(--primary-darker)}:host .date.selected,:host .date.default-dates{color:var(--neutral-black) !important;background:var(--accent-base);border-radius:50%;border:none}:host .date.invalid{color:var(--neutral-dark) !important;cursor:not-allowed}:host .date.invalid:hover{background:none;box-shadow:none}:host .date.valid{color:var(--primary-darker);font-weight:var(--font-weight-bold)}:host .date.range.start{border-radius:50% 0 0 50%;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date.range.interval{border-radius:0;background-color:var(--accent-light);color:var(--neutral-black)}:host .date.range.interval.today{border:none}:host .date.range.end{border-radius:0 50% 50% 0;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date:hover{background:var(--accent-light);border-radius:50%;color:var(--neutral-black)}:host select,:host input{width:60px;font-size:16px;box-shadow:0 2px 2px var(--neutral-black);padding:5px;border-radius:4px;border:1px solid #ccc;background:#f7f7f7}.teste{width:100%}";
 const CuraCalendarStyle0 = curaCalendarCss;
 
 const CuraCalendar = /*@__PURE__*/ proxyCustomElement(class CuraCalendar extends HTMLElement {
@@ -4026,7 +4026,7 @@ const CuraCalendar = /*@__PURE__*/ proxyCustomElement(class CuraCalendar extends
     }
     render() {
         const { months } = this.fetchMonthNames();
-        return (h(Host, { key: 'fcea88a384ceebadccb6059ef59cea945f875a72', style: this.getHostCSSProperties() }, h("div", { key: '82c5271ba6b073439fb58471920f73b68b8f1320', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, h("header", { key: '3921fb57f3d526b9f33c59f998ad422806505bc1', class: "header" }, h("div", { key: '1f852f0f29ff927d3940c670f5b25206837cc331', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, 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' ? (h("div", { class: "select" }, h("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (h("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), 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) => (h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), 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') }))), h("span", { key: '5a151331c2c9872cf3b50bbaea7c9b92b1476297', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), h("div", { key: '7eeb57ed5dc104c953343697a205a922a1b2b912', class: "dates" }, !this.collapsed
+        return (h(Host, { key: '2167c17db3fcc20b3b9de3e8b4c071f78369d37e', style: this.getHostCSSProperties() }, h("div", { key: 'e09c187cd19bc53cd9b4c592001c8de8bc30bdd7', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, h("header", { key: 'c89688cd2b5e398364b3b0208eb01ae82aa7d808', class: "header" }, h("div", { key: 'a18b029a7446791c87303e959c3c7ecd3bdead47', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: '25532f4297827c6431fb9be4491894952cda1c8f', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (h("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), 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) => (h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: '52d65856b6797a8ad185fdeb0bd40abee24cc95e', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), h("span", { key: '83afcab7b30fc4bdf3e02810dc911000c71a6d68', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), h("div", { key: 'f5b55f62ced251c9a77138492e77aeb6feb3e117', class: "dates" }, !this.collapsed
             ? this.fetchDaysOfMonth().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
             : this.fetchDaysOfWeek().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (h("div", { class: "collapsed-container" }, h("cura-button-transparent", { onClick: () => this.showNotColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "plusCircle" }, "Veja mais datas"))) : (h("div", { class: "collapsed-container" }, h("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "minusCircle" }, "Veja menos datas")))) : null)));
     }