@sula-tech/webcomponents 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/sula-avatar_21.cjs.entry.js +51 -15
  2. package/dist/cjs/sula-avatar_21.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/sula-textfield/sula-textfield.js +56 -21
  4. package/dist/collection/components/sula-textfield/sula-textfield.js.map +1 -1
  5. package/dist/collection/components/sula-textfield/sula-textfield.stories.js +69 -5
  6. package/dist/collection/components/sula-textfield/sula-textfield.stories.js.map +1 -1
  7. package/dist/components/sula-textfield.js +51 -15
  8. package/dist/components/sula-textfield.js.map +1 -1
  9. package/dist/esm/sula-avatar_21.entry.js +51 -15
  10. package/dist/esm/sula-avatar_21.entry.js.map +1 -1
  11. package/dist/types/components/sula-textfield/sula-textfield.d.ts +9 -2
  12. package/dist/types/components/sula-textfield/sula-textfield.stories.d.ts +1 -0
  13. package/dist/types/components.d.ts +4 -6
  14. package/dist/webcomponents/{p-3c319b71.entry.js → p-f1a4d84f.entry.js} +66 -29
  15. package/dist/webcomponents/p-f1a4d84f.entry.js.map +1 -0
  16. package/dist/webcomponents/webcomponents.esm.js +1 -1
  17. package/package.json +1 -1
  18. package/dist/webcomponents/p-3c319b71.entry.js.map +0 -1
package/dist/collection/components/sula-textfield/sula-textfield.js CHANGED
@@ -11,10 +11,6 @@ export class SulaTextfield {
11
11
  * The textfield status
12
12
  */
13
13
  this.status = SulaTextfieldStatus.Default;
14
- /**
15
- * Max input length used to switch between the first and second mask pattern.
16
- */
17
- this.maskPatternSwitchMaxLength = 14;
18
14
  this.inputIsOpen = false;
19
15
  this.textValue = '';
20
16
  this.showPassword = false;
@@ -133,13 +129,13 @@ export class SulaTextfield {
133
129
  }
134
130
  }
135
131
  handleInputMask(inputValue) {
136
- var _a;
132
+ var _a, _b;
137
133
  if (!this.inputElement)
138
134
  return;
139
- const maskPattern = this.getMaskPatternByValueLength(inputValue);
135
+ const valueWithoutMask = ((_a = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _a !== void 0 ? _a : '').replace(/[^a-zA-Z0-9]/g, '');
136
+ const maskPattern = this.getMaskPatternByValueLength(valueWithoutMask, (_b = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _b !== void 0 ? _b : '');
140
137
  if (!maskPattern)
141
138
  return;
142
- const valueWithoutMask = ((_a = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _a !== void 0 ? _a : '').replace(/[^a-zA-Z0-9]/g, '');
143
139
  VMasker(this.inputElement).unMask();
144
140
  this.inputElement.value = VMasker.toPattern(valueWithoutMask, maskPattern);
145
141
  }
@@ -166,17 +162,57 @@ export class SulaTextfield {
166
162
  }
167
163
  return [];
168
164
  }
169
- getMaskPatternByValueLength(inputValue) {
170
- var _a, _b, _c;
165
+ getMaskPatternByValueLength(inputValue, rawInputValue) {
171
166
  const patterns = this.getMaskPatterns();
172
167
  if (patterns.length === 0)
173
168
  return undefined;
174
169
  if (patterns.length === 1)
175
170
  return patterns[0];
176
- 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;
177
- const switchMaxLength = (_c = this.maskPatternSwitchMaxLength) !== null && _c !== void 0 ? _c : 14;
178
- const selectedIndex = currentValueLength > switchMaxLength ? 1 : 0;
179
- return patterns[Math.min(selectedIndex, patterns.length - 1)];
171
+ const currentValueLength = (inputValue !== null && inputValue !== void 0 ? inputValue : '').length;
172
+ const providedSwitchLengths = this.normalizeProvidedSwitchLengths();
173
+ if (providedSwitchLengths.length === 0) {
174
+ return this.getMaskPatternByAutoInference(patterns, currentValueLength, rawInputValue);
175
+ }
176
+ for (let i = 0; i < providedSwitchLengths.length; i++) {
177
+ if (currentValueLength <= providedSwitchLengths[i]) {
178
+ return patterns[Math.min(i, patterns.length - 1)];
179
+ }
180
+ }
181
+ return patterns[patterns.length - 1];
182
+ }
183
+ getMaskPatternByAutoInference(patterns, currentValueLength, rawInputValue) {
184
+ const capacities = patterns.map(pattern => (pattern.match(/[9AS]/g) || []).length);
185
+ const eligibleCapacities = capacities.filter(capacity => capacity >= currentValueLength && capacity > 0);
186
+ if (eligibleCapacities.length === 0) {
187
+ return patterns[patterns.length - 1];
188
+ }
189
+ const selectedCapacity = Math.min(...eligibleCapacities);
190
+ const candidateIndexes = capacities
191
+ .map((capacity, index) => ({ capacity, index }))
192
+ .filter(item => item.capacity === selectedCapacity)
193
+ .map(item => item.index);
194
+ if (candidateIndexes.length === 1) {
195
+ return patterns[candidateIndexes[0]];
196
+ }
197
+ const rawLiterals = (rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : '').replace(/[a-zA-Z0-9]/g, '');
198
+ if (rawLiterals.length > 0) {
199
+ for (const candidateIndex of candidateIndexes) {
200
+ const patternLiterals = patterns[candidateIndex].replace(/[9AS]/g, '');
201
+ if (patternLiterals === rawLiterals) {
202
+ return patterns[candidateIndex];
203
+ }
204
+ }
205
+ }
206
+ return patterns[candidateIndexes[0]];
207
+ }
208
+ normalizeProvidedSwitchLengths() {
209
+ if (Array.isArray(this.maskPatternSwitchMaxLength)) {
210
+ return this.maskPatternSwitchMaxLength.filter(value => Number.isFinite(value) && value > 0).sort((a, b) => a - b);
211
+ }
212
+ if (typeof this.maskPatternSwitchMaxLength === 'number' && Number.isFinite(this.maskPatternSwitchMaxLength) && this.maskPatternSwitchMaxLength > 0) {
213
+ return [this.maskPatternSwitchMaxLength];
214
+ }
215
+ return [];
180
216
  }
181
217
  handlePasswordIconClicked() {
182
218
  const cursorPosition = this.inputElement.selectionStart;
@@ -196,14 +232,14 @@ export class SulaTextfield {
196
232
  return this.icon;
197
233
  }
198
234
  render() {
199
- return (h(Host, { key: 'b857d08cc9d53c1cfaa87a573d52026b9b72d088', ref: node => (this.node = node) }, h("div", { key: 'd173e497fbe8c78b899a1e66784d411981008abb' }, h("div", { key: 'bc1682f30d7ffb0eb890baba6d126d3cdbaf3a20', id: "button-container", class: {
235
+ return (h(Host, { key: '0dbf51792e5bdc43328820106b083d194bbcae61', ref: node => (this.node = node) }, h("div", { key: '3659f51f5a9d0c75909e6a6939b8ff1b5c25e377' }, h("div", { key: '320da879fdea605e95525f54607c9cb285446133', id: "button-container", class: {
200
236
  'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
201
237
  'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
202
238
  'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
203
239
  'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
204
240
  'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
205
241
  'bg-surface-body border-line-input cursor-pointer': !this.disabled,
206
- }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '7e78f2a5b2d0bd3111ddfec6a592d907ac1aa078', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'd0419a71fb3372d34b07625acd95bae71b1133a0', class: "font-bold text-sm text-text-primary from-down" }, this.label), 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 }))), 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) && (h("div", { key: 'bc78873f12cd069f1987dddbfd9eea29f5c07c8e', class: "flex items-center justify-center", onClick: this.handleIconClick }, 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 && (h("div", { key: 'e6cc2bed4087a75fe8ed2541af38e44778144485', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (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 && (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)))))));
242
+ }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '44777180c60bb9a21ef64cffd98f465cf15af446', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '75bc3b05a66ed7c00915842b275faf657b1784b3', class: "font-bold text-sm text-text-primary from-down" }, this.label), 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 }))), 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) && (h("div", { key: '55dba31d1ca9d6b213900b9a2d3aa02044b246ef', class: "flex items-center justify-center", onClick: this.handleIconClick }, 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 && (h("div", { key: '0c68e89181316ffed13f212a5c7f6ba78372e83c', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (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 && (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)))))));
207
243
  }
208
244
  static get is() { return "sula-textfield"; }
209
245
  static get encapsulation() { return "shadow"; }
@@ -428,20 +464,19 @@ export class SulaTextfield {
428
464
  "attribute": "mask-pattern-switch-max-length",
429
465
  "mutable": false,
430
466
  "complexType": {
431
- "original": "number",
432
- "resolved": "number",
467
+ "original": "number | number[]",
468
+ "resolved": "number | number[]",
433
469
  "references": {}
434
470
  },
435
471
  "required": false,
436
- "optional": false,
472
+ "optional": true,
437
473
  "docs": {
438
474
  "tags": [],
439
- "text": "Max input length used to switch between the first and second mask pattern."
475
+ "text": "Optional manual switch lengths used to switch between mask patterns.\nIf not provided, switch lengths are automatically inferred from `maskPattern`.\n\n- When number: switches between first and second pattern at this length\n- When array: defines multiple switch points for multiple patterns\n Example: [11, 14] means 0-11 uses first pattern, 12-14 uses second, 15+ uses third"
440
476
  },
441
477
  "getter": false,
442
478
  "setter": false,
443
- "reflect": false,
444
- "defaultValue": "14"
479
+ "reflect": false
445
480
  }
446
481
  };
447
482
  }
package/dist/collection/components/sula-textfield/sula-textfield.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sula-textfield.js","sourceRoot":"","sources":["../../../src/components/sula-textfield/sula-textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\nimport VMasker from 'vanilla-masker';\n\n@Component({\n tag: 'sula-textfield',\n styleUrl: 'sula-textfield.scss',\n shadow: true,\n})\nexport class SulaTextfield {\n /**\n * Value for the input.\n */\n @Prop({ mutable: true })\n value?: string;\n\n /**\n * The textfield type\n */\n @Prop() type: SulaTextfieldType = SulaTextfieldType.Text;\n\n /**\n * The textfield status\n */\n @Prop({ mutable: true }) status: SulaTextfieldStatus = SulaTextfieldStatus.Default;\n\n /**\n * The textfield label\n */\n @Prop() label: string;\n\n /**\n * The textfield placeholder\n */\n @Prop() placeholder: string;\n\n /**\n * The textfield is disabled\n */\n @Prop({ mutable: true }) disabled: boolean;\n\n /**\n * The help text for textfield\n */\n @Prop() helpText?: string;\n\n /**\n * The textfield max length\n */\n @Prop() maxLength?: number;\n\n /**\n * The textfield icon\n */\n @Prop() icon?: string;\n\n /**\n * Event emitted when input value changes.\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when input value changes without mask pattern applied.\n */\n @Event()\n valueChangedWithoutMask: EventEmitter<string>;\n\n /**\n * The textfield mask pattern\n * The mask pattern should follow the VMasker pattern format\n * More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern\n */\n @Prop()\n maskPattern?: string | string[];\n\n /**\n * Max input length used to switch between the first and second mask pattern.\n */\n @Prop()\n maskPatternSwitchMaxLength: number = 14;\n\n /**\n * Event emitted when input is focused.\n */\n @Event()\n focusedOn: EventEmitter<void>;\n\n /**\n * Event emitted when input is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n inputIsOpen = false;\n\n @State()\n textValue: string = '';\n\n @State()\n showPassword = false;\n\n @State()\n inputIsFocused = false;\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n const normalizedValue = newValue || '';\n this.textValue = normalizedValue;\n\n if (this.inputElement && this.inputElement.value !== normalizedValue) {\n const cursorPosition = this.inputElement.selectionStart;\n this.inputElement.value = normalizedValue;\n\n if (this.hasMaskPatternConfigured()) {\n this.handleInputMask(normalizedValue);\n this.textValue = this.inputElement.value;\n }\n\n if (this.inputIsFocused && cursorPosition !== null) {\n const newPosition = Math.min(cursorPosition, this.inputElement.value.length);\n this.inputElement.setSelectionRange(newPosition, newPosition);\n }\n }\n\n if (this.textValue && this.textValue.trim().length > 0) {\n this.inputIsOpen = true;\n this.changeElementsStyle();\n } else if (!this.inputIsFocused) {\n this.inputIsOpen = false;\n this.changeElementsStyle();\n }\n }\n\n @Watch('maskPattern')\n watchMaskPatternHandler() {\n this.syncMaskState();\n }\n\n @Watch('maskPatternSwitchMaxLength')\n watchMaskPatternSwitchMaxLengthHandler() {\n this.syncMaskState();\n }\n\n inputContainer: HTMLDivElement;\n inputElement: HTMLInputElement;\n labelElement: HTMLDivElement;\n\n node?: HTMLElement;\n\n @Listen('click', { target: 'document' })\n handleClick(event: Event) {\n if (!this.node || !this.inputIsFocused) return;\n\n const clickInside = this.node.contains(event.target as Node);\n\n if (!clickInside) {\n this.toggleOptions(false);\n this.focusedOut.emit();\n this.inputIsFocused = false;\n }\n }\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n this.inputIsOpen = true;\n }\n }\n\n componentDidLoad() {\n if (this.value && this.value.trim().length > 0 && this.inputElement) {\n this.inputElement.value = this.value;\n this.textValue = this.value;\n }\n \n if (this.textValue && this.textValue.trim().length > 0) {\n this.changeElementsStyle();\n }\n\n if (this.hasMaskPatternConfigured() && this.inputElement) {\n this.handleInputMask();\n this.textValue = this.inputElement.value;\n this.value = this.inputElement.value;\n }\n }\n\n handleInputClick = () => {\n this.toggleOptions(true);\n };\n\n toggleOptions(inputIsOpen: boolean) {\n if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) || this.disabled) return;\n\n this.inputIsOpen = inputIsOpen;\n this.changeElementsStyle();\n this.inputElement.focus();\n }\n\n changeElementsStyle() {\n if (!this.inputContainer || !this.labelElement) return;\n\n this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';\n this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';\n if (!this.inputIsOpen) {\n this.labelElement.classList.add('from-up');\n }\n }\n\n handleInputChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLInputElement).value;\n let valueToPersist = newValue;\n\n if (this.hasMaskPatternConfigured() && this.inputElement) {\n this.handleInputMask(newValue);\n valueToPersist = this.inputElement.value;\n }\n this.valueChangedWithoutMask.emit(valueToPersist.replace(/\\D/g, ''));\n this.textValue = valueToPersist;\n this.value = valueToPersist;\n\n this.valueChanged.emit(valueToPersist);\n };\n\n handleFocus = () => {\n if (this.disabled) return;\n this.toggleOptions(true);\n this.inputElement.focus();\n };\n\n handleBlur = () => {\n this.toggleOptions(false);\n\n this.focusedOut.emit();\n this.inputIsFocused = false;\n };\n\n handleInputFocus = () => {\n this.focusedOn.emit();\n this.inputIsFocused = true;\n };\n\n handleIconClick = (event: MouseEvent) => {\n if (this.type === SulaTextfieldType.Password) {\n event.stopPropagation();\n this.handlePasswordIconClicked();\n }\n };\n\n handleInputMask(inputValue?: string) {\n if (!this.inputElement) return;\n\n const maskPattern = this.getMaskPatternByValueLength(inputValue);\n if (!maskPattern) return;\n\n const valueWithoutMask = (inputValue ?? this.inputElement.value ?? '').replace(/[^a-zA-Z0-9]/g, '');\n VMasker(this.inputElement).unMask();\n this.inputElement.value = (VMasker as any).toPattern(valueWithoutMask, maskPattern);\n }\n\n private syncMaskState() {\n if (!this.inputElement) return;\n\n if (!this.hasMaskPatternConfigured()) {\n VMasker(this.inputElement).unMask();\n return;\n }\n\n this.handleInputMask();\n this.textValue = this.inputElement.value;\n this.value = this.inputElement.value;\n }\n\n private hasMaskPatternConfigured(): boolean {\n return this.getMaskPatterns().length > 0;\n }\n\n private getMaskPatterns(): string[] {\n if (Array.isArray(this.maskPattern)) {\n return this.maskPattern.map(pattern => pattern?.trim()).filter(Boolean);\n }\n\n if (typeof this.maskPattern === 'string' && this.maskPattern.trim().length > 0) {\n return [this.maskPattern.trim()];\n }\n\n return [];\n }\n\n private getMaskPatternByValueLength(inputValue?: string): string | undefined {\n const patterns = this.getMaskPatterns();\n if (patterns.length === 0) return undefined;\n if (patterns.length === 1) return patterns[0];\n\n const currentValueLength = (inputValue ?? this.inputElement?.value ?? '').length;\n const switchMaxLength = this.maskPatternSwitchMaxLength ?? 14;\n const selectedIndex = currentValueLength > switchMaxLength ? 1 : 0;\n\n return patterns[Math.min(selectedIndex, patterns.length - 1)];\n }\n\n handlePasswordIconClicked() {\n const cursorPosition = this.inputElement.selectionStart;\n const inputValue = this.inputElement.value;\n const inputType = this.showPassword ? SulaTextfieldType.Password : SulaTextfieldType.Text;\n\n this.inputElement.setAttribute('type', inputType);\n this.showPassword = !this.showPassword;\n\n setTimeout(() => {\n this.inputElement.value = inputValue;\n\n this.inputElement.setSelectionRange(cursorPosition, cursorPosition);\n }, 0);\n }\n\n getInputIcon() {\n if (this.type === SulaTextfieldType.Password) {\n return this.showPassword ? 'ph ph-eye' : 'ph ph-eye-slash';\n }\n\n return this.icon;\n }\n\n render() {\n return (\n <Host ref={node => (this.node = node)}>\n <div>\n <div\n id=\"button-container\"\n class={{\n 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,\n 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,\n 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,\n 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,\n 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n 'bg-surface-body border-line-input cursor-pointer': !this.disabled,\n }}\n tabIndex={0}\n onFocus={this.handleFocus}\n onClick={this.handleInputClick}\n >\n {!this.disabled && (\n <div class={{ 'hidden flex-col w-full': true, 'pr-12': !!this.icon }} ref={node => (this.inputContainer = node)}>\n <label class=\"font-bold text-sm text-text-primary from-down\">{this.label}</label>\n <input\n type={this.type}\n ref={node => (this.inputElement = node)}\n placeholder={this.placeholder}\n class=\"outline-none text-base text-text-primary bg-transparent\"\n onInput={this.handleInputChanges}\n onFocus={this.handleInputFocus}\n value={this.textValue}\n />\n </div>\n )}\n\n <div\n id=\"textfield-label\"\n class={{ 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }}\n ref={node => (this.labelElement = node)}\n >\n {this.label}\n </div>\n\n {(!!this.icon || this.type === SulaTextfieldType.Password) && (\n <div class=\"flex items-center justify-center\" onClick={this.handleIconClick}>\n <sula-icon icon={this.getInputIcon()} customClass={`text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`} />\n </div>\n )}\n </div>\n\n {(this.helpText || this.maxLength) && !this.disabled && (\n <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n {this.helpText && (\n <div\n id=\"textfield-help-text\"\n class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n >\n {this.helpText}\n </div>\n )}\n {this.maxLength && (\n <div\n id=\"max-length-container\"\n class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n >\n {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"sula-textfield.js","sourceRoot":"","sources":["../../../src/components/sula-textfield/sula-textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\nimport VMasker from 'vanilla-masker';\n\n@Component({\n tag: 'sula-textfield',\n styleUrl: 'sula-textfield.scss',\n shadow: true,\n})\nexport class SulaTextfield {\n /**\n * Value for the input.\n */\n @Prop({ mutable: true })\n value?: string;\n\n /**\n * The textfield type\n */\n @Prop() type: SulaTextfieldType = SulaTextfieldType.Text;\n\n /**\n * The textfield status\n */\n @Prop({ mutable: true }) status: SulaTextfieldStatus = SulaTextfieldStatus.Default;\n\n /**\n * The textfield label\n */\n @Prop() label: string;\n\n /**\n * The textfield placeholder\n */\n @Prop() placeholder: string;\n\n /**\n * The textfield is disabled\n */\n @Prop({ mutable: true }) disabled: boolean;\n\n /**\n * The help text for textfield\n */\n @Prop() helpText?: string;\n\n /**\n * The textfield max length\n */\n @Prop() maxLength?: number;\n\n /**\n * The textfield icon\n */\n @Prop() icon?: string;\n\n /**\n * Event emitted when input value changes.\n */\n @Event()\n valueChanged: EventEmitter<string>;\n\n /**\n * Event emitted when input value changes without mask pattern applied.\n */\n @Event()\n valueChangedWithoutMask: EventEmitter<string>;\n\n /**\n * The textfield mask pattern\n * The mask pattern should follow the VMasker pattern format\n * More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern\n */\n @Prop()\n maskPattern?: string | string[];\n\n /**\n * Optional manual switch lengths used to switch between mask patterns.\n * If not provided, switch lengths are automatically inferred from `maskPattern`.\n *\n * - When number: switches between first and second pattern at this length\n * - When array: defines multiple switch points for multiple patterns\n * Example: [11, 14] means 0-11 uses first pattern, 12-14 uses second, 15+ uses third\n */\n @Prop()\n maskPatternSwitchMaxLength?: number | number[];\n\n /**\n * Event emitted when input is focused.\n */\n @Event()\n focusedOn: EventEmitter<void>;\n\n /**\n * Event emitted when input is focused out.\n */\n @Event()\n focusedOut: EventEmitter<void>;\n\n @State()\n inputIsOpen = false;\n\n @State()\n textValue: string = '';\n\n @State()\n showPassword = false;\n\n @State()\n inputIsFocused = false;\n\n @Watch('value')\n watchValueHandler(newValue: string) {\n const normalizedValue = newValue || '';\n this.textValue = normalizedValue;\n\n if (this.inputElement && this.inputElement.value !== normalizedValue) {\n const cursorPosition = this.inputElement.selectionStart;\n this.inputElement.value = normalizedValue;\n\n if (this.hasMaskPatternConfigured()) {\n this.handleInputMask(normalizedValue);\n this.textValue = this.inputElement.value;\n }\n\n if (this.inputIsFocused && cursorPosition !== null) {\n const newPosition = Math.min(cursorPosition, this.inputElement.value.length);\n this.inputElement.setSelectionRange(newPosition, newPosition);\n }\n }\n\n if (this.textValue && this.textValue.trim().length > 0) {\n this.inputIsOpen = true;\n this.changeElementsStyle();\n } else if (!this.inputIsFocused) {\n this.inputIsOpen = false;\n this.changeElementsStyle();\n }\n }\n\n @Watch('maskPattern')\n watchMaskPatternHandler() {\n this.syncMaskState();\n }\n\n @Watch('maskPatternSwitchMaxLength')\n watchMaskPatternSwitchMaxLengthHandler() {\n this.syncMaskState();\n }\n\n inputContainer: HTMLDivElement;\n inputElement: HTMLInputElement;\n labelElement: HTMLDivElement;\n\n node?: HTMLElement;\n\n @Listen('click', { target: 'document' })\n handleClick(event: Event) {\n if (!this.node || !this.inputIsFocused) return;\n\n const clickInside = this.node.contains(event.target as Node);\n\n if (!clickInside) {\n this.toggleOptions(false);\n this.focusedOut.emit();\n this.inputIsFocused = false;\n }\n }\n\n componentWillLoad() {\n if (this.value && this.value.trim().length > 0) {\n this.textValue = this.value;\n this.inputIsOpen = true;\n }\n }\n\n componentDidLoad() {\n if (this.value && this.value.trim().length > 0 && this.inputElement) {\n this.inputElement.value = this.value;\n this.textValue = this.value;\n }\n\n if (this.textValue && this.textValue.trim().length > 0) {\n this.changeElementsStyle();\n }\n\n if (this.hasMaskPatternConfigured() && this.inputElement) {\n this.handleInputMask();\n this.textValue = this.inputElement.value;\n this.value = this.inputElement.value;\n }\n }\n\n handleInputClick = () => {\n this.toggleOptions(true);\n };\n\n toggleOptions(inputIsOpen: boolean) {\n if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) || this.disabled) return;\n\n this.inputIsOpen = inputIsOpen;\n this.changeElementsStyle();\n this.inputElement.focus();\n }\n\n changeElementsStyle() {\n if (!this.inputContainer || !this.labelElement) return;\n\n this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';\n this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';\n if (!this.inputIsOpen) {\n this.labelElement.classList.add('from-up');\n }\n }\n\n handleInputChanges = (event: InputEvent) => {\n const newValue = (event.target as HTMLInputElement).value;\n let valueToPersist = newValue;\n\n if (this.hasMaskPatternConfigured() && this.inputElement) {\n this.handleInputMask(newValue);\n valueToPersist = this.inputElement.value;\n }\n this.valueChangedWithoutMask.emit(valueToPersist.replace(/\\D/g, ''));\n this.textValue = valueToPersist;\n this.value = valueToPersist;\n\n this.valueChanged.emit(valueToPersist);\n };\n\n handleFocus = () => {\n if (this.disabled) return;\n this.toggleOptions(true);\n this.inputElement.focus();\n };\n\n handleBlur = () => {\n this.toggleOptions(false);\n\n this.focusedOut.emit();\n this.inputIsFocused = false;\n };\n\n handleInputFocus = () => {\n this.focusedOn.emit();\n this.inputIsFocused = true;\n };\n\n handleIconClick = (event: MouseEvent) => {\n if (this.type === SulaTextfieldType.Password) {\n event.stopPropagation();\n this.handlePasswordIconClicked();\n }\n };\n\n handleInputMask(inputValue?: string) {\n if (!this.inputElement) return;\n\n const valueWithoutMask = (inputValue ?? this.inputElement.value ?? '').replace(/[^a-zA-Z0-9]/g, '');\n const maskPattern = this.getMaskPatternByValueLength(valueWithoutMask, inputValue ?? this.inputElement.value ?? '');\n if (!maskPattern) return;\n\n VMasker(this.inputElement).unMask();\n this.inputElement.value = (VMasker as any).toPattern(valueWithoutMask, maskPattern);\n }\n\n private syncMaskState() {\n if (!this.inputElement) return;\n\n if (!this.hasMaskPatternConfigured()) {\n VMasker(this.inputElement).unMask();\n return;\n }\n\n this.handleInputMask();\n this.textValue = this.inputElement.value;\n this.value = this.inputElement.value;\n }\n\n private hasMaskPatternConfigured(): boolean {\n return this.getMaskPatterns().length > 0;\n }\n\n private getMaskPatterns(): string[] {\n if (Array.isArray(this.maskPattern)) {\n return this.maskPattern.map(pattern => pattern?.trim()).filter(Boolean);\n }\n\n if (typeof this.maskPattern === 'string' && this.maskPattern.trim().length > 0) {\n return [this.maskPattern.trim()];\n }\n\n return [];\n }\n\n private getMaskPatternByValueLength(inputValue?: string, rawInputValue?: string): string | undefined {\n const patterns = this.getMaskPatterns();\n if (patterns.length === 0) return undefined;\n if (patterns.length === 1) return patterns[0];\n\n const currentValueLength = (inputValue ?? '').length;\n const providedSwitchLengths = this.normalizeProvidedSwitchLengths();\n\n if (providedSwitchLengths.length === 0) {\n return this.getMaskPatternByAutoInference(patterns, currentValueLength, rawInputValue);\n }\n\n for (let i = 0; i < providedSwitchLengths.length; i++) {\n if (currentValueLength <= providedSwitchLengths[i]) {\n return patterns[Math.min(i, patterns.length - 1)];\n }\n }\n\n return patterns[patterns.length - 1];\n }\n\n private getMaskPatternByAutoInference(patterns: string[], currentValueLength: number, rawInputValue?: string): string {\n const capacities = patterns.map(pattern => (pattern.match(/[9AS]/g) || []).length);\n const eligibleCapacities = capacities.filter(capacity => capacity >= currentValueLength && capacity > 0);\n\n if (eligibleCapacities.length === 0) {\n return patterns[patterns.length - 1];\n }\n\n const selectedCapacity = Math.min(...eligibleCapacities);\n const candidateIndexes = capacities\n .map((capacity, index) => ({ capacity, index }))\n .filter(item => item.capacity === selectedCapacity)\n .map(item => item.index);\n\n if (candidateIndexes.length === 1) {\n return patterns[candidateIndexes[0]];\n }\n\n const rawLiterals = (rawInputValue ?? '').replace(/[a-zA-Z0-9]/g, '');\n if (rawLiterals.length > 0) {\n for (const candidateIndex of candidateIndexes) {\n const patternLiterals = patterns[candidateIndex].replace(/[9AS]/g, '');\n if (patternLiterals === rawLiterals) {\n return patterns[candidateIndex];\n }\n }\n }\n\n return patterns[candidateIndexes[0]];\n }\n\n private normalizeProvidedSwitchLengths(): number[] {\n if (Array.isArray(this.maskPatternSwitchMaxLength)) {\n return this.maskPatternSwitchMaxLength.filter(value => Number.isFinite(value) && value > 0).sort((a, b) => a - b);\n }\n\n if (typeof this.maskPatternSwitchMaxLength === 'number' && Number.isFinite(this.maskPatternSwitchMaxLength) && this.maskPatternSwitchMaxLength > 0) {\n return [this.maskPatternSwitchMaxLength];\n }\n\n return [];\n }\n\n handlePasswordIconClicked() {\n const cursorPosition = this.inputElement.selectionStart;\n const inputValue = this.inputElement.value;\n const inputType = this.showPassword ? SulaTextfieldType.Password : SulaTextfieldType.Text;\n\n this.inputElement.setAttribute('type', inputType);\n this.showPassword = !this.showPassword;\n\n setTimeout(() => {\n this.inputElement.value = inputValue;\n\n this.inputElement.setSelectionRange(cursorPosition, cursorPosition);\n }, 0);\n }\n\n getInputIcon() {\n if (this.type === SulaTextfieldType.Password) {\n return this.showPassword ? 'ph ph-eye' : 'ph ph-eye-slash';\n }\n\n return this.icon;\n }\n\n render() {\n return (\n <Host ref={node => (this.node = node)}>\n <div>\n <div\n id=\"button-container\"\n class={{\n 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,\n 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,\n 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,\n 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,\n 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n 'bg-surface-body border-line-input cursor-pointer': !this.disabled,\n }}\n tabIndex={0}\n onFocus={this.handleFocus}\n onClick={this.handleInputClick}\n >\n {!this.disabled && (\n <div class={{ 'hidden flex-col w-full': true, 'pr-12': !!this.icon }} ref={node => (this.inputContainer = node)}>\n <label class=\"font-bold text-sm text-text-primary from-down\">{this.label}</label>\n <input\n type={this.type}\n ref={node => (this.inputElement = node)}\n placeholder={this.placeholder}\n class=\"outline-none text-base text-text-primary bg-transparent\"\n onInput={this.handleInputChanges}\n onFocus={this.handleInputFocus}\n value={this.textValue}\n />\n </div>\n )}\n\n <div\n id=\"textfield-label\"\n class={{ 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }}\n ref={node => (this.labelElement = node)}\n >\n {this.label}\n </div>\n\n {(!!this.icon || this.type === SulaTextfieldType.Password) && (\n <div class=\"flex items-center justify-center\" onClick={this.handleIconClick}>\n <sula-icon icon={this.getInputIcon()} customClass={`text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`} />\n </div>\n )}\n </div>\n\n {(this.helpText || this.maxLength) && !this.disabled && (\n <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n {this.helpText && (\n <div\n id=\"textfield-help-text\"\n class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n >\n {this.helpText}\n </div>\n )}\n {this.maxLength && (\n <div\n id=\"max-length-container\"\n class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n >\n {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/sula-textfield/sula-textfield.stories.js CHANGED
@@ -95,9 +95,34 @@ textfield.placeholder = '00.000.000/0000-00';
95
95
  },
96
96
  },
97
97
  maskPatternSwitchMaxLength: {
98
- control: 'number',
98
+ control: 'object',
99
99
  defaultValue: 14,
100
- description: 'Max length to switch between maskPattern[0] and maskPattern[1]',
100
+ description: `Define o ponto de troca entre padrões de máscara.
101
+
102
+ **Aceita dois tipos:**
103
+
104
+ **1. Número (comportamento legado):**
105
+ - Troca entre primeira e segunda máscara quando ultrapassar este tamanho
106
+ - Exemplo: \`maskPatternSwitchMaxLength: 14\`
107
+
108
+ **2. Array de números (múltiplas máscaras):**
109
+ - Define vários pontos de troca para múltiplas máscaras
110
+ - Os comprimentos são baseados APENAS nos caracteres válidos (sem formatação)
111
+
112
+ **Exemplo: CPF/CNPJ**
113
+ - \`maskPattern: ['999.999.999-99', '99.999.999/9999-99']\`
114
+ - \`maskPatternSwitchMaxLength: [11]\`
115
+ - Resultado:
116
+ - 0-11 caracteres → CPF
117
+ - 12+ caracteres → CNPJ
118
+
119
+ **Exemplo: 3 máscaras**
120
+ - \`maskPattern: ['999.999.999-99', '99.999.999/9999-99', '99999-99999-99999']\`
121
+ - \`maskPatternSwitchMaxLength: [11, 14]\`
122
+ - Resultado:
123
+ - 0-11 caracteres → 1ª máscara
124
+ - 12-14 caracteres → 2ª máscara
125
+ - 15+ caracteres → 3ª máscara`,
101
126
  type: {
102
127
  required: false,
103
128
  },
@@ -181,6 +206,8 @@ const Template = args => {
181
206
  el.disabled = args.disabled;
182
207
  if (args.maskPattern)
183
208
  el.maskPattern = args.maskPattern;
209
+ if (args.maskPatternSwitchMaxLength)
210
+ el.maskPatternSwitchMaxLength = args.maskPatternSwitchMaxLength;
184
211
  if (args.helpText)
185
212
  el.helpText = args.helpText;
186
213
  if (args.maxLength > 0)
@@ -227,11 +254,48 @@ WithCpfCnpjMask.args = {
227
254
  label: 'CPF ou CNPJ',
228
255
  placeholder: 'Digite CPF ou CNPJ',
229
256
  disabled: false,
230
- helpText: '',
257
+ helpText: 'Digite apenas números - a máscara será aplicada automaticamente',
231
258
  maxLength: 0,
232
259
  icon: '',
233
- maskPattern: ['999.999.999-99', '99.999.999/9999-99'],
234
- maskPatternSwitchMaxLength: 14,
260
+ maskPattern: ['SSS.SSS.SSS-SS', 'SS.SSS.SSS/SSSS-99'],
261
+ };
262
+ WithCpfCnpjMask.parameters = {
263
+ docs: {
264
+ description: {
265
+ story: `Exemplo de campo com múltiplas máscaras que alterna automaticamente entre CPF e CNPJ.
266
+
267
+ - **0-11 dígitos**: formato CPF (SSS.SSS.SSS-SS)
268
+ - **12-14 dígitos**: formato CNPJ (SS.SSS.SSS/SSSS-99)
269
+
270
+ O componente detecta automaticamente a quantidade de caracteres **sem formatação** e aplica a máscara correta.`,
271
+ },
272
+ },
273
+ };
274
+ export const WithMultipleMasks = Template.bind({});
275
+ WithMultipleMasks.args = {
276
+ value: '',
277
+ type: SulaTextfieldType.Text,
278
+ status: SulaTextfieldStatus.Default,
279
+ label: 'CPF, CNPJ ou Protocolo',
280
+ placeholder: 'Digite CPF, CNPJ ou protocolo',
281
+ disabled: false,
282
+ helpText: 'Aceita CPF (11), CNPJ (14) ou protocolo (15)',
283
+ maxLength: 0,
284
+ icon: 'ph ph-id-card',
285
+ maskPattern: ['SSS.SSS.SSS-SS', 'SS.SSS.SSS/SSSS-99', 'SSSSS-SSSSS-SSSSS'],
286
+ };
287
+ WithMultipleMasks.parameters = {
288
+ docs: {
289
+ description: {
290
+ story: `Exemplo com 3 máscaras diferentes e tamanhos distintos:
291
+
292
+ - **0-11 caracteres**: CPF (SSS.SSS.SSS-SS)
293
+ - **12-14 caracteres**: CNPJ (SS.SSS.SSS/SSSS-99)
294
+ - **15+ caracteres**: Protocolo (SSSSS-SSSSS-SSSSS)
295
+
296
+ Utilize \`maskPatternSwitchMaxLength\` como array para definir quantas máscaras você precisar!`,
297
+ },
298
+ },
235
299
  };
236
300
  export const WithValue = Template.bind({});
237
301
  WithValue.args = Object.assign(Object.assign({}, Default.args), { value: 'John Doe', label: 'Nome completo' });
package/dist/collection/components/sula-textfield/sula-textfield.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sula-textfield.stories.js","sourceRoot":"","sources":["../../../src/components/sula-textfield/sula-textfield.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\n\nexport default {\n title: 'Components/sula-textfield',\n tags: ['autodocs'],\n argTypes: {\n value: {\n control: 'text',\n defaultValue: '',\n description: 'Value for the input',\n type: {\n required: false,\n },\n },\n type: {\n control: { type: 'select' },\n options: Object.values(SulaTextfieldType),\n defaultValue: SulaTextfieldType.Text,\n description: 'The textfield type',\n type: {\n required: false,\n },\n },\n status: {\n control: { type: 'select' },\n options: Object.values(SulaTextfieldStatus),\n defaultValue: SulaTextfieldStatus.Default,\n description: 'The textfield status',\n type: {\n required: false,\n },\n },\n label: {\n control: 'text',\n defaultValue: 'Label',\n description: 'The textfield label',\n type: {\n required: false,\n },\n },\n maskPattern: {\n control: 'object',\n defaultValue: '',\n description: `Padrão de máscara utilizando vanilla-masker.\n\n**Caracteres disponíveis:**\n- \\`9\\` → Aceita apenas números (0-9)\n- \\`A\\` → Aceita apenas letras (a-z, A-Z)\n- \\`S\\` → Aceita letras e números\n- Outros caracteres são tratados como literais (parênteses, traços, pontos, etc.)\n\n**Exemplos de máscaras comuns:**\n- Telefone: \\`(99) 99999-9999\\`\n- CPF: \\`999.999.999-99\\`\n- CNPJ: \\`SS.SSS.SSS/SSSS-99\\` (alfanumérico)\n- CEP: \\`99999-999\\`\n- Data: \\`99/99/9999\\`\n- Cartão de crédito: \\`9999 9999 9999 9999\\`\n- Hora: \\`99:99\\`\n- Placa de carro: \\`AAA-9A99\\`\n\n**Formas de uso:**\n\n1. **Via HTML:**\n\\`\\`\\`html\n<sula-textfield \n label=\"Telefone\" \n mask-pattern=\"(99) 99999-9999\"\n placeholder=\"(00) 00000-0000\">\n</sula-textfield>\n\\`\\`\\`\n\n2. **Via JavaScript:**\n\\`\\`\\`javascript\nconst textfield = document.createElement('sula-textfield');\ntextfield.label = 'CNPJ';\ntextfield.maskPattern = 'SS.SSS.SSS/SSSS-99';\ntextfield.placeholder = '00.000.000/0000-00';\n\\`\\`\\`\n\n3. **Via Framework (React, Angular, Vue):**\n\\`\\`\\`jsx\n<sula-textfield \n label=\"CEP\"\n mask-pattern=\"99999-999\"\n placeholder=\"00000-000\">\n</sula-textfield>\n\\`\\`\\`\n\n**Observações:**\n- A máscara é apenas visual (formata mas não valida)\n- O valor emitido no evento \\`valueChanged\\` já vem formatado\n- A máscara é aplicada automaticamente conforme o usuário digita`,\n type: {\n required: false,\n },\n },\n maskPatternSwitchMaxLength: {\n control: 'number',\n defaultValue: 14,\n description: 'Max length to switch between maskPattern[0] and maskPattern[1]',\n type: {\n required: false,\n },\n },\n placeholder: {\n control: 'text',\n defaultValue: 'Placeholder',\n description: 'The textfield placeholder',\n type: {\n required: false,\n },\n },\n disabled: {\n control: 'boolean',\n defaultValue: false,\n description: 'The textfield is disabled',\n type: {\n required: false,\n },\n },\n helpText: {\n control: 'text',\n defaultValue: '',\n description: 'The help text for textfield',\n type: {\n required: false,\n },\n },\n maxLength: {\n control: 'number',\n defaultValue: 0,\n description: 'The textfield max length',\n type: {\n required: false,\n },\n },\n icon: {\n control: 'text',\n defaultValue: '',\n description: 'The textfield icon',\n type: {\n required: false,\n },\n },\n valueChanged: {\n action: 'valueChanged',\n description: 'Evento emitido quando o valor muda',\n },\n valueChangedWithoutMask: {\n action: 'valueChangedWithoutMask',\n description: 'Evento emitido quando o valor muda, sem a máscara (se aplicada)',\n },\n focusedOn: {\n action: 'focusedOn',\n description: 'Evento emitido quando o campo recebe foco',\n },\n focusedOut: {\n action: 'focusedOut',\n description: 'Evento emitido quando o campo perde foco',\n },\n },\n parameters: {\n docs: {\n description: {\n component:\n 'O componente Textfield Sula Design System é utilizado para inclusão de informações em formulários e telas de cadastro. Foi desenvolvido suportando feedback text, helped text, ícones e senhas.',\n },\n },\n },\n};\n\nconst Template = args => {\n const container = document.createElement('div');\n container.style.maxWidth = '400px';\n container.style.margin = '20px';\n\n const el = document.createElement('sula-textfield') as any;\n\n if (args.value) el.value = args.value;\n el.type = args.type;\n el.status = args.status;\n el.label = args.label;\n el.placeholder = args.placeholder;\n el.disabled = args.disabled;\n if (args.maskPattern) el.maskPattern = args.maskPattern;\n if (args.helpText) el.helpText = args.helpText;\n if (args.maxLength > 0) el.maxLength = args.maxLength;\n if (args.icon) el.icon = args.icon;\n\n el.addEventListener('valueChanged', args.valueChanged);\n el.addEventListener('valueChangedWithoutMask', args.valueChangedWithoutMask);\n el.addEventListener('focusedOn', args.focusedOn);\n el.addEventListener('focusedOut', args.focusedOut);\n\n container.appendChild(el);\n\n return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n value: '',\n type: SulaTextfieldType.Text,\n status: SulaTextfieldStatus.Default,\n label: 'Nome',\n placeholder: 'Digite seu nome',\n disabled: false,\n helpText: '',\n maxLength: 0,\n icon: '',\n};\n\nexport const WithMask = Template.bind({});\nWithMask.args = {\n value: '',\n type: SulaTextfieldType.Text,\n status: SulaTextfieldStatus.Default,\n label: 'Telefone',\n placeholder: 'Digite seu telefone',\n disabled: false,\n helpText: '',\n maxLength: 0,\n icon: '',\n maskPattern: '(99) 99999-9999',\n};\n\nexport const WithCpfCnpjMask = Template.bind({});\nWithCpfCnpjMask.args = {\n value: '',\n type: SulaTextfieldType.Text,\n status: SulaTextfieldStatus.Default,\n label: 'CPF ou CNPJ',\n placeholder: 'Digite CPF ou CNPJ',\n disabled: false,\n helpText: '',\n maxLength: 0,\n icon: '',\n maskPattern: ['999.999.999-99', '99.999.999/9999-99'],\n maskPatternSwitchMaxLength: 14,\n};\n\nexport const WithValue = Template.bind({});\nWithValue.args = {\n ...Default.args,\n value: 'John Doe',\n label: 'Nome completo',\n};\n\nexport const WithHelpText = Template.bind({});\nWithHelpText.args = {\n ...Default.args,\n label: 'E-mail',\n placeholder: 'Digite seu e-mail',\n helpText: 'Informe um e-mail válido',\n};\n\nexport const WithMaxLength = Template.bind({});\nWithMaxLength.args = {\n ...Default.args,\n label: 'Descrição',\n placeholder: 'Digite uma descrição',\n maxLength: 100,\n helpText: 'Máximo de 100 caracteres',\n};\n\nexport const WithIcon = Template.bind({});\nWithIcon.args = {\n ...Default.args,\n label: 'Pesquisar',\n placeholder: 'Digite sua busca',\n icon: 'ph ph-magnifying-glass',\n};\n\nexport const Password = Template.bind({});\nPassword.args = {\n ...Default.args,\n type: SulaTextfieldType.Password,\n label: 'Senha',\n placeholder: 'Digite sua senha',\n};\n\nexport const Error = Template.bind({});\nError.args = {\n ...Default.args,\n status: SulaTextfieldStatus.Error,\n label: 'E-mail',\n placeholder: 'Digite seu e-mail',\n helpText: 'E-mail inválido',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n ...Default.args,\n disabled: true,\n label: 'Campo desabilitado',\n};\n\nexport const WithIconAndHelpText = Template.bind({});\nWithIconAndHelpText.args = {\n ...Default.args,\n label: 'Endereço',\n placeholder: 'Digite seu endereço',\n icon: 'ph ph-map-pin',\n helpText: 'Informe o endereço completo',\n};\n\nexport const ErrorWithMaxLength = Template.bind({});\nErrorWithMaxLength.args = {\n ...Default.args,\n status: SulaTextfieldStatus.Error,\n label: 'Mensagem',\n placeholder: 'Digite sua mensagem',\n maxLength: 50,\n helpText: 'Excedeu o limite de caracteres',\n value: 'Esta é uma mensagem de teste que excede o limite de caracteres permitido',\n};\n"]}
1
+ {"version":3,"file":"sula-textfield.stories.js","sourceRoot":"","sources":["../../../src/components/sula-textfield/sula-textfield.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\n\nexport default {\n title: 'Components/sula-textfield',\n tags: ['autodocs'],\n argTypes: {\n value: {\n control: 'text',\n defaultValue: '',\n description: 'Value for the input',\n type: {\n required: false,\n },\n },\n type: {\n control: { type: 'select' },\n options: Object.values(SulaTextfieldType),\n defaultValue: SulaTextfieldType.Text,\n description: 'The textfield type',\n type: {\n required: false,\n },\n },\n status: {\n control: { type: 'select' },\n options: Object.values(SulaTextfieldStatus),\n defaultValue: SulaTextfieldStatus.Default,\n description: 'The textfield status',\n type: {\n required: false,\n },\n },\n label: {\n control: 'text',\n defaultValue: 'Label',\n description: 'The textfield label',\n type: {\n required: false,\n },\n },\n maskPattern: {\n control: 'object',\n defaultValue: '',\n description: `Padrão de máscara utilizando vanilla-masker.\n\n**Caracteres disponíveis:**\n- \\`9\\` → Aceita apenas números (0-9)\n- \\`A\\` → Aceita apenas letras (a-z, A-Z)\n- \\`S\\` → Aceita letras e números\n- Outros caracteres são tratados como literais (parênteses, traços, pontos, etc.)\n\n**Exemplos de máscaras comuns:**\n- Telefone: \\`(99) 99999-9999\\`\n- CPF: \\`999.999.999-99\\`\n- CNPJ: \\`SS.SSS.SSS/SSSS-99\\` (alfanumérico)\n- CEP: \\`99999-999\\`\n- Data: \\`99/99/9999\\`\n- Cartão de crédito: \\`9999 9999 9999 9999\\`\n- Hora: \\`99:99\\`\n- Placa de carro: \\`AAA-9A99\\`\n\n**Formas de uso:**\n\n1. **Via HTML:**\n\\`\\`\\`html\n<sula-textfield \n label=\"Telefone\" \n mask-pattern=\"(99) 99999-9999\"\n placeholder=\"(00) 00000-0000\">\n</sula-textfield>\n\\`\\`\\`\n\n2. **Via JavaScript:**\n\\`\\`\\`javascript\nconst textfield = document.createElement('sula-textfield');\ntextfield.label = 'CNPJ';\ntextfield.maskPattern = 'SS.SSS.SSS/SSSS-99';\ntextfield.placeholder = '00.000.000/0000-00';\n\\`\\`\\`\n\n3. **Via Framework (React, Angular, Vue):**\n\\`\\`\\`jsx\n<sula-textfield \n label=\"CEP\"\n mask-pattern=\"99999-999\"\n placeholder=\"00000-000\">\n</sula-textfield>\n\\`\\`\\`\n\n**Observações:**\n- A máscara é apenas visual (formata mas não valida)\n- O valor emitido no evento \\`valueChanged\\` já vem formatado\n- A máscara é aplicada automaticamente conforme o usuário digita`,\n type: {\n required: false,\n },\n },\n maskPatternSwitchMaxLength: {\n control: 'object',\n defaultValue: 14,\n description: `Define o ponto de troca entre padrões de máscara.\n\n**Aceita dois tipos:**\n\n**1. Número (comportamento legado):**\n- Troca entre primeira e segunda máscara quando ultrapassar este tamanho\n- Exemplo: \\`maskPatternSwitchMaxLength: 14\\`\n\n**2. Array de números (múltiplas máscaras):**\n- Define vários pontos de troca para múltiplas máscaras\n- Os comprimentos são baseados APENAS nos caracteres válidos (sem formatação)\n\n**Exemplo: CPF/CNPJ**\n- \\`maskPattern: ['999.999.999-99', '99.999.999/9999-99']\\`\n- \\`maskPatternSwitchMaxLength: [11]\\`\n- Resultado:\n - 0-11 caracteres → CPF\n - 12+ caracteres → CNPJ\n\n**Exemplo: 3 máscaras**\n- \\`maskPattern: ['999.999.999-99', '99.999.999/9999-99', '99999-99999-99999']\\`\n- \\`maskPatternSwitchMaxLength: [11, 14]\\`\n- Resultado:\n - 0-11 caracteres → 1ª máscara\n - 12-14 caracteres → 2ª máscara\n - 15+ caracteres → 3ª máscara`,\n type: {\n required: false,\n },\n },\n placeholder: {\n control: 'text',\n defaultValue: 'Placeholder',\n description: 'The textfield placeholder',\n type: {\n required: false,\n },\n },\n disabled: {\n control: 'boolean',\n defaultValue: false,\n description: 'The textfield is disabled',\n type: {\n required: false,\n },\n },\n helpText: {\n control: 'text',\n defaultValue: '',\n description: 'The help text for textfield',\n type: {\n required: false,\n },\n },\n maxLength: {\n control: 'number',\n defaultValue: 0,\n description: 'The textfield max length',\n type: {\n required: false,\n },\n },\n icon: {\n control: 'text',\n defaultValue: '',\n description: 'The textfield icon',\n type: {\n required: false,\n },\n },\n valueChanged: {\n action: 'valueChanged',\n description: 'Evento emitido quando o valor muda',\n },\n valueChangedWithoutMask: {\n action: 'valueChangedWithoutMask',\n description: 'Evento emitido quando o valor muda, sem a máscara (se aplicada)',\n },\n focusedOn: {\n action: 'focusedOn',\n description: 'Evento emitido quando o campo recebe foco',\n },\n focusedOut: {\n action: 'focusedOut',\n description: 'Evento emitido quando o campo perde foco',\n },\n },\n parameters: {\n docs: {\n description: {\n component:\n 'O componente Textfield Sula Design System é utilizado para inclusão de informações em formulários e telas de cadastro. Foi desenvolvido suportando feedback text, helped text, ícones e senhas.',\n },\n },\n },\n};\n\nconst Template = args => {\n const container = document.createElement('div');\n container.style.maxWidth = '400px';\n container.style.margin = '20px';\n\n const el = document.createElement('sula-textfield') as any;\n\n if (args.value) el.value = args.value;\n el.type = args.type;\n el.status = args.status;\n el.label = args.label;\n el.placeholder = args.placeholder;\n el.disabled = args.disabled;\n if (args.maskPattern) el.maskPattern = args.maskPattern;\n if (args.maskPatternSwitchMaxLength) el.maskPatternSwitchMaxLength = args.maskPatternSwitchMaxLength;\n if (args.helpText) el.helpText = args.helpText;\n if (args.maxLength > 0) el.maxLength = args.maxLength;\n if (args.icon) el.icon = args.icon;\n\n el.addEventListener('valueChanged', args.valueChanged);\n el.addEventListener('valueChangedWithoutMask', args.valueChangedWithoutMask);\n el.addEventListener('focusedOn', args.focusedOn);\n el.addEventListener('focusedOut', args.focusedOut);\n\n container.appendChild(el);\n\n return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n value: '',\n type: SulaTextfieldType.Text,\n status: SulaTextfieldStatus.Default,\n label: 'Nome',\n placeholder: 'Digite seu nome',\n disabled: false,\n helpText: '',\n maxLength: 0,\n icon: '',\n};\n\nexport const WithMask = Template.bind({});\nWithMask.args = {\n value: '',\n type: SulaTextfieldType.Text,\n status: SulaTextfieldStatus.Default,\n label: 'Telefone',\n placeholder: 'Digite seu telefone',\n disabled: false,\n helpText: '',\n maxLength: 0,\n icon: '',\n maskPattern: '(99) 99999-9999',\n};\n\nexport const WithCpfCnpjMask = Template.bind({});\nWithCpfCnpjMask.args = {\n value: '',\n type: SulaTextfieldType.Text,\n status: SulaTextfieldStatus.Default,\n label: 'CPF ou CNPJ',\n placeholder: 'Digite CPF ou CNPJ',\n disabled: false,\n helpText: 'Digite apenas números - a máscara será aplicada automaticamente',\n maxLength: 0,\n icon: '',\n maskPattern: ['SSS.SSS.SSS-SS', 'SS.SSS.SSS/SSSS-99'],\n};\nWithCpfCnpjMask.parameters = {\n docs: {\n description: {\n story: `Exemplo de campo com múltiplas máscaras que alterna automaticamente entre CPF e CNPJ.\n\n- **0-11 dígitos**: formato CPF (SSS.SSS.SSS-SS)\n- **12-14 dígitos**: formato CNPJ (SS.SSS.SSS/SSSS-99)\n\nO componente detecta automaticamente a quantidade de caracteres **sem formatação** e aplica a máscara correta.`,\n },\n },\n};\n\nexport const WithMultipleMasks = Template.bind({});\nWithMultipleMasks.args = {\n value: '',\n type: SulaTextfieldType.Text,\n status: SulaTextfieldStatus.Default,\n label: 'CPF, CNPJ ou Protocolo',\n placeholder: 'Digite CPF, CNPJ ou protocolo',\n disabled: false,\n helpText: 'Aceita CPF (11), CNPJ (14) ou protocolo (15)',\n maxLength: 0,\n icon: 'ph ph-id-card',\n maskPattern: ['SSS.SSS.SSS-SS', 'SS.SSS.SSS/SSSS-99', 'SSSSS-SSSSS-SSSSS'],\n};\nWithMultipleMasks.parameters = {\n docs: {\n description: {\n story: `Exemplo com 3 máscaras diferentes e tamanhos distintos:\n\n- **0-11 caracteres**: CPF (SSS.SSS.SSS-SS)\n- **12-14 caracteres**: CNPJ (SS.SSS.SSS/SSSS-99)\n- **15+ caracteres**: Protocolo (SSSSS-SSSSS-SSSSS)\n\nUtilize \\`maskPatternSwitchMaxLength\\` como array para definir quantas máscaras você precisar!`,\n },\n },\n};\n\nexport const WithValue = Template.bind({});\nWithValue.args = {\n ...Default.args,\n value: 'John Doe',\n label: 'Nome completo',\n};\n\nexport const WithHelpText = Template.bind({});\nWithHelpText.args = {\n ...Default.args,\n label: 'E-mail',\n placeholder: 'Digite seu e-mail',\n helpText: 'Informe um e-mail válido',\n};\n\nexport const WithMaxLength = Template.bind({});\nWithMaxLength.args = {\n ...Default.args,\n label: 'Descrição',\n placeholder: 'Digite uma descrição',\n maxLength: 100,\n helpText: 'Máximo de 100 caracteres',\n};\n\nexport const WithIcon = Template.bind({});\nWithIcon.args = {\n ...Default.args,\n label: 'Pesquisar',\n placeholder: 'Digite sua busca',\n icon: 'ph ph-magnifying-glass',\n};\n\nexport const Password = Template.bind({});\nPassword.args = {\n ...Default.args,\n type: SulaTextfieldType.Password,\n label: 'Senha',\n placeholder: 'Digite sua senha',\n};\n\nexport const Error = Template.bind({});\nError.args = {\n ...Default.args,\n status: SulaTextfieldStatus.Error,\n label: 'E-mail',\n placeholder: 'Digite seu e-mail',\n helpText: 'E-mail inválido',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n ...Default.args,\n disabled: true,\n label: 'Campo desabilitado',\n};\n\nexport const WithIconAndHelpText = Template.bind({});\nWithIconAndHelpText.args = {\n ...Default.args,\n label: 'Endereço',\n placeholder: 'Digite seu endereço',\n icon: 'ph ph-map-pin',\n helpText: 'Informe o endereço completo',\n};\n\nexport const ErrorWithMaxLength = Template.bind({});\nErrorWithMaxLength.args = {\n ...Default.args,\n status: SulaTextfieldStatus.Error,\n label: 'Mensagem',\n placeholder: 'Digite sua mensagem',\n maxLength: 50,\n helpText: 'Excedeu o limite de caracteres',\n value: 'Esta é uma mensagem de teste que excede o limite de caracteres permitido',\n};\n"]}
package/dist/components/sula-textfield.js CHANGED
@@ -267,10 +267,6 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
267
267
  * The textfield status
268
268
  */
269
269
  this.status = SulaTextfieldStatus.Default;
270
- /**
271
- * Max input length used to switch between the first and second mask pattern.
272
- */
273
- this.maskPatternSwitchMaxLength = 14;
274
270
  this.inputIsOpen = false;
275
271
  this.textValue = '';
276
272
  this.showPassword = false;
@@ -389,13 +385,13 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
389
385
  }
390
386
  }
391
387
  handleInputMask(inputValue) {
392
- var _a;
388
+ var _a, _b;
393
389
  if (!this.inputElement)
394
390
  return;
395
- const maskPattern = this.getMaskPatternByValueLength(inputValue);
391
+ const valueWithoutMask = ((_a = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _a !== void 0 ? _a : '').replace(/[^a-zA-Z0-9]/g, '');
392
+ const maskPattern = this.getMaskPatternByValueLength(valueWithoutMask, (_b = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _b !== void 0 ? _b : '');
396
393
  if (!maskPattern)
397
394
  return;
398
- const valueWithoutMask = ((_a = inputValue !== null && inputValue !== void 0 ? inputValue : this.inputElement.value) !== null && _a !== void 0 ? _a : '').replace(/[^a-zA-Z0-9]/g, '');
399
395
  VMasker(this.inputElement).unMask();
400
396
  this.inputElement.value = VMasker.toPattern(valueWithoutMask, maskPattern);
401
397
  }
@@ -422,17 +418,57 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
422
418
  }
423
419
  return [];
424
420
  }
425
- getMaskPatternByValueLength(inputValue) {
426
- var _a, _b, _c;
421
+ getMaskPatternByValueLength(inputValue, rawInputValue) {
427
422
  const patterns = this.getMaskPatterns();
428
423
  if (patterns.length === 0)
429
424
  return undefined;
430
425
  if (patterns.length === 1)
431
426
  return patterns[0];
432
- 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;
433
- const switchMaxLength = (_c = this.maskPatternSwitchMaxLength) !== null && _c !== void 0 ? _c : 14;
434
- const selectedIndex = currentValueLength > switchMaxLength ? 1 : 0;
435
- return patterns[Math.min(selectedIndex, patterns.length - 1)];
427
+ const currentValueLength = (inputValue !== null && inputValue !== void 0 ? inputValue : '').length;
428
+ const providedSwitchLengths = this.normalizeProvidedSwitchLengths();
429
+ if (providedSwitchLengths.length === 0) {
430
+ return this.getMaskPatternByAutoInference(patterns, currentValueLength, rawInputValue);
431
+ }
432
+ for (let i = 0; i < providedSwitchLengths.length; i++) {
433
+ if (currentValueLength <= providedSwitchLengths[i]) {
434
+ return patterns[Math.min(i, patterns.length - 1)];
435
+ }
436
+ }
437
+ return patterns[patterns.length - 1];
438
+ }
439
+ getMaskPatternByAutoInference(patterns, currentValueLength, rawInputValue) {
440
+ const capacities = patterns.map(pattern => (pattern.match(/[9AS]/g) || []).length);
441
+ const eligibleCapacities = capacities.filter(capacity => capacity >= currentValueLength && capacity > 0);
442
+ if (eligibleCapacities.length === 0) {
443
+ return patterns[patterns.length - 1];
444
+ }
445
+ const selectedCapacity = Math.min(...eligibleCapacities);
446
+ const candidateIndexes = capacities
447
+ .map((capacity, index) => ({ capacity, index }))
448
+ .filter(item => item.capacity === selectedCapacity)
449
+ .map(item => item.index);
450
+ if (candidateIndexes.length === 1) {
451
+ return patterns[candidateIndexes[0]];
452
+ }
453
+ const rawLiterals = (rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : '').replace(/[a-zA-Z0-9]/g, '');
454
+ if (rawLiterals.length > 0) {
455
+ for (const candidateIndex of candidateIndexes) {
456
+ const patternLiterals = patterns[candidateIndex].replace(/[9AS]/g, '');
457
+ if (patternLiterals === rawLiterals) {
458
+ return patterns[candidateIndex];
459
+ }
460
+ }
461
+ }
462
+ return patterns[candidateIndexes[0]];
463
+ }
464
+ normalizeProvidedSwitchLengths() {
465
+ if (Array.isArray(this.maskPatternSwitchMaxLength)) {
466
+ return this.maskPatternSwitchMaxLength.filter(value => Number.isFinite(value) && value > 0).sort((a, b) => a - b);
467
+ }
468
+ if (typeof this.maskPatternSwitchMaxLength === 'number' && Number.isFinite(this.maskPatternSwitchMaxLength) && this.maskPatternSwitchMaxLength > 0) {
469
+ return [this.maskPatternSwitchMaxLength];
470
+ }
471
+ return [];
436
472
  }
437
473
  handlePasswordIconClicked() {
438
474
  const cursorPosition = this.inputElement.selectionStart;
@@ -452,14 +488,14 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
452
488
  return this.icon;
453
489
  }
454
490
  render() {
455
- return (h(Host, { key: 'b857d08cc9d53c1cfaa87a573d52026b9b72d088', ref: node => (this.node = node) }, h("div", { key: 'd173e497fbe8c78b899a1e66784d411981008abb' }, h("div", { key: 'bc1682f30d7ffb0eb890baba6d126d3cdbaf3a20', id: "button-container", class: {
491
+ return (h(Host, { key: '0dbf51792e5bdc43328820106b083d194bbcae61', ref: node => (this.node = node) }, h("div", { key: '3659f51f5a9d0c75909e6a6939b8ff1b5c25e377' }, h("div", { key: '320da879fdea605e95525f54607c9cb285446133', id: "button-container", class: {
456
492
  'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
457
493
  'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
458
494
  'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
459
495
  'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
460
496
  'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
461
497
  'bg-surface-body border-line-input cursor-pointer': !this.disabled,
462
- }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '7e78f2a5b2d0bd3111ddfec6a592d907ac1aa078', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'd0419a71fb3372d34b07625acd95bae71b1133a0', class: "font-bold text-sm text-text-primary from-down" }, this.label), 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 }))), 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) && (h("div", { key: 'bc78873f12cd069f1987dddbfd9eea29f5c07c8e', class: "flex items-center justify-center", onClick: this.handleIconClick }, 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 && (h("div", { key: 'e6cc2bed4087a75fe8ed2541af38e44778144485', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (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 && (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)))))));
498
+ }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '44777180c60bb9a21ef64cffd98f465cf15af446', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '75bc3b05a66ed7c00915842b275faf657b1784b3', class: "font-bold text-sm text-text-primary from-down" }, this.label), 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 }))), 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) && (h("div", { key: '55dba31d1ca9d6b213900b9a2d3aa02044b246ef', class: "flex items-center justify-center", onClick: this.handleIconClick }, 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 && (h("div", { key: '0c68e89181316ffed13f212a5c7f6ba78372e83c', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (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 && (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)))))));
463
499
  }
464
500
  static get watchers() { return {
465
501
  "value": ["watchValueHandler"],