@watermarkinsights/ripple 5.32.0-alpha.9 → 5.32.0

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

@@ -141,7 +141,7 @@
   font-size: 0.75rem;
   font-weight: 700;
   min-height: 2.75rem;
-  padding: 0.5rem 1.3333333333em;
+  padding: 0.25rem 1.3333333333em;
   cursor: pointer;
   position: relative;
   display: flex;

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { csvToArray, debounce, hideTooltip, intl, measureText, shouldOpenUp, showTooltip, truncateText, findPrev, findNext, } from "../../global/functions";
+import { csvToArray, debounce, generateId, hideTooltip, intl, measureText, shouldOpenUp, showTooltip, truncateText, findPrev, findNext, } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 /**
  * Input for selecting or creating a list of tags. Two variants: `'dropdown'` (options in a
@@ -216,6 +216,14 @@ export class TagInput {
         });
         return list;
     }
+    // internal representations (dropdown li or table tr) of the options matching the user query.
+    // An option has no such element until the render that follows its insertion, so the list can be
+    // shorter than filteredOptionEls.
+    get filteredOptionRowEls() {
+        return this.filteredOptionEls
+            .map((o) => this.elFromTagOption(o))
+            .filter((el) => !!el);
+    }
     // the ones that should be rendered as tags
     get taggedOptions() {
         return this.optionEls.filter((o) => o.selected || o.locked);
@@ -229,18 +237,23 @@ export class TagInput {
             return this._tagEls[this.focusedTagIndex];
         }
     }
+    // an empty id would make querySelector throw on the "#" selector
+    optionById(id) {
+        return id ? this.el.querySelector("#" + id) : undefined;
+    }
     // get the wm-tag-option, given the internal representation (dropdown li or table tr)
     tagOptionFromEl(el) {
-        return el.id === "add-new-btn" ? undefined : this.el.querySelector("#" + el.id);
+        return el.id === "add-new-btn" ? undefined : this.optionById(el.id);
     }
     // get the wm-tag-option, given the internal representation of a tag
     tagOptionFromTag(el) {
-        const id = el.id.replace("tag-", "");
-        return this.el.querySelector("#" + id);
+        return this.optionById(el.id.replace("tag-", ""));
     }
     // get the internal representation of a wm-tag-option
     elFromTagOption(el) {
-        return this.el.shadowRoot.querySelector("#" + el.id);
+        return el.id
+            ? this.el.shadowRoot.querySelector("#" + el.id)
+            : undefined;
     }
     // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
     get _focusedOption() {
@@ -329,7 +342,18 @@ export class TagInput {
     isElOrChild(el) {
         return el === this.el || this.el.shadowRoot.contains(el) || this.el.contains(el);
     }
+    // Rows and tags are rendered with the id of their wm-tag-option, and that id is the only link
+    // back from a row or a tag to its option. wm-tag-option assigns its own id when it loads, which
+    // happens after this component renders, so any missing id is assigned here instead.
+    assignOptionIds() {
+        this.optionEls.forEach((o) => {
+            if (!o.id) {
+                o.id = generateId();
+            }
+        });
+    }
     componentWillLoad() {
+        this.assignOptionIds();
         if (!this.placeholder) {
             this.placeholder = this.createPlaceholderDefault(this.addNew, this.optionEls.length > 0);
         }
@@ -361,7 +385,6 @@ export class TagInput {
         this.tagsList = [...lockedTags, ...regularTags];
     }
     componentDidLoad() {
-        this.handleLayoutChange();
         // Set up observer to announce changes in selected tags, or removed user-added tags
         const observerAnnouncer = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleChangeAnnouncement(mutationRecord)));
         observerAnnouncer.observe(this.el, {
@@ -412,6 +435,7 @@ export class TagInput {
     handleOptionListChange(record) {
         const addedNodes = Array.from(record.addedNodes);
         if (addedNodes.length > 0) {
+            this.assignOptionIds();
             addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
         }
         const removedNodes = Array.from(record.removedNodes);
@@ -467,8 +491,7 @@ export class TagInput {
             const leftBound = textEl.getBoundingClientRect().left;
             // the numbers represent spacing values for padding, margin, and delete icon
             const rightBound = wrapper.getBoundingClientRect().right - 10 - 8 - 28;
-            const id = tag.id.replace("tag-", "");
-            const optionEl = id && this.el.querySelector("#" + id);
+            const optionEl = this.tagOptionFromTag(tag);
             if (optionEl) {
                 // tag text for table variant is first column text
                 textEl.textContent = truncateText(textEl, this.getTagName(optionEl), rightBound - leftBound, 5);
@@ -520,12 +543,15 @@ export class TagInput {
         this.resetInput();
         let option;
         if (this.isTable) {
-            option = ev.target;
-            option = this.tagOptionFromEl(option.closest("tr"));
+            const target = ev.target;
+            option = this.tagOptionFromEl(target.closest("tr"));
         }
         else {
             option = this.tagOptionFromEl(ev.target);
         }
+        if (!option) {
+            return;
+        }
         // if someone wants to attach a click event listener on wm-tag-option
         option.click();
         if (option.locked) {
@@ -646,15 +672,13 @@ export class TagInput {
                 if (this.addNewButton && this.addNewButton.id === "add-new-btn") {
                     items.push(this.addNewButton);
                 }
-                this.filteredOptionEls.forEach((o) => {
-                    items.push(this.elFromTagOption(o));
-                });
+                items.push(...this.filteredOptionRowEls);
                 const next = findNext(items, this._focusedOption, true);
                 this.focusOption(next);
             }
         }
         else {
-            const items = this.filteredOptionEls.map((o) => this.elFromTagOption(o));
+            const items = this.filteredOptionRowEls;
             const next = findNext(items, this._focusedOption, true);
             this.focusOption(next);
         }
@@ -669,15 +693,13 @@ export class TagInput {
                 if (this.addNewButton) {
                     items.push(this.addNewButton);
                 }
-                this.filteredOptionEls.forEach((o) => {
-                    items.push(this.elFromTagOption(o));
-                });
+                items.push(...this.filteredOptionRowEls);
                 const prev = findPrev(items, this._focusedOption, true);
                 this.focusOption(prev);
             }
         }
         else {
-            const items = this.filteredOptionEls.map((o) => this.elFromTagOption(o));
+            const items = this.filteredOptionRowEls;
             const prev = findPrev(items, this._focusedOption, true);
             this.focusOption(prev);
         }
@@ -715,6 +737,9 @@ export class TagInput {
             case "Delete":
                 if (this.focusedTag) {
                     const option = this.tagOptionFromTag(this.focusedTag);
+                    if (!option) {
+                        break;
+                    }
                     if (option.locked) {
                         this.announce(this.tagLockedMessage(this.getTagName(option)));
                     }
@@ -855,9 +880,8 @@ export class TagInput {
     }
     showTooltipIfTruncated(el) {
         const displayedText = el.querySelector(".tag-text").textContent;
-        const id = el.id.replace("tag-", "");
-        if (id) {
-            const tagEl = this.el.querySelector("#" + id);
+        const tagEl = this.tagOptionFromTag(el);
+        if (tagEl) {
             const fullText = this.getTagName(tagEl);
             if (displayedText !== fullText && displayedText.includes("...")) {
                 showTooltip("bottom", el, fullText);
@@ -1051,10 +1075,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '98021c788751a158eaf7c9719f5a6cdbce179e5f', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '5be1c5b7258830ba9f4ed48aac32c0cf08b7191a', class: "label-wrapper" }, h("label", { key: 'bcd2f7c977c282e4347671531cd91963469ea243', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '987909d0fda0916c7ad77a5b6b2fbe364918fdf7', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '74d2d1eb3cffb3084c575a07d9784592e3c83b0b', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '7859920825578196f0d5680106b96be1f5f34ed2', class: "upper-row" }, h("div", { key: '117dc1c1083a00856b321011eb3b50839213f836', class: "svg-icon svg-search" }), h("div", { key: '461bba7d72ada741ee7fd0be8de693d2b7f0de35', class: `tags-and-input-wrapper` }, h("ul", { key: 'd8ca1a36892f5af26a6916aa328ec237626961d7', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: '3320626934db9d58503b2964530e0bac1126775e', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '9342d3b7db294e8c6c791bb0b4debfa537ab4029', class: "label-wrapper" }, h("label", { key: '48f8454c94c26ee09d69221d5985d9bc6d14ad90', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '533458abd912ff8608419c53560baf6ff3e8ecb2', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8581fb8e727570200a2a024db5b3c767d79fb433', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'dc8aa608d413c1ccf2ce686d78ac14944f200421', class: "upper-row" }, h("div", { key: '8c076d96f42b6ce47d6ca49068fae2e51bbba705', class: "svg-icon svg-search" }), h("div", { key: '7dba4a97ab9435c4cd2f930e91922247349f0269', class: `tags-and-input-wrapper` }, h("ul", { key: '96f539b009fdc8cf9b267b8b7d9f9d110c00a24b', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: 'c7da0972ff25cc19d03e6e1fb1b9097439f1f723', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: '9d8ee83e7ff75dece20f57e96f987187f8ea4379', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '61485889ea39dd305b051fc76a38726dea4ecba4', id: "info", class: "info-text" }, this.info)), h("div", { key: 'd6d2837acc24ff0334231bbc94ddaf482b4eb058', id: "error" }, this.errorMessage), h("div", { key: 'b1d420a77815803987916019cf32744eb3b54191', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: '85c5677a7c97baf49906f90d0a2e20af3853b3d7', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'a60ae5ab37b6a973127ef0dbc73fdd25defa2b00', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'f66a9b7ab8687707e271dc606c54486e799a2dcc', id: "info", class: "info-text" }, this.info)), h("div", { key: '0e644fd0b06345ff5bb459e2dc46f7f6601bc92d', id: "error" }, this.errorMessage), h("div", { key: '94bea1eb5b48bd5a669d0f8a4ae98cc1ddde7692', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -141,7 +141,7 @@
   font-size: 0.75rem;
   font-weight: 700;
   min-height: 2.75rem;
-  padding: 0.5rem 1.3333333333em;
+  padding: 0.25rem 1.3333333333em;
   cursor: pointer;
   position: relative;
   display: flex;

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-24T18:37:14",
+  "timestamp": "2026-08-26T22:16:16",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",

package/dist/esm/{app-globals-11e2d8e5.js → app-globals-e9a97ede.js}

@@ -1,6 +1,6 @@
 import './index-3425d80d.js';
 
-const version = "5.32.0-alpha.9";
+const version = "5.32.0";
 
 // 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-3425d80d.js';
 export { s as setNonce } from './index-3425d80d.js';
-import { g as globalScripts } from './app-globals-11e2d8e5.js';
+import { g as globalScripts } from './app-globals-e9a97ede.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-3425d80d.js';
 export { s as setNonce } from './index-3425d80d.js';
-import { g as globalScripts } from './app-globals-11e2d8e5.js';
+import { g as globalScripts } from './app-globals-e9a97ede.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com