@sula-tech/webcomponents 0.7.6 → 0.8.0

package/dist/esm/webcomponents.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sula-avatar_18",[[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
+  return bootstrapLazy([["sula-avatar_18",[[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"selectedItem":[32],"showItems":[32],"isFocused":[32]},[[4,"click","handleDocumentClick"]],{"value":["handleValueChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"isFocus":[32]}],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
 });
 //# sourceMappingURL=webcomponents.js.map
 

package/dist/types/components/sula-textfield/sula-textfield.d.ts

@@ -41,6 +41,12 @@ export declare class SulaTextfield {
      * Event emitted when input value changes.
      */
     valueChanged: EventEmitter<string>;
+    /**
+     * The textfield mask pattern
+     * The mask pattern should follow the VMasker pattern format
+     * More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern
+     */
+    maskPattern?: string;
     /**
      * Event emitted when input is focused.
      */
@@ -69,6 +75,7 @@ export declare class SulaTextfield {
     handleBlur: () => void;
     handleInputFocus: () => void;
     handleIconClick: (event: MouseEvent) => void;
+    handleInputMask(): void;
     handlePasswordIconClicked(): void;
     getInputIcon(): string;
     render(): any;

package/dist/types/components/sula-textfield/sula-textfield.stories.d.ts

@@ -41,6 +41,14 @@ declare const _default: {
                 required: boolean;
             };
         };
+        maskPattern: {
+            control: string;
+            defaultValue: string;
+            description: string;
+            type: {
+                required: boolean;
+            };
+        };
         placeholder: {
             control: string;
             defaultValue: string;
@@ -104,6 +112,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
+export declare const WithMask: any;
 export declare const WithValue: any;
 export declare const WithHelpText: any;
 export declare const WithMaxLength: any;

package/dist/types/components.d.ts

@@ -413,6 +413,10 @@ export namespace Components {
           * The textfield label
          */
         "label": string;
+        /**
+          * The textfield mask pattern The mask pattern should follow the VMasker pattern format More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern
+         */
+        "maskPattern"?: string;
         /**
           * The textfield max length
          */
@@ -1281,6 +1285,10 @@ declare namespace LocalJSX {
           * The textfield label
          */
         "label"?: string;
+        /**
+          * The textfield mask pattern The mask pattern should follow the VMasker pattern format More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern
+         */
+        "maskPattern"?: string;
         /**
           * The textfield max length
          */

package/dist/webcomponents/{p-af46ad3b.entry.js → p-bc1f174c.entry.js}

@@ -21721,6 +21721,193 @@ var SulaTextfieldStatus;
   e["Error"] = "error";
 })(SulaTextfieldStatus || (SulaTextfieldStatus = {}));
 
+var vanillaMasker$1 = {
+  exports: {}
+};
+
+var vanillaMasker = vanillaMasker$1.exports;
+
+var hasRequiredVanillaMasker;
+
+function requireVanillaMasker() {
+  if (hasRequiredVanillaMasker) return vanillaMasker$1.exports;
+  hasRequiredVanillaMasker = 1;
+  (function(e, t) {
+    (function(t, o) {
+      {
+        e.exports = o();
+      }
+    })(vanillaMasker, (function() {
+      var e = "9", t = "A", o = "S", r = [ 9, 16, 17, 18, 36, 37, 38, 39, 40, 91, 92, 93 ], isAllowedKeyCode = function(e) {
+        for (var t = 0, o = r.length; t < o; t++) {
+          if (e == r[t]) {
+            return false;
+          }
+        }
+        return true;
+      }, mergeMoneyOptions = function(e) {
+        e = e || {};
+        e = {
+          delimiter: e.delimiter || ".",
+          lastOutput: e.lastOutput,
+          precision: e.hasOwnProperty("precision") ? e.precision : 2,
+          separator: e.separator || ",",
+          showSignal: e.showSignal,
+          suffixUnit: e.suffixUnit && " " + e.suffixUnit.replace(/[\s]/g, "") || "",
+          unit: e.unit && e.unit.replace(/[\s]/g, "") + " " || "",
+          zeroCents: e.zeroCents
+        };
+        e.moneyPrecision = e.zeroCents ? 0 : e.precision;
+        return e;
+      }, 
+      // Fill wildcards past index in output with placeholder
+      addPlaceholdersToOutput = function(r, n, a) {
+        for (;n < r.length; n++) {
+          if (r[n] === e || r[n] === t || r[n] === o) {
+            r[n] = a;
+          }
+        }
+        return r;
+      };
+      var VanillaMasker = function(e) {
+        this.elements = e;
+      };
+      VanillaMasker.prototype.unbindElementToMask = function() {
+        for (var e = 0, t = this.elements.length; e < t; e++) {
+          this.elements[e].lastOutput = "";
+          this.elements[e].onkeyup = false;
+          this.elements[e].onkeydown = false;
+          if (this.elements[e].value.length) {
+            this.elements[e].value = this.elements[e].value.replace(/\D/g, "");
+          }
+        }
+      };
+      VanillaMasker.prototype.bindElementToMask = function(e) {
+        var t = this, onType = function(o) {
+          o = o || window.event;
+          var r = o.target || o.srcElement;
+          if (isAllowedKeyCode(o.keyCode)) {
+            setTimeout((function() {
+              t.opts.lastOutput = r.lastOutput;
+              r.value = VMasker[e](r.value, t.opts);
+              r.lastOutput = r.value;
+              if (r.setSelectionRange && t.opts.suffixUnit) {
+                r.setSelectionRange(r.value.length, r.value.length - t.opts.suffixUnit.length);
+              }
+            }), 0);
+          }
+        };
+        for (var o = 0, r = this.elements.length; o < r; o++) {
+          this.elements[o].lastOutput = "";
+          this.elements[o].onkeyup = onType;
+          if (this.elements[o].value.length) {
+            this.elements[o].value = VMasker[e](this.elements[o].value, this.opts);
+          }
+        }
+      };
+      VanillaMasker.prototype.maskMoney = function(e) {
+        this.opts = mergeMoneyOptions(e);
+        this.bindElementToMask("toMoney");
+      };
+      VanillaMasker.prototype.maskNumber = function() {
+        this.opts = {};
+        this.bindElementToMask("toNumber");
+      };
+      VanillaMasker.prototype.maskAlphaNum = function() {
+        this.opts = {};
+        this.bindElementToMask("toAlphaNumeric");
+      };
+      VanillaMasker.prototype.maskPattern = function(e) {
+        this.opts = {
+          pattern: e
+        };
+        this.bindElementToMask("toPattern");
+      };
+      VanillaMasker.prototype.unMask = function() {
+        this.unbindElementToMask();
+      };
+      var VMasker = function(e) {
+        if (!e) {
+          throw new Error("VanillaMasker: There is no element to bind.");
+        }
+        var t = "length" in e ? e.length ? e : [] : [ e ];
+        return new VanillaMasker(t);
+      };
+      VMasker.toMoney = function(e, t) {
+        t = mergeMoneyOptions(t);
+        if (t.zeroCents) {
+          t.lastOutput = t.lastOutput || "";
+          var o = "(" + t.separator + "[0]{0," + t.precision + "})", r = new RegExp(o, "g"), n = e.toString().replace(/[\D]/g, "").length || 0, a = t.lastOutput.toString().replace(/[\D]/g, "").length || 0;
+          e = e.toString().replace(r, "");
+          if (n < a) {
+            e = e.slice(0, e.length - 1);
+          }
+        }
+        var i = e.toString().replace(/[\D]/g, ""), c = new RegExp("^(0|\\" + t.delimiter + ")"), s = new RegExp("(\\" + t.separator + ")$"), l = i.substr(0, i.length - t.moneyPrecision), f = l.substr(0, l.length % 3), p = new Array(t.precision + 1).join("0");
+        l = l.substr(l.length % 3, l.length);
+        for (var u = 0, d = l.length; u < d; u++) {
+          if (u % 3 === 0) {
+            f += t.delimiter;
+          }
+          f += l[u];
+        }
+        f = f.replace(c, "");
+        f = f.length ? f : "0";
+        var b = "";
+        if (t.showSignal === true) {
+          b = e < 0 || e.startsWith && e.startsWith("-") ? "-" : "";
+        }
+        if (!t.zeroCents) {
+          var m = i.length - t.precision, g = i.substr(m, t.precision), y = g.length, x = t.precision > y ? t.precision : y;
+          p = (p + g).slice(-x);
+        }
+        var k = t.unit + b + f + t.separator + p;
+        return k.replace(s, "") + t.suffixUnit;
+      };
+      VMasker.toPattern = function(r, n) {
+        var a = typeof n === "object" ? n.pattern : n, i = a.replace(/\W/g, ""), c = a.split(""), s = r.toString().replace(/\W/g, ""), l = s.replace(/\W/g, ""), f = 0, p, u = c.length, d = typeof n === "object" ? n.placeholder : undefined;
+        for (p = 0; p < u; p++) {
+          // Reached the end of input
+          if (f >= s.length) {
+            if (i.length == l.length) {
+              return c.join("");
+            } else if (d !== undefined && i.length > l.length) {
+              return addPlaceholdersToOutput(c, p, d).join("");
+            } else {
+              break;
+            }
+          }
+          // Remaining chars in input
+           else {
+            if (c[p] === e && s[f].match(/[0-9]/) || c[p] === t && s[f].match(/[a-zA-Z]/) || c[p] === o && s[f].match(/[0-9a-zA-Z]/)) {
+              c[p] = s[f++];
+            } else if (c[p] === e || c[p] === t || c[p] === o) {
+              if (d !== undefined) {
+                return addPlaceholdersToOutput(c, p, d).join("");
+              } else {
+                return c.slice(0, p).join("");
+              }
+            }
+          }
+        }
+        return c.join("").substr(0, p);
+      };
+      VMasker.toNumber = function(e) {
+        return e.toString().replace(/(?!^-)[^0-9]/g, "");
+      };
+      VMasker.toAlphaNumeric = function(e) {
+        return e.toString().replace(/[^a-z0-9 ]+/i, "");
+      };
+      return VMasker;
+    }));
+  })(vanillaMasker$1);
+  return vanillaMasker$1.exports;
+}
+
+var vanillaMaskerExports = requireVanillaMasker();
+
+var VMasker =  getDefaultExportFromCjs(vanillaMaskerExports);
+
 const sulaTextfieldCss = '*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.outline{outline-style:solid}:host{display:block}.button-focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}.button-error{outline:2px solid var(--color-feedback-error)!important;outline-offset:2px!important}.from-down{animation:from-down .2s ease-in-out}.from-up{animation:from-up .2s ease-in-out}@keyframes from-down{0%{opacity:0;transform:translateY(75%)}to{opacity:1;transform:translateY(0)}}@keyframes from-up{0%{opacity:0;transform:translateY(-75%)}to{opacity:1;transform:translateY(0)}}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.mt-4{margin-top:.25rem}.flex{display:flex}.hidden{display:none}.h-\\[72px\\]{height:72px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:.75rem}.border{border-width:1px}.border-line-general{border-color:var(--color-line-general)}.border-line-input{border-color:var(--color-line-input)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-surface-body{background-color:var(--color-surface-body)}.bg-transparent{background-color:transparent}.px-16{padding-left:1rem;padding-right:1rem}.pr-12{padding-right:.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-feedback-error{color:var(--color-feedback-error)}.text-icon-disabled{color:var(--color-icon-disabled)}.text-icon-primary{color:var(--color-icon-primary)}.text-text-disabled{color:var(--color-text-disabled)}.text-text-primary{color:var(--color-text-primary)}.caret-brand-primary{caret-color:var(--color-brand-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}';
 
 const SulaTextfield = class {
@@ -21743,6 +21930,9 @@ const SulaTextfield = class {
       this.toggleOptions(true);
     };
     this.handleInputChanges = e => {
+      if (this.maskPattern && this.inputElement) {
+        this.handleInputMask();
+      }
       const t = e.target.value;
       this.textValue = t;
       this.value = t;
@@ -21806,6 +21996,9 @@ const SulaTextfield = class {
     if (this.textValue && this.textValue.trim().length > 0) {
       this.changeElementsStyle();
     }
+    if (this.maskPattern && this.inputElement) {
+      this.handleInputMask();
+    }
   }
   toggleOptions(e) {
     if (this.inputIsOpen && this.textValue && this.textValue.length > 0 || this.disabled) return;
@@ -21821,6 +22014,9 @@ const SulaTextfield = class {
       this.labelElement.classList.add("from-up");
     }
   }
+  handleInputMask() {
+    VMasker(this.inputElement).maskPattern(this.maskPattern);
+  }
   handlePasswordIconClicked() {
     const e = this.inputElement.selectionStart;
     const t = this.inputElement.value;
@@ -21840,12 +22036,12 @@ const SulaTextfield = class {
   }
   render() {
     return h$1(Host, {
-      key: "db19982329c8a6aa8989b3a68ef61a7453ee4a99",
+      key: "2287b38b1441da7fcab2caa4dd495bc593a4e268",
       ref: e => this.node = e
     }, h$1("div", {
-      key: "daf060b490b07b535cb414b11c3c75f307f127aa"
+      key: "1e9538652f7a57c1f8a99760028a45726d4cf1b8"
     }, h$1("div", {
-      key: "1d84aec41f352537a124311c076eceec3271832a",
+      key: "48b038746bbe3ba11ea374c7cc5e28cae65d5d30",
       id: "button-container",
       class: {
         "flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary": true,
@@ -21859,17 +22055,17 @@ const SulaTextfield = class {
       onFocus: this.handleFocus,
       onClick: this.handleInputClick
     }, !this.disabled && h$1("div", {
-      key: "6ec4a250e1bcd8f053b2dba7e6e6fe6842c1b9bf",
+      key: "9c4a9e1e7017593db75a77585c1392125b1a98b9",
       class: {
         "hidden flex-col w-full": true,
         "pr-12": !!this.icon
       },
       ref: e => this.inputContainer = e
     }, h$1("label", {
-      key: "001ef2edc750497dc82a65341f98289fd8d28c6d",
+      key: "d07846ebd85fff94f477f59b512304e00102bb58",
       class: "font-bold text-sm text-text-primary from-down"
     }, this.label), h$1("input", {
-      key: "96c0725c63ed92ddbc164f8efcdc003707eb0115",
+      key: "92955b96950cae398681755cec9fcbf0a8327695",
       type: this.type,
       ref: e => this.inputElement = e,
       placeholder: this.placeholder,
@@ -21878,7 +22074,7 @@ const SulaTextfield = class {
       onFocus: this.handleInputFocus,
       value: this.textValue
     })), h$1("div", {
-      key: "f65cd97f9ddcadcc07789d8d3dc9421e82e31d78",
+      key: "cadc6f4d64f3e85dee539b9bf270a839709c1bfa",
       id: "textfield-label",
       class: {
         "text-base flex items-center": true,
@@ -21887,25 +22083,25 @@ const SulaTextfield = class {
       },
       ref: e => this.labelElement = e
     }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && h$1("div", {
-      key: "27596e159d5bcdd52f587350fa7ed619d5a6346e",
+      key: "5f0fee95a1d89743084c86f9b9bdec69b3976da5",
       class: "flex items-center justify-center",
       onClick: this.handleIconClick
     }, h$1("sula-icon", {
-      key: "2fb87a5df61f3ed9f50f404ca8ff2988c71d10a7",
+      key: "a41969ee7b207c6fdcaf43c0345e927a19b58d1c",
       icon: this.getInputIcon(),
       customClass: `text-2xl ${this.disabled ? "text-icon-disabled" : "text-icon-primary"}`
     }))), (this.helpText || this.maxLength) && !this.disabled && h$1("div", {
-      key: "d54b53d64879e9a454a72c7e6726c8b0f5905baa",
+      key: "14e36d4ee992aeb3ab3341f030fc05231c803e3d",
       class: "flex justify-between items-center px-16 mt-4 text-sm"
     }, this.helpText && h$1("div", {
-      key: "7ded73f462e82f41b8766e4654cd47fabf3b3a40",
+      key: "e4286e8635c5b6f8fc3032359567cbdba2479748",
       id: "textfield-help-text",
       class: {
         "text-text-primary": this.status === SulaTextfieldStatus.Default,
         "text-feedback-error": this.status === SulaTextfieldStatus.Error
       }
     }, this.helpText), this.maxLength && h$1("div", {
-      key: "c62b62d8b8c99a775a31092479f1e4d8f581908c",
+      key: "d2813e234f057e952f85ded243510a4a12a43654",
       id: "max-length-container",
       class: {
         "text-text-primary": this.status === SulaTextfieldStatus.Default,
@@ -22194,4 +22390,4 @@ SulaTimelineList.style = sulaTimelineListCss;
 
 export { SulaAvatar as sula_avatar, SulaBadge as sula_badge, SulaButton as sula_button, SulaCheckbox as sula_checkbox, SulaChip as sula_chip, SulaDropdown as sula_dropdown, SulaIcon as sula_icon, SulaLoader as sula_loader, SulaMenuSelectList as sula_menu_select_list, SulaProgressBar as sula_progress_bar, SulaRadioButton as sula_radio_button, SulaSearchBar as sula_search_bar, SulaSwitch as sula_switch, SulaTag as sula_tag, SulaTextarea as sula_textarea, SulaTextfield as sula_textfield, SulaTiles as sula_tiles, SulaTimelineList as sula_timeline_list };
 //# sourceMappingURL=sula-avatar.sula-badge.sula-button.sula-checkbox.sula-chip.sula-dropdown.sula-icon.sula-loader.sula-menu-select-list.sula-progress-bar.sula-radio-button.sula-search-bar.sula-switch.sula-tag.sula-textarea.sula-textfield.sula-tiles.sula-timeline-list.entry.esm.js.map
-//# sourceMappingURL=p-af46ad3b.entry.js.map
+//# sourceMappingURL=p-bc1f174c.entry.js.map