@rededor/cura 1.0.0 → 1.2.0-alpha.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1ad98520.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-747aad85.js';
 
 const curaAlertCss = ":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:12px;gap:12px;flex-shrink:0;border:1px solid var(--color-base);border-radius:4px;background-color:var(--color-lighter)}:host .conteiner.floating{box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host .icon-left{margin-right:5px}:host .icon-right{margin-left:auto;cursor:pointer}:host .text{margin-top:3px}:host .actions{margin-top:5px}";
 const CuraAlertStyle0 = curaAlertCss;
@@ -49,7 +49,7 @@ const CuraAlert = class {
         return this.icon ? this.icon : iconMapping[this.type];
     }
     render() {
-        return (h(Host, { key: 'b7b63129f2d0c1d2f8b451a7f795befc9e085238' }, h("div", { key: 'b8450a11d65f0bbb3c9f688fccbb38efc7bf223c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '9a5dc4295f7c40362a86f77fe805127590812f15', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6bbe4799d3f73df0cda2e94da2d71cdc1bfc855a', class: "content" }, h("cura-label", { key: '8b761ec2804bb5633893af8ed91f5de268bbf029', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '4e7e7726758c26f1f397e8efc84d5eba1c88b428', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f589c6fb9016b43b3557492a3ef1b4ede4a807a6' })), h("div", { key: 'b212e9255855b96d5c069dd7544675386f00b372', class: "actions" }, h("slot", { key: '174dfcc7dfc4ff3e29185843e010dddae75463f5', name: "actions" }))), this.closeable ?
+        return (h(Host, { key: 'c5398d59da323dee68eed1cb7c27841df0e12d14' }, h("div", { key: 'd9bb0ab7a2106e710a113513e6eeb1297b9bd205', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '54665c81a59cbca3686abc6f5e388da32e2211ed', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '466f9f4aed5096658de1e19521cefe2915b095af', class: "content" }, h("cura-label", { key: '6b3d9cd0352b5d5254305baa5a71a1b1782f637f', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '5dbad5e65d88b59a81b7df97154071a607d73900', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'cb75d38c35d34a7bee4e187c640a1269bad192b0' })), h("div", { key: 'a6930bb463601a2ba429b23fad61847e8dee01f3', class: "actions" }, h("slot", { key: '7f4fc8b08a870f578d0b241df00650ebf3db83e0', name: "actions" }))), this.closeable ?
             (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
             : '')));
     }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-1ad98520.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-747aad85.js';
 
 const avatarSizes = {
     '80': { border: 2.5 },
@@ -50,7 +50,7 @@ const CuraAvatar = class {
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: 'fc8fbe9cdcab86398c83a55d006badb870ee959a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '6a107805cd770b98e74f7b0475c9896f59e51832', class: this.getClasses(), style: this.styles }, h("img", { key: '4bd7991bd32b0aa6f87d0725303960b0b4c3b0b9', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        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() }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/cura-badge-distance.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1ad98520.js';
+import { r as registerInstance, h, H as Host } from './index-747aad85.js';
 
 const curaBadgeDistanceCss = ":host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:calc(var(--base-spacing) * 8px);height:calc(var(--base-spacing) * 8px);border-radius:calc(var(--base-spacing) * 1px);background:var(--neutral-pale)}";
 const CuraBadgeDistanceStyle0 = curaBadgeDistanceCss;

package/dist/esm/cura-badge-number.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, H as Host } from './index-747aad85.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 CuraBadgeNumberStyle0 = curaBadgeNumberCss;
+
+const CuraBadgeNumber = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.styles = {};
+        this.theme = window.CuraAPI.theme;
+        this.number = undefined;
+        this.color = undefined;
+    }
+    connectedCallback() {
+        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)))));
+    }
+};
+CuraBadgeNumber.style = CuraBadgeNumberStyle0;
+
+export { CuraBadgeNumber as cura_badge_number };
+
+//# sourceMappingURL=cura-badge-number.entry.js.map

package/dist/esm/cura-badge-number.entry.js.map

@@ -0,0 +1 @@
+{"file":"cura-badge-number.entry.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}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1ad98520.js';
+import { r as registerInstance, h, H as Host } from './index-747aad85.js';
 import { l as labelSizes } from './cura-button.definitions-617d3bad.js';
 
 const curaButtonOutlineCss = ":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:transparent;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-dark-neutral-purewhite);border-radius:var(--border-radius)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{background-color:var(--color-lighter-color-darker)}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{background-color:var(--color-light-color-darker)}: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 .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative}: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 cura-label,:host a cura-label{flex:1;text-align:var(--text-align, \"left\")}: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.disabled,:host a.disabled{cursor:not-allowed}:host button.disabled::before,:host a.disabled::before{border-color:var(--neutral-dark)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px)}:host button.icon-only cura-label,:host a.icon-only cura-label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 3px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 2px)}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
@@ -99,7 +99,7 @@ const CuraButtonOutline = class {
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: '69e82dd1a26ea932f27f11ad5da295810ed3db1e' }, 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: '118%', 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: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        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 })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/esm/cura-button-outline.entry.js.map

@@ -1 +1 @@
-{"file":"cura-button-outline.entry.js","mappings":"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","names":[],"sources":["src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\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-dark-neutral-purewhite);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):not(.isLoading):hover {\n       background-color: var(--color-lighter-color-darker);\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active {\n       background-color: var(--color-light-color-darker);\n      }\n\n    };\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n\n\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n     &::before {\n      border-color: var(--neutral-dark);\n     }\n    };\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-outline',\n  styleUrl: 'cura-button-outline.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButtonOutline {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n  * Button size: small | medium | large (default)\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * Loading state. Boolean.\n  */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n  * Name of the icon to be used from iconset.\n  */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n  * Custom iconset if needed.\n  */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n  * Set button to FAB/icon only.\n  */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n  * Property href switch button to link.\n  */\n  @Prop({ reflect: true }) href: string;\n  /**\n  * Set target if link.\n  */\n  @Prop({ reflect: true }) target = \"_self\";\n  /**\n  * Color base from color scheme. Default: primary.\n  */\n  @Prop() color = 'primary';\n  /**\n  * Set the font background to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() fontColor: 'dark' | 'light' = 'dark';\n  /**\n  * Set text aligment for the button label.\n  * Vales: left (default) | center | right.\n  */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() styles = {};\n\n  @State() hovered = false;\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\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.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n    return classes;\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-dark-neutral-purewhite', thema: `${this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}` },\n      { name: '--color-lighter-color-darker', thema: `${this.background === 'light' ? `${this.color}-lighter` : `${this.color}-darker`}` },\n      { name: '--color-light-color-darker', thema: `${this.background === 'light' ? `${this.color}-light` : `${this.color}-lighter`}` },\n      { name: '--neutral-dark', thema: 'neutral-dark' },\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  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\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  @Watch('fontColor')\n  @Watch('color')\n  getSymbolColor() {\n    if (this.disabled) return 'neutral-dark';\n    return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button-outline.entry.js","mappings":"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","names":[],"sources":["src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\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-dark-neutral-purewhite);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):not(.isLoading):hover {\n       background-color: var(--color-lighter-color-darker);\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active {\n       background-color: var(--color-light-color-darker);\n      }\n\n    };\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n\n\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n     &::before {\n      border-color: var(--neutral-dark);\n     }\n    };\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-outline',\n  styleUrl: 'cura-button-outline.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButtonOutline {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n  * Button size: small | medium | large (default)\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * Loading state. Boolean.\n  */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n  * Name of the icon to be used from iconset.\n  */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n  * Custom iconset if needed.\n  */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n  * Set button to FAB/icon only.\n  */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n  * Property href switch button to link.\n  */\n  @Prop({ reflect: true }) href: string;\n  /**\n  * Set target if link.\n  */\n  @Prop({ reflect: true }) target = \"_self\";\n  /**\n  * Color base from color scheme. Default: primary.\n  */\n  @Prop() color = 'primary';\n  /**\n  * Set the font background to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() fontColor: 'dark' | 'light' = 'dark';\n  /**\n  * Set text aligment for the button label.\n  * Vales: left (default) | center | right.\n  */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() styles = {};\n\n  @State() hovered = false;\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\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.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n    return classes;\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-dark-neutral-purewhite', thema: `${this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}` },\n      { name: '--color-lighter-color-darker', thema: `${this.background === 'light' ? `${this.color}-lighter` : `${this.color}-darker`}` },\n      { name: '--color-light-color-darker', thema: `${this.background === 'light' ? `${this.color}-light` : `${this.color}-lighter`}` },\n      { name: '--neutral-dark', thema: 'neutral-dark' },\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  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\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  @Watch('fontColor')\n  @Watch('color')\n  getSymbolColor() {\n    if (this.disabled) return 'neutral-dark';\n    return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='105%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='105%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -1,51 +1,85 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-1ad98520.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-747aad85.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(--primary-base)}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background-color:var(--color-lighter);border-color:var(--color-base)}:host button:focus,:host a:focus{border-color:var(--info-base) !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:5px}: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-base);border-color:var(--color-darker)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);border-color:var(--neutral-medium-primary-base)}";
+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:12px;padding:12px 16px}: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 CuraButtonSelectStyle0 = curaButtonSelectCss;
 
-const CuraButtonOutline = class {
+const CuraButtonSelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.onclick = createEvent(this, "onclick", 7);
         this.theme = window.CuraAPI.theme;
-        this.size = 'medium';
-        this.disabled = false;
         this.selected = false;
-        this.iconPosition = 'right';
-        this.color = 'accent';
-        this.background = 'light';
-        this.fontcolor = 'dark';
+        this.iconName = undefined;
+        this.size = undefined;
+        this.counter = undefined;
+        this.disabled = undefined;
+        this.background = undefined;
+        this.color = undefined;
         this.hovered = false;
         this.styles = {};
     }
     setColors() {
         const colors = [
-            { name: '--color-base', theme: `${this.color}-base` },
-            { name: '--color-darker', theme: `${this.color}-darker` },
-            { name: '--color-lighter', theme: `${this.color}-lighter` },
-            { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },
-            { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },
-            { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },
+            { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },
+            { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },
+            { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },
+            { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },
+            { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },
+            { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },
+            { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },
+            { name: '--color-border-disable-unselect', thema: 'neutral-dark' },
+            { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },
+            { name: '--color-counter', thema: !this.disabled && 'primary-lighter' }
         ];
-        colors.forEach(color => {
-            this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) });
-        });
+        colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));
+        this.styles = Object.assign({}, this.styles);
     }
-    setStyles() {
-        this.weights = this.theme.fonts.getWeights();
-        this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
-        this.styles['--font-size'] = this.theme.fonts.getSize();
-        this.styles['--font-family'] = this.theme.fonts.getFamily();
-        this.styles['--font-weight-medium'] = this.weights.medium;
-        this.styles['--neutral-purewhite'] = this.theme.colors.getColor("neutral-purewhite");
-        this.styles['--neutral-black'] = this.theme.colors.getColor("neutral-black");
-        this.styles['--primary-base'] = this.theme.colors.getColor("primary-base");
-        this.styles['--info-base'] = this.theme.colors.getColor("info-base");
+    getClasses() {
+        const classes = {};
+        classes[`${this.size.toLowerCase()}`] = true;
+        classes['icon'] = true;
+        classes['disabled'] = this.disabled;
+        classes['selected'] = this.selected;
+        return classes;
     }
     connectedCallback() {
-        this.setStyles();
         this.setColors();
     }
+    getLabelFontColor() {
+        if (this.disabled)
+            return 'neutral-dark';
+        if (this.background === 'dark') {
+            return this.selected ? 'neutral-black' : 'neutral-white';
+        }
+        if (this.background === 'light') {
+            return this.selected ? 'neutral-white' : 'neutral-black';
+        }
+    }
+    getColorCounter() {
+        if (this.background === 'dark' && this.disabled) {
+            return !this.selected ? 'neutral-black' : 'neutral-dark';
+        }
+        if (this.background === 'light' && this.disabled) {
+            return 'neutral-pale';
+        }
+        return `${this.color}-lighter`;
+    }
+    getColorBagdeNumber() {
+        if (this.background === 'dark' && this.disabled) {
+            return this.selected ? 'neutral-black' : 'neutral-dark';
+        }
+        if (this.background === 'light' && this.disabled) {
+            return 'neutral-medium';
+        }
+        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() });
+    }
+    getCounter() {
+        return (h("cura-badge-number", { color: this.getColorCounter() }, h("cura-label", { color: this.getColorBagdeNumber() }, this.counter)));
+    }
     handleMouseEnter() {
         if (this.disabled)
             return;
@@ -54,46 +88,23 @@ const CuraButtonOutline = class {
     handleMouseLeave() {
         this.hovered = false;
     }
-    assignColor() {
-        if (!this.selected)
-            return 'primary-base';
-        const fontcolor = this.disabled
-            ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')
-            : this.selected && this.fontcolor === "dark" ? 'neutral-black' : "neutral-purewhite";
-        return fontcolor;
-    }
-    getIcon() {
-        if (!this.selected)
-            return;
-        const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
-        const iconName = this.hovered ? 'closeCircle' : 'checkCircle';
-        return h("cura-icon", { class: "button-icon", name: iconName, size: iconSize, color: this.assignColor() });
-    }
     handleClick(e) {
         if (this.disabled)
             e.preventDefault();
         this.selected = !this.selected;
         this.onclick.emit({ selected: this.selected });
     }
-    getClasses() {
-        const classes = {};
-        classes[`${this.size.toLowerCase()}`] = true;
-        classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
-        classes['disabled'] = this.disabled;
-        classes['selected'] = this.selected;
-        return classes;
-    }
     render() {
-        return (h(Host, { key: 'bbd95db4048d0bb3d4c17927da18136402bf91dd' }, h("button", { key: 'ae27bbadadf7597d4e6aaa406cbeee3dc47921cd', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '6cdcdb3c908673c3babad6fd35cedc38ff358b61', class: "button-container" }, this.getIcon(), h("cura-label", { key: 'c058fedf71ac3c33a5711fba7be80dacd6ee8467', class: "label", lineHeight: '0%', color: this.assignColor() }, h("slot", { key: '5976c1f58c3d5bba77cf6cde7acc31fb49fcd25d' }))))));
+        return (h(Host, { key: '5b612b060b0a7b40ede004322995f0e410da8759' }, h("button", { key: '616ae769e76d647a3806daf33376ca88eb75da5d', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'ef0a6f7ed31c7c2b4eb0f74e3713c0cc99b79080', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '0366f6538cc0ccf76c072de862fe60d87fccb937', class: "label", lineHeight: "0%", color: this.getLabelFontColor(), weight: 'regular' }, h("slot", { key: '72a72cc3a128223e7f41212005caff8aefbf1454' })), this.counter ? this.getCounter() : null))));
     }
+    get host() { return getElement(this); }
     static get watchers() { return {
-        "background": ["setColors", "assignColor"],
-        "color": ["setColors"],
-        "fontcolor": ["setColors", "assignColor"]
+        "background": ["setColors"],
+        "color": ["setColors"]
     }; }
 };
-CuraButtonOutline.style = CuraButtonSelectStyle0;
+CuraButtonSelect.style = CuraButtonSelectStyle0;
 
-export { CuraButtonOutline as cura_button_select };
+export { CuraButtonSelect as cura_button_select };
 
 //# sourceMappingURL=cura-button-select.entry.js.map

package/dist/esm/cura-button-select.entry.js.map

@@ -1 +1 @@
-{"file":"cura-button-select.entry.js","mappings":"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","names":[],"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, a {\n    @include button-element() {\n      background-color: var(--neutral-purewhite);\n      box-sizing: border-box;\n      border: 2px solid var(--primary-base);\n\n      &:not(.disabled):hover {\n        background-color: var(--color-lighter);\n        border-color: var(--color-base);\n      }\n\n      &:focus {\n        border-color: var(--info-base) !important;\n      }\n    }\n\n    @include button-sizes();\n\n    @include button-label();\n\n    // Children Elements\n    @include button-container() {\n      gap: 5px;\n    }\n\n    @mixin button-icon() {\n      margin: 0;\n    }\n\n    // selected state\n    @include button-selected() {\n      background-color: var(--color-base);\n      border-color: var(--color-darker);\n\n    }\n\n    // Disabled state\n    @include button-disabled() {\n      background-color: var(--neutral-white-primary-darker);\n      border-color: var(--neutral-medium-primary-base);\n\n    }\n\n  }\n}\n// ver as cores do label button\n","import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\n\nexport class CuraButtonOutline {\n  /**\n  * Button size: small | medium (default) | large  = medium\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * selected state. Boolean.\n  */\n  @Prop({ reflect: true }) selected = false;\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'right';\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * fontcolor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() fontcolor: 'dark' | 'light' = 'dark';\n  /**\n  * hovered state. Boolean.\n  */\n  @State() hovered = false;\n\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  @Watch('fontcolor')\n  setColors() {\n    const colors = [\n      { name: '--color-base', theme: `${this.color}-base` },\n      { name: '--color-darker', theme: `${this.color}-darker` },\n      { name: '--color-lighter', theme: `${this.color}-lighter` },\n      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles = {\n        ...this.styles,\n        [color.name]: this.theme.colors.getColor(color.theme)\n      };\n    });\n  }\n\n  setStyles() {\n    this.weights = this.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n    this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n    this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n    this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n  }\n\n  connectedCallback() {\n    this.setStyles()\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('background')\n  @Watch('fontcolor')\n  assignColor() {\n    if (!this.selected) return 'primary-base'\n\n    const fontcolor =\n      this.disabled\n        ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n        : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n    return fontcolor\n  }\n\n  getIcon() {\n    if (!this.selected) return;\n\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n\n    return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={this.assignColor()}></cura-icon>;\n  }\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\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\n\n  render() {\n    return (\n      <Host>\n        <button 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          <div class=\"button-container\">\n            {this.getIcon()}\n            <cura-label class=\"label\" lineHeight='0%' color={this.assignColor()}><slot></slot></cura-label>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button-select.entry.js","mappings":"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","names":[],"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: 12px;\n      padding: 12px 16px;\n    }\n\n    @mixin button-icon() {\n      margin: 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\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\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\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.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\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\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\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    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\" 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}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-1ad98520.js';
+import { r as registerInstance, h, H as Host } from './index-747aad85.js';
 import { l as labelSizes } from './cura-button.definitions-617d3bad.js';
 
 const curaButtonTransparentCss = ":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:transparent;border:none}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}: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 .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative}: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 cura-label,:host a cura-label{flex:1;text-align:var(--text-align, \"left\")}: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.disabled,:host a.disabled{cursor:not-allowed}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px)}:host button.icon-only cura-label,:host a.icon-only cura-label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 3px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 2px)}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
@@ -88,7 +88,7 @@ const CuraButtonTransparent = class {
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: 'a149c7f0dd3a413c563f891c9298d66cde905f5e' }, 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: '118%', 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: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        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 })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/esm/cura-button-transparent.entry.js.map

@@ -1 +1 @@
-{"file":"cura-button-transparent.entry.js","mappings":"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","names":[],"sources":["src/components/buttons/cura-button-transparent/cura-button-transparent.scss?tag=cura-button-transparent&encapsulation=shadow","src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      border: none;\n    }\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled();\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n\n  }\n}\n","import { Component, Host, h, Prop, State, Watch, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-transparent',\n  styleUrl: 'cura-button-transparent.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButtonTransparent {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Disabled state. Boolean.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * Loading state. Boolean.\n   */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n   * Name of the icon to be used from iconset.\n   */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n   * Custom iconset if needed.\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n   * Icon position: left (default) | right.\n   */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n   * Set button to FAB/icon only.\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Property href switch button to link.\n   */\n  @Prop({ reflect: true }) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop({ reflect: true }) target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent.\n   */\n  @Prop({ reflect: true }) color = 'primary';\n\n  /**\n   * Set the font color to dark or light.\n   * Default: dark.\n   */\n  @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'dark';\n  /**\n   * Set text aligment for the button label.\n   * Vales: left (default) | center | right.\n   */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() hovered = false;\n\n  @State() styles = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\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.styles['--text-align'] = this.textAlign;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n    return classes;\n  }\n\n\n  getIcon() {\n    if (!this.iconName) return null;\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></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  @Watch('fontColor')\n  @Watch('color')\n  getSymbolColor() {\n    if (this.disabled) return 'neutral-dark';\n    if (this.hovered && !this.isLoading) return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`;\n    return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button-transparent.entry.js","mappings":"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","names":[],"sources":["src/components/buttons/cura-button-transparent/cura-button-transparent.scss?tag=cura-button-transparent&encapsulation=shadow","src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      border: none;\n    }\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled();\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n\n  }\n}\n","import { Component, Host, h, Prop, State, Watch, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-transparent',\n  styleUrl: 'cura-button-transparent.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButtonTransparent {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Disabled state. Boolean.\n   */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n   * Loading state. Boolean.\n   */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n   * Name of the icon to be used from iconset.\n   */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n   * Custom iconset if needed.\n   */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n   * Icon position: left (default) | right.\n   */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n   * Set button to FAB/icon only.\n   */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n   * Property href switch button to link.\n   */\n  @Prop({ reflect: true }) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop({ reflect: true }) target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent.\n   */\n  @Prop({ reflect: true }) color = 'primary';\n\n  /**\n   * Set the font color to dark or light.\n   * Default: dark.\n   */\n  @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'dark';\n  /**\n   * Set text aligment for the button label.\n   * Vales: left (default) | center | right.\n   */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() hovered = false;\n\n  @State() styles = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\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.styles['--text-align'] = this.textAlign;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n    return classes;\n  }\n\n\n  getIcon() {\n    if (!this.iconName) return null;\n    const iconSize = this.size === 'large' ? 20 : 16;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></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  @Watch('fontColor')\n  @Watch('color')\n  getSymbolColor() {\n    if (this.disabled) return 'neutral-dark';\n    if (this.hovered && !this.isLoading) return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`;\n    return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='105%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='105%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}