dap-design-system 0.62.3 → 0.63.0

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

@@ -1,19 +1,15 @@
-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 { unsafeCSS as u, nothing as h, html as p } from "lit";
+import { property as l, state as c } from "lit/decorators.js";
 import { DdsElement as b } from "../../internal/dds-hu-element.js";
 import { SizedMixin as y } from "../../internal/mixin/sizedMixin.js";
+import { formLabelTemplate as S } from "../../internal/templates/formLabel.js";
 import "../../localization/localization.js";
-import S from "../form/form-label/form-label.component.js";
+import k from "../form/form-label/form-label.component.js";
 import $ from "../icon/icon.component.js";
-import k from "./file-input-list.scss.js";
+import L 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) => {
+var E = Object.defineProperty, i = (m, e, s, d) => {
   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;
@@ -55,7 +51,7 @@ const a = class a extends y(b) {
             class="content__remove-button-icon"
             name="delete-bin-line"></dap-ds-icon>
         </slot>
-        ${f ? p`<slot name="link" slot="link"></slot>` : d}
+        ${f ? p`<slot name="link" slot="link"></slot>` : h}
       </dap-ds-file-input-list-item>`;
     });
     this._files = o;
@@ -79,12 +75,11 @@ const a = class a extends y(b) {
   }
   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}
+    return p`${this._files.length > 0 ? S({
+      label: this.label,
+      id: "label",
+      size: this.size
+    }) : h}
       <ul
         class="file-input-list"
         part="base"
@@ -98,8 +93,8 @@ const a = class a extends y(b) {
 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);
+  "dap-ds-form-label": k
+}, a.styles = u(L);
 let t = a;
 i([
   l({ type: String })
@@ -135,7 +130,7 @@ i([
   l({ type: String })
 ], t.prototype, "thumbnailSize");
 i([
-  u()
+  c()
 ], t.prototype, "_files");
 export {
   t as default

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

@@ -1 +1 @@
-{"version":3,"file":"file-input-list.component.js","sources":["../../../src/components/file-input/file-input-list.component.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, TemplateResult, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { FileItemTemplate } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { t } from '@/localization/localization'\n\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSFileInput from './file-input.component'\nimport styles from './file-input-list.scss?inline'\nimport DapDSFileInputListItem from './file-input-list-item.component'\n\n/**\n * `dap-ds-file-input-list`\n * @summary A file input list is a container for file input items.\n * @element dap-ds-file-input-list\n * @title - File input list\n * @group file-input\n *\n * @slot delete-button - The delete button.\n *\n * @event {{ file: FileListElement }} dds-file-click - Dispatched when a file is clicked.\n *\n * @csspart base - The main file input list container.\n *\n * @cssproperty --dds-file-list-display - Controls the display property (default: flex)\n * @cssproperty --dds-file-list-flex-direction - Controls the flex-direction property (default: column)\n * @cssproperty --dds-file-list-padding - Controls the padding property (default: 0)\n * @cssproperty --dds-file-list-list-style - Controls the list-style-type property (default: none)\n * @cssproperty --dds-file-list-gap - Controls the row-gap property (default: var(--dds-spacing-200))\n */\nexport default class DapDSFileInputList extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-file-input-list'\n\n  static dependencies = {\n    'dap-ds-file-input-list-item': DapDSFileInputListItem,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-form-label': DapDSFormLabel,\n  }\n\n  /** The aria label for the file input list. */\n  /** The id of the file input element to bind to. */\n  @property({ type: String }) for: string\n\n  /** Disables the file input list. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** The label for the file input list. */\n  @property() label?: string\n\n  /** Whether to show the delete button in the file input list item. */\n  @property({ type: String }) showDeleteButton = 'true'\n\n  /** Whether to show the file link in the file input list item. */\n  @property({ type: String }) showFileLink = 'true'\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  /** Whether to emit a custom event with the file data when the file is clicked. */\n  @property({ type: Boolean }) emitLinkEvent: boolean = false\n\n  /** Whether to show the file size in the file input list item */\n  @property({ type: String }) showFileSize = 'true'\n\n  /** Whether to show thumbnail preview for supported file types\n   * @ignore\n   */\n  @property({ type: String }) showThumbnail = 'false'\n\n  /** Size of the thumbnail preview\n   * @ignore\n   */\n  @property({ type: String })\n  thumbnailSize: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'sm'\n\n  @state()\n  private _files: TemplateResult[] = []\n\n  static readonly styles = unsafeCSS(styles)\n\n  private fileInputElement: DapDSFileInput | null = null\n\n  get files() {\n    return this.querySelectorAll('dap-ds-file-input-list-item')\n  }\n\n  getFileByName(name: string) {\n    return this.shadowRoot!.querySelector(\n      `dap-ds-file-input-list-item[filename=\"${name}\"]`,\n    )\n  }\n\n  private handleFileClick(event: Event) {\n    event.preventDefault()\n    event.stopPropagation()\n    this.emit('dds-file-click', { data: (event as CustomEvent).detail.data })\n  }\n\n  private _handleFilesAccepted(event: Event) {\n    const customEvent = event as CustomEvent<{ files: File[] }>\n    const files = customEvent.detail.files\n\n    const fileComponents = files.map((file: File) => {\n      const linkSlot = this.querySelector('[slot=\"link\"]')\n      const hasLinkSlot = linkSlot && linkSlot.innerHTML.trim() !== ''\n\n      return html`<dap-ds-file-input-list-item\n        size=${this.size}\n        .fileData=${file}\n        fileName=${file.name}\n        showDeleteButton=${this.showDeleteButton}\n        showFileLink=${this.showFileLink}\n        fileLinkLabel=${this.fileLinkLabel}\n        showFileSize=${this.showFileSize}\n        showThumbnail=${this.showThumbnail}\n        thumbnailSize=${this.thumbnailSize}\n        ?emitLinkEvent=${this.emitLinkEvent}\n        .fileItemTemplate=${this.fileItemTemplate}\n        @dds-file-click=${this.handleFileClick}\n        ?disabled=${this.disabled}>\n        <slot name=\"delete-button\" slot=\"delete-button\">\n          <dap-ds-icon\n            class=\"content__remove-button-icon\"\n            name=\"delete-bin-line\"></dap-ds-icon>\n        </slot>\n        ${hasLinkSlot ? html`<slot name=\"link\" slot=\"link\"></slot>` : nothing}\n      </dap-ds-file-input-list-item>`\n    })\n\n    this._files = fileComponents\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    if (this.for) {\n      this.fileInputElement = document.querySelector(`#${this.for}`)\n      if (this.fileInputElement) {\n        this.fileInputElement.fileList = this\n        this.fileInputElement?.addEventListener(\n          'dds-files-accepted',\n          this._handleFilesAccepted.bind(this),\n        )\n      }\n    }\n  }\n\n  removeFile(event: CustomEvent) {\n    this.fileInputElement?.dispatchEvent(\n      new CustomEvent('dds-file-remove', {\n        bubbles: false,\n        composed: true,\n        detail: event.detail,\n      }),\n    )\n  }\n\n  render() {\n    return html`${this._files.length > 0\n        ? html`<dap-ds-form-label\n            part=\"label\"\n            id=\"label\"\n            .size=${this.size}\n            label=${ifDefined(this.label)}>\n          </dap-ds-form-label>`\n        : nothing}\n      <ul\n        class=\"file-input-list\"\n        part=\"base\"\n        role=\"list\"\n        aria-label=${this.ariaLabel ?? t('fileInput.fileList')}\n        @dds-file-remove=${this.removeFile}>\n        ${this._files}\n      </ul>`\n  }\n}\n"],"names":["_DapDSFileInputList","SizedMixin","DdsElement","name","event","fileComponents","file","linkSlot","hasLinkSlot","html","nothing","_changedProperties","_a","ifDefined","t","DapDSFileInputListItem","DapDSIcon","DapDSFormLabel","unsafeCSS","styles","DapDSFileInputList","__decorateClass","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCqB,MAAAA,IAAA,MAAAA,UAA2BC,EAAWC,CAAU,EAAE;AAAA,EAAvE,cAAA;AAAA,UAAA,GAAA,SAAA,GAcyD,KAAA,WAAA,IAMR,KAAA,mBAAA,QAGJ,KAAA,eAAA,QAaW,KAAA,gBAAA,IAGX,KAAA,eAAA,QAKC,KAAA,gBAAA,SAMO,KAAA,gBAAA,MAGnD,KAAQ,SAA2B,CAAC,GAIpC,KAAQ,mBAA0C;AAAA,EAAA;AAAA,EAElD,IAAI,QAAQ;AACH,WAAA,KAAK,iBAAiB,6BAA6B;AAAA,EAAA;AAAA,EAG5D,cAAcC,GAAc;AAC1B,WAAO,KAAK,WAAY;AAAA,MACtB,yCAAyCA,CAAI;AAAA,IAC/C;AAAA,EAAA;AAAA,EAGM,gBAAgBC,GAAc;AACpC,IAAAA,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACtB,KAAK,KAAK,kBAAkB,EAAE,MAAOA,EAAsB,OAAO,MAAM;AAAA,EAAA;AAAA,EAGlE,qBAAqBA,GAAc;AAIzC,UAAMC,IAHcD,EACM,OAAO,MAEJ,IAAI,CAACE,MAAe;AACzC,YAAAC,IAAW,KAAK,cAAc,eAAe,GAC7CC,IAAcD,KAAYA,EAAS,UAAU,KAAW,MAAA;AAEvD,aAAAE;AAAAA,eACE,KAAK,IAAI;AAAA,oBACJH,CAAI;AAAA,mBACLA,EAAK,IAAI;AAAA,2BACD,KAAK,gBAAgB;AAAA,uBACzB,KAAK,YAAY;AAAA,wBAChB,KAAK,aAAa;AAAA,uBACnB,KAAK,YAAY;AAAA,wBAChB,KAAK,aAAa;AAAA,wBAClB,KAAK,aAAa;AAAA,yBACjB,KAAK,aAAa;AAAA,4BACf,KAAK,gBAAgB;AAAA,0BACvB,KAAK,eAAe;AAAA,oBAC1B,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMvBE,IAAcC,2CAA8CC,CAAO;AAAA;AAAA,IAAA,CAExE;AAED,SAAK,SAASL;AAAA,EAAA;AAAA,EAGN,aACRM,GACM;;AACN,UAAM,aAAaA,CAAkB,GACjC,KAAK,QACP,KAAK,mBAAmB,SAAS,cAAc,IAAI,KAAK,GAAG,EAAE,GACzD,KAAK,qBACP,KAAK,iBAAiB,WAAW,OACjCC,IAAA,KAAK,qBAAL,QAAAA,EAAuB;AAAA,MACrB;AAAA,MACA,KAAK,qBAAqB,KAAK,IAAI;AAAA;AAAA,EAGzC;AAAA,EAGF,WAAWR,GAAoB;;AAC7B,KAAAQ,IAAA,KAAK,qBAAL,QAAAA,EAAuB;AAAA,MACrB,IAAI,YAAY,mBAAmB;AAAA,QACjC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQR,EAAM;AAAA,MACf,CAAA;AAAA;AAAA,EACH;AAAA,EAGF,SAAS;;AACP,WAAOK,IAAO,KAAK,OAAO,SAAS,IAC7BA;AAAAA;AAAAA;AAAAA,oBAGU,KAAK,IAAI;AAAA,oBACTI,EAAU,KAAK,KAAK,CAAC;AAAA,kCAE/BH,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKIE,IAAA,KAAK,cAAL,OAAAA,IAAkBE,EAAE,oBAAoB,CAAC;AAAA,2BACnC,KAAK,UAAU;AAAA,UAChC,KAAK,MAAM;AAAA;AAAA,EAAA;AAGrB;AAxJEd,EAAO,UAAU,0BAEjBA,EAAO,eAAe;AAAA,EACpB,+BAA+Be;AAAA,EAC/B,eAAeC;AAAA,EACf,qBAAqBC;AACvB,GAgDgBjB,EAAA,SAASkB,EAAUC,CAAM;AAvDtB,IAAAC,IAAApB;AAWSqB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAXPF,EAWS,WAAA,KAAA;AAGgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAdvBF,EAcyB,WAAA,UAAA;AAGhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAjBSF,EAiBP,WAAA,OAAA;AAGgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GApBPF,EAoBS,WAAA,kBAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAvBPF,EAuBS,WAAA,cAAA;AAKIC,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,GAAO,CAAA;AAAA,GA5BXF,EA4Ba,WAAA,kBAAA;AAKJC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAjCPF,EAiCS,WAAA,eAAA;AAGCC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GApCRF,EAoCU,WAAA,eAAA;AAGDC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAvCPF,EAuCS,WAAA,cAAA;AAKAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA5CPF,EA4CS,WAAA,eAAA;AAM5BC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAjDPF,EAkDnB,WAAA,eAAA;AAGQC,EAAA;AAAA,EADPE,EAAM;AAAA,GApDYH,EAqDX,WAAA,QAAA;"}
+{"version":3,"file":"file-input-list.component.js","sources":["../../../src/components/file-input/file-input-list.component.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, TemplateResult, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { FileItemTemplate } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { formLabelTemplate } from '@/internal/templates/formLabel'\nimport { t } from '@/localization/localization'\n\nimport DapDSFormLabel from '../form/form-label/form-label.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSFileInput from './file-input.component'\nimport styles from './file-input-list.scss?inline'\nimport DapDSFileInputListItem from './file-input-list-item.component'\n\n/**\n * `dap-ds-file-input-list`\n * @summary A file input list is a container for file input items.\n * @element dap-ds-file-input-list\n * @title - File input list\n * @group file-input\n *\n * @slot delete-button - The delete button.\n *\n * @event {{ file: FileListElement }} dds-file-click - Dispatched when a file is clicked.\n *\n * @csspart base - The main file input list container.\n *\n * @cssproperty --dds-file-list-display - Controls the display property (default: flex)\n * @cssproperty --dds-file-list-flex-direction - Controls the flex-direction property (default: column)\n * @cssproperty --dds-file-list-padding - Controls the padding property (default: 0)\n * @cssproperty --dds-file-list-list-style - Controls the list-style-type property (default: none)\n * @cssproperty --dds-file-list-gap - Controls the row-gap property (default: var(--dds-spacing-200))\n */\nexport default class DapDSFileInputList extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-file-input-list'\n\n  static dependencies = {\n    'dap-ds-file-input-list-item': DapDSFileInputListItem,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-form-label': DapDSFormLabel,\n  }\n\n  /** The aria label for the file input list. */\n  /** The id of the file input element to bind to. */\n  @property({ type: String }) for: string\n\n  /** Disables the file input list. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** The label for the file input list. */\n  @property() label?: string\n\n  /** Whether to show the delete button in the file input list item. */\n  @property({ type: String }) showDeleteButton = 'true'\n\n  /** Whether to show the file link in the file input list item. */\n  @property({ type: String }) showFileLink = 'true'\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  /** Whether to emit a custom event with the file data when the file is clicked. */\n  @property({ type: Boolean }) emitLinkEvent: boolean = false\n\n  /** Whether to show the file size in the file input list item */\n  @property({ type: String }) showFileSize = 'true'\n\n  /** Whether to show thumbnail preview for supported file types\n   * @ignore\n   */\n  @property({ type: String }) showThumbnail = 'false'\n\n  /** Size of the thumbnail preview\n   * @ignore\n   */\n  @property({ type: String })\n  thumbnailSize: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'sm'\n\n  @state()\n  private _files: TemplateResult[] = []\n\n  static readonly styles = unsafeCSS(styles)\n\n  private fileInputElement: DapDSFileInput | null = null\n\n  get files() {\n    return this.querySelectorAll('dap-ds-file-input-list-item')\n  }\n\n  getFileByName(name: string) {\n    return this.shadowRoot!.querySelector(\n      `dap-ds-file-input-list-item[filename=\"${name}\"]`,\n    )\n  }\n\n  private handleFileClick(event: Event) {\n    event.preventDefault()\n    event.stopPropagation()\n    this.emit('dds-file-click', { data: (event as CustomEvent).detail.data })\n  }\n\n  private _handleFilesAccepted(event: Event) {\n    const customEvent = event as CustomEvent<{ files: File[] }>\n    const files = customEvent.detail.files\n\n    const fileComponents = files.map((file: File) => {\n      const linkSlot = this.querySelector('[slot=\"link\"]')\n      const hasLinkSlot = linkSlot && linkSlot.innerHTML.trim() !== ''\n\n      return html`<dap-ds-file-input-list-item\n        size=${this.size}\n        .fileData=${file}\n        fileName=${file.name}\n        showDeleteButton=${this.showDeleteButton}\n        showFileLink=${this.showFileLink}\n        fileLinkLabel=${this.fileLinkLabel}\n        showFileSize=${this.showFileSize}\n        showThumbnail=${this.showThumbnail}\n        thumbnailSize=${this.thumbnailSize}\n        ?emitLinkEvent=${this.emitLinkEvent}\n        .fileItemTemplate=${this.fileItemTemplate}\n        @dds-file-click=${this.handleFileClick}\n        ?disabled=${this.disabled}>\n        <slot name=\"delete-button\" slot=\"delete-button\">\n          <dap-ds-icon\n            class=\"content__remove-button-icon\"\n            name=\"delete-bin-line\"></dap-ds-icon>\n        </slot>\n        ${hasLinkSlot ? html`<slot name=\"link\" slot=\"link\"></slot>` : nothing}\n      </dap-ds-file-input-list-item>`\n    })\n\n    this._files = fileComponents\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    if (this.for) {\n      this.fileInputElement = document.querySelector(`#${this.for}`)\n      if (this.fileInputElement) {\n        this.fileInputElement.fileList = this\n        this.fileInputElement?.addEventListener(\n          'dds-files-accepted',\n          this._handleFilesAccepted.bind(this),\n        )\n      }\n    }\n  }\n\n  removeFile(event: CustomEvent) {\n    this.fileInputElement?.dispatchEvent(\n      new CustomEvent('dds-file-remove', {\n        bubbles: false,\n        composed: true,\n        detail: event.detail,\n      }),\n    )\n  }\n\n  render() {\n    return html`${this._files.length > 0\n        ? formLabelTemplate({\n            label: this.label,\n            id: 'label',\n            size: this.size,\n          })\n        : nothing}\n      <ul\n        class=\"file-input-list\"\n        part=\"base\"\n        role=\"list\"\n        aria-label=${this.ariaLabel ?? t('fileInput.fileList')}\n        @dds-file-remove=${this.removeFile}>\n        ${this._files}\n      </ul>`\n  }\n}\n"],"names":["_DapDSFileInputList","SizedMixin","DdsElement","name","event","fileComponents","file","linkSlot","hasLinkSlot","html","nothing","_changedProperties","_a","formLabelTemplate","t","DapDSFileInputListItem","DapDSIcon","DapDSFormLabel","unsafeCSS","styles","DapDSFileInputList","__decorateClass","property","state"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-const t = "*,*: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-display: flex;--dds-file-list-flex-direction: column;--dds-file-list-padding: 0;--dds-file-list-list-style: none;--dds-file-list-gap: var(--dds-spacing-200)}.file-input-list{display:var(--dds-file-list-display);flex-direction:var(--dds-file-list-flex-direction);padding:var(--dds-file-list-padding);list-style-type:var(--dds-file-list-list-style);row-gap:var(--dds-file-list-gap)}";
+const t = "*,*: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-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}:host{--dds-file-list-display: flex;--dds-file-list-flex-direction: column;--dds-file-list-padding: 0;--dds-file-list-list-style: none;--dds-file-list-gap: var(--dds-spacing-200)}.file-input-list{display:var(--dds-file-list-display);flex-direction:var(--dds-file-list-flex-direction);padding:var(--dds-file-list-padding);list-style-type:var(--dds-file-list-list-style);row-gap:var(--dds-file-list-gap)}";
 export {
   t as default
 };

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

@@ -81,6 +81,9 @@ import { default as DapDSFileInputList } from './file-input-list.component';
  * @csspart browse-button - The browse button.
  * @csspart upload-button - The upload button.
  * @csspart dropzone - The dropzone area.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  *
  * @cssproperty --dds-file-input-holder-margin - The margin of the input holder in shorthand format: top right bottom left (default: var(--dds-spacing-400) 0 0 0)
  * @cssproperty --dds-file-input-dropzone-padding - The padding of the dropzone (default: var(--dds-spacing-800))