@umbraco-ui/uui-input-file 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# uui-input-file
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-input-file?logoColor=%231B264F)
+
+Umbraco style input-file component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-input-file
+```
+
+Import the registration of `<uui-input-file>` via:
+
+```javascript
+import '@umbraco-ui/uui-input-file';
+```
+
+When looking to leverage the `UUIInputFileElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIInputFileElement } from '@umbraco-ui/uui-input-file';
+```
+
+## Usage
+
+```html
+<uui-input-file></uui-input-file>
+```

package/custom-elements.json

@@ -0,0 +1,148 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-input-file",
+      "path": "./lib/uui-input-file.element.ts",
+      "attributes": [
+        {
+          "name": "accept",
+          "description": "Accepted filetypes. Will allow all types if empty.",
+          "type": "string",
+          "default": "\"false\""
+        },
+        {
+          "name": "multiple",
+          "description": "Allows for multiple files to be selected.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "description": "Value of this form control.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "accept",
+          "attribute": "accept",
+          "description": "Accepted filetypes. Will allow all types if empty.",
+          "type": "string",
+          "default": "\"false\""
+        },
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Allows for multiple files to be selected.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "formAssociated",
+          "description": "This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of this form control.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "pristine",
+          "attribute": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "requiredMessage",
+          "attribute": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "errorMessage",
+          "attribute": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        },
+        {
+          "name": "validity",
+          "type": "ValidityState"
+        },
+        {
+          "name": "validationMessage"
+        }
+      ]
+    }
+  ]
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './uui-input-file.element';

package/lib/index.js

@@ -0,0 +1,236 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { query, property, state } from 'lit/decorators.js';
+import { LitElement, html, css } from 'lit';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import { iconDelete } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+import { repeat } from 'lit/directives/repeat.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;
+};
+let UUIInputFileElement = class extends FormControlMixin(LitElement) {
+  constructor() {
+    super();
+    this.accept = "";
+    this.multiple = false;
+    this._files = [];
+    this._updateFileWrappers = (data) => {
+      let newFileWrappers = [];
+      for (const file of data) {
+        if (this.multiple) {
+          newFileWrappers.push(file);
+        } else {
+          newFileWrappers = [file];
+        }
+      }
+      this._files = newFileWrappers;
+    };
+    this.addEventListener("dragenter", () => this._setShowDropzone(true));
+    this.addEventListener("dragleave", () => this._setShowDropzone(false));
+    this.addEventListener("drop", () => this._setShowDropzone(false));
+  }
+  get value() {
+    return this._value;
+  }
+  set value(newValue) {
+    super.value = newValue;
+    if (newValue instanceof FormData) {
+      const data = this.multiple ? newValue.getAll(this.name) : [newValue.get(this.name)];
+      this._updateFileWrappers(data);
+      return;
+    }
+    if (newValue instanceof File) {
+      this._updateFileWrappers([newValue]);
+      return;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    demandCustomElement(this, "uui-icon");
+    demandCustomElement(this, "uui-file-dropzone");
+    demandCustomElement(this, "uui-button");
+    demandCustomElement(this, "uui-action-bar");
+    demandCustomElement(this, "uui-file-preview");
+  }
+  getFormElement() {
+    return this._dropZone;
+  }
+  _handleClick(e) {
+    e.stopImmediatePropagation();
+    this._dropzone.browse();
+  }
+  async _handleFilesChange(event) {
+    const entries = event.detail.files;
+    const files = entries.filter((entry) => entry instanceof File || entry.isFile);
+    if (!this.multiple) {
+      const entry = files[0];
+      const isFile = entry instanceof File;
+      const file = isFile ? entry : await this._getFile(entry);
+      if (this.value instanceof File) {
+        this.value = file;
+        return;
+      }
+      if (this.value instanceof FormData) {
+        this.value.delete(this.name);
+        this.value.append(this.name, file);
+        this._updateFileWrappers([file]);
+        return;
+      }
+    }
+    let newValue = this.value;
+    if (files.length > 0 && !(this.value instanceof FormData)) {
+      newValue = new FormData();
+    }
+    if (newValue instanceof FormData) {
+      for (const entry of files) {
+        const isFile = entry instanceof File;
+        newValue.append(this.name, isFile ? entry : await this._getFile(entry));
+      }
+    }
+    this.value = newValue;
+  }
+  async _getFile(fileEntry) {
+    return await new Promise((resolve, reject) => fileEntry.file(resolve, reject));
+  }
+  _removeFile(index) {
+    const fileToRemove = this._files[index];
+    if (this.value instanceof FormData) {
+      const files = this.value.getAll(this.name);
+      const filteredFiles = files.filter((file) => file !== fileToRemove);
+      if (filteredFiles.length === 0) {
+        this.value = "";
+      } else {
+        this.value.delete(this.name);
+        for (const file of filteredFiles) {
+          this.value.append(this.name, file);
+        }
+      }
+      this._updateFileWrappers(filteredFiles);
+    }
+    if (this.value instanceof File) {
+      this.value = "";
+      this._updateFileWrappers([]);
+    }
+  }
+  _setShowDropzone(show) {
+    if (show) {
+      this._dropZone.style.display = "flex";
+    } else {
+      this._dropZone.style.display = "none";
+    }
+  }
+  _renderFileItem(file, index) {
+    return html`<uui-file-preview .file="${file}">
+      <uui-action-bar slot="actions">
+        <uui-button
+          @click=${() => this._removeFile(index)}
+          look="danger"
+          label=${`Delete ${file.name}`}>
+          <uui-icon name="delete" .fallback=${iconDelete.strings[0]}></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    </uui-file-preview>`;
+  }
+  _renderFiles() {
+    return html`${repeat(this._files, (file) => file.name + file.size, (file, index) => this._renderFileItem(file, index))}`;
+  }
+  render() {
+    return html`
+      <uui-file-dropzone
+        id="dropzone"
+        ?multiple=${this.multiple}
+        .accept=${this.accept}
+        @file-change=${this._handleFilesChange}
+        label="Drop files here"></uui-file-dropzone>
+      <div id="files">
+        ${this._renderFiles()}
+        <uui-button
+          @click=${this._handleClick}
+          id="add-button"
+          look="placeholder"
+          label="Add"></uui-button>
+      </div>
+    `;
+  }
+};
+UUIInputFileElement.styles = [
+  css`
+      :host {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        box-sizing: border-box;
+        border: 1px solid var(--uui-interface-border,#c4c4c4);
+      }
+
+      #input {
+        position: absolute;
+        width: 0px;
+        height: 0px;
+        opacity: 0;
+        display: none;
+      }
+
+      #files {
+        display: grid;
+        box-sizing: border-box;
+        justify-items: center;
+        width: 100%;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        grid-auto-rows: min-content;
+        gap: 16px;
+        padding: 16px;
+        overflow: auto;
+        max-height: 100%;
+      }
+
+      #dropzone {
+        display: none;
+        position: absolute;
+        inset: 0px;
+        z-index: 10;
+        justify-content: center;
+        align-items: center;
+      }
+
+      #add-button {
+        width: 150px;
+        height: 150px;
+        display: flex;
+        padding: 16px;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+      }
+    `
+];
+__decorateClass([
+  query("#dropzone")
+], UUIInputFileElement.prototype, "_dropzone", 2);
+__decorateClass([
+  query("#dropzone")
+], UUIInputFileElement.prototype, "_dropZone", 2);
+__decorateClass([
+  property({ type: String })
+], UUIInputFileElement.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Boolean })
+], UUIInputFileElement.prototype, "multiple", 2);
+__decorateClass([
+  state()
+], UUIInputFileElement.prototype, "_files", 2);
+UUIInputFileElement = __decorateClass([
+  defineElement("uui-input-file")
+], UUIInputFileElement);
+
+export { UUIInputFileElement };

package/lib/uui-input-file.element.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+declare const UUIInputFileElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").FormControlMixinInterface) & typeof LitElement;
+/**
+ * @element uui-input-file
+ * @description - A form associated file input that supports multiple files.
+ * @extends FormControlMixin
+ */
+export declare class UUIInputFileElement extends UUIInputFileElement_base {
+    static styles: import("lit").CSSResult[];
+    private _dropzone;
+    private _dropZone;
+    /**
+     * Accepted filetypes. Will allow all types if empty.
+     * @type {string}
+     * @attr
+     * @default false
+     */
+    accept: string;
+    /**
+     * Allows for multiple files to be selected.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    multiple: boolean;
+    get value(): FormDataEntryValue | FormData;
+    set value(newValue: FormDataEntryValue | FormData);
+    private _files;
+    constructor();
+    connectedCallback(): void;
+    protected getFormElement(): HTMLElement;
+    private _handleClick;
+    private _updateFileWrappers;
+    private _handleFilesChange;
+    private _getFile;
+    private _removeFile;
+    private _setShowDropzone;
+    private _renderFileItem;
+    private _renderFiles;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-input-file': UUIInputFileElement;
+    }
+}
+export {};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@umbraco-ui/uui-input-file",
+  "version": "0.1.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Input File"
+  ],
+  "description": "Umbraco UI input-file component.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-input-file"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-action-bar": "0.2.0",
+    "@umbraco-ui/uui-base": "0.2.0",
+    "@umbraco-ui/uui-button": "0.3.0",
+    "@umbraco-ui/uui-file-dropzone": "0.1.0",
+    "@umbraco-ui/uui-icon": "0.2.0",
+    "@umbraco-ui/uui-icon-registry-essential": "0.2.0"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-input-file",
+  "gitHead": "5494b55e03c9fb3ba8f160e693d3ce59c02d21cd"
+}