@duetds/components 7.0.13 → 7.1.1

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -5,6 +5,7 @@ import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 const ESC_KEY = 27;
 export class DuetNotificationDrawer {
   constructor() {
@@ -46,6 +47,9 @@ export class DuetNotificationDrawer {
     inheritGlobalTheme(this);
     this.updateNotificationState();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.observer = new MutationObserver(this.updateNotificationState);
     this.observer.observe(this.element, { childList: true });
@@ -126,7 +130,8 @@ export class DuetNotificationDrawer {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -167,7 +172,8 @@ export class DuetNotificationDrawer {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -190,7 +196,8 @@ export class DuetNotificationDrawer {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -255,7 +262,8 @@ export class DuetNotificationDrawer {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -278,7 +286,8 @@ export class DuetNotificationDrawer {
           "references": {
             "DuetNotificationDrawerDirection": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
+              "id": "src/components/duet-notification-drawer/duet-notification-drawer.tsx::DuetNotificationDrawerDirection"
             }
           }
         },
@@ -314,10 +323,12 @@ export class DuetNotificationDrawer {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -336,7 +347,8 @@ export class DuetNotificationDrawer {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -358,7 +370,8 @@ export class DuetNotificationDrawer {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,32 @@
+/*!
+ * Built with Duet Design System
+ */
+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");
+  });
+});

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

@@ -0,0 +1,242 @@
+/*!
+ * Built with Duet Design System
+ */
+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>`);
+}
+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();
+    });
+    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);
+  });
+});

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

@@ -9,6 +9,7 @@ import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocale, getLocaleString, } from "../../utils/language-utils";
 import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
+import { nudge } from "../../utils/nudge";
 export class DuetNumberInput {
   constructor() {
     this.inputId = createID("DuetInput");
@@ -234,6 +235,9 @@ export class DuetNumberInput {
       this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLive", defaults: "accessibleLiveDefaults" },
@@ -307,7 +311,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -336,7 +341,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLocale": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLocale"
             }
           }
         },
@@ -499,7 +505,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -564,7 +571,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -611,7 +619,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -658,7 +667,8 @@ export class DuetNumberInput {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -681,7 +691,8 @@ export class DuetNumberInput {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -757,7 +768,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -1014,7 +1026,8 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
             }
           }
         }
@@ -1034,7 +1047,8 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
             }
           }
         }
@@ -1054,7 +1068,8 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
             }
           }
         }
@@ -1074,7 +1089,8 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
             }
           }
         }
@@ -1091,10 +1107,12 @@ export class DuetNumberInput {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -1110,7 +1128,8 @@ export class DuetNumberInput {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<number>"

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -3,6 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 /**
  * @slot heading - This is a slot for heading content.
  */
@@ -18,6 +19,9 @@ export class DuetPageHeading {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -52,7 +56,8 @@ export class DuetPageHeading {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -75,7 +80,8 @@ export class DuetPageHeading {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },