import { h, Host } from "@stencil/core";
import { validateProp } from "../../helpers/Validate/props";
import { govHost } from "../../helpers/Dom/template";
import { ChipClass, ChipSizes, NativeType } from "./constants";
import { ButtonColors, ButtonSizes } from "../gov-button/button/constants";
import { createID } from "../../utils/string.utils";
import { prepareIconFormat } from "../gov-icon/helpers";
import { inheritAriaAttributes } from "../../helpers/Accessibility/accessibility";
import { ariaAttributes } from "../../helpers/Accessibility/attributes";
import { AttributeObserver } from "../../helpers/Dom/attribute";
export class GovChip {
    constructor() {
        this.hydrated = false;
        /**
         * Makes the chip component disabled.
         */
        this.disabled = false;
        /**
         * Chip’s size.
         */
        this.size = ChipSizes._M;
        /**
         * Used to change the HTML tag in the chip
         */
        this.tag = "span";
        /**
         * Style variation of the chip.
         */
        this.color = ButtonColors.PRIMARY;
        /**
         * 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);
        this.chipId = createID('GovChip');
    }
    validateColor(newValue) {
        validateProp(ButtonColors, newValue, ChipClass.root);
    }
    validateSize(newValue) {
        validateProp(ButtonSizes, newValue, ChipClass.root);
    }
    componentWillLoad() {
        this.validateColor(this.color);
        this.validateSize(this.size);
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    connectedCallback() {
        this.hydrated = true;
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    render() {
        const Tag = this.href ? NativeType.A : this.tag;
        const nativeType = Tag == NativeType.BUTTON ? NativeType.BUTTON : undefined;
        const iconStart = prepareIconFormat(this.iconStart);
        const iconEnd = prepareIconFormat(this.iconEnd);
        return (h(Host, { key: 'ef86316065b17ea753e6f46944203be579c9669c', class: this.h.classes([
                ChipClass.root,
                this.h.hasSlot("right") ? ChipClass.hasRight : undefined,
                this.h.hasSlot("left") ? ChipClass.hasLeft : undefined,
            ]), disabled: this.disabled, href: this.href, color: this.color, type: this.type, size: this.size, focusable: this.focusable, hydrated: this.hydrated }, h(Tag, Object.assign({ key: '0ecb833e5c5f4e30914d9f12764b78bfd22973b6', class: "element", href: this.href, target: this.target, ref: el => (this.triggerRef = el), onClick: this.onClickHandler.bind(this), tabindex: (this.h.hasSlot("left") || this.h.hasSlot("right") || this.disabled || !this.focusable) ? "-1" : "0", id: this.identifier || this.chipId, type: nativeType }, this.inheritedAttributes, { "aria-disabled": this.disabled }), h("slot", { key: '9793b743f288573932aec95f68c0f1b1bb617add', name: "left" }), h("slot", { key: 'be7cc7cb0a94c666faf842d8ee70701245305001', name: "icon-start" }, iconStart && h("gov-icon", { key: '464ebc3d08b609a17e5e126eca9b0fb8eefc2bd4', type: iconStart.type, name: iconStart.name })), h("slot", { key: 'faffc742599b65f40b61b8cbd45e32891f43a869' }), h("slot", { key: 'dce2fa1d55332f8cc3d51e8a11e56735f5bcf683', name: "icon-end" }, iconEnd && h("gov-icon", { key: 'afc841c471bc376cc650150e168d307f3393ef15', type: iconEnd.type, name: iconEnd.name })), h("slot", { key: '16dc2b17d2b813c2ced12ae44c12d621a82c6cb5', name: "right" }))));
    }
    onClickHandler(e) {
        e.stopPropagation();
        if (this.disabled === false && this.tag === NativeType.BUTTON) {
            this.govClick.emit(e);
        }
    }
    /**
     * Returns a clickable element instance
     */
    async geRef() {
        return this.triggerRef;
    }
    /**
     * Focus button element
     */
    async setFocus() {
        this.triggerRef.focus();
    }
    static get is() { return "gov-chip"; }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the chip component disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "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": "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-target"
                        }],
                    "text": "Same as original parameter"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "iconStart": {
                "type": "string",
                "attribute": "icon-start",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Definition of the button icon on the left. The icon must be defined in the form \"type/name\"."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "iconEnd": {
                "type": "string",
                "attribute": "icon-end",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Definition of the button icon on the left. The icon must be defined in the form \"type/name\"."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "ChipSizesType",
                    "resolved": "\"m\" | \"s\" | \"xs\"",
                    "references": {
                        "ChipSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-chip/constants.ts::ChipSizesType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Chip\u2019s size."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "ChipSizes._M"
            },
            "tag": {
                "type": "string",
                "attribute": "tag",
                "mutable": false,
                "complexType": {
                    "original": "NativeTypesType",
                    "resolved": "\"a\" | \"button\" | \"span\"",
                    "references": {
                        "NativeTypesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-chip/constants.ts::NativeTypesType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Used to change the HTML tag in the chip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"span\""
            },
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "ButtonColorType",
                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
                    "references": {
                        "ButtonColorType": {
                            "location": "import",
                            "path": "../gov-button/button/constants",
                            "id": "../../../packages/core/src/components/gov-button/button/constants.ts::ButtonColorType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Style variation of the chip."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "ButtonColors.PRIMARY"
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "ChipTypesType",
                    "resolved": "\"outlined\" | \"solid\"",
                    "references": {
                        "ChipTypesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-chip/constants.ts::ChipTypesType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Chip\u2019s type"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "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 chip identifier. Otherwise, it will be generated"
                },
                "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": "PointerEvent",
                    "resolved": "PointerEvent",
                    "references": {
                        "PointerEvent": {
                            "location": "global",
                            "id": "global::PointerEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "geRef": {
                "complexType": {
                    "signature": "() => Promise<HTMLLinkElement | HTMLButtonElement | HTMLSpanElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLLinkElement": {
                            "location": "global",
                            "id": "global::HTMLLinkElement"
                        },
                        "HTMLButtonElement": {
                            "location": "global",
                            "id": "global::HTMLButtonElement"
                        },
                        "HTMLSpanElement": {
                            "location": "global",
                            "id": "global::HTMLSpanElement"
                        }
                    },
                    "return": "Promise<HTMLLinkElement | HTMLButtonElement | HTMLSpanElement>"
                },
                "docs": {
                    "text": "Returns a clickable element instance",
                    "tags": []
                }
            },
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Focus button element",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "color",
                "methodName": "validateColor"
            }, {
                "propName": "size",
                "methodName": "validateSize"
            }];
    }
}
//# sourceMappingURL=gov-chip.js.map
