@watermarkinsights/ripple 3.27.0 → 3.27.1

package/dist/esm/wm-file.entry.js

@@ -1,188 +1,188 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-e887b1ce.js';
-import { d as debounce, i as intl, j as truncateText, s as showTooltip, h as hideTooltip } from './functions-f32b1ca4.js';
+import { d as debounce, i as intl, j as truncateText, s as showTooltip, h as hideTooltip } from './functions-cbb19d50.js';
 
 const wmFileCss = ":host,wm-file{display:block;width:100%}.file-wrapper{font-size:0.875rem;position:relative;list-style:none}.file-wrapper .file{min-width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;height:3.5rem;padding:0 1.25rem;position:relative;background:#f4f4f4;border:1px solid #6b6b6b;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.file-wrapper .file .filename{display:inline-block;white-space:nowrap}.file-wrapper .file .left-group{overflow:hidden}.file-wrapper .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:5rem;gap:1rem}.file-wrapper .file .right-group.condensed{padding-left:2.5rem}.file-wrapper .file .right-group .file-controls{display:-ms-flexbox;display:flex;gap:1rem}.file-wrapper .file .right-group .file-info{white-space:nowrap}.file-wrapper .file.--error{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}.file-wrapper.checked .file:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f133\";position:absolute;right:-44px;color:#088000;font-size:28px;line-height:1}.name-wrapper{overflow:hidden}.progress{position:absolute;left:0;top:0;right:0;height:8px}.error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
-const File = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmIntFilePreviewed = createEvent(this, "wmIntFilePreviewed", 7);
-    this.wmIntFileDownloaded = createEvent(this, "wmIntFileDownloaded", 7);
-    this.wmIntFileDeleted = createEvent(this, "wmIntFileDeleted", 7);
-    this.wmFileClearErrorClicked = createEvent(this, "wmFileClearErrorClicked", 7);
-    // the file component is used within wm-uploader, which still includes legacy types 1 and 2
-    // some new features are not included in these legacy types, and must use the below in conditions
-    this.isWithinLegacyUploader = false;
-    this.debouncedResize = debounce(() => {
-      this.isCondensed = this.el.clientWidth < 500;
-      // rerender to show filename truncation changes
-      forceUpdate(this.el);
-    }, 50);
-    this.file = undefined;
-    this.showInfo = "time";
-    this.errorMessage = undefined;
-    this.isCondensed = false;
-  }
-  get fileData() {
-    let data = this.file ? JSON.parse(this.file) : null;
-    // sometimes JSON numbers can be received as strings, make sure progress is always a number
-    if (data && data.progress && typeof data.progress === "string" && data.progress.match(/^[0-9]+$/)) {
-      data.progress = parseInt(data.progress.toString());
-    }
-    return data;
-  }
-  get isUploading() {
-    return this.fileData && this.fileData.hasOwnProperty("progress") && this.fileData.progress < 100;
-  }
-  get previewButtonTooltip() {
-    return intl.formatMessage({
-      id: "file.previewButtonTooltip",
-      defaultMessage: "Preview",
-      description: "Tooltip of a button that triggers a file to be previewed",
-    });
-  }
-  get downloadButtonTooltip() {
-    return intl.formatMessage({
-      id: "file.downloadButtonTooltip",
-      defaultMessage: "Download",
-      description: "Tooltip of a button that triggers a file to be downloaded",
-    });
-  }
-  get deleteButtonTooltip() {
-    return intl.formatMessage({
-      id: "file.deleteButtonTooltip",
-      defaultMessage: "Delete",
-      description: "Tooltip of a button that triggers a file to be deleted",
-    });
-  }
-  get previewActionMessage() {
-    return intl.formatMessage({
-      id: "file.previewAction",
-      defaultMessage: "Preview File",
-      description: "Label of a button that triggers a file to be previewed",
-    });
-  }
-  get downloadActionMessage() {
-    return intl.formatMessage({
-      id: "file.downloadAction",
-      defaultMessage: "Download File",
-      description: "Label of a button that triggers a file to be downloaded",
-    });
-  }
-  get deleteActionMessage() {
-    return intl.formatMessage({
-      id: "file.deleteAction",
-      defaultMessage: "Delete File",
-      description: "Label of a button that triggers a file to be delete",
-    });
-  }
-  get actionMenuLabel() {
-    return intl.formatMessage({
-      id: "file.actionMenuLabel",
-      defaultMessage: "Actions",
-      description: "Label of a button that opens a menu of file actions",
-    });
-  }
-  get clearButtonText() {
-    return intl.formatMessage({
-      id: "file.clearErrorText",
-      defaultMessage: "Clear",
-      description: "Text for a button used to clear an error",
-    });
-  }
-  generateClearButtonLabel(filename) {
-    return intl.formatMessage({
-      id: "file.clearErrorLabel",
-      defaultMessage: "Clear {fileName} error",
-      description: "Label for a button used to clear an error, including filename",
-    }, { fileName: filename });
-  }
-  componentWillLoad() {
-    const shadowRootHost = this.el.getRootNode().host;
-    if (shadowRootHost && shadowRootHost.nodeName === "WM-UPLOADER") {
-      if (shadowRootHost.type || shadowRootHost.uploaderType) {
-        this.isWithinLegacyUploader = true;
-      }
-    }
-    // rerender on resize in case layout needs to change
-    const resizeObserver = new ResizeObserver(() => this.debouncedResize());
-    resizeObserver.observe(this.el);
-  }
-  componentDidRender() {
-    const fileNameEl = this.el.shadowRoot.querySelector(".filename");
-    const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
-    const rightGroup = this.el.shadowRoot.querySelector(".right-group");
-    const rightBoundary = rightGroup
-      ? rightGroup.getBoundingClientRect().left
-      : this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
-    fileNameEl.textContent = truncateText(fileNameEl, fileNameEl.dataset.filename, rightBoundary - leftBoundary, 7);
-  }
-  previewFile(file) {
-    this.wmIntFilePreviewed.emit(file.id);
-  }
-  downloadFile(file) {
-    this.wmIntFileDownloaded.emit(file.id);
-  }
-  deleteFile(file) {
-    this.wmIntFileDeleted.emit(file.id);
-  }
-  handleFilenameMouseEnter(ev, filename) {
-    // only show tooltip if file name is being truncated (has ellipses)
-    if (ev.target.textContent.includes("...")) {
-      showTooltip("bottom", ev.target, filename);
-    }
-  }
-  renderFileName(filename, isUploading) {
-    return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, filename), h("span", { "aria-hidden": "true", class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => hideTooltip() }), isUploading && h("span", { class: "sr-only" }, "uploading"))));
-  }
-  renderFileInfo(item, showInfo) {
-    let displayedInfo = "";
-    if (showInfo === "time" && item.lastUpdated) {
-      displayedInfo = item.lastUpdated;
-    }
-    else if (showInfo === "size" && item.size) {
-      displayedInfo = item.size;
-    }
-    return h("div", { class: "file-info" }, displayedInfo);
-  }
-  renderActionMenu(item) {
-    const defaultFileActions = "download delete";
-    const availableActions = item.fileActions || defaultFileActions;
-    const previewItem = (h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile(item) }, this.previewActionMessage));
-    const downloadItem = (h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile(item) }, this.downloadActionMessage));
-    const deleteItem = (h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile(item) }, this.deleteActionMessage));
-    return (h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${item.name} ${this.actionMenuLabel}` }, availableActions.includes("preview") && previewItem, availableActions.includes("download") && downloadItem, availableActions.includes("delete") && deleteItem));
-  }
-  renderFileActionButtons(item) {
-    const defaultFileActions = "download delete";
-    const availableActions = item.fileActions || defaultFileActions;
-    const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${item.name}`, icon: "f208", onClick: () => this.previewFile(item) }));
-    const downloadButton = (h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${item.name}`, icon: "f1da", onClick: () => this.downloadFile(item) }));
-    const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) }));
-    return (h("div", { class: "file-controls" }, availableActions.includes("preview") && previewButton, availableActions.includes("download") && downloadButton, availableActions.includes("delete") && deleteButton));
-  }
-  renderFileInProgress(item) {
-    const filename = item.type ? `${item.name}.${item.type}` : item.name;
-    return (h("div", { class: "file-wrapper" }, h("div", { class: "file --progress" }, h("div", { class: "progress", style: {
-        background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
-      } }), this.renderFileName(filename, this.isUploading))));
-  }
-  renderFileControls(item) {
-    const hasSingleFileAction = item.fileActions && item.fileActions.split(" ").length === 1;
-    const showActionMenu = this.isCondensed && !hasSingleFileAction;
-    return showActionMenu ? this.renderActionMenu(item) : this.renderFileActionButtons(item);
-  }
-  renderFile(item) {
-    const filename = item.type ? `${item.name}.${item.type}` : item.name;
-    const showCheckmark = !this.isWithinLegacyUploader && item.progress === 100;
-    return (h("div", { class: `file-wrapper ${showCheckmark ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(filename, this.isUploading), !this.errorMessage && (h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.showInfo !== "none" && this.renderFileInfo(item, this.showInfo), item.fileActions !== "" && this.renderFileControls(item))), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(item.name), onClick: () => this.wmFileClearErrorClicked.emit({ name: item.name }) }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress(this.fileData) : this.renderFile(this.fileData)));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-};
+const File = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmIntFilePreviewed = createEvent(this, "wmIntFilePreviewed", 7);
+    this.wmIntFileDownloaded = createEvent(this, "wmIntFileDownloaded", 7);
+    this.wmIntFileDeleted = createEvent(this, "wmIntFileDeleted", 7);
+    this.wmFileClearErrorClicked = createEvent(this, "wmFileClearErrorClicked", 7);
+    // the file component is used within wm-uploader, which still includes legacy types 1 and 2
+    // some new features are not included in these legacy types, and must use the below in conditions
+    this.isWithinLegacyUploader = false;
+    this.debouncedResize = debounce(() => {
+      this.isCondensed = this.el.clientWidth < 500;
+      // rerender to show filename truncation changes
+      forceUpdate(this.el);
+    }, 50);
+    this.file = undefined;
+    this.showInfo = "time";
+    this.errorMessage = undefined;
+    this.isCondensed = false;
+  }
+  get fileData() {
+    let data = this.file ? JSON.parse(this.file) : null;
+    // sometimes JSON numbers can be received as strings, make sure progress is always a number
+    if (data && data.progress && typeof data.progress === "string" && data.progress.match(/^[0-9]+$/)) {
+      data.progress = parseInt(data.progress.toString());
+    }
+    return data;
+  }
+  get isUploading() {
+    return this.fileData && this.fileData.hasOwnProperty("progress") && this.fileData.progress < 100;
+  }
+  get previewButtonTooltip() {
+    return intl.formatMessage({
+      id: "file.previewButtonTooltip",
+      defaultMessage: "Preview",
+      description: "Tooltip of a button that triggers a file to be previewed",
+    });
+  }
+  get downloadButtonTooltip() {
+    return intl.formatMessage({
+      id: "file.downloadButtonTooltip",
+      defaultMessage: "Download",
+      description: "Tooltip of a button that triggers a file to be downloaded",
+    });
+  }
+  get deleteButtonTooltip() {
+    return intl.formatMessage({
+      id: "file.deleteButtonTooltip",
+      defaultMessage: "Delete",
+      description: "Tooltip of a button that triggers a file to be deleted",
+    });
+  }
+  get previewActionMessage() {
+    return intl.formatMessage({
+      id: "file.previewAction",
+      defaultMessage: "Preview File",
+      description: "Label of a button that triggers a file to be previewed",
+    });
+  }
+  get downloadActionMessage() {
+    return intl.formatMessage({
+      id: "file.downloadAction",
+      defaultMessage: "Download File",
+      description: "Label of a button that triggers a file to be downloaded",
+    });
+  }
+  get deleteActionMessage() {
+    return intl.formatMessage({
+      id: "file.deleteAction",
+      defaultMessage: "Delete File",
+      description: "Label of a button that triggers a file to be delete",
+    });
+  }
+  get actionMenuLabel() {
+    return intl.formatMessage({
+      id: "file.actionMenuLabel",
+      defaultMessage: "Actions",
+      description: "Label of a button that opens a menu of file actions",
+    });
+  }
+  get clearButtonText() {
+    return intl.formatMessage({
+      id: "file.clearErrorText",
+      defaultMessage: "Clear",
+      description: "Text for a button used to clear an error",
+    });
+  }
+  generateClearButtonLabel(filename) {
+    return intl.formatMessage({
+      id: "file.clearErrorLabel",
+      defaultMessage: "Clear {fileName} error",
+      description: "Label for a button used to clear an error, including filename",
+    }, { fileName: filename });
+  }
+  componentWillLoad() {
+    const shadowRootHost = this.el.getRootNode().host;
+    if (shadowRootHost && shadowRootHost.nodeName === "WM-UPLOADER") {
+      if (shadowRootHost.type || shadowRootHost.uploaderType) {
+        this.isWithinLegacyUploader = true;
+      }
+    }
+    // rerender on resize in case layout needs to change
+    const resizeObserver = new ResizeObserver(() => this.debouncedResize());
+    resizeObserver.observe(this.el);
+  }
+  componentDidRender() {
+    const fileNameEl = this.el.shadowRoot.querySelector(".filename");
+    const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
+    const rightGroup = this.el.shadowRoot.querySelector(".right-group");
+    const rightBoundary = rightGroup
+      ? rightGroup.getBoundingClientRect().left
+      : this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
+    fileNameEl.textContent = truncateText(fileNameEl, fileNameEl.dataset.filename, rightBoundary - leftBoundary, 7);
+  }
+  previewFile(file) {
+    this.wmIntFilePreviewed.emit(file.id);
+  }
+  downloadFile(file) {
+    this.wmIntFileDownloaded.emit(file.id);
+  }
+  deleteFile(file) {
+    this.wmIntFileDeleted.emit(file.id);
+  }
+  handleFilenameMouseEnter(ev, filename) {
+    // only show tooltip if file name is being truncated (has ellipses)
+    if (ev.target.textContent.includes("...")) {
+      showTooltip("bottom", ev.target, filename);
+    }
+  }
+  renderFileName(filename, isUploading) {
+    return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, filename), h("span", { "aria-hidden": "true", class: "filename", "data-filename": filename, onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev, filename), onMouseLeave: () => hideTooltip() }), isUploading && h("span", { class: "sr-only" }, "uploading"))));
+  }
+  renderFileInfo(item, showInfo) {
+    let displayedInfo = "";
+    if (showInfo === "time" && item.lastUpdated) {
+      displayedInfo = item.lastUpdated;
+    }
+    else if (showInfo === "size" && item.size) {
+      displayedInfo = item.size;
+    }
+    return h("div", { class: "file-info" }, displayedInfo);
+  }
+  renderActionMenu(item) {
+    const defaultFileActions = "download delete";
+    const availableActions = item.fileActions || defaultFileActions;
+    const previewItem = (h("wm-menuitem", { icon: "f208", onClick: () => this.previewFile(item) }, this.previewActionMessage));
+    const downloadItem = (h("wm-menuitem", { icon: "f1da", onClick: () => this.downloadFile(item) }, this.downloadActionMessage));
+    const deleteItem = (h("wm-menuitem", { icon: "f1c0", onClick: () => this.deleteFile(item) }, this.deleteActionMessage));
+    return (h("wm-action-menu", { "action-menu-type": "icon", tooltip: this.actionMenuLabel, "tooltip-position": "bottom", "label-for-identical-buttons": `${item.name} ${this.actionMenuLabel}` }, availableActions.includes("preview") && previewItem, availableActions.includes("download") && downloadItem, availableActions.includes("delete") && deleteItem));
+  }
+  renderFileActionButtons(item) {
+    const defaultFileActions = "download delete";
+    const availableActions = item.fileActions || defaultFileActions;
+    const previewButton = (h("wm-button", { class: "preview-button", "button-type": "icononly", tooltip: this.previewButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `preview ${item.name}`, icon: "f208", onClick: () => this.previewFile(item) }));
+    const downloadButton = (h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: this.downloadButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `download ${item.name}`, icon: "f1da", onClick: () => this.downloadFile(item) }));
+    const deleteButton = (h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: this.deleteButtonTooltip, "tooltip-position": "bottom", "label-for-identical-buttons": `delete ${item.name}`, icon: "f1c0", onClick: () => this.deleteFile(item) }));
+    return (h("div", { class: "file-controls" }, availableActions.includes("preview") && previewButton, availableActions.includes("download") && downloadButton, availableActions.includes("delete") && deleteButton));
+  }
+  renderFileInProgress(item) {
+    const filename = item.type ? `${item.name}.${item.type}` : item.name;
+    return (h("div", { class: "file-wrapper" }, h("div", { class: "file --progress" }, h("div", { class: "progress", style: {
+        background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,
+      } }), this.renderFileName(filename, this.isUploading))));
+  }
+  renderFileControls(item) {
+    const hasSingleFileAction = item.fileActions && item.fileActions.split(" ").length === 1;
+    const showActionMenu = this.isCondensed && !hasSingleFileAction;
+    return showActionMenu ? this.renderActionMenu(item) : this.renderFileActionButtons(item);
+  }
+  renderFile(item) {
+    const filename = item.type ? `${item.name}.${item.type}` : item.name;
+    const showCheckmark = !this.isWithinLegacyUploader && item.progress === 100;
+    return (h("div", { class: `file-wrapper ${showCheckmark ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(filename, this.isUploading), !this.errorMessage && (h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.showInfo !== "none" && this.renderFileInfo(item, this.showInfo), item.fileActions !== "" && this.renderFileControls(item))), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(item.name), onClick: () => this.wmFileClearErrorClicked.emit({ name: item.name }) }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress(this.fileData) : this.renderFile(this.fileData)));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+};
 File.style = wmFileCss;
 
 export { File as wm_file };