/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h, Host } from "@stencil/core";
import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
import { TooltipFC } from "../../internal/functional-components/tooltip/component";
import { TooltipController } from "../../internal/functional-components/tooltip/controller";
import { validateLabel } from "../../schema";
export class KolAbbr {
    constructor() {
        this.tooltipCtrl = new TooltipController(BaseWebComponent.stateLess);
        this.setAbbrRef = (ref) => {
            this.abbrRef = ref;
        };
        this.state = {
            _label: '',
        };
    }
    render() {
        return (h(Host, { key: '66308e6f7d25035e13c19ef9dcf4a5cc8537fd17', class: "kol-abbr" }, h("abbr", { key: 'd0ac0653d3d2ffb37ddeab647f300686c48a261a', ref: this.setAbbrRef, tabIndex: this.state._label ? 0 : undefined }, h("slot", { key: '1f95fbdf8e79653e8179b28dc1f5dced4a8f172a' })), this.state._label ? (h(TooltipFC, { "aria-hidden": "true", label: typeof this.state._label === 'string' ? this.state._label : '', badgeText: '', id: this.tooltipCtrl.getRenderProp('id'), refFloating: this.tooltipCtrl.setTooltipElementRef })) : null));
    }
    validateLabel(value) {
        validateLabel(this, value);
        this.tooltipCtrl.watchLabel(value);
    }
    componentWillLoad() {
        this.validateLabel(this._label);
        this.tooltipCtrl.componentWillLoad({
            label: typeof this._label === 'string' ? this._label : '',
        });
    }
    componentDidRender() {
        if (this.abbrRef) {
            this.tooltipCtrl.syncListeners(undefined, this.abbrRef, true);
        }
    }
    disconnectedCallback() {
        this.tooltipCtrl.destroy();
    }
    static get is() { return "kol-abbr"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LabelPropType",
                    "resolved": "string | undefined",
                    "references": {
                        "LabelPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::LabelPropType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "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"
            }
        };
    }
    static get states() {
        return {
            "state": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "_label",
                "methodName": "validateLabel"
            }];
    }
}
//# sourceMappingURL=shadow.js.map
