import{html as i}from"lit";import"./nile-file-upload.css.esm.js";import{T as e}from"../lit-html-39a6718c.esm.js";import{e as t,i as l,t as a}from"../directive-ee0c609c.esm.js";import{d as s,F as o}from"./types/file-upload.enums.esm.js";import{t as n}from"./utils/file-validation.util.esm.js";
/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const r=t(class extends l{constructor(i){if(super(i),i.type!==a.ATTRIBUTE||"class"!==i.name||i.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(i){return" "+Object.keys(i).filter((e=>i[e])).join(" ")+" "}update(i,[t]){if(void 0===this.st){this.st=new Set,void 0!==i.strings&&(this.nt=new Set(i.strings.join(" ").split(/\s/).filter((i=>""!==i))));for(const i in t)t[i]&&!this.nt?.has(i)&&this.st.add(i);return this.render(t)}const l=i.element.classList;for(const i of this.st)i in t||(l.remove(i),this.st.delete(i));for(const i in t){const e=!!t[i];e===this.st.has(i)||this.nt?.has(i)||(e?(l.add(i),this.st.add(i)):(l.remove(i),this.st.delete(i)))}return e}}),c=(e,t,l,a,c,d,p,v,u)=>(n(u),i`
  <div class="wrapper" part="horizontal-wrapper">
    <div part="horizontal-div" class=${r({"hover-border":"hover"===d,"horizontal-div":!0,disable:a})}>
      <div part="inner-div" class="inner-div">
        <slot class="upload-icon-slot" name="upload-icon">
          <nile-icon name="upload" size="24"></nile-icon>
        </slot>
        <div part="content" class="content">
          <div part="horizontal-title" class="title">${t}</div>
          <div part="horizontal-subtitle" class="subtitle">${l}</div>
        </div>
      </div>
      <input
        type="file"
        ?disabled=${a}
        @change=${i=>{c.handleFiles(i)}}
        ?multiple=${u.allowMultiple}
        accept=${v.join(",")}
      />
      <slot class="browse-file-button" @click=${a?void 0:e} name="browse-file-button">
        <nile-button variant="tertiary" ?disabled=${a}>
          Browse File
        </nile-button>
      </slot>
    </div>
    ${p||u.state===o.ERROR?i`
      <slot name="error-message">
        <div class="upload-error" part="horizontal-upload-error">
      <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
      ${u.isStringTruncated?i`<nile-lite-tooltip .content=${p||s.CUSTOM_ERROR}>
              <span>${p||s.CUSTOM_ERROR}</span>
            </nile-lite-tooltip>`:i`<span>${p||s.CUSTOM_ERROR}</span>`}
    </div>
      </slot>
    `:i``}
  </div>
  `),d=(i,e,t,l,a,s,o,n)=>c(i,e,t,!1,l,a,s,o,n),p=(i,e,t,l,a,s,o,n)=>c(i,e,t,!0,l,a,s,o,n),v=(i,e,t,l,a,s,o,n)=>c(i,e,t,!1,l,a,s,o,n),u=()=>i`
  <div part="horizontal-drag-state" class="horizontal-div dragging">
    <div class="icons-container">
      <nile-icon
        color="var(--nile-colors-blue-500)"
        name="general"
        size="20"
        class="general-icon"
      ></nile-icon>
      <nile-icon
        color="var(--nile-colors-blue-500)"
        name="image"
        size="24"
        class="image-icon"
      ></nile-icon>
    </div>
    <p>${s.DRAG_STATE_DEFAULT}</p>
  </div>
`,m=(e,t,l,a,r,c,d,p)=>(n(p),i`
  <div part="vertical-wrapper" class="wrapper">
    <div part="vertical-default" class="vertical-default vertical-div ${a?"disable":""}">
      <slot name="upload-icon">
        <nile-icon name="upload" size="24"></nile-icon>
      </slot>
      <div part="vertical-content-container" class="content-container">
        <div part="vertical-title" class="title">${t}</div>
        <div part="vertical-subtitle" class="subtitle">${l}</div>
      </div>
      <input
        type="file"
        ?disabled=${a}
        @change=${i=>r.handleFiles(i)}
        multiple
        accept=${d.join(",")}
      />
      <slot @click=${a?void 0:e} name="browse-file-button">
        <nile-button variant="tertiary" ?disabled=${a}>
          Browse File
        </nile-button>
      </slot>
    </div>
    ${c||p.state===o.ERROR?i`<div class="vertical-upload-error" part="vertical-upload-error">
        <nile-icon name="warning" size="12" color="var(--nile-colors-red-700)"></nile-icon>
        ${p.isStringTruncated?i`<nile-lite-tooltip .content=${c||s.CUSTOM_ERROR}>
                <span>${c||s.CUSTOM_ERROR}</span>
              </nile-lite-tooltip>`:i`<span>${c||s.CUSTOM_ERROR}</span>`}
      </div>`:i``}
  </div>
  `),b=(i,e,t,l,a,s,o)=>m(i,e,t,!1,l,a,s,o),h=(i,e,t,l,a,s,o)=>m(i,e,t,!0,l,a,s,o),$=(i,e,t,l,a,s,o)=>m(i,e,t,!1,l,a,s,o),f=()=>i`
  <div part="vertical-drag-state" class="vertical-div vertical-drag">
    <div class="icons-container">
      <nile-icon
        color="var(--nile-colors-blue-500)"
        name="general"
        size="20"
        class="general-icon"
      ></nile-icon>
      <nile-icon
        color="var(--nile-colors-blue-500)"
        name="image"
        size="24"
        class="image-icon"
      ></nile-icon>
    </div>
    <p>${s.DRAG_STATE_DEFAULT}</p>
  </div>
`;export{v as a,u as b,p as c,b as d,$ as e,f,d as g,h};
