import{__decorate as t}from"tslib";import{html as i,nothing as s}from"lit";import{property as e,customElement as o}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{s as n}from"./nile-empty-state.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{ifDefined as r}from"lit/directives/if-defined.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let m=class extends l{constructor(){super(...arguments),this.size="md",this.variant="tonal",this.icon="var(--nile-icon-error, var(--ng-icon-x-circle))",this.grayscale=!1,this.text="Empty State",this.subText="No Data",this.svgIconSize=40}static get styles(){return[n]}render(){return i`
      <div part="container" class="${a({"empty-state":!0,"empty-state--sm":"sm"==this.size,"empty-state--md":"md"==this.size,"empty-state--lg":"lg"==this.size})}">
        <div part="body" class="${a({"empty-state__body":!0})}">

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

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

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

          <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>
    `}};t([e()],m.prototype,"size",void 0),t([e()],m.prototype,"variant",void 0),t([e()],m.prototype,"icon",void 0),t([e({type:Boolean})],m.prototype,"grayscale",void 0),t([e()],m.prototype,"text",void 0),t([e({attribute:"sub-text"})],m.prototype,"subText",void 0),t([e()],m.prototype,"svgIconUrl",void 0),t([e({type:Number})],m.prototype,"svgIconSize",void 0),t([e({type:String})],m.prototype,"svgIconColor",void 0),m=t([o("nile-empty-state")],m);export{m as N};
