@nectary/components 5.6.7 → 5.8.0

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,39 @@ 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);
+          }
+        }
+        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);
+          }
+        }
       }
     }
   };
@@ -5299,10 +5324,14 @@ class Input extends NectaryElement {
       "value",
       "placeholder",
       "mask",
+      "max",
+      "min",
       "invalid",
       "disabled",
       "size",
+      "step",
       "autocomplete",
+      "readonly",
       "autofocus",
       "data-size",
       "aria-label",
@@ -5322,6 +5351,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": {
@@ -5399,7 +5433,11 @@ class Input extends NectaryElement {
       }
       case "autocomplete":
       case "maxlength":
-      case "required": {
+      case "required":
+      case "readonly":
+      case "max":
+      case "min":
+      case "step": {
         updateAttribute(this.#$input, name, newVal);
         break;
       }
@@ -5801,14 +5839,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);
@@ -5856,6 +5899,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 = [
@@ -6591,6 +6638,7 @@ class Field extends NectaryElement {
     this.shouldShowTopSection();
     this.#$label.addEventListener("click", this.#onLabelClick, options);
     this.#$tooltipSlot.addEventListener("slotchange", this.#onTooltipSlotChange, options);
+    this.#$inputSlot.addEventListener("slotchange", this.#onInputSlotChange, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -6674,6 +6722,13 @@ class Field extends NectaryElement {
   #onTooltipSlotChange = () => {
     setClass(this.#$tooltipWrapper, "empty", this.#$tooltipSlot.assignedElements().length === 0);
   };
+  #onInputSlotChange = () => {
+    const inputElement = getFirstSlotElement(this.#$inputSlot);
+    const labelText = this.#$label.textContent;
+    if (inputElement !== null && labelText != null && labelText.length > 0) {
+      inputElement.setAttribute("aria-label", "label");
+    }
+  };
 }
 defineCustomElement("sinch-field", Field);
 const doFilesSatisfySize$1 = (files, size) => {

package/field/index.js

@@ -34,6 +34,7 @@ class Field extends NectaryElement {
     this.shouldShowTopSection();
     this.#$label.addEventListener("click", this.#onLabelClick, options);
     this.#$tooltipSlot.addEventListener("slotchange", this.#onTooltipSlotChange, options);
+    this.#$inputSlot.addEventListener("slotchange", this.#onInputSlotChange, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -117,6 +118,13 @@ class Field extends NectaryElement {
   #onTooltipSlotChange = () => {
     setClass(this.#$tooltipWrapper, "empty", this.#$tooltipSlot.assignedElements().length === 0);
   };
+  #onInputSlotChange = () => {
+    const inputElement = getFirstSlotElement(this.#$inputSlot);
+    const labelText = this.#$label.textContent;
+    if (inputElement !== null && labelText != null && labelText.length > 0) {
+      inputElement.setAttribute("aria-label", "label");
+    }
+  };
 }
 defineCustomElement("sinch-field", Field);
 export {

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,39 @@ 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);
+          }
+        }
+        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);
+          }
+        }
       }
     }
   };
@@ -133,10 +158,14 @@ class Input extends NectaryElement {
       "value",
       "placeholder",
       "mask",
+      "max",
+      "min",
       "invalid",
       "disabled",
       "size",
+      "step",
       "autocomplete",
+      "readonly",
       "autofocus",
       "data-size",
       "aria-label",
@@ -156,6 +185,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": {
@@ -233,7 +267,11 @@ class Input extends NectaryElement {
       }
       case "autocomplete":
       case "maxlength":
-      case "required": {
+      case "required":
+      case "readonly":
+      case "max":
+      case "min":
+      case "step": {
         updateAttribute(this.#$input, name, newVal);
         break;
       }
@@ -635,14 +673,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);
@@ -690,6 +733,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.6.7",
+  "version": "5.8.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",