/*!
 * KoliBri - The accessible HTML-Standard
 */
import { r as registerInstance, h, g as getElement } from './index-Brmny3Vg.js';
import { d as KolCardWcTag } from './component-names-Dy77vq43.js';
import { g as watchString, b as watchValidator, s as setState } from './common-DEEjER7G.js';
import { v as validateLabel } from './label-Cg7TG_7b.js';
import { c as clsx } from './clsx-COFh-Vc8.js';
import { c as createUniqueId } from './dev.utils-HhhlYW_9.js';
import { d as dispatchDomEvent, K as KolEvent } from './events-BhfZTW2e.js';
import { h as handleCancelOverlay } from './tooltip-open-tracking-D3tCiiGP.js';
import { w as watchHeadingLevel } from './validation-VhuthteS.js';
import './level-CfQolHx4.js';
import './normalizers-pgU77mXp.js';
import './_Uint8Array-kJHDjtoP.js';
import './isArray-CcrBs4JM.js';

const validateWidth = (component, value, options) => {
    watchString(component, '_width', value, Object.assign({ defaultValue: '100%' }, options));
};

const DialogVariantPropTypeOptions = ['blank', 'card'];
const validateDialogVariant = (component, value) => {
    watchValidator(component, '_variant', (value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value), new Set(DialogVariantPropTypeOptions), value);
};

const KolDialogWc = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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) {
        validateDialogVariant(this, value);
    }
    componentWillLoad() {
        this.validateLabel(this._label);
        this.validateLevel(this._level);
        this.validateOn(this._on);
        this.validateWidth(this._width);
        this.validateVariant(this._variant);
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "_label": ["validateLabel"],
        "_level": ["validateLevel"],
        "_on": ["validateOn"],
        "_width": ["validateWidth"],
        "_variant": ["validateVariant"]
    }; }
};

export { KolDialogWc as kol_dialog_wc };
//# sourceMappingURL=kol-dialog-wc.entry.js.map
