import { h, Host } from "@stencil/core";
import { SkeletonAnimation, SkeletonClass, SkeletonShapes, SkeletonSizes, } from "./constants";
import { govHost } from "../../../helpers/Dom/template";
import { validateProp } from "../../../helpers/Validate/props";
import { AttributeObserver } from "../../../helpers/Dom/attribute";
import { ariaAttributes } from "../../../helpers/Accessibility/attributes";
import { inheritAriaAttributes } from "../../../helpers/Accessibility/accessibility";
export class GovSkeleton {
    constructor() {
        /**
         * Input’s size.
         */
        this.size = "m";
        /**
         * Style variation of the skeleton.
         */
        this.color = "neutral";
        /**
         * Shape of the skeleton
         */
        this.shape = "line";
        /**
         * Width of the skeleton ex. 100px, 100%, auto etc.
         */
        this.width = null;
        /**
         * Height of the skeleton ex. 100px, 100%, auto etc.
         */
        this.height = null;
        /**
         * Animation type
         */
        this.animation = "progress";
        this.items = [];
        this.inheritedAttributes = {};
        this.h = govHost(this.host);
    }
    validateSize(newValue) {
        validateProp(SkeletonSizes, newValue, SkeletonClass.root);
    }
    validateShape(newValue) {
        validateProp(SkeletonShapes, newValue, SkeletonClass.root);
    }
    validateAnimation(newValue) {
        validateProp(SkeletonAnimation, newValue, SkeletonClass.root);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
    }
    componentWillLoad() {
        this.validateSize(this.size);
        this.validateShape(this.shape);
        this.validateAnimation(this.animation);
        this.init();
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    componentWillUpdate() {
        this.init();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    init() {
        this.items.fill(1);
    }
    render() {
        return (h(Host, Object.assign({ key: '871f22b2b3bd0c92c75b81b4d649246414c01b97', size: this.size, color: this.color, class: {
                [SkeletonClass.root]: true,
                circle: this.shape === "circle",
                line: this.shape === "line",
                progress: this.animation === "progress",
                pulse: this.animation === "pulse",
            } }, this.inheritedAttributes, { "aria-busy": "true", "aria-valuemin": "0", "aria-valuemax": "100", role: "progressbar", tabindex: "0", style: { width: this.width, height: this.height } })));
    }
    static get is() { return "gov-skeleton"; }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "FormInputSizesType",
                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                    "references": {
                        "FormInputSizesType": {
                            "location": "import",
                            "path": "../../gov-form/input/constants",
                            "id": "../../../packages/core/src/components/gov-form/input/constants.ts::FormInputSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Input\u2019s size."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "\"m\""
            },
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "SkeletonColorType",
                    "resolved": "\"neutral\" | \"primary\"",
                    "references": {
                        "SkeletonColorType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-loading/skeleton/constants.ts::SkeletonColorType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Style variation of the skeleton."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"neutral\""
            },
            "shape": {
                "type": "string",
                "attribute": "shape",
                "mutable": false,
                "complexType": {
                    "original": "SkeletonShapesType",
                    "resolved": "\"circle\" | \"line\"",
                    "references": {
                        "SkeletonShapesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-loading/skeleton/constants.ts::SkeletonShapesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Shape of the skeleton"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"line\""
            },
            "width": {
                "type": "string",
                "attribute": "width",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Width of the skeleton ex. 100px, 100%, auto etc."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "null"
            },
            "height": {
                "type": "string",
                "attribute": "height",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Height of the skeleton ex. 100px, 100%, auto etc."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "null"
            },
            "animation": {
                "type": "string",
                "attribute": "animation",
                "mutable": false,
                "complexType": {
                    "original": "SkeletonAnimationType",
                    "resolved": "\"false\" | \"progress\" | \"pulse\"",
                    "references": {
                        "SkeletonAnimationType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-loading/skeleton/constants.ts::SkeletonAnimationType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Animation type"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"progress\""
            }
        };
    }
    static get states() {
        return {
            "inheritedAttributes": {}
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "size",
                "methodName": "validateSize"
            }, {
                "propName": "shape",
                "methodName": "validateShape"
            }, {
                "propName": "animation",
                "methodName": "validateAnimation"
            }];
    }
}
//# sourceMappingURL=gov-skeleton.js.map
