@vaadin/upload 24.2.0-dev.f254716fe → 24.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,11 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-upload-file-list.js",
+    "!src/vaadin-lit-upload-file.js",
+    "!src/vaadin-lit-upload-icon.js",
+    "!src/vaadin-lit-upload.d.ts",
+    "!src/vaadin-lit-upload.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -35,24 +40,25 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-dev.f254716fe",
-    "@vaadin/button": "24.2.0-dev.f254716fe",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/progress-bar": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe",
+    "@vaadin/a11y-base": "24.3.0-alpha1",
+    "@vaadin/button": "24.3.0-alpha1",
+    "@vaadin/component-base": "24.3.0-alpha1",
+    "@vaadin/progress-bar": "24.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

package/src/vaadin-upload-file-list-mixin.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, render } from 'lit';
+
+/**
+ * @polymerMixin
+ */
+export const UploadFileListMixin = (superClass) =>
+  class UploadFileListMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * The array of files being processed, or already uploaded.
+         */
+        items: {
+          type: Array,
+        },
+
+        /**
+         * The object used to localize upload files.
+         */
+        i18n: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__updateItems(items, i18n)'];
+    }
+
+    /** @private */
+    __updateItems(items, i18n) {
+      if (items && i18n) {
+        this.requestContentUpdate();
+      }
+    }
+
+    /**
+     * Requests an update for the `vaadin-upload-file` elements.
+     *
+     * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+     */
+    requestContentUpdate() {
+      const { items, i18n } = this;
+
+      render(
+        html`
+          ${items.map(
+            (file) => html`
+              <li>
+                <vaadin-upload-file
+                  .file="${file}"
+                  .complete="${file.complete}"
+                  .errorMessage="${file.error}"
+                  .fileName="${file.name}"
+                  .held="${file.held}"
+                  .indeterminate="${file.indeterminate}"
+                  .progress="${file.progress}"
+                  .status="${file.status}"
+                  .uploading="${file.uploading}"
+                  .i18n="${i18n}"
+                ></vaadin-upload-file>
+              </li>
+            `,
+          )}
+        `,
+        this,
+      );
+    }
+  };

package/src/vaadin-upload-file-list.js

@@ -4,24 +4,27 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-upload-file.js';
-import { html as legacyHtml, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { html, render } from 'lit';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
 
 /**
  * An element used internally by `<vaadin-upload>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
- * @mixes FocusMixin
+ * @mixes ThemableMixin
+ * @mixes UploadFileListMixin
  * @private
  */
-class UploadFileList extends ThemableMixin(PolymerElement) {
+class UploadFileList extends UploadFileListMixin(ThemableMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-upload-file-list';
   }
 
   static get template() {
-    return legacyHtml`
+    return html`
       <style>
         :host {
           display: block;
@@ -42,70 +45,8 @@ class UploadFileList extends ThemableMixin(PolymerElement) {
       </ul>
     `;
   }
-
-  static get properties() {
-    return {
-      /**
-       * The array of files being processed, or already uploaded.
-       */
-      items: {
-        type: Array,
-      },
-
-      /**
-       * The object used to localize upload files.
-       */
-      i18n: {
-        type: Object,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__updateItems(items, i18n)'];
-  }
-
-  /** @private */
-  __updateItems(items, i18n) {
-    if (items && i18n) {
-      this.requestContentUpdate();
-    }
-  }
-
-  /**
-   * Requests an update for the `vaadin-upload-file` elements.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate() {
-    const { items, i18n } = this;
-
-    render(
-      html`
-        ${items.map(
-          (file) => html`
-            <li>
-              <vaadin-upload-file
-                .file="${file}"
-                .complete="${file.complete}"
-                .errorMessage="${file.error}"
-                .fileName="${file.name}"
-                .held="${file.held}"
-                .indeterminate="${file.indeterminate}"
-                .progress="${file.progress}"
-                .status="${file.status}"
-                .uploading="${file.uploading}"
-                .i18n="${i18n}"
-              ></vaadin-upload-file>
-            </li>
-          `,
-        )}
-      `,
-      this,
-    );
-  }
 }
 
-customElements.define(UploadFileList.is, UploadFileList);
+defineCustomElement(UploadFileList);
 
 export { UploadFileList };

package/src/vaadin-upload-file-mixin.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+
+export interface UploadFileI18n {
+  file: {
+    retry: string;
+    start: string;
+    remove: string;
+  };
+}
+
+export declare function UploadFileMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<FocusMixinClass> & Constructor<UploadFileMixinClass> & T;
+
+export declare class UploadFileMixinClass {
+  /**
+   * True if uploading is completed, false otherwise.
+   */
+  complete: boolean;
+
+  /**
+   * Error message returned by the server, if any.
+   */
+  errorMessage: string;
+
+  /**
+   * The object representing a file.
+   */
+  file: File;
+
+  /**
+   * Name of the uploading file.
+   */
+  fileName: string;
+
+  /**
+   * True if uploading is not started, false otherwise.
+   */
+  held: boolean;
+
+  /**
+   * True if remaining time is unknown, false otherwise.
+   */
+  indeterminate: boolean;
+
+  /**
+   * The object used to localize this component.
+   */
+  i18n: UploadFileI18n;
+
+  /**
+   * Number representing the uploading progress.
+   */
+  progress: number;
+
+  /**
+   * Uploading status.
+   */
+  status: string;
+
+  /**
+   * True if uploading is in progress, false otherwise.
+   */
+  uploading: boolean;
+}

package/src/vaadin-upload-file-mixin.js

@@ -0,0 +1,181 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * @polymerMixin
+ * @mixes FocusMixin
+ */
+export const UploadFileMixin = (superClass) =>
+  class UploadFileMixin extends FocusMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * True if uploading is completed, false otherwise.
+         */
+        complete: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Error message returned by the server, if any.
+         */
+        errorMessage: {
+          type: String,
+          value: '',
+          observer: '_errorMessageChanged',
+        },
+
+        /**
+         * The object representing a file.
+         */
+        file: {
+          type: Object,
+        },
+
+        /**
+         * Name of the uploading file.
+         */
+        fileName: {
+          type: String,
+        },
+
+        /**
+         * True if uploading is not started, false otherwise.
+         */
+        held: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * True if remaining time is unknown, false otherwise.
+         */
+        indeterminate: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * The object used to localize this component.
+         */
+        i18n: {
+          type: Object,
+        },
+
+        /**
+         * Number representing the uploading progress.
+         */
+        progress: {
+          type: Number,
+        },
+
+        /**
+         * Uploading status.
+         */
+        status: {
+          type: String,
+        },
+
+        /**
+         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         * @protected
+         */
+        tabindex: {
+          type: Number,
+          value: 0,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * True if uploading is in progress, false otherwise.
+         */
+        uploading: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /** @private */
+        _progress: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__updateProgress(_progress, progress, indeterminate)'];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(
+        new SlotController(this, 'progress', 'vaadin-progress-bar', {
+          initializer: (progress) => {
+            this._progress = progress;
+          },
+        }),
+      );
+
+      // Handle moving focus to the button on Tab.
+      this.shadowRoot.addEventListener('focusin', (e) => {
+        const target = e.composedPath()[0];
+
+        if (target.getAttribute('part').endsWith('button')) {
+          this._setFocused(false);
+        }
+      });
+
+      // Handle moving focus from the button on Shift Tab.
+      this.shadowRoot.addEventListener('focusout', (e) => {
+        if (e.relatedTarget === this) {
+          this._setFocused(true);
+        }
+      });
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to mark the file as focused
+     * only when the host is focused.
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldSetFocus(event) {
+      return event.composedPath()[0] === this;
+    }
+
+    /** @private */
+    _errorMessageChanged(errorMessage) {
+      this.toggleAttribute('error', Boolean(errorMessage));
+    }
+
+    /** @private */
+    __updateProgress(progress, value, indeterminate) {
+      if (progress) {
+        progress.value = isNaN(value) ? 0 : value / 100;
+        progress.indeterminate = indeterminate;
+      }
+    }
+
+    /** @private */
+    _fireFileEvent(e) {
+      e.preventDefault();
+      return this.dispatchEvent(
+        new CustomEvent(e.target.getAttribute('file-event'), {
+          detail: { file: this.file },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  };

package/src/vaadin-upload-file-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const uploadFileStyles: CSSResult;

package/src/vaadin-upload-file-styles.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const uploadFileStyles = css`
+  :host {
+    display: block;
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  [part='row'] {
+    list-style-type: none;
+  }
+
+  button {
+    background: transparent;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+  }
+
+  :host([complete]) ::slotted([slot='progress']),
+  :host([error]) ::slotted([slot='progress']) {
+    display: none !important;
+  }
+`;

package/src/vaadin-upload-file.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
+
+export type { UploadFileI18n } from './vaadin-upload-file-mixin.js';
+
+/**
+ * Fired when the retry button is pressed.
+ */
+export type UploadFileRetryEvent = CustomEvent<{ file: File }>;
+
+/**
+ * Fired when the start button is pressed.
+ */
+export type UploadFileStartEvent = CustomEvent<{ file: File }>;
+
+/**
+ * Fired when the abort button is pressed.
+ */
+export type UploadFileAbortEvent = CustomEvent<{ file: File }>;
+
+export interface UploadFileCustomEventMap {
+  'file-retry': UploadFileRetryEvent;
+
+  'file-start': UploadFileStartEvent;
+
+  'file-abort': UploadFileAbortEvent;
+}
+
+export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCustomEventMap {}
+
+/**
+ * `<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name        | Description
+ * -----------------|-------------
+ * `row`            | File container
+ * `info`           | Container for file status icon, file name, status and error messages
+ * `done-icon`      | File done status icon
+ * `warning-icon`   | File warning status icon
+ * `meta`           | Container for file name, status and error messages
+ * `name`           | File name
+ * `error`          | Error message, shown when error happens
+ * `status`         | Status message
+ * `commands`       | Container for file command buttons
+ * `start-button`   | Start file upload button
+ * `retry-button`   | Retry file upload button
+ * `remove-button`  | Remove file button
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute        | Description
+ * -----------------|-------------
+ * `focus-ring`     | Set when the element is focused using the keyboard.
+ * `focused`        | Set when the element is focused.
+ * `error`          | An error has happened during uploading.
+ * `indeterminate`  | Uploading is in progress, but the progress value is unknown.
+ * `uploading`      | Uploading is in progress.
+ * `complete`       | Uploading has finished successfully.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ */
+declare class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(HTMLElement))) {
+  addEventListener<K extends keyof UploadFileEventMap>(
+    type: K,
+    listener: (this: UploadFile, ev: UploadFileEventMap[K]) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+
+  removeEventListener<K extends keyof UploadFileEventMap>(
+    type: K,
+    listener: (this: UploadFile, ev: UploadFileEventMap[K]) => void,
+    options?: EventListenerOptions | boolean,
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-upload-file': UploadFile;
+  }
+}
+
+export { UploadFile };