@salla.sa/twilight-components
Version:
Salla Web Component
71 lines (66 loc) • 3.6 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
var Inbox = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>inbox</title>
<path d="M31.984 19.797l-2.667-17.333c-0.1-0.651-0.659-1.131-1.317-1.131h-24c-0.659 0-1.217 0.48-1.317 1.131l-2.667 17.333c-0.011 0.067-0.016 0.135-0.016 0.203v6.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-6.667c0-0.068-0.005-0.136-0.016-0.203zM5.144 4h21.712l2.256 14.667h-9.112c-0.736 0-1.333 0.596-1.333 1.333 0 1.471-1.196 2.667-2.667 2.667s-2.667-1.196-2.667-2.667c0-0.737-0.597-1.333-1.333-1.333h-9.112zM29.333 26.667c0 0.736-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.597-1.333-1.333v-5.333h8.168c0.593 2.299 2.684 4 5.165 4s4.571-1.701 5.165-4h8.168z"></path>
</svg>
`;
const sallaPlaceholderCss = "";
const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(class SallaPlaceholder extends HTMLElement {
constructor() {
super();
this.__registerHost();
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 style() { return sallaPlaceholderCss; }
}, [4, "salla-placeholder", {
"icon": [1],
"alignment": [1],
"iconSize": [1, "icon-size"],
"translationLoaded": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-placeholder"];
components.forEach(tagName => { switch (tagName) {
case "salla-placeholder":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaPlaceholder);
}
break;
} });
}
export { SallaPlaceholder as S, defineCustomElement as d };
//# sourceMappingURL=salla-placeholder2.js.map
//# sourceMappingURL=salla-placeholder2.js.map