@vonage/vivid 5.15.1 → 5.16.0

package/file-picker/definition.cjs

@@ -1,523 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const icon_definition = require('../icon/definition.cjs');
-const button_definition = require('../unbundled/definition2.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 withContextualHelp = require('../unbundled/with-contextual-help.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 = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}: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(--focus-stroke-color, 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 withContextualHelp.WithContextualHelp(
-  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.ExecutionContext.default
-        );
-      }
-    };
-    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.dispose();
-  }
-  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) {
-    const newFiles = Array.from(files).filter(
-      (file) => !this._allFiles.some(
-        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
-      )
-    );
-    if (this.singleFile && newFiles.length > 0) {
-      this._allFiles = [newFiles[newFiles.length - 1]];
-    } else {
-      this._allFiles = [...this._allFiles, ...newFiles];
-    }
-    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">
-			<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp}>
-				${fastElement.when(
-    (x) => x.label,
-    fastElement.html`<label class="label">${(x) => x.label}</label>`
-  )}
-				<slot name="contextual-help" ${fastElement.slotted("_contextualHelpSlottedContent")}></slot>
-			</div>
-			<div class="control-wrapper">
-				<button
-					type="button"
-					${fastElement.ref("control")}
-					class="${getClasses}"
-					@click="${(x) => x._onControlClick()}"
-					@keydown"${/* v8 ignore next -- @preserve -- Prevent implicit form submission on Enter */
-  () => 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()}
-				>
-					<${iconTag}
-						class="upload-icon"
-						name="cloud-upload-line"
-						size="-4"
-						label="${(x) => x.locale.filePicker.uploadFilesLabel}"
-					></${iconTag}>
-					<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;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition42.cjs");
+exports.VwcFilePickerElement = require_definition$1.FilePicker;
+exports.filePickerDefinition = require_definition$1.filePickerDefinition;
+exports.registerFilePicker = require_definition$1.registerFilePicker;