@salla.sa/twilight-components
Version:
Salla Web Component
122 lines (121 loc) • 4.87 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: '0704e4a6b47d9143261674e15fd7fac52083627a', class: this.alignmentClass() }, h("div", { key: 'b335fac85bf45bb03ba15f260d6faeefa6b603f8', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: 'ef96ed023caaa356e399bdff0a7ccb35ba3a8a1e', class: "s-placeholder-title" }, h("slot", { key: '6030c6d8382b8ffb732828a1e8e27eaaa3cc3ff2', name: 'title' }, h("span", { key: 'a137e178c1c47b61ffd3df77ceb0f33e7d401c7d' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '73f4e7fdf51253ec9c93e99958a602a1dcd8d5ca', class: "s-placeholder-description" }, h("slot", { key: '12687e5bd2e941a19557b37381bfbb613db154fe', name: 'description' }, h("span", { key: 'b8b72c0bb6240aeb7eec213fc9a0d8b3a51d163b' }, 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": {}
};
}
}
//# sourceMappingURL=salla-placeholder.js.map