@duetds/components 8.0.5 → 8.1.0

package/lib/collection/components/duet-number-input/duet-number-input-negative.e2e.js

@@ -3,30 +3,30 @@
  */
 import { createComponent } from "./duet-number-input.e2e";
 describe("duet-number-input - negative values", () => {
-  it("supports negative min and max values", async () => {
-    const page = await createComponent({ value: "-2 C", step: 1, min: -3, max: -1, unit: "C" });
-    const numberInput = await page.find("duet-number-input");
-    const input = await numberInput.find("duet-input");
-    const subtract = await numberInput.find(".duet-number-button-subtract");
-    const add = await numberInput.find(".duet-number-button-add");
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    expect(await input.getProperty("value")).toBe("−2 C");
-    await add.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toBe("−1 C");
-    // we've hit the max, so should still be 3
-    await add.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toBe("−1 C");
-    await subtract.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toBe("−2 C");
-    await subtract.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toBe("−3 C");
-    // we've hit the min, so should be still be 1
-    await subtract.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toBe("−3 C");
-  });
+    it("supports negative min and max values", async () => {
+        const page = await createComponent({ value: "-2 C", step: 1, min: -3, max: -1, unit: "C" });
+        const numberInput = await page.find("duet-number-input");
+        const input = await numberInput.find("duet-input");
+        const subtract = await numberInput.find(".duet-number-button-subtract");
+        const add = await numberInput.find(".duet-number-button-add");
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        expect(await input.getProperty("value")).toBe("−2 C");
+        await add.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toBe("−1 C");
+        // we've hit the max, so should still be 3
+        await add.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toBe("−1 C");
+        await subtract.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toBe("−2 C");
+        await subtract.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toBe("−3 C");
+        // we've hit the min, so should be still be 1
+        await subtract.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toBe("−3 C");
+    });
 });

package/lib/collection/components/duet-number-input/duet-number-input.a11y.e2e.js

@@ -3,12 +3,12 @@
  */
 import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
 describe("[a11y] duet-number-input", () => {
-  it("should render an accessible component", async () => {
-    const result = await testWithAxe(`
+    it("should render an accessible component", async () => {
+        const result = await testWithAxe(`
       <duet-number-input label="Sijoitettava pääoma" value="100000" min="50000" max="500000" step="5000" unit="€">
       </duet-number-input>
       `, axeRunOptions);
-    expect(result).not.toBeNull();
-    expect(formatViolations(result.violations)).toEqual([]);
-  });
+        expect(result).not.toBeNull();
+        expect(formatViolations(result.violations)).toEqual([]);
+    });
 });

package/lib/collection/components/duet-number-input/duet-number-input.e2e.js

@@ -3,240 +3,240 @@
  */
 import { createPage } from "../../utils/test-utils";
 export function createComponent(props = {}) {
-  function camelToKebab(str) {
-    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-  }
-  const attrs = Object.entries(props)
-    .map(([attr, value]) => `${camelToKebab(attr)}="${value}"`)
-    .join(" ");
-  return createPage(`<duet-number-input ${attrs}></duet-number-input>`);
+    function camelToKebab(str) {
+        return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    const attrs = Object.entries(props)
+        .map(([attr, value]) => `${camelToKebab(attr)}="${value}"`)
+        .join(" ");
+    return createPage(`<duet-number-input ${attrs}></duet-number-input>`);
 }
 describe("duet-number-input", () => {
-  it("should render a number-input", async () => {
-    const page = await createComponent();
-    const component = await page.find("duet-number-input");
-    expect(component).not.toBeNull();
-    expect(component).toHaveClass("hydrated");
-  });
-  it("should provide a property that switches the theme", async () => {
-    const page = await createComponent({ theme: "turva" });
-    const element = await page.find("duet-number-input");
-    expect(element).toHaveClass("duet-theme-turva");
-  });
-  it("should provide a property that expands the input to fill 100% width", async () => {
-    const page = await createComponent({ expand: true });
-    const element = await page.find("duet-number-input");
-    expect(element).toHaveClass("duet-expand");
-  });
-  it("should provide a property that sets the max amount", async () => {
-    const page = await createComponent({ max: 10 });
-    const element = await page.find("duet-number-input duet-input");
-    expect(element.getAttribute("aria-valuemax")).toEqual("10");
-  });
-  it("should provide a property that sets the min amount", async () => {
-    const page = await createComponent({ min: 1 });
-    const element = await page.find("duet-number-input duet-input");
-    expect(element.getAttribute("aria-valuemin")).toEqual("1");
-  });
-  it("supports not setting an initial value", async () => {
-    const MIN_VALUE = 100;
-    const page = await createComponent({ min: MIN_VALUE, step: 50 });
-    const numberInput = await page.find("duet-number-input");
-    const spy = await numberInput.spyOnEvent("duetChange");
-    // input should initially be empty
-    const input = await numberInput.find("duet-input");
-    expect(await input.getProperty("value")).toBe("");
-    // subtract button should be disabled
-    const subtractButton = await numberInput.find(".duet-number-button-subtract");
-    expect(subtractButton.getAttribute("aria-disabled")).toBe("true");
-    // add button should be enabled
-    const addButton = await numberInput.find(".duet-number-button-add");
-    expect(addButton.getAttribute("aria-disabled")).toBe("false");
-    await addButton.click();
-    await page.waitForChanges();
-    // input value should now be set to min + unit
-    expect(await input.getProperty("value")).toBe(`${MIN_VALUE} €`);
-    // and should have received a single input event
-    expect(spy).toHaveReceivedEventTimes(1);
-    expect(spy.lastEvent.detail).toEqual(expect.objectContaining({
-      value: MIN_VALUE.toString(),
-      valueAsNumber: MIN_VALUE,
-      component: "duet-number-input",
-    }));
-  });
-  it("support clearing the input with backspace key", async () => {
-    const page = await createComponent({ value: "50", step: 50 });
-    const numberInput = await page.find("duet-number-input");
-    const input = await numberInput.find("duet-input");
-    const spyInput = await numberInput.spyOnEvent("duetInput");
-    const spyChange = await numberInput.spyOnEvent("duetChange");
-    // focus and clear input
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    await page.keyboard.press("Backspace");
-    await page.waitForChanges();
-    // input's value should be empty
-    // and should have received a single input event
-    expect(await input.getProperty("value")).toBe("");
-    expect(spyInput).toHaveReceivedEventTimes(1);
-    expect(spyInput.lastEvent.detail).toEqual(expect.objectContaining({
-      value: null,
-      valueAsNumber: null,
-      component: "duet-number-input",
-    }));
-    // when blurring input, we should get a single change event
-    await page.keyboard.press("Tab");
-    expect(spyChange).toHaveReceivedEventTimes(1);
-    expect(spyChange.lastEvent.detail).toEqual(expect.objectContaining({
-      value: null,
-      valueAsNumber: null,
-      component: "duet-number-input",
-    }));
-  });
-  it("supports stepping of the value", async () => {
-    const page = await createComponent({ value: "50", step: 50 });
-    const numberInput = await page.find("duet-number-input");
-    const input = await numberInput.find("duet-input");
-    const subtract = await numberInput.find(".duet-number-button-subtract");
-    const add = await numberInput.find(".duet-number-button-add");
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    // increment via up arrow
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("100 €");
-    // increment via right arrow
-    await page.keyboard.press("ArrowRight");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("150 €");
-    // increment via + button
-    await add.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("200 €");
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    // decrement via down arrow
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("150 €");
-    // decrement via left arrow
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("100 €");
-    // decrement via - button
-    await subtract.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("50 €");
-  });
-  it("supports min and max values", async () => {
-    const page = await createComponent({ value: "2", step: 1, min: 1, max: 3 });
-    const numberInput = await page.find("duet-number-input");
-    const input = await numberInput.find("duet-input");
-    const subtract = await numberInput.find(".duet-number-button-subtract");
-    const add = await numberInput.find(".duet-number-button-add");
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    await add.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("3 €");
-    // we've hit the max, so should still be 3
-    await add.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("3 €");
-    await subtract.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("2 €");
-    await subtract.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("1 €");
-    // we've hit the min, so should be still be 1
-    await subtract.click();
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("1 €");
-  });
-  it("rounds value to nearest step on blur in constrained mode", async () => {
-    const page = await createComponent({ value: "50", step: 50 });
-    const numberInput = await page.find("duet-number-input");
-    const input = await numberInput.find("duet-input");
-    // focus and clear input
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    await page.keyboard.press("Backspace");
-    await page.waitForChanges();
-    // enter value that is not a multiple of step
-    await page.keyboard.type("75", { delay: 100 });
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("100 €");
-  });
-  it("does not round values on blur when rounding disabled", async () => {
-    const page = await createComponent({ value: "50", step: 50, rounding: false });
-    const numberInput = await page.find("duet-number-input");
-    const input = await numberInput.find("duet-input");
-    // focus and clear input
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    await page.keyboard.press("Backspace");
-    await page.waitForChanges();
-    // enter value that is not a multiple of step
-    await page.keyboard.type("73", { delay: 100 });
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("73 €");
-  });
-  it("increments to nearest multiple of step when rounding disabled", async () => {
-    const page = await createComponent({ value: "100", step: 100, rounding: false });
-    const numberInput = await page.find("duet-number-input");
-    const input = await numberInput.find("duet-input");
-    // focus and clear input
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    await page.keyboard.press("Backspace");
-    await page.waitForChanges();
-    // enter value that is not a multiple of step
-    await page.keyboard.type("199", { delay: 100 });
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("200 €");
-    // enter value that is not a multiple of step
-    await page.keyboard.press("Backspace");
-    await page.keyboard.type("101", { delay: 100 });
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("200 €");
-  });
-  it("decrements to nearest multiple of step when rounding disabled", async () => {
-    const page = await createComponent({ value: "100", step: 100, rounding: false });
-    const numberInput = await page.find("duet-number-input");
-    const input = await numberInput.find("duet-input");
-    // focus and clear input
-    await page.$eval("duet-number-input", (el) => el.setFocus());
-    await page.keyboard.press("Backspace");
-    await page.waitForChanges();
-    // enter value that is not a multiple of step
-    await page.keyboard.type("101", { delay: 100 });
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("100 €");
-    // enter value that is not a multiple of step
-    await page.keyboard.press("Backspace");
-    await page.keyboard.type("199", { delay: 100 });
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    expect(await input.getProperty("value")).toEqualText("100 €");
-  });
-  it("should provide a method to get the initial numeric value of the input", async () => {
-    const page = await createComponent({ value: "50" });
-    const initialNumericValue = await page.evaluate(() => {
-      const element = document.querySelector("duet-number-input");
-      return element.getValueAsNumber();
+    it("should render a number-input", async () => {
+        const page = await createComponent();
+        const component = await page.find("duet-number-input");
+        expect(component).not.toBeNull();
+        expect(component).toHaveClass("hydrated");
     });
-    expect(typeof initialNumericValue).toBe("number");
-    expect(initialNumericValue).toBe(50);
-  });
-  it("should provide a method to get the current numeric value of the input", async () => {
-    const page = await createComponent({ value: "50", step: 50 });
-    const add = await page.find(".duet-number-button-add");
-    await add.click();
-    await page.waitForChanges();
-    const currentNumericValue = await page.evaluate(() => {
-      const element = document.querySelector("duet-number-input");
-      return element.getValueAsNumber();
+    it("should provide a property that switches the theme", async () => {
+        const page = await createComponent({ theme: "turva" });
+        const element = await page.find("duet-number-input");
+        expect(element).toHaveClass("duet-theme-turva");
+    });
+    it("should provide a property that expands the input to fill 100% width", async () => {
+        const page = await createComponent({ expand: true });
+        const element = await page.find("duet-number-input");
+        expect(element).toHaveClass("duet-expand");
+    });
+    it("should provide a property that sets the max amount", async () => {
+        const page = await createComponent({ max: 10 });
+        const element = await page.find("duet-number-input duet-input");
+        expect(element.getAttribute("aria-valuemax")).toEqual("10");
+    });
+    it("should provide a property that sets the min amount", async () => {
+        const page = await createComponent({ min: 1 });
+        const element = await page.find("duet-number-input duet-input");
+        expect(element.getAttribute("aria-valuemin")).toEqual("1");
+    });
+    it("supports not setting an initial value", async () => {
+        const MIN_VALUE = 100;
+        const page = await createComponent({ min: MIN_VALUE, step: 50 });
+        const numberInput = await page.find("duet-number-input");
+        const spy = await numberInput.spyOnEvent("duetChange");
+        // input should initially be empty
+        const input = await numberInput.find("duet-input");
+        expect(await input.getProperty("value")).toBe("");
+        // subtract button should be disabled
+        const subtractButton = await numberInput.find(".duet-number-button-subtract");
+        expect(subtractButton.getAttribute("aria-disabled")).toBe("true");
+        // add button should be enabled
+        const addButton = await numberInput.find(".duet-number-button-add");
+        expect(addButton.getAttribute("aria-disabled")).toBe("false");
+        await addButton.click();
+        await page.waitForChanges();
+        // input value should now be set to min + unit
+        expect(await input.getProperty("value")).toBe(`${MIN_VALUE} €`);
+        // and should have received a single input event
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy.lastEvent.detail).toEqual(expect.objectContaining({
+            value: MIN_VALUE.toString(),
+            valueAsNumber: MIN_VALUE,
+            component: "duet-number-input",
+        }));
+    });
+    it("support clearing the input with backspace key", async () => {
+        const page = await createComponent({ value: "50", step: 50 });
+        const numberInput = await page.find("duet-number-input");
+        const input = await numberInput.find("duet-input");
+        const spyInput = await numberInput.spyOnEvent("duetInput");
+        const spyChange = await numberInput.spyOnEvent("duetChange");
+        // focus and clear input
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        await page.keyboard.press("Backspace");
+        await page.waitForChanges();
+        // input's value should be empty
+        // and should have received a single input event
+        expect(await input.getProperty("value")).toBe("");
+        expect(spyInput).toHaveReceivedEventTimes(1);
+        expect(spyInput.lastEvent.detail).toEqual(expect.objectContaining({
+            value: null,
+            valueAsNumber: null,
+            component: "duet-number-input",
+        }));
+        // when blurring input, we should get a single change event
+        await page.keyboard.press("Tab");
+        expect(spyChange).toHaveReceivedEventTimes(1);
+        expect(spyChange.lastEvent.detail).toEqual(expect.objectContaining({
+            value: null,
+            valueAsNumber: null,
+            component: "duet-number-input",
+        }));
+    });
+    it("supports stepping of the value", async () => {
+        const page = await createComponent({ value: "50", step: 50 });
+        const numberInput = await page.find("duet-number-input");
+        const input = await numberInput.find("duet-input");
+        const subtract = await numberInput.find(".duet-number-button-subtract");
+        const add = await numberInput.find(".duet-number-button-add");
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        // increment via up arrow
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("100 €");
+        // increment via right arrow
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("150 €");
+        // increment via + button
+        await add.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("200 €");
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        // decrement via down arrow
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("150 €");
+        // decrement via left arrow
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("100 €");
+        // decrement via - button
+        await subtract.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("50 €");
+    });
+    it("supports min and max values", async () => {
+        const page = await createComponent({ value: "2", step: 1, min: 1, max: 3 });
+        const numberInput = await page.find("duet-number-input");
+        const input = await numberInput.find("duet-input");
+        const subtract = await numberInput.find(".duet-number-button-subtract");
+        const add = await numberInput.find(".duet-number-button-add");
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        await add.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("3 €");
+        // we've hit the max, so should still be 3
+        await add.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("3 €");
+        await subtract.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("2 €");
+        await subtract.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("1 €");
+        // we've hit the min, so should be still be 1
+        await subtract.click();
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("1 €");
+    });
+    it("rounds value to nearest step on blur in constrained mode", async () => {
+        const page = await createComponent({ value: "50", step: 50 });
+        const numberInput = await page.find("duet-number-input");
+        const input = await numberInput.find("duet-input");
+        // focus and clear input
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        await page.keyboard.press("Backspace");
+        await page.waitForChanges();
+        // enter value that is not a multiple of step
+        await page.keyboard.type("75", { delay: 100 });
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("100 €");
+    });
+    it("does not round values on blur when rounding disabled", async () => {
+        const page = await createComponent({ value: "50", step: 50, rounding: false });
+        const numberInput = await page.find("duet-number-input");
+        const input = await numberInput.find("duet-input");
+        // focus and clear input
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        await page.keyboard.press("Backspace");
+        await page.waitForChanges();
+        // enter value that is not a multiple of step
+        await page.keyboard.type("73", { delay: 100 });
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("73 €");
+    });
+    it("increments to nearest multiple of step when rounding disabled", async () => {
+        const page = await createComponent({ value: "100", step: 100, rounding: false });
+        const numberInput = await page.find("duet-number-input");
+        const input = await numberInput.find("duet-input");
+        // focus and clear input
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        await page.keyboard.press("Backspace");
+        await page.waitForChanges();
+        // enter value that is not a multiple of step
+        await page.keyboard.type("199", { delay: 100 });
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("200 €");
+        // enter value that is not a multiple of step
+        await page.keyboard.press("Backspace");
+        await page.keyboard.type("101", { delay: 100 });
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("200 €");
+    });
+    it("decrements to nearest multiple of step when rounding disabled", async () => {
+        const page = await createComponent({ value: "100", step: 100, rounding: false });
+        const numberInput = await page.find("duet-number-input");
+        const input = await numberInput.find("duet-input");
+        // focus and clear input
+        await page.$eval("duet-number-input", (el) => el.setFocus());
+        await page.keyboard.press("Backspace");
+        await page.waitForChanges();
+        // enter value that is not a multiple of step
+        await page.keyboard.type("101", { delay: 100 });
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("100 €");
+        // enter value that is not a multiple of step
+        await page.keyboard.press("Backspace");
+        await page.keyboard.type("199", { delay: 100 });
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toEqualText("100 €");
+    });
+    it("should provide a method to get the initial numeric value of the input", async () => {
+        const page = await createComponent({ value: "50" });
+        const initialNumericValue = await page.evaluate(() => {
+            const element = document.querySelector("duet-number-input");
+            return element.getValueAsNumber();
+        });
+        expect(typeof initialNumericValue).toBe("number");
+        expect(initialNumericValue).toBe(50);
+    });
+    it("should provide a method to get the current numeric value of the input", async () => {
+        const page = await createComponent({ value: "50", step: 50 });
+        const add = await page.find(".duet-number-button-add");
+        await add.click();
+        await page.waitForChanges();
+        const currentNumericValue = await page.evaluate(() => {
+            const element = document.querySelector("duet-number-input");
+            return element.getValueAsNumber();
+        });
+        expect(typeof currentNumericValue).toBe("number");
+        expect(currentNumericValue).toBe(100);
     });
-    expect(typeof currentNumericValue).toBe("number");
-    expect(currentNumericValue).toBe(100);
-  });
 });