@salla.sa/twilight-components/dist/collection/components/salla-placeholder/salla-placeholder.js

Salla Web Component

/*!
 * 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: 'd30bb3c7b89a431d82bb30f3a3c526510657697e', class: this.alignmentClass() }, h("div", { key: 'c020c0648ef4cdb5e5c11b7724f1ebc356f4f9a4', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '557b5a788eb5d6493ce31a4b3f185fd308e92ac5', class: "s-placeholder-title" }, h("slot", { key: '815ff39c7c6da292e6835e6ea3f954106df41d07', name: 'title' }, h("span", { key: '12168b2bd6860c3714920507ed0444fc95610ca6' }, salla.lang.get('common.elements.no_options')))), h("div", { key: 'ea3b990d368eb459577d58d89c9411adfe97d49b', class: "s-placeholder-description" }, h("slot", { key: 'd604bac46d3d023f041c2b5fa2406025a1803e42', name: 'description' }, h("span", { key: '6800b4d6466e7b6ac2b6c7032c5b7589957b1eaa' }, 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