@vonage/vivid 4.31.0 → 5.1.0

package/file-picker/definition.cjs

@@ -0,0 +1,510 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const button_definition = require('../unbundled/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const mixins = require('../unbundled/mixins.cjs');
+const fastElement = require('@microsoft/fast-element');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const formAssociated = require('../unbundled/form-associated.cjs');
+const withErrorText = require('../unbundled/with-error-text.cjs');
+const formElement = require('../unbundled/form-element.cjs');
+const localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";
+
+async function filesFromDataTransfer(dataTransfer) {
+  const browserSupportFolderDrop = dataTransfer.items?.[0]?.webkitGetAsEntry != null;
+  return browserSupportFolderDrop ? await filesFromDataTransferItems(dataTransfer.items) : Array.from(dataTransfer.files);
+}
+async function filesFromDataTransferItems(items) {
+  const result = [];
+  for (const item of items) {
+    const file = item.getAsFile();
+    if (file) {
+      result.push(Promise.resolve([file]));
+    } else {
+      const entry = item.webkitGetAsEntry();
+      if (entry) {
+        result.push(filesFromEntry(entry, false));
+      }
+    }
+  }
+  return (await Promise.all(result)).flat();
+}
+const filesFromEntry = (entry, ignoreHiddenFiles) => {
+  const handleFileEntry = (file) => new Promise((resolve, reject) => {
+    file.file((f) => {
+      if (ignoreHiddenFiles && f.name.substring(0, 1) === ".") {
+        resolve([]);
+      } else {
+        resolve([f]);
+      }
+    }, reject);
+  });
+  const promise = entry.isFile ? handleFileEntry(entry) : entry.isDirectory ? filesFromDirectory(entry) : Promise.resolve([]);
+  promise.catch(() => null);
+  return promise;
+};
+const filesFromDirectory = async (directory) => new Promise((resolve, reject) => {
+  const result = [];
+  const dirReader = directory.createReader();
+  const readEntries = () => {
+    dirReader.readEntries((entries) => {
+      for (const entry of entries) {
+        result.push(filesFromEntry(entry, true));
+      }
+      if (entries.length) {
+        readEntries();
+      } else {
+        resolve(Promise.all(result).then((r) => r.flat()));
+      }
+    }, reject);
+  };
+  readEntries();
+});
+
+function isAcceptedFileType(file, accept) {
+  if (!accept) {
+    return true;
+  }
+  const validTypes = accept.split(",");
+  const isBasePattern = (type) => /\/\*$/.test(type);
+  const baseType = (type) => type.replace(/\/.*$/, "");
+  for (let validType of validTypes) {
+    validType = validType.trim();
+    if (validType.charAt(0) === ".") {
+      if (file.name.toLowerCase().endsWith(validType.toLowerCase())) {
+        return true;
+      }
+    } else if (isBasePattern(validType)) {
+      if (baseType(file.type) === baseType(validType)) {
+        return true;
+      }
+    } else {
+      if (file.type === validType) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+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;
+};
+class FilePicker extends mixins.WithFeedback(
+  withErrorText.WithErrorText(
+    formElement.FormElement(delegatesAria.DelegatesAria(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+  )
+) {
+  constructor() {
+    super(...arguments);
+    this.singleFile = false;
+    this.maxFileSize = 256;
+    /**
+     * @internal
+     */
+    this.valueChanged = (previous, next) => {
+      super.valueChanged(previous, next);
+      if (next === "" && this.files.length) {
+        this.removeAllFiles();
+      }
+    };
+    /**
+     * @internal
+     */
+    this.proxy = document.createElement("input");
+    /**
+     * @internal
+     */
+    this.setFormValue = (value, state) => {
+      if (typeof value === "string") {
+        return;
+      }
+      super.setFormValue(value, state);
+    };
+    this._customValidationError = null;
+    // Use an observer to keep the validation error up to date
+    this.#customValidationChangeHandler = {
+      handleChange: () => {
+        this._customValidationError = this.#customValidationChangeObserver.observe(
+          this,
+          fastElement.defaultExecutionContext
+        );
+      }
+    };
+    this._dragHover = false;
+    this._allFiles = [];
+  }
+  /**
+   * @internal
+   */
+  nameChanged(previous, next) {
+    super.nameChanged(previous, next);
+    this.#updateFormValue();
+  }
+  #updateFormValue() {
+    const files = this.files;
+    if (!this.name) {
+      this.setFormValue(null);
+    } else {
+      const formData = new FormData();
+      for (const file of files) {
+        formData.append(this.name, file);
+      }
+      this.setFormValue(formData);
+    }
+    this.#setValueToAFakePathLikeNativeInput();
+  }
+  #setValueToAFakePathLikeNativeInput() {
+    this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
+  }
+  /** @internal */
+  validate() {
+    super.validate(this.control);
+  }
+  /**
+   * @internal
+   */
+  formResetCallback() {
+    this.removeAllFiles();
+    super.formResetCallback();
+  }
+  #getCustomValidationError() {
+    if (this.rejectedFiles.length > 0) {
+      return this.locale.filePicker.invalidFilesError;
+    }
+    return null;
+  }
+  /**
+   * @internal
+   */
+  _customValidationErrorChanged() {
+    if (this.proxy) {
+      this.proxy.setCustomValidity(this._customValidationError ?? "");
+    }
+    this.validate();
+  }
+  #customValidationChangeHandler;
+  #customValidationChangeObserver;
+  #startObservingCustomValidation() {
+    this.#customValidationChangeObserver = fastElement.Observable.binding(
+      () => this.#getCustomValidationError(),
+      this.#customValidationChangeHandler,
+      true
+    );
+    this.#customValidationChangeHandler.handleChange();
+  }
+  #stopObservingCustomValidation() {
+    this.#customValidationChangeObserver.disconnect();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#startObservingCustomValidation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#stopObservingCustomValidation();
+  }
+  /**
+   * @internal
+   */
+  _onDragEnter() {
+    this._dragHover = true;
+    return true;
+  }
+  /**
+   * @internal
+   */
+  _onDragOver(e) {
+    if (!e.dataTransfer) {
+      return true;
+    }
+    const effect = e.dataTransfer.effectAllowed;
+    e.dataTransfer.dropEffect = "move" === effect || "linkMove" === effect ? "move" : "copy";
+    return false;
+  }
+  /**
+   * @internal
+   */
+  _onDragLeave(e) {
+    if (e.currentTarget === e.target) {
+      this._dragHover = false;
+    }
+    return true;
+  }
+  /**
+   * @internal
+   */
+  _onDrop(e) {
+    this._dragHover = false;
+    if (!e.dataTransfer) {
+      return true;
+    }
+    filesFromDataTransfer(e.dataTransfer).then((files) => this.#addFiles(files)).catch((err) => {
+      console.error(err);
+    });
+    return false;
+  }
+  /**
+   * @internal
+   */
+  _onDragEnd() {
+    this._dragHover = false;
+    return true;
+  }
+  /**
+   * @internal
+   */
+  _onControlClick() {
+    this._hiddenInput.click();
+  }
+  /**
+   * @internal
+   */
+  _onRemoveFileClick(file) {
+    this._allFiles = this._allFiles.filter((f) => f !== file);
+    this.$emit("change");
+  }
+  /**
+   * @internal
+   */
+  _allFilesChanged() {
+    this.#updateFormValue();
+  }
+  #addFiles(files) {
+    if (this.singleFile) {
+      if (files.length > 0) {
+        this._allFiles = [files[files.length - 1]];
+      }
+    } else {
+      this._allFiles = [...this._allFiles, ...files];
+    }
+    this.$emit("change");
+  }
+  /**
+   * Removes all files from the File Picker.
+   */
+  removeAllFiles() {
+    this._allFiles = [];
+  }
+  get _validatedFiles() {
+    const validationError = (file, validFileIndex2) => {
+      if (this.maxFileSize && file.size > this.maxFileSize * 1024 * 1024) {
+        return (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace(
+          "{{filesize}}",
+          this._formatNumber(Math.round(file.size / 1024 / 10.24) / 100)
+        ).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize));
+      } else if (!isAcceptedFileType(file, this.accept)) {
+        return this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError;
+      } else if (typeof this.maxFiles === "number" && validFileIndex2 >= this.maxFiles) {
+        return (this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}", String(this.maxFiles));
+      } else {
+        return null;
+      }
+    };
+    const result = [];
+    let validFileIndex = 0;
+    for (const file of this._allFiles) {
+      const validatedFile = {
+        file,
+        validationError: validationError(file, validFileIndex)
+      };
+      result.push(validatedFile);
+      if (!validatedFile.validationError) {
+        validFileIndex++;
+      }
+    }
+    return result;
+  }
+  /**
+   * Files that have been added to the file picker and passed validation.
+   *
+   * @public
+   */
+  get files() {
+    return this._validatedFiles.filter((f) => !f.validationError).map((f) => f.file);
+  }
+  /**
+   * Files that have been rejected by the file picker for failing validation.
+   *
+   * @public
+   */
+  get rejectedFiles() {
+    return this._validatedFiles.filter((f) => !!f.validationError).map((f) => f.file);
+  }
+  /**
+   * @internal
+   */
+  _onHiddenInputChange(e) {
+    this.#addFiles(this._hiddenInput.files);
+    this._hiddenInput.value = "";
+    e.stopPropagation();
+  }
+  /**
+   * @internal
+   */
+  _formatNumber(value) {
+    const str = String(value);
+    if (this.locale.common.useCommaAsDecimalSeparator) {
+      return str.replace(".", ",");
+    }
+    return str;
+  }
+}
+__decorateClass([
+  fastElement.attr({ attribute: "single-file", mode: "boolean" })
+], FilePicker.prototype, "singleFile", 2);
+__decorateClass([
+  fastElement.attr({ attribute: "max-files" })
+], FilePicker.prototype, "maxFiles", 2);
+__decorateClass([
+  fastElement.attr({ mode: "fromView", attribute: "max-file-size" })
+], FilePicker.prototype, "maxFileSize", 2);
+__decorateClass([
+  fastElement.attr
+], FilePicker.prototype, "accept", 2);
+__decorateClass([
+  fastElement.attr
+], FilePicker.prototype, "size", 2);
+__decorateClass([
+  fastElement.attr({ attribute: "invalid-file-type-error" })
+], FilePicker.prototype, "invalidFileTypeError", 2);
+__decorateClass([
+  fastElement.attr({ attribute: "max-files-exceeded-error" })
+], FilePicker.prototype, "maxFilesExceededError", 2);
+__decorateClass([
+  fastElement.attr({ attribute: "file-too-big-error" })
+], FilePicker.prototype, "fileTooBigError", 2);
+__decorateClass([
+  fastElement.observable
+], FilePicker.prototype, "_customValidationError", 2);
+__decorateClass([
+  fastElement.observable
+], FilePicker.prototype, "_dragHover", 2);
+__decorateClass([
+  fastElement.observable
+], FilePicker.prototype, "_allFiles", 2);
+__decorateClass([
+  fastElement.volatile
+], FilePicker.prototype, "_validatedFiles", 1);
+
+const filesizeBase = 1e3;
+const dictFileSizeUnits = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" };
+const renderFileSize = (x, size) => {
+  let selectedSize = 0;
+  let selectedUnit = "b";
+  if (size > 0) {
+    const units = ["tb", "gb", "mb", "kb", "b"];
+    for (let i = 0; i < units.length; i++) {
+      const unit = units[i];
+      const cutoff = Math.pow(filesizeBase, 4 - i) / 10;
+      if (size >= cutoff) {
+        selectedSize = size / Math.pow(filesizeBase, 4 - i);
+        selectedUnit = unit;
+        break;
+      }
+    }
+    selectedSize = Math.round(10 * selectedSize) / 10;
+  }
+  return fastElement.html`<strong>${x._formatNumber(selectedSize)}</strong>
+		${dictFileSizeUnits[selectedUnit]}`;
+};
+const getClasses = ({ size, _dragHover }) => fastWebUtilities.classNames(
+  "control",
+  [`size-${size}`, Boolean(size)],
+  ["drag-hover", _dragHover]
+);
+const FilePickerTemplate = (context) => {
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  const buttonTag = context.tagFor(button_definition.Button);
+  return fastElement.html`
+		<div class="base">
+			${fastElement.when((x) => x.label, fastElement.html`<label>${(x) => x.label}</label>`)}
+			<div class="control-wrapper">
+				<button
+					type="button"
+					${fastElement.ref("control")}
+					class="${getClasses}"
+					@click="${(x) => x._onControlClick()}"
+					@keydown"${() => false}"
+					@dragenter="${(x) => x._onDragEnter()}"
+					@dragover="${(x, c) => x._onDragOver(c.event)}"
+					@dragleave="${(x, c) => x._onDragLeave(c.event)}"
+					@drop="${(x, c) => x._onDrop(c.event)}"
+					@dragend="${(x) => x._onDragEnd()}"
+					aria-describedby="${(x) => x._feedbackDescribedBy}"
+					${delegatesAria.delegateAria()}
+				>
+					<vwc-icon
+						class="upload-icon"
+						name="cloud-upload-line"
+						size="-4"
+						label="${(x) => x.locale.filePicker.uploadFilesLabel}"
+					></vwc-icon>
+					<span class="upload-text"><slot></slot></span>
+				</button>
+				${(x) => x._getFeedbackTemplate(context)}
+			</div>
+			<div class="preview-list">
+				${fastElement.repeat(
+    (x) => x._validatedFiles,
+    fastElement.html`
+				<div class="${(x) => fastWebUtilities.classNames("preview", ["has-error", !!x.validationError])}">
+					<div class="details">
+						<div class="filename">${(x) => x.file.name}</div>
+						<div class="size">${(x, c) => renderFileSize(c.parent, x.file.size)}</div>
+					</div>
+					<div class="error-message">
+						<${iconTag} name="info-line" size="-6"></${iconTag}>
+						${(x) => x.validationError}
+					</div>
+					<${buttonTag}
+						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
+						aria-label="${(_, c) => c.parent.locale.filePicker.removeFileLabel}"
+						@click="${(x, c) => c.parent._onRemoveFileClick(x.file)}"></${buttonTag}>
+				</div>`
+  )}
+			</div>
+		</div>
+		<input
+			${fastElement.ref("_hiddenInput")}
+			class="hidden-input"
+			aria-hidden="true"
+			type="file"
+			?multiple="${(x) => !x.singleFile && (!x.maxFiles || x.maxFiles > 1)}"
+			accept="${(x) => x.accept || null}"
+			tabindex="-1"
+			@change="${(x, c) => x._onHiddenInputChange(c.event)}"
+		/>
+	`;
+};
+
+const filePickerDefinition = vividElement.defineVividComponent(
+  "file-picker",
+  FilePicker,
+  FilePickerTemplate,
+  [icon_definition.iconDefinition, button_definition.buttonDefinition, mixins.feedbackMessageDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerFilePicker = vividElement.createRegisterFunction(filePickerDefinition);
+
+exports.VwcFilePickerElement = FilePicker;
+exports.filePickerDefinition = filePickerDefinition;
+exports.registerFilePicker = registerFilePicker;