/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import { SpanFC } from "../../internal/functional-components/span/component";
import { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from "../../schema";
import { createUniqueId } from "../../utils/dev.utils";
import { KolButtonWcTag } from "../../core/component-names";
import clsx from "../../utils/clsx";
import { createCtaRef, delegateFocus } from "../../utils/element-interaction";
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
export class KolBadge {
    constructor() {
        this.bgColorStr = '#000';
        this.colorStr = '#fff';
        this.id = createUniqueId('badge-label');
        this.ctaRef = createCtaRef();
        this._color = '#000';
        this.state = {
            _color: {
                backgroundColor: '#000',
                foregroundColor: '#fff',
            },
            _icons: {},
        };
        this.handleColorChange = (value) => {
            const colorPair = handleColorChange(value);
            this.bgColorStr = colorPair.backgroundColor;
            this.colorStr = colorPair.foregroundColor;
        };
    }
    renderSmartButton(props) {
        return (h(KolButtonWcTag, { ref: this.ctaRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _variant: props._variant, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign }));
    }
    async focus(options) { }
    render() {
        const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
        return (h("span", { key: '9091b07e3ef752f765f96bbd66eaa329ae89543d', class: clsx('kol-badge', {
                'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
            }), style: {
                backgroundColor: this.bgColorStr,
                color: this.colorStr,
            } }, h(SpanFC, { key: '9a0ee2dd77bfad8c7043cca5229b4398af16e6b8', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
    }
    validateIcons(value) {
        validateIcons(this, value);
    }
    validateColor(value) {
        validateColor(this, value, {
            defaultValue: '#000',
            hooks: {
                beforePatch: this.handleColorChange,
            },
        });
    }
    validateSmartButton(value) {
        objectObjectHandler(value, () => {
            try {
                value = parseJson(value);
            }
            catch (_a) {
            }
            setState(this, '_smartButton', value);
        });
    }
    componentWillLoad() {
        this.validateIcons(this._icons);
        this.validateColor(this._color);
        this.validateSmartButton(this._smartButton);
    }
    static get is() { return "kol-badge"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Stringified<PropColor>",
                    "resolved": "string | undefined | { backgroundColor: string; foregroundColor: string; }",
                    "references": {
                        "Stringified": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::Stringified"
                        },
                        "PropColor": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::PropColor"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the backgroundColor and foregroundColor."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_color",
                "defaultValue": "'#000'"
            },
            "_icons": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Stringified<KoliBriIconsProp>",
                    "resolved": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
                    "references": {
                        "Stringified": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::Stringified"
                        },
                        "KoliBriIconsProp": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KoliBriIconsProp"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_icons"
            },
            "_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"
            },
            "_smartButton": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Stringified<InternalButtonProps>",
                    "resolved": "string | undefined | { _label: string; } & { _type?: \"button\" | \"reset\" | \"submit\" | undefined; _accessKey?: string | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }",
                    "references": {
                        "Stringified": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::Stringified"
                        },
                        "InternalButtonProps": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::InternalButtonProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_smart-button"
            }
        };
    }
    static get states() {
        return {
            "state": {}
        };
    }
    static get methods() {
        return {
            "focus": {
                "complexType": {
                    "signature": "(options?: KolFocusOptions) => Promise<void>",
                    "parameters": [{
                            "name": "options",
                            "type": "KolFocusOptions | undefined",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "KolFocusOptions": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KolFocusOptions"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the internal element.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_icons",
                "methodName": "validateIcons"
            }, {
                "propName": "_color",
                "methodName": "validateColor"
            }, {
                "propName": "_smartButton",
                "methodName": "validateSmartButton"
            }];
    }
}
__decorate([
    delegateFocus('ctaRef')
], KolBadge.prototype, "focus", null);
//# sourceMappingURL=shadow.js.map
