@salla.sa/twilight-components
Version:
Salla Web Component
121 lines (120 loc) • 4.82 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h, Host } from "@stencil/core";
import Inbox from "../../assets/svg/inbox.svg";
/**
* @slot title - The primary content of the placeholder.
* @slot description - Additional content displayed below the title.
*/
export class SallaPlaceholder {
constructor() {
this.translationLoaded = false;
/**
* Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon
*/
this.icon = Inbox;
/**
* Defines the alignment of contents. Defaults to [`left`]
*/
this.alignment = 'left';
/**
* The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon
*/
this.iconSize = 'md';
salla.lang.onLoaded(() => {
this.translationLoaded = true;
});
}
alignmentClass() {
return {
's-placeholder-wrapper': true,
's-placeholder-align-left': this.alignment == 'left',
's-placeholder-align-center': this.alignment == 'center',
's-placeholder-align-right': this.alignment == 'right',
};
}
render() {
return (h(Host, { key: '80c0ead7511fe00ce4fa0f92dc5ad9b3448811fa', class: this.alignmentClass() }, h("div", { key: '26e81619824a58476c66374fc79377596454969c', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '256946363be9fd8aea06f35b4ff837009a3d0b32', class: "s-placeholder-title" }, h("slot", { key: 'd519fbb70c3b3d309caa86c8740ee732fcbeeb70', name: 'title' }, h("span", { key: '6c9a6d8d7c8581944554884541c80884435fb217' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '1cd09e170e1d7f44ec251522ab3bcf1d71eaff02', class: "s-placeholder-description" }, h("slot", { key: '5e38a5794f5b655131cba0a4c590ca7509ffae51', name: 'description' }, h("span", { key: 'b7c9abd6f44092a804177067e7456b7d6468d4df' }, salla.lang.get('common.errors.empty_results'))))));
}
static get is() { return "salla-placeholder"; }
static get originalStyleUrls() {
return {
"$": ["salla-placeholder.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-placeholder.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Custom icon to display, defaults to [`Inbox`], can be any valid svg icon or inline element with font icon"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "Inbox"
},
"alignment": {
"type": "string",
"attribute": "alignment",
"mutable": false,
"complexType": {
"original": "'left' | 'center' | 'right'",
"resolved": "\"center\" | \"left\" | \"right\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the alignment of contents. Defaults to [`left`]"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'left'"
},
"iconSize": {
"type": "string",
"attribute": "icon-size",
"mutable": false,
"complexType": {
"original": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'",
"resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxxl\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The size of the icon. Defaults to [`md`] = 45px for font icon & width/height: 3.5rem for svg icon"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'md'"
}
};
}
static get states() {
return {
"translationLoaded": {}
};
}
}