@sankhyalabs/ezui 1.1.108 → 1.1.111

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 (101) hide show
  1. package/dist/cjs/ApplicationUtils-c8f07135.js +39 -0
  2. package/dist/cjs/AssetsUtils-4909c6de.js +24 -0
  3. package/dist/cjs/CSSVarsUtils-8fbdf2e0.js +19 -0
  4. package/dist/cjs/ez-button.cjs.entry.js +79 -0
  5. package/dist/cjs/ez-calendar.cjs.entry.js +223 -0
  6. package/dist/cjs/ez-check.cjs.entry.js +76 -0
  7. package/dist/cjs/ez-collapsible-box.cjs.entry.js +47 -0
  8. package/dist/cjs/ez-combo-box.cjs.entry.js +278 -0
  9. package/dist/cjs/ez-date-input.cjs.entry.js +102 -0
  10. package/dist/cjs/ez-date-time-input.cjs.entry.js +145 -0
  11. package/dist/cjs/ez-form.cjs.entry.js +785 -0
  12. package/dist/cjs/ez-grid.cjs.entry.js +9 -8
  13. package/dist/cjs/ez-icon.cjs.entry.js +41 -0
  14. package/dist/cjs/{ez-button_3.cjs.entry.js → ez-list.cjs.entry.js} +0 -89
  15. package/dist/cjs/ez-modal.cjs.entry.js +65 -0
  16. package/dist/cjs/ez-number-input.cjs.entry.js +86 -0
  17. package/dist/cjs/ez-popover.cjs.entry.js +4 -5
  18. package/dist/cjs/ez-search.cjs.entry.js +64 -0
  19. package/dist/cjs/ez-tabselector.cjs.entry.js +198 -0
  20. package/dist/cjs/ez-text-area.cjs.entry.js +114 -0
  21. package/dist/cjs/ez-text-input.cjs.entry.js +201 -0
  22. package/dist/cjs/ez-time-input.cjs.entry.js +118 -0
  23. package/dist/cjs/ez-upload.cjs.entry.js +356 -0
  24. package/dist/cjs/ezui.cjs.js +1 -1
  25. package/dist/cjs/{ez-modal_2.cjs.entry.js → grid-config.cjs.entry.js} +3 -62
  26. package/dist/cjs/loader.cjs.js +1 -1
  27. package/dist/cjs/select-box.cjs.entry.js +22 -0
  28. package/dist/cjs/test-du.cjs.entry.js +76 -0
  29. package/dist/collection/collection-manifest.json +132 -1
  30. package/dist/custom-elements/index.js +3 -1577
  31. package/dist/esm/ApplicationUtils-36e38de9.js +37 -0
  32. package/dist/esm/AssetsUtils-9b1329a3.js +22 -0
  33. package/dist/esm/CSSVarsUtils-667e0016.js +17 -0
  34. package/dist/esm/ez-button.entry.js +75 -0
  35. package/dist/esm/ez-calendar.entry.js +219 -0
  36. package/dist/esm/ez-check.entry.js +72 -0
  37. package/dist/esm/ez-collapsible-box.entry.js +43 -0
  38. package/dist/esm/ez-combo-box.entry.js +274 -0
  39. package/dist/esm/ez-date-input.entry.js +98 -0
  40. package/dist/esm/ez-date-time-input.entry.js +141 -0
  41. package/dist/esm/ez-form.entry.js +781 -0
  42. package/dist/esm/ez-grid.entry.js +2 -1
  43. package/dist/esm/ez-icon.entry.js +37 -0
  44. package/dist/esm/{ez-button_3.entry.js → ez-list.entry.js} +2 -89
  45. package/dist/esm/ez-modal.entry.js +61 -0
  46. package/dist/esm/ez-number-input.entry.js +82 -0
  47. package/dist/esm/ez-popover.entry.js +1 -2
  48. package/dist/esm/ez-search.entry.js +60 -0
  49. package/dist/esm/ez-tabselector.entry.js +194 -0
  50. package/dist/esm/ez-text-area.entry.js +110 -0
  51. package/dist/esm/ez-text-input.entry.js +197 -0
  52. package/dist/esm/ez-time-input.entry.js +114 -0
  53. package/dist/esm/ez-upload.entry.js +352 -0
  54. package/dist/esm/ezui.js +1 -1
  55. package/dist/esm/{ez-modal_2.entry.js → grid-config.entry.js} +3 -61
  56. package/dist/esm/loader.js +1 -1
  57. package/dist/esm/select-box.entry.js +18 -0
  58. package/dist/esm/test-du.entry.js +72 -0
  59. package/dist/ezui/ezui.esm.js +1 -1
  60. package/dist/ezui/p-080045a0.entry.js +1 -0
  61. package/dist/ezui/p-25e87823.entry.js +1 -0
  62. package/dist/ezui/p-31b0e21a.entry.js +1 -0
  63. package/dist/ezui/p-363fc3af.entry.js +1 -0
  64. package/dist/ezui/p-3662c09e.entry.js +1 -0
  65. package/dist/ezui/p-3a8bf0a8.entry.js +1 -0
  66. package/dist/ezui/p-3c954800.entry.js +1 -0
  67. package/dist/ezui/p-44d4f8d6.entry.js +1 -0
  68. package/dist/ezui/p-477bb703.js +1 -0
  69. package/dist/ezui/p-59a8448a.entry.js +1 -0
  70. package/dist/ezui/p-62daf508.js +1 -0
  71. package/dist/ezui/p-65893e25.entry.js +1 -0
  72. package/dist/ezui/p-73d3f767.entry.js +1 -0
  73. package/dist/ezui/p-73d45b12.entry.js +1 -0
  74. package/dist/ezui/p-804c118a.entry.js +1 -0
  75. package/dist/ezui/p-97f77023.entry.js +1 -0
  76. package/dist/ezui/p-9aecc079.entry.js +1 -0
  77. package/dist/ezui/{p-db1797d7.entry.js → p-a038e7a5.entry.js} +28 -28
  78. package/dist/ezui/p-a5f1f9c4.entry.js +1 -0
  79. package/dist/ezui/p-bc2834fa.entry.js +1 -0
  80. package/dist/ezui/p-c27495d9.entry.js +1 -0
  81. package/dist/ezui/p-c6f2aa6c.entry.js +1 -0
  82. package/dist/ezui/p-d54c157f.js +1 -0
  83. package/dist/ezui/p-f26f6d67.entry.js +1 -0
  84. package/dist/ezui/p-f3f9c7e6.entry.js +1 -0
  85. package/dist/ezui/p-f78c7ec9.entry.js +1 -0
  86. package/package.json +5 -4
  87. package/dist/cjs/AssetsUtils-697927e8.js +0 -79
  88. package/dist/cjs/FloatingManager-751368a8.js +0 -126
  89. package/dist/cjs/UnitMetadata-de809a4b.js +0 -1346
  90. package/dist/cjs/ez-calendar_16.cjs.entry.js +0 -2916
  91. package/dist/esm/AssetsUtils-f75711ac.js +0 -76
  92. package/dist/esm/FloatingManager-ee1f7fdf.js +0 -124
  93. package/dist/esm/UnitMetadata-d300ae38.js +0 -1340
  94. package/dist/esm/ez-calendar_16.entry.js +0 -2897
  95. package/dist/ezui/p-3e6fa4ca.entry.js +0 -1
  96. package/dist/ezui/p-47cf74f0.js +0 -1
  97. package/dist/ezui/p-6b257393.entry.js +0 -1
  98. package/dist/ezui/p-780fbe22.entry.js +0 -1
  99. package/dist/ezui/p-81fc41a5.js +0 -1
  100. package/dist/ezui/p-b05feb1f.js +0 -1
  101. package/dist/ezui/p-c451d6e6.entry.js +0 -1
@@ -1,2897 +0,0 @@
1
- import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-6b8bfbeb.js';
2
- import { T as TimeFormatter, U as UserInterface, A as Action, D as DataUnitAction, a as DataUnit, N as NumberUtils, M as MaskFormatter, b as DataType } from './UnitMetadata-d300ae38.js';
3
- import { F as FloatingManager } from './FloatingManager-ee1f7fdf.js';
4
- import { S as StringUtils, g as getSpritePath } from './AssetsUtils-f75711ac.js';
5
-
6
- class DateUtils {
7
- static clearTime(date, adjustDayLightSavingTime = true) {
8
- const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
9
- return adjustDayLightSavingTime ? DateUtils.adjustDLST(newDate) : newDate;
10
- }
11
- static strToDate(strValue, adjustDayLightSavingTime = true, monthYearMode = false) {
12
- /** monthYearMode é um booleano para usar o formato MM/YYYY.
13
- * Quando ativado, é retornado o primeiro dia do mês apenas para construir a data.
14
- * Não há necessidade de verificar o horário de verão quando utilizado esse modo. */
15
- let parts;
16
- if (monthYearMode) {
17
- parts = /^(1[0-2]|0[1-9]|[1-9])[^\d]?(\d{2}|\d{4})(?:\s(\d{1,2}):(\d{1,2}):?(\d{0,2}))?$/.exec(strValue);
18
- }
19
- else {
20
- parts = /^(3[01]|[1-2]\d|0[1-9]|[1-9])[^\d]?(1[0-2]|0[1-9]|[1-9])[^\d]?(\d{2}|\d{4})(?:\s(\d{1,2}):(\d{1,2}):?(\d{0,2}))?$/.exec(strValue);
21
- }
22
- if (!parts) {
23
- return undefined;
24
- }
25
- const day = monthYearMode ? 1 : Number(parts[1]);
26
- const month = Number(parts[(monthYearMode ? 1 : 2)]);
27
- let year = Number(parts[(monthYearMode ? 2 : 3)]);
28
- const hour = Number(parts[(monthYearMode ? 3 : 4)] || 0);
29
- const min = Number(parts[(monthYearMode ? 4 : 5)] || 0);
30
- const sec = Number(parts[(monthYearMode ? 5 : 6)] || 0);
31
- if (year < 100) {
32
- year += year < 30 ? 2000 : 1900;
33
- }
34
- let date = new Date(year, month - 1, day, hour, min, sec, 0);
35
- if (adjustDayLightSavingTime === true && !monthYearMode && hour == 0) {
36
- date = DateUtils.adjustDLST(date);
37
- }
38
- return date;
39
- }
40
- static adjustDLST(date) {
41
- //Work around para corrigir o Bug do horário de verão.
42
- if (date.getHours() == 23) {
43
- return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 1, 0, 0, 0);
44
- }
45
- return date;
46
- }
47
- }
48
-
49
- class ApplicationContext {
50
- static getContextValue(key) {
51
- return ApplicationContext.getCtx()[key];
52
- }
53
- static setContextValue(key, value) {
54
- ApplicationContext.getCtx()[key] = value;
55
- }
56
- static getCtx() {
57
- let ctx = window.___snkcore___ctx___;
58
- if (!ctx) {
59
- ctx = {};
60
- window.___snkcore___ctx___ = ctx;
61
- }
62
- return ctx;
63
- }
64
- }
65
-
66
- const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--ez-calendar__nav-btn--next-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);padding:0px;font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;background-color:var(--ez-calendar__time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:136px;padding:0px;margin:0px;overflow:auto}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";
67
-
68
- let EzCalendar = class {
69
- constructor(hostRef) {
70
- registerInstance(this, hostRef);
71
- this.ezChange = createEvent(this, "ezChange", 7);
72
- this._firstRender = true;
73
- this._todayLabel = "Hoje";
74
- this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
75
- this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
76
- this._hoursLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
77
- this._minutosLabel = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
78
- /**
79
- * A data selecionada no calendário
80
- */
81
- this.value = new Date();
82
- /**
83
- * No modo floating o calendário só se tornará visível
84
- * quando o método show() for acionado.
85
- */
86
- this.floating = false;
87
- /**
88
- * Exibe ou não as horas e minutos no calendario
89
- */
90
- this.time = false;
91
- /**
92
- * Exibe ou não os segundos no calendario
93
- */
94
- this.showSeconds = false;
95
- }
96
- /**
97
- * Usado no modo floating. Faz com que o componente seja exibido.
98
- * É possível determinar ajustes de posicionamento através dos parâmetros
99
- * top, left, bottom e right. Esses parâmetros devem ser informados como
100
- * strings no formato css.
101
- */
102
- async show(top, left, bottom, right) {
103
- if (this.floating) {
104
- this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
105
- window.requestAnimationFrame(() => {
106
- this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
107
- });
108
- this.scroll();
109
- }
110
- }
111
- /**
112
- * Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
113
- */
114
- async fitVertical(topOffset, bottomOffset) {
115
- const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
116
- const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
117
- if (availableBottom) {
118
- this.show(topOffset + "px", undefined, "unset");
119
- }
120
- else {
121
- this.show("unset", undefined, bottomOffset + "px");
122
- }
123
- }
124
- /**
125
- * Usado no modo floating. Faz com que o componente seja ocultado.
126
- */
127
- async hide() {
128
- if (this._floatingID !== undefined) {
129
- FloatingManager.close(this._floatingID);
130
- this._floatingID = undefined;
131
- }
132
- }
133
- valueChanged() {
134
- if (this.value) {
135
- this._currentPosition.setTime(this.value.getTime());
136
- this._currentPosition.setDate(1);
137
- }
138
- }
139
- getMonthLabel() {
140
- return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
141
- }
142
- isSelectedDate(d) {
143
- if (this.value) {
144
- return this.value.getDate() == d.getDate() && this.value.getMonth() == d.getMonth() && this.value.getFullYear() == d.getFullYear();
145
- }
146
- return false;
147
- }
148
- changeMonth(offset) {
149
- this._currentPosition.setMonth(this._currentPosition.getMonth() + offset);
150
- forceUpdate(this);
151
- }
152
- selectDate(d) {
153
- let newDate = d;
154
- if (this.value && (this.time || this.showSeconds)) {
155
- newDate.setHours(this.value.getHours());
156
- newDate.setMinutes(this.value.getMinutes());
157
- if (this.showSeconds) {
158
- newDate.setSeconds(this.value.getSeconds());
159
- }
160
- else {
161
- newDate.setSeconds(0);
162
- }
163
- }
164
- this.value = newDate;
165
- this.ezChange.emit(this.value);
166
- }
167
- selectHours(hour) {
168
- if (!this.value) {
169
- this.value = new Date();
170
- }
171
- this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), hour, this.value.getMinutes(), this.value.getSeconds());
172
- this.ezChange.emit(this.value);
173
- }
174
- selectMinutes(minute) {
175
- if (!this.value) {
176
- this.value = new Date();
177
- }
178
- this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), minute, this.value.getSeconds());
179
- this.ezChange.emit(this.value);
180
- }
181
- selectSeconds(second) {
182
- if (!this.value) {
183
- this.value = new Date();
184
- }
185
- this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), this.value.getMinutes(), second);
186
- this.ezChange.emit(this.value);
187
- }
188
- updateScroll(element) {
189
- if (element) {
190
- const { scrollHeight, clientHeight, scrollTop } = element;
191
- const remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
192
- if (remainingScroll > 0) {
193
- element.classList.add("endHidden");
194
- }
195
- else {
196
- element.classList.remove("endHidden");
197
- }
198
- }
199
- }
200
- componentDidRender() {
201
- if (this.floating && this._firstRender) {
202
- this._calendarHeight = this._box.clientHeight;
203
- this._box.remove();
204
- this._firstRender = false;
205
- }
206
- this.updateScroll(this._hoursScroll);
207
- this.updateScroll(this._minutesScroll);
208
- this.updateScroll(this._secondsScroll);
209
- }
210
- componentDidLoad() {
211
- this.scroll();
212
- }
213
- scroll() {
214
- if (this.time || this.showSeconds) {
215
- this._hoursScroll.scrollTop = this._hoursSelect.offsetTop - 64;
216
- this._minutesScroll.scrollTop = this._minutesSelect.offsetTop - 64;
217
- this.updateScroll(this._hoursScroll);
218
- this.updateScroll(this._minutesScroll);
219
- if (this.showSeconds) {
220
- this._secondsScroll.scrollTop = this._secondsSelect.offsetTop - 64;
221
- this.updateScroll(this._secondsScroll);
222
- }
223
- }
224
- }
225
- render() {
226
- if (this._currentPosition == null) {
227
- this._currentPosition = new Date();
228
- if (this.value) {
229
- this._currentPosition.setTime(this.value.getTime());
230
- }
231
- this._currentPosition.setDate(1);
232
- }
233
- const firstDate = new Date();
234
- firstDate.setTime(this._currentPosition.getTime());
235
- firstDate.setDate(1 - firstDate.getDay());
236
- return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
237
- const date = new Date();
238
- date.setTime(firstDate.getTime());
239
- date.setDate(date.getDate() + offset + index);
240
- let classNames = "calendar__cell";
241
- if (this._currentPosition.getMonth() != date.getMonth()) {
242
- classNames += " calendar__cell--secondary";
243
- }
244
- else if (this.isSelectedDate(date)) {
245
- classNames += " calendar__cell--selected";
246
- }
247
- return h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
248
- })))), h("div", { class: "calendar__footer" }, h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
249
- h("div", { class: "calendar-time" }, h("div", { class: "calendar-time__header" }, h("div", null, "H"), h("div", { class: "separatorTime" }, ":"), h("div", null, "M"), this.showSeconds &&
250
- h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
251
- h("div", null, "S")), h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {
252
- if (index === this.value.getHours()) {
253
- return (h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
254
- }
255
- else {
256
- return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
257
- }
258
- })), h("div", { class: "calendar__column", ref: elem => this._minutesScroll = elem, onScroll: () => this.updateScroll(this._minutesScroll) }, this._minutosLabel.map((offset, index) => {
259
- if (index === this.value.getMinutes()) {
260
- return (h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
261
- }
262
- else {
263
- return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
264
- }
265
- })), this.showSeconds &&
266
- h("div", { class: "calendar__column", ref: elem => this._secondsScroll = elem, onScroll: () => this.updateScroll(this._secondsScroll) }, this._minutosLabel.map((offset, index) => {
267
- if (index === this.value.getSeconds()) {
268
- return (h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
269
- }
270
- else {
271
- return (h("div", { class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
272
- }
273
- })))))));
274
- }
275
- static get watchers() { return {
276
- "value": ["valueChanged"]
277
- }; }
278
- };
279
- EzCalendar.style = ezCalendarCss;
280
-
281
- const ezCheckCss = ":host{--ez-check--box--width:18px;--ez-check--box--height:18px;--ez-check--width:calc(var(--ez-check--box--width) + 14px);--ez-check--height:calc(var(--ez-check--box--width) + 14px);--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:20px;--ez-switch--pin--height:20px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--checked--background-color:var(--color--primary-300);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-secondary);--ez-switch--pin--checked--background-color:var(--color--primary);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;width:100%;align-items:center;margin:0}input.regularMode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.regularMode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regularMode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regularMode:disabled{cursor:auto;background:none}input.regularMode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regularMode:disabled::before{border:var(--ez-check--disabled--border)}input.regularMode:checked:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regularMode:checked:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regularMode:checked::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regularMode:checked:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regularMode:checked::after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regularMode:checked:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switchMode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--text--secondary, #a2abb9);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switchMode:disabled{background-color:var(--ez-switch--disabled--background-color)}input.switchMode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transform:translateX(-2px) translateY(-3px);border-radius:50%;width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switchMode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color)}input.switchMode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switchMode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width))/2);background-color:var(--ez-switch--pin--focus--background-color)}input.switchMode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switchMode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width)))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-3px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color)}input.switchMode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);text-shadow:var(--text-shadow);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;padding-left:var(--space--small)}.label--disabled{color:var(--ez-check--label--disabled--color)}";
282
-
283
- let EzCheck = class {
284
- constructor(hostRef) {
285
- registerInstance(this, hostRef);
286
- this.ezChange = createEvent(this, "ezChange", 7);
287
- /**
288
- * Deixa o campo disponível ou não para interação com o usuário.
289
- */
290
- this.enabled = true;
291
- /**
292
- * Existem dois modos de visualização: regular e switch.
293
- * Se esta propriedade for omitida, o componete assume o formato "regular".
294
- * No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
295
- * No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
296
- */
297
- this.mode = "regular";
298
- }
299
- adjustMode() {
300
- if (this.mode === "switch") {
301
- this._inputElem.classList.remove("regularMode");
302
- this._inputElem.classList.add("switchMode");
303
- }
304
- else {
305
- this._inputElem.classList.remove("switchMode");
306
- this._inputElem.classList.add("regularMode");
307
- }
308
- }
309
- //---------------------------------------------
310
- // Public methods
311
- //---------------------------------------------
312
- /**
313
- * Devolve o modo escolhido para o componente
314
- */
315
- async getMode() {
316
- return this.mode;
317
- }
318
- /**
319
- * Faz o foco no componente de input
320
- */
321
- async setFocus() {
322
- this._inputElem.focus();
323
- }
324
- componentDidLoad() {
325
- this.adjustMode();
326
- }
327
- changeValue() {
328
- if (!this.enabled) {
329
- return;
330
- }
331
- this.value = !this.value;
332
- this.ezChange.emit(this.value);
333
- }
334
- getLabelClasses() {
335
- let classes = "label";
336
- if (!this.enabled) {
337
- classes += " label--disabled";
338
- }
339
- return classes;
340
- }
341
- render() {
342
- return (h(Host, null, h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
343
- }
344
- static get watchers() { return {
345
- "mode": ["adjustMode"]
346
- }; }
347
- };
348
- EzCheck.style = ezCheckCss;
349
-
350
- const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--height:42px;--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__btn--image--xsmall:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"12px\" width=\"7.5px\"><path d=\"M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z\"/></svg>');--ez-collapsible-box__btn--image--small:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"14px\" width=\"8.68px\"><path d=\"M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z\"/></svg>');--ez-collapsible-box__btn--image--medium:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--ez-collapsible-box__btn--image--large:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"18px\" width=\"11.25px\"><path d=\"M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z\"/></svg>');--ez-collapsible-box__btn--image--xlarge:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"20px\" width=\"12.5px\"><path d=\"M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z\"/></svg>');--ez-collapsible-box__btn--fill:var(--ez-collapsible-box--color);--ez-collapsible-box__btn--width:10px;--ez-collapsible-box__btn--height:16px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box__title{width:100%;align-self:center;display:flex;box-sizing:border-box}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;width:100%;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__label--icon-right{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__btn{outline:none;border:none;background-color:unset;cursor:pointer;padding:1px 6px}.collapsible-box__btn::after{content:'';display:flex;background-color:var(--ez-collapsible-box__btn--fill);width:var(--ez-collapsible-box__btn--width);height:var(--ez-collapsible-box__btn--height);transition:transform var(--transition);transform:rotate(90deg)}.collapsible-box__btn--xsmall::after{width:7.5px;height:12px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--xsmall);mask-image:var(--ez-collapsible-box__btn--image--xsmall)}.collapsible-box__btn--small::after{width:8.68px;height:14px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--small);mask-image:var(--ez-collapsible-box__btn--image--small)}.collapsible-box__btn--medium::after{width:10px;height:16px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--medium);mask-image:var(--ez-collapsible-box__btn--image--medium)}.collapsible-box__btn--large::after{width:11.25px;height:18px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--large);mask-image:var(--ez-collapsible-box__btn--image--large)}.collapsible-box__btn--xlarge::after{width:12.5px;height:20px;-webkit-mask-image:var(--ez-collapsible-box__btn--image--xlarge);mask-image:var(--ez-collapsible-box__btn--image--xlarge)}.collapsible-box__btn--collapsed::after{transform:rotate(0deg)}.font--xsmall{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--xlarge{font-size:20px}";
351
-
352
- let EzCollapsibleBox = class {
353
- constructor(hostRef) {
354
- registerInstance(this, hostRef);
355
- this.ezChange = createEvent(this, "ezChange", 7);
356
- /**
357
- * Valor externalizado que garante a exibição ou não do componente
358
- */
359
- this.value = false;
360
- /**
361
- * Define o tamanho do texto e do ícone do componente.
362
- */
363
- this.headerSize = "small";
364
- /**
365
- * Define o local onde o ícone será renderizado.
366
- */
367
- this.iconPlacement = "left";
368
- }
369
- observeValue() {
370
- this.ezChange.emit(this.value);
371
- }
372
- /**
373
- * Esconde ou revela o conteúdo do componente
374
- */
375
- async showHide() {
376
- this.value = !this.value;
377
- }
378
- render() {
379
- return (h(Host, null, this.iconPlacement == "right" ?
380
- h("div", { class: "collapsible-box__title" }, h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label), h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }))
381
- :
382
- h("div", { class: "collapsible-box__title" }, h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headerSize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headerSize, onClick: () => this.showHide() }), h("label", { class: (this.iconPlacement == "right" ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headerSize ? "font--" + this.headerSize : ""), onClick: () => this.showHide(), title: this.label }, this.label)), !this.value ? h("slot", null) : null));
383
- }
384
- static get watchers() { return {
385
- "value": ["observeValue"]
386
- }; }
387
- };
388
- EzCollapsibleBox.style = ezCollapsibleBoxCss;
389
-
390
- class CSSVarsUtils {
391
- static applyVarsTextInput(host, child) {
392
- if (child) {
393
- CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--background-color');
394
- CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--border-color');
395
- CSSVarsUtils.applyIfExists(host, child, '--ez-text-input--height');
396
- }
397
- }
398
- static applyIfExists(host, element, varName) {
399
- const prop = getComputedStyle(host).getPropertyValue(varName);
400
- if (prop) {
401
- element.style.setProperty(varName, prop);
402
- }
403
- }
404
- }
405
-
406
- const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn-search--background-color:var(--text--primary, #626e82);--ez-combo-box__btn-search-disabled--background-color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-search-hover--background-color:var(--color--primary, #4e4e4e);--ez-combo-box__btn-options--background-color:var(--text--primary, #626e82);--ez-combo-box__btn-options-disabled--background-color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-options-hover--background-color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #919191);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));--ez-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>');--ez-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>');--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}.list-container{position:relative;width:100%}.options-list{box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-combo-box--background-color--xlight);padding:var(--ez-combo-box--space--small);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);scroll-behavior:smooth;max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));overflow:auto}.item{text-align:left;display:flex;justify-content:space-between;align-items:center;border-radius:var(--ez-combo-box--border-radius-small);padding:0 var(--ez-combo-box--space--small);list-style-type:none;min-height:var(--ez-combo-box__list-height)}.item--label{text-align:left;flex-basis:85%;flex-grow:1;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item--value{text-align:right;flex-basis:15%;flex-grow:0;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn-open-options{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-options:disabled{cursor:unset}.btn-open-options::after{content:'';display:flex;background-color:var(--ez-combo-box__btn-options--background-color);width:16px;height:16px;-webkit-mask-image:var(--ez-combo-box__drop-down-image);mask-image:var(--ez-combo-box__drop-down-image)}.btn-open-options:disabled:after{background-color:var(--ez-combo-box__btn-options-disabled--background-color)}.btn-open-options:enabled:hover::after{background-color:var(--ez-combo-box__btn-options-hover--background-color)}.btn-open-search{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-search:disabled{cursor:unset}.btn-open-search::after{content:'';display:flex;background-color:var(--ez-combo-box__btn-search--background-color);width:22px;height:22px;-webkit-mask-image:var(--ez-combo-box__search-image);mask-image:var(--ez-combo-box__search-image)}.btn-open-search:disabled:after{background-color:var(--ez-combo-box__btn-search-disabled--background-color)}.btn-open-search:enabled:hover::after{background-color:var(--ez-combo-box__btn-search-hover--background-color)}";
407
-
408
- let EzComboBox = class {
409
- constructor(hostRef) {
410
- registerInstance(this, hostRef);
411
- this.ezChange = createEvent(this, "ezChange", 7);
412
- /**
413
- * Deixa o campo disponível ou não para interação com usuário.
414
- */
415
- this.enabled = true;
416
- /**
417
- * Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
418
- */
419
- this.showSelectedValue = false;
420
- /**
421
- * Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
422
- */
423
- this.showOptionValue = false;
424
- /**
425
- * Remove a opção vazia da lista de opções
426
- */
427
- this.suppressEmptyOption = false;
428
- /**
429
- * Permite exibir a mensagem de erro.
430
- */
431
- this.canShowError = true;
432
- }
433
- internalUpdate() {
434
- if (this._inputElement) {
435
- this._inputElement.value = this.getText();
436
- }
437
- this.hideOptions();
438
- this._criteria = undefined;
439
- this._preSelection = undefined;
440
- this.updateVisibleOptions();
441
- }
442
- /**
443
- * Realiza o foco no componente de seleção
444
- */
445
- async setFocus() {
446
- this._inputElement.setFocus();
447
- }
448
- /**
449
- * Remove o foco no componente de seleção
450
- */
451
- async setBlur() {
452
- this._inputElement.setBlur();
453
- }
454
- getText() {
455
- let text = "";
456
- const selected = this.getSelectedOption();
457
- if (selected) {
458
- text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
459
- }
460
- return text;
461
- }
462
- getSelectedOption() {
463
- if (typeof this.value === "string" || this.value instanceof String) {
464
- return this._visibleOptions.find(o => o.value === this.value);
465
- }
466
- return this.value;
467
- }
468
- updateVisibleOptions() {
469
- let opts = this._source || [];
470
- if (!this.searchMode && this._criteria) {
471
- const upperCriteria = this._criteria.toUpperCase();
472
- opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
473
- }
474
- if (this.suppressEmptyOption) {
475
- this._visibleOptions = opts;
476
- }
477
- else {
478
- this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
479
- }
480
- }
481
- buildItem(opt, index) {
482
- return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, h("span", { class: "item--label", title: opt.label }, opt.label), this.showOptionValue ? h("span", { class: "item--value", title: opt.value }, opt.value) : undefined);
483
- }
484
- showOptions() {
485
- if (!this.enabled) {
486
- return;
487
- }
488
- //FIXME: Provavelmente isso fará com que o popup abra em uma
489
- //posição errada no futuro. Preferi fazer simples no começo,
490
- //porque não quis onerar o text input com essa funcionalidade...
491
- const top = (this.errorMessage || !this.canShowError) ? "0px" : "-17px";
492
- this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
493
- window.requestAnimationFrame(() => {
494
- this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
495
- });
496
- }
497
- hideOptions() {
498
- if (this._floatingID !== undefined) {
499
- FloatingManager.close(this._floatingID);
500
- }
501
- this._floatingID = undefined;
502
- }
503
- isOptionsVisible() {
504
- return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
505
- }
506
- nextOption() {
507
- if (this.searchMode && !this.isOptionsVisible()) {
508
- return;
509
- }
510
- this.showOptions();
511
- this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
512
- this.scrollToOption(this._visibleOptions[this._preSelection], true);
513
- }
514
- previousOption() {
515
- this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
516
- this.scrollToOption(this._visibleOptions[this._preSelection], false);
517
- }
518
- scrollToOption(opt, down) {
519
- window.requestAnimationFrame(() => {
520
- const liElem = this._optionsList.querySelector(`li#item_${opt.value}`);
521
- if (liElem) {
522
- const parent = liElem.parentElement;
523
- const parentRect = parent.getBoundingClientRect();
524
- const itemRect = liElem.getBoundingClientRect();
525
- if (down && itemRect.bottom > parentRect.bottom) {
526
- parent.scrollTop = itemRect.top;
527
- }
528
- else if (!down && itemRect.top < parentRect.top) {
529
- parent.scrollTop = 0;
530
- }
531
- }
532
- });
533
- }
534
- selectCurrentOption() {
535
- if (this._preSelection !== undefined) {
536
- this.selectOption(this._visibleOptions[this._preSelection]);
537
- this._preSelection = undefined;
538
- }
539
- }
540
- selectOption(opt) {
541
- const currentOpt = this.getSelectedOption();
542
- if (currentOpt !== opt) {
543
- const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
544
- this.value = adjustedOpt;
545
- this.errorMessage = "";
546
- this.ezChange.emit(adjustedOpt);
547
- }
548
- else {
549
- this.internalUpdate();
550
- }
551
- }
552
- updateSource(source) {
553
- if (source instanceof Promise) {
554
- source.then(result => this.updateSource(result));
555
- this.updateVisibleOptions();
556
- }
557
- else {
558
- this._source = source;
559
- this.updateVisibleOptions();
560
- }
561
- }
562
- loadOptions(mode, argument = "") {
563
- this._criteria = argument;
564
- if (this.optionLoader) {
565
- this.updateSource(this.optionLoader({ mode, argument }));
566
- }
567
- else {
568
- this.updateSource(this.options);
569
- }
570
- }
571
- cancelPreselection() {
572
- if (!this._inputElement.value && this.value) {
573
- this.selectOption(undefined);
574
- }
575
- else {
576
- this.internalUpdate();
577
- }
578
- }
579
- //---------------------------------------------
580
- // Lifecycle web component
581
- //---------------------------------------------
582
- componentWillLoad() {
583
- if (this.options === undefined) {
584
- this.options = [];
585
- const optionsTags = this.el.querySelectorAll("option");
586
- if (optionsTags) {
587
- optionsTags.forEach(e => {
588
- let label = e.innerText;
589
- let value = e.getAttribute("value");
590
- if (!value) {
591
- value = label;
592
- }
593
- this.options.push({ label, value });
594
- e.hidden = true;
595
- });
596
- }
597
- }
598
- if (this.searchMode) {
599
- this.updateSource([]);
600
- }
601
- else {
602
- this.loadOptions("PRELOAD");
603
- }
604
- }
605
- componentDidRender() {
606
- if (this._floatingID === undefined) {
607
- this._optionsList.remove();
608
- }
609
- }
610
- componentDidLoad() {
611
- CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
612
- }
613
- //---------------------------------------------
614
- // Event handlers
615
- //---------------------------------------------
616
- onTextInputChangeHandler(event) {
617
- if (!this._criteria) {
618
- this._inputElement.value = event.data;
619
- }
620
- const argument = event.target.value;
621
- this._criteria = argument;
622
- if (this._criteria) {
623
- if (this.searchMode) {
624
- if (this._changeDeboucingTimeout) {
625
- window.clearTimeout(this._changeDeboucingTimeout);
626
- }
627
- this._changeDeboucingTimeout = window.setTimeout(() => {
628
- this.loadOptions("PREDICTIVE", argument);
629
- }, 200);
630
- }
631
- else {
632
- this.updateVisibleOptions();
633
- }
634
- this.showOptions();
635
- }
636
- }
637
- onTextInputClickHandler() {
638
- if (!this.searchMode) {
639
- this.showOptions();
640
- }
641
- }
642
- keyDownHandler(event) {
643
- switch (event.key) {
644
- case "ArrowDown":
645
- this.nextOption();
646
- break;
647
- case "ArrowUp":
648
- this.previousOption();
649
- break;
650
- case "Enter":
651
- this.selectCurrentOption();
652
- break;
653
- case "Escape":
654
- this.cancelPreselection();
655
- break;
656
- }
657
- event.stopPropagation();
658
- }
659
- onTextInputFocusOutHandler() {
660
- this.cancelPreselection();
661
- }
662
- render() {
663
- return (h(Host, null, h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage }, this.searchMode ?
664
- h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
665
- :
666
- h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
667
- }
668
- get el() { return getElement(this); }
669
- static get watchers() { return {
670
- "value": ["internalUpdate"]
671
- }; }
672
- };
673
- EzComboBox.style = ezComboBoxCss;
674
-
675
- const ezDateInputCss = ":host{display:block;width:100%;--ez-date-input__input--background-color:var(--background--medium, #e0e0e0);--ez-date-input__input--border-color:var(--ez-date-input__input--background-color);--ez-date-input__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--ez-date-input__calendar-image);mask-image:var(--ez-date-input__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}ez-text-input{--text-input__input--background-color:var(--ez-date-input__input--background-color, #FFFFFF);--text-input__input--border-color:var(--ez-date-input__input--border-color, #DCE0E8)}";
676
-
677
- let EzDateInput = class {
678
- constructor(hostRef) {
679
- registerInstance(this, hostRef);
680
- this.ezChange = createEvent(this, "ezChange", 7);
681
- /**
682
- * Deixa o campo disponível ou não para uso.
683
- */
684
- this.enabled = true;
685
- }
686
- setLabel() {
687
- this._textInput.label = this.label;
688
- }
689
- setErrorMessage() {
690
- this._textInput.errorMessage = this.errorMessage;
691
- }
692
- applyValueToInput() {
693
- if (this._textInput) {
694
- this._textInput.value = this.getTextValue(this.value);
695
- }
696
- }
697
- /**
698
- * Realiza o foco no componente de data
699
- */
700
- async setFocus() {
701
- this._textInput.setFocus();
702
- }
703
- /**
704
- * Remove o foco no componente de data
705
- */
706
- async setBlur() {
707
- this._textInput.setBlur();
708
- }
709
- changeValue(newValue) {
710
- var _a;
711
- newValue = newValue instanceof Date ? DateUtils.clearTime(newValue) : null;
712
- this.value = this.value instanceof Date ? DateUtils.clearTime(this.value) : null;
713
- this._textInput.errorMessage = "";
714
- if ((newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString())) {
715
- this.value = newValue;
716
- this.ezChange.emit(this.value);
717
- }
718
- }
719
- showCalendar() {
720
- this.parseDate();
721
- this._calendar.value = this.value;
722
- //FIXME: Provavelmente isso fará com que o popup abra em uma
723
- //posição errada no futuro. Preferi fazer simples no começo,
724
- //porque não quis onerar o text input com essa funcionalidade...
725
- const top = this._textInput.errorMessage ? 0 : -17;
726
- this._calendar.fitVertical(top, this._elem.clientHeight);
727
- }
728
- hideCalendar() {
729
- this.changeValue(this._calendar.value);
730
- this._calendar.hide();
731
- }
732
- parseDate() {
733
- const strValue = this._textInput.value;
734
- const parsedDate = DateUtils.strToDate(strValue);
735
- if (parsedDate || !strValue) {
736
- if (this.value === parsedDate) {
737
- this.changeValue(this.value);
738
- }
739
- else {
740
- this.changeValue(parsedDate);
741
- }
742
- }
743
- else {
744
- this._textInput.errorMessage = "O valor digitado não é uma data válida";
745
- }
746
- }
747
- getTextValue(d) {
748
- return d ? new Intl.DateTimeFormat("pt-BR").format(d) : null;
749
- }
750
- componentDidLoad() {
751
- CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
752
- }
753
- render() {
754
- return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
755
- if (event.key === "H" || event.key === "h")
756
- this.changeValue(new Date());
757
- }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
758
- }
759
- get _elem() { return getElement(this); }
760
- static get watchers() { return {
761
- "label": ["setLabel"],
762
- "errorMessage": ["setErrorMessage"],
763
- "value": ["applyValueToInput"]
764
- }; }
765
- };
766
- EzDateInput.style = ezDateInputCss;
767
-
768
- const ezDateTimeInputCss = ":host{display:block;width:100%;--ez-date-input__input--background-color:var(--background--medium, #e0e0e0);--ez-date-input__input--border-color:var(--ez-date-input__input--background-color);--ez-date-input__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--ez-date-input__calendar-image);mask-image:var(--ez-date-input__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}ez-text-input{--text-input__input--background-color:var(--ez-date-input__input--background-color, #FFFFFF);--text-input__input--border-color:var(--ez-date-input__input--border-color, #DCE0E8)}";
769
-
770
- let EzDateTimeInput = class {
771
- constructor(hostRef) {
772
- registerInstance(this, hostRef);
773
- this.ezChange = createEvent(this, "ezChange", 7);
774
- /**
775
- * Deixa o campo disponível ou não para uso.
776
- */
777
- this.enabled = true;
778
- /**
779
- * Exibe ou não os segundos no input
780
- */
781
- this.showSeconds = false;
782
- }
783
- setLabel() {
784
- this._textInput.label = this.label;
785
- }
786
- setErrorMessage() {
787
- this._textInput.errorMessage = this.errorMessage;
788
- }
789
- applyValueToInput() {
790
- if (this._textInput) {
791
- this._textInput.value = this.getTextValue(this.value);
792
- }
793
- }
794
- /**
795
- * Realiza o foco no componente de datetime
796
- */
797
- async setFocus() {
798
- this._textInput.setFocus();
799
- }
800
- /**
801
- * Remove o foco no componente de datetime
802
- */
803
- async setBlur() {
804
- this._textInput.setBlur();
805
- }
806
- onChangeKeyDown(ev) {
807
- const input = this._textInput.shadowRoot.querySelector('input');
808
- if (ev.key === "H" || ev.key === "h") {
809
- this.changeValue(new Date());
810
- }
811
- else if (ev.shiftKey && ev.key === "Tab") {
812
- if (input.selectionStart > 0) {
813
- let selectIni = input.value.lastIndexOf(" ", input.selectionStart);
814
- if (selectIni !== -1) {
815
- input.setSelectionRange(0, selectIni);
816
- ev.preventDefault();
817
- }
818
- }
819
- }
820
- else if (ev.key === "Tab") {
821
- if (input.value.length !== input.selectionEnd) {
822
- let selectIni = input.value.indexOf(" ", input.selectionEnd);
823
- selectIni = selectIni === -1 ? input.selectionEnd : selectIni + 1;
824
- input.setSelectionRange(selectIni, input.value.length);
825
- ev.preventDefault();
826
- }
827
- }
828
- }
829
- onFocused() {
830
- const input = this._textInput.shadowRoot.querySelector('input');
831
- if (input.selectionStart !== input.selectionEnd) {
832
- let selectIni = input.value.indexOf(" ", input.selectionStart);
833
- selectIni = selectIni === -1 ? input.value.length : selectIni;
834
- input.setSelectionRange(0, selectIni);
835
- }
836
- }
837
- onClicked() {
838
- const input = this._textInput.shadowRoot.querySelector('input');
839
- let selectIni = input.value.lastIndexOf(" ", input.selectionEnd);
840
- selectIni = selectIni === -1 ? 0 : selectIni + 1;
841
- selectIni = selectIni > input.selectionEnd ? 0 : selectIni;
842
- let selectFin = selectIni === 0 ? input.value.indexOf(" ") : input.value.length;
843
- input.setSelectionRange(selectIni, selectFin);
844
- }
845
- changeValue(newValue) {
846
- var _a;
847
- this._textInput.errorMessage = "";
848
- if ((newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString())) {
849
- this.value = newValue;
850
- this.ezChange.emit(this.value);
851
- }
852
- }
853
- showCalendar() {
854
- const top = this._textInput.errorMessage ? 0 : -17;
855
- this._calendar.fitVertical(top, this._elem.clientHeight);
856
- this._calendar.style.visibility = 'inherit';
857
- }
858
- parseDate() {
859
- const strValue = this._textInput.value;
860
- const partsDateTime = (strValue && strValue.length > 0) ? strValue.split(" ") : [];
861
- const onlyDate = partsDateTime.length > 0 ? partsDateTime[0] : strValue;
862
- const onlyTime = partsDateTime[1] ? partsDateTime[1] : "";
863
- const parsedTime = TimeFormatter.prepareValue(onlyTime, this.showSeconds);
864
- const strDateTime = onlyDate + (parsedTime && " " + parsedTime);
865
- const parsedDate = DateUtils.strToDate(strDateTime);
866
- if (parsedDate || !strValue) {
867
- if (this.value === parsedDate) {
868
- this.changeValue(this.value);
869
- }
870
- else {
871
- this.changeValue(parsedDate);
872
- }
873
- }
874
- else {
875
- this._textInput.errorMessage = "O valor digitado não é uma data válida";
876
- }
877
- }
878
- getTextValue(d) {
879
- const options = {
880
- year: 'numeric', month: 'numeric', day: 'numeric',
881
- hour: 'numeric', minute: 'numeric'
882
- };
883
- const optionsSecond = {
884
- year: 'numeric', month: 'numeric', day: 'numeric',
885
- hour: 'numeric', minute: 'numeric', second: 'numeric'
886
- };
887
- return d ? (new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(d)) : null;
888
- }
889
- componentDidLoad() {
890
- CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
891
- }
892
- render() {
893
- return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => { this.onChangeKeyDown(event); }, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, onFocus: () => this.onFocused(), onClick: () => this.onClicked() }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
894
- }
895
- get _elem() { return getElement(this); }
896
- static get watchers() { return {
897
- "label": ["setLabel"],
898
- "errorMessage": ["setErrorMessage"],
899
- "value": ["applyValueToInput"]
900
- }; }
901
- };
902
- EzDateTimeInput.style = ezDateTimeInputCss;
903
-
904
- const buildTextArea = ({ name, label, readOnly }) => {
905
- return (h("div", { class: "col col--sd-12 padding-horizontal--small", key: name },
906
- h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
907
- };
908
-
909
- const buildTextInput = ({ name, label }) => {
910
- return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
911
- h("ez-text-input", { label: label, "data-field-name": name, key: name })));
912
- };
913
-
914
- const buildSwitch = (fieldConfig) => {
915
- return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
916
- };
917
- const buildCheckBox = (fieldConfig) => {
918
- return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
919
- };
920
- function buildField$1(fieldName, fieldLabel, readOnly, switchMode = false) {
921
- return (h("div", { class: "col col--sd-12 col--tb-3 align--middle padding-horizontal--small padding-bottom--large" },
922
- h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
923
- }
924
-
925
- const buildComboBox = ({ name, label, readOnly }, properties) => {
926
- const prop = properties === null || properties === void 0 ? void 0 : properties.options;
927
- let options;
928
- if (typeof prop === "string") {
929
- const parsed = JSON.parse(prop);
930
- options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
931
- }
932
- else {
933
- options = prop;
934
- }
935
- return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
936
- h("ez-combo-box", { enabled: !readOnly, label: label, "data-field-name": name, key: name, options: options })));
937
- };
938
-
939
- const buildSearch = ({ name, label, readOnly }) => {
940
- return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
941
- h("ez-search", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
942
- };
943
-
944
- const buildFile = ({ name, label, readOnly }) => {
945
- return (h("div", { class: "col col--sd-12 padding-horizontal--small" },
946
- h("ez-upload", { enabled: !readOnly, label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
947
- };
948
-
949
- const buildDate = ({ name, label, readOnly }) => {
950
- return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
951
- h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
952
- };
953
- const buildTime = ({ name, label }) => {
954
- return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
955
- h("ez-time-input", { label: label, "data-field-name": name, key: name })));
956
- };
957
- const buildTimeDate = ({ name, label }) => {
958
- return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
959
- h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
960
- };
961
-
962
- const buildDecimal = ({ name, label, readOnly }, properties) => {
963
- const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
964
- const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
965
- return buildNumeric(name, label, readOnly, precision, prettyPrecision);
966
- };
967
- const buildInteger = ({ name, label, readOnly }) => {
968
- return buildNumeric(name, label, readOnly, 0, 0);
969
- };
970
- function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
971
- return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
972
- h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
973
- }
974
-
975
- const uiBuilders = new Map();
976
- uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
977
- uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
978
- uiBuilders.set(UserInterface.SWITCH, buildSwitch);
979
- uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
980
- uiBuilders.set(UserInterface.SEARCH, buildSearch);
981
- uiBuilders.set(UserInterface.FILE, buildFile);
982
- uiBuilders.set(UserInterface.DATE, buildDate);
983
- uiBuilders.set(UserInterface.TIME, buildTime);
984
- uiBuilders.set(UserInterface.DATETIME, buildTimeDate);
985
- uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);
986
- uiBuilders.set(UserInterface.INTEGERNUMBER, buildInteger);
987
- const buildField = (field) => {
988
- const descriptor = field.descriptor;
989
- const config = Object.assign({}, field.config);
990
- let builder;
991
- let props;
992
- if (descriptor) {
993
- if (!config.label) {
994
- config.label = descriptor.label;
995
- }
996
- if (!config.name) {
997
- config.name = descriptor.name;
998
- }
999
- if (config.required === undefined) {
1000
- config.required = descriptor.required;
1001
- }
1002
- if (config.readOnly === undefined) {
1003
- config.readOnly = descriptor.readOnly;
1004
- }
1005
- props = descriptor.properties;
1006
- builder = uiBuilders.get(descriptor.userInterface);
1007
- }
1008
- if (config.required) {
1009
- config.label = `* ${config.label} (obrigatório)`;
1010
- }
1011
- if (!builder) {
1012
- builder = buildTextInput;
1013
- }
1014
- return builder(config, props);
1015
- };
1016
-
1017
- const FormItem = ({ source }) => {
1018
- if ("items" in source) {
1019
- const fieldSet = source;
1020
- return h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
1021
- }
1022
- else {
1023
- return buildField(source);
1024
- }
1025
- };
1026
-
1027
- const FormSheet = ({ store, source }) => {
1028
- return (h("div", { class: "box__container" },
1029
- h("div", { class: "row padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
1030
- };
1031
-
1032
- class FormMetadata {
1033
- constructor() {
1034
- this._sheets = new Map();
1035
- this._requiredFields = [];
1036
- this._cleanOnCopyFields = [];
1037
- }
1038
- getSheet(name) {
1039
- return this._sheets.get(name);
1040
- }
1041
- getAllSheets() {
1042
- return this._sheets;
1043
- }
1044
- addSheet(sheet) {
1045
- this._sheets.set(sheet.name, sheet);
1046
- this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
1047
- this._cleanOnCopyFields = this._cleanOnCopyFields.concat(sheet.cleanOnCopyFields);
1048
- }
1049
- getRequiredFields() {
1050
- return this._requiredFields;
1051
- }
1052
- getCleanOnCopyFields() {
1053
- return this._cleanOnCopyFields;
1054
- }
1055
- }
1056
- const buildFromDataUnit = (dataUnit) => {
1057
- var _a;
1058
- const unitMD = dataUnit.metadata;
1059
- const metadata = new FormMetadata();
1060
- if (unitMD) {
1061
- const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
1062
- metadata.addSheet({
1063
- label: unitMD.label,
1064
- name: unitMD.name,
1065
- items: visibleFields.map(descriptor => { return { descriptor }; }),
1066
- requiredFields: visibleFields
1067
- .filter(descriptor => descriptor.required)
1068
- .map(descriptor => descriptor.name),
1069
- cleanOnCopyFields: visibleFields
1070
- .filter(descriptor => { var _a; return (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy; })
1071
- .map(descriptor => descriptor.name)
1072
- });
1073
- }
1074
- return metadata;
1075
- };
1076
- function getTabConfig(tab, sheets) {
1077
- const tabConfig = (typeof tab === "string" ? Array.from(sheets.keys()).find(t => t.label === tab) : tab);
1078
- return tabConfig || { label: tab, visible: true };
1079
- }
1080
- const buildFromConfig = (fields, dataUnit) => {
1081
- const sheets = new Map();
1082
- const requiredFields = [];
1083
- const cleanOnCopyFields = [];
1084
- fields.forEach(config => {
1085
- var _a;
1086
- if (config.visible !== false) {
1087
- const tabConfig = getTabConfig(config.tab || "Geral", sheets);
1088
- const descriptor = dataUnit.getField(config.name);
1089
- if (descriptor && tabConfig.visible) {
1090
- if (!sheets.has(tabConfig)) {
1091
- sheets.set(tabConfig, new Map());
1092
- }
1093
- const tabItens = sheets.get(tabConfig);
1094
- const isRequired = config.required === undefined ? descriptor.required : config.required;
1095
- if (isRequired) {
1096
- requiredFields.push(config.name);
1097
- }
1098
- const clearOnCopy = config.cleanOnCopy === undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : config.cleanOnCopy;
1099
- if (clearOnCopy) {
1100
- cleanOnCopyFields.push(config.name);
1101
- }
1102
- const fieldMD = { config, descriptor };
1103
- const group = config.group;
1104
- if (group) {
1105
- const key = `group::${group}`;
1106
- if (!tabItens.has(key)) {
1107
- tabItens.set(key, { label: group, items: [fieldMD] });
1108
- }
1109
- else {
1110
- tabItens.get(key).items.push(fieldMD);
1111
- }
1112
- }
1113
- else {
1114
- tabItens.set(config.name, fieldMD);
1115
- }
1116
- }
1117
- }
1118
- });
1119
- const metadata = new FormMetadata();
1120
- Array.from(sheets.entries())
1121
- .sort((a, b) => (a[0].order || 10000) - (b[0].order || 10000))
1122
- .forEach(([key, value]) => {
1123
- metadata.addSheet({
1124
- label: key.label,
1125
- name: key.label,
1126
- items: Array.from(value.values()),
1127
- requiredFields,
1128
- cleanOnCopyFields
1129
- });
1130
- });
1131
- return metadata;
1132
- };
1133
-
1134
- /**
1135
- * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
1136
- *
1137
- * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
1138
- * during build.
1139
- * @param {number} code
1140
- */
1141
- function formatProdErrorMessage(code) {
1142
- return "Minified Redux error #" + code + "; visit https://redux.js.org/Errors?code=" + code + " for the full message or " + 'use the non-minified dev environment for full errors. ';
1143
- }
1144
-
1145
- // Inlined version of the `symbol-observable` polyfill
1146
- var $$observable = (function () {
1147
- return typeof Symbol === 'function' && Symbol.observable || '@@observable';
1148
- })();
1149
-
1150
- /**
1151
- * These are private action types reserved by Redux.
1152
- * For any unknown actions, you must return the current state.
1153
- * If the current state is undefined, you must return the initial state.
1154
- * Do not reference these action types directly in your code.
1155
- */
1156
- var randomString = function randomString() {
1157
- return Math.random().toString(36).substring(7).split('').join('.');
1158
- };
1159
-
1160
- var ActionTypes = {
1161
- INIT: "@@redux/INIT" + randomString(),
1162
- REPLACE: "@@redux/REPLACE" + randomString(),
1163
- PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
1164
- return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
1165
- }
1166
- };
1167
-
1168
- /**
1169
- * @param {any} obj The object to inspect.
1170
- * @returns {boolean} True if the argument appears to be a plain object.
1171
- */
1172
- function isPlainObject(obj) {
1173
- if (typeof obj !== 'object' || obj === null) return false;
1174
- var proto = obj;
1175
-
1176
- while (Object.getPrototypeOf(proto) !== null) {
1177
- proto = Object.getPrototypeOf(proto);
1178
- }
1179
-
1180
- return Object.getPrototypeOf(obj) === proto;
1181
- }
1182
-
1183
- /**
1184
- * Creates a Redux store that holds the state tree.
1185
- * The only way to change the data in the store is to call `dispatch()` on it.
1186
- *
1187
- * There should only be a single store in your app. To specify how different
1188
- * parts of the state tree respond to actions, you may combine several reducers
1189
- * into a single reducer function by using `combineReducers`.
1190
- *
1191
- * @param {Function} reducer A function that returns the next state tree, given
1192
- * the current state tree and the action to handle.
1193
- *
1194
- * @param {any} [preloadedState] The initial state. You may optionally specify it
1195
- * to hydrate the state from the server in universal apps, or to restore a
1196
- * previously serialized user session.
1197
- * If you use `combineReducers` to produce the root reducer function, this must be
1198
- * an object with the same shape as `combineReducers` keys.
1199
- *
1200
- * @param {Function} [enhancer] The store enhancer. You may optionally specify it
1201
- * to enhance the store with third-party capabilities such as middleware,
1202
- * time travel, persistence, etc. The only store enhancer that ships with Redux
1203
- * is `applyMiddleware()`.
1204
- *
1205
- * @returns {Store} A Redux store that lets you read the state, dispatch actions
1206
- * and subscribe to changes.
1207
- */
1208
-
1209
- function createStore(reducer, preloadedState, enhancer) {
1210
- var _ref2;
1211
-
1212
- if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
1213
- throw new Error(formatProdErrorMessage(0) );
1214
- }
1215
-
1216
- if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
1217
- enhancer = preloadedState;
1218
- preloadedState = undefined;
1219
- }
1220
-
1221
- if (typeof enhancer !== 'undefined') {
1222
- if (typeof enhancer !== 'function') {
1223
- throw new Error(formatProdErrorMessage(1) );
1224
- }
1225
-
1226
- return enhancer(createStore)(reducer, preloadedState);
1227
- }
1228
-
1229
- if (typeof reducer !== 'function') {
1230
- throw new Error(formatProdErrorMessage(2) );
1231
- }
1232
-
1233
- var currentReducer = reducer;
1234
- var currentState = preloadedState;
1235
- var currentListeners = [];
1236
- var nextListeners = currentListeners;
1237
- var isDispatching = false;
1238
- /**
1239
- * This makes a shallow copy of currentListeners so we can use
1240
- * nextListeners as a temporary list while dispatching.
1241
- *
1242
- * This prevents any bugs around consumers calling
1243
- * subscribe/unsubscribe in the middle of a dispatch.
1244
- */
1245
-
1246
- function ensureCanMutateNextListeners() {
1247
- if (nextListeners === currentListeners) {
1248
- nextListeners = currentListeners.slice();
1249
- }
1250
- }
1251
- /**
1252
- * Reads the state tree managed by the store.
1253
- *
1254
- * @returns {any} The current state tree of your application.
1255
- */
1256
-
1257
-
1258
- function getState() {
1259
- if (isDispatching) {
1260
- throw new Error(formatProdErrorMessage(3) );
1261
- }
1262
-
1263
- return currentState;
1264
- }
1265
- /**
1266
- * Adds a change listener. It will be called any time an action is dispatched,
1267
- * and some part of the state tree may potentially have changed. You may then
1268
- * call `getState()` to read the current state tree inside the callback.
1269
- *
1270
- * You may call `dispatch()` from a change listener, with the following
1271
- * caveats:
1272
- *
1273
- * 1. The subscriptions are snapshotted just before every `dispatch()` call.
1274
- * If you subscribe or unsubscribe while the listeners are being invoked, this
1275
- * will not have any effect on the `dispatch()` that is currently in progress.
1276
- * However, the next `dispatch()` call, whether nested or not, will use a more
1277
- * recent snapshot of the subscription list.
1278
- *
1279
- * 2. The listener should not expect to see all state changes, as the state
1280
- * might have been updated multiple times during a nested `dispatch()` before
1281
- * the listener is called. It is, however, guaranteed that all subscribers
1282
- * registered before the `dispatch()` started will be called with the latest
1283
- * state by the time it exits.
1284
- *
1285
- * @param {Function} listener A callback to be invoked on every dispatch.
1286
- * @returns {Function} A function to remove this change listener.
1287
- */
1288
-
1289
-
1290
- function subscribe(listener) {
1291
- if (typeof listener !== 'function') {
1292
- throw new Error(formatProdErrorMessage(4) );
1293
- }
1294
-
1295
- if (isDispatching) {
1296
- throw new Error(formatProdErrorMessage(5) );
1297
- }
1298
-
1299
- var isSubscribed = true;
1300
- ensureCanMutateNextListeners();
1301
- nextListeners.push(listener);
1302
- return function unsubscribe() {
1303
- if (!isSubscribed) {
1304
- return;
1305
- }
1306
-
1307
- if (isDispatching) {
1308
- throw new Error(formatProdErrorMessage(6) );
1309
- }
1310
-
1311
- isSubscribed = false;
1312
- ensureCanMutateNextListeners();
1313
- var index = nextListeners.indexOf(listener);
1314
- nextListeners.splice(index, 1);
1315
- currentListeners = null;
1316
- };
1317
- }
1318
- /**
1319
- * Dispatches an action. It is the only way to trigger a state change.
1320
- *
1321
- * The `reducer` function, used to create the store, will be called with the
1322
- * current state tree and the given `action`. Its return value will
1323
- * be considered the **next** state of the tree, and the change listeners
1324
- * will be notified.
1325
- *
1326
- * The base implementation only supports plain object actions. If you want to
1327
- * dispatch a Promise, an Observable, a thunk, or something else, you need to
1328
- * wrap your store creating function into the corresponding middleware. For
1329
- * example, see the documentation for the `redux-thunk` package. Even the
1330
- * middleware will eventually dispatch plain object actions using this method.
1331
- *
1332
- * @param {Object} action A plain object representing “what changed”. It is
1333
- * a good idea to keep actions serializable so you can record and replay user
1334
- * sessions, or use the time travelling `redux-devtools`. An action must have
1335
- * a `type` property which may not be `undefined`. It is a good idea to use
1336
- * string constants for action types.
1337
- *
1338
- * @returns {Object} For convenience, the same action object you dispatched.
1339
- *
1340
- * Note that, if you use a custom middleware, it may wrap `dispatch()` to
1341
- * return something else (for example, a Promise you can await).
1342
- */
1343
-
1344
-
1345
- function dispatch(action) {
1346
- if (!isPlainObject(action)) {
1347
- throw new Error(formatProdErrorMessage(7) );
1348
- }
1349
-
1350
- if (typeof action.type === 'undefined') {
1351
- throw new Error(formatProdErrorMessage(8) );
1352
- }
1353
-
1354
- if (isDispatching) {
1355
- throw new Error(formatProdErrorMessage(9) );
1356
- }
1357
-
1358
- try {
1359
- isDispatching = true;
1360
- currentState = currentReducer(currentState, action);
1361
- } finally {
1362
- isDispatching = false;
1363
- }
1364
-
1365
- var listeners = currentListeners = nextListeners;
1366
-
1367
- for (var i = 0; i < listeners.length; i++) {
1368
- var listener = listeners[i];
1369
- listener();
1370
- }
1371
-
1372
- return action;
1373
- }
1374
- /**
1375
- * Replaces the reducer currently used by the store to calculate the state.
1376
- *
1377
- * You might need this if your app implements code splitting and you want to
1378
- * load some of the reducers dynamically. You might also need this if you
1379
- * implement a hot reloading mechanism for Redux.
1380
- *
1381
- * @param {Function} nextReducer The reducer for the store to use instead.
1382
- * @returns {void}
1383
- */
1384
-
1385
-
1386
- function replaceReducer(nextReducer) {
1387
- if (typeof nextReducer !== 'function') {
1388
- throw new Error(formatProdErrorMessage(10) );
1389
- }
1390
-
1391
- currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.
1392
- // Any reducers that existed in both the new and old rootReducer
1393
- // will receive the previous state. This effectively populates
1394
- // the new state tree with any relevant data from the old one.
1395
-
1396
- dispatch({
1397
- type: ActionTypes.REPLACE
1398
- });
1399
- }
1400
- /**
1401
- * Interoperability point for observable/reactive libraries.
1402
- * @returns {observable} A minimal observable of state changes.
1403
- * For more information, see the observable proposal:
1404
- * https://github.com/tc39/proposal-observable
1405
- */
1406
-
1407
-
1408
- function observable() {
1409
- var _ref;
1410
-
1411
- var outerSubscribe = subscribe;
1412
- return _ref = {
1413
- /**
1414
- * The minimal observable subscription method.
1415
- * @param {Object} observer Any object that can be used as an observer.
1416
- * The observer object should have a `next` method.
1417
- * @returns {subscription} An object with an `unsubscribe` method that can
1418
- * be used to unsubscribe the observable from the store, and prevent further
1419
- * emission of values from the observable.
1420
- */
1421
- subscribe: function subscribe(observer) {
1422
- if (typeof observer !== 'object' || observer === null) {
1423
- throw new Error(formatProdErrorMessage(11) );
1424
- }
1425
-
1426
- function observeState() {
1427
- if (observer.next) {
1428
- observer.next(getState());
1429
- }
1430
- }
1431
-
1432
- observeState();
1433
- var unsubscribe = outerSubscribe(observeState);
1434
- return {
1435
- unsubscribe: unsubscribe
1436
- };
1437
- }
1438
- }, _ref[$$observable] = function () {
1439
- return this;
1440
- }, _ref;
1441
- } // When a store is created, an "INIT" action is dispatched so that every
1442
- // reducer returns their initial state. This effectively populates
1443
- // the initial state tree.
1444
-
1445
-
1446
- dispatch({
1447
- type: ActionTypes.INIT
1448
- });
1449
- return _ref2 = {
1450
- dispatch: dispatch,
1451
- subscribe: subscribe,
1452
- getState: getState,
1453
- replaceReducer: replaceReducer
1454
- }, _ref2[$$observable] = observable, _ref2;
1455
- }
1456
-
1457
- const inicialState = {};
1458
- /////////////////////////////// REDUCERS ///////////////////////////////
1459
- function formReducer(state = inicialState, action) {
1460
- switch (action.type) {
1461
- case FormActions.METADATA_LOADED:
1462
- return Object.assign(Object.assign({}, state), { formMetadata: action.payload });
1463
- case FormActions.CHANGE_TAB:
1464
- return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
1465
- default:
1466
- return state;
1467
- }
1468
- }
1469
- /////////////////////////////// ACTION CREATORS ///////////////////////////////
1470
- function loadMetadata(formMetadata) {
1471
- return {
1472
- type: FormActions.METADATA_LOADED,
1473
- payload: formMetadata
1474
- };
1475
- }
1476
- function changeTab(currentSheet) {
1477
- return {
1478
- type: FormActions.CHANGE_TAB,
1479
- payload: currentSheet.tabKey
1480
- };
1481
- }
1482
- /////////////////////////////// SELECTORS ///////////////////////////////
1483
- function selectFormMetadata(state) {
1484
- return state.formMetadata;
1485
- }
1486
- function selectCurrentSheet(state) {
1487
- return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
1488
- }
1489
- /////////////////////////////// TYPES ///////////////////////////////
1490
- var FormActions;
1491
- (function (FormActions) {
1492
- FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
1493
- FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
1494
- })(FormActions || (FormActions = {}));
1495
-
1496
- class DataBinder {
1497
- constructor(dataUnit) {
1498
- this._fields = new Map();
1499
- this._dataUnit = dataUnit;
1500
- this._dataUnit.subscribe(_action => {
1501
- var _a;
1502
- (_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
1503
- this.updateValue(field.fieldName, field.field);
1504
- });
1505
- });
1506
- }
1507
- bind(fields) {
1508
- fields.forEach(fieldElement => {
1509
- const fieldName = fieldElement.dataset.fieldName;
1510
- this.updateBind(fieldName, fieldElement);
1511
- this.updateValue(fieldName, fieldElement);
1512
- });
1513
- }
1514
- updateValue(fieldName, field) {
1515
- field["value"] = this._dataUnit.getFieldValue(fieldName);
1516
- }
1517
- updateBind(fieldName, field) {
1518
- const oldBind = this._fields.get(fieldName);
1519
- if (oldBind) {
1520
- oldBind.destroy();
1521
- }
1522
- this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
1523
- this.bindSearchOptionsLoader(fieldName, field);
1524
- }
1525
- setFieldValue(fieldName, newValue) {
1526
- if (this._dataUnit.records.length === 0) {
1527
- this._dataUnit.addRecord();
1528
- }
1529
- this._dataUnit.setFieldValue(fieldName, newValue);
1530
- }
1531
- bindSearchOptionsLoader(fieldName, field) {
1532
- if (field.nodeName === "EZ-SEARCH" && field["optionLoader"] === undefined) {
1533
- const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
1534
- if (loader) {
1535
- field["optionLoader"] = (arg) => {
1536
- return loader(arg, fieldName, this._dataUnit);
1537
- };
1538
- }
1539
- }
1540
- }
1541
- }
1542
- class Bind {
1543
- destroy() {
1544
- this.field.removeEventListener(this.eventName, this.eventListener);
1545
- }
1546
- static create(fieldName, field, callback) {
1547
- const b = new Bind();
1548
- b.fieldName = fieldName;
1549
- b.field = field;
1550
- //FIXME: Verificar se o field é um EzField
1551
- b.eventListener = (evt) => { callback(fieldName, evt.detail); };
1552
- b.eventName = "ezChange";
1553
- b.field.addEventListener(b.eventName, b.eventListener);
1554
- return b;
1555
- }
1556
- }
1557
-
1558
- class ApplicationUtils {
1559
- static async showDialog(title, message, icon = null, confirm, critical = false) {
1560
- return new Promise(resolve => {
1561
- let dialog = document.querySelector("ez-dialog");
1562
- if (!dialog) {
1563
- dialog = document.createElement("ez-dialog");
1564
- window.document.body.appendChild(dialog);
1565
- }
1566
- dialog.show(title, message, critical, confirm, icon).then(ok => resolve(ok));
1567
- });
1568
- }
1569
- static async alert(title, message, icon = null) {
1570
- return ApplicationUtils.showDialog(title, message, icon, false, false);
1571
- }
1572
- static async error(title, message, icon = null) {
1573
- return ApplicationUtils.showDialog(title, message, icon, false, true);
1574
- }
1575
- static async confirm(title, message, icon = null, critical = false) {
1576
- return ApplicationUtils.showDialog(title, message, icon, true, critical);
1577
- }
1578
- static async info(message, options = ApplicationUtils.defaultMessageOptions) {
1579
- let toast = document.querySelector("ez-toast");
1580
- if (!toast) {
1581
- toast = document.createElement("ez-toast");
1582
- window.document.body.appendChild(toast);
1583
- }
1584
- toast.canClose = options.canClose;
1585
- toast.message = message;
1586
- toast.fadeTime = 4000;
1587
- toast.show();
1588
- }
1589
- }
1590
- ApplicationUtils.defaultMessageOptions = {
1591
- canClose: true
1592
- };
1593
-
1594
- const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}";
1595
-
1596
- let EzForm = class {
1597
- constructor(hostRef) {
1598
- registerInstance(this, hostRef);
1599
- }
1600
- submit() {
1601
- return Promise.resolve();
1602
- }
1603
- cancel() {
1604
- return Promise.resolve();
1605
- }
1606
- validate() {
1607
- return new Promise((accept, reject) => {
1608
- const metadata = selectFormMetadata(this._store.getState());
1609
- const requiredFields = this._staticFields
1610
- .filter(f => f.dataset.required)
1611
- .map(f => f.dataset.fieldName)
1612
- .concat(metadata.getRequiredFields());
1613
- const records = this.dataUnit.records;
1614
- for (let i = 0; i < records.length; i++) {
1615
- if (!this.validateRequired(requiredFields, records[i])) {
1616
- reject();
1617
- break;
1618
- }
1619
- }
1620
- accept();
1621
- });
1622
- }
1623
- configChanged() {
1624
- this.processMetadata();
1625
- }
1626
- validateRequired(requiredFields, record) {
1627
- const invalidFields = [];
1628
- requiredFields.forEach(field => {
1629
- const value = record[field];
1630
- const fieldElem = this._element.querySelector(`[data-field-name=${field}]`);
1631
- if (value === null || value === undefined || value === "") {
1632
- invalidFields.push(field);
1633
- fieldElem["errorMessage"] = "Essa informação é obrigatória";
1634
- }
1635
- else {
1636
- fieldElem["errorMessage"] = "";
1637
- }
1638
- });
1639
- const isValid = invalidFields.length === 0;
1640
- if (!isValid) {
1641
- ApplicationUtils.info("Há pelo menos um campo obrigatório não preenchido.");
1642
- }
1643
- return isValid;
1644
- }
1645
- getDynamicContent() {
1646
- var _a;
1647
- const formMD = selectFormMetadata(this._store.getState());
1648
- if (!formMD)
1649
- return null;
1650
- const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
1651
- if (!currentSheet) {
1652
- return null;
1653
- }
1654
- const allSheets = Array.from(formMD.getAllSheets().values());
1655
- const result = [];
1656
- if (allSheets.length > 1) {
1657
- result.push(h("ez-tabselector", { onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name }, allSheets.map(s => h("ez-tab", { tabKey: s.name, label: s.label }))));
1658
- }
1659
- result.push(h(FormSheet, { store: this._store, source: currentSheet }));
1660
- return result;
1661
- }
1662
- processMetadata() {
1663
- if (!this.isStatic()) {
1664
- const metadata = this.config && this.config.length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
1665
- this._store.dispatch(loadMetadata(metadata));
1666
- }
1667
- }
1668
- isStatic() {
1669
- var _a;
1670
- return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
1671
- }
1672
- interceptAction(action) {
1673
- if (action.type === Action.RECORDS_COPIED) {
1674
- const metadata = selectFormMetadata(this._store.getState());
1675
- const cleanFields = metadata.getCleanOnCopyFields();
1676
- if (cleanFields) {
1677
- const records = action.payload;
1678
- return new DataUnitAction(Action.RECORDS_COPIED, records.map(record => {
1679
- const newRecord = Object.assign({}, record);
1680
- cleanFields.forEach(fieldName => delete newRecord[fieldName]);
1681
- return newRecord;
1682
- }));
1683
- }
1684
- }
1685
- return action;
1686
- }
1687
- componentWillLoad() {
1688
- if (this.dataUnit === undefined) {
1689
- this.dataUnit = new DataUnit("ez-form");
1690
- }
1691
- this.dataUnit.addInterceptor(this);
1692
- this.dataUnit.subscribe(action => {
1693
- if (action.type === Action.METADATA_LOADED) {
1694
- this.processMetadata();
1695
- }
1696
- });
1697
- this._dataBinder = new DataBinder(this.dataUnit);
1698
- this._store = createStore(formReducer);
1699
- this._store.subscribe(() => forceUpdate(this));
1700
- this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
1701
- this.processMetadata();
1702
- }
1703
- componentDidRender() {
1704
- this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
1705
- }
1706
- render() {
1707
- return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
1708
- }
1709
- get _element() { return getElement(this); }
1710
- static get watchers() { return {
1711
- "config": ["configChanged"]
1712
- }; }
1713
- };
1714
- EzForm.style = ezFormCss;
1715
-
1716
- const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{color:var(--ez-icon--color)}[class^=\"ez-icon-\"],[class*=\" ez-icon-\"]{font-family:'ez-icons' !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ez-icon-account-outline:before{content:\"\\ea01\"}.ez-icon-account:before{content:\"\\ea02\"}.ez-icon-alert-circle-inverted:before{content:\"\\ea03\"}.ez-icon-alert-circle:before{content:\"\\ea04\"}.ez-icon-alert-mail:before{content:\"\\ea05\"}.ez-icon-alert-outline:before{content:\"\\ea06\"}.ez-icon-alert-popup:before{content:\"\\ea07\"}.ez-icon-apps:before{content:\"\\ea08\"}.ez-icon-arrow_back:before{content:\"\\ea09\"}.ez-icon-bell-inverted:before{content:\"\\ea0a\"}.ez-icon-bell:before{content:\"\\ea0b\"}.ez-icon-business-center:before{content:\"\\ea0c\"}.ez-icon-calendar-text:before{content:\"\\ea0d\"}.ez-icon-calendar:before{content:\"\\ea0e\"}.ez-icon-check-circle-inverted:before{content:\"\\ea0f\"}.ez-icon-check-circle:before{content:\"\\ea10\"}.ez-icon-check:before{content:\"\\ea11\"}.ez-icon-chevron-down:before{content:\"\\ea12\"}.ez-icon-chevron-left:before{content:\"\\ea13\"}.ez-icon-chevron-right:before{content:\"\\ea14\"}.ez-icon-chevron-up:before{content:\"\\ea15\"}.ez-icon-circle--medium:before{content:\"\\ea16\"}.ez-icon-circle:before{content:\"\\ea17\"}.ez-icon-clipboard:before{content:\"\\ea18\"}.ez-icon-close-circle-inverted:before{content:\"\\ea19\"}.ez-icon-close-circle:before{content:\"\\ea1a\"}.ez-icon-close:before{content:\"\\ea1b\"}.ez-icon-comment-inverted:before{content:\"\\ea1c\"}.ez-icon-comment:before{content:\"\\ea1d\"}.ez-icon-configuration:before{content:\"\\ea1e\"}.ez-icon-copy:before{content:\"\\ea1f\"}.ez-icon-crop:before{content:\"\\ea20\"}.ez-icon-delete:before{content:\"\\ea21\"}.ez-icon-description:before{content:\"\\ea22\"}.ez-icon-dot-notification:before{content:\"\\ea23\"}.ez-icon-dots-horizontal:before{content:\"\\ea24\"}.ez-icon-dots-vertical:before{content:\"\\ea25\"}.ez-icon-drag-indicator:before{content:\"\\ea26\"}.ez-icon-edit-file:before{content:\"\\ea27\"}.ez-icon-edit-table:before{content:\"\\ea28\"}.ez-icon-edit-time:before{content:\"\\ea29\"}.ez-icon-edit:before{content:\"\\ea2a\"}.ez-icon-email-inverted:before{content:\"\\ea2b\"}.ez-icon-email:before{content:\"\\ea2c\"}.ez-icon-error-octagon:before{content:\"\\ea2d\"}.ez-icon-expand:before{content:\"\\ea2e\"}.ez-icon-eye-off:before{content:\"\\ea2f\"}.ez-icon-eye:before{content:\"\\ea30\"}.ez-icon-favorite:before{content:\"\\ea31\"}.ez-icon-file-download:before{content:\"\\ea32\"}.ez-icon-file-upload:before{content:\"\\ea33\"}.ez-icon-filter:before{content:\"\\ea34\"}.ez-icon-find-file:before{content:\"\\ea35\"}.ez-icon-find-page:before{content:\"\\ea36\"}.ez-icon-format-color-fill:before{content:\"\\ea37\"}.ez-icon-help-circle-outline:before{content:\"\\ea38\"}.ez-icon-help-inverted:before{content:\"\\ea39\"}.ez-icon-help:before{content:\"\\ea3a\"}.ez-icon-home:before{content:\"\\ea3b\"}.ez-icon-language:before{content:\"\\ea3c\"}.ez-icon-launch:before{content:\"\\ea3d\"}.ez-icon-lightbulb:before{content:\"\\ea3e\"}.ez-icon-list:before{content:\"\\ea3f\"}.ez-icon-loading:before{content:\"\\ea40\"}.ez-icon-lock-outline:before{content:\"\\ea41\"}.ez-icon-lock:before{content:\"\\ea42\"}.ez-icon-menu:before{content:\"\\ea43\"}.ez-icon-minus-circle-inverted:before{content:\"\\ea44\"}.ez-icon-minus:before{content:\"\\ea45\"}.ez-icon-money-off:before{content:\"\\ea46\"}.ez-icon-money:before{content:\"\\ea47\"}.ez-icon-north-west:before{content:\"\\ea48\"}.ez-icon-pause:before{content:\"\\ea49\"}.ez-icon-payments:before{content:\"\\ea4a\"}.ez-icon-play:before{content:\"\\ea4b\"}.ez-icon-plus-circle-inverted:before{content:\"\\ea4c\"}.ez-icon-plus-circle:before{content:\"\\ea4d\"}.ez-icon-plus:before{content:\"\\ea4e\"}.ez-icon-power:before{content:\"\\ea4f\"}.ez-icon-push-pin:before{content:\"\\ea50\"}.ez-icon-restore:before{content:\"\\ea51\"}.ez-icon-return:before{content:\"\\ea52\"}.ez-icon-rotate:before{content:\"\\ea53\"}.ez-icon-save:before{content:\"\\ea54\"}.ez-icon-search:before{content:\"\\ea55\"}.ez-icon-settings-inverted:before{content:\"\\ea56\"}.ez-icon-settings:before{content:\"\\ea57\"}.ez-icon-share:before{content:\"\\ea58\"}.ez-icon-shield:before{content:\"\\ea59\"}.ez-icon-south-east:before{content:\"\\ea5a\"}.ez-icon-success-circle:before{content:\"\\ea5b\"}.ez-icon-sync:before{content:\"\\ea5c\"}.ez-icon-table:before{content:\"\\ea5d\"}.ez-icon-timer-outline:before{content:\"\\ea5e\"}.ez-icon-user-circle:before{content:\"\\ea5f\"}.ez-icon-warning-minus:before{content:\"\\ea60\"}.ez-icon-warning-triangle:before{content:\"\\ea61\"}.x-small--font{font-size:12px}.small--font{font-size:16px}.medium--font{font-size:20px}.large--font{font-size:24px}.x-large--font{font-size:30px}";
1717
-
1718
- let EzIcon = class {
1719
- constructor(hostRef) {
1720
- registerInstance(this, hostRef);
1721
- /**
1722
- * Tamanho do ícone
1723
- */
1724
- this.size = 'medium';
1725
- }
1726
- isSprite() {
1727
- return this.href && this.href.indexOf('#') > -1;
1728
- }
1729
- getIconClassName() {
1730
- return `ez-icon-${this.iconName}`;
1731
- }
1732
- getIconContent() {
1733
- if (this.isSprite()) {
1734
- return h("svg", { class: this.size, role: "img" }, h("use", { xlinkHref: this.href }));
1735
- }
1736
- else if (!StringUtils.isEmpty(this.iconName)) {
1737
- return h("span", { class: `icon-content ${this.getIconClassName()} ${this.size}--font` });
1738
- }
1739
- else {
1740
- return h("img", { class: this.size, src: this.href });
1741
- }
1742
- }
1743
- render() {
1744
- return (h(Host, null, this.getIconContent()));
1745
- }
1746
- };
1747
- EzIcon.style = ezIconCss;
1748
-
1749
- const ezNumberInputCss = ":host{display:block;width:100%}";
1750
-
1751
- let EzNumberInput = class {
1752
- constructor(hostRef) {
1753
- registerInstance(this, hostRef);
1754
- this.ezChange = createEvent(this, "ezChange", 7);
1755
- /**
1756
- * Deixa o campo disponível ou não para uso.
1757
- */
1758
- this.enabled = true;
1759
- }
1760
- setLabel() {
1761
- this._textInput.label = this.label;
1762
- }
1763
- setErrorMessage() {
1764
- this._textInput.errorMessage = this.errorMessage;
1765
- }
1766
- applyValueToInput() {
1767
- if (this._textInput) {
1768
- this._textInput.value = this.getTextValue(this.value);
1769
- }
1770
- }
1771
- /**
1772
- * Realiza o foco no componente de input
1773
- */
1774
- async setFocus() {
1775
- this._textInput.setFocus();
1776
- }
1777
- /**
1778
- * Remove o foco no componente de input
1779
- */
1780
- async setBlur() {
1781
- this._textInput.setBlur();
1782
- }
1783
- changeValue(newValue) {
1784
- this.errorMessage = "";
1785
- if (newValue && newValue !== this.value) {
1786
- this.value = newValue;
1787
- this.ezChange.emit(this.value);
1788
- }
1789
- }
1790
- parseNumber() {
1791
- const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : null;
1792
- if (parsedNumber != null && isNaN(parsedNumber)) {
1793
- this.errorMessage = "O valor digitado não é um número válido";
1794
- }
1795
- else {
1796
- try {
1797
- this.changeValue(parsedNumber);
1798
- }
1799
- catch (e) {
1800
- this.errorMessage = e.message;
1801
- return;
1802
- }
1803
- }
1804
- }
1805
- getTextValue(value) {
1806
- if (value) {
1807
- return this.precision > 0 ? NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
1808
- }
1809
- return null;
1810
- }
1811
- componentDidLoad() {
1812
- CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
1813
- }
1814
- render() {
1815
- return (h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseNumber(), label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage }));
1816
- }
1817
- get _elem() { return getElement(this); }
1818
- static get watchers() { return {
1819
- "label": ["setLabel"],
1820
- "errorMessage": ["setErrorMessage"],
1821
- "value": ["applyValueToInput"]
1822
- }; }
1823
- };
1824
- EzNumberInput.style = ezNumberInputCss;
1825
-
1826
- const ezSearchCss = ":host{width:100%}";
1827
-
1828
- let EzSearch = class {
1829
- constructor(hostRef) {
1830
- registerInstance(this, hostRef);
1831
- this.ezChange = createEvent(this, "ezChange", 7);
1832
- this.showPopup = createEvent(this, "showPopup", 7);
1833
- /**
1834
- * Deixa o campo disponível ou não.
1835
- */
1836
- this.enabled = true;
1837
- /**
1838
- * Ajusta a opção de mostrar o "value" ao selecionar uma opção.
1839
- */
1840
- this.showSelectedValue = true;
1841
- /**
1842
- * Ajusta a opção de mostrar o "value" para cada opção.
1843
- */
1844
- this.showOptionValue = true;
1845
- }
1846
- updateValue() {
1847
- if (this._comboElement) {
1848
- this._comboElement.value = this.value;
1849
- }
1850
- }
1851
- /**
1852
- * Realiza o foco no componente de pesquisa
1853
- */
1854
- async setFocus() {
1855
- this._comboElement.setFocus();
1856
- }
1857
- /**
1858
- * Remove o foco no componente de pesquisa
1859
- */
1860
- async setBlur() {
1861
- this._comboElement.setBlur();
1862
- }
1863
- onComboChange(evt) {
1864
- evt.stopPropagation();
1865
- this.value = evt.detail;
1866
- this.ezChange.emit(evt.detail);
1867
- }
1868
- componentDidLoad() {
1869
- CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
1870
- }
1871
- render() {
1872
- return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue }));
1873
- }
1874
- ;
1875
- get _elem() { return getElement(this); }
1876
- static get watchers() { return {
1877
- "value": ["updateValue"]
1878
- }; }
1879
- };
1880
- EzSearch.style = ezSearchCss;
1881
-
1882
- const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.midle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
1883
-
1884
- let EzTabselector = class {
1885
- constructor(hostRef) {
1886
- registerInstance(this, hostRef);
1887
- this.ezChange = createEvent(this, "ezChange", 7);
1888
- this.setFocusedParam = (ev) => {
1889
- if (ev.key === "Enter") {
1890
- const selectedTab = this._processedTabs[this._focusedIndex];
1891
- this.handleTabClick(selectedTab);
1892
- ev.preventDefault();
1893
- this.setFocusedTab(selectedTab.index);
1894
- }
1895
- else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
1896
- let operator = undefined;
1897
- if (ev.key === "ArrowLeft") {
1898
- operator = false;
1899
- }
1900
- else if (ev.key === "ArrowRight") {
1901
- operator = true;
1902
- }
1903
- else {
1904
- return;
1905
- }
1906
- if (this._focusedIndex === undefined) {
1907
- if (operator === false) {
1908
- this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex - 1 : undefined;
1909
- }
1910
- else {
1911
- this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined;
1912
- }
1913
- }
1914
- else {
1915
- if (operator === false) {
1916
- this._focusedIndex = this._focusedIndex - 1;
1917
- }
1918
- else {
1919
- this._focusedIndex = this._focusedIndex + 1;
1920
- }
1921
- }
1922
- if (this._focusedIndex < 0) {
1923
- this._focusedIndex = 0;
1924
- }
1925
- else if (this._focusedIndex > this._processedTabs.length - 1) {
1926
- this._focusedIndex = this._processedTabs.length - 1;
1927
- }
1928
- this.setFocusedBtn(true, this._focusedIndex);
1929
- this.setFocusedTab(this._focusedIndex);
1930
- }
1931
- else if (ev.key === "Tab" || ev.key === "Escape") {
1932
- const currentTab = this._processedTabs[this.selectedIndex];
1933
- this._focusedIndex = undefined;
1934
- this.handleTabClick(currentTab);
1935
- ev.preventDefault();
1936
- this.setFocusedTab(this.selectedIndex);
1937
- }
1938
- };
1939
- }
1940
- handleTabClick(tab) {
1941
- this.selectedIndex = tab.index;
1942
- this._focusedIndex = undefined;
1943
- this.selectedTab = tab.tabKey;
1944
- this.ezChange.emit(tab);
1945
- this.setFocusedBtn(false, tab.index);
1946
- }
1947
- componentWillRender() {
1948
- if (!this._processedTabs) {
1949
- this._processedTabs = [];
1950
- if (this.tabs) {
1951
- this.tabs.split(",").forEach((label) => {
1952
- label = label.trim();
1953
- this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
1954
- });
1955
- }
1956
- this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
1957
- const tabKey = elem.getAttribute("tabKey");
1958
- const label = elem.getAttribute("label");
1959
- const t = { label, tabKey, index: this._processedTabs.length };
1960
- const content = elem.firstChild;
1961
- if (content) {
1962
- content.setAttribute("slot", "tab" + t.index);
1963
- this._hostElem.appendChild(content);
1964
- }
1965
- this._processedTabs.push(t);
1966
- });
1967
- }
1968
- }
1969
- handleSlotChange(ev) {
1970
- const slot = ev.target;
1971
- const content = slot.assignedElements()[0];
1972
- if (content) {
1973
- content.style.marginLeft = "6px";
1974
- }
1975
- }
1976
- scrollBackward() {
1977
- const container = this._scrollContainer;
1978
- if (container) {
1979
- container.scrollLeft -= container.clientWidth;
1980
- }
1981
- }
1982
- scrollFoward() {
1983
- const container = this._scrollContainer;
1984
- if (container) {
1985
- let lastTab = null;
1986
- container.querySelectorAll(".tab").forEach((tab) => {
1987
- if (tab.getBoundingClientRect().right < container.clientWidth) {
1988
- lastTab = tab;
1989
- }
1990
- });
1991
- container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
1992
- }
1993
- }
1994
- componentDidRender() {
1995
- this.updateScroll();
1996
- }
1997
- updateScroll() {
1998
- const container = this._scrollContainer;
1999
- if (container) {
2000
- const { scrollWidth, clientWidth, scrollLeft } = container;
2001
- const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
2002
- this._startHidden = container.scrollLeft > 0;
2003
- this._endHidden = remainingScroll > 0;
2004
- if (this._startHidden) {
2005
- this._backwardButton.classList.remove("hidden");
2006
- }
2007
- else {
2008
- this._backwardButton.classList.add("hidden");
2009
- }
2010
- if (this._endHidden) {
2011
- this._forwardButton.classList.remove("hidden");
2012
- }
2013
- else {
2014
- this._forwardButton.classList.add("hidden");
2015
- }
2016
- const classNames = ["", "startHidden", "endHidden", "midle"];
2017
- const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
2018
- classNames.forEach((name) => {
2019
- if (name !== currentClass && container.classList.contains(name)) {
2020
- container.classList.remove(name);
2021
- }
2022
- });
2023
- if (currentClass && !container.classList.contains(currentClass)) {
2024
- container.classList.add(currentClass);
2025
- }
2026
- }
2027
- }
2028
- domScrollHandler() {
2029
- window.clearTimeout(this._scrollCallBack);
2030
- this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
2031
- }
2032
- setFocusedTab(index) {
2033
- window.clearTimeout(this._scrollCallBackTest);
2034
- this._scrollCallBackTest = window.setTimeout(() => {
2035
- const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
2036
- tabtoscroll.scrollIntoView();
2037
- }, 200);
2038
- }
2039
- getTextWidth(text) {
2040
- if (this._textMesurement === undefined) {
2041
- this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
2042
- }
2043
- const context = this._textMesurement.getContext("2d");
2044
- context.font = "14px Sora, Algerian";
2045
- return Math.min(220, 24 + context.measureText(text).width) + "px";
2046
- }
2047
- ;
2048
- setFocusedBtn(visible, parameter) {
2049
- const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
2050
- tabsButtons.forEach((el) => {
2051
- el.classList.remove("is-focused");
2052
- if (el.id === "tab" + parameter && visible) {
2053
- el.classList.add("is-focused");
2054
- }
2055
- });
2056
- }
2057
- render() {
2058
- return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
2059
- const labelStyle = { "min-width": this.getTextWidth(tab.label) };
2060
- const tabId = "tab" + index;
2061
- const isSelected = index === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
2062
- if (isSelected) {
2063
- this.selectedTab = tab.tabKey;
2064
- this.selectedIndex = index;
2065
- }
2066
- return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle }, h("span", { class: "tab-label", title: tab.label }, tab.label), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
2067
- })), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
2068
- }
2069
- get _hostElem() { return getElement(this); }
2070
- };
2071
- EzTabselector.style = ezTabselectorCss;
2072
-
2073
- const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--large, 500);--text-area--color:var(--title--primary, #000);--text-area__input--background-color:var(--background--medium, #e0e0e0);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--text-area__input--background-color);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-area__input--disabled--color:var(--text--disable, #AFB6C0);--text-area__input--error--border-color:#CC2936;--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color--error, #FF0000);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;margin-top:calc(var(--space--medium, 12px) + 4px);width:100%;font-weight:var(--text-weight--large, 600);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);padding:0;background:none}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color)}.textarea{width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color)}";
2074
-
2075
- let EzTextArea = class {
2076
- constructor(hostRef) {
2077
- registerInstance(this, hostRef);
2078
- this.ezChange = createEvent(this, "ezChange", 7);
2079
- /**
2080
- * Deixa o campo disponível ou não para digitação.
2081
- */
2082
- this.enabled = true;
2083
- /**
2084
- * Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
2085
- */
2086
- this.rows = 4;
2087
- }
2088
- showError() {
2089
- const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
2090
- if (hasError) {
2091
- this._container.classList.add('hasError');
2092
- this._messageBoxElem.classList.add('hasError');
2093
- }
2094
- else {
2095
- this._container.classList.remove('hasError');
2096
- this._messageBoxElem.classList.remove('hasError');
2097
- }
2098
- }
2099
- updateInputValue() {
2100
- this._inputElem.value = this.value === undefined ? "" : this.value;
2101
- this.handleChange();
2102
- this.adjustFloatingLabel();
2103
- this.ezChange.emit(this.value);
2104
- }
2105
- adjustFloatingLabel() {
2106
- if (this.label) {
2107
- const hasValue = this.value && this.value.toString().length > 0;
2108
- const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
2109
- if (hasValue || this.isFocused()) {
2110
- if (!containsFloatedClass) {
2111
- this._labelElem.classList.add("textarea__label--floated");
2112
- }
2113
- }
2114
- else {
2115
- if (containsFloatedClass) {
2116
- this._labelElem.classList.remove("textarea__label--floated");
2117
- }
2118
- }
2119
- }
2120
- }
2121
- isFocused() {
2122
- return this._hostElement.shadowRoot.activeElement !== null;
2123
- }
2124
- //---------------------------------------------
2125
- // Public methods
2126
- //---------------------------------------------
2127
- /**
2128
- * Faz o foco no componente de input
2129
- */
2130
- async setFocus() {
2131
- this._inputElem.focus();
2132
- }
2133
- /**
2134
- * Remove o foco no componente de input
2135
- */
2136
- async setBlur() {
2137
- this._inputElem.blur();
2138
- }
2139
- //---------------------------------------------
2140
- // Event handlers
2141
- //---------------------------------------------
2142
- handleFocusout() {
2143
- this.adjustFloatingLabel();
2144
- if (this._container && this._container.classList.contains("textarea--focus")) {
2145
- this._container.classList.remove("textarea--focus");
2146
- }
2147
- }
2148
- handleChange() {
2149
- this.errorMessage = "";
2150
- this.value = this._inputElem.value;
2151
- }
2152
- handleFocus() {
2153
- if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
2154
- this._labelElem.classList.add("textarea__label--floated");
2155
- }
2156
- if (this._container && !this._container.classList.contains("textarea--focus")) {
2157
- this._container.classList.add("textarea--focus");
2158
- }
2159
- }
2160
- //---------------------------------------------
2161
- // Lifecycle web component
2162
- //---------------------------------------------
2163
- componentDidLoad() {
2164
- this.showError();
2165
- this.adjustFloatingLabel();
2166
- }
2167
- render() {
2168
- return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label ?
2169
- h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
2170
- : null, h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
2171
- }
2172
- get _hostElement() { return getElement(this); }
2173
- static get watchers() { return {
2174
- "errorMessage": ["showError"],
2175
- "value": ["updateInputValue"]
2176
- }; }
2177
- };
2178
- EzTextArea.style = ezTextAreaCss;
2179
-
2180
- const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #000);--ez-text-input__input--background-color:var(--background--medium, #e0e0e0);--ez-text-input__input--border:var(--border--medium, 2px solid);--ez-text-input__input--border-color:var(--ez-text-input__input--background-color);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-text-input__input--disabled--color:var(--text--disable, #AFB6C0);--ez-text-input__input--error--border-color:#CC2936;--ez-text-input__message_box--font-size:var(--text--small, 12px);--ez-text-input__message_box--info--color:var(--color--success, #22085d);--ez-text-input__message_box--error--color:var(--color--error, #FF0000);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color)}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color)}input.text--right{text-align:right}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input__message_box--font-size);color:var(--ez-text-input__message_box--info--color)}.hasError{color:var(--ez-text-input__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}";
2181
-
2182
- let EzTextInput = class {
2183
- constructor(hostRef) {
2184
- registerInstance(this, hostRef);
2185
- this.ezChange = createEvent(this, "ezChange", 7);
2186
- /**
2187
- * Deixa o campo disponível ou não para digitação.
2188
- */
2189
- this.enabled = true;
2190
- /**
2191
- * Permite exibir a mensagem de erro.
2192
- */
2193
- this.canShowError = true;
2194
- }
2195
- showError() {
2196
- const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
2197
- if (hasError) {
2198
- this._inputElem.classList.add("hasError");
2199
- this._messageBoxElem.classList.add("hasError");
2200
- }
2201
- else {
2202
- this._inputElem.classList.remove("hasError");
2203
- this._messageBoxElem.classList.remove("hasError");
2204
- }
2205
- }
2206
- prepareMask() {
2207
- if (this.mask) {
2208
- if (this._maskFormatter == undefined) {
2209
- this._maskFormatter = new MaskFormatter(this.mask);
2210
- }
2211
- else {
2212
- this._maskFormatter.mask = this.mask;
2213
- }
2214
- }
2215
- }
2216
- updateInputValue() {
2217
- if (this._inputElem) {
2218
- this._inputElem.value = this.value;
2219
- }
2220
- this.handleChange();
2221
- this.errorMessage = "";
2222
- this.ezChange.emit(this.value);
2223
- this.adjustFloatingLabel();
2224
- }
2225
- adjustFloatingLabel() {
2226
- if (this.label && this._labelElem) {
2227
- if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
2228
- this._inputElem.classList.add("input--with--label");
2229
- }
2230
- const hasValue = this.value && this.value.toString().length > 0;
2231
- const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
2232
- if (hasValue || this.isFocused()) {
2233
- if (!containsFloatedClass) {
2234
- this._labelElem.classList.add("input__label--floated");
2235
- }
2236
- }
2237
- else {
2238
- if (containsFloatedClass) {
2239
- this._labelElem.classList.remove("input__label--floated");
2240
- }
2241
- }
2242
- }
2243
- }
2244
- isFocused() {
2245
- return this._hostElement.shadowRoot.activeElement !== null;
2246
- }
2247
- //---------------------------------------------
2248
- // Public methods
2249
- //---------------------------------------------
2250
- /**
2251
- * Faz o foco no componente de input
2252
- */
2253
- async setFocus() {
2254
- this._inputElem.focus();
2255
- }
2256
- /**
2257
- * Remove o foco no componente de input
2258
- */
2259
- async setBlur() {
2260
- this._inputElem.blur();
2261
- }
2262
- //---------------------------------------------
2263
- // Event handlers
2264
- //---------------------------------------------
2265
- handleFocusout() {
2266
- const value = this._inputElem.value;
2267
- if (value && this._maskFormatter) {
2268
- try {
2269
- this._inputElem.value = this._maskFormatter.format(value);
2270
- }
2271
- catch (e) {
2272
- this.errorMessage = e.message;
2273
- }
2274
- }
2275
- this.value = this._inputElem.value;
2276
- this.adjustFloatingLabel();
2277
- }
2278
- isValidValue(value) {
2279
- if (this.restrict) {
2280
- return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
2281
- }
2282
- return true;
2283
- }
2284
- handleChange() {
2285
- if (!this._inputElem) {
2286
- return;
2287
- }
2288
- const value = this._inputElem.value;
2289
- if (this.isValidValue(value)) {
2290
- this._lastValidValue = value;
2291
- }
2292
- else {
2293
- this._inputElem.value = this._lastValidValue === undefined ? "" : this._lastValidValue;
2294
- }
2295
- this.value = this._inputElem.value;
2296
- }
2297
- handleSlotChange(ev) {
2298
- const slot = ev.target;
2299
- const content = slot.assignedElements()[0];
2300
- if (content) {
2301
- content.style.position = "absolute";
2302
- content.style.display = "flex";
2303
- content.style.alignItems = "center";
2304
- content.style.justifyContent = "center";
2305
- content.style.overflow = "hidden";
2306
- content.style.top = "0px";
2307
- content.style.width = "var(--ez-text-input__icon--width)";
2308
- content.style.height = "var(--ez-text-input--height)";
2309
- if (slot.name == "leftIcon") {
2310
- content.style.left = "0px";
2311
- content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
2312
- this._inputElem.classList.add("icon--left");
2313
- if (this._labelElem) {
2314
- this._labelElem.classList.add("input__label--left");
2315
- }
2316
- }
2317
- else if (slot.name == "rightIcon") {
2318
- content.style.right = "0px";
2319
- content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
2320
- this._inputElem.classList.add("icon--right");
2321
- if (this._labelElem) {
2322
- this._labelElem.classList.add("input__label--right");
2323
- }
2324
- }
2325
- }
2326
- this.showError();
2327
- }
2328
- doFocus() {
2329
- if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
2330
- this._labelElem.classList.add("input__label--floated");
2331
- }
2332
- }
2333
- //---------------------------------------------
2334
- // Lifecycle web component
2335
- //---------------------------------------------
2336
- componentDidLoad() {
2337
- this.showError();
2338
- this.prepareMask();
2339
- this.adjustFloatingLabel();
2340
- }
2341
- componentWillLoad() {
2342
- this.prepareMask();
2343
- if (this.value) {
2344
- if (this._maskFormatter) {
2345
- try {
2346
- this.value = this._maskFormatter.format(this.value);
2347
- }
2348
- catch (e) {
2349
- this.errorMessage = e.message;
2350
- }
2351
- }
2352
- if (!this.isValidValue(this.value)) {
2353
- this._lastValidValue = "";
2354
- this.value = "";
2355
- }
2356
- }
2357
- }
2358
- render() {
2359
- return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
2360
- h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
2361
- : null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError &&
2362
- h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
2363
- }
2364
- get _hostElement() { return getElement(this); }
2365
- static get watchers() { return {
2366
- "errorMessage": ["showError"],
2367
- "mask": ["prepareMask"],
2368
- "value": ["updateInputValue"]
2369
- }; }
2370
- };
2371
- EzTextInput.style = ezTextInputCss;
2372
-
2373
- const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}";
2374
-
2375
- let EzTimeInput = class {
2376
- constructor(hostRef) {
2377
- registerInstance(this, hostRef);
2378
- /**
2379
- * Deixa o campo disponível ou não para digitação.
2380
- */
2381
- this.enabled = true;
2382
- /**
2383
- * Define se o componente irá ou não considerar os segundos
2384
- */
2385
- this.showSeconds = false;
2386
- }
2387
- prepareMask() {
2388
- if (this.showSeconds) {
2389
- if (this._maskFormatter == undefined) {
2390
- this._maskFormatter = new MaskFormatter("##:##:##");
2391
- }
2392
- else {
2393
- this._maskFormatter.mask = "##:##:##";
2394
- }
2395
- }
2396
- else {
2397
- if (this._maskFormatter == undefined) {
2398
- this._maskFormatter = new MaskFormatter("##:##");
2399
- }
2400
- else {
2401
- this._maskFormatter.mask = "##:##";
2402
- }
2403
- }
2404
- }
2405
- onValueChanged() {
2406
- if (this.value === NaN) {
2407
- this.value = undefined;
2408
- this.handleFocusout();
2409
- }
2410
- }
2411
- //---------------------------------------------
2412
- // Public methods
2413
- //---------------------------------------------
2414
- /**
2415
- * Faz o foco no componente de input
2416
- */
2417
- async setFocus() {
2418
- this._inputElem.focus();
2419
- }
2420
- /**
2421
- * Remove o foco no componente de input
2422
- */
2423
- async setBlur() {
2424
- this._inputElem.blur();
2425
- }
2426
- //---------------------------------------------
2427
- // Event handlers
2428
- //---------------------------------------------
2429
- handleFocusout() {
2430
- this.errorMessage = "";
2431
- this.prepareValue(this.viewValue);
2432
- if (!TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
2433
- this.clearField();
2434
- this.errorMessage = "Favor inserir um horário válido.";
2435
- }
2436
- }
2437
- prepareValue(value) {
2438
- try {
2439
- this.viewValue = TimeFormatter.prepareValue(value, this.showSeconds);
2440
- }
2441
- catch (e) {
2442
- this.clearField();
2443
- this.errorMessage = e.message;
2444
- }
2445
- }
2446
- clearField() {
2447
- this.viewValue = this.value = undefined;
2448
- }
2449
- handleChange() {
2450
- this.viewValue = this._inputElem.value;
2451
- this.value = NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
2452
- }
2453
- //---------------------------------------------
2454
- // Lifecycle web component
2455
- //---------------------------------------------
2456
- componentDidLoad() {
2457
- this.onValueChanged();
2458
- CSSVarsUtils.applyVarsTextInput(this._elem, this._inputElem);
2459
- }
2460
- componentWillLoad() {
2461
- this.prepareMask();
2462
- if (this.value) {
2463
- this.prepareValue(this.value.toString());
2464
- }
2465
- else if (this.viewValue) {
2466
- this.prepareValue(this.viewValue);
2467
- }
2468
- }
2469
- render() {
2470
- return (h(Host, null, h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage }, h("ez-icon", { slot: "leftIcon", href: getSpritePath("timer-outline") }))));
2471
- }
2472
- static get assetsDirs() { return ["../assets"]; }
2473
- get _elem() { return getElement(this); }
2474
- static get watchers() { return {
2475
- "showSeconds": ["prepareMask"],
2476
- "value": ["onValueChanged"]
2477
- }; }
2478
- };
2479
- EzTimeInput.style = ezTimeInputCss;
2480
-
2481
- class RemoteFile {
2482
- constructor(file) {
2483
- this.file = file;
2484
- this.size = file.size;
2485
- this.name = file.name;
2486
- }
2487
- abortUpload() {
2488
- if (this._uploadingXhr) {
2489
- this._aborted = true;
2490
- this._uploadingXhr.abort();
2491
- this._uploadingXhr = undefined;
2492
- }
2493
- }
2494
- isUploading() {
2495
- return this._uploadingXhr !== undefined;
2496
- }
2497
- async upload(server, headers, updateCallBack) {
2498
- return new Promise((resolve, reject) => {
2499
- const xhr = new XMLHttpRequest();
2500
- this._uploadingXhr = xhr;
2501
- this._aborted = false;
2502
- this.progress = 0;
2503
- xhr.upload.onprogress = (e) => {
2504
- const loaded = e.loaded;
2505
- const total = e.total;
2506
- this.progress = ~~((loaded / total) * 100);
2507
- updateCallBack(this, loaded, total);
2508
- };
2509
- xhr.onreadystatechange = () => {
2510
- if (xhr.readyState == 4) {
2511
- this._uploadingXhr = undefined;
2512
- const status = xhr.status;
2513
- if (!this._aborted) {
2514
- if (status === 0) {
2515
- reject("Servidor indisponível");
2516
- }
2517
- else if (status >= 500) {
2518
- reject("Erro inesperado no servidor");
2519
- }
2520
- else if (status >= 400) {
2521
- reject("Operação não permitida");
2522
- }
2523
- }
2524
- const response = xhr.response;
2525
- if (response) {
2526
- resolve(JSON.parse(response));
2527
- }
2528
- }
2529
- };
2530
- xhr.ontimeout = () => {
2531
- reject("Tempo limite de transferência atingido.");
2532
- };
2533
- const formData = new FormData();
2534
- formData.append("ARQUIVO", this.file, this.file.name);
2535
- xhr.open("POST", server, true);
2536
- if (headers) {
2537
- headers.forEach((value, key) => xhr.setRequestHeader(key, value));
2538
- }
2539
- xhr.send(formData);
2540
- });
2541
- }
2542
- async delete(item, server, headers) {
2543
- return new Promise((resolve, reject) => {
2544
- const xhr = new XMLHttpRequest();
2545
- xhr.onreadystatechange = () => {
2546
- if (xhr.readyState == 4) {
2547
- if (xhr.status === 0) {
2548
- reject("Servidor indisponível");
2549
- }
2550
- else if (xhr.status >= 500) {
2551
- reject("Erro inesperado no servidor");
2552
- }
2553
- else if (xhr.status >= 400) {
2554
- reject("Operação não permitida");
2555
- }
2556
- resolve(true);
2557
- }
2558
- };
2559
- xhr.ontimeout = () => {
2560
- reject("Tempo limite de remoção atingido.");
2561
- };
2562
- xhr.open("DELETE", server, true);
2563
- if (headers) {
2564
- headers.forEach((value, key) => xhr.setRequestHeader(key, value));
2565
- }
2566
- xhr.send(JSON.stringify(item));
2567
- });
2568
- }
2569
- }
2570
-
2571
- const ezUploadCss = ":host{--ez-upload--height:42px;--ez-upload--width:100%;--ez-upload__icon--width:48px;--ez-upload__container--background-color:var(--background--medium, #d2dce9);--ez-upload__color--primary:var(--color--primary, #008561);--ez-upload--padding--extra-small:var(--space--extra-small, 3px);--ez-upload--padding--small:var(--space--small, 6px);--ez-upload--padding--medium:var(--space--medium, 12px);--ez-upload--padding--large:var(--space--large, 24px);--ez-upload__border--color:var(--color-strokes, #DCE0E8);--ez-upload--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-upload--text--primary:var(--text-primary, #626e82);--ez-upload--font-size:var(--text--medium, 14px);--ez-upload--font-family:var(--font-pattern, Arial);--ez-upload--font-weight:var(--text-weight--large, 500);--ez-upload__btn__cancel-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"8x\" width=\"8px\"><path d=\"M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z\"/></svg>');--ez-upload__file-icon-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"11x\" width=\"9px\"><path d=\"M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z\"/></svg>');display:flex;flex-wrap:wrap;position:relative;font-family:var(--ez-upload--font-family);font-size:var(--ez-upload--font-size);width:var(--ez-upload--width);font-weight:var(--ez-upload--font-weight)}.iu{display:flex;flex-wrap:wrap;background-color:var(--ez-upload__container--background-color);padding:var(--ez-upload--padding--small);width:100%;border-radius:12px;box-sizing:border-box}.iu__container{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;border:2px dashed var(--ez-upload__border--color);border-radius:6px;box-sizing:border-box}.iu__footer{display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;padding:0 var(--ez-upload--padding--medium) var(--ez-upload--padding--medium) var(--ez-upload--padding--medium);box-sizing:border-box}.iu__item{display:flex;width:100%;justify-content:flex-start;align-items:center;align-self:center;padding-bottom:var(--ez-upload--padding--extra-small);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iu__item-label{display:flex;max-width:80%;align-self:stretch;align-items:center}.file__name{font-weight:200}.box__content{width:100%;justify-content:center;align-items:center;height:100%;border:1px dashed var(--ez-upload__border--color);border-radius:6px;box-sizing:border-box}.box__container{display:flex;flex-wrap:wrap;background-color:var(--ez-upload__container--background-color);padding:6px;width:100%;border-radius:12px}a:-webkit-any-link{color:#008561;fill:#008561;cursor:pointer;text-decoration:none}progress[value]{display:flex;width:100%;appearance:none;border:1px solid var(--ez-upload__border--color);height:12px;justify-content:flex-start;align-items:center;border-radius:3px;position:relative}progress[value]::-webkit-progress-bar{display:flex;-webkit-appearance:none;width:100%;background-color:rgb(255, 255, 255);border-radius:2px;padding:2px}progress[value]::-webkit-progress-value{display:flex;width:100%;background-color:var(--ez-upload__color--primary)}.text--center{text-align:center}.align--middle{align-self:center;align-items:center}.text{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent}.text--primary{color:var(--ez-upload--text--primary);text-shadow:var(--ez-upload--text-shadow)}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text--medium{font-size:14px}.text--small{font-size:12px}.btn-cancel{outline:none;border:none;background-color:unset;cursor:pointer}.btn-cancel::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:8px;height:8px;-webkit-mask-image:var(--ez-upload__btn__cancel-image);mask-image:var(--ez-upload__btn__cancel-image)}.iu_header{display:flex;flex-direction:column;width:100%}.iu__label{padding:var(--space--small);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-upload--font-family);font-size:var(--text--extra-small);font-weight:var(--ez-upload--font-weight);color:var(--ez-upload--text--primary);text-shadow:var(--ez-upload--text-shadow)}.iu__file-icon{outline:none;border:none;background-color:unset;cursor:pointer}.iu__file-icon:disabled{cursor:unset}.iu__file-icon::after{content:'';display:flex;background-color:var(--text--primary, #626e82);width:9px;height:11px;-webkit-mask-image:var(--ez-upload__file-icon-image);mask-image:var(--ez-upload__file-icon-image)}.iu__file-icon:disabled::after{background-color:var(--text--disable, #AFB6C0)}.iu__icon-label{justify-content:center;display:flex;cursor:pointer;padding:var(--ez-upload--padding--large) 0px;box-sizing:border-box}.background--disabled{background-color:var(--color--disable-secondary, #F2F5F8)}.text--disabled{color:var(--text--disable, #AFB6C0)}.mouse-pointer--disabled{cursor:unset}.appearanceNone{width:0px;height:0px}.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%}}";
2572
-
2573
- let EzUpload = class {
2574
- constructor(hostRef) {
2575
- registerInstance(this, hostRef);
2576
- this.ezChange = createEvent(this, "ezChange", 7);
2577
- this._filePointers = new Map();
2578
- /**
2579
- * Deixa o campo disponível ou não para digitação.
2580
- */
2581
- this.enabled = true;
2582
- }
2583
- changeValue(newValue) {
2584
- if (newValue !== this._updatingValue) {
2585
- this._filePointers.forEach(f => {
2586
- if (this.isRemoteFile(f)) {
2587
- f.abortUpload();
2588
- }
2589
- });
2590
- this._filePointers = new Map();
2591
- this.updateFilePointers();
2592
- }
2593
- this._updatingValue = undefined;
2594
- }
2595
- updateFilePointers() {
2596
- if (this.value) {
2597
- this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
2598
- }
2599
- }
2600
- normalizeRequestHeaders() {
2601
- this._requestHeaders = new Map();
2602
- if (typeof this.requestHeaders == "string") {
2603
- try {
2604
- this.requestHeaders = JSON.parse(this.requestHeaders);
2605
- }
2606
- catch (e) {
2607
- this.requestHeaders = undefined;
2608
- }
2609
- }
2610
- for (var key in this.requestHeaders) {
2611
- this._requestHeaders.set(key, this.requestHeaders[key]);
2612
- }
2613
- }
2614
- /**
2615
- * Método responsável por adicionar um ou mais arquivos ao componente.
2616
- */
2617
- async addFiles(files) {
2618
- if (this.maxFiles > 0) {
2619
- let countDistinctFiles = this._filePointers.size;
2620
- files.forEach(file => {
2621
- if (!this._filePointers.has(file.name)) {
2622
- countDistinctFiles++;
2623
- }
2624
- });
2625
- if (countDistinctFiles > this.maxFiles) {
2626
- this.showError(`A quantidade máxima de arquivos é ${this.maxFiles}.`);
2627
- return;
2628
- }
2629
- }
2630
- Array.prototype.forEach.call(files, this.addFile.bind(this));
2631
- }
2632
- /**
2633
- * Realiza o foco no componente de upload
2634
- */
2635
- async setFocus() {
2636
- this._fileInput.focus();
2637
- }
2638
- /**
2639
- * Remove o foco no componente de upload
2640
- */
2641
- async setBlur() {
2642
- this._fileInput.blur();
2643
- }
2644
- async addFile(file) {
2645
- const oldFile = this._filePointers.get(file.name);
2646
- if (oldFile) {
2647
- ApplicationUtils.confirm("Substituir arquivo", `Já existe um arquivo chamado "${file.name}". Deseja substituí-lo?`)
2648
- .then(ok => {
2649
- if (ok) {
2650
- if (this.isRemoteFile(oldFile)) {
2651
- oldFile.abortUpload();
2652
- }
2653
- this.doAddFile(file);
2654
- }
2655
- });
2656
- }
2657
- else {
2658
- this.doAddFile(file);
2659
- }
2660
- }
2661
- async doAddFile(file) {
2662
- if (this.validateFile(file)) {
2663
- const uploadingFile = new RemoteFile(file);
2664
- this._filePointers.set(file.name, uploadingFile);
2665
- uploadingFile.upload(this.urlUpload, this._requestHeaders, (file) => this.updateFeedback(file))
2666
- .then((files) => files.forEach(ezFile => this.finishUpload(ezFile)))
2667
- .catch(msg => this.showError(msg));
2668
- forceUpdate(this);
2669
- }
2670
- }
2671
- finishUpload(ezFile) {
2672
- this._filePointers.set(ezFile.name, ezFile);
2673
- this.updateValue();
2674
- }
2675
- updateValue() {
2676
- this._updatingValue = [];
2677
- this._filePointers.forEach(f => {
2678
- if (!this.isRemoteFile(f)) {
2679
- this._updatingValue.push(f);
2680
- }
2681
- });
2682
- this.value = this._updatingValue;
2683
- this.ezChange.emit(this.value);
2684
- }
2685
- buildProgressId(uploading) {
2686
- let sanitizedName = uploading.name.replace(/[^a-z0-9_]/gi, "_");
2687
- return `PROGRESS_${sanitizedName}_${uploading.file.lastModified}`;
2688
- }
2689
- updateFeedback(uf) {
2690
- window.requestAnimationFrame(() => {
2691
- if (this._host) {
2692
- const progress = this._host.shadowRoot.querySelector("#" + this.buildProgressId(uf));
2693
- if (progress) {
2694
- progress.value = uf.progress;
2695
- }
2696
- }
2697
- });
2698
- }
2699
- validateFile(file) {
2700
- if (!this._filePointers.has(file.name) && this.maxFiles > 0 && this._filePointers.size >= this.maxFiles) {
2701
- this.showError(`A quantidade máxima de arquivos é ${this.maxFiles}.`);
2702
- return false;
2703
- }
2704
- if (file.size === 0) {
2705
- this.showError(`Erro de permissão: O arquivo "${file.name}" não pode ser enviado.`);
2706
- return false;
2707
- }
2708
- if (!this.urlUpload) {
2709
- this.showError("Endereço de upload não informado");
2710
- return false;
2711
- }
2712
- if (this.maxFileSize >= 0 && file.size > this.maxFileSize) {
2713
- this.showError("O tamanho máximo dos arquivos é de " + this.formatBytes(this.maxFileSize));
2714
- return false;
2715
- }
2716
- return true;
2717
- }
2718
- showError(message) {
2719
- ApplicationUtils.alert("Enviando arquivo", message);
2720
- }
2721
- formatBytes(bytes, decimals = 1) {
2722
- if (bytes === 0)
2723
- return "0 Bytes";
2724
- const k = 1024;
2725
- const dm = decimals < 0 ? 0 : decimals;
2726
- const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
2727
- const i = Math.floor(Math.log(bytes) / Math.log(k));
2728
- return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
2729
- }
2730
- onFileInputChange(event) {
2731
- const input = event.target;
2732
- this.addFiles(Array.from(input.files));
2733
- this._fileInput.value = "";
2734
- }
2735
- isRemoteFile(item) {
2736
- return "file" in item;
2737
- }
2738
- removeFromList(name) {
2739
- this._filePointers.delete(name);
2740
- this.updateValue();
2741
- }
2742
- removeFile(name) {
2743
- const item = this._filePointers.get(name);
2744
- if (this.isRemoteFile(item)) {
2745
- item.abortUpload();
2746
- this.removeFromList(name);
2747
- }
2748
- else {
2749
- if (this.urlDelete) {
2750
- const uploadingFile = new RemoteFile(null);
2751
- this._filePointers.set(item.name, uploadingFile);
2752
- uploadingFile.delete(item, this.urlDelete, null)
2753
- .then(_ok => this.removeFromList(name))
2754
- .catch(msg => this.showError(msg));
2755
- }
2756
- else {
2757
- this.removeFromList(name);
2758
- }
2759
- }
2760
- }
2761
- openFilesDialog() {
2762
- if (this.enabled) {
2763
- this._fileInput.click();
2764
- }
2765
- }
2766
- componentDidLoad() {
2767
- if (this.enabled && this._dropZone && window.FileList && window.File) {
2768
- this._dropZone.addEventListener("dragover", event => {
2769
- event.stopPropagation();
2770
- event.preventDefault();
2771
- event.dataTransfer.dropEffect = "copy";
2772
- this._dropZone.style.background = "#c2dbff";
2773
- });
2774
- this._dropZone.addEventListener("drop", event => {
2775
- event.stopPropagation();
2776
- event.preventDefault();
2777
- this.addFiles(Array.from(event.dataTransfer.files));
2778
- this._dropZone.style.background = "";
2779
- });
2780
- this._dropZone.addEventListener("dragleave", _event => {
2781
- this._dropZone.style.background = "";
2782
- });
2783
- }
2784
- }
2785
- componentWillRender() {
2786
- if (this.value) {
2787
- if (this._filePointers.size < this.value.length) {
2788
- this.updateFilePointers();
2789
- }
2790
- }
2791
- }
2792
- render() {
2793
- return (h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass("iu", "background--disabled") }, h("div", { class: "iu__container", onClick: () => this.openFilesDialog() }, h("div", { class: "iu_header" }, this.label ? h("label", { class: this.evalDisabledClass("iu__label", "text--disabled"), title: this.label }, this.label) : null, h("div", { class: this.evalDisabledClass("iu__icon-label", "mouse-pointer--disabled") }, h("button", { class: "iu__file-icon", disabled: !this.enabled }), h("div", { class: this.evalDisabledClass("text text--center text--medium text--primary", "text--disabled") }, this.enabled ? "Arraste e solte ou clique para adicionar arquivos" : "Somente leitura"))), this.buildFooter()), h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, class: "appearanceNone" })));
2794
- }
2795
- buildFooter() {
2796
- if (this._filePointers.size === 0) {
2797
- return null;
2798
- }
2799
- const items = [];
2800
- this._filePointers.forEach(item => items.push(this.buildFileItem(item)));
2801
- return (h("div", { class: "iu__footer" }, items));
2802
- }
2803
- buildFileItem(item) {
2804
- const fileName = item.name;
2805
- const progress = Number(item["progress"]);
2806
- const downloadURL = item["downloadURL"];
2807
- const label = `${fileName} (${this.formatBytes(item.size)})`;
2808
- return (h("div", { class: "iu__item", key: fileName, onClick: evt => evt.stopPropagation() }, h("div", { class: "iu__item-label modificador" }, h("div", { title: label, class: "col--stretch align--middle file__name text text--primary text--small text--ellipsis align--middle" }, downloadURL ? h("a", { href: downloadURL, download: true }, label) : label)), isNaN(progress)
2809
- ?
2810
- null
2811
- :
2812
- h("div", { class: "col col--sd-4 col--stretch align--middle" }, h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })), this.enabled
2813
- ?
2814
- h("div", { class: "col col--stretch align--middle" }, h("button", { class: "btn-cancel ", onClick: () => this.removeFile(fileName) }))
2815
- :
2816
- null));
2817
- }
2818
- evalDisabledClass(regularClasses, disabledClass) {
2819
- return this.enabled ? regularClasses : `${regularClasses} ${disabledClass}`;
2820
- }
2821
- get _host() { return getElement(this); }
2822
- static get watchers() { return {
2823
- "value": ["changeValue"],
2824
- "requestHeaders": ["normalizeRequestHeaders"]
2825
- }; }
2826
- };
2827
- EzUpload.style = ezUploadCss;
2828
-
2829
- const testDuCss = ":host{display:block}";
2830
-
2831
- let TestDu = class {
2832
- constructor(hostRef) {
2833
- registerInstance(this, hostRef);
2834
- }
2835
- /*private _ezButton// : HTMLEzButton;
2836
- private _ezComboBox// : HTMLEzComboBox;
2837
- private _ezDateInput// : HTMLEzDateInput;
2838
- private _ezDateTimeInput// : HTMLEzDateTimeInput;
2839
- private _ezNumberInput// : HTMLEzNumberInput
2840
- private _ezSearch// : HTMLEzSearch
2841
- private _ezUpload// : HTMLEzUpload*/
2842
- componentWillLoad() {
2843
- this.dataUnit = new DataUnit("testes_com_formulario");
2844
- this.dataUnit.metadata = {
2845
- name: "dd://br.com.sankhya.fin.cad.movimentacaoFinanceira/Financeiro",
2846
- label: "Parceiro",
2847
- fields: [
2848
- {
2849
- name: "CODPARC",
2850
- label: "Parceiro",
2851
- dataType: DataType.NUMBER,
2852
- userInterface: UserInterface.SEARCH,
2853
- required: true,
2854
- properties: {}
2855
- },
2856
- {
2857
- name: "RECDESP",
2858
- label: "Receita/Despesa",
2859
- dataType: DataType.TEXT,
2860
- userInterface: UserInterface.OPTIONSELECTOR,
2861
- required: true,
2862
- properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
2863
- },
2864
- {
2865
- name: "P",
2866
- label: "pera",
2867
- dataType: DataType.TEXT,
2868
- userInterface: UserInterface.OPTIONSELECTOR,
2869
- properties: { options: `{"M": "Madura", "V": "Verde", "P": "Passada"}` }
2870
- },
2871
- {
2872
- name: "ME",
2873
- label: "ME",
2874
- dataType: DataType.NUMBER,
2875
- userInterface: UserInterface.DECIMALNUMBER,
2876
- properties: { precision: 4, prettyPrecision: 1 }
2877
- }
2878
- ]
2879
- };
2880
- this.dataUnit.dataLoader = () => new Promise(accept => accept([
2881
- {
2882
- __record__id__: "1321321321321321",
2883
- CODPARC: 10,
2884
- NOMEPARC: "Parceiro 10",
2885
- P: "M",
2886
- L: "Bagaço",
2887
- LI: "Azedo"
2888
- }
2889
- ]));
2890
- }
2891
- render() {
2892
- return (h("ez-form", { dataUnit: this.dataUnit }));
2893
- }
2894
- };
2895
- TestDu.style = testDuCss;
2896
-
2897
- export { EzCalendar as ez_calendar, EzCheck as ez_check, EzCollapsibleBox as ez_collapsible_box, EzComboBox as ez_combo_box, EzDateInput as ez_date_input, EzDateTimeInput as ez_date_time_input, EzForm as ez_form, EzIcon as ez_icon, EzNumberInput as ez_number_input, EzSearch as ez_search, EzTabselector as ez_tabselector, EzTextArea as ez_text_area, EzTextInput as ez_text_input, EzTimeInput as ez_time_input, EzUpload as ez_upload, TestDu as test_du };