@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -1,417 +1,418 @@
 import { h, Host } from "@stencil/core";
-import { zonosStore } from "../../store/zonosStore";
+import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { getButtonTheme } from "../../utils/getButtonTheme";
 import { isColorVariable } from "../../utils/isColorVariable";
 export class ZonosButton {
-  constructor() {
+    constructor() {
+        /**
+         * Detect if the button has an content
+         */
+        this.handleSlotChange = () => {
+            this.hasContent = true;
+        };
+        this.class = '';
+        this.color = undefined;
+        this.backgroundColor = undefined;
+        this.borderStyle = undefined;
+        this.isDisabled = false;
+        this.icon = null;
+        this.iconRight = false;
+        this.size = 'sm';
+        this.variant = 'standard';
+        this.noBackground = false;
+        this.noPaddingLeft = false;
+        this.noPaddingRight = false;
+        this.loading = false;
+        this.theme = undefined;
+        this.hasIcon = !!this.icon;
+        this.hasContent = false;
+    }
     /**
-     * Detect if the button has an content
+     * Detect if the icon changes and update the state accordingly
      */
-    this.handleSlotChange = () => {
-      this.hasContent = true;
-    };
-    this.class = '';
-    this.color = undefined;
-    this.backgroundColor = undefined;
-    this.borderStyle = undefined;
-    this.isDisabled = false;
-    this.icon = null;
-    this.iconRight = false;
-    this.size = 'sm';
-    this.variant = 'standard';
-    this.noBackground = false;
-    this.noPaddingLeft = false;
-    this.noPaddingRight = false;
-    this.loading = false;
-    this.theme = undefined;
-    this.hasIcon = !!this.icon;
-    this.hasContent = false;
-  }
-  /**
-   * Detect if the icon changes and update the state accordingly
-   */
-  iconChangeHandler() {
-    this.hasIcon = !!this.icon;
-  }
-  clickHandler(event) {
-    if (this.loading || this.isDisabled) {
-      event.preventDefault();
-      event.stopPropagation();
+    iconChangeHandler() {
+        this.hasIcon = !!this.icon;
     }
-  }
-  componentWillLoad() {
-    this.iconChangeHandler();
-  }
-  render() {
-    const disabled = this.loading || this.isDisabled;
-    const color = this.color && isColorVariable(this.color)
-      ? `var(--amino-${this.color})`
-      : this.color;
-    // use override background if it exists, otherwise use color from setting
-    const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
-    // only set theme for button to change text color if variant is standard and override background is set
-    const buttonTheme = this.variant === 'standard'
-      ? getButtonTheme(overrideBackground)
-      : undefined;
-    const borderStyle = getBorderRadius(this.borderStyle);
-    return (h(Host, { class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
-        '--background-color': overrideBackground,
-        '--border-radius': borderStyle,
-        '--color': color,
-      } }, h("button", { class: classes([
-        this.hasIcon && 'has-icon',
-        this.hasContent && 'has-content',
-        this.noBackground && 'no-background',
-        this.noPaddingLeft && 'no-padding-left',
-        this.noPaddingRight && 'no-padding-right',
-        this.iconRight && 'icon-right',
-        this.variant,
-        this.size,
-        // only override background if variant is set to standard
-        this.backgroundColor &&
-          this.variant === 'standard' &&
-          'override-background',
-      ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
-  }
-  static get is() { return "zonos-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "class": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "css class for the component"
-        },
-        "attribute": "class",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color | (string & { _placeholder?: never })",
-          "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "src/types/styles/Color",
-              "id": "src/types/styles/Color.ts::Color"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The color of the button text and svg"
-        },
-        "attribute": "color",
-        "reflect": false
-      },
-      "backgroundColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Color | (string & { _placeholder?: never })",
-          "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
-          "references": {
-            "Color": {
-              "location": "import",
-              "path": "src/types/styles/Color",
-              "id": "src/types/styles/Color.ts::Color"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The color of the button text and svg\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
-        },
-        "attribute": "background-color",
-        "reflect": false
-      },
-      "borderStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ElementsUiStyle",
-          "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
-          "references": {
-            "ElementsUiStyle": {
-              "location": "import",
-              "path": "src/types/generated/graphql.customer.types",
-              "id": "src/types/generated/graphql.customer.types.ts::ElementsUiStyle"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "ROUNDED"
-            }],
-          "text": "The border style of the button"
-        },
-        "attribute": "border-style",
-        "reflect": false
-      },
-      "isDisabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "note",
-              "text": "Prop should not conflict name with native html attribute if the prop is also affected by another prop.\nThe issue is the component has internal disabled"
-            }, {
-              "name": "prop",
-              "text": "()."
-            }, {
-              "name": "prop",
-              "text": "decorator is to watch the update of the attribute of the component in the dom.\nAnd `disabled` prop is not an only factor to determine the component is disabled. isLoading"
-            }, {
-              "name": "prop",
-              "text": "() also affect that.\n<Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.\nSo let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.\nIt accidentally turns the disabled prop on even thought the disabled state is not changed from the outside."
-            }],
-          "text": "Whether or not the button is disabled"
-        },
-        "attribute": "is-disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "icon": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLZonosIconElement | null",
-          "resolved": "HTMLZonosIconElement | null",
-          "references": {
-            "HTMLZonosIconElement": {
-              "location": "global",
-              "id": "global::HTMLZonosIconElement"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "The icon element to display"
-        },
-        "defaultValue": "null"
-      },
-      "iconRight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Whether or not the icon is on the right"
-        },
-        "attribute": "icon-right",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "'sm'"
-            }],
-          "text": "The size of the button"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'sm'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| 'primary'\n    | 'success'\n    | 'subtle'\n    | 'outline'\n    | 'standard'\n    | 'danger'\n    | 'warning'",
-          "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The variance of the button\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'standard'"
-      },
-      "noBackground": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Whether or not the button has a background"
-        },
-        "attribute": "no-background",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noPaddingLeft": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the button has a left padding"
-        },
-        "attribute": "no-padding-left",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noPaddingRight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the button has a right padding"
-        },
-        "attribute": "no-padding-right",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the button is loading"
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ElementsUiTheme",
-          "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
-          "references": {
-            "ElementsUiTheme": {
-              "location": "import",
-              "path": "src/types/generated/graphql.customer.types",
-              "id": "src/types/generated/graphql.customer.types.ts::ElementsUiTheme"
+    clickHandler(event) {
+        if (this.loading || this.isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    componentWillLoad() {
+        this.iconChangeHandler();
+    }
+    render() {
+        const disabled = this.loading || this.isDisabled;
+        const color = this.color && isColorVariable(this.color)
+            ? `var(--amino-${this.color})`
+            : this.color;
+        // use override background if it exists, otherwise use color from setting
+        const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
+        // only set theme for button to change text color if variant is standard and override background is set
+        const buttonTheme = this.variant === 'standard'
+            ? getButtonTheme(overrideBackground)
+            : undefined;
+        const borderStyle = getBorderRadius(this.borderStyle);
+        return (h(Host, { class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+                '--background-color': overrideBackground,
+                '--border-radius': borderStyle,
+                '--color': color,
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("button", { class: classes([
+                this.hasIcon && 'has-icon',
+                this.hasContent && 'has-content',
+                this.noBackground && 'no-background',
+                this.noPaddingLeft && 'no-padding-left',
+                this.noPaddingRight && 'no-padding-right',
+                this.iconRight && 'icon-right',
+                this.variant,
+                this.size,
+                // only override background if variant is set to standard
+                this.backgroundColor &&
+                    this.variant === 'standard' &&
+                    'override-background',
+            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+    }
+    static get is() { return "zonos-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "css class for the component"
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color | (string & { _placeholder?: never })",
+                    "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the button text and svg"
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color | (string & { _placeholder?: never })",
+                    "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the button text and svg\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+                },
+                "attribute": "background-color",
+                "reflect": false
+            },
+            "borderStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiStyle",
+                    "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
+                    "references": {
+                        "ElementsUiStyle": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "ROUNDED"
+                        }],
+                    "text": "The border style of the button"
+                },
+                "attribute": "border-style",
+                "reflect": false
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "note",
+                            "text": "Prop should not conflict name with native html attribute if the prop is also affected by another prop.\nThe issue is the component has internal disabled"
+                        }, {
+                            "name": "prop",
+                            "text": "()."
+                        }, {
+                            "name": "prop",
+                            "text": "decorator is to watch the update of the attribute of the component in the dom.\nAnd `disabled` prop is not an only factor to determine the component is disabled. isLoading"
+                        }, {
+                            "name": "prop",
+                            "text": "() also affect that.\n<Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.\nSo let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.\nIt accidentally turns the disabled prop on even thought the disabled state is not changed from the outside."
+                        }],
+                    "text": "Whether or not the button is disabled"
+                },
+                "attribute": "is-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLZonosIconElement | null",
+                    "resolved": "HTMLZonosIconElement | null",
+                    "references": {
+                        "HTMLZonosIconElement": {
+                            "location": "global",
+                            "id": "global::HTMLZonosIconElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "The icon element to display"
+                },
+                "defaultValue": "null"
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not the icon is on the right"
+                },
+                "attribute": "icon-right",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'sm'"
+                        }],
+                    "text": "The size of the button"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'sm'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'primary'\n    | 'success'\n    | 'subtle'\n    | 'outline'\n    | 'standard'\n    | 'danger'\n    | 'warning'",
+                    "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variance of the button\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'standard'"
+            },
+            "noBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not the button has a background"
+                },
+                "attribute": "no-background",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noPaddingLeft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the button has a left padding"
+                },
+                "attribute": "no-padding-left",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noPaddingRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the button has a right padding"
+                },
+                "attribute": "no-padding-right",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the button is loading"
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiTheme",
+                    "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
+                    "references": {
+                        "ElementsUiTheme": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the button"
+                },
+                "attribute": "theme",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The theme of the button"
-        },
-        "attribute": "theme",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasIcon": {},
-      "hasContent": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "icon",
-        "methodName": "iconChangeHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "clickHandler",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasContent": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "iconChangeHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "clickHandler",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
 }