@rededor/cura 0.5.4 → 1.0.0-alpha.0

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

@@ -1,309 +1,371 @@
-import { Host, h } from '@stencil/core';
+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 = false;
-    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": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set button to FAB/icon only."
-        },
-        "attribute": "icon-only",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "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"
-      }];
-  }
+    constructor() {
+        this.type = 'button';
+        this.size = 'large';
+        this.disabled = false;
+        this.isLoading = false;
+        this.iconName = undefined;
+        this.iconset = 'default';
+        this.iconPosition = 'left';
+        this.iconOnly = false;
+        this.href = undefined;
+        this.target = "_self";
+        this.color = 'accent';
+        this.background = 'light';
+        this.fontColor = 'dark';
+        this.textAlign = 'left';
+        this.styles = {};
+        this.hovered = false;
+    }
+    connectedCallback() {
+        this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+        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();
+    }
+    setColors() {
+        const colors = [
+            { name: '--color-base-neutral-purewhite', theme: `${this.background === 'light' ? `${this.color}-base` : 'neutral-pale'}` },
+            { name: '--color-base-color-light', theme: `${this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter`}` },
+            { name: '--color-dark-color-light', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-light`}` },
+            { name: '--color-dark-color-base', theme: `${this.background === 'light' ? `${this.color}-dark` : `${this.color}-base`}` },
+            { name: '--neutral-pale-neutral-black', theme: `${this.background === 'light' ? 'neutral-pale' : 'neutral-black'}` },
+        ];
+        colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme));
+        this.styles = Object.assign({}, this.styles);
+    }
+    handleMouseEnter() {
+        if (this.disabled)
+            return;
+        this.hovered = true;
+    }
+    handleMouseLeave() {
+        this.hovered = false;
+    }
+    getClasses() {
+        var _a, _b;
+        const classes = {};
+        classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
+        classes[`icon-${(_b = this.iconPosition) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`] = true;
+        classes[`icon-only`] = this.iconOnly;
+        classes['disabled'] = this.disabled;
+        classes['isLoading'] = this.isLoading;
+        return classes;
+    }
+    getIcon() {
+        if (!this.iconName || this.isLoading)
+            return '';
+        const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+        return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
+    }
+    getSymbolColor() {
+        return this.disabled
+            ? 'neutral-dark'
+            : this.fontColor === 'light'
+                ? 'neutral-white'
+                : 'neutral-black';
+    }
+    handleClick(e) {
+        if (this.disabled || this.isLoading) {
+            e.preventDefault();
+            return;
+        }
+        if (!this.href) {
+            if (this.type === 'submit' && this.internals.form)
+                this.internals.form.submit();
+            if (this.type === 'reset' && this.internals.form)
+                this.internals.form.reset();
+        }
+    }
+    render() {
+        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 is() { return "cura-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'reset' | 'submit'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button type: button (default) | submit | reset"
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'button'"
+            },
+            "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": "'large'"
+            },
+            "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": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set button to FAB/icon only."
+                },
+                "attribute": "icon-only",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the background color to dark or light."
+                },
+                "attribute": "background",
+                "reflect": true,
+                "defaultValue": "'light'"
+            },
+            "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": {},
+            "hovered": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "background",
+                "methodName": "setColors"
+            }, {
+                "propName": "color",
+                "methodName": "setColors"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=cura-button.js.map