/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h, Host } from "@stencil/core";
import { AvatarFC } from "../../internal/functional-components/avatar/component";
import { AvatarController } from "../../internal/functional-components/avatar/controller";
import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
export class KolAvatar extends BaseWebComponent {
    constructor() {
        this.ctrl = new AvatarController(this.stateAccess);
        this.initials = '';
        super();
    }
    watchColor(value) {
        this.ctrl.watchColor(value);
    }
    watchLabel(value) {
        this.ctrl.watchLabel(value);
    }
    watchSrc(value) {
        this.ctrl.watchSrc(value);
    }
    componentWillLoad() {
        this.ctrl.componentWillLoad({
            color: this._color,
            label: this._label,
            src: this._src,
        });
    }
    render() {
        return (h(Host, { key: '293a0f642334d4058d3b129b69d7de334bb43866' }, h(AvatarFC, { key: '96c92705c57c43050b666513dfc65829a7be5047', color: this.ctrl.getRenderProp('color'), label: this.ctrl.getRenderProp('label'), src: this.ctrl.getRenderProp('src'), initials: this.initials })));
    }
    static get is() { return "kol-avatar"; }
    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": "string | ColorPair",
                    "resolved": "string | undefined | { backgroundColor: string; foregroundColor: string; }",
                    "references": {
                        "ColorPair": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::ColorPair"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the backgroundColor and foregroundColor."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_color"
            },
            "_label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "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"
            },
            "_src": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the image `src` attribute to the given string."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_src"
            }
        };
    }
    static get states() {
        return {
            "initials": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "_color",
                "methodName": "watchColor"
            }, {
                "propName": "_label",
                "methodName": "watchLabel"
            }, {
                "propName": "_src",
                "methodName": "watchSrc"
            }];
    }
}
//# sourceMappingURL=component.js.map
