npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-7 → 5.11.0-9 - Mend

@watermarkinsights/ripple 5.11.0-7 → 5.11.0-9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (350) hide show

package/dist/collection/components/wm-textarea/wm-textarea.spec.js ADDED Viewed

@@ -0,0 +1,79 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Textarea } from "./wm-textarea";
+// mock observers
+// global.ResizeObserver = jest.fn().mockImplementation(() => ({
+//   observe: jest.fn(),
+//   unobserve: jest.fn(),
+//   disconnect: jest.fn(),
+// }));
+// global.MutationObserver = jest.fn().mockImplementation(() => ({
+//   observe: jest.fn(),
+//   unobserve: jest.fn(),
+//   disconnect: jest.fn(),
+// }));
+describe("textarea", () => {
+    let page;
+    let component;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label"></wm-textarea>`,
+        });
+        component = page.root;
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has right aria roles", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" disabled required-field></wm-textarea>`,
+        });
+        const textarea = await page.root.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("aria-describedby", "info error");
+        expect(textarea).toHaveAttribute("disabled");
+        const error = await page.root.shadowRoot.querySelector("#error");
+        expect(error).toEqualAttribute("aria-live", "assertive");
+        const livePolite = await page.root.shadowRoot.querySelector("#live-polite");
+        expect(livePolite).toEqualAttribute("aria-live", "polite");
+    });
+    it("sets initial value from textcontent", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label">Initial value</wm-textarea>`,
+        });
+        component = page.root;
+        expect(component.value).toBe("Initial value");
+    });
+    it("renders character limit", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" character-limit="20">Hello</wm-textarea>`,
+        });
+        component = page.root;
+        const characterLimitArea = await page.root.shadowRoot.querySelector(".character-count");
+        expect(characterLimitArea.textContent).toBe("5/20");
+    });
+    it("properties override height and width", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" input-width="200px" input-height="300px"></wm-textarea>`,
+        });
+        component = page.root;
+        const textarea = await component.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("style", "height: 300px;");
+        const widthWrapper = await component.shadowRoot.querySelector(".inputfield-wrapper");
+        expect(widthWrapper).toEqualAttribute("style", "width: 200px;");
+    });
+    it("displays info and error-message properties", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" info="example info text" error-message="example error text"></wm-textarea>`,
+        });
+        component = page.root;
+        const info = await component.shadowRoot.querySelector("#info");
+        expect(info.textContent).toBe("example info text");
+        const error = await component.shadowRoot.querySelector("#error");
+        expect(error.textContent).toBe("example error text");
+    });
+});

package/dist/collection/components/wm-timepicker/wm-timepicker.e2e.js ADDED Viewed

@@ -0,0 +1,163 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-timepicker", () => {
+    let page, input;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" dropdown-time="09:00"></wm-timepicker>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("emits input blurred event", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker"></wm-timepicker>
+      <div id="indicator">no event heard</div>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document.addEventListener("wmTimepickerInputBlurred", () => (indicator.textContent = "event heard"));
+        });
+        await page.waitForChanges;
+        let indicator = await page.find("#indicator");
+        expect(indicator.textContent).toBe("no event heard");
+        await input.type("522");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("event heard");
+    });
+    it("opens to preselected time", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" preselected="14:15"></wm-timepicker>
+      </main></body></html>`);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const nineAm = await page.find("wm-timepicker >>> li#option58");
+        expect(nineAm).toEqualAttribute("tabindex", 0);
+    });
+    it("opens next option with down arrow key", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        const nineFifteenAm = await page.find("wm-timepicker >>> li#option38");
+        expect(nineFifteenAm).toEqualAttribute("tabindex", 0);
+    });
+    it("opens previous option with up arrow key", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        const eightFourtyFiveAm = await page.find("wm-timepicker >>> li#option36");
+        expect(eightFourtyFiveAm).toEqualAttribute("tabindex", 0);
+    });
+    it("navigates through the dropdown with keyboard", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const nineAm = await page.find("wm-timepicker >>> li#option37");
+        const nineFifteenAm = await page.find("wm-timepicker >>> li#option38");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(nineFifteenAm).toEqualAttribute("tabindex", 0);
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(nineAm).toEqualAttribute("tabindex", 0);
+    });
+    it("emits timeSelected event with time", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" value="03:15 PM" preselected="15:15"></wm-timepicker>
+      <div id="indicator">no event heard</div>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document.addEventListener("wmTimepickerTimeSelected", (ev) => (indicator.textContent = `event heard: ${ev.detail.time}`));
+        });
+        await page.waitForChanges;
+        let indicator = await page.find("#indicator");
+        expect(indicator.textContent).toBe("no event heard");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("event heard: 15:15");
+    });
+    it("closes dropdown on Escape and Tab", async () => {
+        const dropdown = await page.find("wm-timepicker >>> ul.options");
+        expect(dropdown).not.toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+    });
+    it("closes dropdown when clicking outside component", async () => {
+        const dropdown = await page.find("wm-timepicker >>> ul.options");
+        expect(dropdown).not.toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.mouse.click(-10, -10);
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+    });
+    it("handles Home and End keys", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const firstOption = await page.find("wm-timepicker >>> li#option1");
+        await page.keyboard.press("Home");
+        await page.waitForChanges();
+        expect(firstOption).toEqualAttribute("tabindex", 0);
+        const lastOption = await page.find("wm-timepicker >>> li#option96");
+        await page.keyboard.press("End");
+        await page.waitForChanges();
+        expect(lastOption).toEqualAttribute("tabindex", 0);
+    });
+});

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

@@ -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, { key: '6c9babdf2a8237a46321cc7fbb9185f23b6e73ee', onBlur: () => this.close(false) }, h("div", { key: '214da15a53ada6e5e1dbfb2d1d6bf73d9e0231b2', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '3179f94028e1645d63b047e33efe756cd337ce17', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '9d490705cd32b26bf5de757e6fd5889473a7c4c4', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '8e54d504e4ab76a03ef7a01cdf8e1fb161c37016', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: '22b7b8c33679f6f7c194e9d3bc3c6794af4ddedd' }, h("div", { key: '4eb746fae7776b906053429059cec00c47ce31c4', class: "inner-wrapper" }, h("input", { key: '7f17b1dfedbf3d2f574247c0fa71b256ac094a79', 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: '1c3f6a403417b9baa4e0f17644cac84d7d6ea1af', 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, { 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()),
             // 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", { key: 'd679e16b6d81f07ecf96a76a5adac12ac41d75a0', class: "svg-icon svg-time" })), h("ul", { key: 'cc793abe39ce5de00299e8d03051424b43cd8bcc', 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: '3a82aa292fe4d5bfa374d7bcdb8a22bf9f7b3e45', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '11c037ef9b0e95bd6262a34cbdf86be79ef23beb', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { class: "svg-icon svg-time" })), 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) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -468,9 +468,8 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(input: string) => Promise<boolean>",
                     "parameters": [{
-                            "name": "input",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {
@@ -489,13 +488,11 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(format: \"12\" | \"24\", time: TimeFormat12 | TimeFormat24) => Promise<string>",
                     "parameters": [{
-                            "name": "format",
-                            "type": "\"12\" | \"24\"",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }, {
-                            "name": "time",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/wm-timepicker/wm-timepicker.spec.js ADDED Viewed

@@ -0,0 +1,147 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Timepicker } from "./wm-timepicker";
+describe("timepicker", () => {
+    let page;
+    // let timepicker: any;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Timepicker],
+            html: "<wm-timepicker label='timepicker'></wm-timepicker>",
+        });
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("prevents user actions when disabled", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' disabled></wm-timepicker>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        const button = await page.root.shadowRoot.querySelector("button");
+        expect(input).toHaveAttribute("disabled");
+        expect(button).toHaveAttribute("disabled");
+    });
+    it("validates input", async () => {
+        const timepicker = new Timepicker();
+        // user passes hour
+        expect(await timepicker.isValidTime("0")).toBe(true);
+        expect(await timepicker.isValidTime("24")).toBe(true);
+        expect(await timepicker.isValidTime("8p")).toBe(true);
+        expect(await timepicker.isValidTime("12 a")).toBe(true);
+        expect(await timepicker.isValidTime("02am")).toBe(true);
+        expect(await timepicker.isValidTime("8:")).toBe(true);
+        // user passes hour and minutes
+        expect(await timepicker.isValidTime("1223")).toBe(true);
+        expect(await timepicker.isValidTime("927a")).toBe(true);
+        expect(await timepicker.isValidTime("12:12pm")).toBe(true);
+        expect(await timepicker.isValidTime("3:45 am")).toBe(true);
+        // rejected
+        expect(await timepicker.isValidTime("6f")).toBe(false);
+        expect(await timepicker.isValidTime("12m")).toBe(false);
+        expect(await timepicker.isValidTime("a")).toBe(false);
+        expect(await timepicker.isValidTime("92")).toBe(false);
+        expect(await timepicker.isValidTime("88:88")).toBe(false);
+        expect(await timepicker.isValidTime("999pm")).toBe(false);
+        expect(await timepicker.isValidTime("o1236")).toBe(false);
+        expect(await timepicker.isValidTime("12:45fm")).toBe(false);
+        expect(await timepicker.isValidTime("12342")).toBe(false);
+        expect(await timepicker.isValidTime("123:")).toBe(false);
+        expect(await timepicker.isValidTime("3:123")).toBe(false);
+        expect(await timepicker.isValidTime("4:60 pm")).toBe(false);
+        // weird edge cases
+        expect(await timepicker.isValidTime("17am")).toBe(false);
+        expect(await timepicker.isValidTime("17pm")).toBe(false);
+        // this is not caught by the regex, so we handle it later
+        expect(await timepicker.isValidTime("0pm")).toBe(true);
+    });
+    it("reformats", async () => {
+        const timepicker = new Timepicker();
+        expect(await timepicker.reformatTime("12", "00:00")).toBe("12:00 AM");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("12", "12:00am")).toBe("12:00 AM");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("12", "12:00pm")).toBe("12:00 PM");
+        expect(await timepicker.reformatTime("12", "24:00")).toBe("12:00 AM");
+        expect(await timepicker.reformatTime("12", "17:00")).toBe("05:00 PM");
+        expect(await timepicker.reformatTime("12", "7:00 am")).toBe("07:00 AM");
+        expect(await timepicker.reformatTime("12", "7 : 35")).toBe("07:35 AM");
+        expect(await timepicker.reformatTime("24", "0:00")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "12:00am")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "12:00pm")).toBe("12:00");
+        expect(await timepicker.reformatTime("24", "24:00")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "1700")).toBe("17:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "700a")).toBe("07:00");
+        expect(await timepicker.reformatTime("24", "7 :00 pm")).toBe("19:00");
+        expect(await timepicker.reformatTime("24", "17: 35")).toBe("17:35");
+    });
+    it("finds nearest time interval", async () => {
+        const timepicker = new Timepicker();
+        expect(await timepicker.findNearestTimeInterval("00:07")).toBe("00:00");
+        expect(await timepicker.findNearestTimeInterval("01:08")).toBe("01:15");
+        expect(await timepicker.findNearestTimeInterval("01:15")).toBe("01:15");
+        expect(await timepicker.findNearestTimeInterval("02:22")).toBe("02:15");
+        expect(await timepicker.findNearestTimeInterval("03:23")).toBe("03:30");
+        expect(await timepicker.findNearestTimeInterval("03:30")).toBe("03:30");
+        expect(await timepicker.findNearestTimeInterval("04:37")).toBe("04:30");
+        expect(await timepicker.findNearestTimeInterval("15:38")).toBe("15:45");
+        expect(await timepicker.findNearestTimeInterval("15:45")).toBe("15:45");
+        expect(await timepicker.findNearestTimeInterval("16:52")).toBe("16:45");
+        expect(await timepicker.findNearestTimeInterval("17:53")).toBe("18:00");
+        expect(await timepicker.findNearestTimeInterval("18:00")).toBe("18:00");
+        expect(await timepicker.findNearestTimeInterval("23:59")).toBe("00:00");
+        // edge case regarding leading zeroes
+        expect(await timepicker.findNearestTimeInterval("09:59")).toBe("10:00");
+    });
+    it("splits time", () => {
+        const timepicker = new Timepicker();
+        expect(timepicker.splitTime("5:37")).toStrictEqual([5, "37", undefined]);
+        expect(timepicker.splitTime("5:37 am")).toStrictEqual([5, "37", "am"]);
+        expect(timepicker.splitTime("09:00")).toStrictEqual([9, "00", undefined]);
+        expect(timepicker.splitTime("13:52")).toStrictEqual([13, "52", undefined]);
+        // edge case
+        //@ts-ignore
+        expect(timepicker.splitTime("0pm")).toStrictEqual([0, "00", "AM"]);
+    });
+    it("generates times", () => {
+        const timepicker = new Timepicker();
+        //prettier-ignore
+        expect(timepicker.generateTimeIntervals()).toStrictEqual([
+            "00:00", "00:15", "00:30", "00:45",
+            "01:00", "01:15", "01:30", "01:45",
+            "02:00", "02:15", "02:30", "02:45",
+            "03:00", "03:15", "03:30", "03:45",
+            "04:00", "04:15", "04:30", "04:45",
+            "05:00", "05:15", "05:30", "05:45",
+            "06:00", "06:15", "06:30", "06:45",
+            "07:00", "07:15", "07:30", "07:45",
+            "08:00", "08:15", "08:30", "08:45",
+            "09:00", "09:15", "09:30", "09:45",
+            "10:00", "10:15", "10:30", "10:45",
+            "11:00", "11:15", "11:30", "11:45",
+            "12:00", "12:15", "12:30", "12:45",
+            "13:00", "13:15", "13:30", "13:45",
+            "14:00", "14:15", "14:30", "14:45",
+            "15:00", "15:15", "15:30", "15:45",
+            "16:00", "16:15", "16:30", "16:45",
+            "17:00", "17:15", "17:30", "17:45",
+            "18:00", "18:15", "18:30", "18:45",
+            "19:00", "19:15", "19:30", "19:45",
+            "20:00", "20:15", "20:30", "20:45",
+            "21:00", "21:15", "21:30", "21:45",
+            "22:00", "22:15", "22:30", "22:45",
+            "23:00", "23:15", "23:30", "23:45",
+        ]);
+    });
+    it("renders error", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' error-message="There is an error."></wm-timepicker>`);
+        const errorEl = page.root.shadowRoot.querySelector(".error");
+        expect(errorEl.textContent).toBe("There is an error.");
+    });
+    it("sets input to required", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' required-field='true'></wm-timepicker>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-required", "true");
+    });
+});

package/dist/collection/components/wm-toggletip/wm-toggletip.css CHANGED Viewed

@@ -853,7 +853,6 @@
   align-items: center;
   position: relative;
   cursor: pointer;
-  anchor-name: --button;
 }
 :host .button .svg-info {
   color: var(--wmcolor-toggletip-icon-background);
@@ -896,25 +895,12 @@
   position: absolute;
   max-width: 13.75rem;
   width: max-content;
-  overflow: visible;
-  inset: auto;
-  margin: 0;
   padding: 0.5rem 0.75rem;
-  border: none;
   border-radius: 0.1875rem;
   background: var(--wmcolor-toggletip-background);
   color: var(--wmcolor-toggletip-text);
-  font-size: 0.875rem;
-  position-anchor: --button;
-}
-:host .toggletip.hidden {
-  visibility: hidden;
-}
-:host .toggletip.top {
-  position-area: block-start center;
-}
-:host .toggletip.top.small {
-  translate: 0 -0.75rem;
+  font-size: 14px;
+  z-index: 30;
 }
 :host .toggletip.top:before {
   content: "";
@@ -931,12 +917,6 @@
   margin-left: -0.375rem;
   left: 50%;
 }
-:host .toggletip.bottom {
-  position-area: block-end center;
-}
-:host .toggletip.bottom.small {
-  translate: 0 0.75rem;
-}
 :host .toggletip.bottom:before {
   content: "";
   position: absolute;
@@ -952,12 +932,6 @@
   margin-left: -0.375rem;
   left: 50%;
 }
-:host .toggletip.right {
-  position-area: center inline-end;
-}
-:host .toggletip.right.small {
-  translate: 0.75rem 0;
-}
 :host .toggletip.right:before {
   content: "";
   position: absolute;
@@ -974,12 +948,6 @@
   top: calc(50% - 6px);
   left: -0.1875rem;
 }
-:host .toggletip.left {
-  position-area: center inline-start;
-}
-:host .toggletip.left.small {
-  translate: -0.75rem 0;
-}
 :host .toggletip.left:before {
   content: "";
   position: absolute;
@@ -996,15 +964,6 @@
   top: calc(50% - 6px);
   right: -0.1875rem;
 }
-:host .toggletip.bottom-right {
-  position-area: end;
-}
-:host .toggletip.bottom-right.small {
-  translate: -1.75rem 0.75rem;
-}
-:host .toggletip.bottom-right.large {
-  translate: -2.5rem 0;
-}
 :host .toggletip.bottom-right:before {
   content: "";
   position: absolute;
@@ -1022,15 +981,6 @@
   margin-left: unset;
   left: 0.875rem;
 }
-:host .toggletip.bottom-left {
-  position-area: block-end inline-start;
-}
-:host .toggletip.bottom-left.small {
-  translate: 1.75rem 0.75rem;
-}
-:host .toggletip.bottom-left.large {
-  translate: 2.5rem 0;
-}
 :host .toggletip.bottom-left:before {
   content: "";
   position: absolute;
@@ -1049,15 +999,6 @@
   margin-left: unset;
   right: 0.875rem;
 }
-:host .toggletip.top-right {
-  position-area: block-start inline-end;
-}
-:host .toggletip.top-right.small {
-  translate: -1.75rem -0.75rem;
-}
-:host .toggletip.top-right.large {
-  translate: -2.5rem 0;
-}
 :host .toggletip.top-right:before {
   content: "";
   position: absolute;
@@ -1075,15 +1016,6 @@
   margin-left: unset;
   left: 0.875rem;
 }
-:host .toggletip.top-left {
-  position-area: start;
-}
-:host .toggletip.top-left.small {
-  translate: 1.75rem -0.75rem;
-}
-:host .toggletip.top-left.large {
-  translate: 2.5rem 0;
-}
 :host .toggletip.top-left:before {
   content: "";
   position: absolute;
@@ -1102,6 +1034,38 @@
   margin-left: unset;
   right: 0.875rem;
 }
+:host .toggletip.hidden {
+  transform: scale(0, 0) !important;
+  visibility: hidden;
+}
+:host .toggletip {
+  top: calc(var(--button-size) / 2);
+  left: calc(var(--button-size) / 2);
+}
+:host .toggletip.top {
+  transform: translate(-50%, calc(-100% - 18px));
+}
+:host .toggletip.bottom {
+  transform: translate(-50%, 18px);
+}
+:host .toggletip.right {
+  transform: translate(18px, -50%);
+}
+:host .toggletip.left {
+  transform: translate(calc(-100% - 18px), -50%);
+}
+:host .toggletip.bottom-right {
+  transform: translate(-20px, 18px);
+}
+:host .toggletip.bottom-left {
+  transform: translate(calc(-100% + 20px), 18px);
+}
+:host .toggletip.top-right {
+  transform: translate(-20px, calc(-100% - 18px));
+}
+:host .toggletip.top-left {
+  transform: translate(calc(-100% + 20px), calc(-100% - 18px));
+}
 :host .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -1113,39 +1077,4 @@
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   margin: -1px !important;
-}
-@supports not (top: anchor(bottom)) {
-  :host {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  :host .toggletip {
-    z-index: 30;
-  }
-  :host .toggletip.top.small, :host .toggletip.top.large {
-    translate: 0 -2.5rem;
-  }
-  :host .toggletip.bottom.small, :host .toggletip.bottom.large {
-    translate: 0 2.5rem;
-  }
-  :host .toggletip.right.small, :host .toggletip.right.large {
-    translate: 3.125rem 0;
-  }
-  :host .toggletip.left.small, :host .toggletip.left.large {
-    translate: -2.75rem 0;
-  }
-  :host .toggletip.bottom-right.small, :host .toggletip.bottom-right.large {
-    translate: calc(50% - 1.25rem) 2.5rem;
-  }
-  :host .toggletip.bottom-left.small, :host .toggletip.bottom-left.large {
-    translate: calc(-50% + 1.25rem) 2.5rem;
-  }
-  :host .toggletip.top-right.small, :host .toggletip.top-right.large {
-    translate: calc(50% - 1.25rem) -2.5rem;
-  }
-  :host .toggletip.top-left.small, :host .toggletip.top-left.large {
-    translate: calc(-50% + 1.25rem) -2.5rem;
-  }
 }