/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h, Host } from "@stencil/core";
import { setState, validateHasCloser, validateLabel } from "../../schema";
import { translate } from "../../i18n";
import { watchHeadingLevel } from "../heading/validation";
import { KolButtonWcTag } from "../../core/component-names";
import { KolHeadingFc } from "../../functional-components";
import { createUniqueId } from "../../utils/dev.utils";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
export class KolCardWc {
    constructor() {
        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);
    }
    static get is() { return "kol-card-wc"; }
    static get properties() {
        return {
            "_hasCloser": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "TODO",
                            "text": ": Change type back to `HasCloserPropType` after Stencil#4663 has been resolved."
                        }],
                    "text": "Defines whether the element can be closed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_has-closer",
                "defaultValue": "false"
            },
            "_headingId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": "Defines the ID of the heading element. If not provided, an internal ID will be generated."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_heading-id",
                "defaultValue": "createUniqueId('card-heading')"
            },
            "_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": "KoliBriCardEventCallbacks",
                    "resolved": "undefined | { onClose?: EventCallback<Event> | undefined; }",
                    "references": {
                        "KoliBriCardEventCallbacks": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KoliBriCardEventCallbacks"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the event callback functions for the component."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "state": {}
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_hasCloser",
                "methodName": "validateHasCloser"
            }, {
                "propName": "_label",
                "methodName": "validateLabel"
            }, {
                "propName": "_level",
                "methodName": "validateLevel"
            }, {
                "propName": "_on",
                "methodName": "validateOn"
            }];
    }
}
//# sourceMappingURL=component.js.map
