@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
176 lines (175 loc) • 5.92 kB
JavaScript
/*!
* 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";
export class KolImage {
constructor() {
this.ctrl = new ImageController(BaseWebComponent.stateLess);
}
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: '276f06ce285f641390037d95f47fb0337c82fe19' }, h(ImageFC, { key: 'edef7131a42e5297e96969716a5e6232c1f52bd3', 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') })));
}
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"
}
};
}
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