import { h, Host } from "@stencil/core";
import { CollapsibleClass, CollapsibleSizes, } from "./constants";
import { booleanString, govHost } from "../../helpers/Dom/template";
import { validateProp } from "../../helpers/Validate/props";
import { AttributeObserver } from "../../helpers/Dom/attribute";
import { createID } from "../../utils/string.utils";
import { ariaAttributes } from "../../helpers/Accessibility/attributes";
import { inheritAriaAttributes } from "../../helpers/Accessibility/accessibility";
export class GovCollapsible {
    constructor() {
        this.hydrated = false;
        /**
         * Element size.
         */
        this.size = 'm';
        /**
         * Makes component disabled.
         */
        this.disabled = false;
        /**
         * Defines whether the collapsible is open or closed
         */
        this.open = false;
        this.inheritedAttributes = {};
        this.h = govHost(this.host);
        this.triggerId = createID("GovCollapsibleControl");
        this.contentId = createID("GovCollapsibleContent");
    }
    validateSize(newValue) {
        validateProp(CollapsibleSizes, newValue, CollapsibleClass.root);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
    }
    componentWillLoad() {
        this.validateSize(this.size);
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    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();
    }
    connectedCallback() {
        this.hydrated = true;
    }
    render() {
        return (h(Host, { key: '3c9284a4fdbf445f402693b15c5269c8e5b98372', hydrated: this.hydrated, class: this.h.classes([CollapsibleClass.root, this.disabled && CollapsibleClass.disabled]), size: this.size }, h("gov-button", Object.assign({ key: 'db793476b0b8ed5ecc44dd2191b3cf26c0a97e86', color: 'primary', size: this.size, type: 'link', disabled: this.disabled, "onGov-click": (e) => {
                e.stopPropagation();
                e.preventDefault();
                this.open = !this.open;
            } }, this.inheritedAttributes, { identifier: this.triggerId, "aria-controls": this.contentId, "aria-expanded": booleanString(this.open), "aria-haspopup": "true" }), this.label, h("gov-icon", { key: 'c230a7d2553c0858ddf24c6f9c7afbc249cd7f8e', slot: 'icon-end', name: this.open ? 'chevron-up' : 'chevron-down', type: "components" })), h("div", { key: '64e787e14f8773dae11f0e54658984f3622b8b47', class: CollapsibleClass.content, hidden: !this.open, id: this.contentId, "aria-labelledby": this.triggerId, "aria-hidden": booleanString(!this.open) }, h("slot", { key: '1e09e5a7242946af30012b68beb38119865003ec' }))));
    }
    static get is() { return "gov-collapsible"; }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "CollapsibleSizesType",
                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                    "references": {
                        "CollapsibleSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-collapsible/constants.ts::CollapsibleSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element size."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'m'"
            },
            "identifier": {
                "type": "string",
                "attribute": "identifier",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Custom input identifier."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "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 component disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "open": {
                "type": "boolean",
                "attribute": "open",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the collapsible is open or closed"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "inheritedAttributes": {}
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "size",
                "methodName": "validateSize"
            }];
    }
}
//# sourceMappingURL=gov-collapsible.js.map
