/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h } from "@stencil/core";
import { KolCardWcTag } from "../../core/component-names";
import { setState, validateLabel, validateWidth } from "../../schema";
import { validateModalVariant } from "../../schema/props/variant/modal";
import clsx from "../../utils/clsx";
import { createUniqueId } from "../../utils/dev.utils";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
import { handleCancelOverlay } from "../../utils/tooltip-open-tracking";
import { watchHeadingLevel } from "../heading/validation";
export class KolDialogWc {
    constructor() {
        this.cardHeadingId = createUniqueId('dialog-heading');
        this.isModal = true;
        this._cardOn = { onClose: () => void this.close() };
        this.handleCancelEvent = (event) => {
            var _a, _b;
            handleCancelOverlay(event);
            if (event.defaultPrevented)
                return;
            (_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event);
            if (event.defaultPrevented)
                return;
            if (this.host && !dispatchDomEvent(this.host, KolEvent.cancel)) {
                event.preventDefault();
            }
        };
        this._level = 0;
        this._width = '100%';
        this._variant = 'blank';
        this.state = {
            _label: '',
            _width: '100%',
        };
    }
    disconnectedCallback() {
        void this.close();
    }
    handleNativeCloseEvent(event) {
        var _a;
        if (event.target !== this.refDialog) {
            return;
        }
        if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === 'function') {
            this.state._on.onClose();
        }
        if (this.host) {
            dispatchDomEvent(this.host, KolEvent.close);
        }
    }
    async show(modal = false) {
        var _a, _b, _c, _d, _e;
        if ((_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.open) {
            return;
        }
        this.isModal = modal;
        if (modal) {
            (_c = (_b = this.refDialog) === null || _b === void 0 ? void 0 : _b.showModal) === null || _c === void 0 ? void 0 : _c.call(_b);
        }
        else {
            (_e = (_d = this.refDialog) === null || _d === void 0 ? void 0 : _d.show) === null || _e === void 0 ? void 0 : _e.call(_d);
        }
    }
    showModal() {
        return this.show(true);
    }
    openModal() {
        return this.showModal();
    }
    async close() {
        var _a, _b;
        (_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
    }
    closeModal() {
        return this.close();
    }
    render() {
        return (h("dialog", { key: '740fd9b18343e873a7961173848be648bbd0ff8a', "aria-label": this.state._variant === 'blank' ? this.state._label : undefined, "aria-labelledby": this.state._variant === 'card' ? this.cardHeadingId : undefined, "aria-modal": this.isModal ? 'true' : 'false', class: clsx('kol-dialog', 'kol-modal', {
                'kol-dialog__blank': this.state._variant === 'blank',
                'kol-dialog__card': this.state._variant === 'card',
                'kol-modal__blank': this.state._variant === 'blank',
                'kol-modal__card': this.state._variant === 'card',
            }), onCancel: this.handleCancelEvent, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
                this.refDialog = el;
            }, style: {
                width: this.state._width,
            } }, this.state._variant === 'blank' && h("slot", { key: '183bbb7224ca0ec06bbd84e354fa7b58882a4879' }), this.state._variant === 'card' && (h(KolCardWcTag, { key: 'e0270ea31e33d61760aa8fca356c08f88a56fffe', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, h("slot", { key: 'a18c03fd1f0cdcc25a8bddfffd5b0753fc81cdb5' })))));
    }
    validateLabel(value) {
        validateLabel(this, value, {
            required: true,
        });
    }
    validateLevel(value) {
        watchHeadingLevel(this, value);
    }
    validateOn(value) {
        if (typeof value === 'object' && value !== null) {
            const callbacks = {};
            if (typeof value.onCancel === 'function') {
                callbacks.onCancel = value.onCancel;
            }
            if (typeof value.onClose === 'function') {
                callbacks.onClose = value.onClose;
            }
            setState(this, '_on', callbacks);
        }
    }
    validateWidth(value) {
        validateWidth(this, value);
    }
    validateVariant(value) {
        validateModalVariant(this, value);
    }
    componentWillLoad() {
        this.validateLabel(this._label);
        this.validateLevel(this._level);
        this.validateOn(this._on);
        this.validateWidth(this._width);
        this.validateVariant(this._variant);
    }
    static get is() { return "kol-dialog-wc"; }
    static get properties() {
        return {
            "_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": "KoliBriDialogEventCallbacks",
                    "resolved": "undefined | ({ onCancel?: ((event: Event) => void) | undefined; onClose?: (() => void) | undefined; onToggle?: ((open: boolean) => void) | undefined; })",
                    "references": {
                        "KoliBriDialogEventCallbacks": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KoliBriDialogEventCallbacks"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the modal callback functions."
                },
                "getter": false,
                "setter": false
            },
            "_width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the width of the modal. (max-width: 100%)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_width",
                "defaultValue": "'100%'"
            },
            "_variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ModalVariantPropType",
                    "resolved": "\"blank\" | \"card\" | undefined",
                    "references": {
                        "ModalVariantPropType": {
                            "location": "import",
                            "path": "../../schema/props/variant/modal",
                            "id": "src/schema/props/variant/modal.ts::ModalVariantPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the variant of the modal."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_variant",
                "defaultValue": "'blank'"
            }
        };
    }
    static get states() {
        return {
            "isModal": {},
            "state": {}
        };
    }
    static get methods() {
        return {
            "show": {
                "complexType": {
                    "signature": "(modal?: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "modal",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Opens the dialog. Pass true to open as a modal dialog.",
                    "tags": []
                }
            },
            "showModal": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Opens the dialog as a modal.",
                    "tags": []
                }
            },
            "openModal": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Opens the dialog as a modal.",
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use showModal() instead."
                        }]
                }
            },
            "close": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Closes the dialog.",
                    "tags": []
                }
            },
            "closeModal": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Closes the dialog.",
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use close() instead."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_label",
                "methodName": "validateLabel"
            }, {
                "propName": "_level",
                "methodName": "validateLevel"
            }, {
                "propName": "_on",
                "methodName": "validateOn"
            }, {
                "propName": "_width",
                "methodName": "validateWidth"
            }, {
                "propName": "_variant",
                "methodName": "validateVariant"
            }];
    }
}
//# sourceMappingURL=component.js.map
