/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h } from "@stencil/core";
import { devHint, validateColor, watchBoolean } from "../../schema";
import { translate } from "../../i18n";
import rgba from "color-rgba";
export class KolKolibri {
    constructor() {
        this.translateKolibriLogo = translate('kol-kolibri-logo');
        this._color = '#003c78';
        this._labeled = true;
        this.state = {
            _color: {
                red: 0,
                green: 60,
                blue: 120,
            },
            _labeled: true,
        };
        this.handleColorChange = (nextValue, nextState) => {
            if (typeof nextValue === 'string') {
                const rgb = rgba(nextValue);
                nextState.set('_color', {
                    red: rgb[0],
                    green: rgb[1],
                    blue: rgb[2],
                });
            }
            else {
                devHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);
            }
        };
    }
    render() {
        const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
        return (h("svg", { key: 'fb287d59e0565598a879a7d2b0a2c060b4f823c5', class: "kol-kolibri", role: "img", "aria-label": this.translateKolibriLogo, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, h("path", { key: 'c579830724ffe72342d1753d6815f38ac8487a98', d: "M353 322L213 304V434L353 322Z" }), h("path", { key: '07937d3751c91faa5550f2b680591c8ce1d8c2e6', d: "M209 564V304L149 434L209 564Z" }), h("path", { key: '444060f3b85b5d7d12bd5daa4022be7001d365db', d: "M357 316L417 250L361 210L275 244L357 316Z" }), h("path", { key: '41d95ce3a9cb93b932bb7a33fabe32d53c26e22e', d: "M329 218L237 92L250 222L272 241L329 218Z" }), h("path", { key: '8d35eae37da444a126be0b18703d6c6b962ca69a', d: "M353 318L35 36L213 300L353 318Z" }), h("path", { key: '4a8a7e2ffecf4502c967df9d2449a3fff332ee80', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (h("text", { key: 'a8a21eca0b1e15af92b25bbd4d0c468fd511a393', class: "kol-kolibri__text", x: "250", y: "525", fill: fillColor }, "KoliBri"))));
    }
    validateColor(value) {
        validateColor(this, value, {
            defaultValue: '#003c78',
            hooks: {
                beforePatch: this.handleColorChange,
            },
        });
    }
    validateLabeled(value) {
        watchBoolean(this, '_labeled', value, {
            defaultValue: true,
        });
    }
    componentWillLoad() {
        this.validateColor(this._color);
        this.validateLabeled(this._labeled);
    }
    static get is() { return "kol-kolibri"; }
    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 color of the logo and label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_color",
                "defaultValue": "'#003c78'"
            },
            "_labeled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the component has a label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_labeled",
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "state": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "_color",
                "methodName": "validateColor"
            }, {
                "propName": "_labeled",
                "methodName": "validateLabeled"
            }];
    }
}
//# sourceMappingURL=shadow.js.map
