@sankhyalabs/ezui 1.1.69 → 1.1.72

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 (81) hide show
  1. package/dist/assets/actions-sprite.svg +257 -0
  2. package/dist/cjs/CSSVarsUtils-f8827674.js +18 -0
  3. package/dist/cjs/ez-action-chip.cjs.entry.js +1 -1
  4. package/dist/cjs/ez-button_16.cjs.entry.js +101 -97
  5. package/dist/cjs/ez-dialog.cjs.entry.js +5 -2
  6. package/dist/cjs/ez-label-chip.cjs.entry.js +1 -1
  7. package/dist/cjs/ez-modal.cjs.entry.js +16 -69
  8. package/dist/cjs/ez-number-input.cjs.entry.js +1 -1
  9. package/dist/cjs/ez-popover.cjs.entry.js +14 -15
  10. package/dist/cjs/ez-popup.cjs.entry.js +2 -2
  11. package/dist/cjs/ez-time-input.cjs.entry.js +7 -70
  12. package/dist/cjs/ez-toast.cjs.entry.js +1 -1
  13. package/dist/cjs/ezui.cjs.js +2 -2
  14. package/dist/cjs/{index-0f668cc5.js → index-bb6cdd1a.js} +5 -0
  15. package/dist/cjs/loader.cjs.js +2 -2
  16. package/dist/collection/components/assets/actions-sprite.svg +257 -0
  17. package/dist/collection/components/ez-button/ez-button.css +8 -4
  18. package/dist/collection/components/ez-button/ez-button.js +5 -2
  19. package/dist/collection/components/ez-combo-box/ez-combo-box.css +46 -44
  20. package/dist/collection/components/ez-combo-box/ez-combo-box.js +34 -35
  21. package/dist/collection/components/ez-date-input/ez-date-input.css +0 -9
  22. package/dist/collection/components/ez-date-input/ez-date-input.js +5 -1
  23. package/dist/collection/components/ez-dialog/ez-dialog.css +43 -43
  24. package/dist/collection/components/ez-dialog/ez-dialog.js +5 -2
  25. package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +1 -1
  26. package/dist/collection/components/ez-modal/ez-modal.js +27 -80
  27. package/dist/collection/components/ez-popover/ez-popover.css +4 -5
  28. package/dist/collection/components/ez-popover/ez-popover.js +25 -26
  29. package/dist/collection/components/ez-popup/ez-popup.css +5 -5
  30. package/dist/collection/components/ez-popup/ez-popup.js +1 -1
  31. package/dist/collection/components/ez-search/ez-search.js +1 -1
  32. package/dist/collection/components/ez-tabselector/ez-tabselector.css +7 -10
  33. package/dist/collection/components/ez-tabselector/ez-tabselector.js +67 -69
  34. package/dist/collection/components/ez-time-input/ez-time-input.css +0 -168
  35. package/dist/collection/components/ez-time-input/ez-time-input.js +8 -75
  36. package/dist/collection/utils/CSSVarsUtils.js +14 -0
  37. package/dist/custom-elements/index.js +157 -254
  38. package/dist/esm/CSSVarsUtils-e0128b01.js +16 -0
  39. package/dist/esm/ez-action-chip.entry.js +1 -1
  40. package/dist/esm/ez-button_16.entry.js +101 -97
  41. package/dist/esm/ez-dialog.entry.js +5 -2
  42. package/dist/esm/ez-label-chip.entry.js +1 -1
  43. package/dist/esm/ez-modal.entry.js +16 -69
  44. package/dist/esm/ez-number-input.entry.js +1 -1
  45. package/dist/esm/ez-popover.entry.js +14 -15
  46. package/dist/esm/ez-popup.entry.js +2 -2
  47. package/dist/esm/ez-time-input.entry.js +7 -70
  48. package/dist/esm/ez-toast.entry.js +1 -1
  49. package/dist/esm/ezui.js +2 -2
  50. package/dist/esm/{index-89fc9bfd.js → index-989e6e7d.js} +5 -1
  51. package/dist/esm/loader.js +2 -2
  52. package/dist/ezui/ezui.esm.js +1 -1
  53. package/dist/ezui/{p-762ac7a0.js → p-384f89f7.js} +1 -1
  54. package/dist/ezui/p-55003571.entry.js +1 -0
  55. package/dist/ezui/p-5c5ba099.entry.js +1 -0
  56. package/dist/ezui/p-65ea9879.entry.js +1 -0
  57. package/dist/ezui/{p-9702db61.entry.js → p-889030b3.entry.js} +1 -1
  58. package/dist/ezui/{p-8d547517.entry.js → p-8b945611.entry.js} +1 -1
  59. package/dist/ezui/p-a6a87bc5.entry.js +1 -0
  60. package/dist/ezui/p-d01bcce1.entry.js +1 -0
  61. package/dist/ezui/p-d1889704.js +1 -0
  62. package/dist/ezui/{p-74e4415e.entry.js → p-e2533df1.entry.js} +1 -1
  63. package/dist/ezui/p-edcc9e6f.entry.js +1 -0
  64. package/dist/ezui/{p-1c33a56d.entry.js → p-f8f92f68.entry.js} +1 -1
  65. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +5 -5
  66. package/dist/types/components/ez-date-input/ez-date-input.d.ts +1 -0
  67. package/dist/types/components/ez-dialog/ez-dialog.d.ts +4 -1
  68. package/dist/types/components/ez-modal/ez-modal.d.ts +7 -7
  69. package/dist/types/components/ez-popover/ez-popover.d.ts +4 -5
  70. package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
  71. package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +19 -10
  72. package/dist/types/components/ez-time-input/ez-time-input.d.ts +1 -8
  73. package/dist/types/components.d.ts +56 -35
  74. package/dist/types/utils/CSSVarsUtils.d.ts +4 -0
  75. package/package.json +1 -1
  76. package/dist/ezui/p-169d99a1.entry.js +0 -1
  77. package/dist/ezui/p-7c7dbfcb.entry.js +0 -1
  78. package/dist/ezui/p-8c8f1c00.entry.js +0 -1
  79. package/dist/ezui/p-d185d7e8.entry.js +0 -1
  80. package/dist/ezui/p-ee5058c1.entry.js +0 -1
  81. package/dist/ezui/p-f7d7fb7f.entry.js +0 -1
@@ -0,0 +1,257 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg"
2
+ xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480">
3
+ <defs>
4
+ <symbol id="chevron-right" viewBox="0 0 24 24">
5
+ <path d="M5.8,19.6l7.6-7.6L5.8,4.3L8.2,2l10,10l-10,10L5.8,19.6z"/>
6
+ </symbol>
7
+ <symbol id="chevron-left" viewBox="0 0 24 24">
8
+ <path d="M18.2,19.6L10.5,12l7.6-7.6L15.8,2l-10,10l10,10L18.2,19.6z"/>
9
+ </symbol>
10
+ <symbol id="chevron-down" viewBox="0 0 24 24">
11
+ <path d="M4.4,5.9l7.6,7.6l7.6-7.6l2.3,2.4L12,18.1L2.1,8.2L4.4,5.9z"/>
12
+ </symbol>
13
+ <symbol id="chevron-up" viewBox="0 0 24 24">
14
+ <path d="M4.4,18.1l7.6-7.6l7.6,7.6l2.3-2.3l-10-10l-10,10L4.4,18.1z"/>
15
+ </symbol>
16
+ <symbol id="close" viewBox="0 0 24 24">
17
+ <path d="M21,4.8L19.2,3L12,10.2L4.8,3L3,4.8l7.2,7.2L3,19.2L4.8,21l7.2-7.2l7.2,7.2l1.8-1.8L13.8,12L21,4.8z"/>
18
+ </symbol>
19
+ <symbol id="search" viewBox="0 0 24 24">
20
+ <path d="M9.4,2.3c4.1,0,7.4,3.2,7.4,7.2c0,1.8-0.7,3.4-1.8,4.7l0.3,0.3h0.9l5.7,5.6l-1.7,1.7l-5.7-5.6v-0.9L14.3,15 c-1.3,1.1-3,1.7-4.8,1.7C5.3,16.7,2,13.5,2,9.5S5.3,2.3,9.4,2.3 M9.4,4.5c-2.9,0-5.1,2.2-5.1,5s2.3,5,5.1,5s5.1-2.2,5.1-5 S12.3,4.5,9.4,4.5z"/>
21
+ </symbol>
22
+ <symbol id="help" viewBox="0 0 24 24">
23
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path>
24
+ </symbol>
25
+ <symbol id="help-inverted" viewBox="0 0 24 24">
26
+ <path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z"/>
27
+ </symbol>
28
+ <symbol id="check-circle" viewBox="0 0 24 24">
29
+ <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"/>
30
+ </symbol>
31
+ <symbol id="check-circle-inverted" viewBox="0 0 24 24">
32
+ <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"/>
33
+ </symbol>
34
+ <symbol id="edit" viewBox="0 0 24 24">
35
+ <path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"/>
36
+ </symbol>
37
+ <symbol id="shield" viewBox="0 0 24 24">
38
+ <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path>
39
+ </symbol>
40
+ <symbol id="user-circle" viewBox="0 0 24 24">
41
+ <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"/>
42
+ </symbol>
43
+ <symbol id="account" viewBox="0 0 24 24">
44
+ <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path>
45
+ </symbol>
46
+ <symbol id="lock" viewBox="0 0 24 24">
47
+ <path d="M12,16.7c0.9,0,1.7-0.8,1.7-1.7c0-1-0.8-1.7-1.7-1.7c-0.9,0-1.7,0.8-1.7,1.7C10.3,15.9,11.1,16.7,12,16.7 M17.1,9 c0.9,0,1.7,0.8,1.7,1.7v8.6c0,0.9-0.8,1.7-1.7,1.7H6.9c-0.9,0-1.7-0.8-1.7-1.7v-8.6c0-1,0.8-1.7,1.7-1.7h0.9V7.3C7.7,4.9,9.6,3,12,3 s4.3,1.9,4.3,4.3V9H17.1 M12,4.7c-1.4,0-2.6,1.2-2.6,2.6V9h5.1V7.3C14.6,5.9,13.4,4.7,12,4.7z"/>
48
+ </symbol>
49
+ <symbol id="loading" viewBox="0 0 24 24" stroke="currentColor">
50
+ <g id="grupo" fill="none">
51
+ <path stroke-opacity="0.50" stroke-width="4.0" stroke-miterlimit="22.9256" d="M20.19 12c0,-4.52 -3.67,-8.19 -8.19,-8.19 -4.52,0 -8.19,3.67 -8.19,8.19 0,4.52 3.67,8.19 8.19,8.19 4.52,0 8.19,-3.67 8.19,-8.19z"/>
52
+ <path stroke-width="5.0" stroke-miterlimit="22.9256" d="M20.19 12c0,-4.52 -3.67,-8.19 -8.19,-8.19">
53
+ <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="0.6s" repeatCount="indefinite"/>
54
+ </path>
55
+ </g>
56
+ </symbol>
57
+ <symbol id="email" viewBox="0 0 24 24">
58
+ <path d="M4,3.9h16c1.1,0,2,0.9,2,2v12.2c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V5.9C2,4.8,2.9,3.9,4,3.9 M12,11l8-5.1H4L12,11 M4,18.1 h16V8.3l-8,5.1L4,8.3V18.1z"/>
59
+ </symbol>
60
+ <symbol id="success-circle" viewBox="0 0 24 24">
61
+ <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"/>
62
+ </symbol>
63
+ <symbol id="warning-triangle" viewBox="0 0 24 24">
64
+ <path d="M12.9,14.3h-1.8v-3.6h1.8 M12.9,17.9h-1.8v-1.8h1.8 M2.1,20.6h19.8L12,3.4L2.1,20.6z"/>
65
+ </symbol>
66
+ <symbol id="error-octagon" viewBox="0 0 24 24">
67
+ <path d="M7.9,2.2L2.2,7.9v8.2l5.8,5.8h8.2l5.8-5.8V7.9l-5.8-5.8 M8.1,6.5l3.9,3.9l3.9-3.9l1.5,1.5L13.5,12l3.9,3.9l-1.5,1.5L12,13.5 l-3.9,3.9l-1.5-1.5l3.9-3.9L6.5,8.1"/>
68
+ </symbol>
69
+ <symbol id="warning-minus" viewBox="0 0 24 24">
70
+ <path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
71
+ </symbol>
72
+ <symbol id="settings" viewBox="0 0 24 24">
73
+ <path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
74
+ </symbol>
75
+ <symbol id="settings-inverted" viewBox="0 0 24 24">
76
+ <path d="M19.43,12.97L21.54,14.63C21.73,14.78 21.78,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.03 19.05,18.95L16.56,17.94C16.04,18.34 15.5,18.67 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.78,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,12.97M6.5,12C6.5,12.58 6.59,13.13 6.75,13.66L4.68,15.36L5.43,16.66L7.95,15.72C8.69,16.53 9.68,17.12 10.8,17.37L11.24,20H12.74L13.18,17.37C14.3,17.13 15.3,16.54 16.05,15.73L18.56,16.67L19.31,15.37L17.24,13.67C17.41,13.14 17.5,12.58 17.5,12C17.5,11.43 17.41,10.87 17.25,10.35L19.31,8.66L18.56,7.36L16.06,8.29C15.31,7.47 14.31,6.88 13.19,6.63L12.75,4H11.25L10.81,6.63C9.69,6.88 8.69,7.47 7.94,8.29L5.44,7.35L4.69,8.65L6.75,10.35C6.59,10.87 6.5,11.43 6.5,12M12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5M12,10.5A1.5,1.5 0 0,0 10.5,12A1.5,1.5 0 0,0 12,13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 12,10.5Z"/>
77
+ </symbol>
78
+ <symbol id="alert-circle" viewBox="0 0 24 24">
79
+ <path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
80
+ </symbol>
81
+ <symbol id="alert-circle-inverted" viewBox="0 0 24 24">
82
+ <path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"/>
83
+ </symbol>
84
+ <symbol id="power" viewBox="0 0 24 24">
85
+ <path d="M13.1,2.1h-2.2v11h2.2V2.1 M18.5,4.5l-1.6,1.6c1.8,1.5,2.9,3.7,2.9,6c0,4.3-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.4-7.7-7.7 c0-2.3,1-4.5,2.9-6L5.6,4.5c-4.2,3.6-4.7,9.8-1.1,14c3.6,4.2,9.8,4.7,14,1.1C20.7,17.7,22,15,22,12C22,9.1,20.7,6.4,18.5,4.5z"/>
86
+ </symbol>
87
+ <symbol id="comment" viewBox="0 0 24 24">
88
+ <path d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M13,10V6H11V10H13M13,14V12H11V14H13Z"/>
89
+ </symbol>
90
+ <symbol id="comment-inverted" viewBox="0 0 24 24">
91
+ <path d="M9,22c-0.6,0-1-0.4-1-1v-3H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2h-6.1l-3.7,3.7 C10,21.9,9.8,22,9.5,22l0,0H9 M10,16v3.1l3.1-3.1H20V4H4v12H10 M13,10h-2V6h2V10 M13,14h-2v-2h2V14z"/>
92
+ </symbol>
93
+ <symbol id="bell" viewBox="0 0 24 24">
94
+ <path d="M11.8,22c1.1,0,2-0.9,2-2H9.8C9.8,21.1,10.7,22,11.8,22 M18,15.9v-5.1c0-3.1-1.7-5.8-4.6-6.5V3.6c0-0.8-0.7-1.5-1.5-1.5 c-0.8,0-1.5,0.7-1.5,1.5v0.7C7.4,5,5.7,7.6,5.7,10.8v5.1l-2,2v1H20v-1L18,15.9z"/>
95
+ </symbol>
96
+ <symbol id="bell-inverted" viewBox="0 0 24 24">
97
+ <path d="M16,17H7v-6.5C7,8,9,6,11.5,6S16,8,16,10.5 M18,16v-5.5c0-3.1-2.1-5.6-5-6.3V3.5C13,2.7,12.3,2,11.5,2S10,2.7,10,3.5v0.7 c-2.9,0.7-5,3.3-5,6.3V16l-2,2v1h17v-1 M11.5,22c1.1,0,2-0.9,2-2h-4C9.5,21.1,10.4,22,11.5,22z"/>
98
+ </symbol>
99
+ <symbol id="close-circle" viewBox="0 0 24 24">
100
+ <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/>
101
+ </symbol>
102
+ <symbol id="close-circle-inverted" viewBox="0 0 24 24">
103
+ <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"/>
104
+ </symbol>
105
+ <symbol id="plus-circle" viewBox="0 0 24 24">
106
+ <path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
107
+ </symbol>
108
+ <symbol id="plus-circle-inverted" viewBox="0 0 24 24">
109
+ <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z"/>
110
+ </symbol>
111
+ <symbol id="minus-circle-inverted" viewBox="0 0 24 24">
112
+ <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7"/>
113
+ </symbol>
114
+ <symbol id="crop" viewBox="0 0 24 24">
115
+ <path d="M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z"/>
116
+ </symbol>
117
+ <symbol id="expand" viewBox="0 0 24 24">
118
+ <path d="M9.5,13.09L10.91,14.5L6.41,19H10V21H3V14H5V17.59L9.5,13.09M10.91,9.5L9.5,10.91L5,6.41V10H3V3H10V5H6.41L10.91,9.5M14.5,13.09L19,17.59V14H21V21H14V19H17.59L13.09,14.5L14.5,13.09M13.09,9.5L17.59,5H14V3H21V10H19V6.41L14.5,10.91L13.09,9.5Z"/>
119
+ </symbol>
120
+ <symbol id="rotate" viewBox="0 0 24 24">
121
+ <path d="M12,5C16.97,5 21,7.69 21,11C21,12.68 19.96,14.2 18.29,15.29C19.36,14.42 20,13.32 20,12.13C20,9.29 16.42,7 12,7V10L8,6L12,2V5M12,19C7.03,19 3,16.31 3,13C3,11.32 4.04,9.8 5.71,8.71C4.64,9.58 4,10.68 4,11.88C4,14.71 7.58,17 12,17V14L16,18L12,22V19Z"/>
122
+ </symbol>
123
+ <symbol id="launch" viewBox="0 0 24 24">
124
+ <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
125
+ </symbol>
126
+ <symbol id="plus" viewBox="0 0 24 24">
127
+ <path d="M22.27 13.47l-8.8 0 0 8.8 -2.94 0 0 -8.8 -8.8 0 0 -2.94 8.8 0 0 -8.8 2.94 0 0 8.8 8.8 0 0 2.94z"/>
128
+ </symbol>
129
+ <symbol id="minus" viewBox="0 0 24 24">
130
+ <path d="M22.02 13.43l-20.04 0 0 -2.86 20.04 0 0 2.86z"/>
131
+ </symbol>
132
+ <symbol id="calendar" viewBox="0 0 24 24">
133
+ <path d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z" />
134
+ </symbol>
135
+ <symbol id="home" viewBox="0 0 24 24">
136
+ <path d="M9,19V13H11L13,13H15V19H18V10.91L12,4.91L6,10.91V19H9M12,2.09L21.91,12H20V21H13V15H11V21H4V12H2.09L12,2.09Z" />
137
+ </symbol>
138
+ <symbol id="clipboard" viewBox="0 0 24 24">
139
+ <path d="M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7Z" />
140
+ </symbol>
141
+ <symbol id="email-inverted" viewBox="0 0 24 24">
142
+ <path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
143
+ </symbol>
144
+ <symbol id="share" viewBox="0 0 24 24">
145
+ <path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" />
146
+ </symbol>
147
+ <symbol id="favorite" viewBox="0 0 24 24">
148
+ <path d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z" />
149
+ </symbol>
150
+ <symbol id="circle" viewBox="0 0 24 24">
151
+ <path d="M12 2.24c-5.39,0 -9.76,4.37 -9.76,9.76 0,5.39 4.37,9.76 9.76,9.76 5.39,0 9.76,-4.37 9.76,-9.76 0,-5.39 -4.37,-9.76 -9.76,-9.76z"/>
152
+ </symbol>
153
+ <symbol id="menu" viewBox="0 0 24 24">
154
+ <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
155
+ </symbol>
156
+ <symbol id="circle--medium" viewBox="0 0 24 24">
157
+ <path d="M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z" />
158
+ </symbol>
159
+ <symbol id="filter" viewBox="0 0 24 24">
160
+ <path d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z" />
161
+ </symbol>
162
+ <symbol id="timer-outline" viewBox="0 0 24 24">
163
+ <path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M19.03,7.39L20.45,5.97C20,5.46 19.55,5 19.04,4.56L17.62,6C16.07,4.74 14.12,4 12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22C17,22 21,17.97 21,13C21,10.88 20.26,8.93 19.03,7.39M11,14H13V8H11M15,1H9V3H15V1Z" />
164
+ </symbol>
165
+ <symbol id="alert-outline" viewBox="0 0 24 24">
166
+ <path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" />
167
+ </symbol>
168
+ <symbol id="calendar-text" viewBox="0 0 24 24">
169
+ <path d="M14,14H7V16H14M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M17,10H7V12H17V10Z" />
170
+ </symbol>
171
+ <symbol id="table" viewBox="0 0 24 24">
172
+ <path d="M5,4H19A2,2 0 0,1 21,6V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V6A2,2 0 0,1 5,4M5,8V12H11V8H5M13,8V12H19V8H13M5,14V18H11V14H5M13,14V18H19V14H13Z" />
173
+ </symbol>
174
+ <symbol id="apps" viewBox="0 0 24 24">
175
+ <path d="M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z" />
176
+ </symbol>
177
+ <symbol id="play" viewBox="0 0 24 24">
178
+ <path d="M8,5.14V19.14L19,12.14L8,5.14Z" />
179
+ </symbol>
180
+ <symbol id="pause" viewBox="0 0 24 24">
181
+ <path d="M14,19H18V5H14M6,19H10V5H6V19Z" />
182
+ </symbol>
183
+ <symbol id="dots-vertical" viewBox="0 0 24 24">
184
+ <path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" />
185
+ </symbol>
186
+ <symbol id="restore" viewBox="0 0 24 24">
187
+ <path d="M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z" />
188
+ </symbol>
189
+ <symbol id="help-circle-outline" viewBox="0 0 24 24">
190
+ <path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
191
+ </symbol>
192
+ </defs>
193
+ <g>
194
+ <use xlink:href="#chevron-right" width="27" height="27" x="5" y="5"/>
195
+ <use xlink:href="#chevron-left" width="27" height="27" x="35" y="5"/>
196
+ <use xlink:href="#chevron-down" width="27" height="27" x="65" y="5"/>
197
+ <use xlink:href="#chevron-up" width="27" height="27" x="95" y="5"/>
198
+ <use xlink:href="#close" width="27" height="27" x="125" y="5"/>
199
+ <use xlink:href="#search" width="27" height="27" x="155" y="5"/>
200
+ <use xlink:href="#help" width="27" height="27" x="185" y="5"/>
201
+ <use xlink:href="#help-inverted" width="27" height="27" x="215" y="5"/>
202
+ <use xlink:href="#check-circle" width="27" height="27" x="245" y="5"/>
203
+ <use xlink:href="#check-circle-inverted" width="27" height="27" x="275" y="5"/>
204
+ <use xlink:href="#edit" width="27" height="27" x="305" y="5"/>
205
+ <use xlink:href="#plus" width="27" height="27" x="385" y="5"/>
206
+ <use xlink:href="#shield" width="27" height="27" x="415" y="5"/>
207
+ <use xlink:href="#user-circle" width="27" height="27" x="475" y="5"/>
208
+ <use xlink:href="#account" width="27" height="27" x="535" y="5"/>
209
+ <use xlink:href="#lock" width="27" height="27" x="565" y="5"/>
210
+ <use xlink:href="#loading" width="27" height="27" x="595" y="5"/>
211
+ <use xlink:href="#email" width="27" height="27" x="5" y="35"/>
212
+ <use xlink:href="#success-circle" width="27" height="27" x="35" y="35"/>
213
+ <use xlink:href="#warning-triangle" width="27" height="27" x="65" y="35"/>
214
+ <use xlink:href="#error-octagon" width="27" height="27" x="95" y="35"/>
215
+ <use xlink:href="#warning-minus" width="27" height="27" x="125" y="35"/>
216
+ <use xlink:href="#settings" width="27" height="27" x="155" y="35"/>
217
+ <use xlink:href="#settings-inverted" width="27" height="27" x="185" y="35"/>
218
+ <use xlink:href="#alert-circle" width="27" height="27" x="215" y="35"/>
219
+ <use xlink:href="#alert-circle-inverted" width="27" height="27" x="245" y="35"/>
220
+ <use xlink:href="#power" width="27" height="27" x="275" y="35"/>
221
+ <use xlink:href="#comment" width="27" height="27" x="305" y="35"/>
222
+ <use xlink:href="#comment-inverted" width="27" height="27" x="335" y="35"/>
223
+ <use xlink:href="#bell" width="27" height="27" x="365" y="35"/>
224
+ <use xlink:href="#bell-inverted" width="27" height="27" x="395" y="35"/>
225
+ <use xlink:href="#close-circle" width="27" height="27" x="425" y="35"/>
226
+ <use xlink:href="#close-circle-inverted" width="27" height="27" x="455" y="35"/>
227
+ <use xlink:href="#plus-circle" width="27" height="27" x="485" y="35"/>
228
+ <use xlink:href="#plus-circle-inverted" width="27" height="27" x="515" y="35"/>
229
+ <use xlink:href="#minus-circle-inverted" width="27" height="27" x="545" y="35"/>
230
+ <use xlink:href="#crop" width="27" height="27" x="575" y="35"/>
231
+ <use xlink:href="#expand" width="27" height="27" x="605" y="35"/>
232
+ <use xlink:href="#rotate" width="27" height="27" x="5" y="65"/>
233
+ <use xlink:href="#launch" width="27" height="27" x="35" y="65"/>
234
+ <use xlink:href="#minus" width="27" height="27" x="65" y="65"/>
235
+ <use xlink:href="#calendar" width="27" height="27" x="95" y="65"/>
236
+ <use xlink:href="#home" width="27" height="27" x="125" y="65"/>
237
+ <use xlink:href="#clipboard" width="27" height="27" x="155" y="65"/>
238
+ <use xlink:href="#email-inverted" width="27" height="27" x="185" y="65"/>
239
+ <use xlink:href="#share" width="27" height="27" x="215" y="65"/>
240
+ <use xlink:href="#favorite" width="27" height="27" x="245" y="65"/>
241
+ <use xlink:href="#circle" width="27" height="27" x="275" y="65"/>
242
+ <use xlink:href="#menu" width="27" height="27" x="305" y="65"/>
243
+ <use xlink:href="#circle--medium" width="27" height="27" x="335" y="65"/>
244
+ <use xlink:href="#filter" width="27" height="27" x="365" y="65"/>
245
+ <use xlink:href="#timer-outline" width="27" height="27" x="395" y="65"/>
246
+ <use xlink:href="#alert-outline" width="27" height="27" x="425" y="65"/>
247
+ <use xlink:href="#calendar-text" width="27" height="27" x="455" y="65"/>
248
+ <use xlink:href="#table" width="27" height="27" x="485" y="65"/>
249
+ <use xlink:href="#apps" width="27" height="27" x="515" y="65"/>
250
+ <use xlink:href="#play" width="27" height="27" x="545" y="65"/>
251
+ <use xlink:href="#pause" width="27" height="27" x="575" y="65"/>
252
+ <use xlink:href="#dots-vertical" width="27" height="27" x="605" y="65"/>
253
+ <use xlink:href="#restore" width="27" height="27" x="3" y="95"/>
254
+ <use xlink:href="#help-circle-outline" width="27" height="27" x="35" y="95"/>
255
+
256
+ </g>
257
+ </svg>
@@ -23,7 +23,7 @@
23
23
 
24
24
  /* general */
25
25
  /*@doc Define a cor do label.*/
26
- --button--color: var(--text--inverted, #FFF);
26
+ --button--color: var(--text--primary, #FFF);
27
27
  /*@doc Define o tamanho do label.*/
28
28
  --button--font-size: var(--text--medium, 14px);
29
29
  /*@doc Define a família da fonte do label.*/
@@ -31,19 +31,19 @@
31
31
  /*@doc Define o peso da fonte do label.*/
32
32
  --button--font-weight: var(--text-weight--large);
33
33
  /*@doc Define a cor de fundo do botão.*/
34
- --button--background-color: var(--color--primary, #c0c0c0);
34
+ --button--background-color: var(--background--medium, #c0c0c0);
35
35
  /*@doc Define o raio da borda do botão.*/
36
36
  --button--border-radius: var(--border--radius-large, 12px);
37
37
  /*@doc Define o estilo da borda do botão.*/
38
38
  --button--border: none;
39
39
 
40
40
  /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
41
- --button--hover--background-color: var(--color--primary-700, var(--button--background-color));
41
+ --button--hover--background-color: var(--background--strong, var(--button--background-color));
42
42
 
43
43
  /*@doc Define a cor do texto quando o botão está desabilitado.*/
44
44
  --button--disabled-color: var(--text--disable);
45
45
  /*@doc Define a cor de fundo quando o botão está desabilitado.*/
46
- --button--disabled--background-color: var(--color--disable-primary);
46
+ --button--disabled--background-color: var(--color--disable-secondary);
47
47
 
48
48
  /*@doc Define o estido da borda quando o botão está selecionado.*/
49
49
  --button--focus--border: var(--button--border);
@@ -54,6 +54,10 @@
54
54
  --button--link-color: var(--title--primary, '#C0C0C0');
55
55
  }
56
56
 
57
+ ez-icon {
58
+ --ez-icon--color: inherit;
59
+ }
60
+
57
61
  button {
58
62
  /*private*/
59
63
  display: flex;
@@ -11,9 +11,9 @@ export class EzButton {
11
11
  this.mode = "regular";
12
12
  }
13
13
  handleSlotChange(ev) {
14
+ const slot = ev.target;
15
+ const content = slot.assignedElements()[0];
14
16
  if (this.mode == "link") {
15
- const slot = ev.target;
16
- const content = slot.assignedElements()[0];
17
17
  content.style.display = "inline";
18
18
  if (slot.name == "leftIcon") {
19
19
  content.style.paddingRight = "var(--button__inline__icon--padding)";
@@ -22,6 +22,9 @@ export class EzButton {
22
22
  content.style.paddingLeft = "var(--button__inline__icon--padding)";
23
23
  }
24
24
  }
25
+ else {
26
+ content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
27
+ }
25
28
  }
26
29
  render() {
27
30
  if (this.mode == "icon") {
@@ -2,63 +2,65 @@
2
2
 
3
3
  /* dimensions */
4
4
  /*@doc Define altura do input.*/
5
- --cx--height: 42px;
5
+ --combo-box--height: 42px;
6
6
  /*@doc Define largura do input.*/
7
- --cx--width: 100%;
7
+ --combo-box--width: 100%;
8
8
  /*@doc Define largura do slot do ícone do input.*/
9
- --cx__icon--width: 48px;
9
+ --combo-box__icon--width: 48px;
10
10
 
11
11
  /* general */
12
12
  /*@doc Define o raio da borda do input.*/
13
- --cx--border-radius: var(--border--radius-medium, 12px);
13
+ --combo-box--border-radius: var(--border--radius-medium, 12px);
14
14
  /*@doc Define o raio da borda do input quando pequeno.*/
15
- --cx--border-radius-small: var(--border--radius-small, 6px);
15
+ --combo-box--border-radius-small: var(--border--radius-small, 6px);
16
16
  /*@doc Define o tamanho da fonte dentro do input.*/
17
- --cx--font-size: var(--text--medium, 14px);
17
+ --combo-box--font-size: var(--text--medium, 14px);
18
18
  /*@doc Define a família da fonte dentro do input.*/
19
- --cx--font-family: var(--font-pattern, Arial);
19
+ --combo-box--font-family: var(--font-pattern, Arial);
20
20
  /*@doc Define o peso da fonte dentro do input quando pesada.*/
21
- --cx--font-weight--large: var(--text-weight--large, 500);
21
+ --combo-box--font-weight--large: var(--text-weight--large, 500);
22
22
  /*@doc Define o peso da fonte dentro do input quando média.*/
23
- --cx--font-weight--medium: var(--text-weight--medium, 400);
23
+ --combo-box--font-weight--medium: var(--text-weight--medium, 400);
24
24
  /*@doc Define a cor de fundo da lista de opções.*/
25
- --cx--background-color--xlight: var(--background--xlight, #fff);
25
+ --combo-box--background-color--xlight: var(--background--xlight, #fff);
26
26
 
27
27
  /* input */
28
28
  /*@doc Define a cor de fundo do input.*/
29
- --cx__input--background-color: var(--background--medium, #e0e0e0);
29
+ --combo-box__input--background-color: var(--background--medium, #e0e0e0);
30
30
  /*@doc Define o estilo da borda do input.*/
31
- --cx__input--border: var(--border--medium, 2px solid);
31
+ --combo-box__input--border: var(--border--medium, 2px solid);
32
32
  /*@doc Define a cor da borda do input.*/
33
- --cx__input--border-color: var(--cx__input--background-color);
33
+ --combo-box__input--border-color: var(--combo-box__input--background-color);
34
34
  /*no modo normal usamos a borda com a mesma cor do bg*/
35
35
  /*@doc Define a cor da borda do input quando focado.*/
36
- --cx__input--focus--border-color: var(--color--primary, #008561);
36
+ --combo-box__input--focus--border-color: var(--color--primary, #008561);
37
37
  /*@doc Define a cor de fundo do input quando desabilitado.*/
38
- --cx__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
38
+ --combo-box__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
39
39
  /*@doc Define a cor do texto dentro do input quando desabilitado.*/
40
- --cx__input--disabled--color: var(--text--disable, #AFB6C0);
40
+ --combo-box__input--disabled--color: var(--text--disable, #AFB6C0);
41
41
  /*@doc Define a cor da borda do input quando com erro.*/
42
- --cx__input--error--border-color: #CC2936;
42
+ --combo-box__input--error--border-color: #CC2936;
43
43
 
44
44
  /* label */
45
45
  /*@doc Define a cor do label.*/
46
- --cx__label--color: var(--title--primary, #919191);
46
+ --combo-box__label--color: var(--title--primary, #919191);
47
47
 
48
48
  /* list */
49
49
  /*@doc Define a cor do texto da lista de opções.*/
50
- --cx__list-text--primary: var(--text--primary, #626e82);
50
+ --combo-box__list-text--primary: var(--text--primary, #626e82);
51
51
  /*@doc Define a altura do box da lista de opções.*/
52
- --cx__list-height: calc(var(--cx--font-size) + var(--cx--space--medium));
52
+ --combo-box__list-height: calc(var(--combo-box--font-size) + var(--combo-box--space--medium));
53
53
 
54
54
  /*@doc Contém a imagem do ícone que aciona a lista.*/
55
- --cx--drop-down__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="16px"><path d="M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z"/></svg>');
55
+ --combo-box--drop-down__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="16px"><path d="M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z"/></svg>');
56
56
  /*@doc Contém a imagem do ícone de pesquisa.*/
57
- --cx--search__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="22px" width="22px"><path d="m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z"/></svg>');
57
+ --combo-box--search__image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="22px" width="22px"><path d="m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z"/></svg>');
58
58
 
59
59
  /* espaçamento */
60
- --cx--space--medium: var(--space--medium, 12px);
61
- --cx--space--small: var(--space--small, 6px);
60
+ /*@doc Define um espaçamento mediano entre elementos do componente.*/
61
+ --combo-box--space--medium: var(--space--medium, 12px);
62
+ /*@doc Define um espaçamento pequeno entre elementos do componente.*/
63
+ --combo-box--space--small: var(--space--small, 6px);
62
64
 
63
65
  /***************
64
66
  host style
@@ -68,12 +70,12 @@
68
70
  flex-wrap: wrap;
69
71
  position: relative;
70
72
  /*public*/
71
- width: var(--cx--width);
73
+ width: var(--combo-box--width);
72
74
  }
73
75
 
74
76
  ez-text-input {
75
- --it__input--background-color: var(--cx__input--background-color, #FFFFFF);
76
- --it__input--border-color: var(--cx__input--border-color, #DCE0E8);
77
+ --it__input--background-color: var(--combo-box__input--background-color, #FFFFFF);
78
+ --it__input--border-color: var(--combo-box__input--border-color, #DCE0E8);
77
79
  }
78
80
 
79
81
  .list-container {
@@ -91,12 +93,12 @@ ez-text-input {
91
93
  flex-direction: column;
92
94
 
93
95
  /*public*/
94
- background-color: var(--cx--background-color--xlight);
95
- padding: var(--cx--space--small);
96
- border-radius: var(--cx--border-radius);
96
+ background-color: var(--combo-box--background-color--xlight);
97
+ padding: var(--combo-box--space--small);
98
+ border-radius: var(--combo-box--border-radius);
97
99
  box-shadow: var(--shadow, 0px 0px 16px 0px #000);
98
100
  scroll-behavior: smooth;
99
- max-height: calc(4*var(--cx__list-height) + 2*var(--cx--space--small));
101
+ max-height: calc(4*var(--combo-box__list-height) + 2*var(--combo-box--space--small));
100
102
  overflow: auto;
101
103
  }
102
104
 
@@ -105,11 +107,11 @@ ez-text-input {
105
107
  display: flex;
106
108
  justify-content: space-between;
107
109
  align-items: center;
108
- border-radius: var(--cx--border-radius-small);
109
- padding: 0 var(--cx--space--small);
110
+ border-radius: var(--combo-box--border-radius-small);
111
+ padding: 0 var(--combo-box--space--small);
110
112
  list-style-type: none;
111
113
 
112
- min-height: var(--cx__list-height);
114
+ min-height: var(--combo-box__list-height);
113
115
  ;
114
116
  }
115
117
 
@@ -117,9 +119,9 @@ ez-text-input {
117
119
  text-align: left;
118
120
  flex-basis: 85%;
119
121
  flex-grow: 1;
120
- color: var(--cx__list-text--primary);
121
- font-weight: var(--cx--font-weight--large);
122
- font-family: var(--cx--font-family);
122
+ color: var(--combo-box__list-text--primary);
123
+ font-weight: var(--combo-box--font-weight--large);
124
+ font-family: var(--combo-box--font-family);
123
125
  white-space: nowrap;
124
126
  overflow: hidden;
125
127
  text-overflow: ellipsis;
@@ -129,9 +131,9 @@ ez-text-input {
129
131
  text-align: right;
130
132
  flex-basis: 15%;
131
133
  flex-grow: 0;
132
- color: var(--cx__list-text--primary);
133
- font-weight: var(--cx--font-weight--large);
134
- font-family: var(--cx--font-family);
134
+ color: var(--combo-box__list-text--primary);
135
+ font-weight: var(--combo-box--font-weight--large);
136
+ font-family: var(--combo-box--font-family);
135
137
  white-space: nowrap;
136
138
  overflow: hidden;
137
139
  text-overflow: ellipsis;
@@ -162,8 +164,8 @@ li:hover {
162
164
  background-color: var(--text--primary, #008561);
163
165
  width: 16px;
164
166
  height: 16px;
165
- -webkit-mask-image: var(--cx--drop-down__image);
166
- mask-image: var(--cx--drop-down__image);
167
+ -webkit-mask-image: var(--combo-box--drop-down__image);
168
+ mask-image: var(--combo-box--drop-down__image);
167
169
  }
168
170
 
169
171
  .btn-open-options:disabled:after {
@@ -191,8 +193,8 @@ li:hover {
191
193
  background-color: var(--text--primary, #008561);
192
194
  width: 22px;
193
195
  height: 22px;
194
- -webkit-mask-image: var(--cx--search__image);
195
- mask-image: var(--cx--search__image);
196
+ -webkit-mask-image: var(--combo-box--search__image);
197
+ mask-image: var(--combo-box--search__image);
196
198
  }
197
199
 
198
200
  .btn-open-search:disabled:after {