@claromentis/design-system
Version:
Claromentis Design System Component Library
96 lines (95 loc) • 2.4 kB
JavaScript
import { h } from '@stencil/core';
import { claImgFixed } from '../../utils/utils';
export class Cardimage {
constructor() {
this.img = undefined;
this.alt = undefined;
}
componentDidLoad() {
this.claImgDidLoad.emit();
}
componentWillLoad() {
this.ispreserveaspect = claImgFixed(this.el);
this.preserveaspect = this.ispreserveaspect ? true : false;
if (!this.alt) {
console.warn('The "alt" prop is required for <cla-card-image>.');
}
}
render() {
if (this.preserveaspect) {
return (h("div", { class: "card-image-preserve-aspect" }, h("img", { alt: this.alt, class: "img-fluid", src: this.img })));
}
else {
return (h("div", { class: "card-image", style: { background: `url('${this.img}') center center/cover no-repeat #fff` } }));
}
}
static get is() { return "cla-card-image"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["cla-card-image.scss"]
};
}
static get styleUrls() {
return {
"$": ["cla-card-image.css"]
};
}
static get properties() {
return {
"img": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Image URL"
},
"attribute": "img",
"reflect": false
},
"alt": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The image alternative text."
},
"attribute": "alt",
"reflect": false
}
};
}
static get events() {
return [{
"method": "claImgDidLoad",
"name": "claImgDidLoad",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when nav item loads."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}