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

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import './common.js';
import { s as setState } from './prop.validators.js';
import { v as validateHasCloser } from './has-closer.js';
import { v as validateLabel } from './label.js';
import { t as translate } from './i18n.js';
import { w as watchHeadingLevel } from './validation.js';
import { b as KolButtonWcTag } from './component-names.js';
import './Alert.js';
import { c as createUniqueId } from './dev.utils.js';
import { K as KolHeadingFc } from './Heading.js';
import './variant-quote.js';
import './component2.js';
import { d as dispatchDomEvent, K as KolEvent } from './events.js';

const KolCardWc$1 = proxyCustomElement(class KolCardWc extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.translateClose = translate('kol-close');
        this.close = () => {
            var _a;
            if (((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClose) !== undefined) {
                this._on.onClose(new Event('Close'));
            }
            if (this.host) {
                dispatchDomEvent(this.host, KolEvent.close);
            }
        };
        this.on = {
            onClick: this.close,
        };
        this._hasCloser = false;
        this._headingId = createUniqueId('card-heading');
        this._level = 0;
        this.state = {
            _label: '',
        };
        this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
    }
    render() {
        return (h(Host, { key: '909cc395209bdb2eba2f674f5fe9f4b8750fccef' }, h("article", { key: '8bbd3d853a4ea8bc6f83dedf245414e8d9421461', "aria-labelledby": this._headingId, class: "kol-card" }, h(KolHeadingFc, { key: '2609f6812d8d909de20b00162cb119b32c0d7f23', class: "kol-card__header", id: this._headingId, level: this.state._level }, this.state._label), h("div", { key: 'a953cb61794cf76980111256849685184cc5dcf9', class: "kol-card__content" }, h("slot", { key: '31d86a46cb4e9d9cee62692aeea43f08db236ccb' })), this.state._hasCloser && (h(KolButtonWcTag, { key: '763993312892b16856634e6d0d10de5cb1454629', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
                left: {
                    icon: 'kolicon-cross',
                },
            }, _label: this.translateClose, _on: this.on, _tooltipAlign: "left" })))));
    }
    validateHasCloser(value) {
        validateHasCloser(this, value);
    }
    validateLabel(value) {
        validateLabel(this, value, {
            required: true,
        });
    }
    validateLevel(value) {
        watchHeadingLevel(this, value);
    }
    validateOn(value) {
        if (this.validateOnValue(value)) {
            setState(this, '_on', {
                onClose: value.onClose,
            });
        }
    }
    componentWillLoad() {
        this.validateHasCloser(this._hasCloser);
        this.validateLabel(this._label);
        this.validateLevel(this._level);
        this.validateOn(this._on);
    }
    get host() { return this; }
    static get watchers() { return {
        "_hasCloser": ["validateHasCloser"],
        "_label": ["validateLabel"],
        "_level": ["validateLevel"],
        "_on": ["validateOn"]
    }; }
}, [260, "kol-card-wc", {
        "_hasCloser": [4, "_has-closer"],
        "_headingId": [1, "_heading-id"],
        "_label": [1],
        "_level": [2],
        "_on": [16],
        "state": [32]
    }, undefined, {
        "_hasCloser": ["validateHasCloser"],
        "_label": ["validateLabel"],
        "_level": ["validateLevel"],
        "_on": ["validateOn"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kol-card-wc"];
    components.forEach(tagName => { switch (tagName) {
        case "kol-card-wc":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KolCardWc$1);
            }
            break;
    } });
}

const KolCardWc = KolCardWc$1;
const defineCustomElement = defineCustomElement$1;

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

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