@watermarkinsights/ripple 5.2.0 → 5.3.0-0

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

@@ -858,12 +858,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { 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-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: '33abb5778cad372a77e0d92ec7db591a7cacb216', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '83814d7be8f23c6d6d73ac126f6545d6c19fbf50', class: "label-wrapper" }, h("label", { key: 'e404bc94e35dad4c3ca1247c4a59a4ca7d9c472c', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '07671bf51458668dfc54cbcea7ee557aac20c9dd', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '78e36202ba0e55d912532d36dc0c731fd68266ec', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '6be8fa1d4586a06c2d72a02e7e5eb186b2ee374a', class: "upper-row" }, h("div", { key: '4fce716703d1ce34be8d1837d14a55a96ee57ce1', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'ecb9d7b6a0c92fd5c575b86f71252d96299a50bb', 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-label": `${this.label} ${this.tagAreaInstructions}`, 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("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'fb154aee6848ebc5a0b4a89596d2470cdc6ae8cc', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
                 this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: 'f17d34cc1dab1e7c37a20d79d65f259aef2db3c3', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'ea41b9923c0bd26b0554a76301d0aa488558edc1', id: "info", class: "info-text" }, this.info)), h("div", { key: '9dc002e1b3a97ead65eb8e4fd785dab62a9f4048', id: "error" }, this.errorMessage), h("div", { key: 'b4a72c8d1c58a19d11d6937cd6b26a496f647c30', 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-textarea/wm-textarea.js

@@ -65,7 +65,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'a5997b0d5dce20f77941690731ed6ba5cd1d9858', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'aad504a8a1d66943b608d7b3bd835bca3c14cad1', class: "label-wrapper" }, h("label", { key: '4e731d38bc61ff74c8fa8c02a4919c1086fc94d8', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '4e57dca225b03c470452c4136e294a2ba2615cf9', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'f17ef4ee28a329a3655f4a29f736518465a7594d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '695981592b51ff1b27d80018024fa9605dbce6a4', class: "inner-wrapper" }, h("div", { key: '0b0d2659db296f2f83902a7ea0c84b09496be4e3', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '7a7eb761ee1da371a506741fb2a8808c8ad37018', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '501a8e2e33bc0ce87b02d6c094f20767247fb080', id: "info", class: "info" }, this.info)), h("div", { key: '5d6a559dc433c567fdcf0a2b21fa4d69bfbd2d25', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'ee6a8851e53375394b185bf14a77f2c6cca79d2a', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -275,13 +275,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { onBlur: () => this.close(false) }, h("div", { class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { key: '58694542ea396f6874a0889ac5fdd608477e01f4', onBlur: () => this.close(false) }, h("div", { key: '182422d05a01af98eb1fcf95817cec6ee95a81b9', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'ac2f32d2e2e35fb5014a5e8c44bdecc3e3963c0e', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '6cd54b3142c4ca0a88bf8e22a2074f67f72e1423', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '41f2f167ccbfbd81c7d37396f25c22a5db4a5baf', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: '9c9f880595e1de671d24b327a47e17e03a056ab6' }, h("div", { key: '7a58504c80378f052e7da86692f53630c15b6837', class: "inner-wrapper" }, h("input", { key: 'df44714cfb58a6ef9e49d548b732f1daa70dddfa', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '40e964286b360d9c86c54065c2acf6f761ad6a03', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { class: "clock" })), h("ul", { class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { id: "error", class: "error" }, this.errorMessage)), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: 'd6912b075f5ad8396b82b6d8f562e41698cfe62f', class: "clock" })), h("ul", { key: '458b1c42f853567c26a32f6538ed6c6ba629c38f', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '2c561ba815cf53ecb94e21864be52c72fc7b8c13', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '6f216c9a6539cf1800dfe944d762e31dc9c3422e', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -468,8 +468,9 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(input: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -488,11 +489,13 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(format: \"12\" | \"24\", time: TimeFormat12 | TimeFormat24) => Promise<string>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "format",
+                            "type": "\"12\" | \"24\"",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "time",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -97,9 +97,9 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { class: `size-${this.targetSize}` }, h("button", { class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
+        return (h(Host, { key: '8f5da43befa9de791cb44afba532182f6df0a81d', class: `size-${this.targetSize}` }, h("button", { key: '81c79d18ff76953fbf9dce6192011085ccb296ba', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { key: '3b183d1c1624cbadb6b774c55c0debcb99785c6d', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '45e77332889bdfc552906127f24452ee0c97fe27', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -195,9 +195,9 @@ export class Uploader {
         return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
     }
     render() {
-        return (h(Host, null, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { key: '4f9a5f1221aa84bad9e734bfba6a87f89fcdfd84' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '59f21688992efe6da96d837efee78d65db18f8d4', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: '1e68b8375c3d41706c5b84af7485d75f99e35dd9', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/dev/chart-small.js

@@ -0,0 +1,56 @@
+function chartAction() {
+  function getRandomColor() {
+    return `hsl(${Math.round(Math.random() * 360)}, ${Math.round(Math.random() * 50) + 50}%, ${
+      Math.round(Math.random() * 30) + 50
+    }%)`;
+  }
+  document.querySelector("body").style.backgroundColor = getRandomColor();
+}
+
+let counter = 1;
+function makeChart(amounts) {
+  const target = document.querySelector("#autochart");
+  if (target) {
+    const chart = document.createElement("wm-chart");
+    chart.id = `generated-4${counter}`;
+    counter++;
+    chart.setAttribute("chart-type", "doughnut3");
+    chart.setAttribute("label", "auto chart");
+    const bigindex = Math.floor(Math.random() * 7);
+    const total = amounts.reduce((total, newval) => (total += newval), 0);
+    for (var i = 0; i < 7; i++) {
+      const chartSlice = document.createElement("wm-chart-slice");
+      chartSlice.setAttribute("amount", amounts[i]);
+      chartSlice.setAttribute("legend", `slice ${i + 1}`);
+      chartSlice.setAttribute("popover-title", `${amounts[i]} / ${total}`);
+      chartSlice.setAttribute("popover-text", (i % 2 ? "" : "Not ") + ["Boiled", "Washed", "Rinsed", "Roasted"][i % 4]);
+      chart.appendChild(chartSlice);
+    }
+    target.appendChild(chart);
+  }
+}
+
+function spawnCharts() {
+  makeChart([1, 1, 1, 1, 1, 1, 94]);
+  makeChart([1, 2, 1, 2, 1, 2, 91]);
+  makeChart([2, 3, 2, 3, 2, 3, 85]);
+  makeChart([3, 4, 3, 79, 4, 3, 4]);
+  makeChart([3, 4, 5, 76, 3, 4, 5]);
+  makeChart([4, 4, 4, 4, 76, 4, 4]);
+  makeChart([70, 4, 5, 6, 4, 5, 6]);
+  for (var i = 0; i < 5; i++) {
+    const amounts = [];
+    for (var j = 0; j < 7; j++) {
+      if (Math.random() > 0.9) {
+        // 10% chance of a big number
+        amounts.push(Math.floor(Math.random() * 5000));
+      } else {
+        amounts.push(Math.floor(Math.random() * 100));
+      }
+    }
+    makeChart(amounts);
+  }
+}
+spawnCharts();
+
+

package/dist/collection/dev/chart.js

@@ -0,0 +1,37 @@
+function changeBkgColor() {
+  function getRandomColor() {
+    return `hsl(${Math.round(Math.random() * 360)}, ${Math.round(Math.random() * 50) + 50}%, ${
+        Math.round(Math.random() * 30) + 50
+      }%)`;
+  }
+  document.querySelector("body").style.backgroundColor = getRandomColor();
+}
+
+function toggleSubinfo() {
+  document
+    .querySelectorAll("wm-chart")
+    .forEach((chart) => (chart.subinfo = chart.subinfo ? "" : "My subinfo text"));
+}
+
+function createDropdownOptions() {
+  const select = document.querySelector("#prog-focus-select");
+  document.querySelectorAll("wm-chart").forEach((c, i) => {
+    const optn = document.createElement("option");
+    optn.textContent = "#" + (i + 1) + " (" + c.chartType + ")";
+    select.appendChild(optn);
+  });
+}
+
+createDropdownOptions();
+
+window.addEventListener("wmChartPopoverButtonTriggered", (e) =>
+  console.log("wmChartPopoverButtonTriggered event", e)
+);
+
+function focusChart(num) {
+  const select = document.getElementById("prog-focus-select");
+  const charts = document.querySelectorAll("wm-chart");
+  charts[select.selectedIndex].focus();
+  console.log(document.activeElement);
+}
+

package/dist/collection/dev/date-range.js

@@ -0,0 +1,6 @@
+document.querySelectorAll("wm-date-range").forEach((dateRange) => {
+  dateRange.addEventListener("wmRangeSelection", (ev) => {
+    dateRange.valueStart = ev.detail.startDate.us;
+    dateRange.valueEnd = ev.detail.endDate.us;
+  });
+});

package/dist/collection/dev/datepicker.js

@@ -0,0 +1,46 @@
+function customizedError() {
+  let dp = document.getElementById("firstDP");
+  if (dp) {
+    if (dp.value.includes("2013")) {
+      dp.errorMessage = "Year cannot be 2013!";
+    } else {
+      dp.errorMessage = "";
+    }
+  }
+}
+customizedError();
+
+document.querySelectorAll("wm-datepicker").forEach((datepicker) => {
+  // this is flexible to test for many types of date formats, but this is typically uniform across datepicker instances
+  const dateFormat = datepicker.getAttribute("date-format");
+  const dateFormatUnit =
+    dateFormat === "mm/dd/yyyy" || dateFormat === null ? "US" : dateFormat === "dd/mm/yyyy" ? "INT" : "ISO";
+
+  datepicker.addEventListener("wmDatepickerInputBlurred", async (ev) => {
+    if (datepicker.value) {
+      const isoDate = await datepicker.reformatDate(dateFormatUnit, "ISO", datepicker.value);
+
+      if (await datepicker.isValidIso(isoDate)) {
+        // if valid date, clean up formatting and set properties
+        const displayDate = await datepicker.reformatDate("ISO", dateFormatUnit, isoDate);
+
+        datepicker.value = displayDate;
+        datepicker.errorMessage = "";
+      } else {
+        // if invalid date, leave value and display error
+        datepicker.errorMessage = `Please enter a valid date in the format ${dateFormat ? dateFormat : "mm/dd/yyyy"}`;
+      }
+    }
+  });
+
+  datepicker.addEventListener("wmDatepickerDateSelected", async (ev) => {
+    datepicker.errorMessage = "";
+    datepicker.value = await datepicker.reformatDate("ISO", dateFormatUnit, ev.detail.date);
+  });
+
+  datepicker.addEventListener("blur", (ev) => {
+    if (datepicker.requiredField && datepicker.value === "") {
+      datepicker.errorMessage = "A date is required";
+    }
+  });
+});

package/dist/collection/dev/file-list.js

@@ -0,0 +1,16 @@
+/* FILE LIST */
+const fileLists = document.querySelectorAll("wm-file-list");
+fileLists &&
+  fileLists.forEach((fileList) => {
+    fileList.addEventListener("wmFileDownload", (ev) => {
+      alert("downloading", ev.target.id);
+    });
+    fileList.addEventListener("wmFilePreview", (ev) => {
+      alert("previewing", ev.target.id);
+    });
+    fileList.addEventListener("wmFileDelete", (ev) => {
+      alert("deleting", ev.target.id);
+    });
+  });
+
+

package/dist/collection/dev/input.js

@@ -0,0 +1,6 @@
+function changeValue() {
+  const values = ["Gomez", "Morticia", "Wednesday", "Pugsley", "Uncle Fester", "Lurch", "Aristotle", "Thing"];
+  const randomValue = () => values[~~(Math.random() * values.length)];
+  document.querySelector("wm-input").setAttribute("value", randomValue());
+}
+

package/dist/collection/dev/modal.js

@@ -0,0 +1,75 @@
+function showModal(id) {
+  const modal = document.getElementById(id);
+  modal.open = true;
+}
+
+function showDialog(id) {
+  const event = new Event("wmShowModal");
+  event.detail = "dialog";
+  window.dispatchEvent(event);
+  const dialog = document.getElementById(id);
+  dialog.open = true;
+}
+
+const modal = document.getElementById("modal");
+const innerModal = document.getElementById("inner-modal");
+const innerDialog = document.getElementById("inner-dialog");
+const nestedModal = document.getElementById("nested-modal");
+
+const modalInput = document.getElementById("modal-input");
+const count = document.getElementById("count");
+const modalFooter = document.getElementById("modal-footer");
+
+modalInput &&
+  modalInput.addEventListener("change", function () {
+    if (modalInput.value !== "") {
+      modalFooter.primaryActionDisabled = false;
+    } else {
+      modalFooter.primaryActionDisabled = true;
+    }
+  });
+
+count &&
+  count.addEventListener("change", (ev) => {
+    modalFooter.setAttribute("info-text", ev.target.value + " things ready to launch");
+  });
+
+const nestingModals = [modal, innerModal, innerDialog, nestedModal];
+
+nestingModals.forEach((modal) => {
+  modal && modal.addEventListener("wmModalPrimaryTriggered", actionTriggered);
+  modal && modal.addEventListener("wmModalSecondaryTriggered", modalDismissed);
+  modal && modal.addEventListener("wmModalCloseTriggered", modalDismissed);
+});
+
+function actionTriggered(element) {
+  modalInput.value = "";
+  console.log("Changes saved");
+  modalFooter.actionDisabled = true;
+  this.open = false;
+}
+
+function modalDismissed(element) {
+  this.open = false;
+}
+
+const dialog = document.getElementById("dialog");
+
+dialog &&
+  dialog.addEventListener("wmModalCloseTriggered", function () {
+    dialog.open = false;
+  });
+
+dialog &&
+  dialog.addEventListener("wmModalSecondaryTriggered", function () {
+    dialog.open = false;
+    alert("Secondary clicked!");
+  });
+
+dialog &&
+  dialog.addEventListener("wmModalPrimaryTriggered", function () {
+    console.log("Deleted");
+    dialog.open = false;
+  });
+
+

package/dist/collection/dev/navigation.js

@@ -0,0 +1,13 @@
+// page is reloaded on click, so we can't setup onclick funcs like we would in real situation.
+// for testing purposes we just set a url param and read that on load
+function setActiveOnLoad() {
+  Array.from(document.querySelectorAll("wm-navigation-item")).map((el, index) => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const indexParam = urlParams.get("item");
+    if (indexParam) {
+      el.active = index == indexParam;
+    }
+  });
+}
+
+setActiveOnLoad();

package/dist/collection/dev/navigator.js

@@ -0,0 +1,34 @@
+function setProds() {
+  const navigator = document.getElementById("nav");
+  const userModules = [
+    {
+      id: "aqua",
+      linkUrl: "/aqua",
+      samlLinkUrl: "/saml/aqua",
+      iconUrl: "https://cdn.watermarkinsights.com/images/login/aqua.svg",
+      name: "Aqua",
+    },
+    {
+      id: "dm",
+      linkUrl: "",
+      samlLinkUrl: "",
+      iconUrl: "https://cdn.watermarkinsights.com/images/login/digitalmeasures.svg",
+      name: "DM",
+    },
+  ];
+
+  if (navigator) {
+    navigator.ref = (function () {
+      navigator.products = userModules;
+    })();
+  }
+}
+
+setProds();
+
+document.addEventListener(
+  "wmNavigatorLogout",
+  () => console.log("user logged out") // make sure to make the log persistent if you want to see this in the browser console.
+);
+
+

package/dist/collection/dev/pagination.js

@@ -0,0 +1,7 @@
+var notifications = [];
+window.addEventListener("wmPaginationPageClicked", function (ev) {
+  const pagin = document.getElementById(ev.target.id);
+  pagin.currentPage = ev.target.value;
+});
+
+