@gov-design-system-ce/components 4.6.2 → 4.6.3

package/dist/collection/components/gov-button/button/gov-button.js

@@ -0,0 +1,710 @@
+import { h, Host } from "@stencil/core";
+import { validateProp } from "../../../helpers/Validate/props";
+import { ButtonClass, ButtonColors, ButtonType, NativeType, } from "./constants";
+import { govHost, toBoolAttrIfDefined } from "../../../helpers/Dom/template";
+import { toBool } from "../../../utils/bool.utils";
+import { Sizes } from "../../../core/constants/sizes";
+import { validateAccessibleLabel } from "../../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
+import { delay } from "../../../utils/utils";
+import { inheritAriaAttributes } from "../../../helpers/Accessibility/accessibility";
+import { ariaAttributes } from "../../../helpers/Accessibility/attributes";
+import { AttributeObserver } from "../../../helpers/Dom/attribute";
+var Tags;
+(function (Tags) {
+    Tags["A"] = "a";
+    Tags["BUTTON"] = "button";
+})(Tags || (Tags = {}));
+export class GovButton {
+    constructor() {
+        this.hydrated = false;
+        /**
+         * Button’s size
+         */
+        this.size = "m";
+        /**
+         * Expands the button to fill 100% of the container width
+         */
+        this.expanded = false;
+        /**
+         * Expands the button to fill 100% of the container width only on mobile
+         */
+        this.expandedMobile = false;
+        /**
+         * Makes the button component disabled.
+         * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies
+         */
+        this.disabled = false;
+        /**
+         * Same as original parameter
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type
+         */
+        this.nativeType = "button";
+        /**
+         * Same as original parameter
+         * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+         */
+        this.tab = 0;
+        /**
+         * Same as original parameter
+         * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable
+         */
+        this.focusable = true;
+        this.inheritedAttributes = {};
+        this.h = govHost(this.host);
+    }
+    validateColor(newValue) {
+        validateProp(ButtonColors, newValue, ButtonClass.root);
+    }
+    validateType(newValue) {
+        validateProp(ButtonType, newValue, ButtonClass.root);
+    }
+    validateSize(newValue) {
+        validateProp(Sizes, newValue, ButtonClass.root);
+    }
+    validateNativeType(newValue) {
+        validateProp(NativeType, newValue, ButtonClass.root);
+    }
+    componentDidLoad() {
+        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(ariaAttributes);
+    }
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
+    }
+    componentWillLoad() {
+        this.validateColor(this.color);
+        this.validateType(this.type);
+        this.validateSize(this.size);
+        this.validateNativeType(this.nativeType);
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
+    }
+    async componentDidRender() {
+        if (canValidateWcagOnRender()) {
+            await delay(500);
+            await this.validateAccessibility();
+        }
+    }
+    connectedCallback() {
+        this.hydrated = true;
+    }
+    render() {
+        const Tag = this.href ? Tags.A : Tags.BUTTON;
+        const nativeType = Tag === Tags.A ? undefined : this.nativeType;
+        return (h(Host, { key: 'be41c5da0a82fa7c16239527bc720510de8ecbd5', size: this.size, hydrated: this.hydrated, color: this.color, class: this.h.classes(ButtonClass.root), type: this.type }, h(Tag, Object.assign({ key: 'c46f9288bccd35208999be6e0b3fbdc53097e9eb', class: "element", ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), disabled: this.disabled, id: this.identifier, href: this.href, target: this.target, download: this.download, hreflang: this.hreflang, rel: this.rel, name: this.name, type: nativeType, tabindex: this.disabled ? "-1" : this.tab }, this.inheritedAttributes, { "aria-disabled": toBoolAttrIfDefined(this.disabled) }), toBool(this.loading) && !this.h.hasSlot("icon-end") &&
+            h("gov-icon", { key: '051f379ac0f6095662027cb21aa97167d641aeb9', name: "loader", class: "gov-spin-animation", type: "components" }), this.h.hasSlot("icon-start") && h("slot", { key: 'f727f494903fa51f278cf7bbd4045dff83bf735d', name: "icon-start" }), h("slot", { key: 'dfb09a744c1ef48ef8fd5af7e833b28cf4138d89' }), this.h.hasSlot("icon-end") && h("slot", { key: '1d81872f18bf2c66af51eb327b45cd102dec9ec9', name: "icon-end" }), toBool(this.loading) && this.h.hasSlot("icon-end") &&
+            h("gov-icon", { key: '288d436dbc423b0a02701a0c7764b46f2957d7f4', name: "loader", class: "gov-spin-animation", type: "components" }))));
+    }
+    onClickHandler(e) {
+        e.stopPropagation();
+        if (this.disabled === false) {
+            this.govClick.emit({
+                component: ButtonClass.root,
+                originalEvent: e,
+                ref: this.host,
+            });
+        }
+    }
+    onFocusHandler(e) {
+        e.stopPropagation();
+        this.govFocus.emit({
+            component: ButtonClass.root,
+            originalEvent: e,
+            ref: this.host,
+        });
+    }
+    onBlurHandler(e) {
+        e.stopPropagation();
+        this.govBlur.emit({
+            component: ButtonClass.root,
+            originalEvent: e,
+            ref: this.host,
+        });
+    }
+    /**
+     * Focus button element
+     */
+    async setFocus() {
+        this.triggerRef.focus();
+    }
+    /**
+     * Returns a clickable element instance
+     */
+    async getRef() {
+        return this.triggerRef;
+    }
+    /**
+     * Validate the Accessibility attributes of the component
+     */
+    async validateAccessibility() {
+        if (this.focusable) {
+            validateAccessibleLabel(this.triggerRef.getAttribute('aria-label'), this.triggerRef.getAttribute('aria-labelledby'), ButtonClass.root, this.host);
+        }
+    }
+    static get is() { return "gov-button"; }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonColorType",
+                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ButtonColorType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonColorType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Style variation of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSizesType",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "ButtonSizesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonSizesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button\u2019s size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"m\""
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonTypesType",
+                    "resolved": "\"base\" | \"link\" | \"outlined\" | \"solid\"",
+                    "references": {
+                        "ButtonTypesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonTypesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button's type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "expanded": {
+                "type": "boolean",
+                "attribute": "expanded",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expands the button to fill 100% of the container width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "expandedMobile": {
+                "type": "boolean",
+                "attribute": "expanded-mobile",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expands the button to fill 100% of the container width only on mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the button component disabled.\nThis prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "nativeType": {
+                "type": "string",
+                "attribute": "native-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "NativeTypesType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "NativeTypesType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::NativeTypesType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Same as original parameter\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"button\""
+            },
+            "href": {
+                "type": "string",
+                "attribute": "href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "attribute": "target",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonTargetType",
+                    "resolved": "\"_blank\" | \"_new\" | \"_self\"",
+                    "references": {
+                        "ButtonTargetType": {
+                            "location": "import",
+                            "path": "./constants",
+                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonTargetType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "download": {
+                "type": "boolean",
+                "attribute": "download",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tab": {
+                "type": "number",
+                "attribute": "tab",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "hreflang": {
+                "type": "string",
+                "attribute": "hreflang",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "referrerpolicy": {
+                "type": "string",
+                "attribute": "referrerpolicy",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rel": {
+                "type": "string",
+                "attribute": "rel",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "loading": {
+                "type": "string",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether an asynchronous process is running"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "focusable": {
+                "type": "boolean",
+                "attribute": "focusable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/focusable"
+                        }],
+                    "text": "Same as original parameter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "identifier": {
+                "type": "string",
+                "attribute": "identifier",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom button identifier"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inheritedAttributes": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "govClick",
+                "name": "gov-click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button click"
+                },
+                "complexType": {
+                    "original": "ButtonEvent",
+                    "resolved": "ButtonEvent",
+                    "references": {
+                        "ButtonEvent": {
+                            "location": "import",
+                            "path": "./gov-button.types",
+                            "id": "../../../packages/core/src/components/gov-button/button/gov-button.types.ts::ButtonEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "govFocus",
+                "name": "gov-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button has focus"
+                },
+                "complexType": {
+                    "original": "ButtonEvent",
+                    "resolved": "ButtonEvent",
+                    "references": {
+                        "ButtonEvent": {
+                            "location": "import",
+                            "path": "./gov-button.types",
+                            "id": "../../../packages/core/src/components/gov-button/button/gov-button.types.ts::ButtonEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "govBlur",
+                "name": "gov-blur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button loses focus"
+                },
+                "complexType": {
+                    "original": "ButtonEvent",
+                    "resolved": "ButtonEvent",
+                    "references": {
+                        "ButtonEvent": {
+                            "location": "import",
+                            "path": "./gov-button.types",
+                            "id": "../../../packages/core/src/components/gov-button/button/gov-button.types.ts::ButtonEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus button element",
+                    "tags": []
+                }
+            },
+            "getRef": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLLinkElement | HTMLButtonElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLLinkElement": {
+                            "location": "global",
+                            "id": "global::HTMLLinkElement"
+                        },
+                        "HTMLButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLButtonElement"
+                        }
+                    },
+                    "return": "Promise<HTMLLinkElement | HTMLButtonElement>"
+                },
+                "docs": {
+                    "text": "Returns a clickable element instance",
+                    "tags": []
+                }
+            },
+            "validateAccessibility": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validate the Accessibility attributes of the component",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "validateColor"
+            }, {
+                "propName": "type",
+                "methodName": "validateType"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
+            }, {
+                "propName": "nativeType",
+                "methodName": "validateNativeType"
+            }];
+    }
+}
+//# sourceMappingURL=gov-button.js.map