@lukso/web-components 1.187.0 → 1.188.0

package/dist/components/lukso-alert/index.cjs

@@ -28,6 +28,7 @@ exports.LuksoAlert = class LuksoAlert extends index.TailwindStyledElement(style)
     this.hasIcon = false;
     this.title = "";
     this.description = "";
+    this.isFullWidth = false;
     this.styles = tailwindVariants.tv({
       base: "rounded-8 p-4 flex gap-3 items-center",
       variants: {
@@ -36,6 +37,9 @@ exports.LuksoAlert = class LuksoAlert extends index.TailwindStyledElement(style)
           warning: "bg-honey-92 text-yellow-25",
           error: "bg-red-95 text-red-55",
           success: "bg-green-95 text-green-45"
+        },
+        isFullWidth: {
+          true: "w-full"
         }
       }
     });
@@ -54,7 +58,8 @@ exports.LuksoAlert = class LuksoAlert extends index.TailwindStyledElement(style)
   }
   render() {
     const styles = this.styles({
-      variant: this.variant
+      variant: this.variant,
+      isFullWidth: this.isFullWidth
     });
     return lit.html`
       <div class=${styles}>
@@ -86,6 +91,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String })
 ], exports.LuksoAlert.prototype, "description", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "is-full-width", reflect: true })
+], exports.LuksoAlert.prototype, "isFullWidth", 2);
 exports.LuksoAlert = __decorateClass([
   safeCustomElement.safeCustomElement("lukso-alert")
 ], exports.LuksoAlert);

package/dist/components/lukso-alert/index.d.ts

@@ -8,6 +8,7 @@ export declare class LuksoAlert extends LuksoAlert_base {
     hasIcon: boolean;
     title: string | undefined;
     description: string | undefined;
+    isFullWidth: boolean;
     private styles;
     private get icon();
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/lukso-alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-alert/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AAGpC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;;AAEnE;;GAEG;AACH,qBACa,UAAW,SAAQ,eAA4B;IAE1D,OAAO,EAAE,YAAY,GAAG,SAAS,CAAS;IAG1C,OAAO,UAAQ;IAGf,KAAK,EAAE,MAAM,GAAG,SAAS,CAAK;IAG9B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAK;IAEpC,OAAO,CAAC,MAAM,CAUZ;IAEF,OAAO,KAAK,IAAI,GAWf;IAED,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-alert/index.ts"],"names":[],"mappings":"AAMA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AAGpC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;;AAEnE;;GAEG;AACH,qBACa,UAAW,SAAQ,eAA4B;IAE1D,OAAO,EAAE,YAAY,GAAG,SAAS,CAAS;IAG1C,OAAO,UAAQ;IAGf,KAAK,EAAE,MAAM,GAAG,SAAS,CAAK;IAG9B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAK;IAGpC,WAAW,UAAQ;IAEnB,OAAO,CAAC,MAAM,CAaZ;IAEF,OAAO,KAAK,IAAI,GAWf;IAED,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/lukso-alert/index.js

@@ -24,6 +24,7 @@ let LuksoAlert = class extends TailwindStyledElement(style) {
     this.hasIcon = false;
     this.title = "";
     this.description = "";
+    this.isFullWidth = false;
     this.styles = tv({
       base: "rounded-8 p-4 flex gap-3 items-center",
       variants: {
@@ -32,6 +33,9 @@ let LuksoAlert = class extends TailwindStyledElement(style) {
           warning: "bg-honey-92 text-yellow-25",
           error: "bg-red-95 text-red-55",
           success: "bg-green-95 text-green-45"
+        },
+        isFullWidth: {
+          true: "w-full"
         }
       }
     });
@@ -50,7 +54,8 @@ let LuksoAlert = class extends TailwindStyledElement(style) {
   }
   render() {
     const styles = this.styles({
-      variant: this.variant
+      variant: this.variant,
+      isFullWidth: this.isFullWidth
     });
     return html`
       <div class=${styles}>
@@ -82,6 +87,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], LuksoAlert.prototype, "description", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "is-full-width", reflect: true })
+], LuksoAlert.prototype, "isFullWidth", 2);
 LuksoAlert = __decorateClass([
   safeCustomElement("lukso-alert")
 ], LuksoAlert);

package/dist/components/lukso-alert/lukso-alert.stories.d.ts

@@ -12,4 +12,6 @@ export declare const ErrorAlert: any;
 export declare const SuccessAlert: any;
 /** Example of alert without icon.  */
 export declare const AlertWithoutIcon: any;
+/** Example of a full-width alert. */
+export declare const FullWidthAlert: any;
 //# sourceMappingURL=lukso-alert.stories.d.ts.map

package/dist/components/lukso-alert/lukso-alert.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-alert.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-alert/lukso-alert.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,8DAA8D;AAC9D,QAAA,MAAM,IAAI,EAAE,IA4DX,CAAA;AAED,eAAe,IAAI,CAAA;AAUnB,gCAAgC;AAChC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAAoB,CAAA;AAM7C,iCAAiC;AACjC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAAoB,CAAA;AAM7C,sCAAsC;AACtC,eAAO,MAAM,gBAAgB,KAAoB,CAAA"}
+{"version":3,"file":"lukso-alert.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-alert/lukso-alert.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,8DAA8D;AAC9D,QAAA,MAAM,IAAI,EAAE,IA0EX,CAAA;AAED,eAAe,IAAI,CAAA;AAWnB,gCAAgC;AAChC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAAoB,CAAA;AAM7C,iCAAiC;AACjC,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,mCAAmC;AACnC,eAAO,MAAM,YAAY,KAAoB,CAAA;AAM7C,sCAAsC;AACtC,eAAO,MAAM,gBAAgB,KAAoB,CAAA;AAKjD,qCAAqC;AACrC,eAAO,MAAM,cAAc,KAAoB,CAAA"}

package/dist/components/lukso-alert/style.css.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const style = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n:host {\n  display: flex;\n}\n";
+const style = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n:host {\n  display: flex;\n}\n\n:host([is-full-width]) {\n  width: 100%;\n}\n";
 
 module.exports = style;

package/dist/components/lukso-alert/style.css.js

@@ -1,3 +1,3 @@
-const style = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n:host {\n  display: flex;\n}\n";
+const style = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n:host {\n  display: flex;\n}\n\n:host([is-full-width]) {\n  width: 100%;\n}\n";
 
 export { style as default };

package/dist/components/lukso-input/index.cjs

@@ -17,6 +17,7 @@ require('../../shared/assets/index.cjs');
 const cn = require('../../shared/tools/cn.cjs');
 require('viem');
 const style = require('./style.css.cjs');
+const rules = require('./rules.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -44,6 +45,11 @@ exports.LuksoInput = class LuksoInput extends index.TailwindStyledElement(style)
     this.rightIcon = "";
     this.isRightIconClickable = false;
     this.keepFocusOnEscape = false;
+    this.noComma = false;
+    this.noLeadingDot = false;
+    this.onlyOneDot = false;
+    this.onlyNumbersAndDot = false;
+    this.noDecimal = false;
     this.hasFocus = false;
     this.hasHighlight = false;
     this.inputStyles = tailwindVariants.tv({
@@ -258,6 +264,17 @@ exports.LuksoInput = class LuksoInput extends index.TailwindStyledElement(style)
   }
   async handleInput(event) {
     const target = event.target;
+    if (this.activeRules.length > 0) {
+      const sanitized = this.activeRules.reduce(
+        (val, rule) => rule.sanitize(val),
+        target.value
+      );
+      if (sanitized !== target.value) {
+        const cursor = target.selectionStart ?? sanitized.length;
+        target.value = sanitized;
+        target.setSelectionRange(cursor, cursor);
+      }
+    }
     this.value = target?.value;
     await this.updateComplete;
     const changeEvent = new CustomEvent("on-input", {
@@ -286,7 +303,26 @@ exports.LuksoInput = class LuksoInput extends index.TailwindStyledElement(style)
       this.blur();
     }
   }
+  get activeRules() {
+    const rules$1 = [];
+    if (this.noComma) rules$1.push(rules.noComma);
+    if (this.noLeadingDot) rules$1.push(rules.noLeadingDot);
+    if (this.onlyOneDot) rules$1.push(rules.onlyOneDot);
+    if (this.onlyNumbersAndDot) rules$1.push(rules.onlyNumbersAndDot);
+    if (this.noDecimal) rules$1.push(rules.noDecimal);
+    return rules$1;
+  }
   async handleKeyDown(event) {
+    if (event.key.length === 1 && this.activeRules.length > 0) {
+      const input = event.target;
+      const isValid = this.activeRules.every(
+        (rule) => rule.validate(input, event.key)
+      );
+      if (!isValid) {
+        event.preventDefault();
+        return;
+      }
+    }
     await this.updateComplete;
     const target = event.target;
     const keyEvent = new CustomEvent("on-key-down", {
@@ -464,6 +500,21 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], exports.LuksoInput.prototype, "keepFocusOnEscape", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "no-comma" })
+], exports.LuksoInput.prototype, "noComma", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "no-leading-dot" })
+], exports.LuksoInput.prototype, "noLeadingDot", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "only-one-dot" })
+], exports.LuksoInput.prototype, "onlyOneDot", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "only-numbers-and-dot" })
+], exports.LuksoInput.prototype, "onlyNumbersAndDot", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "no-decimal" })
+], exports.LuksoInput.prototype, "noDecimal", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.LuksoInput.prototype, "hasFocus", 2);

package/dist/components/lukso-input/index.d.ts

@@ -29,6 +29,11 @@ export declare class LuksoInput extends LuksoInput_base {
     rightIcon: string | undefined;
     isRightIconClickable: boolean;
     keepFocusOnEscape: boolean;
+    noComma: boolean;
+    noLeadingDot: boolean;
+    onlyOneDot: boolean;
+    onlyNumbersAndDot: boolean;
+    noDecimal: boolean;
     private hasFocus;
     private hasHighlight;
     private inputStyles;
@@ -41,6 +46,7 @@ export declare class LuksoInput extends LuksoInput_base {
     private handleChange;
     private handleInput;
     private handleKeyUp;
+    private get activeRules();
     private handleKeyDown;
     private handleKeyPress;
     private handleMouseOver;

package/dist/components/lukso-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAKA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,+BAA+B,CAAA;AAKtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C;;;GAGG;AACH,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAK;IAG9B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAGxB,IAAI,SAAS;IAGb,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAG/B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAGzB,YAAY,SAAO;IAGnB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IAGtB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAGvB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAG1B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAG/B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAGzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAGxB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAG/B,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAGvB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAGvB,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAU;IAGzB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAK;IAGlC,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAkHjB;IAEF,iBAAiB;IAYjB,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAUhC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YAeX,WAAW;YAmBX,aAAa;YAcb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CAkCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/index.ts"],"names":[],"mappings":"AAKA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,+BAA+B,CAAA;AAMtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;;AAI/C;;;GAGG;AACH,qBACa,UAAW,SAAQ,eAA4B;IAE1D,KAAK,EAAE,MAAM,GAAG,SAAS,CAAK;IAG9B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAGxB,IAAI,SAAS;IAGb,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAG/B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAGzB,YAAY,SAAO;IAGnB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IAGtB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAGvB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAG1B,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAG/B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAGzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAGxB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAG/B,WAAW,UAAQ;IAGnB,UAAU,UAAQ;IAGlB,UAAU,UAAQ;IAGlB,SAAS,UAAQ;IAGjB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAGvB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAGvB,UAAU,UAAQ;IAGlB,IAAI,EAAE,SAAS,CAAU;IAGzB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAK;IAGlC,oBAAoB,UAAQ;IAG5B,iBAAiB,UAAQ;IAGzB,OAAO,UAAQ;IAGf,YAAY,UAAQ;IAGpB,UAAU,UAAQ;IAGlB,iBAAiB,UAAQ;IAGzB,SAAS,UAAQ;IAGjB,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,WAAW,CAkHjB;IAEF,iBAAiB;IAYjB,aAAa,CAAC,MAAM,EAAE,MAAM;IAgC5B,YAAY,CAAC,MAAM,EAAE,MAAM;IAW3B,iBAAiB,CAAC,MAAM,EAAE,MAAM;IAUhC,OAAO,CAAC,WAAW;YAOL,UAAU;YAgBV,YAAY;YAcZ,WAAW;YA0BX,WAAW;IAmBzB,OAAO,KAAK,WAAW,GAQtB;YAEa,aAAa;YAyBb,cAAc;IAc5B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;YAaT,gBAAgB;IAc9B,OAAO,CAAC,oBAAoB;IAY5B,MAAM;CAkCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/lukso-input/index.js

@@ -13,6 +13,7 @@ import '../../shared/assets/index.js';
 import { cn } from '../../shared/tools/cn.js';
 import 'viem';
 import style from './style.css.js';
+import { noComma, noLeadingDot, onlyOneDot, onlyNumbersAndDot, noDecimal } from './rules.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -40,6 +41,11 @@ let LuksoInput = class extends TailwindStyledElement(style) {
     this.rightIcon = "";
     this.isRightIconClickable = false;
     this.keepFocusOnEscape = false;
+    this.noComma = false;
+    this.noLeadingDot = false;
+    this.onlyOneDot = false;
+    this.onlyNumbersAndDot = false;
+    this.noDecimal = false;
     this.hasFocus = false;
     this.hasHighlight = false;
     this.inputStyles = tv({
@@ -254,6 +260,17 @@ let LuksoInput = class extends TailwindStyledElement(style) {
   }
   async handleInput(event) {
     const target = event.target;
+    if (this.activeRules.length > 0) {
+      const sanitized = this.activeRules.reduce(
+        (val, rule) => rule.sanitize(val),
+        target.value
+      );
+      if (sanitized !== target.value) {
+        const cursor = target.selectionStart ?? sanitized.length;
+        target.value = sanitized;
+        target.setSelectionRange(cursor, cursor);
+      }
+    }
     this.value = target?.value;
     await this.updateComplete;
     const changeEvent = new CustomEvent("on-input", {
@@ -282,7 +299,26 @@ let LuksoInput = class extends TailwindStyledElement(style) {
       this.blur();
     }
   }
+  get activeRules() {
+    const rules = [];
+    if (this.noComma) rules.push(noComma);
+    if (this.noLeadingDot) rules.push(noLeadingDot);
+    if (this.onlyOneDot) rules.push(onlyOneDot);
+    if (this.onlyNumbersAndDot) rules.push(onlyNumbersAndDot);
+    if (this.noDecimal) rules.push(noDecimal);
+    return rules;
+  }
   async handleKeyDown(event) {
+    if (event.key.length === 1 && this.activeRules.length > 0) {
+      const input = event.target;
+      const isValid = this.activeRules.every(
+        (rule) => rule.validate(input, event.key)
+      );
+      if (!isValid) {
+        event.preventDefault();
+        return;
+      }
+    }
     await this.updateComplete;
     const target = event.target;
     const keyEvent = new CustomEvent("on-key-down", {
@@ -460,6 +496,21 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "keep-focus-on-escape" })
 ], LuksoInput.prototype, "keepFocusOnEscape", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-comma" })
+], LuksoInput.prototype, "noComma", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-leading-dot" })
+], LuksoInput.prototype, "noLeadingDot", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "only-one-dot" })
+], LuksoInput.prototype, "onlyOneDot", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "only-numbers-and-dot" })
+], LuksoInput.prototype, "onlyNumbersAndDot", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-decimal" })
+], LuksoInput.prototype, "noDecimal", 2);
 __decorateClass([
   state()
 ], LuksoInput.prototype, "hasFocus", 2);

package/dist/components/lukso-input/lukso-input.stories.d.ts

@@ -20,4 +20,6 @@ export declare const Borderless: any;
 export declare const Small: any;
 /** Example of input with icon on right side. */
 export declare const RightIcon: any;
+/** Example of input with number rules enabled. Combines `only-numbers-and-dot`, `no-comma`, `no-leading-dot` and `only-one-dot` to enforce a valid decimal number format. */
+export declare const NumberRules: any;
 //# sourceMappingURL=lukso-input.stories.d.ts.map

package/dist/components/lukso-input/lukso-input.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-input.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/lukso-input.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAiSX,CAAA;AAED,eAAe,IAAI,CAAA;AAiEnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAKhD,wEAAwE;AACxE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAO/C,oCAAoC;AACpC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAKrC,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,oMAAoM;AACpM,eAAO,MAAM,WAAW,KAAoB,CAAA;AAO5C,sEAAsE;AACtE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,gDAAgD;AAChD,eAAO,MAAM,SAAS,KAAoB,CAAA"}
+{"version":3,"file":"lukso-input.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/lukso-input.stories.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAA;AAE1D,OAAO,SAAS,CAAA;AAEhB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAsWX,CAAA;AAED,eAAe,IAAI,CAAA;AA2EnB,8CAA8C;AAC9C,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,gDAAgD;AAChD,eAAO,MAAM,eAAe,KAAoB,CAAA;AAKhD,wEAAwE;AACxE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAO/C,oCAAoC;AACpC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAKrC,+FAA+F;AAC/F,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,oMAAoM;AACpM,eAAO,MAAM,WAAW,KAAoB,CAAA;AAO5C,sEAAsE;AACtE,eAAO,MAAM,UAAU,KAAoB,CAAA;AAM3C,qCAAqC;AACrC,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,gDAAgD;AAChD,eAAO,MAAM,SAAS,KAAoB,CAAA;AAO1C,6KAA6K;AAC7K,eAAO,MAAM,WAAW,KAAoB,CAAA"}

package/dist/components/lukso-input/rules.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const noComma = {
+  name: "noComma",
+  validate: (_, key) => !key.includes(","),
+  sanitize: (value) => value.replaceAll(",", "")
+};
+const noLeadingDot = {
+  name: "noLeadingDot",
+  validate: (input, key) => !(key === "." && input.selectionStart === 0),
+  sanitize: (value) => value.replace(/^\.+/, "")
+};
+const onlyOneDot = {
+  name: "onlyOneDot",
+  validate: (input, key) => !(key === "." && input.value.split(".").length > 1),
+  sanitize: (value) => {
+    const [integer, ...decimals] = value.split(".");
+    return decimals.length > 0 ? `${integer}.${decimals.join("")}` : integer;
+  }
+};
+const onlyNumbersAndDot = {
+  name: "onlyNumbersAndDot",
+  validate: (_, key) => key === "" || /^[0-9.]$/.test(key),
+  sanitize: (value) => value.replace(/[^0-9.]/g, "")
+};
+const noDecimal = {
+  name: "noDecimal",
+  validate: (_, key) => key !== ".",
+  sanitize: (value) => value.replaceAll(".", "")
+};
+
+exports.noComma = noComma;
+exports.noDecimal = noDecimal;
+exports.noLeadingDot = noLeadingDot;
+exports.onlyNumbersAndDot = onlyNumbersAndDot;
+exports.onlyOneDot = onlyOneDot;

package/dist/components/lukso-input/rules.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Type definition for a validation rule applied to number input fields.
+ *
+ * - `name`: Unique identifier for the rule (used for logging/debugging).
+ * - `validate`: Function that receives the HTML input and the last typed key,
+ *    and returns a boolean indicating whether the input is valid.
+ * - `sanitize`: Function that receives the full value (e.g. after paste/autofill)
+ *    and returns a cleaned version that satisfies the rule.
+ */
+export type InputRule = {
+    name: string;
+    validate: (input: HTMLInputElement, key: string) => boolean;
+    sanitize: (value: string) => string;
+};
+/**
+ * Rule: Disallow the comma (`,`) character in the input.
+ *
+ * This ensures that users only use dots (`.`) as decimal separators,
+ * which is standard in most programming and blockchain contexts.
+ */
+export declare const noComma: InputRule;
+/**
+ * Rule: Prevent the user from starting the input with a dot (`.`).
+ *
+ * For example, `.5` will be considered invalid; `0.5` is preferred.
+ * This helps avoid format inconsistencies and parsing errors.
+ */
+export declare const noLeadingDot: InputRule;
+/**
+ * Rule: Allow only one decimal point (`.`) in the input.
+ *
+ * This ensures valid decimal numbers like `123.45`,
+ * and rejects invalid ones like `123.4.5`.
+ */
+export declare const onlyOneDot: InputRule;
+/**
+ * Rule: Accept only digits (`0-9`) and a dot (`.`), or an empty string (when deleting).
+ *
+ * This prevents letters, symbols, and other invalid characters
+ * from being typed into the input field, but allows clearing the field.
+ */
+export declare const onlyNumbersAndDot: InputRule;
+/**
+ * Rule: Disallow the decimal point (`.`) character in the input.
+ *
+ * This ensures that users can only enter whole numbers (integers),
+ * preventing decimal values from being entered.
+ */
+export declare const noDecimal: InputRule;
+//# sourceMappingURL=rules.d.ts.map

package/dist/components/lukso-input/rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-input/rules.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC3D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACpC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,SAIrB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,SAI1B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,SAOxB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAI/B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,EAAE,SAIvB,CAAA"}

package/dist/components/lukso-input/rules.js

@@ -0,0 +1,30 @@
+const noComma = {
+  name: "noComma",
+  validate: (_, key) => !key.includes(","),
+  sanitize: (value) => value.replaceAll(",", "")
+};
+const noLeadingDot = {
+  name: "noLeadingDot",
+  validate: (input, key) => !(key === "." && input.selectionStart === 0),
+  sanitize: (value) => value.replace(/^\.+/, "")
+};
+const onlyOneDot = {
+  name: "onlyOneDot",
+  validate: (input, key) => !(key === "." && input.value.split(".").length > 1),
+  sanitize: (value) => {
+    const [integer, ...decimals] = value.split(".");
+    return decimals.length > 0 ? `${integer}.${decimals.join("")}` : integer;
+  }
+};
+const onlyNumbersAndDot = {
+  name: "onlyNumbersAndDot",
+  validate: (_, key) => key === "" || /^[0-9.]$/.test(key),
+  sanitize: (value) => value.replace(/[^0-9.]/g, "")
+};
+const noDecimal = {
+  name: "noDecimal",
+  validate: (_, key) => key !== ".",
+  sanitize: (value) => value.replaceAll(".", "")
+};
+
+export { noComma, noDecimal, noLeadingDot, onlyNumbersAndDot, onlyOneDot };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lukso/web-components",
-	"version": "1.187.0",
+	"version": "1.188.0",
 	"type": "module",
 	"files": [
 		"dist",