/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import KolCollapsibleFc from "../../functional-components/Collapsible";
import { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from "../../schema";
import { createUniqueId } from "../../utils/dev.utils";
import { createCtaRef, delegateClick, delegateFocus } from "../../utils/element-interaction";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
import { watchHeadingLevel } from "../heading/validation";
export class KolDetails {
    constructor() {
        this.id = createUniqueId('details');
        this.ctaRef = createCtaRef();
        this.handleOnClick = (event) => {
            this._open = !this._open;
            clearTimeout(this.toggleTimeout);
            this.toggleTimeout = setTimeout(() => {
                var _a, _b;
                if (this.host) {
                    dispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));
                }
                (_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, event, Boolean(this._open));
            }, 25);
        };
        this._disabled = false;
        this._level = 0;
        this._open = false;
        this.state = {
            _label: '',
            _level: 0,
            _on: {},
        };
    }
    async focus(options) { }
    async click() { }
    render() {
        const { _open, _label, _disabled, _level } = this.state;
        const rootClass = 'kol-details';
        const props = {
            id: this.id,
            label: _label,
            open: _open,
            disabled: _disabled,
            level: _level,
            onClick: this.handleOnClick,
            class: rootClass,
            HeadingProps: { class: `${rootClass}__heading` },
            HeadingButtonProps: {
                ref: this.ctaRef,
                class: `${rootClass}__heading-button`,
                _icons: 'kolicon-chevron-right',
            },
            ContentProps: {
                class: `${rootClass}__content indented-text`,
                wrapperClass: `${rootClass}__wrapper`,
                animationClass: `${rootClass}__wrapper-animation`,
            },
        };
        return (h(KolCollapsibleFc, Object.assign({ key: '94f65d0a81d4de069789b27d0c9268f87e0f1e65' }, props), h("slot", { key: '6f90244c5dba596fe510b51093c8bc5602956fce' })));
    }
    validateDisabled(value) {
        validateDisabled(this, value);
    }
    validateLabel(value) {
        validateLabel(this, value, {
            required: true,
        });
    }
    validateLevel(value) {
        watchHeadingLevel(this, value);
    }
    validateOn(on) {
        validateDetailsCallbacks(this, on);
    }
    validateOpen(value) {
        validateOpen(this, value);
    }
    componentWillLoad() {
        this.validateDisabled(this._disabled);
        this.validateLabel(this._label);
        this.validateLevel(this._level);
        this.validateOn(this._on);
        this.validateOpen(this._open);
    }
    static get is() { return "kol-details"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Makes the element not focusable and ignore all events."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_disabled",
                "defaultValue": "false"
            },
            "_label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LabelPropType",
                    "resolved": "string",
                    "references": {
                        "LabelPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::LabelPropType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_label"
            },
            "_level": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "HeadingLevel",
                    "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
                    "references": {
                        "HeadingLevel": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::HeadingLevel"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_level",
                "defaultValue": "0"
            },
            "_on": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DetailsCallbacksPropType<boolean>",
                    "resolved": "undefined | { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> | undefined; }",
                    "references": {
                        "DetailsCallbacksPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::DetailsCallbacksPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the callback functions for details."
                },
                "getter": false,
                "setter": false
            },
            "_open": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "TODO",
                            "text": ": Change type back to `OpenPropType` after Stencil#4663 has been resolved."
                        }],
                    "text": "Opens/expands the element when truthy, closes/collapses when falsy."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "_open",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "state": {}
        };
    }
    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": "Sets focus on the internal element.",
                    "tags": []
                }
            },
            "click": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Triggers a click on the summary/toggle button.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_disabled",
                "methodName": "validateDisabled"
            }, {
                "propName": "_label",
                "methodName": "validateLabel"
            }, {
                "propName": "_level",
                "methodName": "validateLevel"
            }, {
                "propName": "_on",
                "methodName": "validateOn"
            }, {
                "propName": "_open",
                "methodName": "validateOpen"
            }];
    }
}
__decorate([
    delegateFocus('ctaRef')
], KolDetails.prototype, "focus", null);
__decorate([
    delegateClick('ctaRef')
], KolDetails.prototype, "click", null);
//# sourceMappingURL=shadow.js.map
