dap-design-system 0.60.2 → 0.61.0

package/dist/components/file-input/file-input-list-item.component.js

@@ -0,0 +1,394 @@
+var y = (b, e, t) => new Promise((o, s) => {
+  var n = (p) => {
+    try {
+      f(t.next(p));
+    } catch (k) {
+      s(k);
+    }
+  }, r = (p) => {
+    try {
+      f(t.throw(p));
+    } catch (k) {
+      s(k);
+    }
+  }, f = (p) => p.done ? o(p.value) : Promise.resolve(p.value).then(n, r);
+  f((t = t.apply(b, e)).next());
+});
+import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as h, nothing as m } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as g } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { ifDefined as w } from "../../node_modules/lit-html/directives/if-defined.js";
+import { JSONAttributeParser as _ } from "../../common/utils.js";
+import { DdsElement as $ } from "../../internal/dds-hu-element.js";
+import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
+import "../../localization/localization.js";
+import U from "../feedback/feedback.component.js";
+import L from "../icon/icon.component.js";
+import v from "../icon-button/icon-button.component.js";
+import C from "../link/link.component.js";
+import z from "../spinner/spinner.component.js";
+import D from "../stack/stack.component.js";
+import T from "./file-input-list-item.scss.js";
+import { t as c } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as j, css as F } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var O = Object.defineProperty, l = (b, e, t, o) => {
+  for (var s = void 0, n = b.length - 1, r; n >= 0; n--)
+    (r = b[n]) && (s = r(e, t, s) || s);
+  return s && O(e, t, s), s;
+};
+const u = class u extends S($) {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.loading = !1, this.showDeleteButton = "true", this.removeButtonTestId = "file-input-remove-button", this.showFileSize = "true", this.showFileLink = "true", this.emitLinkEvent = !1, this.subtle = !1, this.progress = "0", this.download = "true", this.showThumbnail = "false", this.thumbnailSize = "sm", this._fileObjectUrl = null, this._thumbnailUrl = null, this._fileType = "unknown";
+  }
+  delete(e) {
+    this.emit("dds-file-remove", { file: e || this.fileData });
+  }
+  detectFileType(e) {
+    const t = e.type.toLowerCase();
+    return t.startsWith("image/") ? "image" : t.startsWith("video/") ? "video" : t.startsWith("audio/") ? "audio" : t.startsWith("text/") || t.includes("document") || t.includes("word") || t.includes("excel") || t.includes("powerpoint") || t.includes("presentation") || t.includes("spreadsheet") ? "document" : t.includes("pdf") ? "pdf" : "unknown";
+  }
+  getFileTypeIcon() {
+    let e = "file-text-line";
+    switch (this._fileType) {
+      case "image":
+        e = "image-line";
+        break;
+      case "video":
+        e = "video-line";
+        break;
+      case "audio":
+        e = "music-line";
+        break;
+      case "document":
+        e = "file-text-line";
+        break;
+      case "pdf":
+        return h`<svg
+          class=${d(
+          "content__file-icon",
+          `content__file-icon--${this.thumbnailSize}`,
+          "content__file-icon--custom"
+        )}
+          viewBox="0 0 40 56"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <mask
+            id="mask0_705_82583"
+            style="mask-type:alpha"
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="0"
+            width="40"
+            height="56">
+            <path
+              d="M0 0L25.7574 0C26.553 0 27.3161 0.316071 27.8787 0.87868L39.1213 12.1213C39.6839 12.6839 40 13.447 40 14.2426L40 56L3 56C1.34315 56 0 54.6569 0 53L0 0Z"
+              fill="#9F9F9F" />
+          </mask>
+          <g mask="url(#mask0_705_82583)">
+            <path
+              d="M0 2C0 0.89543 0.895431 0 2 0H27L40 13V54C40 55.1046 39.1046 56 38 56H2C0.895431 56 0 55.1046 0 54V2Z"
+              fill="white" />
+            <path
+              d="M7.46234 29.3892V28.0122H10.3481C11.061 28.0122 11.6127 27.8291 12.0034 27.4629C12.3989 27.0918 12.5966 26.5791 12.5966 25.9248V25.9102C12.5966 25.2461 12.3989 24.731 12.0034 24.3647C11.6127 23.9985 11.061 23.8154 10.3481 23.8154H7.46234V22.4312H10.7582C11.4516 22.4312 12.0595 22.5776 12.582 22.8706C13.1093 23.1587 13.5219 23.564 13.8198 24.0864C14.1176 24.604 14.2665 25.207 14.2665 25.8955V25.9102C14.2665 26.5986 14.1176 27.2065 13.8198 27.7339C13.5219 28.2563 13.1093 28.6641 12.582 28.957C12.0595 29.2451 11.4516 29.3892 10.7582 29.3892H7.46234ZM6.64203 33V22.4312H8.28266V33H6.64203ZM16.3232 33V22.4312H20.1392C21.189 22.4312 22.085 22.6387 22.8271 23.0537C23.5693 23.4688 24.1357 24.0669 24.5264 24.8481C24.9219 25.6294 25.1196 26.5742 25.1196 27.6826V27.6973C25.1196 28.8154 24.9219 29.77 24.5264 30.561C24.1357 31.3521 23.5693 31.9575 22.8271 32.3774C22.0898 32.7925 21.1938 33 20.1392 33H16.3232ZM17.9639 31.5791H19.9561C20.6934 31.5791 21.3208 31.4277 21.8384 31.125C22.3608 30.8223 22.7563 30.3828 23.0249 29.8066C23.2983 29.2305 23.4351 28.5347 23.4351 27.7192V27.7046C23.4351 26.894 23.2959 26.2007 23.0176 25.6245C22.7441 25.0483 22.3486 24.6089 21.8311 24.3062C21.3135 24.0034 20.6885 23.8521 19.9561 23.8521H17.9639V31.5791ZM27.2789 33V22.4312H33.878V23.8521H28.9195V27.1919H33.4605V28.5762H28.9195V33H27.2789Z"
+              fill="#EE442A" />
+            <path
+              d="M42.5938 13.125H29.5C28.0503 13.125 26.875 11.9497 26.875 10.5V-2.59375L42.5938 13.125Z"
+              fill="white"
+              stroke="#E0E0E0"
+              stroke-width="0.75" />
+          </g>
+          <path
+            d="M2 0.375H25.7578C26.4537 0.37512 27.1211 0.651542 27.6133 1.14355L38.8564 12.3867C39.3485 12.8789 39.6249 13.5463 39.625 14.2422V54C39.625 54.8975 38.8975 55.625 38 55.625H2C1.10254 55.625 0.375 54.8975 0.375 54V2C0.375 1.10254 1.10254 0.375 2 0.375Z"
+            stroke="#E0E0E0"
+            stroke-width="0.75" />
+        </svg> `;
+      default:
+        e = "file-text-line";
+        break;
+    }
+    return h`<dap-ds-icon
+      class=${d(
+      "content__file-icon",
+      `content__file-icon--${this.thumbnailSize}`
+    )}
+      name=${e}></dap-ds-icon>`;
+  }
+  generateThumbnail(e) {
+    return y(this, null, function* () {
+      return this._fileType === "image" ? new Promise((t) => {
+        const o = document.createElement("canvas"), s = o.getContext("2d"), n = new Image();
+        n.onload = () => {
+          const r = this.thumbnailSize === "xxs" ? 24 : this.thumbnailSize === "xs" ? 32 : this.thumbnailSize === "sm" ? 48 : this.thumbnailSize === "md" ? 64 : 80, f = Math.min(r / n.width, r / n.height);
+          o.width = n.width * f, o.height = n.height * f, s == null || s.drawImage(n, 0, 0, o.width, o.height), t(o.toDataURL("image/jpeg", 0.8));
+        }, n.onerror = () => t(null), n.src = URL.createObjectURL(e);
+      }) : null;
+    });
+  }
+  createFileObjectUrl() {
+    return y(this, null, function* () {
+      if (this.fileData)
+        if (this._fileType = this.detectFileType(this.fileData), this.fileData instanceof File) {
+          if (this._fileObjectUrl && typeof URL.revokeObjectURL == "function" && URL.revokeObjectURL(this._fileObjectUrl), typeof URL.createObjectURL == "function" ? this._fileObjectUrl = URL.createObjectURL(this.fileData) : console.warn("URL.createObjectURL not available in this environment"), this.showThumbnail === "true" && this._fileType === "image")
+            try {
+              this._thumbnailUrl = yield this.generateThumbnail(this.fileData), this.requestUpdate();
+            } catch (e) {
+              console.warn("Failed to generate thumbnail:", e);
+            }
+        } else typeof this.fileData == "object" && "type" in this.fileData && console.warn(
+          "Cannot create file preview: fileData contains only metadata, not file content"
+        );
+    });
+  }
+  cleanupFileObjectUrl() {
+    this._fileObjectUrl && typeof URL.revokeObjectURL == "function" && (URL.revokeObjectURL(this._fileObjectUrl), this._fileObjectUrl = null), this._thumbnailUrl && (this._thumbnailUrl = null);
+  }
+  //emit a custom event with the file data}
+  handleFileClick(e) {
+    e.preventDefault(), this.emitLinkEvent ? this.emit("dds-file-click", {
+      data: {
+        file: this.fileData,
+        fileObjectUrl: this._fileObjectUrl,
+        href: this.href,
+        target: this.target,
+        rel: this.rel,
+        download: this.download,
+        showFileLink: this.showFileLink || "",
+        showFileSize: this.showFileSize || "",
+        showDeleteButton: this.showDeleteButton || "",
+        formattedSize: this.formattedSize,
+        feedback: this.feedback,
+        feedbackType: this.feedbackType,
+        loading: this.loading || !1,
+        showThumbnail: this.showThumbnail,
+        fileType: this._fileType,
+        fileLinkLabel: this.fileLinkLabel,
+        thumbnailUrl: this._thumbnailUrl,
+        thumbnailSize: this.thumbnailSize,
+        handleFileClick: this.handleFileClick,
+        handleDelete: this.delete,
+        component: this
+      }
+    }) : this._fileObjectUrl ? window.open(this._fileObjectUrl, "_blank") : this.href ? window.open(this.href, this.target || "_blank") : console.warn("No object URL or href available for file preview");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.createFileObjectUrl();
+  }
+  updated(e) {
+    super.updated(e), e.has("fileData") && (this.cleanupFileObjectUrl(), this.createFileObjectUrl());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupFileObjectUrl();
+  }
+  get formattedSize() {
+    var r;
+    const t = ["B", "KB", "MB", "GB"], s = ((r = this.fileData) == null ? void 0 : r.size) || 0;
+    if (!+s)
+      return `0 ${t[0]}`;
+    const n = Math.floor(Math.log(s) / Math.log(1024));
+    return `${parseFloat((s / Math.pow(1024, n)).toFixed(0))} ${t[n]}`;
+  }
+  render() {
+    var e, t, o, s, n, r;
+    return this.fileData && h`
+        <li
+          part="base"
+          aria-live="polite"
+          class=${d(
+      "file-list-item",
+      `file-list-item--${this.effectiveSize}`,
+      {
+        "file-list-item--disabled": this.disabled
+      }
+    )}
+          aria-label=${`${((e = this.fileData) == null ? void 0 : e.name) || ""} ${this.loading ? c("fileInput.uploading") : ""} ${this.feedback ? this.feedback : ""}`}>
+          ${this.fileItemTemplate ? h`<div class="content" part="content">
+                ${this.fileItemTemplate({
+      file: this.fileData,
+      fileObjectUrl: this._fileObjectUrl || "",
+      href: this.href,
+      target: this.target,
+      rel: this.rel,
+      download: this.download,
+      showFileLink: this.showFileLink || "",
+      showFileSize: this.showFileSize || "",
+      showDeleteButton: this.showDeleteButton || "",
+      formattedSize: this.formattedSize,
+      feedback: this.feedback,
+      feedbackType: this.feedbackType,
+      loading: this.loading || !1,
+      showThumbnail: this.showThumbnail,
+      fileType: this._fileType,
+      fileLinkLabel: this.fileLinkLabel,
+      thumbnailUrl: this._thumbnailUrl,
+      thumbnailSize: this.thumbnailSize,
+      handleFileClick: this.handleFileClick,
+      handleDelete: this.delete,
+      component: this
+    })}
+              </div>` : h`<div class="content" part="content">
+                  ${this.showThumbnail === "true" && this._thumbnailUrl ? h`<img
+                        part="thumbnail"
+                        class=${d(
+      "content__thumbnail",
+      `content__thumbnail--${this.thumbnailSize}`
+    )}
+                        src=${this._thumbnailUrl}
+                        alt=${`${((t = this.fileData) == null ? void 0 : t.name) || ""} thumbnail`}
+                        loading="lazy" />` : this.showThumbnail === "true" && this._fileType !== "unknown" ? this.getFileTypeIcon() : m}
+                  <dap-ds-stack spacing="200">
+                    <span part="filename">${((o = this.fileData) == null ? void 0 : o.name) || ""}</span>
+                    ${this.showFileLink === "true" && (this._fileObjectUrl || this.href) ? h`<slot name="link">
+                          <dap-ds-link
+                            part="link"
+                            href="${this._fileObjectUrl || this.href}"
+                            target=${w(this.target)}
+                            rel=${w(this.rel)}
+                            aria-label=${`${this.fileLinkLabel ? `${this.fileLinkLabel} ${((s = this.fileData) == null ? void 0 : s.name) || ""}` : `${c("fileInput.view")} ${((n = this.fileData) == null ? void 0 : n.name) || ""}`}`}
+                            ?download=${this.download === "true" ? !0 : void 0}
+                            @click=${this.handleFileClick}
+                            >${this.fileLinkLabel ? this.fileLinkLabel : c("fileInput.view")}</dap-ds-link
+                          ></slot
+                        >` : m}
+                  </dap-ds-stack>
+                  <span class="content__markers">
+                    ${this.showFileSize === "true" ? h`<span
+                          part="filesize"
+                          class=${d(
+      "content__filesize",
+      `content__filesize--${this.effectiveSize}`
+    )}
+                          aria-label=${c("fileInput.fileSize", {
+      size: this.formattedSize
+    })}
+                          >${this.formattedSize}</span
+                        >` : m}
+                    ${this.loading ? h`<dap-ds-spinner
+                          part="spinner"
+                          size="sm"
+                          type="neutral"
+                          aria-label=${c(
+      "fileInput.uploading"
+    )}></dap-ds-spinner>` : m}
+                    ${this.showDeleteButton === "true" ? h` <dap-ds-icon-button
+                          part="remove-button"
+                          data-testid=${this.removeButtonTestId}
+                          class="content__remove-button"
+                          ?disabled="${this.disabled}"
+                          size=${this.effectiveSize}
+                          aria-label=${`${c("fileInput.delete")} ${((r = this.fileData) == null ? void 0 : r.name) || ""}`}
+                          clean
+                          @click=${() => this.delete(this.fileData)}>
+                          <slot name="delete-button">
+                            <dap-ds-icon
+                              class="content__remove-button-icon"
+                              name="delete-bin-line"></dap-ds-icon>
+                          </slot>
+                        </dap-ds-icon-button>` : m}
+                  </span>
+                </div>
+                ${this.feedback && h`
+                  <dap-ds-feedback
+                    part="feedback"
+                    class="feedback"
+                    feedbackSize="sm"
+                    feedbackType=${w(this.feedbackType)}
+                    .subtle=${this.subtle}
+                    role="alert"
+                    aria-live="assertive">
+                    <span class="feedback__text">${this.feedback}</span>
+                  </dap-ds-feedback>
+                `}`}
+        </li>
+      `;
+  }
+};
+u.tagName = "dap-ds-file-input-list-item", u.dependencies = {
+  "dap-ds-icon": L,
+  "dap-ds-stack": D,
+  "dap-ds-link": C,
+  "dap-ds-spinner": z,
+  "dap-ds-icon-button": v,
+  "dap-ds-feedback": U
+}, u.styles = F`
+    ${j(T)}
+  `;
+let i = u;
+l([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+l([
+  a({ type: String })
+], i.prototype, "inputName");
+l([
+  a({ type: String })
+], i.prototype, "feedback");
+l([
+  a({ type: String })
+], i.prototype, "feedbackType");
+l([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "loading");
+l([
+  a({ type: String })
+], i.prototype, "showDeleteButton");
+l([
+  a()
+], i.prototype, "removeButtonTestId");
+l([
+  a({ type: String })
+], i.prototype, "showFileSize");
+l([
+  a({ type: String })
+], i.prototype, "showFileLink");
+l([
+  a({ type: Boolean })
+], i.prototype, "emitLinkEvent");
+l([
+  a({ attribute: !1 })
+], i.prototype, "fileItemTemplate");
+l([
+  a({ type: String })
+], i.prototype, "fileLinkLabel");
+l([
+  a({ type: Object, converter: _ })
+], i.prototype, "fileData");
+l([
+  a({ type: Boolean })
+], i.prototype, "subtle");
+l([
+  a({ type: String })
+], i.prototype, "progress");
+l([
+  a({ type: String })
+], i.prototype, "href");
+l([
+  a({ type: String })
+], i.prototype, "rel");
+l([
+  a({ type: String })
+], i.prototype, "target");
+l([
+  a({ type: String })
+], i.prototype, "download");
+l([
+  a({ type: String })
+], i.prototype, "showThumbnail");
+l([
+  a({ type: String })
+], i.prototype, "thumbnailSize");
+l([
+  g()
+], i.prototype, "_fileObjectUrl");
+l([
+  g()
+], i.prototype, "_thumbnailUrl");
+l([
+  g()
+], i.prototype, "_fileType");
+export {
+  i as default
+};
+//# sourceMappingURL=file-input-list-item.component.js.map

package/dist/components/file-input/file-input-list-item.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input-list-item.component.js","sources":["../../../src/components/file-input/file-input-list-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { css, html, nothing, TemplateResult, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport {\n  FeedbackType,\n  FileItemTemplate,\n  FileType,\n  LinkTarget,\n} from '@/common/types'\nimport { JSONAttributeParser } from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { t } from '@/localization/localization'\n\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport DapDSLink from '../link/link.component'\nimport DapDSSpinner from '../spinner/spinner.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './file-input-list-item.scss?inline'\n\nexport type FileListElement = {\n  name: string\n  type: string\n  size: number\n  lastModified: number\n}\n\n/**\n * `dap-ds-file-input-list-item`\n * @summary A file input list item is a container for file input list items.\n * @element dap-ds-file-input-list-item\n * @title - File input list item\n * @group file-input\n *\n * @event {{ file: FileListElement }} dds-file-remove - Dispatched when a file is removed from the list.\n * @event {{ file: FileListElement }} dds-file-click - Dispatched when a file is clicked.\n *\n * @slot delete-button - The delete button.\n *\n * @csspart base - The main file input list item container.\n * @csspart feedback - The feedback container.\n * @csspart link - The link text of the item component.\n * @csspart filename - The filename text of the item component.\n * @csspart filesize - The filesize text of the item component.\n * @csspart spinner - The spinner of the item component.\n * @csspart remove-button - The remove button of the item component.\n * @csspart thumbnail - The thumbnail of the item component.\n *\n * @cssproperty --dds-file-list-item-padding - The padding of the file list item (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-border-width - The border width of the file list item (default: var(--dds-border-width-base))\n * @cssproperty --dds-file-list-item-border-color - The border color of the file list item (default: var(--dds-border-neutral-transparent))\n * @cssproperty --dds-file-list-item-border-radius - The border radius of the file list item (default: var(--dds-radius-base))\n * @cssproperty --dds-file-list-item-bg-color - The background color of the file list item (default: var(--dds-fields-background-default))\n * @cssproperty --dds-file-list-item-font-weight - The font weight of the file list item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-file-list-item-disabled-bg-color - The background color of the disabled file list item (default: var(--dds-cold-grey-400))\n * @cssproperty --dds-file-list-item-disabled-color - The text color of the disabled file list item (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-file-list-item-content-margin - The margin of the content within the file list item (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-content-gap - The gap between content elements in the file list item (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-filename-color - The color of the filename text (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-file-list-item-filesize-color - The color of the filesize text (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-file-list-item-feedback-padding-x - The padding of the feedback section (default: var(--dds-spacing-200))\n * @cssproperty --dds-file-list-item-feedback-padding-y - The padding of the feedback section (default: var(--dds-spacing-100))\n * @cssproperty --dds-file-list-item-feedback-border-color - The border color of the feedback section (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-file-list-item-feedback-font-size - The font size of the feedback text (default: var(--dds-font-sm))\n */\nexport default class DapDSFileInputListItem extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-file-input-list-item'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-stack': DapDSStack,\n    'dap-ds-link': DapDSLink,\n    'dap-ds-spinner': DapDSSpinner,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  /** Disables the file input list item. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** The name of the file input. */\n  @property({ type: String }) inputName: string\n\n  /** The feedback message. */\n  @property({ type: String }) feedback: string\n\n  /** Feedback type.\n   * @type {'negative' | 'positive' | 'warning' | 'info'}\n   */\n  @property({ type: String }) feedbackType: FeedbackType\n\n  /** Loading state of the file input list item. */\n  @property({ type: Boolean, reflect: true }) loading? = false\n\n  /** Show delete button. */\n  @property({ type: String }) showDeleteButton: string = 'true'\n\n  /** `data-testid` for the remove-file button. */\n  @property() removeButtonTestId = 'file-input-remove-button'\n\n  /** Show file size. */\n  @property({ type: String }) showFileSize? = 'true'\n\n  /** Show file link. */\n  @property({ type: String }) showFileLink? = 'true'\n\n  /** Whether to emit a custom event with the file data when the file is clicked. */\n  @property({ type: Boolean }) emitLinkEvent: boolean = false\n\n  /** File item template function\n   * @type {(fileItemTemplate: FileItemTemplate) => TemplateResult}\n   */\n  @property({ attribute: false }) fileItemTemplate?: (\n    fileItemTemplate: FileItemTemplate,\n  ) => TemplateResult\n\n  /** The label of the file link. */\n  @property({ type: String }) fileLinkLabel: string\n\n  /** The file data. */\n  @property({ type: Object, converter: JSONAttributeParser })\n  fileData: FileListElement | File\n\n  /** Subtle style. */\n  @property({ type: Boolean }) subtle = false\n\n  /** The progress of the file upload. */\n  @property({ type: String }) progress = '0'\n\n  /** The url of the item link. If present, the item title will rendered as a link. */\n  @property({ type: String }) href: string\n\n  /** The rel of the item link. Only used if href is present. */\n  @property({ type: String }) rel: string\n\n  /** The target of the item link. Only used if href is present. */\n  @property({ type: String }) target: LinkTarget\n\n  /** Whether the file should be downloaded when clicked. */\n  @property({ type: String }) download: string = 'true'\n\n  /** Whether to show thumbnail preview for supported file types. */\n  @property({ type: String }) showThumbnail: string = 'false'\n\n  /** Size of the thumbnail preview. */\n  @property({ type: String }) thumbnailSize: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' =\n    'sm'\n\n  @state() private _fileObjectUrl: string | null = null\n  @state() private _thumbnailUrl: string | null = null\n  @state()\n  private _fileType: FileType = 'unknown'\n\n  static readonly styles = css`\n    ${unsafeCSS(styles)}\n  `\n\n  delete(file?: FileListElement | File) {\n    this.emit('dds-file-remove', { file: file || this.fileData })\n  }\n\n  private detectFileType(file: File | FileListElement): FileType {\n    const type = file.type.toLowerCase()\n\n    if (type.startsWith('image/')) return 'image'\n    if (type.startsWith('video/')) return 'video'\n    if (type.startsWith('audio/')) return 'audio'\n    if (\n      type.startsWith('text/') ||\n      type.includes('document') ||\n      type.includes('word') ||\n      type.includes('excel') ||\n      type.includes('powerpoint') ||\n      type.includes('presentation') ||\n      type.includes('spreadsheet')\n    )\n      return 'document'\n\n    if (type.includes('pdf')) return 'pdf'\n\n    return 'unknown'\n  }\n\n  private getFileTypeIcon(): TemplateResult<1> {\n    let icon = 'file-text-line'\n    switch (this._fileType) {\n      case 'image':\n        icon = 'image-line'\n        break\n      case 'video':\n        icon = 'video-line'\n        break\n      case 'audio':\n        icon = 'music-line'\n        break\n      case 'document':\n        icon = 'file-text-line'\n        break\n      case 'pdf':\n        return html`<svg\n          class=${clsx(\n            'content__file-icon',\n            `content__file-icon--${this.thumbnailSize}`,\n            'content__file-icon--custom',\n          )}\n          viewBox=\"0 0 40 56\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <mask\n            id=\"mask0_705_82583\"\n            style=\"mask-type:alpha\"\n            maskUnits=\"userSpaceOnUse\"\n            x=\"0\"\n            y=\"0\"\n            width=\"40\"\n            height=\"56\">\n            <path\n              d=\"M0 0L25.7574 0C26.553 0 27.3161 0.316071 27.8787 0.87868L39.1213 12.1213C39.6839 12.6839 40 13.447 40 14.2426L40 56L3 56C1.34315 56 0 54.6569 0 53L0 0Z\"\n              fill=\"#9F9F9F\" />\n          </mask>\n          <g mask=\"url(#mask0_705_82583)\">\n            <path\n              d=\"M0 2C0 0.89543 0.895431 0 2 0H27L40 13V54C40 55.1046 39.1046 56 38 56H2C0.895431 56 0 55.1046 0 54V2Z\"\n              fill=\"white\" />\n            <path\n              d=\"M7.46234 29.3892V28.0122H10.3481C11.061 28.0122 11.6127 27.8291 12.0034 27.4629C12.3989 27.0918 12.5966 26.5791 12.5966 25.9248V25.9102C12.5966 25.2461 12.3989 24.731 12.0034 24.3647C11.6127 23.9985 11.061 23.8154 10.3481 23.8154H7.46234V22.4312H10.7582C11.4516 22.4312 12.0595 22.5776 12.582 22.8706C13.1093 23.1587 13.5219 23.564 13.8198 24.0864C14.1176 24.604 14.2665 25.207 14.2665 25.8955V25.9102C14.2665 26.5986 14.1176 27.2065 13.8198 27.7339C13.5219 28.2563 13.1093 28.6641 12.582 28.957C12.0595 29.2451 11.4516 29.3892 10.7582 29.3892H7.46234ZM6.64203 33V22.4312H8.28266V33H6.64203ZM16.3232 33V22.4312H20.1392C21.189 22.4312 22.085 22.6387 22.8271 23.0537C23.5693 23.4688 24.1357 24.0669 24.5264 24.8481C24.9219 25.6294 25.1196 26.5742 25.1196 27.6826V27.6973C25.1196 28.8154 24.9219 29.77 24.5264 30.561C24.1357 31.3521 23.5693 31.9575 22.8271 32.3774C22.0898 32.7925 21.1938 33 20.1392 33H16.3232ZM17.9639 31.5791H19.9561C20.6934 31.5791 21.3208 31.4277 21.8384 31.125C22.3608 30.8223 22.7563 30.3828 23.0249 29.8066C23.2983 29.2305 23.4351 28.5347 23.4351 27.7192V27.7046C23.4351 26.894 23.2959 26.2007 23.0176 25.6245C22.7441 25.0483 22.3486 24.6089 21.8311 24.3062C21.3135 24.0034 20.6885 23.8521 19.9561 23.8521H17.9639V31.5791ZM27.2789 33V22.4312H33.878V23.8521H28.9195V27.1919H33.4605V28.5762H28.9195V33H27.2789Z\"\n              fill=\"#EE442A\" />\n            <path\n              d=\"M42.5938 13.125H29.5C28.0503 13.125 26.875 11.9497 26.875 10.5V-2.59375L42.5938 13.125Z\"\n              fill=\"white\"\n              stroke=\"#E0E0E0\"\n              stroke-width=\"0.75\" />\n          </g>\n          <path\n            d=\"M2 0.375H25.7578C26.4537 0.37512 27.1211 0.651542 27.6133 1.14355L38.8564 12.3867C39.3485 12.8789 39.6249 13.5463 39.625 14.2422V54C39.625 54.8975 38.8975 55.625 38 55.625H2C1.10254 55.625 0.375 54.8975 0.375 54V2C0.375 1.10254 1.10254 0.375 2 0.375Z\"\n            stroke=\"#E0E0E0\"\n            stroke-width=\"0.75\" />\n        </svg> `\n      default:\n        icon = 'file-text-line'\n        break\n    }\n\n    return html`<dap-ds-icon\n      class=${clsx(\n        'content__file-icon',\n        `content__file-icon--${this.thumbnailSize}`,\n      )}\n      name=${icon}></dap-ds-icon>`\n  }\n\n  private async generateThumbnail(file: File): Promise<string | null> {\n    if (this._fileType === 'image') {\n      return new Promise(resolve => {\n        const canvas = document.createElement('canvas')\n        const ctx = canvas.getContext('2d')\n        const img = new Image()\n\n        img.onload = () => {\n          const maxSize =\n            this.thumbnailSize === 'xxs'\n              ? 24\n              : this.thumbnailSize === 'xs'\n                ? 32\n                : this.thumbnailSize === 'sm'\n                  ? 48\n                  : this.thumbnailSize === 'md'\n                    ? 64\n                    : 80\n\n          const ratio = Math.min(maxSize / img.width, maxSize / img.height)\n          canvas.width = img.width * ratio\n          canvas.height = img.height * ratio\n\n          ctx?.drawImage(img, 0, 0, canvas.width, canvas.height)\n          resolve(canvas.toDataURL('image/jpeg', 0.8))\n        }\n\n        img.onerror = () => resolve(null)\n        img.src = URL.createObjectURL(file)\n      })\n    }\n\n    return null\n  }\n\n  private async createFileObjectUrl() {\n    if (this.fileData) {\n      this._fileType = this.detectFileType(this.fileData)\n\n      if (this.fileData instanceof File) {\n        if (this._fileObjectUrl && typeof URL.revokeObjectURL === 'function') {\n          URL.revokeObjectURL(this._fileObjectUrl)\n        }\n\n        if (typeof URL.createObjectURL === 'function') {\n          this._fileObjectUrl = URL.createObjectURL(this.fileData)\n        } else {\n          console.warn('URL.createObjectURL not available in this environment')\n        }\n\n        if (this.showThumbnail === 'true' && this._fileType === 'image') {\n          try {\n            this._thumbnailUrl = await this.generateThumbnail(this.fileData)\n            this.requestUpdate()\n          } catch (error) {\n            console.warn('Failed to generate thumbnail:', error)\n          }\n        }\n      } else if (typeof this.fileData === 'object' && 'type' in this.fileData) {\n        // If it's metadata, we can't create a preview without the actual file content\n        console.warn(\n          'Cannot create file preview: fileData contains only metadata, not file content',\n        )\n      }\n    }\n  }\n\n  cleanupFileObjectUrl() {\n    if (this._fileObjectUrl && typeof URL.revokeObjectURL === 'function') {\n      URL.revokeObjectURL(this._fileObjectUrl)\n      this._fileObjectUrl = null\n    }\n    if (this._thumbnailUrl) {\n      // Thumbnail URLs are data URLs, so no need to revoke them\n      this._thumbnailUrl = null\n    }\n  }\n\n  //emit a custom event with the file data}\n  private handleFileClick(event: Event) {\n    event.preventDefault()\n\n    if (!this.emitLinkEvent) {\n      if (this._fileObjectUrl) {\n        // Open the file in a new tab for preview\n        window.open(this._fileObjectUrl, '_blank')\n      } else if (this.href) {\n        // Fallback to href if no object URL available\n        window.open(this.href, this.target || '_blank')\n      } else {\n        console.warn('No object URL or href available for file preview')\n      }\n    } else {\n      this.emit('dds-file-click', {\n        data: {\n          file: this.fileData,\n          fileObjectUrl: this._fileObjectUrl,\n          href: this.href,\n          target: this.target,\n          rel: this.rel,\n          download: this.download,\n          showFileLink: this.showFileLink || '',\n          showFileSize: this.showFileSize || '',\n          showDeleteButton: this.showDeleteButton || '',\n          formattedSize: this.formattedSize,\n          feedback: this.feedback,\n          feedbackType: this.feedbackType,\n          loading: this.loading || false,\n          showThumbnail: this.showThumbnail,\n          fileType: this._fileType,\n          fileLinkLabel: this.fileLinkLabel,\n          thumbnailUrl: this._thumbnailUrl,\n          thumbnailSize: this.thumbnailSize,\n          handleFileClick: this.handleFileClick,\n          handleDelete: this.delete,\n          component: this,\n        },\n      })\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.createFileObjectUrl()\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties)\n\n    // Regenerate object URL and thumbnail when fileData changes\n    if (changedProperties.has('fileData')) {\n      this.cleanupFileObjectUrl()\n      this.createFileObjectUrl()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanupFileObjectUrl()\n  }\n\n  get formattedSize() {\n    const exponent = 1024\n    const sizes = ['B', 'KB', 'MB', 'GB']\n    const fractionDigits = 0\n    const size = this.fileData?.size || 0\n\n    if (!+size) {\n      return `0 ${sizes[0]}`\n    }\n\n    const i = Math.floor(Math.log(size) / Math.log(exponent))\n\n    return `${parseFloat((size / Math.pow(exponent, i)).toFixed(fractionDigits))} ${sizes[i]}`\n  }\n\n  render() {\n    return (\n      this.fileData &&\n      html`\n        <li\n          part=\"base\"\n          aria-live=\"polite\"\n          class=${clsx(\n            'file-list-item',\n            `file-list-item--${this.effectiveSize}`,\n            {\n              'file-list-item--disabled': this.disabled,\n            },\n          )}\n          aria-label=${`${this.fileData?.name || ''} ${this.loading ? t('fileInput.uploading') : ''} ${this.feedback ? this.feedback : ''}`}>\n          ${this.fileItemTemplate\n            ? html`<div class=\"content\" part=\"content\">\n                ${this.fileItemTemplate({\n                  file: this.fileData as File,\n                  fileObjectUrl: this._fileObjectUrl || '',\n                  href: this.href,\n                  target: this.target,\n                  rel: this.rel,\n                  download: this.download,\n                  showFileLink: this.showFileLink || '',\n                  showFileSize: this.showFileSize || '',\n                  showDeleteButton: this.showDeleteButton || '',\n                  formattedSize: this.formattedSize,\n                  feedback: this.feedback,\n                  feedbackType: this.feedbackType,\n                  loading: this.loading || false,\n                  showThumbnail: this.showThumbnail,\n                  fileType: this._fileType,\n                  fileLinkLabel: this.fileLinkLabel,\n                  thumbnailUrl: this._thumbnailUrl,\n                  thumbnailSize: this.thumbnailSize,\n                  handleFileClick: this.handleFileClick,\n                  handleDelete: this.delete,\n                  component: this,\n                })}\n              </div>`\n            : html`<div class=\"content\" part=\"content\">\n                  ${this.showThumbnail === 'true' && this._thumbnailUrl\n                    ? html`<img\n                        part=\"thumbnail\"\n                        class=${clsx(\n                          'content__thumbnail',\n                          `content__thumbnail--${this.thumbnailSize}`,\n                        )}\n                        src=${this._thumbnailUrl}\n                        alt=${`${this.fileData?.name || ''} thumbnail`}\n                        loading=\"lazy\" />`\n                    : this.showThumbnail === 'true' &&\n                        this._fileType !== 'unknown'\n                      ? this.getFileTypeIcon()\n                      : nothing}\n                  <dap-ds-stack spacing=\"200\">\n                    <span part=\"filename\">${this.fileData?.name || ''}</span>\n                    ${this.showFileLink === 'true' &&\n                    (this._fileObjectUrl || this.href)\n                      ? html`<slot name=\"link\">\n                          <dap-ds-link\n                            part=\"link\"\n                            href=\"${this._fileObjectUrl || this.href}\"\n                            target=${ifDefined(this.target)}\n                            rel=${ifDefined(this.rel)}\n                            aria-label=${`${this.fileLinkLabel ? `${this.fileLinkLabel} ${this.fileData?.name || ''}` : `${t('fileInput.view')} ${this.fileData?.name || ''}`}`}\n                            ?download=${this.download === 'true'\n                              ? true\n                              : undefined}\n                            @click=${this.handleFileClick}\n                            >${this.fileLinkLabel\n                              ? this.fileLinkLabel\n                              : t('fileInput.view')}</dap-ds-link\n                          ></slot\n                        >`\n                      : nothing}\n                  </dap-ds-stack>\n                  <span class=\"content__markers\">\n                    ${this.showFileSize === 'true'\n                      ? html`<span\n                          part=\"filesize\"\n                          class=${clsx(\n                            'content__filesize',\n                            `content__filesize--${this.effectiveSize}`,\n                          )}\n                          aria-label=${t('fileInput.fileSize', {\n                            size: this.formattedSize,\n                          })}\n                          >${this.formattedSize}</span\n                        >`\n                      : nothing}\n                    ${this.loading\n                      ? html`<dap-ds-spinner\n                          part=\"spinner\"\n                          size=\"sm\"\n                          type=\"neutral\"\n                          aria-label=${t(\n                            'fileInput.uploading',\n                          )}></dap-ds-spinner>`\n                      : nothing}\n                    ${this.showDeleteButton === 'true'\n                      ? html` <dap-ds-icon-button\n                          part=\"remove-button\"\n                          data-testid=${this.removeButtonTestId}\n                          class=\"content__remove-button\"\n                          ?disabled=\"${this.disabled}\"\n                          size=${this.effectiveSize as\n                            | 'xs'\n                            | 'sm'\n                            | 'md'\n                            | 'lg'}\n                          aria-label=${`${t('fileInput.delete')} ${this.fileData?.name || ''}`}\n                          clean\n                          @click=${() => this.delete(this.fileData)}>\n                          <slot name=\"delete-button\">\n                            <dap-ds-icon\n                              class=\"content__remove-button-icon\"\n                              name=\"delete-bin-line\"></dap-ds-icon>\n                          </slot>\n                        </dap-ds-icon-button>`\n                      : nothing}\n                  </span>\n                </div>\n                ${this.feedback &&\n                html`\n                  <dap-ds-feedback\n                    part=\"feedback\"\n                    class=\"feedback\"\n                    feedbackSize=\"sm\"\n                    feedbackType=${ifDefined(this.feedbackType)}\n                    .subtle=${this.subtle}\n                    role=\"alert\"\n                    aria-live=\"assertive\">\n                    <span class=\"feedback__text\">${this.feedback}</span>\n                  </dap-ds-feedback>\n                `}`}\n        </li>\n      `\n    )\n  }\n}\n"],"names":["_DapDSFileInputListItem","SizedMixin","DdsElement","file","type","icon","html","clsx","__async","resolve","canvas","ctx","img","maxSize","ratio","error","event","changedProperties","sizes","size","_a","i","t","_b","nothing","_c","ifDefined","_d","_e","_f","DapDSIcon","DapDSStack","DapDSLink","DapDSSpinner","DapDSIconButton","DapDSFeedback","css","unsafeCSS","styles","DapDSFileInputListItem","__decorateClass","property","JSONAttributeParser","state"],"mappings":"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"}

package/dist/components/file-input/file-input-list-item.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSFileInputListItem } from './file-input-list-item.component.js';
-export * from './file-input-list-item.component.js';
+import { default as DapDSFileInputListItem } from './file-input-list-item.component';
+export * from './file-input-list-item.component';
 export default DapDSFileInputListItem;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/file-input/file-input-list-item.js

@@ -0,0 +1,6 @@
+import e from "./file-input-list-item.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=file-input-list-item.js.map

package/dist/components/file-input/file-input-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input-list-item.js","sources":["../../../src/components/file-input/file-input-list-item.ts"],"sourcesContent":["import DapDSFileInputListItem from './file-input-list-item.component'\n\nexport * from './file-input-list-item.component'\nexport default DapDSFileInputListItem\n\nDapDSFileInputListItem.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-file-input-list-item': DapDSFileInputListItem\n  }\n}\n"],"names":["DapDSFileInputListItem"],"mappings":";AAKAA,EAAuB,OAAO;"}

package/dist/components/file-input/file-input-list-item.scss.js

@@ -0,0 +1,5 @@
+const i = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-file-list-item-padding: var(--dds-spacing-200);--dds-file-list-item-border-width: var(--dds-border-width-base);--dds-file-list-item-border-color: var(--dds-border-neutral-transparent);--dds-file-list-item-border-radius: var(--dds-radius-base);--dds-file-list-item-bg-color: var(--dds-fields-background-default);--dds-file-list-item-font-weight: var(--dds-font-weight-medium);--dds-file-list-item-disabled-bg-color: var(--dds-cold-grey-400);--dds-file-list-item-disabled-color: var(--dds-text-neutral-disabled);--dds-file-list-item-content-margin: var(--dds-spacing-100) var(--dds-spacing-200);--dds-file-list-item-content-gap: var(--dds-spacing-200);--dds-file-list-item-filename-color: var(--dds-text-neutral-base);--dds-file-list-item-filesize-color: var(--dds-text-neutral-subtle);--dds-file-list-item-feedback-padding-x: var(--dds-spacing-200);--dds-file-list-item-feedback-padding-y: var(--dds-spacing-100);--dds-file-list-item-feedback-border-color: var(--dds-border-neutral-divider);--dds-file-list-item-feedback-font-size: var(--dds-font-sm)}.file-list-item{display:flex;flex-direction:column;padding:var(--dds-file-list-item-padding);border:var(--dds-file-list-item-border-width) solid var(--dds-file-list-item-border-color);border-radius:var(--dds-file-list-item-border-radius);background-color:var(--dds-file-list-item-bg-color);font-weight:var(--dds-file-list-item-font-weight)}.file-list-item--xs{font-size:var(--dds-font-xs);line-height:var(--dds-font-line-height-small)}.file-list-item--sm{font-size:var(--dds-font-sm);line-height:var(--dds-font-line-height-large)}.file-list-item--lg{font-size:var(--dds-font-lg);line-height:var(--dds-font-line-height-xlarge)}.file-list-item--disabled{background-color:var(--dds-file-list-item-disabled-bg-color);color:var(--dds-file-list-item-disabled-color);cursor:not-allowed}.file-list-item .content{display:flex;align-items:center;margin:var(--dds-file-list-item-content-margin);column-gap:var(--dds-file-list-item-content-gap)}.file-list-item .content__thumbnail{flex-shrink:0;border-radius:var(--dds-radius-sm);object-fit:cover;background-color:var(--dds-cold-grey-100)}.file-list-item .content__thumbnail--xxs{width:24px;height:24px}.file-list-item .content__thumbnail--xs{width:32px;height:32px}.file-list-item .content__thumbnail--sm{width:48px;height:48px}.file-list-item .content__thumbnail--md{width:64px;height:64px}.file-list-item .content__thumbnail--lg{width:80px;height:80px}.file-list-item .content__file-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-radius-200, 8px);background-color:var(--dds-cold-grey-100);color:var(--dds-text-neutral-subtle)}.file-list-item .content__file-icon--xxs{width:24px;height:24px;font-size:12px}.file-list-item .content__file-icon--xs{width:32px;height:32px;font-size:16px}.file-list-item .content__file-icon--sm{width:56px;height:72px;font-size:20px}.file-list-item .content__file-icon--md{width:60px;height:76px;font-size:24px}.file-list-item .content__file-icon--lg{width:80px;height:80px;font-size:28px}.file-list-item .content__file-icon--custom{padding:var(--dds-spacing-200)}.file-list-item .content__filename{display:flex;flex-direction:column;flex-grow:1;overflow:hidden;color:var(--dds-file-list-item-filename-color);text-overflow:ellipsis;white-space:nowrap}.file-list-item .content__remove-button::part(high-contrast){border-color:transparent}.file-list-item .content__remove-icon::part(base){color:var(--dds-button-subtle-icon-neutral-enabled)}.file-list-item .content__filesize{color:var(--dds-file-list-item-filesize-color);text-wrap:nowrap}.file-list-item .content__filesize--md{font-size:var(--dds-font-sm)}.file-list-item .content__markers{display:flex;flex-shrink:0;align-items:center;margin-left:auto;column-gap:var(--dds-file-list-item-content-gap)}.file-list-item .feedback{padding:var(--dds-file-list-item-feedback-padding-y) var(--dds-file-list-item-feedback-padding-x);border-top:1px solid var(--dds-file-list-item-feedback-border-color)}.file-list-item .feedback::part(base){margin-top:0}.file-list-item .feedback__text{font-size:var(--dds-file-list-item-feedback-font-size)}";
+export {
+  i as default
+};
+//# sourceMappingURL=file-input-list-item.scss.js.map

package/dist/components/file-input/file-input-list-item.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input-list-item.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/file-input/file-input-list.component.d.ts

@@ -1,6 +1,9 @@
 import { PropertyValueMap, TemplateResult } from 'lit';
 import { FileItemTemplate } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSFormLabel } from '../form/form-label/form-label.component';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSFileInputListItem } from './file-input-list-item.component';
 declare const DapDSFileInputList_base: typeof DdsElement & {
     new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
     prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -25,6 +28,12 @@ declare const DapDSFileInputList_base: typeof DdsElement & {
  * @cssproperty --dds-file-list-gap - Controls the row-gap property (default: var(--dds-spacing-200))
  */
 export default class DapDSFileInputList extends DapDSFileInputList_base {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-file-input-list-item': typeof DapDSFileInputListItem;
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-form-label': typeof DapDSFormLabel;
+    };
     /** The aria label for the file input list. */
     /** The id of the file input element to bind to. */
     for: string;
@@ -57,7 +66,7 @@ export default class DapDSFileInputList extends DapDSFileInputList_base {
     private _files;
     static readonly styles: import('lit').CSSResult;
     private fileInputElement;
-    get files(): NodeListOf<import('./file-input-list-item.component').default>;
+    get files(): NodeListOf<DapDSFileInputListItem>;
     getFileByName(name: string): Element | null;
     private handleFileClick;
     private _handleFilesAccepted;