/*!
 * Crafted with ❤ by Salla
 */
import { r as registerInstance, h, H as Host } from './index-Cb4NFvMH.js';

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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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: 'c036c6655683dd28dc1fe108a0c9f18c41d4dab2', class: this.alignmentClass() }, h("div", { key: '8a344197473899bfce235707a0a4b586b09f7586', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '84c667eedacea750f761c0c650615c63812875ca', class: "s-placeholder-title" }, h("slot", { key: '4b59c67b550d5b4fb818007f0061b7648984c13c', name: 'title' }, h("span", { key: 'aec395c1624cc78932d4bddc2aaf936d6c300143' }, salla.lang.get('common.elements.no_options')))), h("div", { key: 'de0e5e440393992977e73d457df7c537cb2c1c8a', class: "s-placeholder-description" }, h("slot", { key: '4e85b215cd7255ee2ec7bd18913ea9f4709adaef', name: 'description' }, h("span", { key: '2c6746373095d09ef5cd19c2015cb240545d4ef9' }, salla.lang.get('common.errors.empty_results'))))));
    }
};
SallaPlaceholder.style = sallaPlaceholderCss;

export { SallaPlaceholder as salla_placeholder };
