import"./nile-file-preview.css.esm.js";import{html as i}from"lit";import{c as e,g as r,f as n,r as a,t as o}from"./utils/nile-file-preview.util.esm.js";import"./types/nile-file-preview.enums.esm.js";function l(r,n,a){return i`
      <div class="uploading" part="horizontal-uploading-state">
        <nile-loader width="24" height="24"></nile-loader>
        <div class="progress-bar-container" part="horizontal-progress-bar-container">
          <div class="progress-bar-percent" part="horizontal-progress-bar-percent">
            <p part="horizontal-progress-bar-percent-text">Uploading File...</p>
            <p part="horizontal-progress-bar-percent-value">${n}%</p>
          </div>
          <nile-progress-bar
            part="horizontal-progress-bar"
            .value="${n}"
          ></nile-progress-bar>
          <p class="horizontal-file-name" part="horizontal-file-name">${r.name}</p>
        </div>
        <slot @click=${i=>e(r,i,a)} name="cancelIcon">
          <nile-icon
            name="close"
            size="14"
            class="icon"
          ></nile-icon>
        </slot>
      </div>
    `}function t(e,o,l,t){return i`
    <div class="preview horizontal-div" part="horizontal-preview-state">
      <div class="preview-inner" part="horizontal-preview-inner">
        <div class="preview-image-container" part="horizontal-preview-image-container">
            <img
              class="image-preview"
              src=${e}
              alt=${o.name}
              part="horizontal-preview-image"
            />
        </div>
        <div class="preview-file-info" part="horizontal-preview-file-info">
          <p part="horizontal-preview-file-info-name">
            <slot name="file-name">${o.name}</slot>
          </p>
          <p part="horizontal-preview-file-info-type">
            <slot name="file-type">${r(o,t)}</slot>
            &#8226;
            <slot name="file-size">${n(Number(o.size))}</slot>
          </p>
        </div>
      </div>
      <div class="preview-actions" part="horizontal-preview-actions">
        <slot @click=${i=>a(o,i,l)} name="cancel-icon">
          <nile-icon
            name="trash"
            size="14"
            class="icon"
            part="horizontal-preview-actions-icon"
          ></nile-icon>
        </slot>
      </div>
    </div>
  `}function c(e,o,l){return i`
    <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
      <div class="no-preview-container" part="horizontal-no-preview-container">
        <div class="document-icon" part="horizontal-no-preview-document-icon">
          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
        </div>
        <div class="preview-file-info" part="horizontal-no-preview-file-info">
          <p part="horizontal-no-preview-file-info-name">
            <slot name="file-name">${e.name}</slot>
          </p>
          <p part="horizontal-no-preview-file-info-type">
            <slot name="file-type">${r(e,l)}</slot>
            &#8226;
            <slot name="file-size">${n(Number(e.size))}</slot>
          </p>
        </div>
      </div>
      <div>
        <slot @click=${i=>a(e,i,o)} name="cancelIcon">
          <nile-icon
            name="trash"
            size="14"
            class="icon"
            part="horizontal-no-preview-actions-icon"
          ></nile-icon>
        </slot>
      </div>
    </div>
  `}function s(e,r,n,l){return o(l),i`
    <div class="error horizontal-div" part="horizontal-error-state">
      <div class="error-container" part="horizontal-error-container">
        <div class="error-icon" part="horizontal-error-icon">
          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
        </div>
        <div class="file-info" part="horizontal-error-file-info">
          <p class="horizontal-file-name" part="horizontal-error-file-info-name">
            <slot name="file-name">
              ${e.name}
            </slot>
          </p>
          ${l.isStringTruncated?i`<nile-lite-tooltip .content=${r}>
                  <span>${r}</span>
                </nile-lite-tooltip>`:i`<span>${r}</span>`}
        </div>
      </div>
      <slot @click=${i=>a(e,i,n)} name="cancelIcon">
          <nile-icon
            name="close"
            size="14"
            class="icon"
            part="horizontal-error-actions-icon"
          ></nile-icon>
        </slot>
    </div>
  `}function p(r,n,a){return i`
    <div class="vertical-div vertical-uploading" part="vertical-uploading-state">
      <div class="loading" part="vertical-loading">
        <nile-loader width="24" height="24"></nile-loader>
      </div>

      <div class="progress-bar-container" part="vertical-progress-bar-container">
        <div class="progress-bar-percent" part="vertical-progress-bar-percent">
          <p part="vertical-progress-bar-percent-text">Uploading...</p>
          <p part="vertical-progress-bar-percent-value">${n}%</p>
        </div>
        <nile-progress-bar value=${n}></nile-progress-bar>
        <p class="vertical-file-name" part="vertical-file-name">${r.name}</p>
      </div>

      <slot @click=${i=>e(r,i,a)} name="cancelIcon">
        <nile-icon
          name="close"
          size="14"
          class="icon corner-icon"
          part="vertical-uploading-actions-icon"
        ></nile-icon>
      </slot>
    </div>
  `}function v(e,o,l,t){return i`
    <div class="vertical-div vertical-preview" part="vertical-preview-state">
      <div part="vertical-preview-image-container">
        <img
          class="image-preview"
          part="vertical-preview-image"
          src=${e}
          alt=${o.name}
        />
      </div>

      <div class="content-container" part="vertical-preview-file-info">
        <p part="vertical-preview-file-info-name">
          <slot name="file-name">${o.name}</slot>
        </p>
        <p part="vertical-preview-file-info-type">
          <slot name="file-type">${r(o,t)}</slot>
          &#8226;
          <slot name="file-size">${n(Number(o.size))}</slot>
        </p>
      </div>

      <slot @click=${i=>a(o,i,l)} name="cancelIcon">
        <nile-icon
          name="trash"
          size="14"
          class="icon corner-icon"
          part="vertical-preview-actions-icon"
        ></nile-icon>
      </slot>
    </div>
  `}function d(e,o,l){return i`
    <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
      <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
      </div>

      <div class="content-container" part="vertical-no-preview-file-info">
        <p part="vertical-no-preview-file-info-name">
          <slot name="file-name">${e.name}</slot>
        </p>
        <p part="vertical-no-preview-file-info-type">
          <slot name="file-type">${r(e,l)}</slot>
          &#8226;
          <slot name="file-size">${n(Number(e.size))}</slot>
        </p>
      </div>

      <slot @click=${i=>a(e,i,o)} name="cancelIcon">
        <nile-icon
          name="trash"
          size="14"
          class="icon corner-icon"
          part="vertical-no-preview-actions-icon"
        ></nile-icon>
      </slot>
    </div>
  `}function m(e,r,n,l){return o(l),i`
    <div class="vertical-div vertical-error" part="vertical-error-state">
      <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
      </div>

      <div class="file-info-vertical-state" part="vertical-error-file-info">
      <p class="vertical-file-name" part="vertical-error-file-info-name">
        <slot name="file-name">${e.name}</slot>
      </p>
        ${l.isStringTruncated?i`<nile-lite-tooltip .content=${r}>
                <span>${r}</span>
              </nile-lite-tooltip>`:i`<span>${r}</span>`}
      </div>

      <slot @click=${i=>a(e,i,n)} name="cancelIcon">
        <nile-icon
          name="close"
          size="14"
          class="icon corner-icon"
          part="vertical-error-actions-icon"
        ></nile-icon>
      </slot>
    </div>
  `}export{p as a,s as b,m as c,t as d,v as e,c as f,l as g,d as h};
