@rededor/cura 0.3.6 → 0.3.8

package/dist/collection/components/buttons/cura-button/cura-button.css

@@ -1,75 +1,142 @@
+/**
+ * Global Button Definitions.
+ * Required CSS Properties:
+ * --font-size
+ * --base-spacing
+ * --font-family
+ * --font-weight-medium
+ * --text-align
+ */
+/**
+ * Buttons Host element definitions.
+ * Use: @include button-host() { ... }
+ */
+/**
+ * Buttons base definitions.
+ * Use: @include button-element() { ... }
+ */
+/**
+ * Button sizes definitions.
+ * Use: @include button-sizes() { ... }
+ */
+/**
+ * Button container definitions.
+ * Use: @include button-container() { ... }
+ */
+/**
+ * Button label definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button shadow definitions.
+ * Use: @include button-label() { ... }
+ */
+/**
+ * Button disabled state definitions
+ * Use: @include button-disabled() { ... }
+ */
+/**
+ * Button loading state definitions
+ * Use: @include button-loading() { ... }
+ */
+/**
+ * Button icon definitions
+ * Use: @include button-icon() { ... }
+ */
+/**
+ * Button icon only behavior definitions
+ * Use: @include button-icon-only-behavior() { ... }
+ */
 :host {
+  --border-radius: 4px;
   display: inline-block;
   vertical-align: middle;
 }
 :host button, :host a {
-  --shadown-color: 38, 38, 38;
-  --shadow-opacity: 0.16;
   outline: none;
   box-shadow: none;
   box-sizing: border-box;
-  padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
-  min-height: calc(var(--base-spacing) * 13px);
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
-  transition: background-color 0.05s linear, box-shadow 0.05s linear, border-color 0.05s linear;
+  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);
+  background-color: var(--color-base);
+  border: none;
+  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):not(.disabled):hover, :host a:not(.isLoading):not(.disabled):hover {
+  background-color: var(--color-light);
+}
+:host button:not(.isLoading):not(.disabled):active, :host a:not(.isLoading):not(.disabled):active {
+  background-color: var(--color-dark);
+}
+:host button:hover, :host a:hover {
+  box-shadow: 0 4px 8px 0 rgba(38, 38, 38, 0.16);
+}
+:host button.medium:hover, :host a.medium:hover {
+  box-shadow: 0 3px 6px 0 rgba(38, 38, 38, 0.16);
+}
+:host button.small:hover, :host a.small:hover {
+  box-shadow: 0 2px 5px 0 rgba(38, 38, 38, 0.16);
+}
+:host button:active, :host button.disabled:hover, :host button.isLoading:hover, :host a:active, :host a.disabled:hover, :host a.isLoading:hover {
+  box-shadow: none !important;
+}
+:host button.medium, :host a.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.small, :host a.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 .button-container, :host a .button-container {
   display: flex;
   align-items: center;
+  opacity: 1;
+  transition: opacity 0.2s linear;
 }
-:host button:hover, :host a:hover {
-  box-shadow: 0 4px 8px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
-}
-:host button:active, :host a:active {
-  box-shadow: none;
+:host button.icon-right .button-container, :host a.icon-right .button-container {
+  flex-direction: row-reverse;
 }
 :host button .label, :host a .label {
   flex: 1;
-  color: var(--neutral-black);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
   font-size: 1.43em;
-  line-height: 1.1em;
+  line-height: 1.2em;
   text-align: var(--text-align, "left");
+  color: var(--neutral-black);
+}
+:host button .label.inverted, :host a .label.inverted {
+  color: var(--neutral-white);
+}
+:host button.medium .label, :host a.medium .label {
+  font-size: 1.14em;
+}
+:host button.small .label, :host a.small .label {
+  font-size: 1em;
 }
 :host button.icon-left cura-icon, :host a.icon-left cura-icon {
   margin-right: calc(var(--base-spacing) * 3px);
 }
-:host button.icon-right .button-container, :host a.icon-right .button-container {
-  flex-direction: row-reverse;
-}
 :host button.icon-right cura-icon, :host a.icon-right cura-icon {
   margin-left: calc(var(--base-spacing) * 3px);
 }
-:host button.medium, :host a.medium {
-  padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);
-  min-height: calc(var(--base-spacing) * 11px);
-}
-:host button.medium:hover, :host a.medium:hover {
-  box-shadow: 0 3px 6px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
-}
-:host button.medium:active, :host a.medium:active {
-  box-shadow: none;
-}
-:host button.medium .label, :host a.medium .label {
-  font-size: 1.14em;
-  letter-spacing: 2%;
-}
-:host button.small, :host a.small {
-  padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
-  min-height: calc(var(--base-spacing) * 8px);
+:host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 2.7px);
 }
-:host button.small:hover, :host a.small:hover {
-  box-shadow: 0 2px 5px 0 RGBA(var(--shadown-color), var(--shadow-opacity));
-}
-:host button.small:active, :host a.small:active {
-  box-shadow: none;
+:host button.medium.icon-right cura-icon, :host a.medium.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 2.7px);
 }
 :host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon {
   margin-right: calc(var(--base-spacing) * 2.5px);
@@ -77,106 +144,42 @@
 :host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon {
   margin-left: calc(var(--base-spacing) * 2.5px);
 }
-:host button.small .label, :host a.small .label {
-  font-size: 1em;
-  letter-spacing: 2%;
-}
 :host button.disabled, :host a.disabled {
   cursor: not-allowed;
-}
-:host button.disabled:hover, :host a.disabled:hover {
-  box-shadow: none;
-}
-:host button.button-solid, :host a.button-solid {
-  background-color: var(--color-base);
-  /* border-width: 1px;
-  border-color: var(--color-dark);
-  border-style: solid; */
-  border: none;
-}
-:host button.button-solid:hover, :host a.button-solid:hover {
-  background-color: var(--color-light);
-}
-:host button.button-solid:active, :host a.button-solid:active {
-  background-color: var(--color-dark);
-}
-:host button.button-solid .label, :host a.button-solid .label {
-  color: var(--neutral-black);
-}
-:host button.button-solid .label.inverted, :host a.button-solid .label.inverted {
-  color: var(--neutral-white);
-}
-:host button.button-solid.disabled, :host a.button-solid.disabled {
   background-color: var(--neutral-light);
 }
-:host button.button-solid.disabled .label, :host button.button-solid.disabled .label.inverted, :host a.button-solid.disabled .label, :host a.button-solid.disabled .label.inverted {
+:host button.disabled .label, :host button.disabled .label.inverted, :host a.disabled .label, :host a.disabled .label.inverted {
   color: var(--neutral-dark);
 }
-:host button.button-outline, :host a.button-outline {
-  background-color: transparent;
-  border-width: 2px;
-  border-color: var(--color-base);
-  border-style: solid;
-}
-:host button.button-outline:hover, :host a.button-outline:hover {
-  border-color: var(--color-light);
+:host button.icon-only, :host a.icon-only {
+  padding: calc(var(--base-spacing) * 3.5px);
 }
-:host button.button-outline:not(.disabled):hover .label, :host a.button-outline:not(.disabled):hover .label {
-  color: var(--color-light);
+:host button.icon-only .label, :host a.icon-only .label {
+  display: none;
 }
-:host button.button-outline:not(.disabled):hover cura-icon, :host a.button-outline:not(.disabled):hover cura-icon {
-  --color: var(--color-light) !important;
+:host button.icon-only cura-icon, :host a.icon-only cura-icon {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
 }
-:host button.button-outline .label, :host a.button-outline .label {
-  color: var(--color-base);
+:host button.icon-only.medium, :host a.icon-only.medium {
+  padding: calc(var(--base-spacing) * 2.75px);
 }
-:host button.button-outline .label.inverted, :host a.button-outline .label.inverted {
-  color: var(--neutral-white);
-}
-:host button.button-outline:not(.disabled):not(.inverted):active, :host a.button-outline:not(.disabled):not(.inverted):active {
-  border-color: var(--color-dark);
+:host button.icon-only.small, :host a.icon-only.small {
+  padding: calc(var(--base-spacing) * 1.5px);
 }
-:host button.button-outline:not(.disabled):not(.inverted):active .label, :host a.button-outline:not(.disabled):not(.inverted):active .label {
-  color: var(--color-dark);
+:host button cura-loader-circle, :host a cura-loader-circle {
+  position: absolute;
+  display: none;
 }
-:host button.button-outline:not(.disabled):not(.inverted):active cura-icon, :host a.button-outline:not(.disabled):not(.inverted):active cura-icon {
-  --color: var(--color-dark) !important;
+:host button.isLoading, :host a.isLoading {
+  cursor: wait;
 }
-:host button.button-outline.disabled, :host a.button-outline.disabled {
-  border-color: var(--neutral-base);
+:host button.isLoading .button-container, :host a.isLoading .button-container {
+  opacity: 0.3;
 }
-:host button.button-outline.disabled .label, :host button.button-outline.disabled .label.inverted, :host a.button-outline.disabled .label, :host a.button-outline.disabled .label.inverted {
-  color: var(--neutral-dark);
-}
-:host button.button-outline.inverted, :host a.button-outline.inverted {
-  border-color: var(--neutral-white);
-}
-:host button.button-outline.inverted:hover, :host a.button-outline.inverted:hover {
-  border-color: var(--color-lighter);
-  box-shadow: none;
-}
-:host button.button-outline.inverted:hover .label, :host a.button-outline.inverted:hover .label {
-  color: var(--color-lighter);
-}
-:host button.button-outline.inverted:hover cura-icon, :host a.button-outline.inverted:hover cura-icon {
-  --color: var(--color-lighter) !important;
-}
-:host button.button-outline.inverted:not(.disabled):active, :host a.button-outline.inverted:not(.disabled):active {
-  border-color: var(--color-light);
-}
-:host button.button-outline.inverted:not(.disabled):active .label, :host a.button-outline.inverted:not(.disabled):active .label {
-  color: var(--color-light);
-}
-:host button.button-outline.inverted:not(.disabled):active cura-icon, :host a.button-outline.inverted:not(.disabled):active cura-icon {
-  --color: var(--color-light) !important;
-}
-:host button.button-outline.inverted.disabled, :host a.button-outline.inverted.disabled {
-  opacity: 0.6;
-  border-color: var(--neutral-white);
-}
-:host button.button-outline.inverted.disabled .label, :host button.button-outline.inverted.disabled .label.inverted, :host a.button-outline.inverted.disabled .label, :host a.button-outline.inverted.disabled .label.inverted {
-  color: var(--neutral-white);
+:host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container {
+  opacity: 0;
 }
-:host button.button-outline.inverted.disabled cura-icon, :host a.button-outline.inverted.disabled cura-icon {
-  --color: var(--neutral-white) !important;
+:host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle {
+  display: block;
 }

package/dist/collection/components/buttons/cura-button/cura-button.js

@@ -1,13 +1,13 @@
 import { Host, h } from '@stencil/core';
 export class CuraButton {
   constructor() {
-    this.type = 'solid';
-    this.size = 'large';
+    this.size = 'medium';
     this.disabled = false;
     this.isLoading = false;
     this.iconName = undefined;
     this.iconset = 'default';
     this.iconPosition = 'left';
+    this.iconOnly = undefined;
     this.href = undefined;
     this.target = "_self";
     this.color = 'accent';
@@ -23,9 +23,7 @@ export class CuraButton {
     this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
     this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
     this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
-    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
     this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
-    this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
     this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
     this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
     this.styles['--font-weight-medium'] = this.weights.medium;
@@ -34,31 +32,37 @@ export class CuraButton {
   }
   getClasses() {
     const classes = {};
-    classes[`button-${this.type.toLowerCase()}`] = true;
     classes[`${this.size.toLowerCase()}`] = true;
     classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes[`icon-only`] = this.iconOnly;
     classes['inverted'] = this.fontColor === 'light';
     classes['disabled'] = this.disabled;
+    classes['isLoading'] = this.isLoading;
     return classes;
   }
   setColors() {
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
   }
   getIcon() {
     if (!this.iconName)
       return '';
     const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
-    const color = this.disabled
+    const color = this.getSymbolColor();
+    return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
+  }
+  getSymbolColor() {
+    return this.disabled
       ? 'neutral-dark'
       : this.fontColor === 'light'
         ? 'neutral-white'
-        : this.type === 'solid'
-          ? 'neutral-black'
-          : `${this.color}-base`;
-    return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
+        : 'neutral-black';
+  }
+  handleClick(e) {
+    if (this.disabled || this.isLoading)
+      e.preventDefault();
   }
   render() {
-    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null)))))));
+    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
   }
   static get is() { return "cura-button"; }
   static get encapsulation() { return "shadow"; }
@@ -74,24 +78,6 @@ export class CuraButton {
   }
   static get properties() {
     return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'solid' | 'outline' | 'transparent' | 'icon'",
-          "resolved": "\"icon\" | \"outline\" | \"solid\" | \"transparent\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Button type: solid (default) | outline | transparent | icon."
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'solid'"
-      },
       "size": {
         "type": "string",
         "mutable": false,
@@ -108,7 +94,7 @@ export class CuraButton {
         },
         "attribute": "size",
         "reflect": true,
-        "defaultValue": "'large'"
+        "defaultValue": "'medium'"
       },
       "disabled": {
         "type": "boolean",
@@ -199,6 +185,23 @@ export class CuraButton {
         "reflect": true,
         "defaultValue": "'left'"
       },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set button to FAB/icon only."
+        },
+        "attribute": "icon-only",
+        "reflect": true
+      },
       "href": {
         "type": "string",
         "mutable": false,
@@ -231,7 +234,7 @@ export class CuraButton {
           "text": "Set target if link."
         },
         "attribute": "target",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"_self\""
       },
       "color": {
@@ -285,7 +288,7 @@ export class CuraButton {
           "text": "Set text aligment for the button label.\nVales: left (default) | center | right."
         },
         "attribute": "text-align",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "'left'"
       }
     };

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

@@ -1 +1 @@
-{"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button type: solid (default) | outline | transparent | icon.\n   */\n  @Prop({reflect: true}) type: 'solid' | 'outline' | 'transparent' | 'icon' = 'solid';\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  /**\n   * Property href switch button to link.\n   */\n  @Prop({reflect: true}) href: string;\n  /**\n   * Set target if link.\n   */\n  @Prop() target = \"_self\";\n\n  /**\n   * Color base from color scheme. Default: accent.\n   */\n  @Prop() color = 'accent';\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\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() textAlign: 'left' | 'center' | 'right' = 'left';\n\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-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\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['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);\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  getClasses() {\n    const classes = {};\n    classes[`button-${this.type.toLowerCase()}`] = true;\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n    };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const color = this.disabled \n      ? 'neutral-dark' \n      : this.fontColor === 'light' \n        ? 'neutral-white' \n        : this.type === 'solid'\n          ? 'neutral-black'\n          : `${this.color}-base`;\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  render() {\n    return (\n      <Host>\n      { this.href ? (\n        <a href={this.disabled ? '' : this.href} target={this.target} class={this.getClasses()} style={this.styles}>\n          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n        </a>\n      ) : (\n        <button class={this.getClasses()} style={this.styles} disabled={this.disabled || null}>\n          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-button.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button/cura-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button',\n  styleUrl: 'cura-button.scss',\n  shadow: true,\n})\nexport class CuraButton {\n\n  /**\n   * Button size: small | medium | large (default)\n   */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';\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  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\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\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-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\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  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['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n    };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const color = this.getSymbolColor();\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></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) e.preventDefault();\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          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></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          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"]}