/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h, Host } from "@stencil/core";
import { BaseWebComponent } from "../../internal/functional-components/base-web-component";
import { ImageFC } from "../../internal/functional-components/image/component";
import { ImageController } from "../../internal/functional-components/image/controller";
import { dispatchDomEvent, KolEvent } from "../../utils/events";
export class KolImage {
    constructor() {
        this.ctrl = new ImageController(BaseWebComponent.stateLess);
        this.handleError = (event) => {
            var _a, _b;
            (_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, event);
            if (this.host) {
                dispatchDomEvent(this.host, KolEvent.error, event);
            }
        };
        this.handleLoad = (event) => {
            var _a, _b;
            (_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, event);
            if (this.host) {
                dispatchDomEvent(this.host, KolEvent.load, event);
            }
        };
    }
    watchAlt(value) {
        this.ctrl.watchAlt(value);
    }
    watchLoading(value) {
        this.ctrl.watchLoading(value);
    }
    watchSizes(value) {
        this.ctrl.watchSizes(value);
    }
    watchSrc(value) {
        this.ctrl.watchSrc(value);
    }
    watchSrcset(value) {
        this.ctrl.watchSrcset(value);
    }
    componentWillLoad() {
        this.ctrl.componentWillLoad({
            alt: this._alt,
            loading: this._loading,
            sizes: this._sizes,
            src: this._src,
            srcset: this._srcset,
        });
    }
    render() {
        return (h(Host, { key: '94e7aed9e787f996ddb733a9e398018ae618d948' }, h(ImageFC, { key: 'dd81b84b4048db6d9367efcb48ce5ca0f00afb5b', alt: this.ctrl.getRenderProp('alt'), loading: this.ctrl.getRenderProp('loading'), sizes: this.ctrl.getRenderProp('sizes'), src: this.ctrl.getRenderProp('src'), srcset: this.ctrl.getRenderProp('srcset'), handleError: this.handleError, handleLoad: this.handleLoad })));
    }
    static get is() { return "kol-image"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_alt": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the alternative text of the image."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_alt"
            },
            "_loading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LoadingType",
                    "resolved": "\"eager\" | \"lazy\" | undefined",
                    "references": {
                        "LoadingType": {
                            "location": "import",
                            "path": "../../internal/props",
                            "id": "src/internal/props/index.ts::LoadingType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the loading mode for the image."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_loading"
            },
            "_sizes": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the image sizes for different screen resolutions, supporting _srcset."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_sizes"
            },
            "_src": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the image `src` attribute to the given string."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_src"
            },
            "_srcset": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets a list of source URLs with widths of the images."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_srcset"
            },
            "_on": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "KoliBriImageEventCallbacks",
                    "resolved": "undefined | { onError?: EventCallback<Event> | undefined; onLoad?: EventCallback<Event> | undefined; }",
                    "references": {
                        "KoliBriImageEventCallbacks": {
                            "location": "import",
                            "path": "../../schema/components/image",
                            "id": "src/schema/components/image.ts::KoliBriImageEventCallbacks"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines callbacks for image load events (`onError`, `onLoad`)."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_alt",
                "methodName": "watchAlt"
            }, {
                "propName": "_loading",
                "methodName": "watchLoading"
            }, {
                "propName": "_sizes",
                "methodName": "watchSizes"
            }, {
                "propName": "_src",
                "methodName": "watchSrc"
            }, {
                "propName": "_srcset",
                "methodName": "watchSrcset"
            }];
    }
}
//# sourceMappingURL=component.js.map
