@sula-tech/webcomponents 0.12.0 → 0.13.0

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

@@ -52,9 +52,14 @@ export declare class SulaTextfield {
      */
     maskPattern?: string | string[];
     /**
-     * Max input length used to switch between the first and second mask pattern.
+     * Optional manual switch lengths used to switch between mask patterns.
+     * If not provided, switch lengths are automatically inferred from `maskPattern`.
+     *
+     * - When number: switches between first and second pattern at this length
+     * - When array: defines multiple switch points for multiple patterns
+     *   Example: [11, 14] means 0-11 uses first pattern, 12-14 uses second, 15+ uses third
      */
-    maskPatternSwitchMaxLength: number;
+    maskPatternSwitchMaxLength?: number | number[];
     /**
      * Event emitted when input is focused.
      */
@@ -90,6 +95,8 @@ export declare class SulaTextfield {
     private hasMaskPatternConfigured;
     private getMaskPatterns;
     private getMaskPatternByValueLength;
+    private getMaskPatternByAutoInference;
+    private normalizeProvidedSwitchLengths;
     handlePasswordIconClicked(): void;
     getInputIcon(): string;
     render(): any;

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

@@ -126,6 +126,7 @@ export default _default;
 export declare const Default: any;
 export declare const WithMask: any;
 export declare const WithCpfCnpjMask: any;
+export declare const WithMultipleMasks: any;
 export declare const WithValue: any;
 export declare const WithHelpText: any;
 export declare const WithMaxLength: any;

package/dist/types/components.d.ts

@@ -538,10 +538,9 @@ export namespace Components {
          */
         "maskPattern"?: string | string[];
         /**
-          * Max input length used to switch between the first and second mask pattern.
-          * @default 14
+          * Optional manual switch lengths used to switch between mask patterns. If not provided, switch lengths are automatically inferred from `maskPattern`.  - When number: switches between first and second pattern at this length - When array: defines multiple switch points for multiple patterns   Example: [11, 14] means 0-11 uses first pattern, 12-14 uses second, 15+ uses third
          */
-        "maskPatternSwitchMaxLength": number;
+        "maskPatternSwitchMaxLength"?: number | number[];
         /**
           * The textfield max length
          */
@@ -1628,10 +1627,9 @@ declare namespace LocalJSX {
          */
         "maskPattern"?: string | string[];
         /**
-          * Max input length used to switch between the first and second mask pattern.
-          * @default 14
+          * Optional manual switch lengths used to switch between mask patterns. If not provided, switch lengths are automatically inferred from `maskPattern`.  - When number: switches between first and second pattern at this length - When array: defines multiple switch points for multiple patterns   Example: [11, 14] means 0-11 uses first pattern, 12-14 uses second, 15+ uses third
          */
-        "maskPatternSwitchMaxLength"?: number;
+        "maskPatternSwitchMaxLength"?: number | number[];
         /**
           * The textfield max length
          */

package/dist/webcomponents/{p-3c319b71.entry.js → p-f1a4d84f.entry.js}

@@ -22500,9 +22500,6 @@ const SulaTextfield = class {
     /**
          * The textfield status
          */    this.status = SulaTextfieldStatus.Default;
-    /**
-         * Max input length used to switch between the first and second mask pattern.
-         */    this.maskPatternSwitchMaxLength = 14;
     this.inputIsOpen = false;
     this.textValue = "";
     this.showPassword = false;
@@ -22616,13 +22613,13 @@ const SulaTextfield = class {
     }
   }
   handleInputMask(e) {
-    var t;
+    var t, o;
     if (!this.inputElement) return;
-    const o = this.getMaskPatternByValueLength(e);
-    if (!o) return;
     const r = ((t = e !== null && e !== void 0 ? e : this.inputElement.value) !== null && t !== void 0 ? t : "").replace(/[^a-zA-Z0-9]/g, "");
+    const n = this.getMaskPatternByValueLength(r, (o = e !== null && e !== void 0 ? e : this.inputElement.value) !== null && o !== void 0 ? o : "");
+    if (!n) return;
     VMasker(this.inputElement).unMask();
-    this.inputElement.value = VMasker.toPattern(r, o);
+    this.inputElement.value = VMasker.toPattern(r, n);
   }
   syncMaskState() {
     if (!this.inputElement) return;
@@ -22646,15 +22643,55 @@ const SulaTextfield = class {
     }
     return [];
   }
-  getMaskPatternByValueLength(e) {
-    var t, o, r;
-    const n = this.getMaskPatterns();
-    if (n.length === 0) return undefined;
-    if (n.length === 1) return n[0];
-    const a = ((o = e !== null && e !== void 0 ? e : (t = this.inputElement) === null || t === void 0 ? void 0 : t.value) !== null && o !== void 0 ? o : "").length;
-    const i = (r = this.maskPatternSwitchMaxLength) !== null && r !== void 0 ? r : 14;
-    const c = a > i ? 1 : 0;
-    return n[Math.min(c, n.length - 1)];
+  getMaskPatternByValueLength(e, t) {
+    const o = this.getMaskPatterns();
+    if (o.length === 0) return undefined;
+    if (o.length === 1) return o[0];
+    const r = (e !== null && e !== void 0 ? e : "").length;
+    const n = this.normalizeProvidedSwitchLengths();
+    if (n.length === 0) {
+      return this.getMaskPatternByAutoInference(o, r, t);
+    }
+    for (let e = 0; e < n.length; e++) {
+      if (r <= n[e]) {
+        return o[Math.min(e, o.length - 1)];
+      }
+    }
+    return o[o.length - 1];
+  }
+  getMaskPatternByAutoInference(e, t, o) {
+    const r = e.map((e => (e.match(/[9AS]/g) || []).length));
+    const n = r.filter((e => e >= t && e > 0));
+    if (n.length === 0) {
+      return e[e.length - 1];
+    }
+    const a = Math.min(...n);
+    const i = r.map(((e, t) => ({
+      capacity: e,
+      index: t
+    }))).filter((e => e.capacity === a)).map((e => e.index));
+    if (i.length === 1) {
+      return e[i[0]];
+    }
+    const c = (o !== null && o !== void 0 ? o : "").replace(/[a-zA-Z0-9]/g, "");
+    if (c.length > 0) {
+      for (const t of i) {
+        const o = e[t].replace(/[9AS]/g, "");
+        if (o === c) {
+          return e[t];
+        }
+      }
+    }
+    return e[i[0]];
+  }
+  normalizeProvidedSwitchLengths() {
+    if (Array.isArray(this.maskPatternSwitchMaxLength)) {
+      return this.maskPatternSwitchMaxLength.filter((e => Number.isFinite(e) && e > 0)).sort(((e, t) => e - t));
+    }
+    if (typeof this.maskPatternSwitchMaxLength === "number" && Number.isFinite(this.maskPatternSwitchMaxLength) && this.maskPatternSwitchMaxLength > 0) {
+      return [ this.maskPatternSwitchMaxLength ];
+    }
+    return [];
   }
   handlePasswordIconClicked() {
     const e = this.inputElement.selectionStart;
@@ -22675,12 +22712,12 @@ const SulaTextfield = class {
   }
   render() {
     return h$1(Host, {
-      key: "b857d08cc9d53c1cfaa87a573d52026b9b72d088",
+      key: "0dbf51792e5bdc43328820106b083d194bbcae61",
       ref: e => this.node = e
     }, h$1("div", {
-      key: "d173e497fbe8c78b899a1e66784d411981008abb"
+      key: "3659f51f5a9d0c75909e6a6939b8ff1b5c25e377"
     }, h$1("div", {
-      key: "bc1682f30d7ffb0eb890baba6d126d3cdbaf3a20",
+      key: "320da879fdea605e95525f54607c9cb285446133",
       id: "button-container",
       class: {
         "flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary": true,
@@ -22694,17 +22731,17 @@ const SulaTextfield = class {
       onFocus: this.handleFocus,
       onClick: this.handleInputClick
     }, !this.disabled && h$1("div", {
-      key: "7e78f2a5b2d0bd3111ddfec6a592d907ac1aa078",
+      key: "44777180c60bb9a21ef64cffd98f465cf15af446",
       class: {
         "hidden flex-col w-full": true,
         "pr-12": !!this.icon
       },
       ref: e => this.inputContainer = e
     }, h$1("label", {
-      key: "d0419a71fb3372d34b07625acd95bae71b1133a0",
+      key: "75bc3b05a66ed7c00915842b275faf657b1784b3",
       class: "font-bold text-sm text-text-primary from-down"
     }, this.label), h$1("input", {
-      key: "11926def24206e02e0fcd0e4ba7b94664f1ca21a",
+      key: "4f6bde78c385dc3c158c08be70f2277e56f7ab95",
       type: this.type,
       ref: e => this.inputElement = e,
       placeholder: this.placeholder,
@@ -22713,7 +22750,7 @@ const SulaTextfield = class {
       onFocus: this.handleInputFocus,
       value: this.textValue
     })), h$1("div", {
-      key: "93118f3270d2f325dd474805ed6870cb1cddb2bd",
+      key: "df7e84e77d3d05ba0328f736e6c03f45d32c9c76",
       id: "textfield-label",
       class: {
         "text-base flex items-center": true,
@@ -22722,25 +22759,25 @@ const SulaTextfield = class {
       },
       ref: e => this.labelElement = e
     }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && h$1("div", {
-      key: "bc78873f12cd069f1987dddbfd9eea29f5c07c8e",
+      key: "55dba31d1ca9d6b213900b9a2d3aa02044b246ef",
       class: "flex items-center justify-center",
       onClick: this.handleIconClick
     }, h$1("sula-icon", {
-      key: "f8a30c1ea8f73e748ce43b4f0029a83435e88d2b",
+      key: "19712e5575abb7aaef17a098de13543ed550dc6c",
       icon: this.getInputIcon(),
       customClass: `text-2xl ${this.disabled ? "text-icon-disabled" : "text-icon-primary"}`
     }))), (this.helpText || this.maxLength) && !this.disabled && h$1("div", {
-      key: "e6cc2bed4087a75fe8ed2541af38e44778144485",
+      key: "0c68e89181316ffed13f212a5c7f6ba78372e83c",
       class: "flex justify-between items-center px-16 mt-4 text-sm"
     }, this.helpText && h$1("div", {
-      key: "ed826977d2f85c23c4e41c51bab2a35a093d4207",
+      key: "af970054750c28cb8a9901fcf850c7c02fd059b9",
       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: "595dd29e865d45bcc1df11dc024eb1c9db77e990",
+      key: "e78a661c6c614d2d6787159137cce01bf129e2c2",
       id: "max-length-container",
       class: {
         "text-text-primary": this.status === SulaTextfieldStatus.Default,
@@ -23031,4 +23068,4 @@ SulaTimelineList.style = sulaTimelineListCss;
 
 export { SulaAvatar as sula_avatar, SulaBadge as sula_badge, SulaBreadcrumb as sula_breadcrumb, 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, SulaModal as sula_modal, SulaProgressBar as sula_progress_bar, SulaRadioButton as sula_radio_button, SulaSearchBar as sula_search_bar, SulaSegmentedControl as sula_segmented_control, 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-breadcrumb.sula-button.sula-checkbox.sula-chip.sula-dropdown.sula-icon.sula-loader.sula-menu-select-list.sula-modal.sula-progress-bar.sula-radio-button.sula-search-bar.sula-segmented-control.sula-switch.sula-tag.sula-textarea.sula-textfield.sula-tiles.sula-timeline-list.entry.esm.js.map
-//# sourceMappingURL=p-3c319b71.entry.js.map
+//# sourceMappingURL=p-f1a4d84f.entry.js.map