@sula-tech/webcomponents 0.12.0 → 0.13.0

package/dist/cjs/sula-avatar_21.cjs.entry.js

@@ -29045,10 +29045,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;
@@ -29167,13 +29163,13 @@ const SulaTextfield = class {
         }
     }
     handleInputMask(inputValue) {
-        var _a;
+        var _a, _b;
         if (!this.inputElement)
             return;
-        const maskPattern = this.getMaskPatternByValueLength(inputValue);
+        const valueWithoutMask = ((_a = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _a !== void 0 ? _a : '').replace(/[^a-zA-Z0-9]/g, '');
+        const maskPattern = this.getMaskPatternByValueLength(valueWithoutMask, (_b = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _b !== void 0 ? _b : '');
         if (!maskPattern)
             return;
-        const valueWithoutMask = ((_a = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _a !== void 0 ? _a : '').replace(/[^a-zA-Z0-9]/g, '');
         VMasker(this.inputElement).unMask();
         this.inputElement.value = VMasker.toPattern(valueWithoutMask, maskPattern);
     }
@@ -29200,17 +29196,57 @@ const SulaTextfield = class {
         }
         return [];
     }
-    getMaskPatternByValueLength(inputValue) {
-        var _a, _b, _c;
+    getMaskPatternByValueLength(inputValue, rawInputValue) {
         const patterns = this.getMaskPatterns();
         if (patterns.length === 0)
             return undefined;
         if (patterns.length === 1)
             return patterns[0];
-        const currentValueLength = ((_b = inputValue !== null && inputValue !== void 0 ? inputValue : (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '').length;
-        const switchMaxLength = (_c = this.maskPatternSwitchMaxLength) !== null && _c !== void 0 ? _c : 14;
-        const selectedIndex = currentValueLength > switchMaxLength ? 1 : 0;
-        return patterns[Math.min(selectedIndex, patterns.length - 1)];
+        const currentValueLength = (inputValue !== null && inputValue !== void 0 ? inputValue : '').length;
+        const providedSwitchLengths = this.normalizeProvidedSwitchLengths();
+        if (providedSwitchLengths.length === 0) {
+            return this.getMaskPatternByAutoInference(patterns, currentValueLength, rawInputValue);
+        }
+        for (let i = 0; i < providedSwitchLengths.length; i++) {
+            if (currentValueLength <= providedSwitchLengths[i]) {
+                return patterns[Math.min(i, patterns.length - 1)];
+            }
+        }
+        return patterns[patterns.length - 1];
+    }
+    getMaskPatternByAutoInference(patterns, currentValueLength, rawInputValue) {
+        const capacities = patterns.map(pattern => (pattern.match(/[9AS]/g) || []).length);
+        const eligibleCapacities = capacities.filter(capacity => capacity >= currentValueLength && capacity > 0);
+        if (eligibleCapacities.length === 0) {
+            return patterns[patterns.length - 1];
+        }
+        const selectedCapacity = Math.min(...eligibleCapacities);
+        const candidateIndexes = capacities
+            .map((capacity, index) => ({ capacity, index }))
+            .filter(item => item.capacity === selectedCapacity)
+            .map(item => item.index);
+        if (candidateIndexes.length === 1) {
+            return patterns[candidateIndexes[0]];
+        }
+        const rawLiterals = (rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : '').replace(/[a-zA-Z0-9]/g, '');
+        if (rawLiterals.length > 0) {
+            for (const candidateIndex of candidateIndexes) {
+                const patternLiterals = patterns[candidateIndex].replace(/[9AS]/g, '');
+                if (patternLiterals === rawLiterals) {
+                    return patterns[candidateIndex];
+                }
+            }
+        }
+        return patterns[candidateIndexes[0]];
+    }
+    normalizeProvidedSwitchLengths() {
+        if (Array.isArray(this.maskPatternSwitchMaxLength)) {
+            return this.maskPatternSwitchMaxLength.filter(value => Number.isFinite(value) && value > 0).sort((a, b) => a - b);
+        }
+        if (typeof this.maskPatternSwitchMaxLength === 'number' && Number.isFinite(this.maskPatternSwitchMaxLength) && this.maskPatternSwitchMaxLength > 0) {
+            return [this.maskPatternSwitchMaxLength];
+        }
+        return [];
     }
     handlePasswordIconClicked() {
         const cursorPosition = this.inputElement.selectionStart;
@@ -29230,14 +29266,14 @@ const SulaTextfield = class {
         return this.icon;
     }
     render() {
-        return (index.h(index.Host, { key: 'b857d08cc9d53c1cfaa87a573d52026b9b72d088', ref: node => (this.node = node) }, index.h("div", { key: 'd173e497fbe8c78b899a1e66784d411981008abb' }, index.h("div", { key: 'bc1682f30d7ffb0eb890baba6d126d3cdbaf3a20', id: "button-container", class: {
+        return (index.h(index.Host, { key: '0dbf51792e5bdc43328820106b083d194bbcae61', ref: node => (this.node = node) }, index.h("div", { key: '3659f51f5a9d0c75909e6a6939b8ff1b5c25e377' }, index.h("div", { key: '320da879fdea605e95525f54607c9cb285446133', id: "button-container", class: {
                 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
                 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
                 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
                 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-pointer': !this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (index.h("div", { key: '7e78f2a5b2d0bd3111ddfec6a592d907ac1aa078', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, index.h("label", { key: 'd0419a71fb3372d34b07625acd95bae71b1133a0', class: "font-bold text-sm text-text-primary from-down" }, this.label), index.h("input", { key: '11926def24206e02e0fcd0e4ba7b94664f1ca21a', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), index.h("div", { key: '93118f3270d2f325dd474805ed6870cb1cddb2bd', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (index.h("div", { key: 'bc78873f12cd069f1987dddbfd9eea29f5c07c8e', class: "flex items-center justify-center", onClick: this.handleIconClick }, index.h("sula-icon", { key: 'f8a30c1ea8f73e748ce43b4f0029a83435e88d2b', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (index.h("div", { key: 'e6cc2bed4087a75fe8ed2541af38e44778144485', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (index.h("div", { key: 'ed826977d2f85c23c4e41c51bab2a35a093d4207', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (index.h("div", { key: '595dd29e865d45bcc1df11dc024eb1c9db77e990', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (index.h("div", { key: '44777180c60bb9a21ef64cffd98f465cf15af446', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, index.h("label", { key: '75bc3b05a66ed7c00915842b275faf657b1784b3', class: "font-bold text-sm text-text-primary from-down" }, this.label), index.h("input", { key: '4f6bde78c385dc3c158c08be70f2277e56f7ab95', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), index.h("div", { key: 'df7e84e77d3d05ba0328f736e6c03f45d32c9c76', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (index.h("div", { key: '55dba31d1ca9d6b213900b9a2d3aa02044b246ef', class: "flex items-center justify-center", onClick: this.handleIconClick }, index.h("sula-icon", { key: '19712e5575abb7aaef17a098de13543ed550dc6c', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (index.h("div", { key: '0c68e89181316ffed13f212a5c7f6ba78372e83c', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (index.h("div", { 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 && (index.h("div", { key: 'e78a661c6c614d2d6787159137cce01bf129e2c2', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
     }
     static get watchers() { return {
         "value": ["watchValueHandler"],