@public-ui/components/dist/components/kol-alert-wc.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { K as KolAlertFc } from './Alert.js';
import './common.js';
import { a as watchValidator, b as watchBoolean, s as setState } from './prop.validators.js';
import { v as validateHasCloser } from './has-closer.js';
import { v as validateLabel } from './label.js';
import { d as dispatchDomEvent, K as KolEvent } from './events.js';
import { w as watchHeadingLevel } from './validation.js';

const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
const isAlertTypePropType = (value) => {
    return typeof value === 'string' && alertTypeOptions.includes(value);
};
const validateAlertType = (component, value) => {
    watchValidator(component, '_type', isAlertTypePropType, new Set(alertTypeOptions), value);
};

const alertVariantOptions = ['card', 'msg'];
const isAlertVariantPropType = (value) => {
    return typeof value === 'string' && alertVariantOptions.includes(value);
};
const validateAlertVariant = (component, value) => {
    watchValidator(component, '_variant', isAlertVariantPropType, new Set(alertVariantOptions), value);
};

const KolAlertWc$1 = proxyCustomElement(class KolAlertWc extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.close = () => {
            var _a, _b;
            (_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, new Event('Close'));
            if (this.host) {
                dispatchDomEvent(this.host, KolEvent.close);
            }
        };
        this.handleAlertTimeout = () => {
            this.validateAlert(false);
        };
        this._alert = false;
        this._hasCloser = false;
        this._level = 0;
        this._type = 'default';
        this._variant = 'msg';
        this.state = {
            _level: 0,
        };
        this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
    }
    render() {
        const { _alert, _hasCloser, _label, _level, _type, _variant } = this.state;
        const props = {
            alert: _alert,
            hasCloser: _hasCloser,
            label: _label,
            level: _level,
            type: _type,
            variant: _variant,
            onCloserClick: this.close,
            onAlertTimeout: this.handleAlertTimeout,
        };
        return (h(KolAlertFc, Object.assign({ key: 'ab90b52cbda1d61514c3acd292d0bd6d91f0c9d5' }, props), h("slot", { key: '6a7e2a89cfabde71c1140d4cf5de28e99bc09ef4' })));
    }
    validateAlert(value) {
        watchBoolean(this, '_alert', value);
    }
    validateHasCloser(value) {
        validateHasCloser(this, value);
    }
    validateLabel(value) {
        validateLabel(this, value);
    }
    validateLevel(value) {
        watchHeadingLevel(this, value);
    }
    validateOn(value) {
        if (this.validateOnValue(value)) {
            setState(this, '_on', {
                onClose: value.onClose,
            });
        }
    }
    validateType(value) {
        validateAlertType(this, value);
    }
    validateVariant(value) {
        validateAlertVariant(this, value);
    }
    componentWillLoad() {
        this.validateAlert(this._alert);
        this.validateHasCloser(this._hasCloser);
        this.validateLabel(this._label);
        this.validateLevel(this._level);
        this.validateOn(this._on);
        this.validateType(this._type);
        this.validateVariant(this._variant);
    }
    get host() { return this; }
    static get watchers() { return {
        "_alert": ["validateAlert"],
        "_hasCloser": ["validateHasCloser"],
        "_label": ["validateLabel"],
        "_level": ["validateLevel"],
        "_on": ["validateOn"],
        "_type": ["validateType"],
        "_variant": ["validateVariant"]
    }; }
}, [260, "kol-alert-wc", {
        "_alert": [4],
        "_hasCloser": [4, "_has-closer"],
        "_label": [1],
        "_level": [2],
        "_on": [16],
        "_type": [1],
        "_variant": [1],
        "state": [32]
    }, undefined, {
        "_alert": ["validateAlert"],
        "_hasCloser": ["validateHasCloser"],
        "_label": ["validateLabel"],
        "_level": ["validateLevel"],
        "_on": ["validateOn"],
        "_type": ["validateType"],
        "_variant": ["validateVariant"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kol-alert-wc"];
    components.forEach(tagName => { switch (tagName) {
        case "kol-alert-wc":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KolAlertWc$1);
            }
            break;
    } });
}

const KolAlertWc = KolAlertWc$1;
const defineCustomElement = defineCustomElement$1;

export { KolAlertWc, defineCustomElement };
//# sourceMappingURL=kol-alert-wc.js.map

//# sourceMappingURL=kol-alert-wc.js.map