@rededor/cura 1.0.0-alpha.2 → 1.0.0-alpha.3

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

@@ -1 +1 @@
-{"file":"cura-button-outline.js","mappings":"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","names":["CuraButtonOutline"],"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      border: 2px solid var(--color-dark-neutral-purewhite);\n      box-sizing: border-box;\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     border-color: var(--neutral-dark);\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';\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: 'true' | 'false' = '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: accent.\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  @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    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 || this.isLoading) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\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  @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    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          >\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled === 'true' ? true : null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            tabIndex={0}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button-outline.js","mappings":"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","names":["CuraButtonOutline"],"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      border: 2px solid var(--color-dark-neutral-purewhite);\n      box-sizing: border-box;\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     border-color: var(--neutral-dark);\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';\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: accent.\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  @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    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 || this.isLoading) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\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  @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    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          >\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}></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            tabIndex={0}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -13,7 +13,7 @@ const CuraButtonOutline = /*@__PURE__*/ proxyCustomElement(class CuraButtonOutli
         this.onclick = createEvent(this, "onclick", 7);
         this.theme = window.CuraAPI.theme;
         this.size = 'medium';
-        this.disabled = 'false';
+        this.disabled = false;
         this.selected = false;
         this.iconPosition = 'right';
         this.color = 'accent';
@@ -88,7 +88,7 @@ const CuraButtonOutline = /*@__PURE__*/ proxyCustomElement(class CuraButtonOutli
         return classes;
     }
     render() {
-        return (h(Host, { key: '46ec847aae53f96f9c9cb9cba1472bb33df8fcdb' }, h("button", { key: '508303050695d9a1ff7d27174e511bcac814c153', class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'bd06094e5004bd11e8ba9d05387300c8d57d34e2', class: "button-container" }, this.getIcon(), h("cura-label", { key: 'b688ba052bdf3bcd39a61d553f49a0e47ac5ca54', class: "label", lineHeight: '0%', color: this.assignColor() }, h("slot", { key: '29f645c3866a9f24cbae12f5167a2645c0452153' }))))));
+        return (h(Host, { key: '11c526fa5a82a986513a2d2cf94e85fbdc0a83c5' }, h("button", { key: '539cb4766e18cf195541731bf95809784021fc21', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'f57e41656abb33d450e9876517e575c628c633c6', class: "button-container" }, this.getIcon(), h("cura-label", { key: '84ee6289e8c5e242cbdc2cdd8110be7102244176', class: "label", lineHeight: '0%', color: this.assignColor() }, h("slot", { key: '2f292f5308c69fc9efa66a43bac5941ab2adeaf9' }))))));
     }
     static get watchers() { return {
         "background": ["setColors", "assignColor"],
@@ -98,7 +98,7 @@ const CuraButtonOutline = /*@__PURE__*/ proxyCustomElement(class CuraButtonOutli
     static get style() { return CuraButtonSelectStyle0; }
 }, [1, "cura-button-select", {
         "size": [513],
-        "disabled": [513],
+        "disabled": [516],
         "selected": [516],
         "iconPosition": [513, "icon-position"],
         "color": [1],

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

@@ -1 +1 @@
-{"file":"cura-button-select.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: 'true' | 'false' = '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 === 'true' ? true : null}\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.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}

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

@@ -14,7 +14,7 @@ const CuraButtonTransparent = /*@__PURE__*/ proxyCustomElement(class CuraButtonT
         this.internals = this.attachInternals();
         this.type = 'button';
         this.size = 'large';
-        this.disabled = 'false';
+        this.disabled = false;
         this.isLoading = false;
         this.iconName = undefined;
         this.iconset = 'default';
@@ -82,7 +82,7 @@ const CuraButtonTransparent = /*@__PURE__*/ proxyCustomElement(class CuraButtonT
         }
     }
     render() {
-        return (h(Host, { key: 'aa51dc3bd4dcf3487b253048e7580e89aef6ed81' }, 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", { lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : 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", { lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
+        return (h(Host, { key: 'eb208813f7743d71c826ea4e05c19933fdec34de' }, 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", { lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' }))) : (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", { lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite' })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -93,7 +93,7 @@ const CuraButtonTransparent = /*@__PURE__*/ proxyCustomElement(class CuraButtonT
 }, [65, "cura-button-transparent", {
         "type": [513],
         "size": [513],
-        "disabled": [513],
+        "disabled": [516],
         "isLoading": [516, "is-loading"],
         "iconName": [513, "icon-name"],
         "iconset": [513],

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

@@ -1 +1 @@
-{"file":"cura-button-transparent2.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-width: 0px;\n      border: 2px solid transparent;\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';\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: 'true' | 'false' = '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() color = 'primary';\n\n  /**\n   * Set the font color to dark or light.\n   */\n  @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'light';\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  @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    return classes;\n  }\n\n\n  getIcon() {\n    if (!this.iconName || this.isLoading) return null;\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n\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) return this.fontColor === 'light' ? `${this.color}-darker` : `${this.color}-lighter`\n    return this.fontColor === 'light' ? 'neutral-purewhite' : `${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    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 lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled === 'true' ? true : 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 lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button-transparent2.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-width: 0px;\n      border: 2px solid transparent;\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';\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() color = 'primary';\n\n  /**\n   * Set the font color to dark or light.\n   */\n  @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'light';\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  @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    return classes;\n  }\n\n\n  getIcon() {\n    if (!this.iconName || this.isLoading) return null;\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n\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) return this.fontColor === 'light' ? `${this.color}-darker` : `${this.color}-lighter`\n    return this.fontColor === 'light' ? 'neutral-purewhite' : `${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    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 lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}></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 lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={this.fontColor === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-button.js

@@ -14,7 +14,7 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
         this.internals = this.attachInternals();
         this.type = 'button';
         this.size = 'large';
-        this.disabled = 'false';
+        this.disabled = false;
         this.isLoading = false;
         this.iconName = undefined;
         this.iconset = 'default';
@@ -93,7 +93,7 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
         }
     }
     render() {
-        return (h(Host, { key: 'b218c0fb128f2057632a4c8d220c379091cdca15' }, 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", lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: "neutral-black" }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled === 'true' ? true : 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", lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: "neutral-black" })))));
+        return (h(Host, { key: '7491e8209b9193f5e7f51ead1b08afe88b160ec1' }, 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", lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: "neutral-black" }))) : (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", lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: "neutral-black" })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -104,7 +104,7 @@ const CuraButton$1 = /*@__PURE__*/ proxyCustomElement(class CuraButton extends H
 }, [65, "cura-button", {
         "type": [513],
         "size": [513],
-        "disabled": [513],
+        "disabled": [516],
         "isLoading": [516, "is-loading"],
         "iconName": [513, "icon-name"],
         "iconset": [513],

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

@@ -1 +1 @@
-{"file":"cura-button.js","mappings":"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","names":["CuraButton"],"sources":["src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","src/components/buttons/cura-button/cura-button.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(--color-base-neutral-purewhite);\n      box-sizing: border-box;\n      border: 2px solid transparent;\n\n      &:not(.disabled) {\n        &:not(.isLoading) {\n          border: 2px solid var(--color-base-color-light);\n        }\n\n        &:hover {\n          border-color: var(--color-dark-color-base);\n          background: var(--color-base-color-light);\n          box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n        }\n      }\n\n      &:not(.isLoading):not(.disabled):active {\n        background-color: var(--color-dark-color-light);\n        border-color: var(--color-dark-color-light);\n      }\n    }\n\n    @include button-shadow-behavior();\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      background-color: var(--neutral-pale-neutral-black);\n    }\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButton {\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: 'true' | 'false' = '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() color = 'accent';\n\n  /**\n  * Set the background color to dark or light.\n  */\n  @Prop({ reflect: true }) background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\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  @State() styles = {};\n\n  @State() hovered = false\n\n  weights;\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.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },\n      { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },\n      { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },\n      { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },\n      { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));\n    this.styles = { ...this.styles };\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\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\n    return classes;\n  }\n\n  getIcon() {\n    if (!this.iconName || this.isLoading) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : 'neutral-black';\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    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 class=\"label\" lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color=\"neutral-black\"></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled === 'true' ? true : 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 class=\"label\" lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color=\"neutral-black\"></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button.js","mappings":"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","names":["CuraButton"],"sources":["src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","src/components/buttons/cura-button/cura-button.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(--color-base-neutral-purewhite);\n      box-sizing: border-box;\n      border: 2px solid transparent;\n\n      &:not(.disabled) {\n        &:not(.isLoading) {\n          border: 2px solid var(--color-base-color-light);\n        }\n\n        &:hover {\n          border-color: var(--color-dark-color-base);\n          background: var(--color-base-color-light);\n          box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n        }\n      }\n\n      &:not(.isLoading):not(.disabled):active {\n        background-color: var(--color-dark-color-light);\n        border-color: var(--color-dark-color-light);\n      }\n    }\n\n    @include button-shadow-behavior();\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      background-color: var(--neutral-pale-neutral-black);\n    }\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButton {\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() color = 'accent';\n\n  /**\n  * Set the background color to dark or light.\n  */\n  @Prop({ reflect: true }) background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\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  @State() styles = {};\n\n  @State() hovered = false\n\n  weights;\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.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },\n      { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },\n      { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },\n      { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },\n      { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));\n    this.styles = { ...this.styles };\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\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\n    return classes;\n  }\n\n  getIcon() {\n    if (!this.iconName || this.isLoading) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : 'neutral-black';\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    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 class=\"label\" lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color=\"neutral-black\"></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 class=\"label\" lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color=\"neutral-black\"></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/cura/cura.esm.js

@@ -1,2 +1,2 @@
-import{p as o,b as e}from"./p-312791fb.js";export{s as setNonce}from"./p-312791fb.js";import{g as l}from"./p-70c369b1.js";var r=()=>{const e=import.meta.url;const l={};if(e!==""){l.resourcesUrl=new URL(".",e).href}return o(l)};r().then((async o=>{await l();return e([["p-5e5f37c7",[[65,"cura-button",{type:[513],size:[513],disabled:[513],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],background:[513],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32],hovered:[32]},null,{background:["setColors"],color:["setColors"]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]},null,{color:["handleChangeColor"],activeColor:["handleChangeColor"]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]},null,{size:["sizeHandler"],color:["colorHandler"],disabled:["colorHandler"]}],[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}]]],["p-b1148bb2",[[1,"cura-dropdown-search",{status:[513],name:[513],required:[1540],selected:[1540],value:[1537],placeholder:[1537],label:[1537],iconName:[513,"icon-name"],dropdownMaxHeight:[513,"dropdown-max-height"],overlayVisible:[32],isDropdownOpen:[32],styles:[32],isMobile:[32],mode:[32],inputTextRef:[32],isOnBlurInput:[32],hoveredIndex:[32],options:[32]},null,{value:["onValueChange"]}]]],["p-b0d66386",[[1,"cura-calendar",{period:[513],width:[513],mode:[513],dateFormat:[513,"date-format"],locale:[513],type:[513],disable:[16],enable:[16],defaultDate:[16],limitRange:[514,"limit-range"],currentDate:[32],selectedDates:[32],rangeStart:[32],defaultDates:[32],selectMonth:[32],selectYear:[32],styles:[32]}]]],["p-9a4094e3",[[1,"cura-icons-view",{selected:[32]}]]],["p-29790bb5",[[1,"cura-toast",{type:[1],position:[1],icon:[513],label:[513],closeButton:[516,"close-button"],loader:[516],autoCloseDelay:[514,"auto-close-delay"],styles:[32],progress:[32]},null,{type:["handleChangeType"],position:["handleChangeType"]}]]],["p-6373c7cd",[[1,"cura-alert",{type:[1],floating:[516],label:[513],closeable:[516],icon:[513],styles:[32]},null,{type:["setColors"]}]]],["p-86b6e638",[[65,"cura-button-outline",{type:[513],size:[513],disabled:[513],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],background:[1],fontColor:[1,"font-color"],textAlign:[513,"text-align"],styles:[32],hovered:[32]},null,{background:["setColors"],color:["setColors","getSymbolColor"],fontColor:["getSymbolColor"]}]]],["p-8433fec9",[[65,"cura-checkbox",{checked:[1540],indeterminate:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],size:[513],background:[1],iconColor:[1,"icon-color"],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}]]],["p-e622006c",[[1,"cura-button-select",{size:[513],disabled:[513],selected:[516],iconPosition:[513,"icon-position"],color:[1],background:[1],fontcolor:[1],hovered:[32],styles:[32]},null,{background:["setColors","assignColor"],color:["setColors"],fontcolor:["setColors","assignColor"]}]]],["p-5fcfbf32",[[65,"cura-radio",{checked:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],background:[1],size:[1],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}]]],["p-039b3701",[[1,"cura-dropdown-search-option",{value:[513],selected:[1540],selectable:[516],hovered:[1540],styles:[32]},null,{selected:["updateIconColor"]}]]],["p-af2036a7",[[1,"cura-dropdown-search-option-title"]]],["p-a9dad622",[[65,"cura-switch",{checked:[1540],disabled:[516],label:[513],ontabindex:[514],position:[513],size:[513],background:[1],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors"]}]]],["p-260edb61",[[1,"cura-avatar",{size:[1],backgroundColor:[513,"background-color"],borderColor:[513,"border-color"],borderRadius:[513,"border-radius"],border:[516],type:[513],imageSrc:[1537,"image-src"],imageSrcDefault:[513,"image-src-default"],floating:[516],styles:[32]},null,{size:["sizeHandler"]}]]],["p-c63f4695",[[1,"cura-card",{hasPadding:[1028,"has-padding"],hasShadow:[1028,"has-shadow"],type:[1025],colorMode:[1025,"color-mode"],href:[1537],target:[513],styles:[32]}]]],["p-67e34464",[[1,"cura-display",{level:[514],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}]]],["p-4eaeb590",[[1,"cura-loader-bar",{color:[1],progress:[2],styles:[32]},null,{color:["handleChangeColor"],progress:["handleProgress"]}]]],["p-e1253a09",[[65,"cura-button-transparent",{type:[513],size:[513],disabled:[513],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],hovered:[32],styles:[32]},null,{fontColor:["getSymbolColor"],color:["getSymbolColor"]}],[65,"cura-input-text",{mode:[1537],status:[1537],size:[1537],type:[513],inputMode:[513,"input-mode"],label:[513],name:[513],placeholder:[513],value:[1032],iconName:[1537,"icon-name"],helperText:[1537,"helper-text"],disabled:[516],required:[516],maskPreset:[8,"mask-preset"],maskRegex:[1537,"mask-regex"],maskAdvanced:[1544,"mask-advanced"],maxlength:[1538],readOnly:[516,"read-only"],isLoading:[1540,"is-loading"],clearIcon:[1540,"clear-icon"],hideErrorIcon:[4,"hide-error-icon"],isHovered:[32],isFocused:[32],styles:[32]},null,{styles:["connectedCallback"],size:["getClasses"],status:["renderIcon"],mode:["renderIcon"],maskPreset:["initializeMask"],maskRegex:["initializeMask"],maskAdvanced:["initializeMask"]}]]],["p-a5e53dd4",[[65,"cura-select",{label:[513],placeholder:[513],value:[1537],mode:[513],size:[513],status:[1537],disabled:[516],required:[516],isHovered:[32],isFocused:[32],isOpen:[32],options:[32],activeIndex:[32]}],[1,"cura-select-option",{value:[513],selected:[516],active:[516],size:[1],styles:[32]},null,{size:["getSize"]}]]]],o)}));
+import{p as o,b as e}from"./p-312791fb.js";export{s as setNonce}from"./p-312791fb.js";import{g as l}from"./p-70c369b1.js";var r=()=>{const e=import.meta.url;const l={};if(e!==""){l.resourcesUrl=new URL(".",e).href}return o(l)};r().then((async o=>{await l();return e([["p-45bc4f7c",[[65,"cura-button",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],background:[513],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32],hovered:[32]},null,{background:["setColors"],color:["setColors"]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]},null,{color:["handleChangeColor"],activeColor:["handleChangeColor"]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]},null,{size:["sizeHandler"],color:["colorHandler"],disabled:["colorHandler"]}],[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}]]],["p-b1148bb2",[[1,"cura-dropdown-search",{status:[513],name:[513],required:[1540],selected:[1540],value:[1537],placeholder:[1537],label:[1537],iconName:[513,"icon-name"],dropdownMaxHeight:[513,"dropdown-max-height"],overlayVisible:[32],isDropdownOpen:[32],styles:[32],isMobile:[32],mode:[32],inputTextRef:[32],isOnBlurInput:[32],hoveredIndex:[32],options:[32]},null,{value:["onValueChange"]}]]],["p-b0d66386",[[1,"cura-calendar",{period:[513],width:[513],mode:[513],dateFormat:[513,"date-format"],locale:[513],type:[513],disable:[16],enable:[16],defaultDate:[16],limitRange:[514,"limit-range"],currentDate:[32],selectedDates:[32],rangeStart:[32],defaultDates:[32],selectMonth:[32],selectYear:[32],styles:[32]}]]],["p-9a4094e3",[[1,"cura-icons-view",{selected:[32]}]]],["p-29790bb5",[[1,"cura-toast",{type:[1],position:[1],icon:[513],label:[513],closeButton:[516,"close-button"],loader:[516],autoCloseDelay:[514,"auto-close-delay"],styles:[32],progress:[32]},null,{type:["handleChangeType"],position:["handleChangeType"]}]]],["p-6373c7cd",[[1,"cura-alert",{type:[1],floating:[516],label:[513],closeable:[516],icon:[513],styles:[32]},null,{type:["setColors"]}]]],["p-3b4bf71e",[[65,"cura-button-outline",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],background:[1],fontColor:[1,"font-color"],textAlign:[513,"text-align"],styles:[32],hovered:[32]},null,{background:["setColors"],color:["setColors","getSymbolColor"],fontColor:["getSymbolColor"]}]]],["p-8433fec9",[[65,"cura-checkbox",{checked:[1540],indeterminate:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],size:[513],background:[1],iconColor:[1,"icon-color"],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"],iconColor:["assignColor"]}]]],["p-17a878d4",[[1,"cura-button-select",{size:[513],disabled:[516],selected:[516],iconPosition:[513,"icon-position"],color:[1],background:[1],fontcolor:[1],hovered:[32],styles:[32]},null,{background:["setColors","assignColor"],color:["setColors"],fontcolor:["setColors","assignColor"]}]]],["p-5fcfbf32",[[65,"cura-radio",{checked:[1540],status:[1537],disabled:[516],required:[516],label:[513],ontabindex:[514],position:[513],value:[513],name:[513],background:[1],size:[1],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors","assignColor"]}]]],["p-039b3701",[[1,"cura-dropdown-search-option",{value:[513],selected:[1540],selectable:[516],hovered:[1540],styles:[32]},null,{selected:["updateIconColor"]}]]],["p-af2036a7",[[1,"cura-dropdown-search-option-title"]]],["p-a9dad622",[[65,"cura-switch",{checked:[1540],disabled:[516],label:[513],ontabindex:[514],position:[513],size:[513],background:[1],color:[1],styles:[32]},null,{size:["sizeHandler"],color:["setColors"],background:["setColors"]}]]],["p-260edb61",[[1,"cura-avatar",{size:[1],backgroundColor:[513,"background-color"],borderColor:[513,"border-color"],borderRadius:[513,"border-radius"],border:[516],type:[513],imageSrc:[1537,"image-src"],imageSrcDefault:[513,"image-src-default"],floating:[516],styles:[32]},null,{size:["sizeHandler"]}]]],["p-c63f4695",[[1,"cura-card",{hasPadding:[1028,"has-padding"],hasShadow:[1028,"has-shadow"],type:[1025],colorMode:[1025,"color-mode"],href:[1537],target:[513],styles:[32]}]]],["p-67e34464",[[1,"cura-display",{level:[514],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]},null,{color:["handleChangeColor"],spotColor:["handleChangeColor"]}]]],["p-4eaeb590",[[1,"cura-loader-bar",{color:[1],progress:[2],styles:[32]},null,{color:["handleChangeColor"],progress:["handleProgress"]}]]],["p-31ae34e3",[[65,"cura-button-transparent",{type:[513],size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],hovered:[32],styles:[32]},null,{fontColor:["getSymbolColor"],color:["getSymbolColor"]}],[65,"cura-input-text",{mode:[1537],status:[1537],size:[1537],type:[513],inputMode:[513,"input-mode"],label:[513],name:[513],placeholder:[513],value:[1032],iconName:[1537,"icon-name"],helperText:[1537,"helper-text"],disabled:[516],required:[516],maskPreset:[8,"mask-preset"],maskRegex:[1537,"mask-regex"],maskAdvanced:[1544,"mask-advanced"],maxlength:[1538],readOnly:[516,"read-only"],isLoading:[1540,"is-loading"],clearIcon:[1540,"clear-icon"],hideErrorIcon:[4,"hide-error-icon"],isHovered:[32],isFocused:[32],styles:[32]},null,{styles:["connectedCallback"],size:["getClasses"],status:["renderIcon"],mode:["renderIcon"],maskPreset:["initializeMask"],maskRegex:["initializeMask"],maskAdvanced:["initializeMask"]}]]],["p-a5e53dd4",[[65,"cura-select",{label:[513],placeholder:[513],value:[1537],mode:[513],size:[513],status:[1537],disabled:[516],required:[516],isHovered:[32],isFocused:[32],isOpen:[32],options:[32],activeIndex:[32]}],[1,"cura-select-option",{value:[513],selected:[516],active:[516],size:[1],styles:[32]},null,{size:["getSize"]}]]]],o)}));
 //# sourceMappingURL=cura.esm.js.map

package/dist/cura/{p-e622006c.entry.js → p-17a878d4.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as a,h as e,H as s}from"./p-312791fb.js";const i=':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) * 6.12px) calc(var(--base-spacing) * 9.96px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 33.7px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3.44px) calc(var(--base-spacing) * 9.96px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 29.95px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 3.24px) calc(var(--base-spacing) * 7.44px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 21.67px)}:host button:not(.isLoading).large,:host a:not(.isLoading).large{padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.isLoading).medium,:host a:not(.isLoading).medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button:not(.isLoading).small,:host a:not(.isLoading).small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button cura-label,:host a cura-label{flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left")}:host button.medium cura-label,:host a.medium cura-label{font-size:1.14em}:host button.small cura-label,:host a.small cura-label{font-size:1em}: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.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 o=i;const r=class{constructor(e){t(this,e);this.onclick=a(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.hovered=false;this.styles={}}setColors(){const t=[{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"}];t.forEach((t=>{this.styles=Object.assign(Object.assign({},this.styles),{[t.name]:this.theme.colors.getColor(t.theme)})}))}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")}connectedCallback(){this.setStyles();this.setColors()}handleMouseEnter(){if(this.disabled)return;this.hovered=true}handleMouseLeave(){this.hovered=false}assignColor(){if(!this.selected)return"primary-base";const t=this.disabled?this.background==="light"?"neutral-medium":"primary-base":this.selected&&this.fontcolor==="dark"?"neutral-black":"neutral-purewhite";return t}getIcon(){if(!this.selected)return;const t=this.size==="small"?16:this.size==="medium"?20:24;const a=this.hovered?"closeCircle":"checkCircle";return e("cura-icon",{class:"button-icon",name:a,size:t,color:this.assignColor()})}handleClick(t){if(this.disabled)t.preventDefault();this.selected=!this.selected;this.onclick.emit({selected:this.selected})}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t["disabled"]=this.disabled;t["selected"]=this.selected;return t}render(){return e(s,{key:"46ec847aae53f96f9c9cb9cba1472bb33df8fcdb"},e("button",{key:"508303050695d9a1ff7d27174e511bcac814c153",class:this.getClasses(),style:this.styles,disabled:this.disabled==="true"?true:null,onClick:t=>this.handleClick(t),onMouseEnter:()=>this.handleMouseEnter(),onMouseLeave:()=>this.handleMouseLeave()},e("div",{key:"bd06094e5004bd11e8ba9d05387300c8d57d34e2",class:"button-container"},this.getIcon(),e("cura-label",{key:"b688ba052bdf3bcd39a61d553f49a0e47ac5ca54",class:"label",lineHeight:"0%",color:this.assignColor()},e("slot",{key:"29f645c3866a9f24cbae12f5167a2645c0452153"})))))}static get watchers(){return{background:["setColors","assignColor"],color:["setColors"],fontcolor:["setColors","assignColor"]}}};r.style=o;export{r as cura_button_select};
-//# sourceMappingURL=p-e622006c.entry.js.map
+import{r as t,c as a,h as e,H as s}from"./p-312791fb.js";const i=':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) * 6.12px) calc(var(--base-spacing) * 9.96px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 33.7px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3.44px) calc(var(--base-spacing) * 9.96px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 29.95px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 3.24px) calc(var(--base-spacing) * 7.44px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 21.67px)}:host button:not(.isLoading).large,:host a:not(.isLoading).large{padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.isLoading).medium,:host a:not(.isLoading).medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button:not(.isLoading).small,:host a:not(.isLoading).small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button cura-label,:host a cura-label{flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, "left")}:host button.medium cura-label,:host a.medium cura-label{font-size:1.14em}:host button.small cura-label,:host a.small cura-label{font-size:1em}: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.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 o=i;const r=class{constructor(e){t(this,e);this.onclick=a(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.hovered=false;this.styles={}}setColors(){const t=[{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"}];t.forEach((t=>{this.styles=Object.assign(Object.assign({},this.styles),{[t.name]:this.theme.colors.getColor(t.theme)})}))}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")}connectedCallback(){this.setStyles();this.setColors()}handleMouseEnter(){if(this.disabled)return;this.hovered=true}handleMouseLeave(){this.hovered=false}assignColor(){if(!this.selected)return"primary-base";const t=this.disabled?this.background==="light"?"neutral-medium":"primary-base":this.selected&&this.fontcolor==="dark"?"neutral-black":"neutral-purewhite";return t}getIcon(){if(!this.selected)return;const t=this.size==="small"?16:this.size==="medium"?20:24;const a=this.hovered?"closeCircle":"checkCircle";return e("cura-icon",{class:"button-icon",name:a,size:t,color:this.assignColor()})}handleClick(t){if(this.disabled)t.preventDefault();this.selected=!this.selected;this.onclick.emit({selected:this.selected})}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t["disabled"]=this.disabled;t["selected"]=this.selected;return t}render(){return e(s,{key:"11c526fa5a82a986513a2d2cf94e85fbdc0a83c5"},e("button",{key:"539cb4766e18cf195541731bf95809784021fc21",class:this.getClasses(),style:this.styles,disabled:this.disabled,onClick:t=>this.handleClick(t),onMouseEnter:()=>this.handleMouseEnter(),onMouseLeave:()=>this.handleMouseLeave()},e("div",{key:"f57e41656abb33d450e9876517e575c628c633c6",class:"button-container"},this.getIcon(),e("cura-label",{key:"84ee6289e8c5e242cbdc2cdd8110be7102244176",class:"label",lineHeight:"0%",color:this.assignColor()},e("slot",{key:"2f292f5308c69fc9efa66a43bac5941ab2adeaf9"})))))}static get watchers(){return{background:["setColors","assignColor"],color:["setColors"],fontcolor:["setColors","assignColor"]}}};r.style=o;export{r as cura_button_select};
+//# sourceMappingURL=p-17a878d4.entry.js.map

package/dist/cura/p-17a878d4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["curaButtonSelectCss","CuraButtonSelectStyle0","CuraButtonOutline","this","theme","window","CuraAPI","setColors","colors","name","color","fontcolor","background","forEach","styles","Object","assign","getColor","setStyles","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","connectedCallback","handleMouseEnter","disabled","hovered","handleMouseLeave","assignColor","selected","getIcon","iconSize","size","iconName","h","class","handleClick","e","preventDefault","onclick","emit","getClasses","classes","toLowerCase","iconPosition","render","Host","key","style","onClick","onMouseEnter","onMouseLeave","lineHeight"],"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"],"mappings":"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","ignoreList":[]}