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

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

@@ -1,710 +0,0 @@
-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: '0d010913c0331fcb11918152cb9bb2598923c5eb', size: this.size, hydrated: this.hydrated, color: this.color, class: this.h.classes(ButtonClass.root), type: this.type }, h(Tag, Object.assign({ key: 'd413645e924857fb5451c8e03c986013d85ddc06', 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: '13528203c29059fe167ca9b6f1f9134415517d47', name: "loader", class: "gov-spin-animation", type: "components" }), this.h.hasSlot("icon-start") && h("slot", { key: '304d82f1e7136a3f11ab44ce5e5b3166c2be2976', name: "icon-start" }), h("slot", { key: '6bc84a79e2acc72405c7b6831951d4984e5a6092' }), this.h.hasSlot("icon-end") && h("slot", { key: '044971729141feb76253c649de01db88e9459ccf', name: "icon-end" }), toBool(this.loading) && this.h.hasSlot("icon-end") &&
-            h("gov-icon", { key: 'b55541b4d8ec377ec0aa9c80596b212306a5c02a', 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.\r\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\r\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