@rededor/cura 0.5.0-alpha.0 → 0.5.0

package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.js

@@ -0,0 +1,199 @@
+import { Host, h } from '@stencil/core';
+export class CuraAccordionItem {
+  constructor() {
+    this.label = '';
+    this.iconSize = 32;
+    this.openIcon = 'down';
+    this.closeIcon = 'up';
+    this.iconColor = '';
+    this.iconActiveColor = '';
+    this.colorMode = 'dark';
+    this.opened = false;
+    this.styles = {};
+  }
+  getIconColor() {
+    const inverted = this.colorMode === 'light';
+    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
+    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
+    return this.opened ? iconActiveColor : iconColor;
+  }
+  getClasses() {
+    const classes = {};
+    classes['accordion-item'] = true;
+    classes['active'] = this.opened;
+    classes['inverted'] = this.colorMode === 'light';
+    return classes;
+  }
+  accordionItemClick(_) {
+    this.opened = !this.opened;
+  }
+  render() {
+    return (h(Host, { slot: "accordion-item" }, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { class: "label-container" }, h("span", null, this.label), h("cura-icon", { name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { class: 'content' }, h("div", { class: "content-wrapper" }, h("slot", null))))));
+  }
+  static get is() { return "cura-accordion-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-accordion-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-accordion-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text label for accordion item"
+        },
+        "attribute": "label",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "iconSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accordion items icons"
+        },
+        "attribute": "icon-size",
+        "reflect": true,
+        "defaultValue": "32"
+      },
+      "openIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open-icon",
+        "reflect": true,
+        "defaultValue": "'down'"
+      },
+      "closeIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-icon",
+        "reflect": true,
+        "defaultValue": "'up'"
+      },
+      "iconColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color scheme base color\n(By default, the icon will use the same color of 'color' and 'activeColor')"
+        },
+        "attribute": "icon-color",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "iconActiveColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-active-color",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "colorMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the color mode to dark or light"
+        },
+        "attribute": "color-mode",
+        "reflect": false,
+        "defaultValue": "'dark'"
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "opened",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+}
+//# sourceMappingURL=cura-accordion-item.js.map

package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-accordion-item.js","sourceRoot":"","sources":["../../../../src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,iBAAiB;;iBAKW,EAAE;oBAMP,EAAE;oBACF,MAAM;qBACL,IAAI;qBAMJ,EAAE;2BACI,EAAE;qBAKL,MAAM;kBAEc,KAAK;kBAE7C,EAAE;;EAEpB,YAAY;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;IACxF,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;EACnD,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACjD,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,kBAAkB,CAAC,CAAQ;IACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB;MACzB,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;QAC/C,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;UACzD,WAAK,KAAK,EAAC,iBAAiB;YAC1B,gBAAO,IAAI,CAAC,KAAK,CAAQ;YACzB,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF;QACN,WAAK,KAAK,EAAC,SAAS;UAClB,WAAK,KAAK,EAAC,iBAAiB;YAC1B,eAAa,CACT,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -0,0 +1,185 @@
+/**
+ * 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 {
+  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);
+  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.icon-right .button-container, :host a.icon-right .button-container {
+  flex-direction: row-reverse;
+}
+:host button .label, :host a .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");
+  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 cura-icon, :host a.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 3px);
+}
+:host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon {
+  margin-right: calc(var(--base-spacing) * 2.7px);
+}
+: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);
+}
+:host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon {
+  margin-left: calc(var(--base-spacing) * 2.5px);
+}
+:host button.disabled, :host a.disabled {
+  cursor: not-allowed;
+  background-color: var(--neutral-light);
+}
+:host button.disabled .label, :host button.disabled .label.inverted, :host a.disabled .label, :host a.disabled .label.inverted {
+  color: var(--neutral-dark);
+}
+:host button.icon-only, :host a.icon-only {
+  padding: calc(var(--base-spacing) * 3.5px);
+}
+:host button.icon-only .label, :host a.icon-only .label {
+  display: none;
+}
+:host button.icon-only cura-icon, :host a.icon-only cura-icon {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+:host button.icon-only.medium, :host a.icon-only.medium {
+  padding: calc(var(--base-spacing) * 2.75px);
+}
+:host button.icon-only.small, :host a.icon-only.small {
+  padding: calc(var(--base-spacing) * 1.5px);
+}
+:host button cura-loader-circle, :host a cura-loader-circle {
+  position: absolute;
+  display: none;
+}
+:host button.isLoading, :host a.isLoading {
+  cursor: wait;
+}
+:host button.isLoading .button-container, :host a.isLoading .button-container {
+  opacity: 0.3;
+}
+:host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container {
+  opacity: 0;
+}
+:host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle {
+  display: block;
+}

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

@@ -0,0 +1,308 @@
+import { Host, h } from '@stencil/core';
+export class CuraButton {
+  constructor() {
+    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';
+    this.fontColor = 'dark';
+    this.textAlign = 'left';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    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-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+    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;
+    this.styles['--text-align'] = this.textAlign;
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    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-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.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'
+        : '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, 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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button size: small | medium | large (default)"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled state. Boolean."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Loading state. Boolean."
+        },
+        "attribute": "is-loading",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "iconName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon to be used from iconset."
+        },
+        "attribute": "icon-name",
+        "reflect": true
+      },
+      "iconset": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom iconset if needed."
+        },
+        "attribute": "iconset",
+        "reflect": true,
+        "defaultValue": "'default'"
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon position: left (default) | right."
+        },
+        "attribute": "icon-position",
+        "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,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Property href switch button to link."
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set target if link."
+        },
+        "attribute": "target",
+        "reflect": true,
+        "defaultValue": "\"_self\""
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color base from color scheme. Default: accent."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'accent'"
+      },
+      "fontColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the font color to dark or light."
+        },
+        "attribute": "font-color",
+        "reflect": true,
+        "defaultValue": "'dark'"
+      },
+      "textAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'center' | 'right'",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set text aligment for the button label.\nVales: left (default) | center | right."
+        },
+        "attribute": "text-align",
+        "reflect": true,
+        "defaultValue": "'left'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "color",
+        "methodName": "handleChangeColor"
+      }];
+  }
+}
+//# sourceMappingURL=cura-button.js.map