/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __decorate } from "tslib";
import { h, Host } from "@stencil/core";
import { BaseWebComponent } from "../../../../internal/functional-components/base-web-component";
import { SkeletonFC } from "../../../../internal/functional-components/skeleton/component";
import { SkeletonController } from "../../../../internal/functional-components/skeleton/controller";
import { Log } from "../../../../schema";
import { createCtaRef, delegateFocus } from "../../../../utils/element-interaction";
export class KolSkeleton extends BaseWebComponent {
    constructor() {
        this.ctrl = new SkeletonController(this.stateAccess);
        this.buttonRef = createCtaRef();
        this.count = 0;
        this.label = 'Label';
        this.show = true;
        super();
    }
    async focus(options) { }
    async toggle() {
        return Promise.resolve(this.ctrl.toggle());
    }
    watchName(value) {
        this.ctrl.watchName(value);
    }
    handleKeyDown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            Log.debug('button pressed');
            this.ctrl.handleClick();
        }
    }
    onKeydown(event) {
        this.ctrl.onKeydown(event);
    }
    componentWillLoad() {
        this.ctrl.componentWillLoad({
            name: this._name,
        });
        this.ctrl.setOnLoadedCallback((count) => {
            this.loaded.emit(count);
        });
    }
    componentDidLoad() {
        requestAnimationFrame(() => {
            this.rendered.emit();
        });
    }
    disconnectedCallback() {
        this.ctrl.destroy();
    }
    render() {
        return (h(Host, { key: 'e7e29ff558a0f2d6eebba4d8b2247ee269836bb5' }, h(SkeletonFC, { key: '949256a8455d79b2ea97182ecbf509fb0f3e59ee', count: this.count, label: this.label, name: this.ctrl.getRenderProp('name'), handleClick: this.ctrl.handleClick, onLoaded: this.loaded, onRendered: this.rendered, show: this.show, refButton: (element) => {
                this.buttonRef(element);
                this.ctrl.setButtonRef(element);
            } })));
    }
    static get is() { return "kol-skeleton"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "_name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the name of the skeleton component."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_name"
            }
        };
    }
    static get states() {
        return {
            "count": {},
            "label": {},
            "show": {}
        };
    }
    static get events() {
        return [{
                "method": "loaded",
                "name": "loaded",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the skeleton has finished loading."
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }, {
                "method": "rendered",
                "name": "rendered",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the skeleton has been rendered for the first time."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "focus": {
                "complexType": {
                    "signature": "(options?: KolFocusOptions) => Promise<void>",
                    "parameters": [{
                            "name": "options",
                            "type": "KolFocusOptions | undefined",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "KolFocusOptions": {
                            "location": "import",
                            "path": "../../../../schema",
                            "id": "src/schema/index.ts::KolFocusOptions"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Focuses the interactive element of the component.",
                    "tags": []
                }
            },
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Toggles the visibility of the skeleton component.",
                    "tags": []
                }
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "_name",
                "methodName": "watchName"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "keydown",
                "method": "onKeydown",
                "target": "window",
                "capture": false,
                "passive": false
            }];
    }
}
__decorate([
    delegateFocus('buttonRef')
], KolSkeleton.prototype, "focus", null);
//# sourceMappingURL=component.js.map
