@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: '3961c11ea66eacabf9384474b7c8e6d9c01a3e13', class: this.alignmentClass() }, h("div", { key: 'e48435017dccaa4c980c90d2941a591c398139ad', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '4843fd497ff960ea219f6f15c361d25593958610', class: "s-placeholder-title" }, h("slot", { key: '68329602b3b574c56841503032207f15a59f7df4', name: 'title' }, h("span", { key: 'bca17b5772cc6dd677df7a504a4638f784b463da' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '9f07301ac5162d5fdc1a2ea04bd59e71fdaa4cde', class: "s-placeholder-description" }, h("slot", { key: '1a27b5b3d1700313673b62edf99240a558187046', name: 'description' }, h("span", { key: '173ae7e49edc1b1aa225274afff129daa86f718f' }, 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": {}
};
}
}