voa-ds-core 1.0.28 → 1.0.30

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 (97) hide show
  1. package/dist/custom-elements/index.d.ts +81 -0
  2. package/dist/custom-elements/index.js +40 -1460
  3. package/dist/custom-elements/index.js.map +1 -1
  4. package/dist/custom-elements/{p-DKnM_Ozb.js → p-BVkwkeZD.js} +3 -4
  5. package/dist/custom-elements/p-BVkwkeZD.js.map +1 -0
  6. package/dist/custom-elements/{p-CQr0ZKZZ.js → p-Bbv_lCJm.js} +3 -4
  7. package/dist/custom-elements/p-Bbv_lCJm.js.map +1 -0
  8. package/dist/custom-elements/{p-DPyVgztA.js → p-C3RlQWjO.js} +3 -4
  9. package/dist/custom-elements/p-C3RlQWjO.js.map +1 -0
  10. package/dist/custom-elements/p-CFBaVtm5.js +1463 -0
  11. package/dist/custom-elements/p-CFBaVtm5.js.map +1 -0
  12. package/dist/custom-elements/{p-Cp28eWhS.js → p-CGXKDN0Z.js} +3 -3
  13. package/dist/custom-elements/{p-Cp28eWhS.js.map → p-CGXKDN0Z.js.map} +1 -1
  14. package/dist/custom-elements/{p-Dto9R8Te.js → p-DMLFTaAS.js} +3 -4
  15. package/dist/custom-elements/p-DMLFTaAS.js.map +1 -0
  16. package/dist/custom-elements/{p-B2P7cgN3.js → p-Dij6eiDm.js} +4 -5
  17. package/dist/custom-elements/p-Dij6eiDm.js.map +1 -0
  18. package/dist/custom-elements/voa-accordion.js +1 -2
  19. package/dist/custom-elements/voa-accordion.js.map +1 -1
  20. package/dist/custom-elements/voa-alert.js +3 -4
  21. package/dist/custom-elements/voa-alert.js.map +1 -1
  22. package/dist/custom-elements/voa-avatar.js +1 -2
  23. package/dist/custom-elements/voa-avatar.js.map +1 -1
  24. package/dist/custom-elements/voa-badge.js +1 -1
  25. package/dist/custom-elements/voa-breadcrumbs-divider.js +2 -3
  26. package/dist/custom-elements/voa-breadcrumbs-divider.js.map +1 -1
  27. package/dist/custom-elements/voa-breadcrumbs-item.js +1 -2
  28. package/dist/custom-elements/voa-breadcrumbs-item.js.map +1 -1
  29. package/dist/custom-elements/voa-breadcrumbs.js +1 -2
  30. package/dist/custom-elements/voa-breadcrumbs.js.map +1 -1
  31. package/dist/custom-elements/voa-button.js +1 -1
  32. package/dist/custom-elements/voa-card.js +1 -2
  33. package/dist/custom-elements/voa-card.js.map +1 -1
  34. package/dist/custom-elements/voa-checkbox.js +1 -2
  35. package/dist/custom-elements/voa-checkbox.js.map +1 -1
  36. package/dist/custom-elements/voa-container-multi-select.js +2 -3
  37. package/dist/custom-elements/voa-container-multi-select.js.map +1 -1
  38. package/dist/custom-elements/voa-datepicker.js +1 -2
  39. package/dist/custom-elements/voa-datepicker.js.map +1 -1
  40. package/dist/custom-elements/voa-drawer.js +1 -2
  41. package/dist/custom-elements/voa-drawer.js.map +1 -1
  42. package/dist/custom-elements/voa-dropdown.js +1 -2
  43. package/dist/custom-elements/voa-dropdown.js.map +1 -1
  44. package/dist/custom-elements/voa-input-addon.js +2 -3
  45. package/dist/custom-elements/voa-input-addon.js.map +1 -1
  46. package/dist/custom-elements/voa-input.js +1 -2
  47. package/dist/custom-elements/voa-input.js.map +1 -1
  48. package/dist/custom-elements/voa-keybinding.js +1 -1
  49. package/dist/custom-elements/voa-link.js +1 -2
  50. package/dist/custom-elements/voa-link.js.map +1 -1
  51. package/dist/custom-elements/voa-list.js +1 -2
  52. package/dist/custom-elements/voa-list.js.map +1 -1
  53. package/dist/custom-elements/voa-modal.js +1 -2
  54. package/dist/custom-elements/voa-modal.js.map +1 -1
  55. package/dist/custom-elements/voa-option.js +1 -2
  56. package/dist/custom-elements/voa-option.js.map +1 -1
  57. package/dist/custom-elements/voa-pagination-item.js +1 -1
  58. package/dist/custom-elements/voa-pagination.js +2 -3
  59. package/dist/custom-elements/voa-pagination.js.map +1 -1
  60. package/dist/custom-elements/voa-progress.js +1 -2
  61. package/dist/custom-elements/voa-progress.js.map +1 -1
  62. package/dist/custom-elements/voa-radio.js +1 -2
  63. package/dist/custom-elements/voa-radio.js.map +1 -1
  64. package/dist/custom-elements/voa-select-base.js +1 -1
  65. package/dist/custom-elements/voa-select.js +2 -3
  66. package/dist/custom-elements/voa-select.js.map +1 -1
  67. package/dist/custom-elements/voa-skeleton.js +1 -2
  68. package/dist/custom-elements/voa-skeleton.js.map +1 -1
  69. package/dist/custom-elements/voa-stepper.js +1 -2
  70. package/dist/custom-elements/voa-stepper.js.map +1 -1
  71. package/dist/custom-elements/voa-switch.js +1 -2
  72. package/dist/custom-elements/voa-switch.js.map +1 -1
  73. package/dist/custom-elements/voa-tab-item.js +1 -2
  74. package/dist/custom-elements/voa-tab-item.js.map +1 -1
  75. package/dist/custom-elements/voa-tab.js +1 -2
  76. package/dist/custom-elements/voa-tab.js.map +1 -1
  77. package/dist/custom-elements/voa-table.js +1 -2
  78. package/dist/custom-elements/voa-table.js.map +1 -1
  79. package/dist/custom-elements/voa-tag.js +1 -2
  80. package/dist/custom-elements/voa-tag.js.map +1 -1
  81. package/dist/custom-elements/voa-text-area.js +1 -2
  82. package/dist/custom-elements/voa-text-area.js.map +1 -1
  83. package/dist/custom-elements/voa-timepicker.js +1 -2
  84. package/dist/custom-elements/voa-timepicker.js.map +1 -1
  85. package/dist/custom-elements/voa-tooltip-arrow.js +1 -2
  86. package/dist/custom-elements/voa-tooltip-arrow.js.map +1 -1
  87. package/dist/custom-elements/voa-tooltip.js +1 -2
  88. package/dist/custom-elements/voa-tooltip.js.map +1 -1
  89. package/dist/custom-elements/voa-upload.js +1 -2
  90. package/dist/custom-elements/voa-upload.js.map +1 -1
  91. package/dist/styles/voa-components.css +2 -2
  92. package/package.json +15 -1
  93. package/dist/custom-elements/p-B2P7cgN3.js.map +0 -1
  94. package/dist/custom-elements/p-CQr0ZKZZ.js.map +0 -1
  95. package/dist/custom-elements/p-DKnM_Ozb.js.map +0 -1
  96. package/dist/custom-elements/p-DPyVgztA.js.map +0 -1
  97. package/dist/custom-elements/p-Dto9R8Te.js.map +0 -1
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h, a as Host } from './index.js';
1
+ import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
2
2
 
3
3
  const voaBreadcrumbsCss = ":host{display:inline-block;box-sizing:border-box}.voa-breadcrumbs{display:inline-block;box-sizing:border-box}.breadcrumbs-list{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none;gap:0;}";
4
4
 
@@ -38,7 +38,6 @@ function defineCustomElement$1() {
38
38
  break;
39
39
  } });
40
40
  }
41
- defineCustomElement$1();
42
41
 
43
42
  const VoaBreadcrumbs = VoaBreadcrumbs$1;
44
43
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-breadcrumbs.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0NAA0N;;MCYvOA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAoC,SAAS;AAuB3E;IArBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAIH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,gBACA,YAAY,EACvB,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACxC,aAAA,EAAA,EAED,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACV,CACD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-breadcrumbs/voa-breadcrumbs.css?tag=voa-breadcrumbs&encapsulation=shadow","src/components/voa-breadcrumbs/voa-breadcrumbs.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n * \r\n * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-breadcrumbs {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.breadcrumbs-list {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap; /* Breadcrumbs should wrap on small screens */\r\n margin: 0;\r\n padding: 0;\r\n list-style: none; /* Remove default list numbers */\r\n gap: 0; /* Gaps handled by items */\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente de breadcrumbs (navegação estrutural).\r\n * Baseado no design do Figma (node-id: 443-10022).\r\n * * @slot default - Items do breadcrumb (voa-breadcrumbs-item)\r\n */\r\n@Component({\r\n tag: 'voa-breadcrumbs',\r\n styleUrl: 'voa-breadcrumbs.css',\r\n shadow: true,\r\n})\r\nexport class VoaBreadcrumbs {\r\n @Element() host: HTMLVoaBreadcrumbsElement;\r\n\r\n /**\r\n * Variante visual do breadcrumb.\r\n */\r\n @Prop({ reflect: true }) type: 'default' | 'round' | 'outline' = 'default';\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {/* Using <nav> and <ol> is the Semantic Standard for Breadcrumbs. \r\n Screen readers will announce \"Navigation, list, X items\".\r\n */}\r\n <nav\r\n part=\"base\"\r\n aria-label=\"Breadcrumb\"\r\n class={{\r\n 'voa-breadcrumbs': true,\r\n [`voa-breadcrumbs--${this.type}`]: true,\r\n }}\r\n >\r\n <ol part=\"list\" class=\"breadcrumbs-list\">\r\n <slot></slot>\r\n </ol>\r\n </nav>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}
1
+ {"file":"voa-breadcrumbs.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0NAA0N;;MCYvOA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAoC,SAAS;AAuB3E;IArBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAIH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,gBACA,YAAY,EACvB,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACxC,aAAA,EAAA,EAED,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACV,CACD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-breadcrumbs/voa-breadcrumbs.css?tag=voa-breadcrumbs&encapsulation=shadow","src/components/voa-breadcrumbs/voa-breadcrumbs.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n * \r\n * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-breadcrumbs {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.breadcrumbs-list {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap; /* Breadcrumbs should wrap on small screens */\r\n margin: 0;\r\n padding: 0;\r\n list-style: none; /* Remove default list numbers */\r\n gap: 0; /* Gaps handled by items */\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente de breadcrumbs (navegação estrutural).\r\n * Baseado no design do Figma (node-id: 443-10022).\r\n * * @slot default - Items do breadcrumb (voa-breadcrumbs-item)\r\n */\r\n@Component({\r\n tag: 'voa-breadcrumbs',\r\n styleUrl: 'voa-breadcrumbs.css',\r\n shadow: true,\r\n})\r\nexport class VoaBreadcrumbs {\r\n @Element() host: HTMLVoaBreadcrumbsElement;\r\n\r\n /**\r\n * Variante visual do breadcrumb.\r\n */\r\n @Prop({ reflect: true }) type: 'default' | 'round' | 'outline' = 'default';\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {/* Using <nav> and <ol> is the Semantic Standard for Breadcrumbs. \r\n Screen readers will announce \"Navigation, list, X items\".\r\n */}\r\n <nav\r\n part=\"base\"\r\n aria-label=\"Breadcrumb\"\r\n class={{\r\n 'voa-breadcrumbs': true,\r\n [`voa-breadcrumbs--${this.type}`]: true,\r\n }}\r\n >\r\n <ol part=\"list\" class=\"breadcrumbs-list\">\r\n <slot></slot>\r\n </ol>\r\n </nav>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { V as VoaButton$1, d as defineCustomElement$1 } from './p-Dto9R8Te.js';
1
+ import { V as VoaButton$1, d as defineCustomElement$1 } from './p-DMLFTaAS.js';
2
2
 
3
3
  const VoaButton = VoaButton$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h, a as Host } from './index.js';
1
+ import { p as proxyCustomElement, H, h, d as Host } from './p-CFBaVtm5.js';
2
2
 
3
3
  const voaCardCss = ":host{display:block}[part=\"base\"]{display:flex;flex-direction:column;overflow:hidden}[part=\"header\"]{display:block}[part=\"body\"]{flex:1;display:block}[part=\"footer\"]{display:block}";
4
4
 
@@ -28,7 +28,6 @@ function defineCustomElement$1() {
28
28
  break;
29
29
  } });
30
30
  }
31
- defineCustomElement$1();
32
31
 
33
32
  const VoaCard = VoaCard$1;
34
33
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,8LAA8L;;MCOpMA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-card/voa-card.css?tag=voa-card&encapsulation=shadow","src/components/voa-card/voa-card.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n\r\n[part=\"base\"] {\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n[part=\"header\"] {\r\n display: block;\r\n}\r\n\r\n[part=\"body\"] {\r\n flex: 1;\r\n display: block;\r\n}\r\n\r\n[part=\"footer\"] {\r\n display: block;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-card',\r\n styleUrl: 'voa-card.css',\r\n shadow: true,\r\n})\r\nexport class VoaCard {\r\n render() {\r\n return (\r\n <Host>\r\n <div part=\"base\">\r\n <div part=\"header\">\r\n <slot name=\"header\"></slot>\r\n </div>\r\n <div part=\"body\">\r\n <slot></slot>\r\n </div>\r\n <div part=\"footer\">\r\n <slot name=\"footer\"></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"voa-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,8LAA8L;;MCOpMA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-card/voa-card.css?tag=voa-card&encapsulation=shadow","src/components/voa-card/voa-card.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n\r\n[part=\"base\"] {\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n[part=\"header\"] {\r\n display: block;\r\n}\r\n\r\n[part=\"body\"] {\r\n flex: 1;\r\n display: block;\r\n}\r\n\r\n[part=\"footer\"] {\r\n display: block;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-card',\r\n styleUrl: 'voa-card.css',\r\n shadow: true,\r\n})\r\nexport class VoaCard {\r\n render() {\r\n return (\r\n <Host>\r\n <div part=\"base\">\r\n <div part=\"header\">\r\n <slot name=\"header\"></slot>\r\n </div>\r\n <div part=\"body\">\r\n <slot></slot>\r\n </div>\r\n <div part=\"footer\">\r\n <slot name=\"footer\"></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
2
2
 
3
3
  const voaCheckboxCss = ":host{display:inline-block;box-sizing:border-box;contain:content;pointer-events:auto}.checkbox-container{display:inline-flex;align-items:center;position:relative;box-sizing:border-box;user-select:none;gap:0;}.checkbox-container.checkbox-disabled{cursor:not-allowed;pointer-events:none;opacity:0.5;}.checkbox-container.checkbox-no-label{gap:0}.checkbox-custom{display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;box-sizing:border-box;width:20px;height:20px}.checkbox-custom::after{content:'';display:block;position:absolute;box-sizing:border-box}.checkbox-label{display:inline-block;user-select:none;box-sizing:border-box;min-height:1em}";
4
4
 
@@ -138,7 +138,6 @@ function defineCustomElement$1() {
138
138
  break;
139
139
  } });
140
140
  }
141
- defineCustomElement$1();
142
141
 
143
142
  const VoaCheckbox = VoaCheckbox$1;
144
143
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-checkbox.js","mappings":"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","names":["VoaCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-checkbox/voa-checkbox.css?tag=voa-checkbox&encapsulation=shadow","src/components/voa-checkbox/voa-checkbox.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n * \r\n * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n contain: content;\r\n pointer-events: auto;\r\n}\r\n\r\n.checkbox-container {\r\n /* APENAS estilos estruturais */\r\n display: inline-flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n user-select: none;\r\n /* Gap estrutural - será aplicado via CSS custom property externamente */\r\n gap: 0; /* Defaults to 0, overridable externally */\r\n}\r\n\r\n.checkbox-container.checkbox-disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n opacity: 0.5; /* Structural indication of disabled state */\r\n}\r\n\r\n.checkbox-container.checkbox-no-label {\r\n gap: 0;\r\n}\r\n\r\n/* \r\n * The visual box of the checkbox.\r\n * MUST have default dimensions to exist in the layout flow.\r\n */\r\n.checkbox-custom {\r\n /* Improved alignment */\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n \r\n /* DEFAULT STRUCTURAL SIZE - 20px conforme Figma */\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n/* \r\n * We leave the ::after content management to the external CSS \r\n * OR we set basic display properties here so the external CSS \r\n * just has to toggle opacity/color.\r\n */\r\n.checkbox-custom::after {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n box-sizing: border-box;\r\n}\r\n\r\n.checkbox-label {\r\n /* APENAS estilos estruturais */\r\n display: inline-block;\r\n user-select: none;\r\n box-sizing: border-box;\r\n /* Ensure label doesn't collapse if empty slot */\r\n min-height: 1em;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckboxState = 'active' | 'inactive' | 'indeterminate';\r\n\r\n/**\r\n * Componente de checkbox que segue o design system VOA.\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do checkbox (elemento <div> no container)\r\n * @part indicator - O indicador visual do checkbox (caixa customizada)\r\n * @part label - O wrapper do texto do label\r\n * \r\n * @slot default - Conteúdo do label do checkbox\r\n */\r\n@Component({\r\n tag: 'voa-checkbox',\r\n styleUrl: 'voa-checkbox.css',\r\n shadow: {\r\n delegatesFocus: true, // Passes focus to the internal input/button automatically\r\n },\r\n formAssociated: true, // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaCheckbox {\r\n @Element() host: HTMLVoaCheckboxElement;\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n /**\r\n * Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n */\r\n @State() internalState: CheckboxState = 'inactive';\r\n\r\n /**\r\n * State of the checkbox.\r\n * active = checked\r\n * inactive = unchecked\r\n * indeterminate = partial/mixed\r\n */\r\n @Prop({ reflect: true }) state: CheckboxState = 'inactive';\r\n\r\n /**\r\n * Se o checkbox está desabilitado.\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /**\r\n * Se o label deve ser exibido.\r\n */\r\n @Prop() showLabel: boolean = true;\r\n\r\n /**\r\n * Nome do checkbox para formulários.\r\n */\r\n @Prop() name: string;\r\n\r\n /**\r\n * Valor do checkbox para formulários.\r\n */\r\n @Prop() value: string = 'on'; // Default value if none provided\r\n\r\n /**\r\n * Emitido quando o estado do checkbox muda.\r\n * Segue o padrão kebab-case: dsChange.\r\n */\r\n @Event() dsChange: EventEmitter<CheckboxState>;\r\n\r\n componentWillLoad() {\r\n this.internalState = this.state;\r\n this.updateFormInternals();\r\n }\r\n\r\n /**\r\n * Atualiza o estado interno e sincroniza com o Form Internals API\r\n */\r\n @Watch('state')\r\n stateChanged(newValue: CheckboxState) {\r\n this.internalState = newValue;\r\n this.updateFormInternals();\r\n }\r\n\r\n /**\r\n * Watch changes to internal state and update the reflected prop for CSS selectors\r\n */\r\n @Watch('internalState')\r\n internalStateChanged() {\r\n // Update the reflected state prop so CSS selectors work\r\n this.state = this.internalState;\r\n }\r\n\r\n /**\r\n * Syncs with the native Form API and Accessibility Tree\r\n */\r\n private updateFormInternals() {\r\n const isChecked = this.internalState === 'active';\r\n\r\n // 1. Form Value: Only 'active' submits the value by default in standard HTML\r\n this.internals.setFormValue(isChecked ? this.value : null);\r\n\r\n // 2. Accessibility State\r\n let ariaChecked = 'false';\r\n if (this.internalState === 'active') ariaChecked = 'true';\r\n if (this.internalState === 'indeterminate') ariaChecked = 'mixed';\r\n\r\n this.internals.ariaChecked = ariaChecked;\r\n this.internals.ariaDisabled = this.disabled ? 'true' : 'false';\r\n }\r\n\r\n /**\r\n * Handler para clique no checkbox.\r\n */\r\n private handleClick = (_ev: Event) => {\r\n if (this.disabled) return;\r\n\r\n // Logic: Indeterminate -> Active. Active -> Inactive. Inactive -> Active.\r\n if (this.internalState === 'indeterminate' || this.internalState === 'inactive') {\r\n this.internalState = 'active';\r\n } else {\r\n this.internalState = 'inactive';\r\n }\r\n\r\n this.updateFormInternals();\r\n this.dsChange.emit(this.internalState);\r\n };\r\n\r\n /**\r\n * Handler para navegação por teclado (WCAG 2.2 AA).\r\n * Suporta Space para alternar estado.\r\n */\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled) return;\r\n\r\n // Native checkbox activates on Space\r\n if (event.key === ' ') {\r\n event.preventDefault();\r\n this.handleClick(event);\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host\r\n onClick={this.handleClick}\r\n onKeyDown={this.handleKeyDown}\r\n tabIndex={this.disabled ? -1 : 0}\r\n style={{ cursor: this.disabled ? 'not-allowed' : 'pointer' }}\r\n >\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'checkbox-container': true,\r\n 'checkbox-disabled': this.disabled,\r\n [`checkbox-${this.internalState}`]: true,\r\n 'checkbox-no-label': !this.showLabel,\r\n }}\r\n >\r\n {/* Visual Indicator */}\r\n <div class=\"checkbox-custom\" part=\"indicator\">\r\n {/* Optional: You could render the checkmark/dash SVG here if \r\n you wanted structural icons instead of pure CSS pseudo-elements.\r\n For now, keeping it empty to match your CSS-only approach.\r\n */}\r\n </div>\r\n\r\n {this.showLabel && (\r\n <span class=\"checkbox-label\" part=\"label\">\r\n <slot />\r\n </span>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n} "],"version":3}
1
+ {"file":"voa-checkbox.js","mappings":"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","names":["VoaCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-checkbox/voa-checkbox.css?tag=voa-checkbox&encapsulation=shadow","src/components/voa-checkbox/voa-checkbox.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n * \r\n * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n contain: content;\r\n pointer-events: auto;\r\n}\r\n\r\n.checkbox-container {\r\n /* APENAS estilos estruturais */\r\n display: inline-flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n user-select: none;\r\n /* Gap estrutural - será aplicado via CSS custom property externamente */\r\n gap: 0; /* Defaults to 0, overridable externally */\r\n}\r\n\r\n.checkbox-container.checkbox-disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n opacity: 0.5; /* Structural indication of disabled state */\r\n}\r\n\r\n.checkbox-container.checkbox-no-label {\r\n gap: 0;\r\n}\r\n\r\n/* \r\n * The visual box of the checkbox.\r\n * MUST have default dimensions to exist in the layout flow.\r\n */\r\n.checkbox-custom {\r\n /* Improved alignment */\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n \r\n /* DEFAULT STRUCTURAL SIZE - 20px conforme Figma */\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n/* \r\n * We leave the ::after content management to the external CSS \r\n * OR we set basic display properties here so the external CSS \r\n * just has to toggle opacity/color.\r\n */\r\n.checkbox-custom::after {\r\n content: '';\r\n display: block;\r\n position: absolute;\r\n box-sizing: border-box;\r\n}\r\n\r\n.checkbox-label {\r\n /* APENAS estilos estruturais */\r\n display: inline-block;\r\n user-select: none;\r\n box-sizing: border-box;\r\n /* Ensure label doesn't collapse if empty slot */\r\n min-height: 1em;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, AttachInternals, State, Watch } from '@stencil/core';\r\n\r\nexport type CheckboxState = 'active' | 'inactive' | 'indeterminate';\r\n\r\n/**\r\n * Componente de checkbox que segue o design system VOA.\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do checkbox (elemento <div> no container)\r\n * @part indicator - O indicador visual do checkbox (caixa customizada)\r\n * @part label - O wrapper do texto do label\r\n * \r\n * @slot default - Conteúdo do label do checkbox\r\n */\r\n@Component({\r\n tag: 'voa-checkbox',\r\n styleUrl: 'voa-checkbox.css',\r\n shadow: {\r\n delegatesFocus: true, // Passes focus to the internal input/button automatically\r\n },\r\n formAssociated: true, // CRITICAL: Makes this work in <form> tags\r\n})\r\nexport class VoaCheckbox {\r\n @Element() host: HTMLVoaCheckboxElement;\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n /**\r\n * Internal state to handle \"uncontrolled\" usage while keeping props immutable\r\n */\r\n @State() internalState: CheckboxState = 'inactive';\r\n\r\n /**\r\n * State of the checkbox.\r\n * active = checked\r\n * inactive = unchecked\r\n * indeterminate = partial/mixed\r\n */\r\n @Prop({ reflect: true }) state: CheckboxState = 'inactive';\r\n\r\n /**\r\n * Se o checkbox está desabilitado.\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /**\r\n * Se o label deve ser exibido.\r\n */\r\n @Prop() showLabel: boolean = true;\r\n\r\n /**\r\n * Nome do checkbox para formulários.\r\n */\r\n @Prop() name: string;\r\n\r\n /**\r\n * Valor do checkbox para formulários.\r\n */\r\n @Prop() value: string = 'on'; // Default value if none provided\r\n\r\n /**\r\n * Emitido quando o estado do checkbox muda.\r\n * Segue o padrão kebab-case: dsChange.\r\n */\r\n @Event() dsChange: EventEmitter<CheckboxState>;\r\n\r\n componentWillLoad() {\r\n this.internalState = this.state;\r\n this.updateFormInternals();\r\n }\r\n\r\n /**\r\n * Atualiza o estado interno e sincroniza com o Form Internals API\r\n */\r\n @Watch('state')\r\n stateChanged(newValue: CheckboxState) {\r\n this.internalState = newValue;\r\n this.updateFormInternals();\r\n }\r\n\r\n /**\r\n * Watch changes to internal state and update the reflected prop for CSS selectors\r\n */\r\n @Watch('internalState')\r\n internalStateChanged() {\r\n // Update the reflected state prop so CSS selectors work\r\n this.state = this.internalState;\r\n }\r\n\r\n /**\r\n * Syncs with the native Form API and Accessibility Tree\r\n */\r\n private updateFormInternals() {\r\n const isChecked = this.internalState === 'active';\r\n\r\n // 1. Form Value: Only 'active' submits the value by default in standard HTML\r\n this.internals.setFormValue(isChecked ? this.value : null);\r\n\r\n // 2. Accessibility State\r\n let ariaChecked = 'false';\r\n if (this.internalState === 'active') ariaChecked = 'true';\r\n if (this.internalState === 'indeterminate') ariaChecked = 'mixed';\r\n\r\n this.internals.ariaChecked = ariaChecked;\r\n this.internals.ariaDisabled = this.disabled ? 'true' : 'false';\r\n }\r\n\r\n /**\r\n * Handler para clique no checkbox.\r\n */\r\n private handleClick = (_ev: Event) => {\r\n if (this.disabled) return;\r\n\r\n // Logic: Indeterminate -> Active. Active -> Inactive. Inactive -> Active.\r\n if (this.internalState === 'indeterminate' || this.internalState === 'inactive') {\r\n this.internalState = 'active';\r\n } else {\r\n this.internalState = 'inactive';\r\n }\r\n\r\n this.updateFormInternals();\r\n this.dsChange.emit(this.internalState);\r\n };\r\n\r\n /**\r\n * Handler para navegação por teclado (WCAG 2.2 AA).\r\n * Suporta Space para alternar estado.\r\n */\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled) return;\r\n\r\n // Native checkbox activates on Space\r\n if (event.key === ' ') {\r\n event.preventDefault();\r\n this.handleClick(event);\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host\r\n onClick={this.handleClick}\r\n onKeyDown={this.handleKeyDown}\r\n tabIndex={this.disabled ? -1 : 0}\r\n style={{ cursor: this.disabled ? 'not-allowed' : 'pointer' }}\r\n >\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'checkbox-container': true,\r\n 'checkbox-disabled': this.disabled,\r\n [`checkbox-${this.internalState}`]: true,\r\n 'checkbox-no-label': !this.showLabel,\r\n }}\r\n >\r\n {/* Visual Indicator */}\r\n <div class=\"checkbox-custom\" part=\"indicator\">\r\n {/* Optional: You could render the checkmark/dash SVG here if \r\n you wanted structural icons instead of pure CSS pseudo-elements.\r\n For now, keeping it empty to match your CSS-only approach.\r\n */}\r\n </div>\r\n\r\n {this.showLabel && (\r\n <span class=\"checkbox-label\" part=\"label\">\r\n <slot />\r\n </span>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n} "],"version":3}
@@ -1,5 +1,5 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-B2P7cgN3.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h } from './p-CFBaVtm5.js';
2
+ import { d as defineCustomElement$2 } from './p-Dij6eiDm.js';
3
3
 
4
4
  const voaContainerMultiSelectCss = ":host{display:block;width:100%;box-sizing:border-box}.voa-container-multi-select{position:relative;width:100%;min-height:48px;box-sizing:border-box}.voa-container-multi-select__inner{position:relative;width:100%;min-height:inherit;box-sizing:border-box}.voa-container-multi-select__items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--structure-large-spacing-xs, 4px);width:100%;min-height:inherit;box-sizing:border-box}.voa-container-multi-select__item{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;box-sizing:border-box}.voa-container-multi-select__badge-wrapper{display:inline-flex;align-items:center;cursor:pointer;box-sizing:border-box}.voa-container-multi-select__badge-wrapper voa-badge{cursor:pointer;box-sizing:border-box}.voa-container-multi-select__badge-wrapper voa-badge::part(base){background-color:var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));border:1px dashed var(--branding-coi-colors-light-primary-light, #0064cb);border-radius:var(--structure-large-radius-round, 1024px);padding-block:var(--structure-large-spacing-xxs, 2px);padding-inline:var(--structure-large-spacing-xs, 4px);font-family:var(--branding-coi-type-family-sans, 'Lato', sans-serif);font-size:16px;font-weight:400;line-height:24px;font-style:normal;color:var(--branding-coi-colors-light-primary-light, #0064cb);box-sizing:border-box;transition:background-color 0.2s ease, border-color 0.2s ease;display:inline-flex;align-items:center;gap:var(--structure-large-spacing-xxs, 2px)}.voa-container-multi-select__badge-wrapper:hover voa-badge::part(base){background-color:var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25));border-color:var(--branding-coi-colors-light-primary-light-400, #0071c8)}.voa-container-multi-select__badge-wrapper voa-badge::part(label){color:var(--branding-coi-colors-light-primary-light, #0064cb);box-sizing:border-box;white-space:nowrap}.voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading){display:none}.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing){display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--branding-coi-colors-light-primary-light, #0064cb);box-sizing:border-box;flex-shrink:0;margin-left:var(--structure-large-spacing-xxs, 2px)}.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg{width:12px;height:12px;display:block;flex-shrink:0}.voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing){opacity:0.8}.voa-container-multi-select--disabled .voa-container-multi-select__badge-wrapper voa-badge::part(base){opacity:0.5;cursor:not-allowed;pointer-events:none}.voa-container-multi-select__placeholder{display:flex;align-items:center;justify-content:flex-start;min-height:inherit;width:100%;box-sizing:border-box}.voa-container-multi-select--disabled{cursor:not-allowed;pointer-events:none}";
5
5
 
@@ -111,7 +111,6 @@ function defineCustomElement$1() {
111
111
  break;
112
112
  } });
113
113
  }
114
- defineCustomElement$1();
115
114
 
116
115
  const VoaContainerMultiSelect = VoaContainerMultiSelect$1;
117
116
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-container-multi-select.js","mappings":"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","names":["VoaContainerMultiSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-select/voa-container-multi-select.css?tag=voa-container-multi-select&encapsulation=shadow","src/components/voa-select/voa-container-multi-select.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n display: block;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select {\r\n position: relative;\r\n width: 100%;\r\n min-height: 48px; /* Altura mínima equivalente ao input */\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__inner {\r\n position: relative;\r\n width: 100%;\r\n min-height: inherit;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__items {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: var(--structure-large-spacing-xs, 4px); /* Gap entre itens/badges - Figma: spacing/spacing-xs */\r\n width: 100%;\r\n min-height: inherit;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__item {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n user-select: none;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* ============================================\r\n ESTILOS PARA BADGES ANINHADOS\r\n ============================================ */\r\n/* \r\n * ⚠️ EXCEÇÃO AO PADRÃO \"UNSTYLED\":\r\n * \r\n * Normalmente, estilos visuais devem ser aplicados externamente via CSS Parts API.\r\n * Porém, quando um componente incorpora outro componente e ambos usam Shadow DOM,\r\n * CSS externo NÃO pode atravessar os limites do Shadow DOM.\r\n * \r\n * SOLUÇÃO (conforme documentação.md):\r\n * Os estilos para o badge incorporado devem ser aplicados DENTRO deste CSS\r\n * (mesmo contexto Shadow DOM), usando design tokens semânticos.\r\n * \r\n * Referência: documentation.md - \"⚠️ CRITICAL: Styling Embedded Components\"\r\n */\r\n\r\n/* Wrapper do badge para permitir clique */\r\n.voa-container-multi-select__badge-wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Badge incorporado - estilos visuais usando design tokens */\r\n.voa-container-multi-select__badge-wrapper voa-badge {\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Badge base - estilos visuais usando design tokens */\r\n/* Nota: Usamos seletores específicos para garantir que os estilos sejam aplicados\r\n sobre os estilos padrão do badge, já que ambos os componentes usam Shadow DOM */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(base) {\r\n /* Background - Figma: brand-base with 15% opacity */\r\n background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));\r\n \r\n /* Border - Figma: 1px dashed brand-base */\r\n border: 1px dashed var(--branding-coi-colors-light-primary-light, #0064cb);\r\n \r\n /* Border-radius - Figma: pill shape (1024px from tokens) */\r\n border-radius: var(--structure-large-radius-round, 1024px);\r\n \r\n /* Padding - Figma: 2px vertical, 4px horizontal */\r\n padding-block: var(--structure-large-spacing-xxs, 2px);\r\n padding-inline: var(--structure-large-spacing-xs, 4px);\r\n \r\n /* Tipografia - Figma: Lato Regular 16px / 24px */\r\n font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 24px;\r\n font-style: normal;\r\n \r\n /* Cor do texto - Figma: brand-base */\r\n color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n \r\n /* Box-sizing */\r\n box-sizing: border-box;\r\n \r\n /* Transições */\r\n transition: background-color 0.2s ease, border-color 0.2s ease;\r\n \r\n /* Display e layout */\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--structure-large-spacing-xxs, 2px);\r\n}\r\n\r\n/* Hover state do badge */\r\n.voa-container-multi-select__badge-wrapper:hover voa-badge::part(base) {\r\n background-color: var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25));\r\n border-color: var(--branding-coi-colors-light-primary-light-400, #0071c8);\r\n}\r\n\r\n/* Label do badge */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(label) {\r\n color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Ícone leading - esconder quando não necessário */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading) {\r\n display: none;\r\n}\r\n\r\n/* Ícone trailing (close) do badge */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n margin-left: var(--structure-large-spacing-xxs, 2px);\r\n}\r\n\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg {\r\n width: 12px;\r\n height: 12px;\r\n display: block;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Hover no ícone close */\r\n.voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing) {\r\n opacity: 0.8;\r\n}\r\n\r\n/* Disabled state */\r\n.voa-container-multi-select--disabled .voa-container-multi-select__badge-wrapper voa-badge::part(base) {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.voa-container-multi-select__placeholder {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n min-height: inherit;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select--disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n} ","import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\r\n\r\n/**\r\n * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.\r\n * Permite selecionar múltiplos itens dentro de um contêiner.\r\n * \r\n * @part base - The root container element\r\n * @part inner - The inner container wrapper\r\n * @part items - The items container wrapper\r\n * @part item - Individual selectable item\r\n * @part placeholder - The placeholder text element\r\n */\r\n@Component({\r\n tag: 'voa-container-multi-select',\r\n styleUrl: 'voa-container-multi-select.css',\r\n shadow: true,\r\n scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaContainerMultiSelect {\r\n /**\r\n * Lista de itens para seleção\r\n */\r\n @Prop() items: Array<{id: string, label: string, selected?: boolean}> = [];\r\n\r\n /**\r\n * Se verdadeiro, o contêiner estará desabilitado.\r\n */\r\n @Prop() disabled: boolean = false;\r\n\r\n /**\r\n * Texto de placeholder quando não há itens selecionados\r\n */\r\n @Prop() placeholder: string = 'Selecione os itens';\r\n\r\n /**\r\n * Estado interno dos itens selecionados\r\n */\r\n @State() selectedItems: string[] = [];\r\n\r\n /**\r\n * Evento emitido quando a seleção é alterada\r\n */\r\n @Event() voaSelectionChange: EventEmitter<string[]>;\r\n\r\n componentWillLoad() {\r\n // Inicializa os itens selecionados com base nos itens que já têm selected=true\r\n this.syncSelectedItems();\r\n }\r\n\r\n componentDidUpdate() {\r\n // Sincroniza quando items prop muda (chamado após cada render)\r\n this.syncSelectedItems();\r\n }\r\n\r\n /**\r\n * Sincroniza selectedItems quando items prop muda\r\n * Usa componentDidUpdate porque @Watch pode não detectar mudanças em arrays por referência\r\n */\r\n private syncSelectedItems() {\r\n // Atualiza os itens selecionados com base nos itens que têm selected=true\r\n const newSelectedItems = this.items\r\n .filter(item => item.selected)\r\n .map(item => item.id);\r\n \r\n // Só atualiza se houver mudança para evitar loops infinitos\r\n const currentSorted = [...this.selectedItems].sort().join(',');\r\n const newSorted = [...newSelectedItems].sort().join(',');\r\n \r\n if (currentSorted !== newSorted) {\r\n this.selectedItems = newSelectedItems;\r\n }\r\n }\r\n\r\n /**\r\n * Verifica se um item está selecionado\r\n */\r\n private isItemSelected(itemId: string): boolean {\r\n return this.selectedItems.includes(itemId);\r\n }\r\n\r\n /**\r\n * Manipula o clique no badge (remove o item da seleção quando clicado)\r\n */\r\n private handleBadgeClick = (itemId: string) => {\r\n if (!this.disabled) {\r\n // Remove o item da seleção quando o badge é clicado (incluindo o ícone close)\r\n this.selectedItems = this.selectedItems.filter(id => id !== itemId);\r\n this.voaSelectionChange.emit(this.selectedItems);\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <div \r\n part=\"base\"\r\n class={{\r\n 'voa-container-multi-select': true,\r\n 'voa-container-multi-select--disabled': this.disabled\r\n }}\r\n aria-disabled={this.disabled ? 'true' : 'false'}\r\n role=\"listbox\"\r\n aria-multiselectable=\"true\"\r\n >\r\n <div class=\"voa-container-multi-select__inner\" part=\"inner\">\r\n {(() => {\r\n // Filtrar apenas os itens selecionados para renderizar no campo\r\n const selectedItems = this.items.filter(item => {\r\n const isSelected = item.selected === true || this.isItemSelected(item.id);\r\n return isSelected;\r\n });\r\n\r\n // Se não há itens selecionados, mostrar placeholder\r\n if (selectedItems.length === 0) {\r\n return (\r\n <div class=\"voa-container-multi-select__placeholder\" part=\"placeholder\">\r\n {this.placeholder}\r\n </div>\r\n );\r\n }\r\n\r\n // Renderizar apenas os itens selecionados como badges\r\n return (\r\n <div class=\"voa-container-multi-select__items\" part=\"items\">\r\n {selectedItems.map(item => (\r\n <div\r\n key={item.id}\r\n class=\"voa-container-multi-select__badge-wrapper\"\r\n onClick={() => this.handleBadgeClick(item.id)}\r\n role=\"option\"\r\n aria-selected=\"true\"\r\n tabIndex={this.disabled ? -1 : 0}\r\n >\r\n <voa-badge\r\n label={item.label}\r\n variant=\"icons\"\r\n size=\"sm\"\r\n shape=\"pill\"\r\n >\r\n <svg slot=\"end\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </voa-badge>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n })()}\r\n </div>\r\n </div>\r\n );\r\n }\r\n} "],"version":3}
1
+ {"file":"voa-container-multi-select.js","mappings":"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","names":["VoaContainerMultiSelect","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-select/voa-container-multi-select.css?tag=voa-container-multi-select&encapsulation=shadow","src/components/voa-select/voa-container-multi-select.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n display: block;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select {\r\n position: relative;\r\n width: 100%;\r\n min-height: 48px; /* Altura mínima equivalente ao input */\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__inner {\r\n position: relative;\r\n width: 100%;\r\n min-height: inherit;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__items {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: var(--structure-large-spacing-xs, 4px); /* Gap entre itens/badges - Figma: spacing/spacing-xs */\r\n width: 100%;\r\n min-height: inherit;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select__item {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n user-select: none;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* ============================================\r\n ESTILOS PARA BADGES ANINHADOS\r\n ============================================ */\r\n/* \r\n * ⚠️ EXCEÇÃO AO PADRÃO \"UNSTYLED\":\r\n * \r\n * Normalmente, estilos visuais devem ser aplicados externamente via CSS Parts API.\r\n * Porém, quando um componente incorpora outro componente e ambos usam Shadow DOM,\r\n * CSS externo NÃO pode atravessar os limites do Shadow DOM.\r\n * \r\n * SOLUÇÃO (conforme documentação.md):\r\n * Os estilos para o badge incorporado devem ser aplicados DENTRO deste CSS\r\n * (mesmo contexto Shadow DOM), usando design tokens semânticos.\r\n * \r\n * Referência: documentation.md - \"⚠️ CRITICAL: Styling Embedded Components\"\r\n */\r\n\r\n/* Wrapper do badge para permitir clique */\r\n.voa-container-multi-select__badge-wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Badge incorporado - estilos visuais usando design tokens */\r\n.voa-container-multi-select__badge-wrapper voa-badge {\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Badge base - estilos visuais usando design tokens */\r\n/* Nota: Usamos seletores específicos para garantir que os estilos sejam aplicados\r\n sobre os estilos padrão do badge, já que ambos os componentes usam Shadow DOM */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(base) {\r\n /* Background - Figma: brand-base with 15% opacity */\r\n background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));\r\n \r\n /* Border - Figma: 1px dashed brand-base */\r\n border: 1px dashed var(--branding-coi-colors-light-primary-light, #0064cb);\r\n \r\n /* Border-radius - Figma: pill shape (1024px from tokens) */\r\n border-radius: var(--structure-large-radius-round, 1024px);\r\n \r\n /* Padding - Figma: 2px vertical, 4px horizontal */\r\n padding-block: var(--structure-large-spacing-xxs, 2px);\r\n padding-inline: var(--structure-large-spacing-xs, 4px);\r\n \r\n /* Tipografia - Figma: Lato Regular 16px / 24px */\r\n font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 24px;\r\n font-style: normal;\r\n \r\n /* Cor do texto - Figma: brand-base */\r\n color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n \r\n /* Box-sizing */\r\n box-sizing: border-box;\r\n \r\n /* Transições */\r\n transition: background-color 0.2s ease, border-color 0.2s ease;\r\n \r\n /* Display e layout */\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--structure-large-spacing-xxs, 2px);\r\n}\r\n\r\n/* Hover state do badge */\r\n.voa-container-multi-select__badge-wrapper:hover voa-badge::part(base) {\r\n background-color: var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25));\r\n border-color: var(--branding-coi-colors-light-primary-light-400, #0071c8);\r\n}\r\n\r\n/* Label do badge */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(label) {\r\n color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Ícone leading - esconder quando não necessário */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading) {\r\n display: none;\r\n}\r\n\r\n/* Ícone trailing (close) do badge */\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n color: var(--branding-coi-colors-light-primary-light, #0064cb);\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n margin-left: var(--structure-large-spacing-xxs, 2px);\r\n}\r\n\r\n.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg {\r\n width: 12px;\r\n height: 12px;\r\n display: block;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Hover no ícone close */\r\n.voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing) {\r\n opacity: 0.8;\r\n}\r\n\r\n/* Disabled state */\r\n.voa-container-multi-select--disabled .voa-container-multi-select__badge-wrapper voa-badge::part(base) {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.voa-container-multi-select__placeholder {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n min-height: inherit;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-container-multi-select--disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n} ","import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\r\n\r\n/**\r\n * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.\r\n * Permite selecionar múltiplos itens dentro de um contêiner.\r\n * \r\n * @part base - The root container element\r\n * @part inner - The inner container wrapper\r\n * @part items - The items container wrapper\r\n * @part item - Individual selectable item\r\n * @part placeholder - The placeholder text element\r\n */\r\n@Component({\r\n tag: 'voa-container-multi-select',\r\n styleUrl: 'voa-container-multi-select.css',\r\n shadow: true,\r\n scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaContainerMultiSelect {\r\n /**\r\n * Lista de itens para seleção\r\n */\r\n @Prop() items: Array<{id: string, label: string, selected?: boolean}> = [];\r\n\r\n /**\r\n * Se verdadeiro, o contêiner estará desabilitado.\r\n */\r\n @Prop() disabled: boolean = false;\r\n\r\n /**\r\n * Texto de placeholder quando não há itens selecionados\r\n */\r\n @Prop() placeholder: string = 'Selecione os itens';\r\n\r\n /**\r\n * Estado interno dos itens selecionados\r\n */\r\n @State() selectedItems: string[] = [];\r\n\r\n /**\r\n * Evento emitido quando a seleção é alterada\r\n */\r\n @Event() voaSelectionChange: EventEmitter<string[]>;\r\n\r\n componentWillLoad() {\r\n // Inicializa os itens selecionados com base nos itens que já têm selected=true\r\n this.syncSelectedItems();\r\n }\r\n\r\n componentDidUpdate() {\r\n // Sincroniza quando items prop muda (chamado após cada render)\r\n this.syncSelectedItems();\r\n }\r\n\r\n /**\r\n * Sincroniza selectedItems quando items prop muda\r\n * Usa componentDidUpdate porque @Watch pode não detectar mudanças em arrays por referência\r\n */\r\n private syncSelectedItems() {\r\n // Atualiza os itens selecionados com base nos itens que têm selected=true\r\n const newSelectedItems = this.items\r\n .filter(item => item.selected)\r\n .map(item => item.id);\r\n \r\n // Só atualiza se houver mudança para evitar loops infinitos\r\n const currentSorted = [...this.selectedItems].sort().join(',');\r\n const newSorted = [...newSelectedItems].sort().join(',');\r\n \r\n if (currentSorted !== newSorted) {\r\n this.selectedItems = newSelectedItems;\r\n }\r\n }\r\n\r\n /**\r\n * Verifica se um item está selecionado\r\n */\r\n private isItemSelected(itemId: string): boolean {\r\n return this.selectedItems.includes(itemId);\r\n }\r\n\r\n /**\r\n * Manipula o clique no badge (remove o item da seleção quando clicado)\r\n */\r\n private handleBadgeClick = (itemId: string) => {\r\n if (!this.disabled) {\r\n // Remove o item da seleção quando o badge é clicado (incluindo o ícone close)\r\n this.selectedItems = this.selectedItems.filter(id => id !== itemId);\r\n this.voaSelectionChange.emit(this.selectedItems);\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <div \r\n part=\"base\"\r\n class={{\r\n 'voa-container-multi-select': true,\r\n 'voa-container-multi-select--disabled': this.disabled\r\n }}\r\n aria-disabled={this.disabled ? 'true' : 'false'}\r\n role=\"listbox\"\r\n aria-multiselectable=\"true\"\r\n >\r\n <div class=\"voa-container-multi-select__inner\" part=\"inner\">\r\n {(() => {\r\n // Filtrar apenas os itens selecionados para renderizar no campo\r\n const selectedItems = this.items.filter(item => {\r\n const isSelected = item.selected === true || this.isItemSelected(item.id);\r\n return isSelected;\r\n });\r\n\r\n // Se não há itens selecionados, mostrar placeholder\r\n if (selectedItems.length === 0) {\r\n return (\r\n <div class=\"voa-container-multi-select__placeholder\" part=\"placeholder\">\r\n {this.placeholder}\r\n </div>\r\n );\r\n }\r\n\r\n // Renderizar apenas os itens selecionados como badges\r\n return (\r\n <div class=\"voa-container-multi-select__items\" part=\"items\">\r\n {selectedItems.map(item => (\r\n <div\r\n key={item.id}\r\n class=\"voa-container-multi-select__badge-wrapper\"\r\n onClick={() => this.handleBadgeClick(item.id)}\r\n role=\"option\"\r\n aria-selected=\"true\"\r\n tabIndex={this.disabled ? -1 : 0}\r\n >\r\n <voa-badge\r\n label={item.label}\r\n variant=\"icons\"\r\n size=\"sm\"\r\n shape=\"pill\"\r\n >\r\n <svg slot=\"end\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </voa-badge>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n })()}\r\n </div>\r\n </div>\r\n );\r\n }\r\n} "],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h } from './index.js';
1
+ import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
2
2
 
3
3
  const datepickerCss = ".datepicker{padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;width:100%}";
4
4
 
@@ -35,7 +35,6 @@ function defineCustomElement$1() {
35
35
  break;
36
36
  } });
37
37
  }
38
- defineCustomElement$1();
39
38
 
40
39
  const VoaDatepicker = DatePicker;
41
40
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-datepicker.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASU,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK;AACjC,SAAC;AAYF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,8DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-datepicker/datepicker.css?tag=voa-datepicker&encapsulation=shadow","src/components/voa-datepicker/datepicker.tsx"],"sourcesContent":[".datepicker {\r\n padding: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n width: 100%;\r\n}\r\n","import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-datepicker\",\r\n styleUrl: \"datepicker.css\",\r\n shadow: true,\r\n})\r\nexport class DatePicker {\r\n @Prop() value: string;\r\n @State() selectedDate: string;\r\n\r\n private handleDateChange = (event: Event) => {\r\n const input = event.target as HTMLInputElement;\r\n this.selectedDate = input.value;\r\n };\r\n\r\n render() {\r\n return (\r\n <input\r\n class=\"datepicker\"\r\n type=\"date\"\r\n value={this.selectedDate}\r\n onInput={this.handleDateChange}\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"voa-datepicker.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6FAA6F;;MCOtG,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASU,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK;AACjC,SAAC;AAYF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,8DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-datepicker/datepicker.css?tag=voa-datepicker&encapsulation=shadow","src/components/voa-datepicker/datepicker.tsx"],"sourcesContent":[".datepicker {\r\n padding: 10px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n width: 100%;\r\n}\r\n","import { Component, Prop, h, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-datepicker\",\r\n styleUrl: \"datepicker.css\",\r\n shadow: true,\r\n})\r\nexport class DatePicker {\r\n @Prop() value: string;\r\n @State() selectedDate: string;\r\n\r\n private handleDateChange = (event: Event) => {\r\n const input = event.target as HTMLInputElement;\r\n this.selectedDate = input.value;\r\n };\r\n\r\n render() {\r\n return (\r\n <input\r\n class=\"datepicker\"\r\n type=\"date\"\r\n value={this.selectedDate}\r\n onInput={this.handleDateChange}\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h } from './index.js';
1
+ import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
2
2
 
3
3
  const drawerCss = ".drawer{position:fixed;top:0;left:0;height:100%;width:250px;background-color:#f4f4f4;box-shadow:2px 0 5px rgba(0, 0, 0, 0.3);overflow-x:hidden;transform:translateX(-100%);transition:transform 0.3s ease-out}.drawer.open{transform:translateX(0)}";
4
4
 
@@ -36,7 +36,6 @@ function defineCustomElement$1() {
36
36
  break;
37
37
  } });
38
38
  }
39
- defineCustomElement$1();
40
39
 
41
40
  const VoaDrawer = Drawer;
42
41
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-drawer.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qPAAqP;;MCO1P,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAcF;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,CACtC,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-drawer/drawer.css?tag=voa-drawer&encapsulation=shadow","src/components/voa-drawer/drawer.tsx"],"sourcesContent":[".drawer {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n width: 250px;\r\n background-color: #f4f4f4;\r\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);\r\n overflow-x: hidden;\r\n transform: translateX(-100%);\r\n transition: transform 0.3s ease-out;\r\n}\r\n\r\n.drawer.open {\r\n transform: translateX(0);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-drawer\",\r\n styleUrl: \"drawer.css\",\r\n shadow: true,\r\n})\r\nexport class Drawer {\r\n @Prop() open: boolean = false;\r\n @State() isOpen: boolean = this.open;\r\n\r\n toggleDrawer = () => {\r\n this.isOpen = !this.isOpen;\r\n };\r\n\r\n render() {\r\n return (\r\n <div>\r\n <button onClick={this.toggleDrawer}>\r\n {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n </button>\r\n <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"voa-drawer.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qPAAqP;;MCO1P,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACpB,QAAA,IAAA,CAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAcF;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,IAC/B,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,CACtC,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-drawer/drawer.css?tag=voa-drawer&encapsulation=shadow","src/components/voa-drawer/drawer.tsx"],"sourcesContent":[".drawer {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n width: 250px;\r\n background-color: #f4f4f4;\r\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);\r\n overflow-x: hidden;\r\n transform: translateX(-100%);\r\n transition: transform 0.3s ease-out;\r\n}\r\n\r\n.drawer.open {\r\n transform: translateX(0);\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-drawer\",\r\n styleUrl: \"drawer.css\",\r\n shadow: true,\r\n})\r\nexport class Drawer {\r\n @Prop() open: boolean = false;\r\n @State() isOpen: boolean = this.open;\r\n\r\n toggleDrawer = () => {\r\n this.isOpen = !this.isOpen;\r\n };\r\n\r\n render() {\r\n return (\r\n <div>\r\n <button onClick={this.toggleDrawer}>\r\n {this.isOpen ? \"Close Drawer\" : \"Open Drawer\"}\r\n </button>\r\n <div class={`drawer ${this.isOpen ? \"open\" : \"\"}`}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h } from './index.js';
1
+ import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
2
2
 
3
3
  const dropdownCss = ".dropdown{position:relative;display:inline-block}.dropdown-button{padding:10px 20px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;transition:background-color 0.2s}.dropdown-list{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;border-radius:4px;background-color:#fff;list-style:none;padding:0;margin:0;z-index:1}.dropdown-list li{padding:10px;cursor:pointer}.dropdown-list li:hover{background-color:#f4f4f4}";
4
4
 
@@ -41,7 +41,6 @@ function defineCustomElement$1() {
41
41
  break;
42
42
  } });
43
43
  }
44
- defineCustomElement$1();
45
44
 
46
45
  const VoaDropdown = Dropdown;
47
46
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-dropdown.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0cAA0c;;MCOjd,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AACrB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAGhC,QAAA,IAAc,CAAA,cAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,MAAc,KAAI;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,MAAM;AACtB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAkBF;IAhBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,iBAAiB,IAC1D,IAAI,CAAC,QAAQ,IAAI,kBAAkB,CAC7B,EACR,IAAI,CAAC,MAAM,KACV,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAI,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAG,EAAA,MAAM,CAAM,CAC5D,CAAC,CACC,CACN,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-dropdown/dropdown.css?tag=voa-dropdown&encapsulation=shadow","src/components/voa-dropdown/dropdown.tsx"],"sourcesContent":[".dropdown {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.dropdown-button {\r\n padding: 10px 20px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n background-color: #fff;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.dropdown-list {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n width: 100%;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n background-color: #fff;\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n z-index: 1;\r\n}\r\n\r\n.dropdown-list li {\r\n padding: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.dropdown-list li:hover {\r\n background-color: #f4f4f4;\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-dropdown\",\r\n styleUrl: \"dropdown.css\",\r\n shadow: true,\r\n})\r\nexport class Dropdown {\r\n @Prop() options: string[] = [];\r\n @State() isOpen: boolean = false;\r\n @State() selected: string;\r\n\r\n toggleDropdown = () => {\r\n this.isOpen = !this.isOpen;\r\n };\r\n\r\n selectOption = (option: string) => {\r\n this.selected = option;\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <div class=\"dropdown\">\r\n <button onClick={this.toggleDropdown} class=\"dropdown-button\">\r\n {this.selected || \"Select an option\"}\r\n </button>\r\n {this.isOpen && (\r\n <ul class=\"dropdown-list\">\r\n {this.options.map((option) => (\r\n <li onClick={() => this.selectOption(option)}>{option}</li>\r\n ))}\r\n </ul>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"voa-dropdown.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0cAA0c;;MCOjd,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAO,CAAA,OAAA,GAAa,EAAE;AACrB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAGhC,QAAA,IAAc,CAAA,cAAA,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC5B,SAAC;AAED,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,MAAc,KAAI;AAChC,YAAA,IAAI,CAAC,QAAQ,GAAG,MAAM;AACtB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAkBF;IAhBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,iBAAiB,IAC1D,IAAI,CAAC,QAAQ,IAAI,kBAAkB,CAC7B,EACR,IAAI,CAAC,MAAM,KACV,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvB,CAAI,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAG,EAAA,MAAM,CAAM,CAC5D,CAAC,CACC,CACN,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-dropdown/dropdown.css?tag=voa-dropdown&encapsulation=shadow","src/components/voa-dropdown/dropdown.tsx"],"sourcesContent":[".dropdown {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.dropdown-button {\r\n padding: 10px 20px;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n background-color: #fff;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.dropdown-list {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n width: 100%;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n background-color: #fff;\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n z-index: 1;\r\n}\r\n\r\n.dropdown-list li {\r\n padding: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.dropdown-list li:hover {\r\n background-color: #f4f4f4;\r\n}\r\n","import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-dropdown\",\r\n styleUrl: \"dropdown.css\",\r\n shadow: true,\r\n})\r\nexport class Dropdown {\r\n @Prop() options: string[] = [];\r\n @State() isOpen: boolean = false;\r\n @State() selected: string;\r\n\r\n toggleDropdown = () => {\r\n this.isOpen = !this.isOpen;\r\n };\r\n\r\n selectOption = (option: string) => {\r\n this.selected = option;\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <div class=\"dropdown\">\r\n <button onClick={this.toggleDropdown} class=\"dropdown-button\">\r\n {this.selected || \"Select an option\"}\r\n </button>\r\n {this.isOpen && (\r\n <ul class=\"dropdown-list\">\r\n {this.options.map((option) => (\r\n <li onClick={() => this.selectOption(option)}>{option}</li>\r\n ))}\r\n </ul>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,5 +1,5 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
2
- import { d as defineCustomElement$2 } from './p-DPyVgztA.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
2
+ import { d as defineCustomElement$2 } from './p-C3RlQWjO.js';
3
3
 
4
4
  const voaInputAddonCss = ":host{display:inline-flex;box-sizing:border-box}.voa-input-addon__base{display:flex;align-items:center;box-sizing:border-box;height:100%}.voa-input-addon--interactive .voa-input-addon__base{cursor:pointer;user-select:none}.voa-input-addon__content{display:flex;align-items:center;gap:var(--spacing-spacing-xxs, 2px);box-sizing:border-box;width:100%;height:100%}.voa-input-addon__text{display:inline-block;box-sizing:border-box}.voa-input-addon__icon,.voa-input-addon__flag-icon,.voa-input-addon__dropdown-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}.voa-input-addon__flag-icon{width:24px;height:24px;border-radius:100px}.voa-input-addon__button-text{display:inline-block;box-sizing:border-box}";
5
5
 
@@ -149,7 +149,6 @@ function defineCustomElement$1() {
149
149
  break;
150
150
  } });
151
151
  }
152
- defineCustomElement$1();
153
152
 
154
153
  const VoaInputAddon = VoaInputAddon$1;
155
154
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-input-addon.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,2uBAA2uB;;MCsBvvBA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASE;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAsG,OAAO;AAE7I;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAAY,SAAS;AAE3C;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,QAAQ;AAEvC;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,aAAa;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AAEhC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,MAAM;AAEtC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,GAAG;AAE/B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAmB,KAAK;AAmBxC;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAED;;AAEG;AACK,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,YAAA,QAAQ,KAAK,CAAC,GAAG;AACf,gBAAA,KAAK,OAAO;AACZ,gBAAA,KAAK,GAAG;oBACN,KAAK,CAAC,cAAc,EAAE;oBACtB,IAAI,CAAC,WAAW,EAAE;oBAClB;;AAEN,SAAC;AAiKF;AA/LC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;;AACZ,QAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,YAAY,CAAgB;QAClF,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,EAAE;;;IAwBrB,MAAM,GAAA;QACJ,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;QAEpG,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAC1C,gBAAA,8BAA8B,EAAE,aAAa;AAC9C,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS,EACrD,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,EACzD,IAAI,EAAE,aAAa,GAAG,QAAQ,GAAG,SAAS,EAC1C,QAAQ,EAAE,aAAa,GAAG,CAAC,GAAG,SAAS,EAC3B,YAAA,EAAA,IAAI,CAAC,YAAY,EAAE,EAE9B,EAAA,IAAI,CAAC,aAAa,EAAE,CACjB,CACD;;IAIH,YAAY,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,IAAI,CAAC,WAAW,IAAI,OAAO;AACpC,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,cAAc;AACvB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,cAAc,IAAI,CAAC,cAAc,IAAI,OAAO,EAAE;AACvD,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,mBAAmB,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE;AACpD,YAAA,KAAK,eAAe;AAClB,gBAAA,OAAO,oBAAoB,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE;AACtD,YAAA;AACE,gBAAA,OAAO,SAAS;;;IAId,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,cAAc;AACjB,gBAAA,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAA,EAClD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB,EAC5C,EAAA,IAAI,CAAC,QAAQ,CACT,CACH;AAGV,YAAA,KAAK,QAAQ;gBACX,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAA,EAClD,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB,EAC5C,EAAA,IAAI,CAAC,cAAc,CACf,EACP,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,gCAAgC,EAAA,EAC/D,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,mBAAmB,EACrB,MAAM,EAAC,cAAc,EACR,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,qBACN,OAAO,EAAA,CACvB,CACE,CACD,CACH;AAGV,YAAA,KAAK,OAAO;AACV,gBAAA,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAA,EAClD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB,EAAA,EAC7C,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,sBAAsB,EACxB,MAAM,EAAC,cAAc,EACR,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,qBACN,OAAO,EAAA,CACvB,CACE,CACD,CACH;AAGV,YAAA,KAAK,OAAO;gBACV,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAA,EAClD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAQ,CAAA,EAC5D,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB,EAC5C,EAAA,IAAI,CAAC,WAAW,CACZ,EACP,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,gCAAgC,EAAA,EAC/D,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,mBAAmB,EACrB,MAAM,EAAC,cAAc,EACR,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,qBACN,OAAO,EAAA,CACvB,CACE,CACD,CACH;AAGV,YAAA,KAAK,QAAQ;AACX,gBAAA,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAA,EAClD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,8BAA8B,EACnD,EAAA,IAAI,CAAC,WAAW,CACZ,CACH;AAGV,YAAA,KAAK,eAAe;gBAClB,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAA,EAClD,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB,EAC5C,EAAA,IAAI,CAAC,YAAY,CACb,EACP,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,gCAAgC,EAAA,EAC/D,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,mBAAmB,EACrB,MAAM,EAAC,cAAc,EACR,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,qBACN,OAAO,EAAA,CACvB,CACE,CACD,CACH;AAGV,YAAA,KAAK,UAAU;AACb,gBAAA,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAA,EAClD,CAAA,CAAA,gBAAA,EAAA,EAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAmB,CAAA,CAC/E;AAGV,YAAA,KAAK,OAAO;AACZ,YAAA;AACE,gBAAA,QACE,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,0BAA0B,EAAA,EAClD,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB,EAC5C,EAAA,IAAI,CAAC,cAAc,CACf,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaInputAddon","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-input-addon/voa-input-addon.css?tag=voa-input-addon&encapsulation=shadow","src/components/voa-input-addon/voa-input-addon.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n display: inline-flex;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__base {\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n height: 100%;\r\n}\r\n\r\n.voa-input-addon--interactive .voa-input-addon__base {\r\n cursor: pointer;\r\n user-select: none;\r\n}\r\n\r\n.voa-input-addon__content {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-spacing-xxs, 2px);\r\n box-sizing: border-box;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.voa-input-addon__text {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__icon,\r\n.voa-input-addon__flag-icon,\r\n.voa-input-addon__dropdown-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__flag-icon {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 100px;\r\n}\r\n\r\n.voa-input-addon__button-text {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Componente Input-Addon para elementos auxiliares em inputs.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do addon\r\n * @part content - O conteúdo do addon\r\n * @part icon - O ícone (quando aplicável)\r\n * @part text - O texto do addon\r\n * @part dropdown-icon - O ícone de dropdown (quando aplicável)\r\n */\r\n@Component({\r\n tag: 'voa-input-addon',\r\n styleUrl: 'voa-input-addon.css',\r\n shadow: true,\r\n scoped: false,\r\n})\r\nexport class VoaInputAddon {\r\n @Element() host: HTMLElement;\r\n\r\n /**\r\n * Variante do addon\r\n */\r\n @Prop({ reflect: true }) variant: 'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post' = 'label';\r\n\r\n /**\r\n * Texto do label/prepend (para variantes label, select)\r\n */\r\n @Prop() prependContent?: string = 'http://';\r\n\r\n /**\r\n * Código do país (para variante flags)\r\n */\r\n @Prop() countryCode?: string = 'BR +55';\r\n\r\n /**\r\n * Texto do botão (para variante button)\r\n */\r\n @Prop() buttonLabel?: string = 'Procurar...';\r\n\r\n /**\r\n * Símbolo da moeda (para variante currency-pre)\r\n */\r\n @Prop() currency?: string = 'R$';\r\n\r\n /**\r\n * Nome da moeda (para variante currency-post)\r\n */\r\n @Prop() currencyName?: string = 'Real';\r\n\r\n /**\r\n * Tecla do atalho (para variante shortcut)\r\n */\r\n @Prop() shortcut?: string = 'S';\r\n\r\n /**\r\n * Plataforma do atalho (para variante shortcut)\r\n */\r\n @Prop() platform?: 'mac' | 'win' = 'mac';\r\n\r\n /**\r\n * Evento emitido quando o addon é clicado (para variantes interativas)\r\n */\r\n @Event() dsClick: EventEmitter<void>;\r\n\r\n /**\r\n * Método para acessibilidade WCAG 2.2 AA.\r\n * Delega foco ao elemento interno nativo.\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const focusable = this.host.shadowRoot?.querySelector('[tabindex]') as HTMLElement;\r\n if (focusable) {\r\n focusable.focus();\r\n }\r\n }\r\n\r\n /**\r\n * Handler para clique no addon\r\n */\r\n private handleClick = () => {\r\n this.dsClick.emit();\r\n };\r\n\r\n /**\r\n * Handler para navegação por teclado (WCAG 2.2 AA).\r\n */\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n switch (event.key) {\r\n case 'Enter':\r\n case ' ':\r\n event.preventDefault();\r\n this.handleClick();\r\n break;\r\n }\r\n };\r\n\r\n render() {\r\n const isInteractive = ['button', 'select', 'flags', 'currency-post', 'clear'].includes(this.variant);\r\n\r\n return (\r\n <Host\r\n class={{\r\n 'voa-input-addon': true,\r\n [`voa-input-addon--${this.variant}`]: true,\r\n 'voa-input-addon--interactive': isInteractive,\r\n }}\r\n >\r\n <div\r\n part=\"base\"\r\n class=\"voa-input-addon__base\"\r\n onClick={isInteractive ? this.handleClick : undefined}\r\n onKeyDown={isInteractive ? this.handleKeyDown : undefined}\r\n role={isInteractive ? 'button' : undefined}\r\n tabindex={isInteractive ? 0 : undefined}\r\n aria-label={this.getAriaLabel()}\r\n >\r\n {this.renderContent()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private getAriaLabel(): string | undefined {\r\n switch (this.variant) {\r\n case 'button':\r\n return this.buttonLabel || 'Botão';\r\n case 'clear':\r\n return 'Limpar campo';\r\n case 'select':\r\n return `Selecionar ${this.prependContent || 'opção'}`;\r\n case 'flags':\r\n return `Selecionar país ${this.countryCode || ''}`;\r\n case 'currency-post':\r\n return `Selecionar moeda ${this.currencyName || ''}`;\r\n default:\r\n return undefined;\r\n }\r\n }\r\n\r\n private renderContent() {\r\n switch (this.variant) {\r\n case 'currency-pre':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.currency}\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'select':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.prependContent}\r\n </span>\r\n <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 10L12 15L17 10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'clear':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"icon\" class=\"voa-input-addon__icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18 6L6 18M6 6L18 18\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'flags':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"icon\" class=\"voa-input-addon__flag-icon\"></span>\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.countryCode}\r\n </span>\r\n <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 10L12 15L17 10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'button':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__button-text\">\r\n {this.buttonLabel}\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'currency-post':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.currencyName}\r\n </span>\r\n <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 10L12 15L17 10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'shortcut':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <voa-keybinding shortcut={this.shortcut} platform={this.platform}></voa-keybinding>\r\n </div>\r\n );\r\n\r\n case 'label':\r\n default:\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.prependContent}\r\n </span>\r\n </div>\r\n );\r\n }\r\n }\r\n}\r\n\r\n"],"version":3}
1
+ {"file":"voa-input-addon.js","mappings":"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","names":["VoaInputAddon","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-input-addon/voa-input-addon.css?tag=voa-input-addon&encapsulation=shadow","src/components/voa-input-addon/voa-input-addon.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n display: inline-flex;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__base {\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n height: 100%;\r\n}\r\n\r\n.voa-input-addon--interactive .voa-input-addon__base {\r\n cursor: pointer;\r\n user-select: none;\r\n}\r\n\r\n.voa-input-addon__content {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-spacing-xxs, 2px);\r\n box-sizing: border-box;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.voa-input-addon__text {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__icon,\r\n.voa-input-addon__flag-icon,\r\n.voa-input-addon__dropdown-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input-addon__flag-icon {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 100px;\r\n}\r\n\r\n.voa-input-addon__button-text {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Componente Input-Addon para elementos auxiliares em inputs.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do addon\r\n * @part content - O conteúdo do addon\r\n * @part icon - O ícone (quando aplicável)\r\n * @part text - O texto do addon\r\n * @part dropdown-icon - O ícone de dropdown (quando aplicável)\r\n */\r\n@Component({\r\n tag: 'voa-input-addon',\r\n styleUrl: 'voa-input-addon.css',\r\n shadow: true,\r\n scoped: false,\r\n})\r\nexport class VoaInputAddon {\r\n @Element() host: HTMLElement;\r\n\r\n /**\r\n * Variante do addon\r\n */\r\n @Prop({ reflect: true }) variant: 'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post' = 'label';\r\n\r\n /**\r\n * Texto do label/prepend (para variantes label, select)\r\n */\r\n @Prop() prependContent?: string = 'http://';\r\n\r\n /**\r\n * Código do país (para variante flags)\r\n */\r\n @Prop() countryCode?: string = 'BR +55';\r\n\r\n /**\r\n * Texto do botão (para variante button)\r\n */\r\n @Prop() buttonLabel?: string = 'Procurar...';\r\n\r\n /**\r\n * Símbolo da moeda (para variante currency-pre)\r\n */\r\n @Prop() currency?: string = 'R$';\r\n\r\n /**\r\n * Nome da moeda (para variante currency-post)\r\n */\r\n @Prop() currencyName?: string = 'Real';\r\n\r\n /**\r\n * Tecla do atalho (para variante shortcut)\r\n */\r\n @Prop() shortcut?: string = 'S';\r\n\r\n /**\r\n * Plataforma do atalho (para variante shortcut)\r\n */\r\n @Prop() platform?: 'mac' | 'win' = 'mac';\r\n\r\n /**\r\n * Evento emitido quando o addon é clicado (para variantes interativas)\r\n */\r\n @Event() dsClick: EventEmitter<void>;\r\n\r\n /**\r\n * Método para acessibilidade WCAG 2.2 AA.\r\n * Delega foco ao elemento interno nativo.\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const focusable = this.host.shadowRoot?.querySelector('[tabindex]') as HTMLElement;\r\n if (focusable) {\r\n focusable.focus();\r\n }\r\n }\r\n\r\n /**\r\n * Handler para clique no addon\r\n */\r\n private handleClick = () => {\r\n this.dsClick.emit();\r\n };\r\n\r\n /**\r\n * Handler para navegação por teclado (WCAG 2.2 AA).\r\n */\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n switch (event.key) {\r\n case 'Enter':\r\n case ' ':\r\n event.preventDefault();\r\n this.handleClick();\r\n break;\r\n }\r\n };\r\n\r\n render() {\r\n const isInteractive = ['button', 'select', 'flags', 'currency-post', 'clear'].includes(this.variant);\r\n\r\n return (\r\n <Host\r\n class={{\r\n 'voa-input-addon': true,\r\n [`voa-input-addon--${this.variant}`]: true,\r\n 'voa-input-addon--interactive': isInteractive,\r\n }}\r\n >\r\n <div\r\n part=\"base\"\r\n class=\"voa-input-addon__base\"\r\n onClick={isInteractive ? this.handleClick : undefined}\r\n onKeyDown={isInteractive ? this.handleKeyDown : undefined}\r\n role={isInteractive ? 'button' : undefined}\r\n tabindex={isInteractive ? 0 : undefined}\r\n aria-label={this.getAriaLabel()}\r\n >\r\n {this.renderContent()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private getAriaLabel(): string | undefined {\r\n switch (this.variant) {\r\n case 'button':\r\n return this.buttonLabel || 'Botão';\r\n case 'clear':\r\n return 'Limpar campo';\r\n case 'select':\r\n return `Selecionar ${this.prependContent || 'opção'}`;\r\n case 'flags':\r\n return `Selecionar país ${this.countryCode || ''}`;\r\n case 'currency-post':\r\n return `Selecionar moeda ${this.currencyName || ''}`;\r\n default:\r\n return undefined;\r\n }\r\n }\r\n\r\n private renderContent() {\r\n switch (this.variant) {\r\n case 'currency-pre':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.currency}\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'select':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.prependContent}\r\n </span>\r\n <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 10L12 15L17 10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'clear':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"icon\" class=\"voa-input-addon__icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18 6L6 18M6 6L18 18\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'flags':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"icon\" class=\"voa-input-addon__flag-icon\"></span>\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.countryCode}\r\n </span>\r\n <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 10L12 15L17 10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'button':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__button-text\">\r\n {this.buttonLabel}\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'currency-post':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.currencyName}\r\n </span>\r\n <span part=\"dropdown-icon\" class=\"voa-input-addon__dropdown-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7 10L12 15L17 10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </span>\r\n </div>\r\n );\r\n\r\n case 'shortcut':\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <voa-keybinding shortcut={this.shortcut} platform={this.platform}></voa-keybinding>\r\n </div>\r\n );\r\n\r\n case 'label':\r\n default:\r\n return (\r\n <div part=\"content\" class=\"voa-input-addon__content\">\r\n <span part=\"text\" class=\"voa-input-addon__text\">\r\n {this.prependContent}\r\n </span>\r\n </div>\r\n );\r\n }\r\n }\r\n}\r\n\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
1
+ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CFBaVtm5.js';
2
2
 
3
3
  const voaInputCss = ":host{display:block;box-sizing:border-box}.voa-input__title-row{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.voa-input__label{display:block;box-sizing:border-box}.voa-input__info{display:flex;align-items:center;gap:4px;box-sizing:border-box}.voa-input__info-icon{display:flex;align-items:center;justify-content:center}.voa-input__required-indicator{display:inline;box-sizing:border-box}.voa-input__container{position:relative;display:flex;align-items:center;box-sizing:border-box;overflow:hidden}.voa-input__prefix{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.voa-input__suffix{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.voa-input__input{flex:1 1 0%;min-width:0;width:100%;border:none;outline:none;background:transparent;box-sizing:border-box;display:block}.voa-input__input:disabled{cursor:not-allowed}.voa-input__input:read-only{cursor:default}.voa-input__helper-text{display:block;box-sizing:border-box}.is-hidden{display:none !important}";
4
4
 
@@ -226,7 +226,6 @@ function defineCustomElement$1() {
226
226
  break;
227
227
  } });
228
228
  }
229
- defineCustomElement$1();
230
229
 
231
230
  const VoaInput = VoaInput$1;
232
231
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-input.js","mappings":"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","names":["VoaInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-input/voa-input.css?tag=voa-input&encapsulation=shadow","src/components/voa-input/voa-input.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__title-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__label {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__info {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__info-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.voa-input__required-indicator {\r\n display: inline;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__container {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n}\r\n\r\n.voa-input__prefix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__suffix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__input {\r\n flex: 1 1 0%;\r\n min-width: 0;\r\n width: 100%;\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n box-sizing: border-box;\r\n display: block;\r\n}\r\n\r\n.voa-input__input:disabled {\r\n cursor: not-allowed;\r\n}\r\n\r\n.voa-input__input:read-only {\r\n cursor: default;\r\n}\r\n\r\n.voa-input__helper-text {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.is-hidden {\r\n display: none !important;\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Method, Watch } from '@stencil/core';\r\n\r\n/**\r\n * Componente de input para entrada de dados do Voa Design System.\r\n * \r\n * Baseado no design do Figma, seguindo o padrão \"unstyled\" (headless).\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do componente\r\n * @part title-row - Container do titulo (label + info)\r\n * @part label - O elemento de label\r\n * @part info - Container da informacao adicional\r\n * @part info-icon - O ícone de informação\r\n * @part container - O wrapper do input (border, background)\r\n * @part input - O elemento input nativo\r\n * @part prefix - O wrapper do slot prefix\r\n * @part suffix - O wrapper do slot suffix\r\n * @part helper-text - O elemento de texto auxiliar/erro\r\n */\r\n@Component({\r\n tag: 'voa-input',\r\n styleUrl: 'voa-input.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaInput {\r\n @Element() host: HTMLVoaInputElement;\r\n\r\n /**\r\n * ID do elemento input\r\n */\r\n @Prop() inputId?: string;\r\n\r\n /**\r\n * Tipo do input (text, password, email, search, tel, etc.)\r\n */\r\n @Prop() type: string = 'text';\r\n\r\n /**\r\n * Nome do elemento input\r\n */\r\n @Prop() name?: string;\r\n\r\n /**\r\n * Valor do input\r\n */\r\n @Prop() value?: string = '';\r\n\r\n /**\r\n * Texto de placeholder\r\n */\r\n @Prop() placeholder?: string;\r\n\r\n /**\r\n * Texto do label\r\n */\r\n @Prop() label?: string;\r\n\r\n /**\r\n * Texto auxiliar ou mensagem de erro\r\n */\r\n @Prop() helperText?: string;\r\n\r\n /**\r\n * Indica se o campo está em estado de erro\r\n */\r\n @Prop({ reflect: true }) error: boolean = false;\r\n\r\n /**\r\n * Indica se o campo está em estado de sucesso\r\n */\r\n @Prop({ reflect: true }) valid: boolean = false;\r\n\r\n /**\r\n * Indica se o campo está em estado de aviso\r\n */\r\n @Prop({ reflect: true }) warning: boolean = false;\r\n\r\n /**\r\n * Indica se o campo está desabilitado\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /**\r\n * Indica se o campo é somente leitura\r\n */\r\n @Prop({ reflect: true }) readonly: boolean = false;\r\n\r\n /**\r\n * Indica se o campo é obrigatório\r\n */\r\n @Prop({ reflect: true }) required: boolean = false;\r\n\r\n /**\r\n * Variante de preenchimento (filled vs unfilled)\r\n */\r\n @Prop({ reflect: true }) fill: boolean = true;\r\n\r\n /**\r\n * Tamanho do input\r\n */\r\n @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\r\n\r\n /**\r\n * Mostrar ícone de informação na área de info\r\n */\r\n @Prop() showInfoIcon: boolean = true;\r\n\r\n /**\r\n * Estado interno que controla se o campo está em foco\r\n */\r\n @State() isFocused: boolean = false;\r\n\r\n @State() hasPrefix: boolean = false;\r\n @State() hasSuffix: boolean = false;\r\n @State() hasInfo: boolean = false;\r\n\r\n /**\r\n * Valor interno do input\r\n */\r\n @State() internalValue: string = '';\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string) {\r\n this.internalValue = newValue;\r\n }\r\n\r\n /**\r\n * Referência ao elemento input nativo\r\n */\r\n private inputRef?: HTMLInputElement;\r\n\r\n /**\r\n * Evento emitido quando o valor é alterado\r\n */\r\n @Event() dsChange: EventEmitter<string>;\r\n\r\n /**\r\n * Evento emitido durante a digitação\r\n */\r\n @Event() dsInput: EventEmitter<string>;\r\n\r\n /**\r\n * Evento emitido quando o campo ganha foco\r\n */\r\n @Event() dsFocus: EventEmitter<FocusEvent>;\r\n\r\n /**\r\n * Evento emitido quando o campo perde foco\r\n */\r\n @Event() dsBlur: EventEmitter<FocusEvent>;\r\n\r\n /**\r\n * Gera um ID único se não fornecido\r\n */\r\n private generateId(): string {\r\n if (this.inputId) {\r\n return this.inputId;\r\n }\r\n return `voa-input-${Math.random().toString(36).substr(2, 9)}`;\r\n }\r\n\r\n /**\r\n * ID do input gerado ou fornecido\r\n */\r\n private inputIdValue: string = '';\r\n\r\n componentWillLoad() {\r\n this.inputIdValue = this.generateId();\r\n this.internalValue = this.value || '';\r\n this.checkSlots();\r\n }\r\n\r\n private checkSlots = () => {\r\n this.hasPrefix = !!this.host.querySelector('[slot=\"prefix\"]');\r\n this.hasSuffix = !!this.host.querySelector('[slot=\"suffix\"]');\r\n this.hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n };\r\n\r\n /**\r\n * Gerenciador de evento de input\r\n */\r\n private handleInput = (event: Event) => {\r\n const input = event.target as HTMLInputElement;\r\n this.internalValue = input.value;\r\n this.dsInput.emit(this.internalValue);\r\n };\r\n\r\n /**\r\n * Gerenciador de evento de change\r\n */\r\n private handleChange = (event: Event) => {\r\n const input = event.target as HTMLInputElement;\r\n this.internalValue = input.value;\r\n this.dsChange.emit(this.internalValue);\r\n };\r\n\r\n /**\r\n * Gerenciador de evento de focus\r\n */\r\n private handleFocus = (event: FocusEvent) => {\r\n this.isFocused = true;\r\n this.dsFocus.emit(event);\r\n };\r\n\r\n /**\r\n * Gerenciador de evento de blur\r\n */\r\n private handleBlur = (event: FocusEvent) => {\r\n this.isFocused = false;\r\n this.dsBlur.emit(event);\r\n };\r\n\r\n /**\r\n * Método para acessibilidade WCAG 2.2 AA.\r\n * Delega foco ao elemento interno nativo.\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n if (this.inputRef) {\r\n this.inputRef.focus();\r\n }\r\n }\r\n\r\n /**\r\n * Handler para navegação por teclado (WCAG 2.2 AA).\r\n */\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled || this.readonly) {\r\n return;\r\n }\r\n\r\n // Permitir navegação normal por teclado\r\n // Enter e Space já são tratados pelo input nativo\r\n switch (event.key) {\r\n case 'Escape':\r\n // Se o input tiver valor, limpar pode ser útil\r\n // Mas não implementamos isso por padrão para não quebrar UX\r\n break;\r\n }\r\n };\r\n\r\n render() {\r\n const helperTextId = `${this.inputIdValue}-helper`;\r\n const hasTitleRow = !!this.label || this.hasInfo;\r\n\r\n return (\r\n <Host\r\n part=\"base\"\r\n class={{\r\n 'voa-input': true,\r\n [`voa-input--${this.size}`]: true,\r\n 'voa-input--filled': this.fill,\r\n 'voa-input--unfilled': !this.fill,\r\n 'voa-input--focused': this.isFocused,\r\n 'voa-input--error': this.error,\r\n 'voa-input--valid': this.valid,\r\n 'voa-input--warning': this.warning,\r\n 'voa-input--disabled': this.disabled,\r\n 'voa-input--readonly': this.readonly,\r\n 'voa-input--has-prefix': this.hasPrefix,\r\n 'voa-input--has-suffix': this.hasSuffix,\r\n }}\r\n data-has-prefix={this.hasPrefix ? 'true' : undefined}\r\n data-has-suffix={this.hasSuffix ? 'true' : undefined}\r\n >\r\n {hasTitleRow && (\r\n <div part=\"title-row\" class=\"voa-input__title-row\">\r\n <label part=\"label\" htmlFor={this.inputIdValue} class=\"voa-input__label\">\r\n <slot name=\"label\">{this.label}</slot>\r\n {this.required && <span class=\"voa-input__required-indicator\" aria-label=\"obrigatório\">*</span>}\r\n </label>\r\n \r\n <div \r\n part=\"info\" \r\n class={{\r\n 'voa-input__info': true,\r\n 'is-hidden': !this.hasInfo\r\n }}\r\n >\r\n <slot name=\"info\" onSlotchange={this.checkSlots}></slot>\r\n {this.showInfoIcon && this.hasInfo && (\r\n <span part=\"info-icon\" class=\"voa-input__info-icon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M8 8V11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M8 5H8.008\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n\r\n <div\r\n part=\"container\"\r\n class={{\r\n 'voa-input__container': true,\r\n 'is-focused': this.isFocused,\r\n 'has-error': this.error,\r\n 'has-valid': this.valid,\r\n 'has-warning': this.warning,\r\n 'is-disabled': this.disabled,\r\n 'is-readonly': this.readonly,\r\n }}\r\n >\r\n <div \r\n part=\"prefix\" \r\n class={{\r\n 'voa-input__prefix': true,\r\n 'is-hidden': !this.hasPrefix\r\n }}\r\n >\r\n <slot name=\"prefix\" onSlotchange={this.checkSlots}></slot>\r\n </div>\r\n\r\n <input\r\n part=\"input\"\r\n ref={(el) => (this.inputRef = el)}\r\n id={this.inputIdValue}\r\n type={this.type}\r\n name={this.name}\r\n value={this.internalValue}\r\n placeholder={this.placeholder}\r\n disabled={this.disabled}\r\n readonly={this.readonly}\r\n required={this.required}\r\n onInput={this.handleInput}\r\n onChange={this.handleChange}\r\n onFocus={this.handleFocus}\r\n onBlur={this.handleBlur}\r\n onKeyDown={this.handleKeyDown}\r\n aria-invalid={this.error ? 'true' : undefined}\r\n aria-describedby={this.helperText ? helperTextId : undefined}\r\n aria-disabled={this.disabled ? 'true' : undefined}\r\n class=\"voa-input__input\"\r\n />\r\n\r\n <div \r\n part=\"suffix\" \r\n class={{\r\n 'voa-input__suffix': true,\r\n 'is-hidden': !this.hasSuffix\r\n }}\r\n >\r\n <slot name=\"suffix\" onSlotchange={this.checkSlots}></slot>\r\n </div>\r\n </div>\r\n\r\n {this.helperText && (\r\n <div\r\n part=\"helper-text\"\r\n id={helperTextId}\r\n class={{\r\n 'voa-input__helper-text': true,\r\n 'voa-input__helper-text--error': this.error,\r\n 'voa-input__helper-text--valid': this.valid,\r\n 'voa-input__helper-text--warning': this.warning,\r\n }}\r\n role={this.error ? 'alert' : undefined}\r\n >\r\n <slot name=\"helper-text\">{this.helperText}</slot>\r\n </div>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"voa-input.js","mappings":"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","names":["VoaInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-input/voa-input.css?tag=voa-input&encapsulation=shadow","src/components/voa-input/voa-input.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__title-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__label {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__info {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__info-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.voa-input__required-indicator {\r\n display: inline;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__container {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n}\r\n\r\n.voa-input__prefix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__suffix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-input__input {\r\n flex: 1 1 0%;\r\n min-width: 0;\r\n width: 100%;\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n box-sizing: border-box;\r\n display: block;\r\n}\r\n\r\n.voa-input__input:disabled {\r\n cursor: not-allowed;\r\n}\r\n\r\n.voa-input__input:read-only {\r\n cursor: default;\r\n}\r\n\r\n.voa-input__helper-text {\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.is-hidden {\r\n display: none !important;\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Method, Watch } from '@stencil/core';\r\n\r\n/**\r\n * Componente de input para entrada de dados do Voa Design System.\r\n * \r\n * Baseado no design do Figma, seguindo o padrão \"unstyled\" (headless).\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do componente\r\n * @part title-row - Container do titulo (label + info)\r\n * @part label - O elemento de label\r\n * @part info - Container da informacao adicional\r\n * @part info-icon - O ícone de informação\r\n * @part container - O wrapper do input (border, background)\r\n * @part input - O elemento input nativo\r\n * @part prefix - O wrapper do slot prefix\r\n * @part suffix - O wrapper do slot suffix\r\n * @part helper-text - O elemento de texto auxiliar/erro\r\n */\r\n@Component({\r\n tag: 'voa-input',\r\n styleUrl: 'voa-input.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaInput {\r\n @Element() host: HTMLVoaInputElement;\r\n\r\n /**\r\n * ID do elemento input\r\n */\r\n @Prop() inputId?: string;\r\n\r\n /**\r\n * Tipo do input (text, password, email, search, tel, etc.)\r\n */\r\n @Prop() type: string = 'text';\r\n\r\n /**\r\n * Nome do elemento input\r\n */\r\n @Prop() name?: string;\r\n\r\n /**\r\n * Valor do input\r\n */\r\n @Prop() value?: string = '';\r\n\r\n /**\r\n * Texto de placeholder\r\n */\r\n @Prop() placeholder?: string;\r\n\r\n /**\r\n * Texto do label\r\n */\r\n @Prop() label?: string;\r\n\r\n /**\r\n * Texto auxiliar ou mensagem de erro\r\n */\r\n @Prop() helperText?: string;\r\n\r\n /**\r\n * Indica se o campo está em estado de erro\r\n */\r\n @Prop({ reflect: true }) error: boolean = false;\r\n\r\n /**\r\n * Indica se o campo está em estado de sucesso\r\n */\r\n @Prop({ reflect: true }) valid: boolean = false;\r\n\r\n /**\r\n * Indica se o campo está em estado de aviso\r\n */\r\n @Prop({ reflect: true }) warning: boolean = false;\r\n\r\n /**\r\n * Indica se o campo está desabilitado\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /**\r\n * Indica se o campo é somente leitura\r\n */\r\n @Prop({ reflect: true }) readonly: boolean = false;\r\n\r\n /**\r\n * Indica se o campo é obrigatório\r\n */\r\n @Prop({ reflect: true }) required: boolean = false;\r\n\r\n /**\r\n * Variante de preenchimento (filled vs unfilled)\r\n */\r\n @Prop({ reflect: true }) fill: boolean = true;\r\n\r\n /**\r\n * Tamanho do input\r\n */\r\n @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\r\n\r\n /**\r\n * Mostrar ícone de informação na área de info\r\n */\r\n @Prop() showInfoIcon: boolean = true;\r\n\r\n /**\r\n * Estado interno que controla se o campo está em foco\r\n */\r\n @State() isFocused: boolean = false;\r\n\r\n @State() hasPrefix: boolean = false;\r\n @State() hasSuffix: boolean = false;\r\n @State() hasInfo: boolean = false;\r\n\r\n /**\r\n * Valor interno do input\r\n */\r\n @State() internalValue: string = '';\r\n\r\n @Watch('value')\r\n valueChanged(newValue: string) {\r\n this.internalValue = newValue;\r\n }\r\n\r\n /**\r\n * Referência ao elemento input nativo\r\n */\r\n private inputRef?: HTMLInputElement;\r\n\r\n /**\r\n * Evento emitido quando o valor é alterado\r\n */\r\n @Event() dsChange: EventEmitter<string>;\r\n\r\n /**\r\n * Evento emitido durante a digitação\r\n */\r\n @Event() dsInput: EventEmitter<string>;\r\n\r\n /**\r\n * Evento emitido quando o campo ganha foco\r\n */\r\n @Event() dsFocus: EventEmitter<FocusEvent>;\r\n\r\n /**\r\n * Evento emitido quando o campo perde foco\r\n */\r\n @Event() dsBlur: EventEmitter<FocusEvent>;\r\n\r\n /**\r\n * Gera um ID único se não fornecido\r\n */\r\n private generateId(): string {\r\n if (this.inputId) {\r\n return this.inputId;\r\n }\r\n return `voa-input-${Math.random().toString(36).substr(2, 9)}`;\r\n }\r\n\r\n /**\r\n * ID do input gerado ou fornecido\r\n */\r\n private inputIdValue: string = '';\r\n\r\n componentWillLoad() {\r\n this.inputIdValue = this.generateId();\r\n this.internalValue = this.value || '';\r\n this.checkSlots();\r\n }\r\n\r\n private checkSlots = () => {\r\n this.hasPrefix = !!this.host.querySelector('[slot=\"prefix\"]');\r\n this.hasSuffix = !!this.host.querySelector('[slot=\"suffix\"]');\r\n this.hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n };\r\n\r\n /**\r\n * Gerenciador de evento de input\r\n */\r\n private handleInput = (event: Event) => {\r\n const input = event.target as HTMLInputElement;\r\n this.internalValue = input.value;\r\n this.dsInput.emit(this.internalValue);\r\n };\r\n\r\n /**\r\n * Gerenciador de evento de change\r\n */\r\n private handleChange = (event: Event) => {\r\n const input = event.target as HTMLInputElement;\r\n this.internalValue = input.value;\r\n this.dsChange.emit(this.internalValue);\r\n };\r\n\r\n /**\r\n * Gerenciador de evento de focus\r\n */\r\n private handleFocus = (event: FocusEvent) => {\r\n this.isFocused = true;\r\n this.dsFocus.emit(event);\r\n };\r\n\r\n /**\r\n * Gerenciador de evento de blur\r\n */\r\n private handleBlur = (event: FocusEvent) => {\r\n this.isFocused = false;\r\n this.dsBlur.emit(event);\r\n };\r\n\r\n /**\r\n * Método para acessibilidade WCAG 2.2 AA.\r\n * Delega foco ao elemento interno nativo.\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n if (this.inputRef) {\r\n this.inputRef.focus();\r\n }\r\n }\r\n\r\n /**\r\n * Handler para navegação por teclado (WCAG 2.2 AA).\r\n */\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n if (this.disabled || this.readonly) {\r\n return;\r\n }\r\n\r\n // Permitir navegação normal por teclado\r\n // Enter e Space já são tratados pelo input nativo\r\n switch (event.key) {\r\n case 'Escape':\r\n // Se o input tiver valor, limpar pode ser útil\r\n // Mas não implementamos isso por padrão para não quebrar UX\r\n break;\r\n }\r\n };\r\n\r\n render() {\r\n const helperTextId = `${this.inputIdValue}-helper`;\r\n const hasTitleRow = !!this.label || this.hasInfo;\r\n\r\n return (\r\n <Host\r\n part=\"base\"\r\n class={{\r\n 'voa-input': true,\r\n [`voa-input--${this.size}`]: true,\r\n 'voa-input--filled': this.fill,\r\n 'voa-input--unfilled': !this.fill,\r\n 'voa-input--focused': this.isFocused,\r\n 'voa-input--error': this.error,\r\n 'voa-input--valid': this.valid,\r\n 'voa-input--warning': this.warning,\r\n 'voa-input--disabled': this.disabled,\r\n 'voa-input--readonly': this.readonly,\r\n 'voa-input--has-prefix': this.hasPrefix,\r\n 'voa-input--has-suffix': this.hasSuffix,\r\n }}\r\n data-has-prefix={this.hasPrefix ? 'true' : undefined}\r\n data-has-suffix={this.hasSuffix ? 'true' : undefined}\r\n >\r\n {hasTitleRow && (\r\n <div part=\"title-row\" class=\"voa-input__title-row\">\r\n <label part=\"label\" htmlFor={this.inputIdValue} class=\"voa-input__label\">\r\n <slot name=\"label\">{this.label}</slot>\r\n {this.required && <span class=\"voa-input__required-indicator\" aria-label=\"obrigatório\">*</span>}\r\n </label>\r\n \r\n <div \r\n part=\"info\" \r\n class={{\r\n 'voa-input__info': true,\r\n 'is-hidden': !this.hasInfo\r\n }}\r\n >\r\n <slot name=\"info\" onSlotchange={this.checkSlots}></slot>\r\n {this.showInfoIcon && this.hasInfo && (\r\n <span part=\"info-icon\" class=\"voa-input__info-icon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M8 8V11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M8 5H8.008\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n\r\n <div\r\n part=\"container\"\r\n class={{\r\n 'voa-input__container': true,\r\n 'is-focused': this.isFocused,\r\n 'has-error': this.error,\r\n 'has-valid': this.valid,\r\n 'has-warning': this.warning,\r\n 'is-disabled': this.disabled,\r\n 'is-readonly': this.readonly,\r\n }}\r\n >\r\n <div \r\n part=\"prefix\" \r\n class={{\r\n 'voa-input__prefix': true,\r\n 'is-hidden': !this.hasPrefix\r\n }}\r\n >\r\n <slot name=\"prefix\" onSlotchange={this.checkSlots}></slot>\r\n </div>\r\n\r\n <input\r\n part=\"input\"\r\n ref={(el) => (this.inputRef = el)}\r\n id={this.inputIdValue}\r\n type={this.type}\r\n name={this.name}\r\n value={this.internalValue}\r\n placeholder={this.placeholder}\r\n disabled={this.disabled}\r\n readonly={this.readonly}\r\n required={this.required}\r\n onInput={this.handleInput}\r\n onChange={this.handleChange}\r\n onFocus={this.handleFocus}\r\n onBlur={this.handleBlur}\r\n onKeyDown={this.handleKeyDown}\r\n aria-invalid={this.error ? 'true' : undefined}\r\n aria-describedby={this.helperText ? helperTextId : undefined}\r\n aria-disabled={this.disabled ? 'true' : undefined}\r\n class=\"voa-input__input\"\r\n />\r\n\r\n <div \r\n part=\"suffix\" \r\n class={{\r\n 'voa-input__suffix': true,\r\n 'is-hidden': !this.hasSuffix\r\n }}\r\n >\r\n <slot name=\"suffix\" onSlotchange={this.checkSlots}></slot>\r\n </div>\r\n </div>\r\n\r\n {this.helperText && (\r\n <div\r\n part=\"helper-text\"\r\n id={helperTextId}\r\n class={{\r\n 'voa-input__helper-text': true,\r\n 'voa-input__helper-text--error': this.error,\r\n 'voa-input__helper-text--valid': this.valid,\r\n 'voa-input__helper-text--warning': this.warning,\r\n }}\r\n role={this.error ? 'alert' : undefined}\r\n >\r\n <slot name=\"helper-text\">{this.helperText}</slot>\r\n </div>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { V as VoaKeybinding$1, d as defineCustomElement$1 } from './p-DPyVgztA.js';
1
+ import { V as VoaKeybinding$1, d as defineCustomElement$1 } from './p-C3RlQWjO.js';
2
2
 
3
3
  const VoaKeybinding = VoaKeybinding$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h } from './index.js';
1
+ import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
2
2
 
3
3
  const linkCss = ".link{color:#007bff;text-decoration:none;transition:color 0.2s}.link:hover{color:#0056b3}";
4
4
 
@@ -32,7 +32,6 @@ function defineCustomElement$1() {
32
32
  break;
33
33
  } });
34
34
  }
35
- defineCustomElement$1();
36
35
 
37
36
  const VoaLink = Link;
38
37
  const defineCustomElement = defineCustomElement$1;
@@ -1 +1 @@
1
- {"file":"voa-link.js","mappings":";;AAAA,MAAM,OAAO,GAAG,2FAA2F;;MCO9F,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;AALjB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AASjC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAClD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-link/link.css?tag=voa-link&encapsulation=shadow","src/components/voa-link/link.tsx"],"sourcesContent":[".link {\r\n color: #007bff;\r\n text-decoration: none;\r\n transition: color 0.2s;\r\n}\r\n\r\n.link:hover {\r\n color: #0056b3;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-link\",\r\n styleUrl: \"link.css\",\r\n shadow: true,\r\n})\r\nexport class Link {\r\n @Prop() href: string;\r\n @Prop() target: string = \"_self\";\r\n\r\n render() {\r\n return (\r\n <a class=\"link\" href={this.href} target={this.target}>\r\n <slot></slot>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"voa-link.js","mappings":";;AAAA,MAAM,OAAO,GAAG,2FAA2F;;MCO9F,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;AALjB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AASjC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAClD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACX;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-link/link.css?tag=voa-link&encapsulation=shadow","src/components/voa-link/link.tsx"],"sourcesContent":[".link {\r\n color: #007bff;\r\n text-decoration: none;\r\n transition: color 0.2s;\r\n}\r\n\r\n.link:hover {\r\n color: #0056b3;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"voa-link\",\r\n styleUrl: \"link.css\",\r\n shadow: true,\r\n})\r\nexport class Link {\r\n @Prop() href: string;\r\n @Prop() target: string = \"_self\";\r\n\r\n render() {\r\n return (\r\n <a class=\"link\" href={this.href} target={this.target}>\r\n <slot></slot>\r\n </a>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h } from './index.js';
1
+ import { p as proxyCustomElement, H, h } from './p-CFBaVtm5.js';
2
2
 
3
3
  const listCss = ".list{list-style:none;padding:0;margin:0}.list li{padding:10px;border-bottom:1px solid #ddd}.list li:last-child{border-bottom:none}";
4
4
 
@@ -31,7 +31,6 @@ function defineCustomElement$1() {
31
31
  break;
32
32
  } });
33
33
  }
34
- defineCustomElement$1();
35
34
 
36
35
  const VoaList = List;
37
36
  const defineCustomElement = defineCustomElement$1;