@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/dialog-layout/dialog-layout.element.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * @element uui-dialog-layout
+ * @slot - Use this for the text content
+ * @slot headline - Use this for slotted headline
+ * @slot actions - Use this for actions
+ * @description - Default dialog layout
+ */
+export declare class UUIDialogLayoutElement extends LitElement {
+    /**
+     * Headline for this notification, can also be set via the 'headline' slot.
+     * @type string
+     * @attr
+     * @default null
+     */
+    headline: string | null;
+    private _headlineSlotHasContent;
+    private readonly _headlineSlotChanged;
+    /**
+     * Renders a h3 with the headline slot nested
+     * @returns {TemplateResult}
+     * @protected
+     * @method
+     */
+    protected renderHeadline(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders default slot
+     * @returns {TemplateResult}
+     * @protected
+     * @method
+     */
+    protected renderContent(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders actions slot
+     * @returns {TemplateResult}
+     * @protected
+     * @method
+     */
+    protected renderActions(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/dialog-layout/dialog-layout.element.js

@@ -0,0 +1,83 @@
+import { LitElement, html, css } from "lit";
+import { property, state } from "lit/decorators.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUIDialogLayoutElement = class _UUIDialogLayoutElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.headline = null;
+    this._headlineSlotHasContent = false;
+    this._headlineSlotChanged = (e) => {
+      this._headlineSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+    };
+  }
+  /**
+   * Renders a h3 with the headline slot nested
+   * @returns {TemplateResult}
+   * @protected
+   * @method
+   */
+  renderHeadline() {
+    return html` <h3
+      style=${this._headlineSlotHasContent || this.headline !== null ? "" : "display: none"}>
+      ${this.headline}
+      <slot name="headline" @slotchange=${this._headlineSlotChanged}></slot>
+    </h3>`;
+  }
+  /**
+   * Renders default slot
+   * @returns {TemplateResult}
+   * @protected
+   * @method
+   */
+  renderContent() {
+    return html`<slot></slot>`;
+  }
+  /**
+   * Renders actions slot
+   * @returns {TemplateResult}
+   * @protected
+   * @method
+   */
+  renderActions() {
+    return html`<slot id="actions" name="actions"></slot>`;
+  }
+  render() {
+    return html`${this.renderHeadline()} ${this.renderContent()}
+    ${this.renderActions()} `;
+  }
+};
+_UUIDialogLayoutElement.styles = [
+  css`
+      :host {
+        display: block;
+        padding: var(--uui-size-10) var(--uui-size-14);
+        color: var(--uui-color-text);
+      }
+
+      #actions {
+        margin-top: var(--uui-size-8);
+        display: flex;
+        justify-content: end;
+        gap: var(--uui-size-4);
+      }
+    `
+];
+let UUIDialogLayoutElement = _UUIDialogLayoutElement;
+__decorateClass([
+  property({ type: String })
+], UUIDialogLayoutElement.prototype, "headline");
+__decorateClass([
+  state()
+], UUIDialogLayoutElement.prototype, "_headlineSlotHasContent");
+export {
+  UUIDialogLayoutElement
+};
+//# sourceMappingURL=dialog-layout.element.js.map

package/dist/components/dialog-layout/dialog-layout.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-layout.element.js","sources":["../../../src/components/dialog-layout/dialog-layout.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\n/**\n * @element uui-dialog-layout\n * @slot - Use this for the text content\n * @slot headline - Use this for slotted headline\n * @slot actions - Use this for actions\n * @description - Default dialog layout\n */\nexport class UUIDialogLayoutElement extends LitElement {\n  /**\n   * Headline for this notification, can also be set via the 'headline' slot.\n   * @type string\n   * @attr\n   * @default null\n   */\n  @property({ type: String })\n  headline: string | null = null;\n\n  @state()\n  private _headlineSlotHasContent = false;\n\n  private readonly _headlineSlotChanged = (e: Event) => {\n    this._headlineSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  /**\n   * Renders a h3 with the headline slot nested\n   * @returns {TemplateResult}\n   * @protected\n   * @method\n   */\n  protected renderHeadline() {\n    return html` <h3\n      style=${this._headlineSlotHasContent || this.headline !== null\n        ? ''\n        : 'display: none'}>\n      ${this.headline}\n      <slot name=\"headline\" @slotchange=${this._headlineSlotChanged}></slot>\n    </h3>`;\n  }\n\n  /**\n   * Renders default slot\n   * @returns {TemplateResult}\n   * @protected\n   * @method\n   */\n  protected renderContent() {\n    return html`<slot></slot>`;\n  }\n\n  /**\n   * Renders actions slot\n   * @returns {TemplateResult}\n   * @protected\n   * @method\n   */\n  protected renderActions() {\n    return html`<slot id=\"actions\" name=\"actions\"></slot>`;\n  }\n\n  render() {\n    return html`${this.renderHeadline()} ${this.renderContent()}\n    ${this.renderActions()} `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n        padding: var(--uui-size-10) var(--uui-size-14);\n        color: var(--uui-color-text);\n      }\n\n      #actions {\n        margin-top: var(--uui-size-8);\n        display: flex;\n        justify-content: end;\n        gap: var(--uui-size-4);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,0BAAN,MAAM,gCAA+B,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,WAA0B;AAG1B,SAAQ,0BAA0B;AAElC,SAAiB,uBAAuB,CAAC,MAAa;AACpD,WAAK,0BACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS;AAAA,IAC5E;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQU,iBAAiB;AACzB,WAAO;AAAA,cACG,KAAK,2BAA2B,KAAK,aAAa,OACtD,KACA,eAAe;AAAA,QACjB,KAAK,QAAQ;AAAA,0CACqB,KAAK,oBAAoB;AAAA;AAAA,EAEjE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQU,gBAAgB;AACxB,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQU,gBAAgB;AACxB,WAAO;AAAA,EACT;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,eAAA,CAAgB,IAAI,KAAK,eAAe;AAAA,MACzD,KAAK,eAAe;AAAA,EACxB;AAkBF;AAhBE,wBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5DG,IAAM,yBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,uBAQX,WAAA,UAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAVI,uBAWH,WAAA,yBAAA;"}

package/dist/components/dialog-layout/dialog-layout.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIDialogLayoutElement } from "./dialog-layout.element.js";
+defineElement("uui-dialog-layout", UUIDialogLayoutElement);
+export {
+  UUIDialogLayoutElement,
+  UUIDialogLayoutElement as default
+};
+//# sourceMappingURL=dialog-layout.js.map

package/dist/components/dialog-layout/dialog-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-layout.js","sources":["../../../src/components/dialog-layout/dialog-layout.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIDialogLayoutElement } from './dialog-layout.element.js';\n\ndefineElement('uui-dialog-layout', UUIDialogLayoutElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-dialog-layout': UUIDialogLayoutElement;\n  }\n}\n\nexport * from './dialog-layout.element.js';\nexport { UUIDialogLayoutElement as default } from './dialog-layout.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,qBAAqB,sBAAsB;"}

package/dist/components/file-dropzone/UUIFileDropzoneEvent.d.ts

@@ -0,0 +1,10 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIFileDropzoneElement, UUIFileFolder } from './file-dropzone.element.js';
+export declare class UUIFileDropzoneEvent extends UUIEvent<{
+    files: File[];
+    folders: UUIFileFolder[];
+}, UUIFileDropzoneElement> {
+    static readonly CHANGE: string;
+    static readonly REJECT: string;
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/file-dropzone/UUIFileDropzoneEvent.js

@@ -0,0 +1,16 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIFileDropzoneEvent = class _UUIFileDropzoneEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      ...eventInit
+    });
+  }
+};
+_UUIFileDropzoneEvent.CHANGE = "change";
+_UUIFileDropzoneEvent.REJECT = "reject";
+let UUIFileDropzoneEvent = _UUIFileDropzoneEvent;
+export {
+  UUIFileDropzoneEvent
+};
+//# sourceMappingURL=UUIFileDropzoneEvent.js.map

package/dist/components/file-dropzone/UUIFileDropzoneEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIFileDropzoneEvent.js","sources":["../../../src/components/file-dropzone/UUIFileDropzoneEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type {\n  UUIFileDropzoneElement,\n  UUIFileFolder,\n} from './file-dropzone.element.js';\n\nexport class UUIFileDropzoneEvent extends UUIEvent<\n  { files: File[]; folders: UUIFileFolder[] },\n  UUIFileDropzoneElement\n> {\n  public static readonly CHANGE: string = 'change';\n  public static readonly REJECT: string = 'reject';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAMO,MAAM,wBAAN,MAAM,8BAA6B,SAGxC;AAAA,EAIA,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,sBAAuB,SAAiB;AACxC,sBAAuB,SAAiB;AALnC,IAAM,uBAAN;"}

package/dist/components/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,9 @@
+import { UUIFileDropzoneElement } from './file-dropzone.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-file-dropzone': UUIFileDropzoneElement;
+    }
+}
+export * from './file-dropzone.element.js';
+export * from './UUIFileDropzoneEvent.js';
+export { UUIFileDropzoneElement as default } from './file-dropzone.element.js';

package/dist/components/file-dropzone/file-dropzone.element.d.ts

@@ -0,0 +1,80 @@
+import { LitElement } from 'lit';
+import '../symbol-file-dropzone/symbol-file-dropzone.js';
+export interface UUIFileFolder {
+    folderName: string;
+    folders: UUIFileFolder[];
+    files: File[];
+}
+declare const UUIFileDropzoneElement_base: (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & typeof LitElement;
+/**
+ * @element uui-file-dropzone
+ *  @fires {UUIFileDropzoneEvent} change - fires when a file has been selected.
+ *  @fires {UUIFileDropzoneEvent} reject - fires when files are rejected due to not matching the accept attribute.
+ *  @slot - For the content of the dropzone
+ *  @description - Dropzone for file upload. Supports native browsing and drag n drop.
+ */
+export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base {
+    private readonly _input;
+    private readonly _dropzone;
+    private _acceptedFileExtensions;
+    private _acceptedMimeTypes;
+    private _accept;
+    /**
+     * Comma-separated list of accepted mime types or file extensions (denoted with a `.`).
+     * If this is left empty, it will allow all types.
+     *
+     * @type {string}
+     * @attr
+     * @examples [
+     *   "image/*,application/pdf",
+     *   ".gif,.png,.jpg,.jpeg,.pdf",
+     * ]
+     */
+    set accept(value: string);
+    get accept(): string;
+    disallowFolderUpload: boolean;
+    /**
+     * Allows for multiple files to be selected.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    multiple: boolean;
+    /**
+     * Opens the native file picker to select a file.
+     * @method browse
+     */
+    browse(): void;
+    constructor();
+    /**
+     * Process a single file entry and categorize it as accepted or rejected.
+     * @param entry - The data transfer item containing the file
+     * @param files - Array to store accepted files
+     * @param rejectedFiles - Array to store rejected files
+     */
+    private _processFileEntry;
+    /**
+     * Check if folder upload should be processed based on component settings.
+     * @returns true if folder upload is allowed and multiple files are enabled
+     */
+    private _shouldProcessFolder;
+    private _getAllEntries;
+    /**
+     * Get the directory entry from a DataTransferItem.
+     * @remark Supports both WebKit and non-WebKit browsers.
+     */
+    private _getEntry;
+    private _processEntries;
+    private _readAllEntries;
+    private _mkdir;
+    private _isAccepted;
+    private _getAsFile;
+    private _onDrop;
+    private _onDragOver;
+    private _onDragEnter;
+    private _onDragLeave;
+    private _onFileInputChange;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

package/dist/components/file-dropzone/file-dropzone.element.js

@@ -0,0 +1,321 @@
+import { LitElement, html, css } from "lit";
+import { query, property } from "lit/decorators.js";
+import { UUIFileDropzoneEvent } from "./UUIFileDropzoneEvent.js";
+import "../symbol-file-dropzone/symbol-file-dropzone.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const _UUIFileDropzoneElement = class _UUIFileDropzoneElement extends LabelMixin("", LitElement) {
+  constructor() {
+    super();
+    this._acceptedFileExtensions = [];
+    this._acceptedMimeTypes = [];
+    this._accept = "";
+    this.disallowFolderUpload = false;
+    this.multiple = false;
+    this.addEventListener("dragenter", this._onDragEnter, false);
+    this.addEventListener("dragleave", this._onDragLeave, false);
+    this.addEventListener("dragover", this._onDragOver, false);
+    this.addEventListener("drop", this._onDrop, false);
+  }
+  set accept(value) {
+    if (value) {
+      const mimetypes = [];
+      const fileextensions = [];
+      value.split(",").forEach((item) => {
+        item = item.trim().toLowerCase();
+        if (/^[a-z]+\/[a-z*]+$/.test(item)) {
+          mimetypes.push(item);
+        } else {
+          fileextensions.push(item.replace(/^\./, ""));
+        }
+      });
+      this._acceptedMimeTypes = mimetypes;
+      this._acceptedFileExtensions = fileextensions;
+    } else {
+      this._acceptedMimeTypes = [];
+      this._acceptedFileExtensions = [];
+    }
+    const old = this._accept;
+    this._accept = value;
+    this.requestUpdate("accept", old);
+  }
+  get accept() {
+    return this._accept;
+  }
+  /**
+   * Opens the native file picker to select a file.
+   * @method browse
+   */
+  browse() {
+    this._input.click();
+  }
+  /**
+   * Process a single file entry and categorize it as accepted or rejected.
+   * @param entry - The data transfer item containing the file
+   * @param files - Array to store accepted files
+   * @param rejectedFiles - Array to store rejected files
+   */
+  _processFileEntry(entry, files, rejectedFiles) {
+    const file = entry.getAsFile();
+    if (!file) return;
+    if (this._isAccepted(file)) {
+      files.push(file);
+    } else {
+      rejectedFiles.push(file);
+    }
+  }
+  /**
+   * Check if folder upload should be processed based on component settings.
+   * @returns true if folder upload is allowed and multiple files are enabled
+   */
+  _shouldProcessFolder() {
+    return !this.disallowFolderUpload && this.multiple;
+  }
+  async _getAllEntries(dataTransferItemList) {
+    const queue = [...dataTransferItemList];
+    const folders = [];
+    const files = [];
+    const rejectedFiles = [];
+    for (const entry of queue) {
+      if (entry?.kind !== "file") continue;
+      const fileEntry = this._getEntry(entry);
+      if (!fileEntry) continue;
+      if (!fileEntry.isDirectory) {
+        this._processFileEntry(entry, files, rejectedFiles);
+      } else if (this._shouldProcessFolder()) {
+        const structure = await this._mkdir(fileEntry);
+        folders.push(structure);
+      }
+    }
+    return { files, folders, rejectedFiles };
+  }
+  /**
+   * Get the directory entry from a DataTransferItem.
+   * @remark Supports both WebKit and non-WebKit browsers.
+   */
+  _getEntry(entry) {
+    let dir = null;
+    if ("webkitGetAsEntry" in entry) {
+      dir = entry.webkitGetAsEntry();
+    } else if ("getAsEntry" in entry) {
+      dir = entry.getAsEntry();
+    }
+    return dir;
+  }
+  // Process entries from a directory reader
+  async _processEntries(entries, folders, files) {
+    for (const en of entries) {
+      if (en.isFile) {
+        const file = await this._getAsFile(en);
+        if (this._isAccepted(file)) {
+          files.push(file);
+        }
+      } else if (en.isDirectory) {
+        const directory = await this._mkdir(en);
+        folders.push(directory);
+      }
+    }
+  }
+  // Read entries from a directory reader recursively
+  async _readAllEntries(reader, folders, files) {
+    return new Promise((resolve, reject) => {
+      reader.readEntries(async (entries) => {
+        if (!entries.length) {
+          resolve();
+          return;
+        }
+        await this._processEntries(entries, folders, files);
+        await this._readAllEntries(reader, folders, files);
+        resolve();
+      }, reject);
+    });
+  }
+  // Make directory structure
+  async _mkdir(entry) {
+    const reader = entry.createReader();
+    const folders = [];
+    const files = [];
+    await this._readAllEntries(reader, folders, files);
+    const result = { folderName: entry.name, folders, files };
+    return result;
+  }
+  _isAccepted(file) {
+    if (this._acceptedFileExtensions.length === 0 && this._acceptedMimeTypes.length === 0) {
+      return true;
+    }
+    const fileType = file.type.toLowerCase();
+    const fileExtension = file.name.split(".").pop();
+    if (fileExtension && this._acceptedFileExtensions.includes(fileExtension.toLowerCase())) {
+      return true;
+    }
+    for (const mimeType of this._acceptedMimeTypes) {
+      if (fileType === mimeType || mimeType.endsWith("/*") && fileType.startsWith(mimeType.replace("*", ""))) {
+        return true;
+      }
+    }
+    return false;
+  }
+  async _getAsFile(fileEntry) {
+    return new Promise((resolve, reject) => fileEntry.file(resolve, reject));
+  }
+  async _onDrop(e) {
+    e.preventDefault();
+    this._dropzone.classList.remove("hover");
+    const items = e.dataTransfer?.items;
+    if (items) {
+      const fileSystemResult = await this._getAllEntries(items);
+      if (this.multiple === false && fileSystemResult.files.length) {
+        fileSystemResult.files = [fileSystemResult.files[0]];
+        fileSystemResult.folders = [];
+        fileSystemResult.rejectedFiles = [];
+      }
+      if (fileSystemResult.rejectedFiles.length > 0) {
+        this.dispatchEvent(
+          new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {
+            detail: { files: fileSystemResult.rejectedFiles, folders: [] }
+          })
+        );
+      }
+      if (!fileSystemResult.files.length && !fileSystemResult.folders.length) {
+        return;
+      }
+      this.dispatchEvent(
+        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
+          detail: {
+            files: fileSystemResult.files,
+            folders: fileSystemResult.folders
+          }
+        })
+      );
+    }
+  }
+  _onDragOver(e) {
+    e.preventDefault();
+  }
+  _onDragEnter(e) {
+    this._dropzone.classList.add("hover");
+    e.preventDefault();
+  }
+  _onDragLeave(e) {
+    this._dropzone.classList.remove("hover");
+    e.preventDefault();
+  }
+  _onFileInputChange() {
+    const files = this._input.files ? Array.from(this._input.files) : [];
+    if (this.multiple === false && files.length > 1) {
+      files.splice(1, files.length - 1);
+    }
+    const allowedFiles = files.filter((file) => this._isAccepted(file));
+    const rejectedFiles = files.filter((file) => !this._isAccepted(file));
+    const shouldReportRejections = rejectedFiles.length > 0 && (this.multiple || allowedFiles.length === 0);
+    if (shouldReportRejections) {
+      this.dispatchEvent(
+        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {
+          detail: { files: rejectedFiles, folders: [] }
+        })
+      );
+    }
+    if (!allowedFiles.length) {
+      return;
+    }
+    this.dispatchEvent(
+      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
+        detail: {
+          files: allowedFiles,
+          folders: []
+        }
+      })
+    );
+  }
+  render() {
+    return html`
+      <div id="dropzone">
+        <uui-symbol-file-dropzone id="symbol"></uui-symbol-file-dropzone>
+        ${this.renderLabel()}
+        <input
+          @click=${(e) => e.stopImmediatePropagation()}
+          id="input"
+          type="file"
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          @change=${this._onFileInputChange}
+          aria-label="${this.label}" />
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+_UUIFileDropzoneElement.styles = [
+  css`
+      #dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: var(--uui-size-4);
+        border: 3px solid transparent;
+        margin: -3px;
+        backdrop-filter: blur(2px);
+      }
+      #dropzone.hover {
+        border-color: var(--uui-color-default);
+      }
+      #dropzone.hover::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        opacity: 0.2;
+        border-color: var(--uui-color-default);
+        background-color: var(--uui-color-default);
+      }
+      #symbol {
+        color: var(--uui-color-default);
+        max-width: 100%;
+        max-height: 100%;
+      }
+      #input {
+        position: absolute;
+        width: 0px;
+        height: 0px;
+        opacity: 0;
+        display: none;
+      }
+    `
+];
+let UUIFileDropzoneElement = _UUIFileDropzoneElement;
+__decorateClass([
+  query("#input")
+], UUIFileDropzoneElement.prototype, "_input", 2);
+__decorateClass([
+  query("#dropzone")
+], UUIFileDropzoneElement.prototype, "_dropzone", 2);
+__decorateClass([
+  property({ type: String })
+], UUIFileDropzoneElement.prototype, "accept", 1);
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true,
+    attribute: "disallow-folder-upload"
+  })
+], UUIFileDropzoneElement.prototype, "disallowFolderUpload", 2);
+__decorateClass([
+  property({ type: Boolean })
+], UUIFileDropzoneElement.prototype, "multiple", 2);
+export {
+  UUIFileDropzoneElement
+};
+//# sourceMappingURL=file-dropzone.element.js.map

package/dist/components/file-dropzone/file-dropzone.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-dropzone.element.js","sources":["../../../src/components/file-dropzone/file-dropzone.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { query, property } from 'lit/decorators.js';\nimport { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nimport '../symbol-file-dropzone/symbol-file-dropzone.js';\n\nexport interface UUIFileFolder {\n  folderName: string;\n  folders: UUIFileFolder[];\n  files: File[];\n}\n\n/**\n * @element uui-file-dropzone\n *  @fires {UUIFileDropzoneEvent} change - fires when a file has been selected.\n *  @fires {UUIFileDropzoneEvent} reject - fires when files are rejected due to not matching the accept attribute.\n *  @slot - For the content of the dropzone\n *  @description - Dropzone for file upload. Supports native browsing and drag n drop.\n */\nexport class UUIFileDropzoneElement extends LabelMixin('', LitElement) {\n  @query('#input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#dropzone')\n  private readonly _dropzone!: HTMLElement;\n\n  private _acceptedFileExtensions: string[] = [];\n  private _acceptedMimeTypes: string[] = [];\n  private _accept = '';\n\n  /**\n   * Comma-separated list of accepted mime types or file extensions (denoted with a `.`).\n   * If this is left empty, it will allow all types.\n   *\n   * @type {string}\n   * @attr\n   * @examples [\n   *   \"image/*,application/pdf\",\n   *   \".gif,.png,.jpg,.jpeg,.pdf\",\n   * ]\n   */\n  @property({ type: String })\n  public set accept(value: string) {\n    if (value) {\n      const mimetypes: string[] = [];\n      const fileextensions: string[] = [];\n\n      // Create the arrays defined above\n      value.split(',').forEach(item => {\n        item = item.trim().toLowerCase();\n\n        // If the item is a mime type, add it to the accept list\n        if (/^[a-z]+\\/[a-z*]+$/.test(item)) {\n          mimetypes.push(item);\n        } else {\n          fileextensions.push(item.replace(/^\\./, ''));\n        }\n      });\n\n      this._acceptedMimeTypes = mimetypes;\n      this._acceptedFileExtensions = fileextensions;\n    } else {\n      this._acceptedMimeTypes = [];\n      this._acceptedFileExtensions = [];\n    }\n    const old = this._accept;\n    this._accept = value;\n    this.requestUpdate('accept', old);\n  }\n  public get accept(): string {\n    return this._accept;\n  }\n\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'disallow-folder-upload',\n  })\n  public disallowFolderUpload: boolean = false;\n\n  /**\n   * Allows for multiple files to be selected.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean })\n  public multiple: boolean = false;\n\n  /**\n   * Opens the native file picker to select a file.\n   * @method browse\n   */\n  public browse() {\n    this._input.click();\n  }\n\n  constructor() {\n    super();\n\n    this.addEventListener('dragenter', this._onDragEnter, false);\n    this.addEventListener('dragleave', this._onDragLeave, false);\n    this.addEventListener('dragover', this._onDragOver, false);\n    this.addEventListener('drop', this._onDrop, false);\n  }\n\n  /**\n   * Process a single file entry and categorize it as accepted or rejected.\n   * @param entry - The data transfer item containing the file\n   * @param files - Array to store accepted files\n   * @param rejectedFiles - Array to store rejected files\n   */\n  private _processFileEntry(\n    entry: DataTransferItem,\n    files: File[],\n    rejectedFiles: File[],\n  ): void {\n    const file = entry.getAsFile();\n    if (!file) return;\n\n    if (this._isAccepted(file)) {\n      files.push(file);\n    } else {\n      rejectedFiles.push(file);\n    }\n  }\n\n  /**\n   * Check if folder upload should be processed based on component settings.\n   * @returns true if folder upload is allowed and multiple files are enabled\n   */\n  private _shouldProcessFolder(): boolean {\n    return !this.disallowFolderUpload && this.multiple;\n  }\n\n  private async _getAllEntries(dataTransferItemList: DataTransferItemList) {\n    // Use BFS to traverse entire directory/file structure\n    const queue = [...dataTransferItemList];\n\n    const folders: UUIFileFolder[] = [];\n    const files: File[] = [];\n    const rejectedFiles: File[] = [];\n\n    for (const entry of queue) {\n      if (entry?.kind !== 'file') continue;\n\n      const fileEntry = this._getEntry(entry);\n      if (!fileEntry) continue;\n\n      if (!fileEntry.isDirectory) {\n        // Entry is a file\n        this._processFileEntry(entry, files, rejectedFiles);\n      } else if (this._shouldProcessFolder()) {\n        // Entry is a directory\n        const structure = await this._mkdir(fileEntry);\n        folders.push(structure);\n      }\n    }\n\n    return { files, folders, rejectedFiles };\n  }\n\n  /**\n   * Get the directory entry from a DataTransferItem.\n   * @remark Supports both WebKit and non-WebKit browsers.\n   */\n  private _getEntry(entry: DataTransferItem): FileSystemDirectoryEntry | null {\n    let dir: FileSystemDirectoryEntry | null = null;\n\n    if ('webkitGetAsEntry' in entry) {\n      dir = entry.webkitGetAsEntry() as FileSystemDirectoryEntry;\n    } else if ('getAsEntry' in entry) {\n      // non-WebKit browsers may rename webkitGetAsEntry to getAsEntry. MDN recommends looking for both.\n      dir = (entry as any).getAsEntry();\n    }\n\n    return dir;\n  }\n\n  // Process entries from a directory reader\n  private async _processEntries(\n    entries: FileSystemEntry[],\n    folders: UUIFileFolder[],\n    files: File[],\n  ): Promise<void> {\n    for (const en of entries) {\n      if (en.isFile) {\n        const file = await this._getAsFile(en as FileSystemFileEntry);\n        if (this._isAccepted(file)) {\n          files.push(file);\n        }\n      } else if (en.isDirectory) {\n        const directory = await this._mkdir(en as FileSystemDirectoryEntry);\n        folders.push(directory);\n      }\n    }\n  }\n\n  // Read entries from a directory reader recursively\n  private async _readAllEntries(\n    reader: FileSystemDirectoryReader,\n    folders: UUIFileFolder[],\n    files: File[],\n  ): Promise<void> {\n    return new Promise<void>((resolve, reject) => {\n      reader.readEntries(async entries => {\n        if (!entries.length) {\n          resolve();\n          return;\n        }\n\n        await this._processEntries(entries, folders, files);\n\n        // readEntries only reads up to 100 entries at a time. It is on purpose we call readEntries recursively.\n        await this._readAllEntries(reader, folders, files);\n\n        resolve();\n      }, reject);\n    });\n  }\n\n  // Make directory structure\n  private async _mkdir(\n    entry: FileSystemDirectoryEntry,\n  ): Promise<UUIFileFolder> {\n    const reader = entry.createReader();\n    const folders: UUIFileFolder[] = [];\n    const files: File[] = [];\n\n    await this._readAllEntries(reader, folders, files);\n\n    const result: UUIFileFolder = { folderName: entry.name, folders, files };\n    return result;\n  }\n\n  private _isAccepted(file: File) {\n    if (\n      this._acceptedFileExtensions.length === 0 &&\n      this._acceptedMimeTypes.length === 0\n    ) {\n      return true;\n    }\n\n    const fileType = file.type.toLowerCase();\n    const fileExtension = file.name.split('.').pop();\n\n    if (\n      fileExtension &&\n      this._acceptedFileExtensions.includes(fileExtension.toLowerCase())\n    ) {\n      return true;\n    }\n\n    for (const mimeType of this._acceptedMimeTypes) {\n      if (\n        fileType === mimeType ||\n        (mimeType.endsWith('/*') &&\n          fileType.startsWith(mimeType.replace('*', '')))\n      ) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  private async _getAsFile(fileEntry: FileSystemFileEntry): Promise<File> {\n    return new Promise((resolve, reject) => fileEntry.file(resolve, reject));\n  }\n\n  private async _onDrop(e: DragEvent) {\n    e.preventDefault();\n    this._dropzone.classList.remove('hover');\n\n    const items = e.dataTransfer?.items;\n\n    if (items) {\n      const fileSystemResult = await this._getAllEntries(items);\n\n      if (this.multiple === false && fileSystemResult.files.length) {\n        fileSystemResult.files = [fileSystemResult.files[0]];\n        fileSystemResult.folders = [];\n        // When multiple is false and we have an accepted file, don't report rejections\n        fileSystemResult.rejectedFiles = [];\n      }\n\n      if (fileSystemResult.rejectedFiles.length > 0) {\n        this.dispatchEvent(\n          new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {\n            detail: { files: fileSystemResult.rejectedFiles, folders: [] },\n          }),\n        );\n      }\n\n      if (!fileSystemResult.files.length && !fileSystemResult.folders.length) {\n        return;\n      }\n\n      this.dispatchEvent(\n        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {\n          detail: {\n            files: fileSystemResult.files,\n            folders: fileSystemResult.folders,\n          },\n        }),\n      );\n    }\n  }\n\n  private _onDragOver(e: DragEvent) {\n    e.preventDefault();\n  }\n\n  private _onDragEnter(e: DragEvent) {\n    // TODO: make visual indication of wether the file is acceptable or not. If not we need to make a more negative/disabled visual look.\n    this._dropzone.classList.add('hover');\n    e.preventDefault();\n  }\n\n  private _onDragLeave(e: DragEvent) {\n    this._dropzone.classList.remove('hover');\n    e.preventDefault();\n  }\n\n  private _onFileInputChange() {\n    const files = this._input.files ? Array.from(this._input.files) : [];\n\n    if (this.multiple === false && files.length > 1) {\n      files.splice(1, files.length - 1);\n    }\n\n    const allowedFiles = files.filter(file => this._isAccepted(file));\n    const rejectedFiles = files.filter(file => !this._isAccepted(file));\n\n    // When multiple is false and we have an accepted file, don't report rejections\n    const shouldReportRejections =\n      rejectedFiles.length > 0 && (this.multiple || allowedFiles.length === 0);\n\n    if (shouldReportRejections) {\n      this.dispatchEvent(\n        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {\n          detail: { files: rejectedFiles, folders: [] },\n        }),\n      );\n    }\n\n    if (!allowedFiles.length) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {\n        detail: {\n          files: allowedFiles,\n          folders: [],\n        },\n      }),\n    );\n  }\n\n  render() {\n    return html`\n      <div id=\"dropzone\">\n        <uui-symbol-file-dropzone id=\"symbol\"></uui-symbol-file-dropzone>\n        ${this.renderLabel()}\n        <input\n          @click=${(e: Event) => e.stopImmediatePropagation()}\n          id=\"input\"\n          type=\"file\"\n          accept=${this.accept}\n          ?multiple=${this.multiple}\n          @change=${this._onFileInputChange}\n          aria-label=\"${this.label}\" />\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      #dropzone {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        padding: var(--uui-size-4);\n        border: 3px solid transparent;\n        margin: -3px;\n        backdrop-filter: blur(2px);\n      }\n      #dropzone.hover {\n        border-color: var(--uui-color-default);\n      }\n      #dropzone.hover::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        opacity: 0.2;\n        border-color: var(--uui-color-default);\n        background-color: var(--uui-color-default);\n      }\n      #symbol {\n        color: var(--uui-color-default);\n        max-width: 100%;\n        max-height: 100%;\n      }\n      #input {\n        position: absolute;\n        width: 0px;\n        height: 0px;\n        opacity: 0;\n        display: none;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/file-dropzone/file-dropzone.js

@@ -0,0 +1,10 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIFileDropzoneElement } from "./file-dropzone.element.js";
+import { UUIFileDropzoneEvent } from "./UUIFileDropzoneEvent.js";
+defineElement("uui-file-dropzone", UUIFileDropzoneElement);
+export {
+  UUIFileDropzoneElement,
+  UUIFileDropzoneEvent,
+  UUIFileDropzoneElement as default
+};
+//# sourceMappingURL=file-dropzone.js.map

package/dist/components/file-dropzone/file-dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-dropzone.js","sources":["../../../src/components/file-dropzone/file-dropzone.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIFileDropzoneElement } from './file-dropzone.element.js';\n\ndefineElement('uui-file-dropzone', UUIFileDropzoneElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-file-dropzone': UUIFileDropzoneElement;\n  }\n}\n\nexport * from './file-dropzone.element.js';\nexport * from './UUIFileDropzoneEvent.js';\nexport { UUIFileDropzoneElement as default } from './file-dropzone.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,qBAAqB,sBAAsB;"}

package/dist/components/file-preview/UUIFileSize.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+export declare class UUIFileSize {
+    static humanFileSize(bytes: number, si?: boolean, decimalPlaces?: number): string;
+}