v4web-components
Version:
Stencil Component Starter
130 lines (129 loc) • 3.45 kB
JavaScript
import { h } from '@stencil/core';
// import { V4IconNotSelectable } from '../v4-icon-not-selectable/v4-icon-not-selectable';
export class LabDsAvatar {
constructor() {
this.iconSize = {
'small': 'small',
'medium': 's-medium',
'large': 'medium',
'x-large': 'large',
'xx-large': 'x-large',
};
this.size = undefined;
this.imageSRC = undefined;
this.disabled = undefined;
this.name = undefined;
}
handleClick() {
if (this.disabled)
return;
this.clickAvatar.emit();
}
render() {
const firstName = this.name && this.name.slice(0, 1);
return (h("div", { onClick: () => this.handleClick() }, this.imageSRC ? (h("img", { class: `${this.size} avatar ${this.disabled && 'disabled'}`, src: this.imageSRC })) : (h("div", { class: `avatar ${this.size} ${this.disabled && 'disabled'}` }, this.name ? h("span", { class: `name` }, firstName) : h("lab-ds-icon-not-selectable", { size: this.iconSize[this.size], icon: "person" })))));
}
static get is() { return "lab-ds-avatar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-avatar.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-avatar.css"]
};
}
static get properties() {
return {
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'",
"resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\"",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false
},
"imageSRC": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "image-s-r-c",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "name",
"reflect": false
}
};
}
static get events() {
return [{
"method": "clickAvatar",
"name": "clickAvatar",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
}
//# sourceMappingURL=lab-ds-avatar.js.map