@nanoporetech-digital/components 8.13.0 → 8.14.1

package/dist/types/components/input-otp/input-otp.d.ts

@@ -113,6 +113,10 @@ export declare class InputOTP implements ComponentInterface {
      * Emitted when the input group loses focus.
      */
     nanoBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input group is cleared.
+     */
+    nanoClear: EventEmitter<void>;
     /**
      * Emitted when the input group has focus.
      */
@@ -124,6 +128,10 @@ export declare class InputOTP implements ComponentInterface {
      * Otherwise, the first empty input box or the last input if all are filled will be focused.
      */
     setFocus(index?: number): Promise<void>;
+    /**
+     * Resets the input boxes to empty values.
+     */
+    clear(): Promise<void>;
     valueChanged(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

package/dist/types/components.d.ts

@@ -2196,6 +2196,10 @@ export namespace Components {
           * @default false
          */
         "allowInvalid": boolean;
+        /**
+          * Resets the input boxes to empty values.
+         */
+        "clear": () => Promise<void>;
         /**
           * If `true`, the user cannot interact with the input.
           * @default false
@@ -4485,6 +4489,7 @@ declare global {
         "nanoChange": InputOtpChangeEventDetail;
         "nanoComplete": InputOtpCompleteEventDetail;
         "nanoBlur": FocusEvent;
+        "nanoClear": void;
         "nanoFocus": FocusEvent;
     }
     /**
@@ -7410,6 +7415,10 @@ declare namespace LocalJSX {
           * The `nanoChange` event is fired when the user modifies the input's value. Unlike the `nanoInput` event, the `nanoChange` event is only fired when changes are committed, not as the user types.  The `nanoChange` event fires when the `<nano-input-otp>` component loses focus after its value has changed.  This event will not emit when programmatically setting the `value` property.
          */
         "onNanoChange"?: (event: NanoInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
+        /**
+          * Emitted when the input group is cleared.
+         */
+        "onNanoClear"?: (event: NanoInputOtpCustomEvent<void>) => void;
         /**
           * Emitted when all input boxes have been filled with valid values.
          */

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-29T14:52:38",
+  "timestamp": "2025-10-31T16:57:11",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3369,7 +3369,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/YtJk83se/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                "path": "/builds/uSGJX_GU/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                 "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
               }
             }
@@ -18213,6 +18213,28 @@
         }
       ],
       "methods": [
+        {
+          "name": "clear",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "clear() => Promise<void>",
+          "parameters": [],
+          "docs": "Resets the input boxes to empty values.",
+          "docsTags": []
+        },
         {
           "name": "setFocus",
           "returns": {
@@ -18293,6 +18315,20 @@
           "docs": "The `nanoChange` event is fired when the user modifies the input's value.\nUnlike the `nanoInput` event, the `nanoChange` event is only fired when changes\nare committed, not as the user types.\n\nThe `nanoChange` event fires when the `<nano-input-otp>` component loses\nfocus after its value has changed.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         },
+        {
+          "event": "nanoClear",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted when the input group is cleared.",
+          "docsTags": []
+        },
         {
           "event": "nanoComplete",
           "detail": "InputOtpCompleteEventDetail",

package/hydrate/index.js

@@ -17769,6 +17769,7 @@ class InputOTP {
         this.nanoChange = createEvent(this, "nanoChange", 7);
         this.nanoComplete = createEvent(this, "nanoComplete", 7);
         this.nanoBlur = createEvent(this, "nanoBlur", 7);
+        this.nanoClear = createEvent(this, "nanoClear", 7);
         this.nanoFocus = createEvent(this, "nanoFocus", 7);
     }
     inputRefs = [];
@@ -17872,6 +17873,10 @@ class InputOTP {
      * Emitted when the input group loses focus.
      */
     nanoBlur;
+    /**
+     * Emitted when the input group is cleared.
+     */
+    nanoClear;
     /**
      * Emitted when the input group has focus.
      */
@@ -17892,6 +17897,16 @@ class InputOTP {
             this.inputRefs[tabbableIndex]?.focus();
         }
     }
+    /**
+     * Resets the input boxes to empty values.
+     */
+    async clear() {
+        this.value = '';
+        this.inputRefs.forEach((input, index) => {
+            input.value = this.inputValues[index] || '';
+        });
+        this.nanoClear.emit();
+    }
     valueChanged() {
         this.initializeValues();
         this.updateTabIndexes();
@@ -18432,31 +18447,29 @@ class InputOTP {
      * - `valid` is true if all input boxes are filled with valid values.
      */
     computeValidity() {
-        const { inputValues } = this;
         this.invalid =
             this.allowInvalid &&
                 this.inputValues.some((val) => val !== '' && !this.validKeyPattern.test(val));
         this.valid =
             this.inputValues.length === this.length &&
                 this.inputValues.every((val) => val !== '' && this.validKeyPattern.test(val));
-        inputValues.some((v) => v !== '' && !this.validKeyPattern.test(v));
     }
     render() {
         const { disabled, hasFocus, inputId, inputRefs, inputValues, length, readonly, invalid, valid, } = this;
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        return (hAsync(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
+        return (hAsync(Host, { key: '69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, hAsync("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, hAsync("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
+            } }, hAsync("div", { key: '9fcd9882d552cde88adfa7578e556155651bbb4d', class: "input-otp-container" }, hAsync("div", { key: '3e2c1a83282c08c1ccef81c4f13a895f1efeec13', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'b5d9d9f3023cca6fcf9d8a394287de2333eeff54', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            }, part: "validity-icon" }, hAsync("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, hAsync("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, hAsync("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
+            }, part: "validity-icon" }, hAsync("slot", { key: 'd4a3123b713487f579a503ea1158e73b97a35198', name: "validity-icon" }, hAsync("nano-icon", { key: '2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: '32b6883425e8f62bda344ad6f92ff63a5fef98f4', class: "input-otp-description" }, hAsync("slot", { key: '81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f' })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -18480,7 +18493,8 @@ class InputOTP {
             "previousInputValues": [32],
             "invalid": [32],
             "valid": [32],
-            "setFocus": [64]
+            "setFocus": [64],
+            "clear": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/hydrate/index.mjs

@@ -17767,6 +17767,7 @@ class InputOTP {
         this.nanoChange = createEvent(this, "nanoChange", 7);
         this.nanoComplete = createEvent(this, "nanoComplete", 7);
         this.nanoBlur = createEvent(this, "nanoBlur", 7);
+        this.nanoClear = createEvent(this, "nanoClear", 7);
         this.nanoFocus = createEvent(this, "nanoFocus", 7);
     }
     inputRefs = [];
@@ -17870,6 +17871,10 @@ class InputOTP {
      * Emitted when the input group loses focus.
      */
     nanoBlur;
+    /**
+     * Emitted when the input group is cleared.
+     */
+    nanoClear;
     /**
      * Emitted when the input group has focus.
      */
@@ -17890,6 +17895,16 @@ class InputOTP {
             this.inputRefs[tabbableIndex]?.focus();
         }
     }
+    /**
+     * Resets the input boxes to empty values.
+     */
+    async clear() {
+        this.value = '';
+        this.inputRefs.forEach((input, index) => {
+            input.value = this.inputValues[index] || '';
+        });
+        this.nanoClear.emit();
+    }
     valueChanged() {
         this.initializeValues();
         this.updateTabIndexes();
@@ -18430,31 +18445,29 @@ class InputOTP {
      * - `valid` is true if all input boxes are filled with valid values.
      */
     computeValidity() {
-        const { inputValues } = this;
         this.invalid =
             this.allowInvalid &&
                 this.inputValues.some((val) => val !== '' && !this.validKeyPattern.test(val));
         this.valid =
             this.inputValues.length === this.length &&
                 this.inputValues.every((val) => val !== '' && this.validKeyPattern.test(val));
-        inputValues.some((v) => v !== '' && !this.validKeyPattern.test(v));
     }
     render() {
         const { disabled, hasFocus, inputId, inputRefs, inputValues, length, readonly, invalid, valid, } = this;
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        return (hAsync(Host, { key: '9b64211ca6a227c5f905a76a50ca3a44eff0a96b', class: {
+        return (hAsync(Host, { key: '69c1b3c4a4cae21665bb7e3646a27a89f8d0a73b', class: {
                 'has-focus': hasFocus,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
                 'nano-invalid': invalid,
                 'nano-valid': valid,
-            } }, hAsync("div", { key: 'cc7fb4411962398f143d2dd17c40448111956e80', class: "input-otp-container" }, hAsync("div", { key: '4408d19628b34a25cb3bc39a0df1dd859700399f', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'cc45bac1e7f7675b467bae6153d9ffa586ec6655', class: {
+            } }, hAsync("div", { key: '9fcd9882d552cde88adfa7578e556155651bbb4d', class: "input-otp-container" }, hAsync("div", { key: '3e2c1a83282c08c1ccef81c4f13a895f1efeec13', class: "input-otp-group", role: "group", "aria-label": "One-time password input" }, Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && (hAsync("div", { class: "input-otp-separator" })))))), this.showValidity && (hAsync("div", { key: 'b5d9d9f3023cca6fcf9d8a394287de2333eeff54', class: {
                 'input-otp-icon': true,
                 'input-otp-icon--valid': valid,
                 'input-otp-icon--invalid': invalid,
-            }, part: "validity-icon" }, hAsync("slot", { key: '84bd77959eaa572898cd48525512d93b6406b6b6', name: "validity-icon" }, hAsync("nano-icon", { key: 'c903d61964571e006aca28afea7a911f47527d43', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: 'ddbf6145b86b48ad942227ec15ab419612e5ef41', class: "input-otp-description" }, hAsync("slot", { key: '56862b93b96aee7ecad1b36472666f94f2021a5f' })))));
+            }, part: "validity-icon" }, hAsync("slot", { key: 'd4a3123b713487f579a503ea1158e73b97a35198', name: "validity-icon" }, hAsync("nano-icon", { key: '2d7886aadaaa786f3594ace3d4fa3d2ebbdc30c3', hidden: !valid, name: "light/circle-check", class: "input-otp-valid-icon", "aria-label": "Valid input" }))))), this.slotCtrl.has('[default]') && (hAsync("div", { key: '32b6883425e8f62bda344ad6f92ff63a5fef98f4', class: "input-otp-description" }, hAsync("slot", { key: '81b5c65f7c8bab2f8bf371c03bc5a2ae455b6c3f' })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -18478,7 +18491,8 @@ class InputOTP {
             "previousInputValues": [32],
             "invalid": [32],
             "valid": [32],
-            "setFocus": [64]
+            "setFocus": [64],
+            "clear": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.13.0",
+  "version": "8.14.1",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.13.0"
+    "@nanoporetech-digital/style": "8.14.1"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",