@watermarkinsights/ripple 5.19.0-alpha.1 → 5.19.0-alpha.3

package/dist/collection/components/wm-file/wm-file.js

@@ -17,8 +17,21 @@ export class File {
         this.showInfo = "last-updated";
     }
     get isCondensed() {
+        // Breakpoint at which file actions are moved into an action menu
         return this.el.clientWidth < 500;
     }
+    get isExtraCondensed() {
+        // Breakpoint at which file info is moved into a details element
+        return this.el.clientWidth < 414;
+    }
+    get needsTruncation() {
+        const boundsEl = this.el.shadowRoot.querySelector(".left-group");
+        const measureEl = this.el.shadowRoot.querySelector(".filename-measure");
+        if (boundsEl && measureEl && boundsEl.clientWidth < measureEl.clientWidth) {
+            return true;
+        }
+        return false;
+    }
     get isUploading() {
         return this.progress !== undefined && this.progress < 100;
     }
@@ -107,22 +120,20 @@ export class File {
         const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
         resizeObserver.observe(this.el);
     }
-    setFilename() {
-        // calc is not accurate and last letter may be cropped if we don't wait
-        requestAnimationFrame(() => {
-            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 file = this.el.shadowRoot.querySelector(".file");
-            const colGap = file ? getComputedStyle(file).getPropertyValue("column-gap") : "0";
-            const rightBoundary = rightGroup
-                ? rightGroup.getBoundingClientRect().left - parseFloat(colGap)
-                : this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
-            fileNameEl.textContent = truncateText(fileNameEl, this.fullFilename, rightBoundary - leftBoundary, 7);
-        });
+    truncateFilename() {
+        let summaryFilenameEl = this.el.shadowRoot.querySelector("#summary-filename-trunc");
+        if (summaryFilenameEl) {
+            summaryFilenameEl.textContent = truncateText(summaryFilenameEl, this.fullFilename, summaryFilenameEl.parentElement.clientWidth - 32, 7);
+            if (summaryFilenameEl.textContent === this.fullFilename) {
+                summaryFilenameEl.classList.remove("-truncated");
+            }
+            else {
+                summaryFilenameEl.classList.add("-truncated");
+            }
+        }
     }
     componentDidRender() {
-        this.setFilename();
+        this.truncateFilename();
     }
     previewFile() {
         this.wmFilePreview.emit();
@@ -140,10 +151,11 @@ export class File {
         }
     }
     renderFileName() {
-        return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, this.fullFilename), h("span", { "aria-hidden": "true", class: "filename", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => hideTooltip() }), this.isUploading && h("span", { class: "sr-only" }, "uploading"))));
+        const showDetailsToggle = this.isExtraCondensed && (this.needsTruncation || (this.showInfo !== "none" && !this.errorMessage));
+        return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, this.fullFilename), h("span", { "aria-hidden": "true", class: "filename" }, this.fullFilename), this.isUploading && h("span", { class: "sr-only" }, "uploading")), showDetailsToggle && this.renderDetailsToggle()));
     }
     renderFileInfo() {
-        return (h("div", { class: "file-info" }, (this.showInfo === "uploaded-by" || this.showInfo === "all") && (h("div", { class: "details uploader-name" }, this.uploadedBy)), (this.showInfo === "last-updated" || this.showInfo === "all") && h("div", { class: "details" }, this.lastUpdated), (this.showInfo === "size" || this.showInfo === "all") && h("div", { class: "details" }, this.size)));
+        return (h("div", { class: "file-info" }, (this.showInfo === "uploaded-by" || this.showInfo === "all") && (h("div", { class: "uploader-name" }, this.uploadedBy)), (this.showInfo === "last-updated" || this.showInfo === "all") && h("div", null, this.lastUpdated), (this.showInfo === "size" || this.showInfo === "all") && h("div", null, this.size)));
     }
     renderActionMenu() {
         const previewItem = (h("wm-menuitem", { icon: "#show", onClick: () => this.previewFile() }, this.previewActionMessage));
@@ -167,11 +179,15 @@ export class File {
         const showActionMenu = this.isCondensed && !hasSingleFileAction;
         return showActionMenu ? this.renderActionMenu() : this.renderFileActionButtons();
     }
+    renderDetailsToggle() {
+        return (h("details", { id: "file-details" }, h("summary", null, h("div", { class: "filename-measure", "aria-hidden": "true" }, this.fullFilename), h("span", { id: "summary-filename-trunc", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.fullFilename), h("span", { id: "summary-filename-wrap" }, this.fullFilename)), !this.errorMessage && this.renderFileInfo()));
+    }
     renderFile() {
-        return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("div", { class: "right-group" }, h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
+        const showRightGroup = !this.errorMessage && (this.fileActions !== "" || this.showInfo !== "none");
+        return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""} ${this.isExtraCondensed ? "extra-condensed" : ""}` }, this.renderFileName(), showRightGroup && (h("div", { class: "right-group" }, !this.isExtraCondensed && this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("div", { class: "right-group" }, h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: '88c61b45d6f48a00abeaaddb9a03e870f597df0c', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '06c3ffd69504051197990d33f05c672d5828847f', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-menuitem/wm-menuitem.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host {
   --wmcolor-actionmenu-item-background-hover: var(--wmcolor-option-background-hover);
   --wmcolor-actionmenu-item-background-focus: var(--wmcolor-option-background-focus);
@@ -954,18 +923,6 @@
   font-size: 1.12rem;
 }
 
-:host(:focus-visible) {
-  outline: none;
-}
-:host(:focus-visible) .wrapper {
-  outline: none;
-  background: var(--wmcolor-actionmenu-item-background-focus);
-  color: #fff;
-}
-:host(:focus-visible) .wrapper .description {
-  color: #fff;
-}
-
 :host([aria-disabled=true]) {
   pointer-events: none;
 }
@@ -975,4 +932,16 @@
 }
 :host([aria-disabled=true]) .description {
   color: var(--wmcolor-actionmenu-text-disabled);
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+:host(:focus-visible) .wrapper {
+  outline: none;
+  background: var(--wmcolor-actionmenu-item-background-focus);
+  color: var(--wmcolor-interactive-text);
+}
+:host(:focus-visible) .wrapper .description {
+  color: var(--wmcolor-interactive-text);
 }

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-pagination/wm-pagination.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host,
 wm-pagination {
   --wmcolor-pagination-arrow-disabled: var(--wmcolor-interactive-disabled);

package/dist/collection/components/wm-search/wm-search.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-snackbar/wm-snackbar.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
   margin: unset;

package/dist/collection/components/wm-timepicker/wm-timepicker.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-uploader/wm-uploader.css

@@ -1556,37 +1556,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host {
   display: block;
   position: relative;

package/dist/esm/{app-globals-f089afb3.js → app-globals-2a7b9752.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.19.0-alpha.1";
+const version = "5.19.0-alpha.3";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-f089afb3.js';
+import { g as globalScripts } from './app-globals-2a7b9752.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;