@sula-tech/webcomponents 0.11.1 → 0.11.3

package/dist/collection/components/sula-textfield/sula-textfield.stories.js

@@ -40,7 +40,56 @@ export default {
         maskPattern: {
             control: 'text',
             defaultValue: '',
-            description: 'The textfield mask pattern',
+            description: `Padrão de máscara utilizando vanilla-masker.
+
+**Caracteres disponíveis:**
+- \`9\` → Aceita apenas números (0-9)
+- \`A\` → Aceita apenas letras (a-z, A-Z)
+- \`S\` → Aceita letras e números
+- Outros caracteres são tratados como literais (parênteses, traços, pontos, etc.)
+
+**Exemplos de máscaras comuns:**
+- Telefone: \`(99) 99999-9999\`
+- CPF: \`999.999.999-99\`
+- CNPJ: \`SS.SSS.SSS/SSSS-99\` (alfanumérico)
+- CEP: \`99999-999\`
+- Data: \`99/99/9999\`
+- Cartão de crédito: \`9999 9999 9999 9999\`
+- Hora: \`99:99\`
+- Placa de carro: \`AAA-9A99\`
+
+**Formas de uso:**
+
+1. **Via HTML:**
+\`\`\`html
+<sula-textfield 
+  label="Telefone" 
+  mask-pattern="(99) 99999-9999"
+  placeholder="(00) 00000-0000">
+</sula-textfield>
+\`\`\`
+
+2. **Via JavaScript:**
+\`\`\`javascript
+const textfield = document.createElement('sula-textfield');
+textfield.label = 'CNPJ';
+textfield.maskPattern = 'SS.SSS.SSS/SSSS-99';
+textfield.placeholder = '00.000.000/0000-00';
+\`\`\`
+
+3. **Via Framework (React, Angular, Vue):**
+\`\`\`jsx
+<sula-textfield 
+  label="CEP"
+  mask-pattern="99999-999"
+  placeholder="00000-000">
+</sula-textfield>
+\`\`\`
+
+**Observações:**
+- A máscara é apenas visual (formata mas não valida)
+- O valor emitido no evento \`valueChanged\` já vem formatado
+- A máscara é aplicada automaticamente conforme o usuário digita`,
             type: {
                 required: false,
             },
@@ -112,19 +161,20 @@ const Template = args => {
     container.style.margin = '20px';
     const el = document.createElement('sula-textfield');
     if (args.value)
-        el.setAttribute('value', args.value);
-    el.setAttribute('type', args.type);
-    el.setAttribute('status', args.status);
-    el.setAttribute('label', args.label);
-    el.setAttribute('placeholder', args.placeholder);
-    el.setAttribute('disabled', args.disabled.toString());
-    el.setAttribute('mask-pattern', args.maskPattern);
+        el.value = args.value;
+    el.type = args.type;
+    el.status = args.status;
+    el.label = args.label;
+    el.placeholder = args.placeholder;
+    el.disabled = args.disabled;
+    if (args.maskPattern)
+        el.maskPattern = args.maskPattern;
     if (args.helpText)
-        el.setAttribute('help-text', args.helpText);
+        el.helpText = args.helpText;
     if (args.maxLength > 0)
-        el.setAttribute('max-length', args.maxLength.toString());
+        el.maxLength = args.maxLength;
     if (args.icon)
-        el.setAttribute('icon', args.icon);
+        el.icon = args.icon;
     el.addEventListener('valueChanged', args.valueChanged);
     el.addEventListener('focusedOn', args.focusedOn);
     el.addEventListener('focusedOut', args.focusedOut);

package/dist/collection/components/sula-textfield/sula-textfield.stories.js.map

@@ -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: 'text',\n      defaultValue: '',\n      description: 'The textfield mask pattern',\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    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');\n\n  if (args.value) el.setAttribute('value', args.value);\n  el.setAttribute('type', args.type);\n  el.setAttribute('status', args.status);\n  el.setAttribute('label', args.label);\n  el.setAttribute('placeholder', args.placeholder);\n  el.setAttribute('disabled', args.disabled.toString());\n  el.setAttribute('mask-pattern', args.maskPattern);\n\n\n  if (args.helpText) el.setAttribute('help-text', args.helpText);\n  if (args.maxLength > 0) el.setAttribute('max-length', args.maxLength.toString());\n  if (args.icon) el.setAttribute('icon', args.icon);\n\n  el.addEventListener('valueChanged', args.valueChanged);\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 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"]}
+{"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: 'text',\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    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    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');\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('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 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/index.js

@@ -1258,6 +1258,9 @@ var getHostListenerTarget = (doc, elm, flags) => {
   if (flags & 4 /* TargetDocument */) {
     return doc;
   }
+  if (flags & 8 /* TargetWindow */) {
+    return win;
+  }
   return elm;
 };
 var hostListenerOpts = (flags) => supportsListenerOptions ? {