@nectary/components 5.7.0 → 5.8.1

package/bundle.js

@@ -5214,8 +5214,8 @@ class Input extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "textbox");
-    this.#internals.role = "textbox";
+    const role = this.type === "number" ? "spinbutton" : "textbox";
+    this.#setRole(role);
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
@@ -5273,7 +5273,7 @@ class Input extends NectaryElement {
   }
   // This handler mimicks the behavior (with some exceptions) of the implicit form submission logic from the HTML spec:
   // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission
-  #onKeyDown = (e) => {
+  #formSubmitHandler = () => {
     const form = this.#internals.form;
     if (form === null) {
       return;
@@ -5281,14 +5281,49 @@ class Input extends NectaryElement {
     if (form.disabled === true) {
       return;
     }
-    if (e.key === "Enter") {
-      const submitSelectors = [
-        'sinch-button[form-type="submit"]'
-      ];
-      const formSubmitters = Array.from(form.querySelectorAll(submitSelectors.join(",")));
-      const formSubmitter = formSubmitters.find((submitter) => !submitter.disabled) ?? null;
-      if (formSubmitter !== null) {
-        requestSubmitForm(form, formSubmitter);
+    const submitSelectors = [
+      'sinch-button[form-type="submit"]'
+    ];
+    const formSubmitters = Array.from(form.querySelectorAll(submitSelectors.join(",")));
+    const formSubmitter = formSubmitters.find((submitter) => !submitter.disabled) ?? null;
+    if (formSubmitter !== null) {
+      requestSubmitForm(form, formSubmitter);
+    }
+  };
+  #onKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter": {
+        this.#formSubmitHandler();
+        break;
+      }
+      case "Home": {
+        if (this.type === "number") {
+          const min = getAttribute(this, "min");
+          if (min !== null && !isNaN(parseFloat(min))) {
+            this.#$input.value = min;
+            setFormValue(this.#internals, min);
+            this.dispatchEvent(
+              new CustomEvent("-change", {
+                detail: min
+              })
+            );
+          }
+        }
+        break;
+      }
+      case "End": {
+        if (this.type === "number") {
+          const max = getAttribute(this, "max");
+          if (max !== null && !isNaN(parseFloat(max))) {
+            this.#$input.value = max;
+            setFormValue(this.#internals, max);
+            this.dispatchEvent(
+              new CustomEvent("-change", {
+                detail: max
+              })
+            );
+          }
+        }
       }
     }
   };
@@ -5306,6 +5341,7 @@ class Input extends NectaryElement {
       "size",
       "step",
       "autocomplete",
+      "readonly",
       "autofocus",
       "data-size",
       "aria-label",
@@ -5325,6 +5361,11 @@ class Input extends NectaryElement {
       case "type": {
         updateLiteralAttribute(this.#$input, inputTypes, "type", newVal);
         updateAttribute(this.#$input, "spellcheck", newVal === "password" ? "false" : null);
+        const role = newVal === "number" ? "spinbutton" : "textbox";
+        this.#setRole(role);
+        if (newVal === "number") {
+          this.#resetAriaPlaceholder();
+        }
         break;
       }
       case "value": {
@@ -5403,6 +5444,7 @@ class Input extends NectaryElement {
       case "autocomplete":
       case "maxlength":
       case "required":
+      case "readonly":
       case "max":
       case "min":
       case "step": {
@@ -5807,14 +5849,19 @@ class Input extends NectaryElement {
     if (this.#maskSymbols === null) {
       const value = this.placeholder;
       this.#$input.placeholder = value ?? "";
-      this.#internals.ariaPlaceholder = value ?? "";
-      updateAttribute(this, "aria-placeholder", value);
+      if (this.type !== "number") {
+        this.#internals.ariaPlaceholder = value ?? "";
+        updateAttribute(this, "aria-placeholder", value);
+      }
     } else {
-      updateAttribute(this, "aria-placeholder", null);
       this.#$input.placeholder = "";
-      this.#internals.ariaPlaceholder = "";
+      this.#resetAriaPlaceholder();
     }
   }
+  #resetAriaPlaceholder() {
+    updateAttribute(this, "aria-placeholder", null);
+    this.#internals.ariaPlaceholder = "";
+  }
   #onIconSlotChange = () => {
     const isEmpty = this.#$iconSlot.assignedElements().length === 0;
     setClass(this.#$iconWrapper, "empty", isEmpty);
@@ -5862,6 +5909,10 @@ class Input extends NectaryElement {
   #onWheelReactHandler = (e) => {
     getReactEventHandler(this, "on-wheel")?.(e);
   };
+  #setRole = (role) => {
+    this.setAttribute("role", role);
+    this.#internals.role = role;
+  };
 }
 defineCustomElement("sinch-input", Input);
 const orientationValues = [

package/input/index.js

@@ -1,5 +1,5 @@
 import { Context, subscribeContext } from "../utils/context.js";
-import { getBooleanAttribute, updateAttribute, isAttrEqual, isAttrTrue, updateBooleanAttribute, updateLiteralAttribute, getAttribute, getLiteralAttribute, setClass } from "../utils/dom.js";
+import { getBooleanAttribute, getAttribute, updateAttribute, isAttrEqual, isAttrTrue, updateBooleanAttribute, updateLiteralAttribute, getLiteralAttribute, setClass } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { isElementFocused } from "../utils/slot.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
@@ -48,8 +48,8 @@ class Input extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute("role", "textbox");
-    this.#internals.role = "textbox";
+    const role = this.type === "number" ? "spinbutton" : "textbox";
+    this.#setRole(role);
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
@@ -107,7 +107,7 @@ class Input extends NectaryElement {
   }
   // This handler mimicks the behavior (with some exceptions) of the implicit form submission logic from the HTML spec:
   // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission
-  #onKeyDown = (e) => {
+  #formSubmitHandler = () => {
     const form = this.#internals.form;
     if (form === null) {
       return;
@@ -115,14 +115,49 @@ class Input extends NectaryElement {
     if (form.disabled === true) {
       return;
     }
-    if (e.key === "Enter") {
-      const submitSelectors = [
-        'sinch-button[form-type="submit"]'
-      ];
-      const formSubmitters = Array.from(form.querySelectorAll(submitSelectors.join(",")));
-      const formSubmitter = formSubmitters.find((submitter) => !submitter.disabled) ?? null;
-      if (formSubmitter !== null) {
-        requestSubmitForm(form, formSubmitter);
+    const submitSelectors = [
+      'sinch-button[form-type="submit"]'
+    ];
+    const formSubmitters = Array.from(form.querySelectorAll(submitSelectors.join(",")));
+    const formSubmitter = formSubmitters.find((submitter) => !submitter.disabled) ?? null;
+    if (formSubmitter !== null) {
+      requestSubmitForm(form, formSubmitter);
+    }
+  };
+  #onKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter": {
+        this.#formSubmitHandler();
+        break;
+      }
+      case "Home": {
+        if (this.type === "number") {
+          const min = getAttribute(this, "min");
+          if (min !== null && !isNaN(parseFloat(min))) {
+            this.#$input.value = min;
+            setFormValue(this.#internals, min);
+            this.dispatchEvent(
+              new CustomEvent("-change", {
+                detail: min
+              })
+            );
+          }
+        }
+        break;
+      }
+      case "End": {
+        if (this.type === "number") {
+          const max = getAttribute(this, "max");
+          if (max !== null && !isNaN(parseFloat(max))) {
+            this.#$input.value = max;
+            setFormValue(this.#internals, max);
+            this.dispatchEvent(
+              new CustomEvent("-change", {
+                detail: max
+              })
+            );
+          }
+        }
       }
     }
   };
@@ -140,6 +175,7 @@ class Input extends NectaryElement {
       "size",
       "step",
       "autocomplete",
+      "readonly",
       "autofocus",
       "data-size",
       "aria-label",
@@ -159,6 +195,11 @@ class Input extends NectaryElement {
       case "type": {
         updateLiteralAttribute(this.#$input, inputTypes, "type", newVal);
         updateAttribute(this.#$input, "spellcheck", newVal === "password" ? "false" : null);
+        const role = newVal === "number" ? "spinbutton" : "textbox";
+        this.#setRole(role);
+        if (newVal === "number") {
+          this.#resetAriaPlaceholder();
+        }
         break;
       }
       case "value": {
@@ -237,6 +278,7 @@ class Input extends NectaryElement {
       case "autocomplete":
       case "maxlength":
       case "required":
+      case "readonly":
       case "max":
       case "min":
       case "step": {
@@ -641,14 +683,19 @@ class Input extends NectaryElement {
     if (this.#maskSymbols === null) {
       const value = this.placeholder;
       this.#$input.placeholder = value ?? "";
-      this.#internals.ariaPlaceholder = value ?? "";
-      updateAttribute(this, "aria-placeholder", value);
+      if (this.type !== "number") {
+        this.#internals.ariaPlaceholder = value ?? "";
+        updateAttribute(this, "aria-placeholder", value);
+      }
     } else {
-      updateAttribute(this, "aria-placeholder", null);
       this.#$input.placeholder = "";
-      this.#internals.ariaPlaceholder = "";
+      this.#resetAriaPlaceholder();
     }
   }
+  #resetAriaPlaceholder() {
+    updateAttribute(this, "aria-placeholder", null);
+    this.#internals.ariaPlaceholder = "";
+  }
   #onIconSlotChange = () => {
     const isEmpty = this.#$iconSlot.assignedElements().length === 0;
     setClass(this.#$iconWrapper, "empty", isEmpty);
@@ -696,6 +743,10 @@ class Input extends NectaryElement {
   #onWheelReactHandler = (e) => {
     getReactEventHandler(this, "on-wheel")?.(e);
   };
+  #setRole = (role) => {
+    this.setAttribute("role", role);
+    this.#internals.role = role;
+  };
 }
 defineCustomElement("sinch-input", Input);
 export {

package/input/types.d.ts

@@ -28,6 +28,18 @@ export type TSinchInputProps = {
     autofocus?: boolean;
     /** Size, `m` by default */
     size?: TSinchSize;
+    /** Whether or not the input is in readonly mode **/
+    readonly?: boolean;
+    /** Whether or not the input is required **/
+    required?: boolean;
+    /** Maximum length of the input value */
+    maxlength?: number | null;
+    /** Maximum numeric value for type 'number' */
+    max?: number | null;
+    /** Minimum numeric value for type 'number' */
+    min?: number | null;
+    /** Step value for type 'number' */
+    step?: number | null;
     selectionStart?: number | null;
     selectionEnd?: number | null;
     selectionDirection?: 'forward' | 'backward' | 'none' | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.7.0",
+  "version": "5.8.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",