@sankhyalabs/ezui 1.1.69 → 1.1.70

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 (48) hide show
  1. package/dist/cjs/ez-button_16.cjs.entry.js +89 -92
  2. package/dist/cjs/ez-dialog.cjs.entry.js +4 -1
  3. package/dist/cjs/ez-modal.cjs.entry.js +15 -68
  4. package/dist/cjs/ez-popover.cjs.entry.js +13 -14
  5. package/dist/cjs/ez-popup.cjs.entry.js +1 -1
  6. package/dist/cjs/ezui.cjs.js +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/components/ez-button/ez-button.css +5 -4
  9. package/dist/collection/components/ez-combo-box/ez-combo-box.css +46 -44
  10. package/dist/collection/components/ez-combo-box/ez-combo-box.js +34 -35
  11. package/dist/collection/components/ez-dialog/ez-dialog.css +43 -43
  12. package/dist/collection/components/ez-dialog/ez-dialog.js +5 -2
  13. package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +1 -1
  14. package/dist/collection/components/ez-modal/ez-modal.js +27 -80
  15. package/dist/collection/components/ez-popover/ez-popover.css +4 -5
  16. package/dist/collection/components/ez-popover/ez-popover.js +25 -26
  17. package/dist/collection/components/ez-popup/ez-popup.css +5 -5
  18. package/dist/collection/components/ez-popup/ez-popup.js +1 -1
  19. package/dist/collection/components/ez-search/ez-search.js +1 -1
  20. package/dist/collection/components/ez-tabselector/ez-tabselector.css +7 -10
  21. package/dist/collection/components/ez-tabselector/ez-tabselector.js +67 -69
  22. package/dist/custom-elements/index.js +126 -180
  23. package/dist/esm/ez-button_16.entry.js +89 -92
  24. package/dist/esm/ez-dialog.entry.js +4 -1
  25. package/dist/esm/ez-modal.entry.js +15 -68
  26. package/dist/esm/ez-popover.entry.js +13 -14
  27. package/dist/esm/ez-popup.entry.js +1 -1
  28. package/dist/esm/ezui.js +1 -1
  29. package/dist/esm/loader.js +1 -1
  30. package/dist/ezui/ezui.esm.js +1 -1
  31. package/dist/ezui/p-1bc9ddad.entry.js +1 -0
  32. package/dist/ezui/p-a7e23f65.entry.js +1 -0
  33. package/dist/ezui/p-a88ee12f.entry.js +1 -0
  34. package/dist/ezui/p-b692a0ab.entry.js +1 -0
  35. package/dist/ezui/p-b6e0fd3e.entry.js +1 -0
  36. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +5 -5
  37. package/dist/types/components/ez-dialog/ez-dialog.d.ts +4 -1
  38. package/dist/types/components/ez-modal/ez-modal.d.ts +7 -7
  39. package/dist/types/components/ez-popover/ez-popover.d.ts +4 -5
  40. package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
  41. package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +19 -10
  42. package/dist/types/components.d.ts +56 -35
  43. package/package.json +1 -1
  44. package/dist/ezui/p-169d99a1.entry.js +0 -1
  45. package/dist/ezui/p-7c7dbfcb.entry.js +0 -1
  46. package/dist/ezui/p-8c8f1c00.entry.js +0 -1
  47. package/dist/ezui/p-d185d7e8.entry.js +0 -1
  48. package/dist/ezui/p-ee5058c1.entry.js +0 -1
@@ -13,104 +13,51 @@ let EzModal = class {
13
13
  /**
14
14
  * Controle de exibição do Modal
15
15
  */
16
- this.oppened = true;
16
+ this.opened = true;
17
17
  /**
18
18
  * Define se o modal será fechado ao clicar ESC
19
19
  */
20
- this.closeesc = false;
20
+ this.closeEsc = false;
21
21
  /**
22
22
  * Define se o modal será fechado ao clicar fora do conteúdo.
23
23
  */
24
- this.closeoutsideclick = false;
24
+ this.closeOutsideClick = false;
25
25
  this.handleKeyboardEvent = (ev) => {
26
- if ((ev === null || ev === void 0 ? void 0 : ev.key) === 'Escape' && this.closeesc) {
26
+ if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
27
27
  this.closeModal();
28
28
  }
29
29
  };
30
30
  }
31
- // handleClickOverlay(ev) {
32
- // ev?.stopPropagation();
33
- // if (ev instanceof PointerEvent && this.closeoutsideclick) {
34
- // this.oppened = false;
35
- // this.ezChange.emit(this.oppened);
36
- // }
37
- // }
38
- handleOppenedChange() {
39
- if (this.oppened) {
40
- document.addEventListener('keydown', this.handleKeyboardEvent);
31
+ handleopenedChange() {
32
+ if (this.opened) {
33
+ document.addEventListener("keydown", this.handleKeyboardEvent);
41
34
  }
42
35
  else {
43
- document.removeEventListener('keydown', this.handleKeyboardEvent);
36
+ document.removeEventListener("keydown", this.handleKeyboardEvent);
44
37
  }
45
38
  }
46
39
  closeModal() {
47
- this.oppened = false;
48
- this.ezCloseModal.emit(this.oppened);
40
+ this.opened = false;
41
+ this.ezCloseModal.emit(this.opened);
49
42
  }
50
- ///////
51
- // trapTabKey(e) {
52
- // // Check for TAB key press
53
- // if (e.keyCode === 9) {
54
- // // SHIFT + TAB
55
- // if (e.shiftKey) {
56
- // if (document.activeElement === this._firstTabStop) {
57
- // e.preventDefault();
58
- // this._lastTabStop.focus();
59
- // }
60
- // // TAB
61
- // } else {
62
- // if (document.activeElement === this._lastTabStop) {
63
- // e.preventDefault();
64
- // this._firstTabStop.focus();
65
- // }
66
- // }
67
- // }
68
- // if (e.keyCode === 27) {
69
- // this.closeModal();
70
- // }
71
- // }
72
- // closeModal() {
73
- // this.oppened = false;
74
- // this._focusedElementBeforeModal.focus();
75
- // }
76
- // componentDidLoad() {
77
- // this._overlay.addEventListener('keydown', (ev) => { this.trapTabKey(ev) });
78
- // // Save current focus
79
- // this._focusedElementBeforeModal = document.activeElement;
80
- // // Find all focusable children
81
- // var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
82
- // var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
83
- // // Convert NodeList to Array
84
- // focusableElements = Array.prototype.slice.call(focusableElements);
85
- // this._firstTabStop = focusableElements[0];
86
- // this._lastTabStop = focusableElements[focusableElements.length - 1];
87
- // // Focus first child
88
- // this._firstTabStop.focus();
89
- // }
90
- // componentDidUpdate() {
91
- // var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
92
- // var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
93
- // }
94
- /////
95
43
  componentDidLoad() {
96
- this.handleOppenedChange();
44
+ this.handleopenedChange();
97
45
  }
98
46
  onMouseDownHandler(event) {
99
- if (this.closeoutsideclick && event.target === this._overlay) {
47
+ if (this.closeOutsideClick && event.target === this._overlay) {
100
48
  this.closeModal();
101
49
  }
102
50
  }
103
- //Ainda teremos ajustes visuais
104
51
  render() {
105
52
  const positionSufix = this.align === "left" ? "left" : "right";
106
- return (index.h(index.Host, null, this.oppened
53
+ return (index.h(index.Host, null, this.opened
107
54
  ?
108
- index.h("div", { class: 'modal', onMouseDown: evt => this.onMouseDownHandler(evt) }, index.h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, index.h("div", { class: `modal__content modal__content--${positionSufix} ${this.modalsize}` }, index.h("slot", null))))
55
+ index.h("div", { class: "modal", onMouseDown: evt => this.onMouseDownHandler(evt) }, index.h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, index.h("div", { class: `modal__content modal__content--${positionSufix} ${this.modalSize}` }, index.h("slot", null))))
109
56
  :
110
57
  undefined));
111
58
  }
112
59
  static get watchers() { return {
113
- "oppened": ["handleOppenedChange"]
60
+ "opened": ["handleopenedChange"]
114
61
  }; }
115
62
  };
116
63
  EzModal.style = ezModalCss;
@@ -6,7 +6,7 @@ const index = require('./index-0f668cc5.js');
6
6
  require('./RequestMetadata-2cd01e8a.js');
7
7
  const FloatingManager = require('./FloatingManager-6cfeb947.js');
8
8
 
9
- const ezPopoverCss = ":host{--pop__box--border-radius:var(--border--radius-medium, 12px);--pop__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);position:relative;display:flex;user-select:none;width:100%}.box{z-index:var(--more-visible, 1);display:flex;flex-direction:column;height:fit-content;background-color:var(--background--xlight);border-radius:var(--pop__box--border-radius);box-shadow:var(--pop__box--box-shadow)}.box--fit-content{width:fit-content}.box--full-width{width:100%}";
9
+ const ezPopoverCss = ":host{--popover__box--border-radius:var(--border--radius-medium, 12px);--popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);position:relative;display:flex;user-select:none;width:100%}.box{z-index:var(--more-visible, 1);display:flex;flex-direction:column;height:fit-content;background-color:var(--background--xlight);border-radius:var(--popover__box--border-radius);box-shadow:var(--popover__box--box-shadow)}.box--fit-content{width:fit-content}.box--full-width{width:100%}";
10
10
 
11
11
  let EzPopover = class {
12
12
  constructor(hostRef) {
@@ -17,28 +17,28 @@ let EzPopover = class {
17
17
  * No modo floating = false o popover só se tornará visível
18
18
  * quando o método show() for acionado.
19
19
  */
20
- this.autoclose = true;
20
+ this.autoClose = true;
21
21
  /**
22
22
  * Offset top do popover em relação ao componente pai
23
23
  */
24
- this.top = '0px';
24
+ this.top = "0px";
25
25
  /**
26
26
  * Offset left do popover em relação ao componente pai
27
27
  */
28
- this.left = '0px';
28
+ this.left = "0px";
29
29
  /**
30
30
  * Offset bottom do popover em relação ao componente pai
31
31
  */
32
- this.bottom = '0px';
32
+ this.bottom = "0px";
33
33
  /**
34
34
  * Offset right do popover em relação ao componente pai
35
35
  */
36
- this.right = '0px';
36
+ this.right = "0px";
37
37
  /**
38
38
  * Ajusta o comportamento da largura do popover.
39
39
  * Opções: "100% e "fit-content" (default)
40
40
  */
41
- this.boxwidth = 'fit-content';
41
+ this.boxWidth = "fit-content";
42
42
  }
43
43
  dispatchVisibilityChange(newValue, oldValue) {
44
44
  if (newValue != oldValue) {
@@ -50,7 +50,7 @@ let EzPopover = class {
50
50
  */
51
51
  async updatePosition(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
52
52
  const floatingOptions = {
53
- autoClose: this.autoclose,
53
+ autoClose: this.autoClose,
54
54
  top,
55
55
  left,
56
56
  bottom,
@@ -70,11 +70,10 @@ let EzPopover = class {
70
70
  }
71
71
  /**
72
72
  * Faz com que o popover seja renderizado na DOM.
73
- *
74
73
  */
75
74
  async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
76
75
  const floatingOptions = {
77
- autoClose: this.autoclose,
76
+ autoClose: this.autoClose,
78
77
  top,
79
78
  left,
80
79
  bottom,
@@ -91,7 +90,7 @@ let EzPopover = class {
91
90
  }
92
91
  };
93
92
  this._floatingID = FloatingManager.FloatingManager.float(this._box, this._container, floatingOptions);
94
- this.isOpened = true;
93
+ this.opened = true;
95
94
  }
96
95
  /**
97
96
  * Usado no modo floating. Faz com que o componente seja ocultado.
@@ -100,7 +99,7 @@ let EzPopover = class {
100
99
  if (this._floatingID !== undefined) {
101
100
  FloatingManager.FloatingManager.close(this._floatingID);
102
101
  this._floatingID = undefined;
103
- this.isOpened = false;
102
+ this.opened = false;
104
103
  }
105
104
  }
106
105
  componentDidRender() {
@@ -110,11 +109,11 @@ let EzPopover = class {
110
109
  }
111
110
  }
112
111
  render() {
113
- return (index.h(index.Host, null, index.h("section", { ref: el => this._container = el }, index.h("div", { class: `box ${this.boxwidth === 'fit-content' ? 'box--fit-content' : 'box--full-width'}`, ref: el => this._box = el }, index.h("slot", null)))));
112
+ return (index.h(index.Host, null, index.h("section", { ref: el => this._container = el }, index.h("div", { class: `box ${this.boxWidth === "fit-content" ? "box--fit-content" : "box--full-width"}`, ref: el => this._box = el }, index.h("slot", null)))));
114
113
  }
115
114
  get _host() { return index.getElement(this); }
116
115
  static get watchers() { return {
117
- "isOpened": ["dispatchVisibilityChange"]
116
+ "opened": ["dispatchVisibilityChange"]
118
117
  }; }
119
118
  };
120
119
  EzPopover.style = ezPopoverCss;
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-0f668cc5.js');
6
6
 
7
- const ezPopupCss = ":host{display:flex;--popup-z-index:var(--most-visible, 3);--popup__container--color:var(--title--primary, #2b3a54);--popup__container--padding:var(--space--large, 24px);--popup__header--padding-bottom:var(--space--medium, 12px);--popup__title--font-family:var(--font-pattern, \"'Sora', 'Algerian'\");--popup__title--font-size:var(--title--extra-large, 24px);--popup__title--color:var(--title--primary, #2b3a54);--popup__title--font-weight:var(--text-weight--large, 600);--popup__btn__close--background-color:var(--title--primary, #2b3a54);--popup__btn__close--image:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--popup-z-index);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;display:flex;flex-wrap:wrap;overflow:hidden;background:#FFFF;color:var(--popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--popup__container--padding)}.popup__content{box-sizing:border-box;max-height:100%;width:100%;display:flex;flex-wrap:wrap}.popup__expandable-content{box-sizing:border-box;overflow-y:auto;width:100%;display:flex;flex-wrap:wrap;max-height:80vh;content-visibility:auto}.popup__header{padding-bottom:var(--popup__header--padding-bottom);width:100%;display:flex}.popup__title{display:flex;margin:0;width:100%;font-family:var(--popup__title--font-family);font-size:var(--popup__title--font-size);font-weight:var(--popup__title--font-weight);color:var(--popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--popup__btn__close--background-color);width:14px;height:14px;-webkit-mask-image:var(--popup__btn__close--image);mask-image:var(--popup__btn__close--image)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
7
+ const ezPopupCss = ":host{display:flex;--popup-z-index:var(--most-visible, 3);--popup__container--color:var(--title--primary, #2b3a54);--popup__container--padding:var(--space--large, 24px);--popup__header--padding-bottom:var(--space--medium, 12px);--popup__title--font-family:var(--font-pattern, \"'Sora', 'Algerian'\");--popup__title--font-size:var(--title--extra-large, 24px);--popup__title--color:var(--title--primary, #2b3a54);--popup__title--font-weight:var(--text-weight--large, 600);--popup__btn__close--icon-color:var(--title--primary, #2b3a54);--popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--popup-z-index);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;display:flex;flex-wrap:wrap;overflow:hidden;background:#FFFF;color:var(--popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--popup__container--padding)}.popup__content{box-sizing:border-box;max-height:100%;width:100%;display:flex;flex-wrap:wrap}.popup__expandable-content{box-sizing:border-box;overflow-y:auto;width:100%;display:flex;flex-wrap:wrap;max-height:80vh;content-visibility:auto}.popup__header{padding-bottom:var(--popup__header--padding-bottom);width:100%;display:flex}.popup__title{display:flex;margin:0;width:100%;font-family:var(--popup__title--font-family);font-size:var(--popup__title--font-size);font-weight:var(--popup__title--font-weight);color:var(--popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--popup__btn__close--icon);mask-image:var(--popup__btn__close--icon)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
8
8
 
9
9
  let EzPopup = class {
10
10
  constructor(hostRef) {
@@ -15,5 +15,5 @@ const patchBrowser = () => {
15
15
  };
16
16
 
17
17
  patchBrowser().then(options => {
18
- return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
18
+ return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
19
19
  });
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
17
+ return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
18
18
  });
19
19
  };
20
20
 
@@ -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);
@@ -102,6 +102,7 @@ button.icon {
102
102
  min-width: 42px;
103
103
  height: 42px;
104
104
  padding: 0px;
105
+ --icon--color: #ffffff;
105
106
  }
106
107
 
107
108
  a {
@@ -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 {