@watermarkinsights/ripple 5.12.0-9 → 5.12.0

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js

@@ -1,22 +1,14 @@
 import { h, Host, forceUpdate } from "@stencil/core";
-import { getContextMeasurements, getTextDir, intl, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
-import { globalMessages } from "../../../global/intl";
+import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
+import { globalMessages, selectMessages } from "../../../global/intl";
 export class NestedSelect {
     constructor() {
         this.openUp = false;
         this.overflowCount = 0;
         this.displayedOptions = [];
         this.clearSelectionMessage = this.multiple
-            ? intl.formatMessage({
-                id: "select.multiClearSelection",
-                defaultMessage: "Clear all Selections",
-                description: "Button text to clear selection. Use imperative",
-            })
-            : intl.formatMessage({
-                id: "select.singleClearSelection",
-                defaultMessage: "Clear Selection",
-                description: "Button text to clear selection. Use imperative",
-            });
+            ? selectMessages.multiClearSelection
+            : selectMessages.singleClearSelection;
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -26,27 +18,9 @@ export class NestedSelect {
         this.multiple = false;
         this.search = false;
         this.selectAll = false;
-        this.placeholder = this.multiple
-            ? intl.formatMessage({
-                id: "select.multiPlaceholder",
-                defaultMessage: "Make a selection",
-                description: "Placeholder text for multiple select. Use imperative",
-            })
-            : intl.formatMessage({
-                id: "select.singlePlaceholder",
-                defaultMessage: "Select an Option",
-                description: "Placeholder text for single select. Use imperative",
-            });
-        this.searchPlaceholder = intl.formatMessage({
-            id: "select.searchPlaceholder",
-            defaultMessage: "Search",
-            description: "Placeholder text. Use imperative",
-        });
-        this.allSelectedMessage = intl.formatMessage({
-            id: "select.allSelected",
-            defaultMessage: "All selected",
-            description: "Text displayed when all options are selected",
-        });
+        this.placeholder = this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder;
+        this.searchPlaceholder = selectMessages.searchPlaceholder;
+        this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
         this.showClearSelectionButton = false;
         this.announcement = "";
@@ -282,12 +256,7 @@ export class NestedSelect {
     }
     handleClearSelection() {
         this.optgroupEls.forEach((optgroupEl) => optgroupEl.emitDeselection());
-        const selectionClearedAnnouncement = intl.formatMessage({
-            id: "select.selectionCleared",
-            defaultMessage: "Selection cleared",
-            description: "Screen reader announcement alerting the user they have cleared their selection",
-        });
-        this.announce(selectionClearedAnnouncement);
+        this.announce(selectMessages.selectionCleared);
         if (!this.multiple) {
             this.close();
         }
@@ -300,17 +269,9 @@ export class NestedSelect {
     renderSelectionCount(optgroupEl) {
         const selectionCount = this.countOptgroupSelected(optgroupEl);
         if (selectionCount) {
-            const singleSelectionCountMessage = intl.formatMessage({
-                id: "select.optgroupSingleSelectionCount",
-                defaultMessage: "Item Selected",
-                description: "Text indicating number of selected in a group, where only a single selection is possible.",
-            }, { numSelected: selectionCount });
-            const multipleSelectionCountMessage = intl.formatMessage({
-                id: "select.optgroupMultipleSelectionCount",
-                defaultMessage: "{numSelected} Selected",
-                description: "Text indicating number of selected in a group, where multiple selections are possible.",
-            }, { numSelected: selectionCount });
-            return (h("div", { class: "selection-count" }, h("span", null, this.multiple ? multipleSelectionCountMessage : singleSelectionCountMessage)));
+            return (h("div", { class: "selection-count" }, h("span", null, this.multiple
+                ? selectMessages.getOptgroupMultipleSelectionCount(selectionCount)
+                : selectMessages.optgroupSingleSelectionCount)));
         }
     }
     render() {
@@ -325,16 +286,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: '129bfabd72ffc407846c652aa90d1d4a59ba31ce', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'f24e954d1c81f48b1939ed0e86ddf638440d114f', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '044688af81b6a7ef8a854f07dd9a5c303d7458df', class: "label-wrapper" }, h("label", { key: 'de5ba657188d7949016bd5901bc5d51f81cf8eb2', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '53d75b954ddcb150a4c83d869875d1fb9148475d', class: "button-wrapper" }, h("button", Object.assign({ key: '4c1c81d0c19caffbca99a143d09bbec9be3abf75' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'ee0f2c447a73c2628de40782d0a318abb3a6aade', class: "overflowcontrol" }, h("span", { key: 'd9c0bac44dc766b6cc6246f3921f13e765f99a5a', class: "button-text" }, this.renderButtonText())), h("div", { key: '8e5541f4b6f01ba8c8ff9573e2b3caff50007c64', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: 'eac4a57813a907ec8d786f90830f705e9f45af48', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '8a48edf4b6dff7980990bf51da320f2cedb5f928', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '2df3bde417cb9ebaafeeff47f34ce056db6e0ba7', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), h("div", { class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled"), h("div", { class: "svg-icon svg-next" })));
-        })), h("div", { key: 'a6e4250cfbf9f9c17edec627e74889157c9fce88', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '1c3088473874beb3d093b0fb86623469c9eea7dc' }))), h("div", { key: 'f9757986331dc70934b90697d40d43599645b6e4', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '5a1dc6e684ffb0e59aaba71d20825836efb480db', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }
@@ -527,7 +488,7 @@ export class NestedSelect {
                 },
                 "attribute": "placeholder",
                 "reflect": false,
-                "defaultValue": "this.multiple\n    ? intl.formatMessage({\n        id: \"select.multiPlaceholder\",\n        defaultMessage: \"Make a selection\",\n        description: \"Placeholder text for multiple select. Use imperative\",\n      })\n    : intl.formatMessage({\n        id: \"select.singlePlaceholder\",\n        defaultMessage: \"Select an Option\",\n        description: \"Placeholder text for single select. Use imperative\",\n      })"
+                "defaultValue": "this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder"
             },
             "searchPlaceholder": {
                 "type": "string",
@@ -545,7 +506,7 @@ export class NestedSelect {
                 },
                 "attribute": "search-placeholder",
                 "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.searchPlaceholder\",\n    defaultMessage: \"Search\",\n    description: \"Placeholder text. Use imperative\",\n  })"
+                "defaultValue": "selectMessages.searchPlaceholder"
             },
             "allSelectedMessage": {
                 "type": "string",
@@ -563,7 +524,7 @@ export class NestedSelect {
                 },
                 "attribute": "all-selected-message",
                 "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  })"
+                "defaultValue": "selectMessages.allSelected"
             },
             "constrainedMaxHeight": {
                 "type": "string",

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.js

@@ -48,7 +48,7 @@ export class Optgroup {
         handleDisabledAttribute(this.el, this.isDisabled);
     }
     render() {
-        return (h(Host, { key: 'bba30132f0e662bcfc6f9a4280558aa4426673f4' }, h("div", { key: '757e663ad18a9a451169f994f54faf8f9182e1d9', class: `list-wrapper` }, h("priv-option-list", { key: '1bfda628a518f2508084a2382cc7a2f19754859e', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: 'd584feb13518107132003e262c5bcc818b677c5c' })))));
+        return (h(Host, null, h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
     }
     static get is() { return "wm-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-option/wm-option.e2e.js

@@ -0,0 +1,22 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-option", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent("<wm-select id='test' label='select something'><wm-option id='first' disabled onClick='action()'>First option</wm-option><wm-option id='second' disabled>Second option</wm-option><wm-option id='third'>Third option</wm-option></wm-select><script>function action() {document.getElementById('second').textContent = 'the function ran!'}</script>");
+    });
+    // RENDER
+    it("renders", async () => {
+        const element = await page.find("wm-option");
+        expect(element).not.toBeNull();
+    });
+    it("prevents action on disabled option", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter"); // dropdown opens
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // Enter on disabled option
+        await page.waitForChanges();
+        let changedOption = await page.find("wm-option#second");
+        expect(changedOption.textContent).toEqual("Second option"); // the function that shouldn't run replaces this text by: "the function ran!"
+    });
+});

package/dist/collection/components/selects/wm-option/wm-option.js

@@ -143,7 +143,7 @@ export class Option {
         this.parentOptionList.addEventListener("optionListSearchChanged", (ev) => this.handleSearch(ev));
     }
     render() {
-        return (h(Host, { key: '613fb3ff6678fbe5793a432817705b46c502ae06', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '8f9e3e8a88bf839e6b5801f01e6b451d297bce55', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '82c0706404571fda0937308433b9def82f021666', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '8c657048302620555e49630a4adc94171894b0a3', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '879fad664edef7a7188a8dfac862b29d7f78af42', class: "sr-only" }, this.el.textContent)), h("div", { key: 'bf5a1372a0daf05ef3cf8af196eddcaacd7ee049', class: "subinfo" }, this.subinfo)));
+        return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-option/wm-option.spec.js

@@ -0,0 +1,63 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Option } from "./wm-option";
+import { Select } from "../wm-select/wm-select";
+// mock MutationObserver
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-option", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({
+            components: [Option],
+            html: `<wm-select label="abel">
+      <wm-option>1</wm-option>
+      <wm-option value="second">2</wm-option>
+      </wm-select>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has the role of option", async () => {
+        const page = await newSpecPage({
+            components: [Option],
+            html: `<wm-select label="label">
+      <wm-option>1</wm-option>
+      <wm-option value="second">2</wm-option>
+      </wm-select>`,
+        });
+        expect(page.root).toEqualAttribute("role", "option");
+    });
+    it("returns the value", async () => {
+        // if devs set the value attribute or property,
+        // the component should return it on comp.value
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: `<wm-select label="abel">
+      <wm-option>1</wm-option>
+      <wm-option value="second">2</wm-option>
+      </wm-select>`,
+        });
+        const select = page.root;
+        const options = select.querySelectorAll("wm-option");
+        expect(options[0].value).toBeUndefined();
+        expect(options[1].value).toBe("second");
+    });
+    it("handles disabled onClick function", async () => {
+        const page = await newSpecPage({
+            components: [Option],
+            html: `<wm-select label="label">
+      <wm-option>1</wm-option>
+      <wm-option value="second">2</wm-option>
+      </wm-select>`,
+        });
+        const menuItem = page.root;
+        const onClickFunc = () => console.log("Message");
+        menuItem.onclick = onClickFunc;
+        expect(menuItem.onclick).toEqual(onClickFunc);
+        menuItem.disabled = true;
+        expect(menuItem.onclick).toBe(null);
+        menuItem.disabled = false;
+        expect(menuItem.onclick).toEqual(onClickFunc);
+    });
+});