@sula-tech/webcomponents 0.2.0 → 0.3.0

package/dist/webcomponents/webcomponents.esm.js

@@ -1,6 +1,6 @@
-import { p as e, b as t } from "./p-fbee9d79.js";
+import { p as e, b as t } from "./p-5a36af0f.js";
 
-export { s as setNonce } from "./p-fbee9d79.js";
+export { s as setNonce } from "./p-5a36af0f.js";
 
 import { g as a } from "./p-e1255160.js";
 
@@ -17,11 +17,18 @@ import { g as a } from "./p-e1255160.js";
 
 patchBrowser().then((async e => {
   await a();
-  return t([ [ "p-77709b3c", [ [ 1, "sula-avatar", {
+  return t([ [ "p-89f57a33", [ [ 1, "sula-avatar", {
     size: [ 1 ],
     imageUrl: [ 1, "image-url" ],
     text: [ 1 ],
     icon: [ 1 ]
+  } ], [ 1, "sula-badge", {
+    status: [ 1025 ],
+    size: [ 1025 ],
+    type: [ 1025 ],
+    text: [ 1025 ],
+    icon: [ 1025 ],
+    hasSlotContent: [ 32 ]
   } ], [ 1, "sula-button", {
     text: [ 1025 ],
     icon: [ 1025 ],
@@ -31,6 +38,20 @@ patchBrowser().then((async e => {
     status: [ 1025 ],
     loading: [ 1028 ],
     buttonDisabled: [ 1028, "button-disabled" ]
+  } ], [ 1, "sula-checkbox", {
+    type: [ 1025 ],
+    label: [ 1025 ],
+    subTitle: [ 1025, "sub-title" ],
+    disabled: [ 1028 ],
+    checked: [ 1028 ],
+    isFocus: [ 32 ]
+  } ], [ 1, "sula-tag", {
+    label: [ 1025 ],
+    icon: [ 1025 ],
+    iconStatus: [ 1025, "icon-status" ],
+    size: [ 1025 ],
+    appearance: [ 1025 ],
+    fontWeight: [ 1025, "font-weight" ]
   } ], [ 1, "sula-textfield", {
     value: [ 1025 ],
     type: [ 1 ],
@@ -45,6 +66,26 @@ patchBrowser().then((async e => {
     textValue: [ 32 ],
     showPassword: [ 32 ],
     inputIsFocused: [ 32 ]
+  }, [ [ 4, "click", "handleClick" ] ] ], [ 1, "sula-switch", {
+    type: [ 1025 ],
+    active: [ 1028 ],
+    disabled: [ 1028 ],
+    label: [ 1025 ],
+    subTitle: [ 1025, "sub-title" ],
+    isFocus: [ 32 ]
+  } ], [ 1, "sula-textarea", {
+    value: [ 1025 ],
+    status: [ 1025 ],
+    label: [ 1 ],
+    placeholder: [ 1 ],
+    disabled: [ 1028 ],
+    helpText: [ 1, "help-text" ],
+    maxLength: [ 2, "max-length" ],
+    rows: [ 2 ],
+    isActive: [ 32 ],
+    textValue: [ 32 ],
+    textareaIsFocused: [ 32 ],
+    labelAnimationClass: [ 32 ]
   }, [ [ 4, "click", "handleClick" ] ] ], [ 0, "sula-icon", {
     icon: [ 1 ],
     customClass: [ 1, "custom-class" ]

package/dist/webcomponents/webcomponents.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","size","imageUrl","text","icon","appearance","type","status","loading","buttonDisabled","value","label","placeholder","disabled","helpText","maxLength","inputIsOpen","textValue","showPassword","inputIsFocused","customClass"],"sources":["node_modules/.pnpm/@stencil+core@4.26.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.26.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;;;;;;GAOA,KAAIA,eAAe;EAUjB,MAAMC,gBAAyBC;EAC/B,MAAMC,IAAqE;EAC3E,IAAIF,MAAe,IAAI;IACrBE,EAAKC,eAAe,IAAIC,IAAI,KAAKJ,GAAYK;AACjD;EACE,OAAOC,EAAeJ;AAAK;;AClB7BH,eAAeQ,MAAKC,MAAOC;QACnBC;EACN,OAAOC,EAAc,wCAA8B;IAAAC,MAAS;IAAAC,UAAA;IAAAC,MAAA;IAAAC,MAAA;OAAA;IAAAD,MAAA;IAAAC,MAAA;IAAAC,YAAA;IAAAC,MAAA;IAAAL,MAAA;IAAAM,QAAA;IAAAC,SAAA;IAAAC,gBAAA;OAAA;IAAAC,OAAA;IAAAJ,MAAA;IAAAC,QAAA;IAAAI,OAAA;IAAAC,aAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAX,MAAA;IAAAY,aAAA;IAAAC,WAAA;IAAAC,cAAA;IAAAC,gBAAA;KAAA;IAAAf,MAAA;IAAAgB,aAAA;aAAAtB;AAAA","ignoreList":[]}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","size","imageUrl","text","icon","status","type","hasSlotContent","appearance","loading","buttonDisabled","label","subTitle","disabled","checked","isFocus","iconStatus","fontWeight","value","placeholder","helpText","maxLength","inputIsOpen","textValue","showPassword","inputIsFocused","active","rows","isActive","textareaIsFocused","labelAnimationClass","customClass"],"sources":["node_modules/.pnpm/@stencil+core@4.26.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.26.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;;;;;;GAOA,KAAIA,eAAe;EAUjB,MAAMC,gBAAyBC;EAC/B,MAAMC,IAAqE;EAC3E,IAAIF,MAAe,IAAI;IACrBE,EAAKC,eAAe,IAAIC,IAAI,KAAKJ,GAAYK;AACjD;EACE,OAAOC,EAAeJ;AAAK;;AClB7BH,eAAeQ,MAAKC,MAAOC;QACnBC;EACN,OAAOC,EAAc,wCAA8B;IAAAC,MAAS;IAAAC,UAAA;IAAAC,MAAA;IAAAC,MAAA;OAAA;IAAAC,QAAA;IAAAJ,MAAA;IAAAK,MAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAG,gBAAA;OAAA;IAAAJ,MAAA;IAAAC,MAAA;IAAAI,YAAA;IAAAF,MAAA;IAAAL,MAAA;IAAAI,QAAA;IAAAI,SAAA;IAAAC,gBAAA;OAAA;IAAAJ,MAAA;IAAAK,OAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,SAAA;OAAA;IAAAJ,OAAA;IAAAP,MAAA;IAAAY,YAAA;IAAAf,MAAA;IAAAO,YAAA;IAAAS,YAAA;OAAA;IAAAC,OAAA;IAAAZ,MAAA;IAAAD,QAAA;IAAAM,OAAA;IAAAQ,aAAA;IAAAN,UAAA;IAAAO,UAAA;IAAAC,WAAA;IAAAjB,MAAA;IAAAkB,aAAA;IAAAC,WAAA;IAAAC,cAAA;IAAAC,gBAAA;KAAA;IAAAnB,MAAA;IAAAoB,QAAA;IAAAb,UAAA;IAAAF,OAAA;IAAAC,UAAA;IAAAG,SAAA;OAAA;IAAAG,OAAA;IAAAb,QAAA;IAAAM,OAAA;IAAAQ,aAAA;IAAAN,UAAA;IAAAO,UAAA;IAAAC,WAAA;IAAAM,MAAA;IAAAC,UAAA;IAAAL,WAAA;IAAAM,mBAAA;IAAAC,qBAAA;KAAA;IAAA1B,MAAA;IAAA2B,aAAA;aAAAjC;AAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sula-tech/webcomponents",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A web component library built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -55,7 +55,7 @@
   "scripts": {
     "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
+    "test": "stencil test --spec --e2e --runInBand",
     "test:coverage": "stencil test --spec --e2e --coverage --json --outputFile=.jest-test-results.json",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",

package/readme.md

@@ -24,25 +24,53 @@ Para projetos legados, importe o `webcomponents.js`:
 
 Para uso em frameworks, [consulte a documentação do Stencil](https://stenciljs.com/docs/overview).
 
+### Configuração do TailwindCSS
+
+Para garantir que as cores sejam aplicadas corretamente, é necessário utilizar o plugin do design system com o TailwindCSS:
+
+```bash
+npm i @sula-tech/tailwind-css-plugin
+```
+
+Configure o plugin no seu arquivo `tailwind.config.js`:
+
+```js
+const sulaPlugin = require('@sula-tech/tailwind-css-plugin/src/tailwind-design-system-plugin');
+
+module.exports = {
+  // ... outras configurações
+  plugins: [
+    sulaPlugin,
+    // ... outros plugins
+  ],
+};
+```
+
+### Configuração de Ícones
+
+Para que os ícones funcionem corretamente, adicione a seguinte linha no seu arquivo de estilos global:
+
+```css
+@import '@sula-tech/webcomponents/dist/webcomponents/assets/icons/icons.css';
+```
+
 ### Aplicações Angular
 
 ```bash
 npm i @sula-tech/webcomponents
 ```
 
-No seu arquivo `app.module.ts`, declare o `CUSTOM_ELEMENTS_SCHEMA`:
+É necessário declarar o `CUSTOM_ELEMENTS_SCHEMA` em **cada módulo** onde os webcomponents serão utilizados:
 
 ```ts
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // <-- importe aqui
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA], // <-- declare isso
+  declarations: [YourComponent],
+  imports: [CommonModule, OtherModules],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Necessário em cada módulo que utiliza webcomponents
 })
-export class AppModule {}
+export class YourModule {}
 ```
 
 E no final do arquivo `main.ts`, adicione os seguintes imports:
@@ -51,11 +79,6 @@ E no final do arquivo `main.ts`, adicione os seguintes imports:
 import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/loader';
 
 defineCustomElements();
-
-// para suporte ao IE (opcional)
-applyPolyfills().then(() => {
-  defineCustomElements();
-});
 ```
 
 ### Aplicações React
@@ -70,11 +93,6 @@ No seu arquivo `src/index.js` ou `src/index.tsx` (para projetos TypeScript), adi
 import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/loader';
 
 defineCustomElements();
-
-// para suporte ao IE (opcional)
-applyPolyfills().then(() => {
-  defineCustomElements();
-});
 ```
 
 ## Quero contribuir