dap-design-system/dist/components/file-input/file-input-list.component.js

Official design system for the DÁP (dap.gov.hu)

import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as d, html as p } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as c } from "../../node_modules/lit-html/directives/if-defined.js";
import { DdsElement as b } from "../../internal/dds-hu-element.js";
import { SizedMixin as y } from "../../internal/mixin/sizedMixin.js";
import "../../localization/localization.js";
import S from "../form/form-label/form-label.component.js";
import $ from "../icon/icon.component.js";
import k from "./file-input-list.scss.js";
import v from "./file-input-list-item.component.js";
import { t as w } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as L } from "../../node_modules/@lit/reactive-element/css-tag.js";
var E = Object.defineProperty, i = (m, e, s, h) => {
  for (var o = void 0, n = m.length - 1, r; n >= 0; n--)
    (r = m[n]) && (o = r(e, s, o) || o);
  return o && E(e, s, o), o;
};
const a = class a extends y(b) {
  constructor() {
    super(...arguments), this.disabled = !1, this.showDeleteButton = "true", this.showFileLink = "true", this.emitLinkEvent = !1, this.showFileSize = "true", this.showThumbnail = "false", this.thumbnailSize = "sm", this._files = [], this.fileInputElement = null;
  }
  get files() {
    return this.querySelectorAll("dap-ds-file-input-list-item");
  }
  getFileByName(e) {
    return this.shadowRoot.querySelector(
      `dap-ds-file-input-list-item[filename="${e}"]`
    );
  }
  handleFileClick(e) {
    e.preventDefault(), e.stopPropagation(), this.emit("dds-file-click", { data: e.detail.data });
  }
  _handleFilesAccepted(e) {
    const o = e.detail.files.map((n) => {
      const r = this.querySelector('[slot="link"]'), f = r && r.innerHTML.trim() !== "";
      return p`<dap-ds-file-input-list-item
        size=${this.size}
        .fileData=${n}
        fileName=${n.name}
        showDeleteButton=${this.showDeleteButton}
        showFileLink=${this.showFileLink}
        fileLinkLabel=${this.fileLinkLabel}
        showFileSize=${this.showFileSize}
        showThumbnail=${this.showThumbnail}
        thumbnailSize=${this.thumbnailSize}
        ?emitLinkEvent=${this.emitLinkEvent}
        .fileItemTemplate=${this.fileItemTemplate}
        @dds-file-click=${this.handleFileClick}
        ?disabled=${this.disabled}>
        <slot name="delete-button" slot="delete-button">
          <dap-ds-icon
            class="content__remove-button-icon"
            name="delete-bin-line"></dap-ds-icon>
        </slot>
        ${f ? p`<slot name="link" slot="link"></slot>` : d}
      </dap-ds-file-input-list-item>`;
    });
    this._files = o;
  }
  firstUpdated(e) {
    var s;
    super.firstUpdated(e), this.for && (this.fileInputElement = document.querySelector(`#${this.for}`), this.fileInputElement && (this.fileInputElement.fileList = this, (s = this.fileInputElement) == null || s.addEventListener(
      "dds-files-accepted",
      this._handleFilesAccepted.bind(this)
    )));
  }
  removeFile(e) {
    var s;
    (s = this.fileInputElement) == null || s.dispatchEvent(
      new CustomEvent("dds-file-remove", {
        bubbles: !1,
        composed: !0,
        detail: e.detail
      })
    );
  }
  render() {
    var e;
    return p`${this._files.length > 0 ? p`<dap-ds-form-label
            part="label"
            id="label"
            .size=${this.size}
            label=${c(this.label)}>
          </dap-ds-form-label>` : d}
      <ul
        class="file-input-list"
        part="base"
        role="list"
        aria-label=${(e = this.ariaLabel) != null ? e : w("fileInput.fileList")}
        @dds-file-remove=${this.removeFile}>
        ${this._files}
      </ul>`;
  }
};
a.tagName = "dap-ds-file-input-list", a.dependencies = {
  "dap-ds-file-input-list-item": v,
  "dap-ds-icon": $,
  "dap-ds-form-label": S
}, a.styles = L(k);
let t = a;
i([
  l({ type: String })
], t.prototype, "for");
i([
  l({ type: Boolean, reflect: !0 })
], t.prototype, "disabled");
i([
  l()
], t.prototype, "label");
i([
  l({ type: String })
], t.prototype, "showDeleteButton");
i([
  l({ type: String })
], t.prototype, "showFileLink");
i([
  l({ attribute: !1 })
], t.prototype, "fileItemTemplate");
i([
  l({ type: String })
], t.prototype, "fileLinkLabel");
i([
  l({ type: Boolean })
], t.prototype, "emitLinkEvent");
i([
  l({ type: String })
], t.prototype, "showFileSize");
i([
  l({ type: String })
], t.prototype, "showThumbnail");
i([
  l({ type: String })
], t.prototype, "thumbnailSize");
i([
  u()
], t.prototype, "_files");
export {
  t as default
};
//# sourceMappingURL=file-input-list.component.js.map