/*!
 * KoliBri - The accessible HTML-Standard
 */
'use strict';

var index = require('./index-DBbl8tEq.js');
var componentNames = require('./component-names-5KS_pYRF.js');
var common = require('./common-DAAt5YQ7.js');
var label = require('./label-VzToxIES.js');
var clsx = require('./clsx-Bm_HQUnh.js');
var dev_utils = require('./dev.utils-Cdn-EtYb.js');
var events = require('./events-DN9qldnr.js');
var tooltipOpenTracking = require('./tooltip-open-tracking-Ba0udJRU.js');
var validation = require('./validation-DwarFcC9.js');
require('./level-VjfppjxT.js');
require('./normalizers-R90MJyQR.js');
require('./_Uint8Array-BAQUGozM.js');
require('./isArray-BOIOdEQh.js');

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

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

const KolDialogWc = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.cardHeadingId = dev_utils.createUniqueId('dialog-heading');
        this.isModal = true;
        this._cardOn = { onClose: () => void this.close() };
        this.handleCancelEvent = (event) => {
            var _a, _b;
            tooltipOpenTracking.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 && !events.dispatchDomEvent(this.host, events.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) {
            events.dispatchDomEvent(this.host, events.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 (index.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.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' && index.h("slot", { key: '183bbb7224ca0ec06bbd84e354fa7b58882a4879' }), this.state._variant === 'card' && (index.h(componentNames.KolCardWcTag, { key: 'e0270ea31e33d61760aa8fca356c08f88a56fffe', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, index.h("slot", { key: 'a18c03fd1f0cdcc25a8bddfffd5b0753fc81cdb5' })))));
    }
    validateLabel(value) {
        label.validateLabel(this, value, {
            required: true,
        });
    }
    validateLevel(value) {
        validation.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;
            }
            common.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 index.getElement(this); }
    static get watchers() { return {
        "_label": ["validateLabel"],
        "_level": ["validateLevel"],
        "_on": ["validateOn"],
        "_width": ["validateWidth"],
        "_variant": ["validateVariant"]
    }; }
};

exports.kol_dialog_wc = KolDialogWc;
//# sourceMappingURL=kol-dialog-wc.entry.cjs.js.map
