/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-empty-state.css';
import NileElement from '../internal/nile-element';
import { ifDefined } from 'lit/directives/if-defined.js';
/**
 * Nile empty-state component.
 *
 * @tag nile-empty-state
 *
 */
let NileEmptyState = class NileEmptyState extends NileElement {
    constructor() {
        super(...arguments);
        this.size = 'md';
        this.variant = 'tonal';
        this.icon = 'var(--nile-icon-error, var(--ng-icon-x-circle))';
        this.grayscale = false;
        this.text = 'Empty State';
        this.subText = 'No Data';
        this.svgIconSize = 40;
        /* #endregion */
    }
    /**
     * The styles for nile-empty-state
     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
     */
    static get styles() {
        return [styles];
    }
    /* #endregion */
    /* #region Methods */
    /**
     * Render method
     * @slot This is a slot test
     */
    render() {
        return html `
      <div part="container" class="${classMap({
            'empty-state': true,
            'empty-state--sm': this.size == 'sm',
            'empty-state--md': this.size == 'md',
            'empty-state--lg': this.size == 'lg'
        })}">
        <div part="body" class="${classMap({ 'empty-state__body': true })}">

          ${this.variant == 'content' ? html `
            <div part="content-image"  class="empty-state__body--content">
              ${!this.icon && !this.svgIconUrl ? nothing : html `
                <div part="icon-wrapper" class="empty-state__img__icon">
                  ${this.svgIconUrl ? html `
                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}"  color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
                    <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
                  ` : html `
                    <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
                  `}
                </div>`}
            </div>` : nothing}

          ${this.variant == 'tonal' ? html `
            <div part="tonal-body" class="empty-state__body--tonal">
              ${this.svgIconUrl ? html `
                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
              ` : html `
                <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="40"></nile-icon>
              `}
            </div>` : nothing}

          ${this.variant == 'flat' ? html `
            <div part="flat-body" class="empty-state__body--flat">
					<span class="nile-flat-type-icon">
						${this.svgIconUrl ? html `
              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
            ` : html `
              <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
            `}
					</span>
            </div>` : nothing}

          <div part="text-section" class="empty__state__text-section">
            <div part="text" class="empty-state__text">${this.text}</div>
            <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
          </div>
        </div>

        <div part="actions" class="empty-state-actions">
          <slot></slot>
        </div>
      </div>
    `;
    }
};
__decorate([
    property()
], NileEmptyState.prototype, "size", void 0);
__decorate([
    property()
], NileEmptyState.prototype, "variant", void 0);
__decorate([
    property()
], NileEmptyState.prototype, "icon", void 0);
__decorate([
    property({ type: Boolean })
], NileEmptyState.prototype, "grayscale", void 0);
__decorate([
    property()
], NileEmptyState.prototype, "text", void 0);
__decorate([
    property({ attribute: 'sub-text' })
], NileEmptyState.prototype, "subText", void 0);
__decorate([
    property()
], NileEmptyState.prototype, "svgIconUrl", void 0);
__decorate([
    property({ type: Number })
], NileEmptyState.prototype, "svgIconSize", void 0);
__decorate([
    property({ type: String })
], NileEmptyState.prototype, "svgIconColor", void 0);
NileEmptyState = __decorate([
    customElement('nile-empty-state')
], NileEmptyState);
export { NileEmptyState };
export default NileEmptyState;
//# sourceMappingURL=nile-empty-state.js.map