@sankhyalabs/ezui 1.1.92 → 1.1.95
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.
- package/dist/cjs/{CSSVarsUtils-66e86394.js → CSSVarsUtils-8fbdf2e0.js} +1 -0
- package/dist/cjs/StringUtils-0ba09df4.js +57 -0
- package/dist/cjs/ez-button_3.cjs.entry.js +578 -0
- package/dist/cjs/ez-calendar_14.cjs.entry.js +2625 -0
- package/dist/cjs/ez-dialog.cjs.entry.js +3 -3
- package/dist/cjs/{ez-button_11.cjs.entry.js → ez-grid.cjs.entry.js} +32 -1439
- package/dist/cjs/ez-icon.cjs.entry.js +42 -0
- package/dist/cjs/ez-modal_2.cjs.entry.js +317 -0
- package/dist/cjs/ez-popover.cjs.entry.js +1 -1
- package/dist/cjs/ez-time-input.cjs.entry.js +2 -2
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/{index-a92e6d04.js → index-6164b259.js} +18 -18
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-check/ez-check.css +3 -3
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +52 -3
- package/dist/collection/components/ez-dialog/ez-dialog.css +14 -2
- package/dist/collection/components/ez-dialog/ez-dialog.js +3 -5
- package/dist/collection/components/ez-form/fieldbuilder/FieldBuilder.js +4 -1
- package/dist/collection/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.js +4 -4
- package/dist/collection/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.js +2 -2
- package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js +2 -2
- package/dist/collection/components/ez-form/fieldbuilder/tpl/FileInput.tpl.js +2 -2
- package/dist/collection/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.js +6 -6
- package/dist/collection/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.js +2 -2
- package/dist/collection/components/ez-form/fieldbuilder/tpl/TextArea.tpl.js +2 -2
- package/dist/collection/components/ez-form/structure/FormSheetMetadata.js +10 -7
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +19 -2
- package/dist/collection/components/ez-grid/ez-grid.css +8 -0
- package/dist/collection/components/ez-grid/ez-grid.js +3 -3
- package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.css +28 -4
- package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.js +6 -5
- package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.css +10 -7
- package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.js +12 -17
- package/dist/collection/components/ez-list/ez-list.css +23 -2
- package/dist/collection/components/ez-list/ez-list.js +138 -68
- package/dist/collection/components/ez-text-input/ez-text-input.css +2 -2
- package/dist/collection/components/ez-text-input/ez-text-input.js +24 -1
- package/dist/collection/components/test-du/test-du.js +1 -1
- package/dist/collection/utils/CSSVarsUtils.js +1 -0
- package/dist/collection/utils/index.js +2 -0
- package/dist/custom-elements/index.js +217 -120
- package/dist/esm/{CSSVarsUtils-aeee9825.js → CSSVarsUtils-667e0016.js} +1 -0
- package/dist/esm/StringUtils-cbf10229.js +55 -0
- package/dist/esm/ez-button_3.entry.js +572 -0
- package/dist/esm/ez-calendar_14.entry.js +2608 -0
- package/dist/esm/ez-dialog.entry.js +3 -3
- package/dist/esm/{ez-button_11.entry.js → ez-grid.entry.js} +24 -1421
- package/dist/esm/ez-icon.entry.js +38 -0
- package/dist/esm/ez-modal_2.entry.js +312 -0
- package/dist/esm/ez-popover.entry.js +1 -1
- package/dist/esm/ez-time-input.entry.js +2 -2
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/{index-4fb1605f.js → index-74a9c220.js} +17 -17
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-0a8018c2.entry.js +1 -0
- package/dist/ezui/{p-552a0b2e.entry.js → p-2617733e.entry.js} +1 -1
- package/dist/ezui/p-2f84ba72.js +1 -0
- package/dist/ezui/{p-d4386e30.entry.js → p-6714a1b2.entry.js} +46 -46
- package/dist/ezui/p-90f6d8a0.entry.js +1 -0
- package/dist/ezui/p-a943d501.entry.js +1 -0
- package/dist/ezui/p-b139372f.entry.js +1 -0
- package/dist/ezui/{p-f0137439.js → p-c6762896.js} +1 -1
- package/dist/ezui/p-d54c157f.js +1 -0
- package/dist/ezui/p-e06e47f1.entry.js +1 -0
- package/dist/ezui/{p-7e0281cd.entry.js → p-ef393d36.entry.js} +1 -1
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +8 -0
- package/dist/types/components/ez-form/ez-form.d.ts +6 -1
- package/dist/types/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.d.ts +2 -1
- package/dist/types/components/ez-form/fieldbuilder/tpl/DateInput.tpl.d.ts +2 -1
- package/dist/types/components/ez-form/fieldbuilder/tpl/FileInput.tpl.d.ts +2 -1
- package/dist/types/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.d.ts +4 -2
- package/dist/types/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.d.ts +2 -1
- package/dist/types/components/ez-form/fieldbuilder/tpl/TextArea.tpl.d.ts +2 -1
- package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +4 -1
- package/dist/types/components/ez-grid/subcomponents/select-box/select-box.d.ts +6 -4
- package/dist/types/components/ez-list/ez-list.d.ts +11 -6
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +4 -0
- package/dist/types/components.d.ts +28 -4
- package/dist/types/utils/index.d.ts +2 -0
- package/package.json +1 -1
- package/dist/cjs/ApplicationUtils-d1c1db56.js +0 -35
- package/dist/cjs/ez-calendar.cjs.entry.js +0 -224
- package/dist/cjs/ez-collapsible-box_7.cjs.entry.js +0 -853
- package/dist/cjs/ez-combo-box.cjs.entry.js +0 -254
- package/dist/cjs/ez-form.cjs.entry.js +0 -753
- package/dist/esm/ApplicationUtils-01280a9d.js +0 -33
- package/dist/esm/ez-calendar.entry.js +0 -220
- package/dist/esm/ez-collapsible-box_7.entry.js +0 -843
- package/dist/esm/ez-combo-box.entry.js +0 -250
- package/dist/esm/ez-form.entry.js +0 -749
- package/dist/ezui/p-0094463f.entry.js +0 -1
- package/dist/ezui/p-020f1285.entry.js +0 -1
- package/dist/ezui/p-038fd0cb.entry.js +0 -1
- package/dist/ezui/p-60469339.entry.js +0 -1
- package/dist/ezui/p-7107d7ef.js +0 -1
- package/dist/ezui/p-8b099482.js +0 -1
- package/dist/ezui/p-d22db59d.entry.js +0 -1
|
@@ -0,0 +1,2625 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-88286449.js');
|
|
6
|
+
const index$1 = require('./index-6164b259.js');
|
|
7
|
+
const FloatingManager = require('./FloatingManager-6cfeb947.js');
|
|
8
|
+
const CSSVarsUtils = require('./CSSVarsUtils-8fbdf2e0.js');
|
|
9
|
+
|
|
10
|
+
class DateUtils {
|
|
11
|
+
static clearTime(date, adjustDayLightSavingTime = true) {
|
|
12
|
+
const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
|
|
13
|
+
return adjustDayLightSavingTime ? DateUtils.adjustDLST(newDate) : newDate;
|
|
14
|
+
}
|
|
15
|
+
static strToDate(strValue, adjustDayLightSavingTime = true, monthYearMode = false) {
|
|
16
|
+
/** monthYearMode é um booleano para usar o formato MM/YYYY.
|
|
17
|
+
* Quando ativado, é retornado o primeiro dia do mês apenas para construir a data.
|
|
18
|
+
* Não há necessidade de verificar o horário de verão quando utilizado esse modo. */
|
|
19
|
+
let parts;
|
|
20
|
+
if (monthYearMode) {
|
|
21
|
+
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);
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
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);
|
|
25
|
+
}
|
|
26
|
+
if (!parts) {
|
|
27
|
+
return undefined;
|
|
28
|
+
}
|
|
29
|
+
var day = monthYearMode ? 1 : Number(parts[1]);
|
|
30
|
+
var month = Number(parts[(monthYearMode ? 1 : 2)]);
|
|
31
|
+
var year = Number(parts[(monthYearMode ? 2 : 3)]);
|
|
32
|
+
var hour = Number(parts[(monthYearMode ? 3 : 4)] || 0);
|
|
33
|
+
var min = Number(parts[(monthYearMode ? 4 : 5)] || 0);
|
|
34
|
+
var sec = Number(parts[(monthYearMode ? 5 : 6)] || 0);
|
|
35
|
+
if (year < 100) {
|
|
36
|
+
year += year < 30 ? 2000 : 1900;
|
|
37
|
+
}
|
|
38
|
+
let date = new Date(year, month - 1, day, hour, min, sec, 0);
|
|
39
|
+
if (adjustDayLightSavingTime === true && !monthYearMode && hour == 0) {
|
|
40
|
+
date = DateUtils.adjustDLST(date);
|
|
41
|
+
}
|
|
42
|
+
return date;
|
|
43
|
+
}
|
|
44
|
+
static adjustDLST(date) {
|
|
45
|
+
//Work around para corrigir o Bug do horário de verão.
|
|
46
|
+
if (date.getHours() == 23) {
|
|
47
|
+
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 1, 0, 0, 0);
|
|
48
|
+
}
|
|
49
|
+
return date;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
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-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{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}.calendarTime{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}.calendarTime__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}";
|
|
54
|
+
|
|
55
|
+
let EzCalendar = class {
|
|
56
|
+
constructor(hostRef) {
|
|
57
|
+
index.registerInstance(this, hostRef);
|
|
58
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
59
|
+
this._firstRender = true;
|
|
60
|
+
this._todayLabel = "Hoje";
|
|
61
|
+
this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
|
|
62
|
+
this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
|
|
63
|
+
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"];
|
|
64
|
+
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"];
|
|
65
|
+
/**
|
|
66
|
+
* A data selecionada no calendário
|
|
67
|
+
*/
|
|
68
|
+
this.value = new Date();
|
|
69
|
+
/**
|
|
70
|
+
* No modo floating o calendário só se tornará visível
|
|
71
|
+
* quando o método show() for acionado.
|
|
72
|
+
*/
|
|
73
|
+
this.floating = false;
|
|
74
|
+
/**
|
|
75
|
+
* Exibe ou não as horas e minutos no calendario
|
|
76
|
+
*/
|
|
77
|
+
this.time = false;
|
|
78
|
+
/**
|
|
79
|
+
* Exibe ou não os segundos no calendario
|
|
80
|
+
*/
|
|
81
|
+
this.showSeconds = false;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Usado no modo floating. Faz com que o componente seja exibido.
|
|
85
|
+
* É possível determinar ajustes de posicionamento através dos parâmetros
|
|
86
|
+
* top, left, bottom e right. Esses parâmetros devem ser informados como
|
|
87
|
+
* strings no formato css.
|
|
88
|
+
*/
|
|
89
|
+
async show(top, left, bottom, right) {
|
|
90
|
+
if (this.floating) {
|
|
91
|
+
this._floatingID = FloatingManager.FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
|
|
92
|
+
window.requestAnimationFrame(() => {
|
|
93
|
+
this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
94
|
+
});
|
|
95
|
+
this.scroll();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
|
|
100
|
+
*/
|
|
101
|
+
async fitVertical(topOffset, bottomOffset) {
|
|
102
|
+
const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
|
|
103
|
+
const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
|
|
104
|
+
if (availableBottom) {
|
|
105
|
+
this.show(topOffset + "px", undefined, "unset");
|
|
106
|
+
}
|
|
107
|
+
else {
|
|
108
|
+
this.show("unset", undefined, bottomOffset + "px");
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Usado no modo floating. Faz com que o componente seja ocultado.
|
|
113
|
+
*/
|
|
114
|
+
async hide() {
|
|
115
|
+
if (this._floatingID !== undefined) {
|
|
116
|
+
FloatingManager.FloatingManager.close(this._floatingID);
|
|
117
|
+
this._floatingID = undefined;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
valueChanged() {
|
|
121
|
+
if (this.value) {
|
|
122
|
+
this._currentPosition.setTime(this.value.getTime());
|
|
123
|
+
this._currentPosition.setDate(1);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
getMonthLabel() {
|
|
127
|
+
return this._monthLabels[this._currentPosition.getMonth()] + " " + this._currentPosition.getFullYear();
|
|
128
|
+
}
|
|
129
|
+
isSelectedDate(d) {
|
|
130
|
+
if (this.value) {
|
|
131
|
+
return this.value.getDate() == d.getDate() && this.value.getMonth() == d.getMonth() && this.value.getFullYear() == d.getFullYear();
|
|
132
|
+
}
|
|
133
|
+
return false;
|
|
134
|
+
}
|
|
135
|
+
changeMonth(offset) {
|
|
136
|
+
this._currentPosition.setMonth(this._currentPosition.getMonth() + offset);
|
|
137
|
+
index.forceUpdate(this);
|
|
138
|
+
}
|
|
139
|
+
selectDate(d) {
|
|
140
|
+
let newDate = d;
|
|
141
|
+
if (this.value && (this.time || this.showSeconds)) {
|
|
142
|
+
newDate.setHours(this.value.getHours());
|
|
143
|
+
newDate.setMinutes(this.value.getMinutes());
|
|
144
|
+
if (this.showSeconds) {
|
|
145
|
+
newDate.setSeconds(this.value.getSeconds());
|
|
146
|
+
}
|
|
147
|
+
else {
|
|
148
|
+
newDate.setSeconds(0);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
this.value = newDate;
|
|
152
|
+
this.ezChange.emit();
|
|
153
|
+
}
|
|
154
|
+
selectHours(hour) {
|
|
155
|
+
if (!this.value) {
|
|
156
|
+
this.value = new Date();
|
|
157
|
+
}
|
|
158
|
+
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), hour, this.value.getMinutes(), this.value.getSeconds());
|
|
159
|
+
this.ezChange.emit();
|
|
160
|
+
}
|
|
161
|
+
selectMinutes(minute) {
|
|
162
|
+
if (!this.value) {
|
|
163
|
+
this.value = new Date();
|
|
164
|
+
}
|
|
165
|
+
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), minute, this.value.getSeconds());
|
|
166
|
+
this.ezChange.emit();
|
|
167
|
+
}
|
|
168
|
+
selectSeconds(second) {
|
|
169
|
+
if (!this.value) {
|
|
170
|
+
this.value = new Date();
|
|
171
|
+
}
|
|
172
|
+
this.value = new Date(this.value.getFullYear(), this.value.getMonth(), this.value.getDate(), this.value.getHours(), this.value.getMinutes(), second);
|
|
173
|
+
this.ezChange.emit();
|
|
174
|
+
}
|
|
175
|
+
updateScroll(element) {
|
|
176
|
+
if (element) {
|
|
177
|
+
const { scrollHeight, clientHeight, scrollTop } = element;
|
|
178
|
+
const remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
|
|
179
|
+
if (remainingScroll > 0) {
|
|
180
|
+
element.classList.add("endHidden");
|
|
181
|
+
}
|
|
182
|
+
else {
|
|
183
|
+
element.classList.remove("endHidden");
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
componentDidRender() {
|
|
188
|
+
if (this.floating && this._firstRender) {
|
|
189
|
+
this._calendarHeight = this._box.clientHeight;
|
|
190
|
+
this._box.remove();
|
|
191
|
+
this._firstRender = false;
|
|
192
|
+
}
|
|
193
|
+
this.updateScroll(this._hoursScroll);
|
|
194
|
+
this.updateScroll(this._minutesScroll);
|
|
195
|
+
this.updateScroll(this._secondsScroll);
|
|
196
|
+
}
|
|
197
|
+
componentDidLoad() {
|
|
198
|
+
this.scroll();
|
|
199
|
+
}
|
|
200
|
+
scroll() {
|
|
201
|
+
if (this.time || this.showSeconds) {
|
|
202
|
+
this._hoursScroll.scrollTop = this._hoursSelect.offsetTop - 64;
|
|
203
|
+
this._minutesScroll.scrollTop = this._minutesSelect.offsetTop - 64;
|
|
204
|
+
this.updateScroll(this._hoursScroll);
|
|
205
|
+
this.updateScroll(this._minutesScroll);
|
|
206
|
+
if (this.showSeconds) {
|
|
207
|
+
this._secondsScroll.scrollTop = this._secondsSelect.offsetTop - 64;
|
|
208
|
+
this.updateScroll(this._secondsScroll);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
render() {
|
|
213
|
+
if (this._currentPosition == null) {
|
|
214
|
+
this._currentPosition = new Date();
|
|
215
|
+
if (this.value) {
|
|
216
|
+
this._currentPosition.setTime(this.value.getTime());
|
|
217
|
+
}
|
|
218
|
+
this._currentPosition.setDate(1);
|
|
219
|
+
}
|
|
220
|
+
const firstDate = new Date();
|
|
221
|
+
firstDate.setTime(this._currentPosition.getTime());
|
|
222
|
+
firstDate.setDate(1 - firstDate.getDay());
|
|
223
|
+
return (index.h("section", { ref: elem => this._container = elem }, index.h("div", { ref: elem => this._box = elem, style: { display: 'flex' } }, index.h("div", { class: "calendar" }, index.h("div", { class: "calendar__header" }, index.h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), index.h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), index.h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), index.h("div", { class: "calendar__body" }, index.h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => index.h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => index.h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index$1 => {
|
|
224
|
+
const date = new Date();
|
|
225
|
+
date.setTime(firstDate.getTime());
|
|
226
|
+
date.setDate(date.getDate() + offset + index$1);
|
|
227
|
+
let classNames = "calendar__cell";
|
|
228
|
+
if (this._currentPosition.getMonth() != date.getMonth()) {
|
|
229
|
+
classNames += " calendar__cell--secondary";
|
|
230
|
+
}
|
|
231
|
+
else if (this.isSelectedDate(date)) {
|
|
232
|
+
classNames += " calendar__cell--selected";
|
|
233
|
+
}
|
|
234
|
+
return index.h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
|
|
235
|
+
})))), index.h("div", { class: "calendar__footer" }, index.h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
|
|
236
|
+
index.h("div", { class: "calendarTime" }, index.h("div", { class: "calendarTime__header" }, index.h("div", null, "H"), index.h("div", { class: "separatorTime" }, ":"), index.h("div", null, "M"), this.showSeconds &&
|
|
237
|
+
index.h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
|
|
238
|
+
index.h("div", null, "S")), index.h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, index.h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index$1) => {
|
|
239
|
+
if (index$1 === this.value.getHours()) {
|
|
240
|
+
return (index.h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem }, index.h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index$1) }, offset), index.h("div", { class: "separatorTime" }, ":")));
|
|
241
|
+
}
|
|
242
|
+
else {
|
|
243
|
+
return (index.h("div", { style: { display: 'flex' } }, index.h("div", { class: "calendar__cell", onClick: () => this.selectHours(index$1) }, offset), index.h("div", { class: "separatorTime" }, ":")));
|
|
244
|
+
}
|
|
245
|
+
})), index.h("div", { class: "calendar__column", ref: elem => this._minutesScroll = elem, onScroll: () => this.updateScroll(this._minutesScroll) }, this._minutosLabel.map((offset, index$1) => {
|
|
246
|
+
if (index$1 === this.value.getMinutes()) {
|
|
247
|
+
return (index.h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem }, index.h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index$1) }, offset), this.showSeconds && index.h("div", { class: "separatorTime" }, ":")));
|
|
248
|
+
}
|
|
249
|
+
else {
|
|
250
|
+
return (index.h("div", { style: { display: 'flex' } }, index.h("div", { class: "calendar__cell", onClick: () => this.selectMinutes(index$1) }, offset), this.showSeconds && index.h("div", { class: "separatorTime" }, ":")));
|
|
251
|
+
}
|
|
252
|
+
})), this.showSeconds &&
|
|
253
|
+
index.h("div", { class: "calendar__column", ref: elem => this._secondsScroll = elem, onScroll: () => this.updateScroll(this._secondsScroll) }, this._minutosLabel.map((offset, index$1) => {
|
|
254
|
+
if (index$1 === this.value.getSeconds()) {
|
|
255
|
+
return (index.h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index$1), ref: elem => this._secondsSelect = elem }, offset));
|
|
256
|
+
}
|
|
257
|
+
else {
|
|
258
|
+
return (index.h("div", { class: "calendar__cell", onClick: () => this.selectSeconds(index$1) }, offset));
|
|
259
|
+
}
|
|
260
|
+
})))))));
|
|
261
|
+
}
|
|
262
|
+
static get watchers() { return {
|
|
263
|
+
"value": ["valueChanged"]
|
|
264
|
+
}; }
|
|
265
|
+
};
|
|
266
|
+
EzCalendar.style = ezCalendarCss;
|
|
267
|
+
|
|
268
|
+
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) solid var(--text--secondary);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(--border--small) solid var(--color--primary);background-color:var(--ez-switch--checked--background-color)}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)}";
|
|
269
|
+
|
|
270
|
+
let EzCheck = class {
|
|
271
|
+
constructor(hostRef) {
|
|
272
|
+
index.registerInstance(this, hostRef);
|
|
273
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
274
|
+
/**
|
|
275
|
+
* Deixa o campo disponível ou não para interação com o usuário.
|
|
276
|
+
*/
|
|
277
|
+
this.enabled = true;
|
|
278
|
+
/**
|
|
279
|
+
* Existem dois modos de visualização: regular e switch.
|
|
280
|
+
* Se esta propriedade for omitida, o componete assume o formato "regular".
|
|
281
|
+
* No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
|
|
282
|
+
* No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
|
|
283
|
+
*/
|
|
284
|
+
this.mode = "regular";
|
|
285
|
+
}
|
|
286
|
+
adjustMode() {
|
|
287
|
+
if (this.mode === "switch") {
|
|
288
|
+
this._inputElem.classList.remove("regularMode");
|
|
289
|
+
this._inputElem.classList.add("switchMode");
|
|
290
|
+
}
|
|
291
|
+
else {
|
|
292
|
+
this._inputElem.classList.remove("switchMode");
|
|
293
|
+
this._inputElem.classList.add("regularMode");
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
//---------------------------------------------
|
|
297
|
+
// Public methods
|
|
298
|
+
//---------------------------------------------
|
|
299
|
+
/**
|
|
300
|
+
* Devolve o modo escolhido para o componente
|
|
301
|
+
*/
|
|
302
|
+
async getMode() {
|
|
303
|
+
return this.mode;
|
|
304
|
+
}
|
|
305
|
+
/**
|
|
306
|
+
* Faz o foco no componente de input
|
|
307
|
+
*/
|
|
308
|
+
async setFocus() {
|
|
309
|
+
this._inputElem.focus();
|
|
310
|
+
}
|
|
311
|
+
componentDidLoad() {
|
|
312
|
+
this.adjustMode();
|
|
313
|
+
}
|
|
314
|
+
changeValue() {
|
|
315
|
+
this.value = !this.value;
|
|
316
|
+
this.ezChange.emit(this.value);
|
|
317
|
+
}
|
|
318
|
+
getLabelClasses() {
|
|
319
|
+
let classes = "label";
|
|
320
|
+
if (!this.enabled) {
|
|
321
|
+
classes += " label--disabled";
|
|
322
|
+
}
|
|
323
|
+
return classes;
|
|
324
|
+
}
|
|
325
|
+
render() {
|
|
326
|
+
return (index.h(index.Host, null, index.h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }), this.label ? index.h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
|
|
327
|
+
}
|
|
328
|
+
static get watchers() { return {
|
|
329
|
+
"mode": ["adjustMode"]
|
|
330
|
+
}; }
|
|
331
|
+
};
|
|
332
|
+
EzCheck.style = ezCheckCss;
|
|
333
|
+
|
|
334
|
+
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}";
|
|
335
|
+
|
|
336
|
+
let EzCollapsibleBox = class {
|
|
337
|
+
constructor(hostRef) {
|
|
338
|
+
index.registerInstance(this, hostRef);
|
|
339
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
340
|
+
/**
|
|
341
|
+
* Valor externalizado que garante a exibição ou não do componente
|
|
342
|
+
*/
|
|
343
|
+
this.value = false;
|
|
344
|
+
/**
|
|
345
|
+
* Define o tamanho do texto e do ícone do componente.
|
|
346
|
+
*/
|
|
347
|
+
this.headerSize = "small";
|
|
348
|
+
/**
|
|
349
|
+
* Define o local onde o ícone será renderizado.
|
|
350
|
+
*/
|
|
351
|
+
this.iconPlacement = "left";
|
|
352
|
+
}
|
|
353
|
+
observeValue() {
|
|
354
|
+
this.ezChange.emit();
|
|
355
|
+
}
|
|
356
|
+
/**
|
|
357
|
+
* Esconde ou revela o conteúdo do componente
|
|
358
|
+
*/
|
|
359
|
+
async showHide() {
|
|
360
|
+
this.value = !this.value;
|
|
361
|
+
}
|
|
362
|
+
render() {
|
|
363
|
+
return (index.h(index.Host, null, this.iconPlacement == "right" ?
|
|
364
|
+
index.h("div", { class: "collapsible-box__title" }, index.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), index.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() }))
|
|
365
|
+
:
|
|
366
|
+
index.h("div", { class: "collapsible-box__title" }, index.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() }), index.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 ? index.h("slot", null) : null));
|
|
367
|
+
}
|
|
368
|
+
static get watchers() { return {
|
|
369
|
+
"value": ["observeValue"]
|
|
370
|
+
}; }
|
|
371
|
+
};
|
|
372
|
+
EzCollapsibleBox.style = ezCollapsibleBoxCss;
|
|
373
|
+
|
|
374
|
+
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)}";
|
|
375
|
+
|
|
376
|
+
let EzComboBox = class {
|
|
377
|
+
constructor(hostRef) {
|
|
378
|
+
index.registerInstance(this, hostRef);
|
|
379
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
380
|
+
/**
|
|
381
|
+
* Deixa o campo disponível ou não para interação com usuário.
|
|
382
|
+
*/
|
|
383
|
+
this.enabled = true;
|
|
384
|
+
/**
|
|
385
|
+
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
386
|
+
*/
|
|
387
|
+
this.showSelectedValue = false;
|
|
388
|
+
/**
|
|
389
|
+
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
390
|
+
*/
|
|
391
|
+
this.showOptionValue = false;
|
|
392
|
+
/**
|
|
393
|
+
* Remove a opção vazia da lista de opções
|
|
394
|
+
*/
|
|
395
|
+
this.suppressEmptyOption = false;
|
|
396
|
+
/**
|
|
397
|
+
* Permite exibir a mensagem de erro.
|
|
398
|
+
*/
|
|
399
|
+
this.canShowError = true;
|
|
400
|
+
}
|
|
401
|
+
internalUpdate() {
|
|
402
|
+
if (this._inputElement) {
|
|
403
|
+
this._inputElement.value = this.getText();
|
|
404
|
+
}
|
|
405
|
+
this.hideOptions();
|
|
406
|
+
this._criteria = undefined;
|
|
407
|
+
this._preSelection = undefined;
|
|
408
|
+
this.updateVisibleOptions();
|
|
409
|
+
}
|
|
410
|
+
getText() {
|
|
411
|
+
let text = "";
|
|
412
|
+
const selected = this.getSelectedOption();
|
|
413
|
+
if (selected) {
|
|
414
|
+
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
415
|
+
}
|
|
416
|
+
return text;
|
|
417
|
+
}
|
|
418
|
+
getSelectedOption() {
|
|
419
|
+
if (typeof this.value === "string" || this.value instanceof String) {
|
|
420
|
+
return this._visibleOptions.find(o => o.value === this.value);
|
|
421
|
+
}
|
|
422
|
+
return this.value;
|
|
423
|
+
}
|
|
424
|
+
updateVisibleOptions() {
|
|
425
|
+
let opts = this._source || [];
|
|
426
|
+
if (!this.searchMode && this._criteria) {
|
|
427
|
+
const upperCriteria = this._criteria.toUpperCase();
|
|
428
|
+
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
429
|
+
}
|
|
430
|
+
if (this.suppressEmptyOption) {
|
|
431
|
+
this._visibleOptions = opts;
|
|
432
|
+
}
|
|
433
|
+
else {
|
|
434
|
+
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
buildItem(opt, index$1) {
|
|
438
|
+
return index.h("li", { class: index$1 === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, index.h("span", { class: "item--label", title: opt.label }, opt.label), this.showOptionValue ? index.h("span", { class: "item--value", title: opt.value }, opt.value) : undefined);
|
|
439
|
+
}
|
|
440
|
+
showOptions() {
|
|
441
|
+
if (!this.enabled) {
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
445
|
+
//posição errada no futuro. Preferi fazer simples no começo,
|
|
446
|
+
//porque não quis onerar o text input com essa funcionalidade...
|
|
447
|
+
const top = (this.errorMessage || !this.canShowError) ? "0px" : "-17px";
|
|
448
|
+
this._floatingID = FloatingManager.FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
449
|
+
window.requestAnimationFrame(() => {
|
|
450
|
+
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
451
|
+
});
|
|
452
|
+
}
|
|
453
|
+
hideOptions() {
|
|
454
|
+
if (this._floatingID !== undefined) {
|
|
455
|
+
FloatingManager.FloatingManager.close(this._floatingID);
|
|
456
|
+
}
|
|
457
|
+
this._floatingID = undefined;
|
|
458
|
+
}
|
|
459
|
+
isOptionsVisible() {
|
|
460
|
+
return this._floatingID !== undefined && FloatingManager.FloatingManager.isFloating(this._floatingID);
|
|
461
|
+
}
|
|
462
|
+
nextOption() {
|
|
463
|
+
if (this.searchMode && !this.isOptionsVisible()) {
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
466
|
+
this.showOptions();
|
|
467
|
+
this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
|
|
468
|
+
this.scrollToOption(this._visibleOptions[this._preSelection], true);
|
|
469
|
+
}
|
|
470
|
+
previousOption() {
|
|
471
|
+
this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
|
|
472
|
+
this.scrollToOption(this._visibleOptions[this._preSelection], false);
|
|
473
|
+
}
|
|
474
|
+
scrollToOption(opt, down) {
|
|
475
|
+
window.requestAnimationFrame(() => {
|
|
476
|
+
const liElem = this._optionsList.querySelector(`li#item_${opt.value}`);
|
|
477
|
+
if (liElem) {
|
|
478
|
+
const parent = liElem.parentElement;
|
|
479
|
+
const parentRect = parent.getBoundingClientRect();
|
|
480
|
+
const itemRect = liElem.getBoundingClientRect();
|
|
481
|
+
if (down && itemRect.bottom > parentRect.bottom) {
|
|
482
|
+
parent.scrollTop = itemRect.top;
|
|
483
|
+
}
|
|
484
|
+
else if (!down && itemRect.top < parentRect.top) {
|
|
485
|
+
parent.scrollTop = 0;
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
});
|
|
489
|
+
}
|
|
490
|
+
selectCurrentOption() {
|
|
491
|
+
if (this._preSelection !== undefined) {
|
|
492
|
+
this.selectOption(this._visibleOptions[this._preSelection]);
|
|
493
|
+
this._preSelection = undefined;
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
selectOption(opt) {
|
|
497
|
+
const currentOpt = this.getSelectedOption();
|
|
498
|
+
if (currentOpt !== opt) {
|
|
499
|
+
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
500
|
+
this.value = adjustedOpt;
|
|
501
|
+
this.errorMessage = "";
|
|
502
|
+
this.ezChange.emit(adjustedOpt);
|
|
503
|
+
}
|
|
504
|
+
else {
|
|
505
|
+
this.internalUpdate();
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
updateSource(source) {
|
|
509
|
+
if (source instanceof Promise) {
|
|
510
|
+
source.then(result => this.updateSource(result));
|
|
511
|
+
this.updateVisibleOptions();
|
|
512
|
+
}
|
|
513
|
+
else {
|
|
514
|
+
this._source = source;
|
|
515
|
+
this.updateVisibleOptions();
|
|
516
|
+
}
|
|
517
|
+
}
|
|
518
|
+
loadOptions(mode, argument = "") {
|
|
519
|
+
this._criteria = argument;
|
|
520
|
+
if (this.optionLoader) {
|
|
521
|
+
this.updateSource(this.optionLoader({ mode, argument }));
|
|
522
|
+
}
|
|
523
|
+
else {
|
|
524
|
+
this.updateSource(this.options);
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
cancelPreselection() {
|
|
528
|
+
if (!this._inputElement.value && this.value) {
|
|
529
|
+
this.selectOption(undefined);
|
|
530
|
+
}
|
|
531
|
+
else {
|
|
532
|
+
this.internalUpdate();
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
//---------------------------------------------
|
|
536
|
+
// Lifecycle web component
|
|
537
|
+
//---------------------------------------------
|
|
538
|
+
componentWillLoad() {
|
|
539
|
+
if (this.options === undefined) {
|
|
540
|
+
this.options = [];
|
|
541
|
+
const optionsTags = this.el.querySelectorAll("option");
|
|
542
|
+
if (optionsTags) {
|
|
543
|
+
optionsTags.forEach(e => {
|
|
544
|
+
let label = e.innerText;
|
|
545
|
+
let value = e.getAttribute("value");
|
|
546
|
+
if (!value) {
|
|
547
|
+
value = label;
|
|
548
|
+
}
|
|
549
|
+
this.options.push({ label, value });
|
|
550
|
+
e.hidden = true;
|
|
551
|
+
});
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
if (this.searchMode) {
|
|
555
|
+
this.updateSource([]);
|
|
556
|
+
}
|
|
557
|
+
else {
|
|
558
|
+
this.loadOptions("PRELOAD");
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
componentDidRender() {
|
|
562
|
+
if (this._floatingID === undefined) {
|
|
563
|
+
this._optionsList.remove();
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
componentDidLoad() {
|
|
567
|
+
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this.el, this._inputElement);
|
|
568
|
+
}
|
|
569
|
+
//---------------------------------------------
|
|
570
|
+
// Event handlers
|
|
571
|
+
//---------------------------------------------
|
|
572
|
+
onTextInputChangeHandler(event) {
|
|
573
|
+
if (!this._criteria) {
|
|
574
|
+
this._inputElement.value = event.data;
|
|
575
|
+
}
|
|
576
|
+
const argument = event.target.value;
|
|
577
|
+
this._criteria = argument;
|
|
578
|
+
if (this._criteria) {
|
|
579
|
+
if (this.searchMode) {
|
|
580
|
+
if (this._changeDeboucingTimeout) {
|
|
581
|
+
window.clearTimeout(this._changeDeboucingTimeout);
|
|
582
|
+
}
|
|
583
|
+
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
584
|
+
this.loadOptions("PREDICTIVE", argument);
|
|
585
|
+
}, 200);
|
|
586
|
+
}
|
|
587
|
+
else {
|
|
588
|
+
this.updateVisibleOptions();
|
|
589
|
+
}
|
|
590
|
+
this.showOptions();
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
onTextInputClickHandler() {
|
|
594
|
+
if (!this.searchMode) {
|
|
595
|
+
this.showOptions();
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
keyDownHandler(event) {
|
|
599
|
+
switch (event.key) {
|
|
600
|
+
case "ArrowDown":
|
|
601
|
+
this.nextOption();
|
|
602
|
+
break;
|
|
603
|
+
case "ArrowUp":
|
|
604
|
+
this.previousOption();
|
|
605
|
+
break;
|
|
606
|
+
case "Enter":
|
|
607
|
+
this.selectCurrentOption();
|
|
608
|
+
break;
|
|
609
|
+
case "Escape":
|
|
610
|
+
this.cancelPreselection();
|
|
611
|
+
break;
|
|
612
|
+
}
|
|
613
|
+
event.stopPropagation();
|
|
614
|
+
}
|
|
615
|
+
onTextInputFocusOutHandler() {
|
|
616
|
+
this.cancelPreselection();
|
|
617
|
+
}
|
|
618
|
+
render() {
|
|
619
|
+
return (index.h(index.Host, null, index.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 ?
|
|
620
|
+
index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
621
|
+
:
|
|
622
|
+
index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
|
|
623
|
+
}
|
|
624
|
+
get el() { return index.getElement(this); }
|
|
625
|
+
static get watchers() { return {
|
|
626
|
+
"value": ["internalUpdate"]
|
|
627
|
+
}; }
|
|
628
|
+
};
|
|
629
|
+
EzComboBox.style = ezComboBoxCss;
|
|
630
|
+
|
|
631
|
+
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)}";
|
|
632
|
+
|
|
633
|
+
let EzDateInput = class {
|
|
634
|
+
constructor(hostRef) {
|
|
635
|
+
index.registerInstance(this, hostRef);
|
|
636
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
637
|
+
/**
|
|
638
|
+
* Deixa o campo disponível ou não para uso.
|
|
639
|
+
*/
|
|
640
|
+
this.enabled = true;
|
|
641
|
+
}
|
|
642
|
+
setLabel() {
|
|
643
|
+
this._textInput.label = this.label;
|
|
644
|
+
}
|
|
645
|
+
setErrorMessage() {
|
|
646
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
647
|
+
}
|
|
648
|
+
applyValueToInput() {
|
|
649
|
+
if (this._textInput) {
|
|
650
|
+
this._textInput.value = this.getTextValue(this.value);
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
changeValue(newValue) {
|
|
654
|
+
newValue = newValue == null ? null : DateUtils.clearTime(newValue);
|
|
655
|
+
this._textInput.errorMessage = "";
|
|
656
|
+
if (newValue !== this.value) {
|
|
657
|
+
this.value = newValue;
|
|
658
|
+
this.ezChange.emit();
|
|
659
|
+
}
|
|
660
|
+
}
|
|
661
|
+
showCalendar() {
|
|
662
|
+
this.parseDate();
|
|
663
|
+
this._calendar.value = this.value;
|
|
664
|
+
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
665
|
+
//posição errada no futuro. Preferi fazer simples no começo,
|
|
666
|
+
//porque não quis onerar o text input com essa funcionalidade...
|
|
667
|
+
const top = this._textInput.errorMessage ? 0 : -17;
|
|
668
|
+
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
669
|
+
}
|
|
670
|
+
hideCalendar() {
|
|
671
|
+
this.changeValue(this._calendar.value);
|
|
672
|
+
this._calendar.hide();
|
|
673
|
+
}
|
|
674
|
+
parseDate() {
|
|
675
|
+
const strValue = this._textInput.value;
|
|
676
|
+
const parsedDate = DateUtils.strToDate(strValue);
|
|
677
|
+
if (parsedDate || !strValue) {
|
|
678
|
+
if (this.value === parsedDate) {
|
|
679
|
+
this.changeValue(this.value);
|
|
680
|
+
}
|
|
681
|
+
else {
|
|
682
|
+
this.changeValue(parsedDate);
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
else {
|
|
686
|
+
this._textInput.errorMessage = "O valor digitado não é uma data válida";
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
getTextValue(d) {
|
|
690
|
+
return d ? new Intl.DateTimeFormat("pt-BR").format(d) : null;
|
|
691
|
+
}
|
|
692
|
+
componentDidLoad() {
|
|
693
|
+
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
694
|
+
}
|
|
695
|
+
render() {
|
|
696
|
+
return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
|
|
697
|
+
if (event.key === "H" || event.key === "h")
|
|
698
|
+
this.changeValue(new Date());
|
|
699
|
+
}, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
|
|
700
|
+
}
|
|
701
|
+
get _elem() { return index.getElement(this); }
|
|
702
|
+
static get watchers() { return {
|
|
703
|
+
"label": ["setLabel"],
|
|
704
|
+
"errorMessage": ["setErrorMessage"],
|
|
705
|
+
"value": ["applyValueToInput"]
|
|
706
|
+
}; }
|
|
707
|
+
};
|
|
708
|
+
EzDateInput.style = ezDateInputCss;
|
|
709
|
+
|
|
710
|
+
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)}";
|
|
711
|
+
|
|
712
|
+
let EzDateTimeInput = class {
|
|
713
|
+
constructor(hostRef) {
|
|
714
|
+
index.registerInstance(this, hostRef);
|
|
715
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
716
|
+
/**
|
|
717
|
+
* Deixa o campo disponível ou não para uso.
|
|
718
|
+
*/
|
|
719
|
+
this.enabled = true;
|
|
720
|
+
/**
|
|
721
|
+
* Exibe ou não os segundos no input
|
|
722
|
+
*/
|
|
723
|
+
this.showSeconds = false;
|
|
724
|
+
}
|
|
725
|
+
setLabel() {
|
|
726
|
+
this._textInput.label = this.label;
|
|
727
|
+
}
|
|
728
|
+
setErrorMessage() {
|
|
729
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
730
|
+
}
|
|
731
|
+
applyValueToInput() {
|
|
732
|
+
if (this._textInput) {
|
|
733
|
+
this._textInput.value = this.getTextValue(this.value);
|
|
734
|
+
}
|
|
735
|
+
}
|
|
736
|
+
onChangeKeyDown(ev) {
|
|
737
|
+
const input = this._textInput.shadowRoot.querySelector('input');
|
|
738
|
+
if (ev.key === "H" || ev.key === "h") {
|
|
739
|
+
this.changeValue(new Date());
|
|
740
|
+
}
|
|
741
|
+
else if (ev.shiftKey && ev.key === "Tab") {
|
|
742
|
+
if (input.selectionStart > 0) {
|
|
743
|
+
let selectIni = input.value.lastIndexOf(" ", input.selectionStart);
|
|
744
|
+
if (selectIni !== -1) {
|
|
745
|
+
input.setSelectionRange(0, selectIni);
|
|
746
|
+
ev.preventDefault();
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
else if (ev.key === "Tab") {
|
|
751
|
+
if (input.value.length !== input.selectionEnd) {
|
|
752
|
+
let selectIni = input.value.indexOf(" ", input.selectionEnd);
|
|
753
|
+
selectIni = selectIni === -1 ? input.selectionEnd : selectIni + 1;
|
|
754
|
+
input.setSelectionRange(selectIni, input.value.length);
|
|
755
|
+
ev.preventDefault();
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
onFocused() {
|
|
760
|
+
const input = this._textInput.shadowRoot.querySelector('input');
|
|
761
|
+
if (input.selectionStart !== input.selectionEnd) {
|
|
762
|
+
let selectIni = input.value.indexOf(" ", input.selectionStart);
|
|
763
|
+
selectIni = selectIni === -1 ? input.value.length : selectIni;
|
|
764
|
+
input.setSelectionRange(0, selectIni);
|
|
765
|
+
}
|
|
766
|
+
}
|
|
767
|
+
onClicked() {
|
|
768
|
+
const input = this._textInput.shadowRoot.querySelector('input');
|
|
769
|
+
let selectIni = input.value.lastIndexOf(" ", input.selectionEnd);
|
|
770
|
+
selectIni = selectIni === -1 ? 0 : selectIni + 1;
|
|
771
|
+
selectIni = selectIni > input.selectionEnd ? 0 : selectIni;
|
|
772
|
+
let selectFin = selectIni === 0 ? input.value.indexOf(" ") : input.value.length;
|
|
773
|
+
input.setSelectionRange(selectIni, selectFin);
|
|
774
|
+
}
|
|
775
|
+
changeValue(newValue) {
|
|
776
|
+
this._textInput.errorMessage = "";
|
|
777
|
+
if (newValue !== this.value) {
|
|
778
|
+
this.value = newValue;
|
|
779
|
+
this.ezChange.emit();
|
|
780
|
+
}
|
|
781
|
+
}
|
|
782
|
+
showCalendar() {
|
|
783
|
+
const top = this._textInput.errorMessage ? 0 : -17;
|
|
784
|
+
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
785
|
+
this._calendar.style.visibility = 'inherit';
|
|
786
|
+
}
|
|
787
|
+
parseDate() {
|
|
788
|
+
const strValue = this._textInput.value;
|
|
789
|
+
const partsDateTime = (strValue && strValue.length > 0) ? strValue.split(" ") : [];
|
|
790
|
+
const onlyDate = partsDateTime.length > 0 ? partsDateTime[0] : strValue;
|
|
791
|
+
const onlyTime = partsDateTime[1] ? partsDateTime[1] : "";
|
|
792
|
+
const parsedTime = index$1.TimeFormatter.prepareValue(onlyTime, this.showSeconds);
|
|
793
|
+
const strDateTime = onlyDate + (parsedTime && " " + parsedTime);
|
|
794
|
+
const parsedDate = DateUtils.strToDate(strDateTime);
|
|
795
|
+
if (parsedDate || !strValue) {
|
|
796
|
+
if (this.value === parsedDate) {
|
|
797
|
+
this.changeValue(this.value);
|
|
798
|
+
}
|
|
799
|
+
else {
|
|
800
|
+
this.changeValue(parsedDate);
|
|
801
|
+
}
|
|
802
|
+
}
|
|
803
|
+
else {
|
|
804
|
+
this._textInput.errorMessage = "O valor digitado não é uma data válida";
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
getTextValue(d) {
|
|
808
|
+
const options = {
|
|
809
|
+
year: 'numeric', month: 'numeric', day: 'numeric',
|
|
810
|
+
hour: 'numeric', minute: 'numeric'
|
|
811
|
+
};
|
|
812
|
+
const optionsSecond = {
|
|
813
|
+
year: 'numeric', month: 'numeric', day: 'numeric',
|
|
814
|
+
hour: 'numeric', minute: 'numeric', second: 'numeric'
|
|
815
|
+
};
|
|
816
|
+
return d ? (new Intl.DateTimeFormat('pt-BR', this.showSeconds ? optionsSecond : options).format(d)) : null;
|
|
817
|
+
}
|
|
818
|
+
componentDidLoad() {
|
|
819
|
+
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
820
|
+
}
|
|
821
|
+
render() {
|
|
822
|
+
return (index.h(index.Host, null, index.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() }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
|
|
823
|
+
}
|
|
824
|
+
get _elem() { return index.getElement(this); }
|
|
825
|
+
static get watchers() { return {
|
|
826
|
+
"label": ["setLabel"],
|
|
827
|
+
"errorMessage": ["setErrorMessage"],
|
|
828
|
+
"value": ["applyValueToInput"]
|
|
829
|
+
}; }
|
|
830
|
+
};
|
|
831
|
+
EzDateTimeInput.style = ezDateTimeInputCss;
|
|
832
|
+
|
|
833
|
+
const buildTextArea = ({ name, label, readOnly }) => {
|
|
834
|
+
return (index.h("div", { class: "col col--sd-12 padding--small", key: name },
|
|
835
|
+
index.h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
|
|
836
|
+
};
|
|
837
|
+
|
|
838
|
+
const buildTextInput = ({ name, label }) => {
|
|
839
|
+
return (index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
|
|
840
|
+
index.h("ez-text-input", { label: label, "data-field-name": name, key: name })));
|
|
841
|
+
};
|
|
842
|
+
|
|
843
|
+
const buildSwitch = (fieldConfig) => {
|
|
844
|
+
return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, true);
|
|
845
|
+
};
|
|
846
|
+
const buildCheckBox = (fieldConfig) => {
|
|
847
|
+
return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
|
|
848
|
+
};
|
|
849
|
+
function buildField$1(fieldName, fieldLabel, readOnly, switchMode = false) {
|
|
850
|
+
return (index.h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" },
|
|
851
|
+
index.h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
const buildComboBox = ({ name, label, readOnly }, properties) => {
|
|
855
|
+
const prop = properties === null || properties === void 0 ? void 0 : properties.options;
|
|
856
|
+
let options;
|
|
857
|
+
if (typeof prop === "string") {
|
|
858
|
+
const parsed = JSON.parse(prop);
|
|
859
|
+
options = Object.keys(parsed).map(key => { return { value: key, label: parsed[key] }; });
|
|
860
|
+
}
|
|
861
|
+
else {
|
|
862
|
+
options = prop;
|
|
863
|
+
}
|
|
864
|
+
return (index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
|
|
865
|
+
index.h("ez-combo-box", { enabled: !readOnly, label: label, "data-field-name": name, key: name, options: options })));
|
|
866
|
+
};
|
|
867
|
+
|
|
868
|
+
const buildSearch = ({ name, label, readOnly }) => {
|
|
869
|
+
return (index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
|
|
870
|
+
index.h("ez-search", { enabled: !readOnly, label: label, optionLoader: (_argument) => { }, "data-field-name": name, key: name })));
|
|
871
|
+
};
|
|
872
|
+
|
|
873
|
+
const buildFile = ({ name, label, readOnly }) => {
|
|
874
|
+
return (index.h("div", { class: "col col--sd-12 padding--small" },
|
|
875
|
+
index.h("ez-upload", { enabled: !readOnly, label: label, urlUpload: "", requestHeaders: "", maxFiles: 10, "data-field-name": name, key: name })));
|
|
876
|
+
};
|
|
877
|
+
|
|
878
|
+
const buildDate = ({ name, label, readOnly }) => {
|
|
879
|
+
return (index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
|
|
880
|
+
index.h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
|
|
881
|
+
};
|
|
882
|
+
const buildTimeDate = ({ name, label }) => {
|
|
883
|
+
return (index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
|
|
884
|
+
index.h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
|
|
885
|
+
};
|
|
886
|
+
|
|
887
|
+
const buildDecimal = ({ name, label, readOnly }, properties) => {
|
|
888
|
+
const precision = Number((properties === null || properties === void 0 ? void 0 : properties.precision) || 2);
|
|
889
|
+
const prettyPrecision = Number((properties === null || properties === void 0 ? void 0 : properties.prettyPrecision) || precision);
|
|
890
|
+
return buildNumeric(name, label, readOnly, precision, prettyPrecision);
|
|
891
|
+
};
|
|
892
|
+
const buildInteger = ({ name, label, readOnly }) => {
|
|
893
|
+
return buildNumeric(name, label, readOnly, 0, 0);
|
|
894
|
+
};
|
|
895
|
+
function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
|
|
896
|
+
return (index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
|
|
897
|
+
index.h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
|
|
898
|
+
}
|
|
899
|
+
|
|
900
|
+
const uiBuilders = new Map();
|
|
901
|
+
uiBuilders.set(index$1.UserInterface.LONGTEXT, buildTextArea);
|
|
902
|
+
uiBuilders.set(index$1.UserInterface.CHECKBOX, buildCheckBox);
|
|
903
|
+
uiBuilders.set(index$1.UserInterface.SWITCH, buildSwitch);
|
|
904
|
+
uiBuilders.set(index$1.UserInterface.OPTIONSELECTOR, buildComboBox);
|
|
905
|
+
uiBuilders.set(index$1.UserInterface.SEARCH, buildSearch);
|
|
906
|
+
uiBuilders.set(index$1.UserInterface.FILE, buildFile);
|
|
907
|
+
uiBuilders.set(index$1.UserInterface.DATE, buildDate);
|
|
908
|
+
uiBuilders.set(index$1.UserInterface.DATETIME, buildTimeDate);
|
|
909
|
+
uiBuilders.set(index$1.UserInterface.DECIMALNUMBER, buildDecimal);
|
|
910
|
+
uiBuilders.set(index$1.UserInterface.INTEGERNUMBER, buildInteger);
|
|
911
|
+
const buildField = (field) => {
|
|
912
|
+
const descriptor = field.descriptor;
|
|
913
|
+
const config = Object.assign({}, field.config);
|
|
914
|
+
let builder;
|
|
915
|
+
let props;
|
|
916
|
+
if (descriptor) {
|
|
917
|
+
if (!config.label) {
|
|
918
|
+
config.label = descriptor.label;
|
|
919
|
+
}
|
|
920
|
+
if (!config.name) {
|
|
921
|
+
config.name = descriptor.name;
|
|
922
|
+
}
|
|
923
|
+
if (config.required === undefined) {
|
|
924
|
+
config.required = descriptor.required;
|
|
925
|
+
}
|
|
926
|
+
if (config.readOnly === undefined) {
|
|
927
|
+
config.readOnly = descriptor.readOnly;
|
|
928
|
+
}
|
|
929
|
+
props = descriptor.properties;
|
|
930
|
+
builder = uiBuilders.get(descriptor.userInterface);
|
|
931
|
+
}
|
|
932
|
+
if (config.required) {
|
|
933
|
+
config.label = `* ${config.label} (obrigatório)`;
|
|
934
|
+
}
|
|
935
|
+
if (!builder) {
|
|
936
|
+
builder = buildTextInput;
|
|
937
|
+
}
|
|
938
|
+
return builder(config, props);
|
|
939
|
+
};
|
|
940
|
+
|
|
941
|
+
const FormItem = ({ source }) => {
|
|
942
|
+
if ("items" in source) {
|
|
943
|
+
const fieldSet = source;
|
|
944
|
+
return index.h("ez-collapsible-box", { label: source.label }, fieldSet.items.map(fi => buildField(fi)));
|
|
945
|
+
}
|
|
946
|
+
else {
|
|
947
|
+
return buildField(source);
|
|
948
|
+
}
|
|
949
|
+
};
|
|
950
|
+
|
|
951
|
+
const FormSheet = ({ store, source }) => {
|
|
952
|
+
return (index.h("div", { class: "box__container" }, source.items.map(item => index.h(FormItem, { store: store, source: item }))));
|
|
953
|
+
};
|
|
954
|
+
|
|
955
|
+
class FormMetadata {
|
|
956
|
+
constructor() {
|
|
957
|
+
this._sheets = new Map();
|
|
958
|
+
this._requiredFields = [];
|
|
959
|
+
this._cleanOnCopyFields = [];
|
|
960
|
+
}
|
|
961
|
+
getSheet(name) {
|
|
962
|
+
return this._sheets.get(name);
|
|
963
|
+
}
|
|
964
|
+
getAllSheets() {
|
|
965
|
+
return this._sheets;
|
|
966
|
+
}
|
|
967
|
+
addSheet(sheet) {
|
|
968
|
+
this._sheets.set(sheet.name, sheet);
|
|
969
|
+
this._requiredFields = this._requiredFields.concat(sheet.requiredFields);
|
|
970
|
+
this._cleanOnCopyFields = this._cleanOnCopyFields.concat(sheet.cleanOnCopyFields);
|
|
971
|
+
}
|
|
972
|
+
getRequiredFields() {
|
|
973
|
+
return this._requiredFields;
|
|
974
|
+
}
|
|
975
|
+
getCleanOnCopyFields() {
|
|
976
|
+
return this._cleanOnCopyFields;
|
|
977
|
+
}
|
|
978
|
+
}
|
|
979
|
+
const buildFromDataUnit = (dataUnit) => {
|
|
980
|
+
var _a;
|
|
981
|
+
const unitMD = dataUnit.metadata;
|
|
982
|
+
const metadata = new FormMetadata();
|
|
983
|
+
if (unitMD) {
|
|
984
|
+
const visibleFields = (_a = unitMD.fields) === null || _a === void 0 ? void 0 : _a.filter(descriptor => descriptor.visible !== false);
|
|
985
|
+
metadata.addSheet({
|
|
986
|
+
label: unitMD.label,
|
|
987
|
+
name: unitMD.name,
|
|
988
|
+
items: visibleFields.map(descriptor => { return { descriptor }; }),
|
|
989
|
+
requiredFields: visibleFields
|
|
990
|
+
.filter(descriptor => descriptor.required)
|
|
991
|
+
.map(descriptor => descriptor.name),
|
|
992
|
+
cleanOnCopyFields: visibleFields
|
|
993
|
+
.filter(descriptor => { var _a; return (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy; })
|
|
994
|
+
.map(descriptor => descriptor.name)
|
|
995
|
+
});
|
|
996
|
+
}
|
|
997
|
+
return metadata;
|
|
998
|
+
};
|
|
999
|
+
const buildFromConfig = (fields, dataUnit) => {
|
|
1000
|
+
const sheets = new Map();
|
|
1001
|
+
const requiredFields = [];
|
|
1002
|
+
const cleanOnCopyFields = [];
|
|
1003
|
+
fields.forEach(config => {
|
|
1004
|
+
var _a;
|
|
1005
|
+
if (config.visible !== false) {
|
|
1006
|
+
const tab = config.tab || "Geral";
|
|
1007
|
+
const tabConfig = (typeof tab === "string" ? { label: tab, visible: true } : tab);
|
|
1008
|
+
const descriptor = dataUnit.getField(config.name);
|
|
1009
|
+
if (descriptor && tabConfig.visible) {
|
|
1010
|
+
if (!sheets.has(tabConfig)) {
|
|
1011
|
+
sheets.set(tabConfig, new Map());
|
|
1012
|
+
}
|
|
1013
|
+
const isRequired = config.required === undefined ? descriptor.required : config.required;
|
|
1014
|
+
if (isRequired) {
|
|
1015
|
+
requiredFields.push(config.name);
|
|
1016
|
+
}
|
|
1017
|
+
const clearOnCopy = config.cleanOnCopy === undefined ? (_a = descriptor.properties) === null || _a === void 0 ? void 0 : _a.cleanOnCopy : config.cleanOnCopy;
|
|
1018
|
+
if (clearOnCopy) {
|
|
1019
|
+
cleanOnCopyFields.push(config.name);
|
|
1020
|
+
}
|
|
1021
|
+
const tabItens = sheets.get(tabConfig);
|
|
1022
|
+
const fieldMD = { config, descriptor };
|
|
1023
|
+
const group = config.group;
|
|
1024
|
+
if (group) {
|
|
1025
|
+
const key = `group::${group}`;
|
|
1026
|
+
if (!tabItens.has(key)) {
|
|
1027
|
+
tabItens.set(key, { label: group, items: [fieldMD] });
|
|
1028
|
+
}
|
|
1029
|
+
else {
|
|
1030
|
+
tabItens.get(key).items.push(fieldMD);
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
else {
|
|
1034
|
+
tabItens.set(config.name, fieldMD);
|
|
1035
|
+
}
|
|
1036
|
+
}
|
|
1037
|
+
}
|
|
1038
|
+
});
|
|
1039
|
+
const metadata = new FormMetadata();
|
|
1040
|
+
Array.from(sheets.entries())
|
|
1041
|
+
.sort((a, b) => (a[0].order || 10000) - (b[0].order || 10000))
|
|
1042
|
+
.forEach(([key, value]) => {
|
|
1043
|
+
metadata.addSheet({
|
|
1044
|
+
label: key.label,
|
|
1045
|
+
name: key.label,
|
|
1046
|
+
items: Array.from(value.values()),
|
|
1047
|
+
requiredFields,
|
|
1048
|
+
cleanOnCopyFields
|
|
1049
|
+
});
|
|
1050
|
+
});
|
|
1051
|
+
return metadata;
|
|
1052
|
+
};
|
|
1053
|
+
|
|
1054
|
+
/**
|
|
1055
|
+
* Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
|
|
1056
|
+
*
|
|
1057
|
+
* Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
|
|
1058
|
+
* during build.
|
|
1059
|
+
* @param {number} code
|
|
1060
|
+
*/
|
|
1061
|
+
function formatProdErrorMessage(code) {
|
|
1062
|
+
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. ';
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
// Inlined version of the `symbol-observable` polyfill
|
|
1066
|
+
var $$observable = (function () {
|
|
1067
|
+
return typeof Symbol === 'function' && Symbol.observable || '@@observable';
|
|
1068
|
+
})();
|
|
1069
|
+
|
|
1070
|
+
/**
|
|
1071
|
+
* These are private action types reserved by Redux.
|
|
1072
|
+
* For any unknown actions, you must return the current state.
|
|
1073
|
+
* If the current state is undefined, you must return the initial state.
|
|
1074
|
+
* Do not reference these action types directly in your code.
|
|
1075
|
+
*/
|
|
1076
|
+
var randomString = function randomString() {
|
|
1077
|
+
return Math.random().toString(36).substring(7).split('').join('.');
|
|
1078
|
+
};
|
|
1079
|
+
|
|
1080
|
+
var ActionTypes = {
|
|
1081
|
+
INIT: "@@redux/INIT" + randomString(),
|
|
1082
|
+
REPLACE: "@@redux/REPLACE" + randomString(),
|
|
1083
|
+
PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
|
|
1084
|
+
return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
|
|
1085
|
+
}
|
|
1086
|
+
};
|
|
1087
|
+
|
|
1088
|
+
/**
|
|
1089
|
+
* @param {any} obj The object to inspect.
|
|
1090
|
+
* @returns {boolean} True if the argument appears to be a plain object.
|
|
1091
|
+
*/
|
|
1092
|
+
function isPlainObject(obj) {
|
|
1093
|
+
if (typeof obj !== 'object' || obj === null) return false;
|
|
1094
|
+
var proto = obj;
|
|
1095
|
+
|
|
1096
|
+
while (Object.getPrototypeOf(proto) !== null) {
|
|
1097
|
+
proto = Object.getPrototypeOf(proto);
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
return Object.getPrototypeOf(obj) === proto;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
/**
|
|
1104
|
+
* Creates a Redux store that holds the state tree.
|
|
1105
|
+
* The only way to change the data in the store is to call `dispatch()` on it.
|
|
1106
|
+
*
|
|
1107
|
+
* There should only be a single store in your app. To specify how different
|
|
1108
|
+
* parts of the state tree respond to actions, you may combine several reducers
|
|
1109
|
+
* into a single reducer function by using `combineReducers`.
|
|
1110
|
+
*
|
|
1111
|
+
* @param {Function} reducer A function that returns the next state tree, given
|
|
1112
|
+
* the current state tree and the action to handle.
|
|
1113
|
+
*
|
|
1114
|
+
* @param {any} [preloadedState] The initial state. You may optionally specify it
|
|
1115
|
+
* to hydrate the state from the server in universal apps, or to restore a
|
|
1116
|
+
* previously serialized user session.
|
|
1117
|
+
* If you use `combineReducers` to produce the root reducer function, this must be
|
|
1118
|
+
* an object with the same shape as `combineReducers` keys.
|
|
1119
|
+
*
|
|
1120
|
+
* @param {Function} [enhancer] The store enhancer. You may optionally specify it
|
|
1121
|
+
* to enhance the store with third-party capabilities such as middleware,
|
|
1122
|
+
* time travel, persistence, etc. The only store enhancer that ships with Redux
|
|
1123
|
+
* is `applyMiddleware()`.
|
|
1124
|
+
*
|
|
1125
|
+
* @returns {Store} A Redux store that lets you read the state, dispatch actions
|
|
1126
|
+
* and subscribe to changes.
|
|
1127
|
+
*/
|
|
1128
|
+
|
|
1129
|
+
function createStore(reducer, preloadedState, enhancer) {
|
|
1130
|
+
var _ref2;
|
|
1131
|
+
|
|
1132
|
+
if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
|
|
1133
|
+
throw new Error(formatProdErrorMessage(0) );
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
|
|
1137
|
+
enhancer = preloadedState;
|
|
1138
|
+
preloadedState = undefined;
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
if (typeof enhancer !== 'undefined') {
|
|
1142
|
+
if (typeof enhancer !== 'function') {
|
|
1143
|
+
throw new Error(formatProdErrorMessage(1) );
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
return enhancer(createStore)(reducer, preloadedState);
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
if (typeof reducer !== 'function') {
|
|
1150
|
+
throw new Error(formatProdErrorMessage(2) );
|
|
1151
|
+
}
|
|
1152
|
+
|
|
1153
|
+
var currentReducer = reducer;
|
|
1154
|
+
var currentState = preloadedState;
|
|
1155
|
+
var currentListeners = [];
|
|
1156
|
+
var nextListeners = currentListeners;
|
|
1157
|
+
var isDispatching = false;
|
|
1158
|
+
/**
|
|
1159
|
+
* This makes a shallow copy of currentListeners so we can use
|
|
1160
|
+
* nextListeners as a temporary list while dispatching.
|
|
1161
|
+
*
|
|
1162
|
+
* This prevents any bugs around consumers calling
|
|
1163
|
+
* subscribe/unsubscribe in the middle of a dispatch.
|
|
1164
|
+
*/
|
|
1165
|
+
|
|
1166
|
+
function ensureCanMutateNextListeners() {
|
|
1167
|
+
if (nextListeners === currentListeners) {
|
|
1168
|
+
nextListeners = currentListeners.slice();
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
/**
|
|
1172
|
+
* Reads the state tree managed by the store.
|
|
1173
|
+
*
|
|
1174
|
+
* @returns {any} The current state tree of your application.
|
|
1175
|
+
*/
|
|
1176
|
+
|
|
1177
|
+
|
|
1178
|
+
function getState() {
|
|
1179
|
+
if (isDispatching) {
|
|
1180
|
+
throw new Error(formatProdErrorMessage(3) );
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
return currentState;
|
|
1184
|
+
}
|
|
1185
|
+
/**
|
|
1186
|
+
* Adds a change listener. It will be called any time an action is dispatched,
|
|
1187
|
+
* and some part of the state tree may potentially have changed. You may then
|
|
1188
|
+
* call `getState()` to read the current state tree inside the callback.
|
|
1189
|
+
*
|
|
1190
|
+
* You may call `dispatch()` from a change listener, with the following
|
|
1191
|
+
* caveats:
|
|
1192
|
+
*
|
|
1193
|
+
* 1. The subscriptions are snapshotted just before every `dispatch()` call.
|
|
1194
|
+
* If you subscribe or unsubscribe while the listeners are being invoked, this
|
|
1195
|
+
* will not have any effect on the `dispatch()` that is currently in progress.
|
|
1196
|
+
* However, the next `dispatch()` call, whether nested or not, will use a more
|
|
1197
|
+
* recent snapshot of the subscription list.
|
|
1198
|
+
*
|
|
1199
|
+
* 2. The listener should not expect to see all state changes, as the state
|
|
1200
|
+
* might have been updated multiple times during a nested `dispatch()` before
|
|
1201
|
+
* the listener is called. It is, however, guaranteed that all subscribers
|
|
1202
|
+
* registered before the `dispatch()` started will be called with the latest
|
|
1203
|
+
* state by the time it exits.
|
|
1204
|
+
*
|
|
1205
|
+
* @param {Function} listener A callback to be invoked on every dispatch.
|
|
1206
|
+
* @returns {Function} A function to remove this change listener.
|
|
1207
|
+
*/
|
|
1208
|
+
|
|
1209
|
+
|
|
1210
|
+
function subscribe(listener) {
|
|
1211
|
+
if (typeof listener !== 'function') {
|
|
1212
|
+
throw new Error(formatProdErrorMessage(4) );
|
|
1213
|
+
}
|
|
1214
|
+
|
|
1215
|
+
if (isDispatching) {
|
|
1216
|
+
throw new Error(formatProdErrorMessage(5) );
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
var isSubscribed = true;
|
|
1220
|
+
ensureCanMutateNextListeners();
|
|
1221
|
+
nextListeners.push(listener);
|
|
1222
|
+
return function unsubscribe() {
|
|
1223
|
+
if (!isSubscribed) {
|
|
1224
|
+
return;
|
|
1225
|
+
}
|
|
1226
|
+
|
|
1227
|
+
if (isDispatching) {
|
|
1228
|
+
throw new Error(formatProdErrorMessage(6) );
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
isSubscribed = false;
|
|
1232
|
+
ensureCanMutateNextListeners();
|
|
1233
|
+
var index = nextListeners.indexOf(listener);
|
|
1234
|
+
nextListeners.splice(index, 1);
|
|
1235
|
+
currentListeners = null;
|
|
1236
|
+
};
|
|
1237
|
+
}
|
|
1238
|
+
/**
|
|
1239
|
+
* Dispatches an action. It is the only way to trigger a state change.
|
|
1240
|
+
*
|
|
1241
|
+
* The `reducer` function, used to create the store, will be called with the
|
|
1242
|
+
* current state tree and the given `action`. Its return value will
|
|
1243
|
+
* be considered the **next** state of the tree, and the change listeners
|
|
1244
|
+
* will be notified.
|
|
1245
|
+
*
|
|
1246
|
+
* The base implementation only supports plain object actions. If you want to
|
|
1247
|
+
* dispatch a Promise, an Observable, a thunk, or something else, you need to
|
|
1248
|
+
* wrap your store creating function into the corresponding middleware. For
|
|
1249
|
+
* example, see the documentation for the `redux-thunk` package. Even the
|
|
1250
|
+
* middleware will eventually dispatch plain object actions using this method.
|
|
1251
|
+
*
|
|
1252
|
+
* @param {Object} action A plain object representing “what changed”. It is
|
|
1253
|
+
* a good idea to keep actions serializable so you can record and replay user
|
|
1254
|
+
* sessions, or use the time travelling `redux-devtools`. An action must have
|
|
1255
|
+
* a `type` property which may not be `undefined`. It is a good idea to use
|
|
1256
|
+
* string constants for action types.
|
|
1257
|
+
*
|
|
1258
|
+
* @returns {Object} For convenience, the same action object you dispatched.
|
|
1259
|
+
*
|
|
1260
|
+
* Note that, if you use a custom middleware, it may wrap `dispatch()` to
|
|
1261
|
+
* return something else (for example, a Promise you can await).
|
|
1262
|
+
*/
|
|
1263
|
+
|
|
1264
|
+
|
|
1265
|
+
function dispatch(action) {
|
|
1266
|
+
if (!isPlainObject(action)) {
|
|
1267
|
+
throw new Error(formatProdErrorMessage(7) );
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
if (typeof action.type === 'undefined') {
|
|
1271
|
+
throw new Error(formatProdErrorMessage(8) );
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
if (isDispatching) {
|
|
1275
|
+
throw new Error(formatProdErrorMessage(9) );
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1278
|
+
try {
|
|
1279
|
+
isDispatching = true;
|
|
1280
|
+
currentState = currentReducer(currentState, action);
|
|
1281
|
+
} finally {
|
|
1282
|
+
isDispatching = false;
|
|
1283
|
+
}
|
|
1284
|
+
|
|
1285
|
+
var listeners = currentListeners = nextListeners;
|
|
1286
|
+
|
|
1287
|
+
for (var i = 0; i < listeners.length; i++) {
|
|
1288
|
+
var listener = listeners[i];
|
|
1289
|
+
listener();
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
return action;
|
|
1293
|
+
}
|
|
1294
|
+
/**
|
|
1295
|
+
* Replaces the reducer currently used by the store to calculate the state.
|
|
1296
|
+
*
|
|
1297
|
+
* You might need this if your app implements code splitting and you want to
|
|
1298
|
+
* load some of the reducers dynamically. You might also need this if you
|
|
1299
|
+
* implement a hot reloading mechanism for Redux.
|
|
1300
|
+
*
|
|
1301
|
+
* @param {Function} nextReducer The reducer for the store to use instead.
|
|
1302
|
+
* @returns {void}
|
|
1303
|
+
*/
|
|
1304
|
+
|
|
1305
|
+
|
|
1306
|
+
function replaceReducer(nextReducer) {
|
|
1307
|
+
if (typeof nextReducer !== 'function') {
|
|
1308
|
+
throw new Error(formatProdErrorMessage(10) );
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.
|
|
1312
|
+
// Any reducers that existed in both the new and old rootReducer
|
|
1313
|
+
// will receive the previous state. This effectively populates
|
|
1314
|
+
// the new state tree with any relevant data from the old one.
|
|
1315
|
+
|
|
1316
|
+
dispatch({
|
|
1317
|
+
type: ActionTypes.REPLACE
|
|
1318
|
+
});
|
|
1319
|
+
}
|
|
1320
|
+
/**
|
|
1321
|
+
* Interoperability point for observable/reactive libraries.
|
|
1322
|
+
* @returns {observable} A minimal observable of state changes.
|
|
1323
|
+
* For more information, see the observable proposal:
|
|
1324
|
+
* https://github.com/tc39/proposal-observable
|
|
1325
|
+
*/
|
|
1326
|
+
|
|
1327
|
+
|
|
1328
|
+
function observable() {
|
|
1329
|
+
var _ref;
|
|
1330
|
+
|
|
1331
|
+
var outerSubscribe = subscribe;
|
|
1332
|
+
return _ref = {
|
|
1333
|
+
/**
|
|
1334
|
+
* The minimal observable subscription method.
|
|
1335
|
+
* @param {Object} observer Any object that can be used as an observer.
|
|
1336
|
+
* The observer object should have a `next` method.
|
|
1337
|
+
* @returns {subscription} An object with an `unsubscribe` method that can
|
|
1338
|
+
* be used to unsubscribe the observable from the store, and prevent further
|
|
1339
|
+
* emission of values from the observable.
|
|
1340
|
+
*/
|
|
1341
|
+
subscribe: function subscribe(observer) {
|
|
1342
|
+
if (typeof observer !== 'object' || observer === null) {
|
|
1343
|
+
throw new Error(formatProdErrorMessage(11) );
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
function observeState() {
|
|
1347
|
+
if (observer.next) {
|
|
1348
|
+
observer.next(getState());
|
|
1349
|
+
}
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
observeState();
|
|
1353
|
+
var unsubscribe = outerSubscribe(observeState);
|
|
1354
|
+
return {
|
|
1355
|
+
unsubscribe: unsubscribe
|
|
1356
|
+
};
|
|
1357
|
+
}
|
|
1358
|
+
}, _ref[$$observable] = function () {
|
|
1359
|
+
return this;
|
|
1360
|
+
}, _ref;
|
|
1361
|
+
} // When a store is created, an "INIT" action is dispatched so that every
|
|
1362
|
+
// reducer returns their initial state. This effectively populates
|
|
1363
|
+
// the initial state tree.
|
|
1364
|
+
|
|
1365
|
+
|
|
1366
|
+
dispatch({
|
|
1367
|
+
type: ActionTypes.INIT
|
|
1368
|
+
});
|
|
1369
|
+
return _ref2 = {
|
|
1370
|
+
dispatch: dispatch,
|
|
1371
|
+
subscribe: subscribe,
|
|
1372
|
+
getState: getState,
|
|
1373
|
+
replaceReducer: replaceReducer
|
|
1374
|
+
}, _ref2[$$observable] = observable, _ref2;
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
const inicialState = {};
|
|
1378
|
+
/////////////////////////////// REDUCERS ///////////////////////////////
|
|
1379
|
+
function formReducer(state = inicialState, action) {
|
|
1380
|
+
switch (action.type) {
|
|
1381
|
+
case FormActions.METADATA_LOADED:
|
|
1382
|
+
return Object.assign(Object.assign({}, state), { formMetadata: action.payload });
|
|
1383
|
+
case FormActions.CHANGE_TAB:
|
|
1384
|
+
return Object.assign(Object.assign({}, state), { currentSheet: action.payload });
|
|
1385
|
+
default:
|
|
1386
|
+
return state;
|
|
1387
|
+
}
|
|
1388
|
+
}
|
|
1389
|
+
/////////////////////////////// ACTION CREATORS ///////////////////////////////
|
|
1390
|
+
function loadMetadata(formMetadata) {
|
|
1391
|
+
return {
|
|
1392
|
+
type: FormActions.METADATA_LOADED,
|
|
1393
|
+
payload: formMetadata
|
|
1394
|
+
};
|
|
1395
|
+
}
|
|
1396
|
+
function changeTab(currentSheet) {
|
|
1397
|
+
return {
|
|
1398
|
+
type: FormActions.CHANGE_TAB,
|
|
1399
|
+
payload: currentSheet.tabKey
|
|
1400
|
+
};
|
|
1401
|
+
}
|
|
1402
|
+
/////////////////////////////// SELECTORS ///////////////////////////////
|
|
1403
|
+
function selectFormMetadata(state) {
|
|
1404
|
+
return state.formMetadata;
|
|
1405
|
+
}
|
|
1406
|
+
function selectCurrentSheet(state) {
|
|
1407
|
+
return state.currentSheet ? state.formMetadata.getSheet(state.currentSheet) : Array.from(state.formMetadata.getAllSheets().values())[0];
|
|
1408
|
+
}
|
|
1409
|
+
/////////////////////////////// TYPES ///////////////////////////////
|
|
1410
|
+
var FormActions;
|
|
1411
|
+
(function (FormActions) {
|
|
1412
|
+
FormActions["METADATA_LOADED"] = "FORM/METADATA_LOADED";
|
|
1413
|
+
FormActions["CHANGE_TAB"] = "FORM/CHANGE_TAB";
|
|
1414
|
+
})(FormActions || (FormActions = {}));
|
|
1415
|
+
|
|
1416
|
+
class DataBinder {
|
|
1417
|
+
constructor(dataUnit) {
|
|
1418
|
+
this._fields = new Map();
|
|
1419
|
+
this._dataUnit = dataUnit;
|
|
1420
|
+
this._dataUnit.subscribe(_action => {
|
|
1421
|
+
var _a;
|
|
1422
|
+
(_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
|
|
1423
|
+
this.updateValue(field.fieldName, field.field);
|
|
1424
|
+
});
|
|
1425
|
+
});
|
|
1426
|
+
}
|
|
1427
|
+
bind(fields) {
|
|
1428
|
+
fields.forEach(fieldElement => {
|
|
1429
|
+
const fieldName = fieldElement.dataset.fieldName;
|
|
1430
|
+
this.updateBind(fieldName, fieldElement);
|
|
1431
|
+
this.updateValue(fieldName, fieldElement);
|
|
1432
|
+
});
|
|
1433
|
+
}
|
|
1434
|
+
updateValue(fieldName, field) {
|
|
1435
|
+
field["value"] = this._dataUnit.getFieldValue(fieldName);
|
|
1436
|
+
}
|
|
1437
|
+
updateBind(fieldName, field) {
|
|
1438
|
+
const oldBind = this._fields.get(fieldName);
|
|
1439
|
+
if (oldBind) {
|
|
1440
|
+
oldBind.destroy();
|
|
1441
|
+
}
|
|
1442
|
+
this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
|
|
1443
|
+
}
|
|
1444
|
+
setFieldValue(fieldName, newValue) {
|
|
1445
|
+
if (this._dataUnit.records.length === 0) {
|
|
1446
|
+
this._dataUnit.addRecord();
|
|
1447
|
+
}
|
|
1448
|
+
this._dataUnit.setFieldValue(fieldName, newValue);
|
|
1449
|
+
}
|
|
1450
|
+
}
|
|
1451
|
+
class Bind {
|
|
1452
|
+
destroy() {
|
|
1453
|
+
this.field.removeEventListener(this.eventName, this.eventListener);
|
|
1454
|
+
}
|
|
1455
|
+
static create(fieldName, field, callback) {
|
|
1456
|
+
const b = new Bind();
|
|
1457
|
+
b.fieldName = fieldName;
|
|
1458
|
+
b.field = field;
|
|
1459
|
+
//FIXME: Verificar se o field é um EzField
|
|
1460
|
+
b.eventListener = (evt) => { callback(fieldName, evt.detail); };
|
|
1461
|
+
b.eventName = "ezChange";
|
|
1462
|
+
b.field.addEventListener(b.eventName, b.eventListener);
|
|
1463
|
+
return b;
|
|
1464
|
+
}
|
|
1465
|
+
}
|
|
1466
|
+
|
|
1467
|
+
class ApplicationUtils {
|
|
1468
|
+
static async showDialog(title, message, icon = null, confirm, critical = false) {
|
|
1469
|
+
return new Promise(resolve => {
|
|
1470
|
+
let dialog = document.querySelector("ez-dialog");
|
|
1471
|
+
if (!dialog) {
|
|
1472
|
+
dialog = document.createElement("ez-dialog");
|
|
1473
|
+
window.document.body.appendChild(dialog);
|
|
1474
|
+
}
|
|
1475
|
+
dialog.show(title, message, critical, confirm, icon).then(ok => resolve(ok));
|
|
1476
|
+
});
|
|
1477
|
+
}
|
|
1478
|
+
static async alert(title, message, icon = null) {
|
|
1479
|
+
return ApplicationUtils.showDialog(title, message, icon, false, false);
|
|
1480
|
+
}
|
|
1481
|
+
static async error(title, message, icon = null) {
|
|
1482
|
+
return ApplicationUtils.showDialog(title, message, icon, false, true);
|
|
1483
|
+
}
|
|
1484
|
+
static async confirm(title, message, icon = null, critical = false) {
|
|
1485
|
+
return ApplicationUtils.showDialog(title, message, icon, true, critical);
|
|
1486
|
+
}
|
|
1487
|
+
static async info(message) {
|
|
1488
|
+
let toast = document.querySelector("ez-toast");
|
|
1489
|
+
if (!toast) {
|
|
1490
|
+
toast = document.createElement("ez-toast");
|
|
1491
|
+
window.document.body.appendChild(toast);
|
|
1492
|
+
}
|
|
1493
|
+
toast.message = message;
|
|
1494
|
+
toast.fadeTime = 4000;
|
|
1495
|
+
toast.show();
|
|
1496
|
+
}
|
|
1497
|
+
}
|
|
1498
|
+
|
|
1499
|
+
const ezFormCss = "ez-form{display:flex;flex-direction:column;width:100%}";
|
|
1500
|
+
|
|
1501
|
+
let EzForm = class {
|
|
1502
|
+
constructor(hostRef) {
|
|
1503
|
+
index.registerInstance(this, hostRef);
|
|
1504
|
+
}
|
|
1505
|
+
submit() {
|
|
1506
|
+
return Promise.resolve();
|
|
1507
|
+
}
|
|
1508
|
+
cancel() {
|
|
1509
|
+
return Promise.resolve();
|
|
1510
|
+
}
|
|
1511
|
+
validate() {
|
|
1512
|
+
return new Promise((accept, reject) => {
|
|
1513
|
+
const metadata = selectFormMetadata(this._store.getState());
|
|
1514
|
+
const requiredFields = this._staticFields
|
|
1515
|
+
.filter(f => f.dataset.required)
|
|
1516
|
+
.map(f => f.dataset.fieldName)
|
|
1517
|
+
.concat(metadata.getRequiredFields());
|
|
1518
|
+
const records = this.dataUnit.records;
|
|
1519
|
+
for (let i = 0; i < records.length; i++) {
|
|
1520
|
+
if (!this.validateRequired(requiredFields, records[i])) {
|
|
1521
|
+
reject();
|
|
1522
|
+
break;
|
|
1523
|
+
}
|
|
1524
|
+
}
|
|
1525
|
+
accept();
|
|
1526
|
+
});
|
|
1527
|
+
}
|
|
1528
|
+
validateRequired(requiredFields, record) {
|
|
1529
|
+
const invalidFields = [];
|
|
1530
|
+
requiredFields.forEach(field => {
|
|
1531
|
+
const value = record[field];
|
|
1532
|
+
const fieldElem = this._element.querySelector(`[data-field-name=${field}]`);
|
|
1533
|
+
if (value === null || value === undefined || value === "") {
|
|
1534
|
+
invalidFields.push(field);
|
|
1535
|
+
fieldElem["errorMessage"] = "Essa informação é obrigatória";
|
|
1536
|
+
}
|
|
1537
|
+
else {
|
|
1538
|
+
fieldElem["errorMessage"] = "";
|
|
1539
|
+
}
|
|
1540
|
+
});
|
|
1541
|
+
const isValid = invalidFields.length === 0;
|
|
1542
|
+
if (!isValid) {
|
|
1543
|
+
ApplicationUtils.info("Há pelo menos um campo obrigatório não preenchido.");
|
|
1544
|
+
}
|
|
1545
|
+
return isValid;
|
|
1546
|
+
}
|
|
1547
|
+
getDynamicContent() {
|
|
1548
|
+
var _a;
|
|
1549
|
+
const formMD = selectFormMetadata(this._store.getState());
|
|
1550
|
+
if (!formMD)
|
|
1551
|
+
return null;
|
|
1552
|
+
const currentSheet = selectCurrentSheet((_a = this._store) === null || _a === void 0 ? void 0 : _a.getState());
|
|
1553
|
+
if (!currentSheet) {
|
|
1554
|
+
return null;
|
|
1555
|
+
}
|
|
1556
|
+
const allSheets = Array.from(formMD.getAllSheets().values());
|
|
1557
|
+
const result = [];
|
|
1558
|
+
if (allSheets.length > 1) {
|
|
1559
|
+
result.push(index.h("ez-tabselector", { onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name }, allSheets.map(s => index.h("ez-tab", { tabKey: s.name, label: s.label }))));
|
|
1560
|
+
}
|
|
1561
|
+
result.push(index.h(FormSheet, { store: this._store, source: currentSheet }));
|
|
1562
|
+
return result;
|
|
1563
|
+
}
|
|
1564
|
+
processMetadata() {
|
|
1565
|
+
if (!this.isStatic()) {
|
|
1566
|
+
const metadata = this.config && this.config.length > 0 ? buildFromConfig(this.config, this.dataUnit) : buildFromDataUnit(this.dataUnit);
|
|
1567
|
+
this._store.dispatch(loadMetadata(metadata));
|
|
1568
|
+
}
|
|
1569
|
+
}
|
|
1570
|
+
isStatic() {
|
|
1571
|
+
var _a;
|
|
1572
|
+
return ((_a = this._staticFields) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
1573
|
+
}
|
|
1574
|
+
interceptAction(action) {
|
|
1575
|
+
if (action.type === index$1.Action.RECORDS_COPIED) {
|
|
1576
|
+
const metadata = selectFormMetadata(this._store.getState());
|
|
1577
|
+
const cleanFields = metadata.getCleanOnCopyFields();
|
|
1578
|
+
if (cleanFields) {
|
|
1579
|
+
const records = action.payload;
|
|
1580
|
+
return new index$1.DataUnitAction(index$1.Action.RECORDS_COPIED, records.map(record => {
|
|
1581
|
+
const newRecord = Object.assign({}, record);
|
|
1582
|
+
cleanFields.forEach(fieldName => delete newRecord[fieldName]);
|
|
1583
|
+
return newRecord;
|
|
1584
|
+
}));
|
|
1585
|
+
}
|
|
1586
|
+
}
|
|
1587
|
+
return action;
|
|
1588
|
+
}
|
|
1589
|
+
componentWillLoad() {
|
|
1590
|
+
if (this.dataUnit === undefined) {
|
|
1591
|
+
this.dataUnit = new index$1.DataUnit("ez-form");
|
|
1592
|
+
}
|
|
1593
|
+
this.dataUnit.addInterceptor(this);
|
|
1594
|
+
this.dataUnit.subscribe(action => {
|
|
1595
|
+
if (action.type === index$1.Action.METADATA_LOADED) {
|
|
1596
|
+
this.processMetadata();
|
|
1597
|
+
}
|
|
1598
|
+
});
|
|
1599
|
+
this._dataBinder = new DataBinder(this.dataUnit);
|
|
1600
|
+
this._store = createStore(formReducer);
|
|
1601
|
+
this._store.subscribe(() => index.forceUpdate(this));
|
|
1602
|
+
this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
|
|
1603
|
+
this.processMetadata();
|
|
1604
|
+
}
|
|
1605
|
+
componentDidRender() {
|
|
1606
|
+
this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
|
|
1607
|
+
}
|
|
1608
|
+
render() {
|
|
1609
|
+
return (index.h(index.Host, null, this.isStatic() ? null : this.getDynamicContent()));
|
|
1610
|
+
}
|
|
1611
|
+
get _element() { return index.getElement(this); }
|
|
1612
|
+
};
|
|
1613
|
+
EzForm.style = ezFormCss;
|
|
1614
|
+
|
|
1615
|
+
const ezNumberInputCss = ":host{display:block;width:100%}";
|
|
1616
|
+
|
|
1617
|
+
let EzNumberInput = class {
|
|
1618
|
+
constructor(hostRef) {
|
|
1619
|
+
index.registerInstance(this, hostRef);
|
|
1620
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
1621
|
+
/**
|
|
1622
|
+
* Deixa o campo disponível ou não para uso.
|
|
1623
|
+
*/
|
|
1624
|
+
this.enabled = true;
|
|
1625
|
+
}
|
|
1626
|
+
setLabel() {
|
|
1627
|
+
this._textInput.label = this.label;
|
|
1628
|
+
}
|
|
1629
|
+
setErrorMessage() {
|
|
1630
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
1631
|
+
}
|
|
1632
|
+
applyValueToInput() {
|
|
1633
|
+
if (this._textInput) {
|
|
1634
|
+
this._textInput.value = this.getTextValue(this.value);
|
|
1635
|
+
}
|
|
1636
|
+
}
|
|
1637
|
+
changeValue(newValue) {
|
|
1638
|
+
this.errorMessage = "";
|
|
1639
|
+
if (newValue && newValue !== this.value) {
|
|
1640
|
+
this.value = newValue;
|
|
1641
|
+
this.ezChange.emit(this.value);
|
|
1642
|
+
}
|
|
1643
|
+
}
|
|
1644
|
+
parseNumber() {
|
|
1645
|
+
const parsedNumber = this._textInput.value ? index$1.NumberUtils.stringToNumber(this._textInput.value) : null;
|
|
1646
|
+
if (parsedNumber != null && isNaN(parsedNumber)) {
|
|
1647
|
+
this.errorMessage = "O valor digitado não é um número válido";
|
|
1648
|
+
}
|
|
1649
|
+
else {
|
|
1650
|
+
try {
|
|
1651
|
+
this.changeValue(parsedNumber);
|
|
1652
|
+
}
|
|
1653
|
+
catch (e) {
|
|
1654
|
+
this.errorMessage = e.message;
|
|
1655
|
+
return;
|
|
1656
|
+
}
|
|
1657
|
+
}
|
|
1658
|
+
}
|
|
1659
|
+
getTextValue(value) {
|
|
1660
|
+
if (value) {
|
|
1661
|
+
return this.precision > 0 ? index$1.NumberUtils.format(value.toString(), Number(this.precision), Number(this.prettyPrecision)) : value.toString();
|
|
1662
|
+
}
|
|
1663
|
+
return null;
|
|
1664
|
+
}
|
|
1665
|
+
componentDidLoad() {
|
|
1666
|
+
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
1667
|
+
}
|
|
1668
|
+
render() {
|
|
1669
|
+
return (index.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 }));
|
|
1670
|
+
}
|
|
1671
|
+
get _elem() { return index.getElement(this); }
|
|
1672
|
+
static get watchers() { return {
|
|
1673
|
+
"label": ["setLabel"],
|
|
1674
|
+
"errorMessage": ["setErrorMessage"],
|
|
1675
|
+
"value": ["applyValueToInput"]
|
|
1676
|
+
}; }
|
|
1677
|
+
};
|
|
1678
|
+
EzNumberInput.style = ezNumberInputCss;
|
|
1679
|
+
|
|
1680
|
+
const ezSearchCss = ":host{width:100%}";
|
|
1681
|
+
|
|
1682
|
+
let EzSearch = class {
|
|
1683
|
+
constructor(hostRef) {
|
|
1684
|
+
index.registerInstance(this, hostRef);
|
|
1685
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
1686
|
+
this.showPopup = index.createEvent(this, "showPopup", 7);
|
|
1687
|
+
/**
|
|
1688
|
+
* Deixa o campo disponível ou não.
|
|
1689
|
+
*/
|
|
1690
|
+
this.enabled = true;
|
|
1691
|
+
/**
|
|
1692
|
+
* Ajusta a opção de mostrar o "value" ao selecionar uma opção.
|
|
1693
|
+
*/
|
|
1694
|
+
this.showSelectedValue = true;
|
|
1695
|
+
/**
|
|
1696
|
+
* Ajusta a opção de mostrar o "value" para cada opção.
|
|
1697
|
+
*/
|
|
1698
|
+
this.showOptionValue = true;
|
|
1699
|
+
}
|
|
1700
|
+
updateValue() {
|
|
1701
|
+
if (this._comboElement) {
|
|
1702
|
+
this._comboElement.value = this.value;
|
|
1703
|
+
}
|
|
1704
|
+
}
|
|
1705
|
+
onComboChange(evt) {
|
|
1706
|
+
evt.stopPropagation();
|
|
1707
|
+
this.value = evt.detail;
|
|
1708
|
+
this.ezChange.emit(evt.detail);
|
|
1709
|
+
}
|
|
1710
|
+
componentDidLoad() {
|
|
1711
|
+
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
|
|
1712
|
+
}
|
|
1713
|
+
render() {
|
|
1714
|
+
return (index.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 }));
|
|
1715
|
+
}
|
|
1716
|
+
;
|
|
1717
|
+
get _elem() { return index.getElement(this); }
|
|
1718
|
+
static get watchers() { return {
|
|
1719
|
+
"value": ["updateValue"]
|
|
1720
|
+
}; }
|
|
1721
|
+
};
|
|
1722
|
+
EzSearch.style = ezSearchCss;
|
|
1723
|
+
|
|
1724
|
+
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}";
|
|
1725
|
+
|
|
1726
|
+
let EzTabselector = class {
|
|
1727
|
+
constructor(hostRef) {
|
|
1728
|
+
index.registerInstance(this, hostRef);
|
|
1729
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
1730
|
+
this.setFocusedParam = (ev) => {
|
|
1731
|
+
if (ev.key === "Enter") {
|
|
1732
|
+
const selectedTab = this._processedTabs[this._focusedIndex];
|
|
1733
|
+
this.handleTabClick(selectedTab);
|
|
1734
|
+
ev.preventDefault();
|
|
1735
|
+
this.setFocusedTab(selectedTab.index);
|
|
1736
|
+
}
|
|
1737
|
+
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
1738
|
+
let operator = undefined;
|
|
1739
|
+
if (ev.key === "ArrowLeft") {
|
|
1740
|
+
operator = false;
|
|
1741
|
+
}
|
|
1742
|
+
else if (ev.key === "ArrowRight") {
|
|
1743
|
+
operator = true;
|
|
1744
|
+
}
|
|
1745
|
+
else {
|
|
1746
|
+
return;
|
|
1747
|
+
}
|
|
1748
|
+
if (this._focusedIndex === undefined) {
|
|
1749
|
+
if (operator === false) {
|
|
1750
|
+
this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex - 1 : undefined;
|
|
1751
|
+
}
|
|
1752
|
+
else {
|
|
1753
|
+
this._focusedIndex = this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined;
|
|
1754
|
+
}
|
|
1755
|
+
}
|
|
1756
|
+
else {
|
|
1757
|
+
if (operator === false) {
|
|
1758
|
+
this._focusedIndex = this._focusedIndex - 1;
|
|
1759
|
+
}
|
|
1760
|
+
else {
|
|
1761
|
+
this._focusedIndex = this._focusedIndex + 1;
|
|
1762
|
+
}
|
|
1763
|
+
}
|
|
1764
|
+
if (this._focusedIndex < 0) {
|
|
1765
|
+
this._focusedIndex = 0;
|
|
1766
|
+
}
|
|
1767
|
+
else if (this._focusedIndex > this._processedTabs.length - 1) {
|
|
1768
|
+
this._focusedIndex = this._processedTabs.length - 1;
|
|
1769
|
+
}
|
|
1770
|
+
this.setFocusedBtn(true, this._focusedIndex);
|
|
1771
|
+
this.setFocusedTab(this._focusedIndex);
|
|
1772
|
+
}
|
|
1773
|
+
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
1774
|
+
const currentTab = this._processedTabs[this.selectedIndex];
|
|
1775
|
+
this._focusedIndex = undefined;
|
|
1776
|
+
this.handleTabClick(currentTab);
|
|
1777
|
+
ev.preventDefault();
|
|
1778
|
+
this.setFocusedTab(this.selectedIndex);
|
|
1779
|
+
}
|
|
1780
|
+
};
|
|
1781
|
+
}
|
|
1782
|
+
handleTabClick(tab) {
|
|
1783
|
+
this.selectedIndex = tab.index;
|
|
1784
|
+
this._focusedIndex = undefined;
|
|
1785
|
+
this.selectedTab = tab.tabKey;
|
|
1786
|
+
this.ezChange.emit(tab);
|
|
1787
|
+
this.setFocusedBtn(false, tab.index);
|
|
1788
|
+
}
|
|
1789
|
+
componentWillRender() {
|
|
1790
|
+
if (!this._processedTabs) {
|
|
1791
|
+
this._processedTabs = [];
|
|
1792
|
+
if (this.tabs) {
|
|
1793
|
+
this.tabs.split(",").forEach((label) => {
|
|
1794
|
+
label = label.trim();
|
|
1795
|
+
this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
|
|
1796
|
+
});
|
|
1797
|
+
}
|
|
1798
|
+
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
1799
|
+
const tabKey = elem.getAttribute("tabKey");
|
|
1800
|
+
const label = elem.getAttribute("label");
|
|
1801
|
+
const t = { label, tabKey, index: this._processedTabs.length };
|
|
1802
|
+
const content = elem.firstChild;
|
|
1803
|
+
if (content) {
|
|
1804
|
+
content.setAttribute("slot", "tab" + t.index);
|
|
1805
|
+
this._hostElem.appendChild(content);
|
|
1806
|
+
}
|
|
1807
|
+
this._processedTabs.push(t);
|
|
1808
|
+
});
|
|
1809
|
+
}
|
|
1810
|
+
}
|
|
1811
|
+
handleSlotChange(ev) {
|
|
1812
|
+
const slot = ev.target;
|
|
1813
|
+
const content = slot.assignedElements()[0];
|
|
1814
|
+
if (content) {
|
|
1815
|
+
content.style.marginLeft = "6px";
|
|
1816
|
+
}
|
|
1817
|
+
}
|
|
1818
|
+
scrollBackward() {
|
|
1819
|
+
const container = this._scrollContainer;
|
|
1820
|
+
if (container) {
|
|
1821
|
+
container.scrollLeft -= container.clientWidth;
|
|
1822
|
+
}
|
|
1823
|
+
}
|
|
1824
|
+
scrollFoward() {
|
|
1825
|
+
const container = this._scrollContainer;
|
|
1826
|
+
if (container) {
|
|
1827
|
+
let lastTab = null;
|
|
1828
|
+
container.querySelectorAll(".tab").forEach((tab) => {
|
|
1829
|
+
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
1830
|
+
lastTab = tab;
|
|
1831
|
+
}
|
|
1832
|
+
});
|
|
1833
|
+
container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
|
|
1834
|
+
}
|
|
1835
|
+
}
|
|
1836
|
+
componentDidRender() {
|
|
1837
|
+
this.updateScroll();
|
|
1838
|
+
}
|
|
1839
|
+
updateScroll() {
|
|
1840
|
+
const container = this._scrollContainer;
|
|
1841
|
+
if (container) {
|
|
1842
|
+
const { scrollWidth, clientWidth, scrollLeft } = container;
|
|
1843
|
+
const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
|
|
1844
|
+
this._startHidden = container.scrollLeft > 0;
|
|
1845
|
+
this._endHidden = remainingScroll > 0;
|
|
1846
|
+
if (this._startHidden) {
|
|
1847
|
+
this._backwardButton.classList.remove("hidden");
|
|
1848
|
+
}
|
|
1849
|
+
else {
|
|
1850
|
+
this._backwardButton.classList.add("hidden");
|
|
1851
|
+
}
|
|
1852
|
+
if (this._endHidden) {
|
|
1853
|
+
this._forwardButton.classList.remove("hidden");
|
|
1854
|
+
}
|
|
1855
|
+
else {
|
|
1856
|
+
this._forwardButton.classList.add("hidden");
|
|
1857
|
+
}
|
|
1858
|
+
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
1859
|
+
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
1860
|
+
classNames.forEach((name) => {
|
|
1861
|
+
if (name !== currentClass && container.classList.contains(name)) {
|
|
1862
|
+
container.classList.remove(name);
|
|
1863
|
+
}
|
|
1864
|
+
});
|
|
1865
|
+
if (currentClass && !container.classList.contains(currentClass)) {
|
|
1866
|
+
container.classList.add(currentClass);
|
|
1867
|
+
}
|
|
1868
|
+
}
|
|
1869
|
+
}
|
|
1870
|
+
domScrollHandler() {
|
|
1871
|
+
window.clearTimeout(this._scrollCallBack);
|
|
1872
|
+
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
1873
|
+
}
|
|
1874
|
+
setFocusedTab(index) {
|
|
1875
|
+
window.clearTimeout(this._scrollCallBackTest);
|
|
1876
|
+
this._scrollCallBackTest = window.setTimeout(() => {
|
|
1877
|
+
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
1878
|
+
tabtoscroll.scrollIntoView();
|
|
1879
|
+
}, 200);
|
|
1880
|
+
}
|
|
1881
|
+
getTextWidth(text) {
|
|
1882
|
+
if (this._textMesurement === undefined) {
|
|
1883
|
+
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
1884
|
+
}
|
|
1885
|
+
const context = this._textMesurement.getContext("2d");
|
|
1886
|
+
context.font = "14px Sora, Algerian";
|
|
1887
|
+
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
1888
|
+
}
|
|
1889
|
+
;
|
|
1890
|
+
setFocusedBtn(visible, parameter) {
|
|
1891
|
+
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
1892
|
+
tabsButtons.forEach((el) => {
|
|
1893
|
+
el.classList.remove("is-focused");
|
|
1894
|
+
if (el.id === "tab" + parameter && visible) {
|
|
1895
|
+
el.classList.add("is-focused");
|
|
1896
|
+
}
|
|
1897
|
+
});
|
|
1898
|
+
}
|
|
1899
|
+
render() {
|
|
1900
|
+
return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index$1) => {
|
|
1901
|
+
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
1902
|
+
const tabId = "tab" + index$1;
|
|
1903
|
+
const isSelected = index$1 === this.selectedIndex || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
1904
|
+
if (isSelected) {
|
|
1905
|
+
this.selectedTab = tab.tabKey;
|
|
1906
|
+
this.selectedIndex = index$1;
|
|
1907
|
+
}
|
|
1908
|
+
return index.h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle }, index.h("span", { class: "tab-label", title: tab.label }, tab.label), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
|
|
1909
|
+
})), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
1910
|
+
}
|
|
1911
|
+
get _hostElem() { return index.getElement(this); }
|
|
1912
|
+
};
|
|
1913
|
+
EzTabselector.style = ezTabselectorCss;
|
|
1914
|
+
|
|
1915
|
+
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:2px;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)}";
|
|
1916
|
+
|
|
1917
|
+
let EzTextArea = class {
|
|
1918
|
+
constructor(hostRef) {
|
|
1919
|
+
index.registerInstance(this, hostRef);
|
|
1920
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
1921
|
+
/**
|
|
1922
|
+
* Deixa o campo disponível ou não para digitação.
|
|
1923
|
+
*/
|
|
1924
|
+
this.enabled = true;
|
|
1925
|
+
/**
|
|
1926
|
+
* Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
|
|
1927
|
+
*/
|
|
1928
|
+
this.rows = 4;
|
|
1929
|
+
}
|
|
1930
|
+
showError() {
|
|
1931
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
1932
|
+
if (hasError) {
|
|
1933
|
+
this._container.classList.add('hasError');
|
|
1934
|
+
this._messageBoxElem.classList.add('hasError');
|
|
1935
|
+
}
|
|
1936
|
+
else {
|
|
1937
|
+
this._container.classList.remove('hasError');
|
|
1938
|
+
this._messageBoxElem.classList.remove('hasError');
|
|
1939
|
+
}
|
|
1940
|
+
}
|
|
1941
|
+
updateInputValue() {
|
|
1942
|
+
this._inputElem.value = this.value;
|
|
1943
|
+
this.handleChange();
|
|
1944
|
+
this.adjustFloatingLabel();
|
|
1945
|
+
this.ezChange.emit(this.value);
|
|
1946
|
+
}
|
|
1947
|
+
adjustFloatingLabel() {
|
|
1948
|
+
if (this.label) {
|
|
1949
|
+
const hasValue = this.value && this.value.toString().length > 0;
|
|
1950
|
+
const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
|
|
1951
|
+
if (hasValue || this.isFocused()) {
|
|
1952
|
+
if (!containsFloatedClass) {
|
|
1953
|
+
this._labelElem.classList.add("textarea__label--floated");
|
|
1954
|
+
}
|
|
1955
|
+
}
|
|
1956
|
+
else {
|
|
1957
|
+
if (containsFloatedClass) {
|
|
1958
|
+
this._labelElem.classList.remove("textarea__label--floated");
|
|
1959
|
+
}
|
|
1960
|
+
}
|
|
1961
|
+
}
|
|
1962
|
+
}
|
|
1963
|
+
isFocused() {
|
|
1964
|
+
return this._hostElement.shadowRoot.activeElement !== null;
|
|
1965
|
+
}
|
|
1966
|
+
//---------------------------------------------
|
|
1967
|
+
// Public methods
|
|
1968
|
+
//---------------------------------------------
|
|
1969
|
+
/**
|
|
1970
|
+
* Faz o foco no componente de input
|
|
1971
|
+
*/
|
|
1972
|
+
async setFocus() {
|
|
1973
|
+
this._inputElem.focus();
|
|
1974
|
+
}
|
|
1975
|
+
/**
|
|
1976
|
+
* Remove o foco no componente de input
|
|
1977
|
+
*/
|
|
1978
|
+
async setBlur() {
|
|
1979
|
+
this._inputElem.blur();
|
|
1980
|
+
}
|
|
1981
|
+
//---------------------------------------------
|
|
1982
|
+
// Event handlers
|
|
1983
|
+
//---------------------------------------------
|
|
1984
|
+
handleFocusout() {
|
|
1985
|
+
this.adjustFloatingLabel();
|
|
1986
|
+
if (this._container && this._container.classList.contains("textarea--focus")) {
|
|
1987
|
+
this._container.classList.remove("textarea--focus");
|
|
1988
|
+
}
|
|
1989
|
+
}
|
|
1990
|
+
handleChange() {
|
|
1991
|
+
this.errorMessage = "";
|
|
1992
|
+
this.value = this._inputElem.value;
|
|
1993
|
+
}
|
|
1994
|
+
handleFocus() {
|
|
1995
|
+
if (this.label && this._labelElem && !this._labelElem.classList.contains("textarea__label--floated")) {
|
|
1996
|
+
this._labelElem.classList.add("textarea__label--floated");
|
|
1997
|
+
}
|
|
1998
|
+
if (this._container && !this._container.classList.contains("textarea--focus")) {
|
|
1999
|
+
this._container.classList.add("textarea--focus");
|
|
2000
|
+
}
|
|
2001
|
+
}
|
|
2002
|
+
//---------------------------------------------
|
|
2003
|
+
// Lifecycle web component
|
|
2004
|
+
//---------------------------------------------
|
|
2005
|
+
componentDidLoad() {
|
|
2006
|
+
this.showError();
|
|
2007
|
+
this.adjustFloatingLabel();
|
|
2008
|
+
}
|
|
2009
|
+
render() {
|
|
2010
|
+
return (index.h(index.Host, null, index.h("div", { class: "textarea", ref: (el) => this._container = el }, this.label ?
|
|
2011
|
+
index.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)
|
|
2012
|
+
: null, index.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 })), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
2013
|
+
}
|
|
2014
|
+
get _hostElement() { return index.getElement(this); }
|
|
2015
|
+
static get watchers() { return {
|
|
2016
|
+
"errorMessage": ["showError"],
|
|
2017
|
+
"value": ["updateInputValue"]
|
|
2018
|
+
}; }
|
|
2019
|
+
};
|
|
2020
|
+
EzTextArea.style = ezTextAreaCss;
|
|
2021
|
+
|
|
2022
|
+
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{display:flex;min-height:16px;min-width:100%;margin-top:2px;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}";
|
|
2023
|
+
|
|
2024
|
+
let EzTextInput = class {
|
|
2025
|
+
constructor(hostRef) {
|
|
2026
|
+
index.registerInstance(this, hostRef);
|
|
2027
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
2028
|
+
/**
|
|
2029
|
+
* Deixa o campo disponível ou não para digitação.
|
|
2030
|
+
*/
|
|
2031
|
+
this.enabled = true;
|
|
2032
|
+
/**
|
|
2033
|
+
* Permite exibir a mensagem de erro.
|
|
2034
|
+
*/
|
|
2035
|
+
this.canShowError = true;
|
|
2036
|
+
}
|
|
2037
|
+
showError() {
|
|
2038
|
+
const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
|
|
2039
|
+
if (hasError) {
|
|
2040
|
+
this._inputElem.classList.add("hasError");
|
|
2041
|
+
this._messageBoxElem.classList.add("hasError");
|
|
2042
|
+
}
|
|
2043
|
+
else {
|
|
2044
|
+
this._inputElem.classList.remove("hasError");
|
|
2045
|
+
this._messageBoxElem.classList.remove("hasError");
|
|
2046
|
+
}
|
|
2047
|
+
}
|
|
2048
|
+
prepareMask() {
|
|
2049
|
+
if (this.mask) {
|
|
2050
|
+
if (this._maskFormatter == undefined) {
|
|
2051
|
+
this._maskFormatter = new index$1.MaskFormatter(this.mask);
|
|
2052
|
+
}
|
|
2053
|
+
else {
|
|
2054
|
+
this._maskFormatter.mask = this.mask;
|
|
2055
|
+
}
|
|
2056
|
+
}
|
|
2057
|
+
}
|
|
2058
|
+
updateInputValue() {
|
|
2059
|
+
if (this._inputElem) {
|
|
2060
|
+
this._inputElem.value = this.value;
|
|
2061
|
+
}
|
|
2062
|
+
this.handleChange();
|
|
2063
|
+
this.errorMessage = "";
|
|
2064
|
+
this.ezChange.emit(this.value);
|
|
2065
|
+
this.adjustFloatingLabel();
|
|
2066
|
+
}
|
|
2067
|
+
adjustFloatingLabel() {
|
|
2068
|
+
if (this.label && this._labelElem) {
|
|
2069
|
+
if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
|
|
2070
|
+
this._inputElem.classList.add("input--with--label");
|
|
2071
|
+
}
|
|
2072
|
+
const hasValue = this.value && this.value.toString().length > 0;
|
|
2073
|
+
const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
|
|
2074
|
+
if (hasValue || this.isFocused()) {
|
|
2075
|
+
if (!containsFloatedClass) {
|
|
2076
|
+
this._labelElem.classList.add("input__label--floated");
|
|
2077
|
+
}
|
|
2078
|
+
}
|
|
2079
|
+
else {
|
|
2080
|
+
if (containsFloatedClass) {
|
|
2081
|
+
this._labelElem.classList.remove("input__label--floated");
|
|
2082
|
+
}
|
|
2083
|
+
}
|
|
2084
|
+
}
|
|
2085
|
+
}
|
|
2086
|
+
isFocused() {
|
|
2087
|
+
return this._hostElement.shadowRoot.activeElement !== null;
|
|
2088
|
+
}
|
|
2089
|
+
//---------------------------------------------
|
|
2090
|
+
// Public methods
|
|
2091
|
+
//---------------------------------------------
|
|
2092
|
+
/**
|
|
2093
|
+
* Faz o foco no componente de input
|
|
2094
|
+
*/
|
|
2095
|
+
async setFocus() {
|
|
2096
|
+
this._inputElem.focus();
|
|
2097
|
+
}
|
|
2098
|
+
/**
|
|
2099
|
+
* Remove o foco no componente de input
|
|
2100
|
+
*/
|
|
2101
|
+
async setBlur() {
|
|
2102
|
+
this._inputElem.blur();
|
|
2103
|
+
}
|
|
2104
|
+
//---------------------------------------------
|
|
2105
|
+
// Event handlers
|
|
2106
|
+
//---------------------------------------------
|
|
2107
|
+
handleFocusout() {
|
|
2108
|
+
const value = this._inputElem.value;
|
|
2109
|
+
if (value && this._maskFormatter) {
|
|
2110
|
+
try {
|
|
2111
|
+
this._inputElem.value = this._maskFormatter.format(value);
|
|
2112
|
+
}
|
|
2113
|
+
catch (e) {
|
|
2114
|
+
this.errorMessage = e.message;
|
|
2115
|
+
}
|
|
2116
|
+
}
|
|
2117
|
+
this.value = this._inputElem.value;
|
|
2118
|
+
this.adjustFloatingLabel();
|
|
2119
|
+
}
|
|
2120
|
+
isValidValue(value) {
|
|
2121
|
+
if (this.restrict) {
|
|
2122
|
+
return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
|
|
2123
|
+
}
|
|
2124
|
+
return true;
|
|
2125
|
+
}
|
|
2126
|
+
handleChange() {
|
|
2127
|
+
if (!this._inputElem) {
|
|
2128
|
+
return;
|
|
2129
|
+
}
|
|
2130
|
+
const value = this._inputElem.value;
|
|
2131
|
+
if (this.isValidValue(value)) {
|
|
2132
|
+
this._lastValidValue = value;
|
|
2133
|
+
}
|
|
2134
|
+
else {
|
|
2135
|
+
this._inputElem.value = this._lastValidValue === undefined ? "" : this._lastValidValue;
|
|
2136
|
+
}
|
|
2137
|
+
this.value = this._inputElem.value;
|
|
2138
|
+
}
|
|
2139
|
+
handleSlotChange(ev) {
|
|
2140
|
+
const slot = ev.target;
|
|
2141
|
+
const content = slot.assignedElements()[0];
|
|
2142
|
+
if (content) {
|
|
2143
|
+
content.style.position = "absolute";
|
|
2144
|
+
content.style.display = "flex";
|
|
2145
|
+
content.style.alignItems = "center";
|
|
2146
|
+
content.style.justifyContent = "center";
|
|
2147
|
+
content.style.overflow = "hidden";
|
|
2148
|
+
content.style.top = "0px";
|
|
2149
|
+
content.style.width = "var(--ez-text-input__icon--width)";
|
|
2150
|
+
content.style.height = "var(--ez-text-input--height)";
|
|
2151
|
+
if (slot.name == "leftIcon") {
|
|
2152
|
+
content.style.left = "0px";
|
|
2153
|
+
content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
|
|
2154
|
+
this._inputElem.classList.add("icon--left");
|
|
2155
|
+
if (this._labelElem) {
|
|
2156
|
+
this._labelElem.classList.add("input__label--left");
|
|
2157
|
+
}
|
|
2158
|
+
}
|
|
2159
|
+
else if (slot.name == "rightIcon") {
|
|
2160
|
+
content.style.right = "0px";
|
|
2161
|
+
content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
|
|
2162
|
+
this._inputElem.classList.add("icon--right");
|
|
2163
|
+
if (this._labelElem) {
|
|
2164
|
+
this._labelElem.classList.add("input__label--right");
|
|
2165
|
+
}
|
|
2166
|
+
}
|
|
2167
|
+
}
|
|
2168
|
+
this.showError();
|
|
2169
|
+
}
|
|
2170
|
+
doFocus() {
|
|
2171
|
+
if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
|
|
2172
|
+
this._labelElem.classList.add("input__label--floated");
|
|
2173
|
+
}
|
|
2174
|
+
}
|
|
2175
|
+
//---------------------------------------------
|
|
2176
|
+
// Lifecycle web component
|
|
2177
|
+
//---------------------------------------------
|
|
2178
|
+
componentDidLoad() {
|
|
2179
|
+
this.showError();
|
|
2180
|
+
this.prepareMask();
|
|
2181
|
+
this.adjustFloatingLabel();
|
|
2182
|
+
}
|
|
2183
|
+
componentWillLoad() {
|
|
2184
|
+
this.prepareMask();
|
|
2185
|
+
if (this.value) {
|
|
2186
|
+
if (this._maskFormatter) {
|
|
2187
|
+
try {
|
|
2188
|
+
this.value = this._maskFormatter.format(this.value);
|
|
2189
|
+
}
|
|
2190
|
+
catch (e) {
|
|
2191
|
+
this.errorMessage = e.message;
|
|
2192
|
+
}
|
|
2193
|
+
}
|
|
2194
|
+
if (!this.isValidValue(this.value)) {
|
|
2195
|
+
this._lastValidValue = "";
|
|
2196
|
+
this.value = "";
|
|
2197
|
+
}
|
|
2198
|
+
}
|
|
2199
|
+
}
|
|
2200
|
+
render() {
|
|
2201
|
+
return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
|
|
2202
|
+
index.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)
|
|
2203
|
+
: null, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError &&
|
|
2204
|
+
index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
2205
|
+
}
|
|
2206
|
+
get _hostElement() { return index.getElement(this); }
|
|
2207
|
+
static get watchers() { return {
|
|
2208
|
+
"errorMessage": ["showError"],
|
|
2209
|
+
"mask": ["prepareMask"],
|
|
2210
|
+
"value": ["updateInputValue"]
|
|
2211
|
+
}; }
|
|
2212
|
+
};
|
|
2213
|
+
EzTextInput.style = ezTextInputCss;
|
|
2214
|
+
|
|
2215
|
+
class RemoteFile {
|
|
2216
|
+
constructor(file) {
|
|
2217
|
+
this.file = file;
|
|
2218
|
+
this.size = file.size;
|
|
2219
|
+
this.name = file.name;
|
|
2220
|
+
}
|
|
2221
|
+
abortUpload() {
|
|
2222
|
+
if (this._uploadingXhr) {
|
|
2223
|
+
this._aborted = true;
|
|
2224
|
+
this._uploadingXhr.abort();
|
|
2225
|
+
this._uploadingXhr = undefined;
|
|
2226
|
+
}
|
|
2227
|
+
}
|
|
2228
|
+
isUploading() {
|
|
2229
|
+
return this._uploadingXhr !== undefined;
|
|
2230
|
+
}
|
|
2231
|
+
async upload(server, headers, updateCallBack) {
|
|
2232
|
+
return new Promise((resolve, reject) => {
|
|
2233
|
+
const xhr = new XMLHttpRequest();
|
|
2234
|
+
this._uploadingXhr = xhr;
|
|
2235
|
+
this._aborted = false;
|
|
2236
|
+
this.progress = 0;
|
|
2237
|
+
xhr.upload.onprogress = (e) => {
|
|
2238
|
+
const loaded = e.loaded;
|
|
2239
|
+
const total = e.total;
|
|
2240
|
+
this.progress = ~~((loaded / total) * 100);
|
|
2241
|
+
updateCallBack(this, loaded, total);
|
|
2242
|
+
};
|
|
2243
|
+
xhr.onreadystatechange = () => {
|
|
2244
|
+
if (xhr.readyState == 4) {
|
|
2245
|
+
this._uploadingXhr = undefined;
|
|
2246
|
+
const status = xhr.status;
|
|
2247
|
+
if (!this._aborted) {
|
|
2248
|
+
if (status === 0) {
|
|
2249
|
+
reject("Servidor indisponível");
|
|
2250
|
+
}
|
|
2251
|
+
else if (status >= 500) {
|
|
2252
|
+
reject("Erro inesperado no servidor");
|
|
2253
|
+
}
|
|
2254
|
+
else if (status >= 400) {
|
|
2255
|
+
reject("Operação não permitida");
|
|
2256
|
+
}
|
|
2257
|
+
}
|
|
2258
|
+
const response = xhr.response;
|
|
2259
|
+
if (response) {
|
|
2260
|
+
resolve(JSON.parse(response));
|
|
2261
|
+
}
|
|
2262
|
+
}
|
|
2263
|
+
};
|
|
2264
|
+
xhr.ontimeout = () => {
|
|
2265
|
+
reject("Tempo limite de transferência atingido.");
|
|
2266
|
+
};
|
|
2267
|
+
const formData = new FormData();
|
|
2268
|
+
formData.append("ARQUIVO", this.file, this.file.name);
|
|
2269
|
+
xhr.open("POST", server, true);
|
|
2270
|
+
if (headers) {
|
|
2271
|
+
headers.forEach((value, key) => xhr.setRequestHeader(key, value));
|
|
2272
|
+
}
|
|
2273
|
+
xhr.send(formData);
|
|
2274
|
+
});
|
|
2275
|
+
}
|
|
2276
|
+
async delete(item, server, headers) {
|
|
2277
|
+
return new Promise((resolve, reject) => {
|
|
2278
|
+
const xhr = new XMLHttpRequest();
|
|
2279
|
+
xhr.onreadystatechange = () => {
|
|
2280
|
+
if (xhr.readyState == 4) {
|
|
2281
|
+
if (xhr.status === 0) {
|
|
2282
|
+
reject("Servidor indisponível");
|
|
2283
|
+
}
|
|
2284
|
+
else if (xhr.status >= 500) {
|
|
2285
|
+
reject("Erro inesperado no servidor");
|
|
2286
|
+
}
|
|
2287
|
+
else if (xhr.status >= 400) {
|
|
2288
|
+
reject("Operação não permitida");
|
|
2289
|
+
}
|
|
2290
|
+
resolve(true);
|
|
2291
|
+
}
|
|
2292
|
+
};
|
|
2293
|
+
xhr.ontimeout = () => {
|
|
2294
|
+
reject("Tempo limite de remoção atingido.");
|
|
2295
|
+
};
|
|
2296
|
+
xhr.open("DELETE", server, true);
|
|
2297
|
+
if (headers) {
|
|
2298
|
+
headers.forEach((value, key) => xhr.setRequestHeader(key, value));
|
|
2299
|
+
}
|
|
2300
|
+
xhr.send(JSON.stringify(item));
|
|
2301
|
+
});
|
|
2302
|
+
}
|
|
2303
|
+
}
|
|
2304
|
+
|
|
2305
|
+
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}.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%}}";
|
|
2306
|
+
|
|
2307
|
+
let EzUpload = class {
|
|
2308
|
+
constructor(hostRef) {
|
|
2309
|
+
index.registerInstance(this, hostRef);
|
|
2310
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
2311
|
+
this._filePointers = new Map();
|
|
2312
|
+
/**
|
|
2313
|
+
* Deixa o campo disponível ou não para digitação.
|
|
2314
|
+
*/
|
|
2315
|
+
this.enabled = true;
|
|
2316
|
+
}
|
|
2317
|
+
changeValue(newValue) {
|
|
2318
|
+
if (newValue !== this._updatingValue) {
|
|
2319
|
+
this._filePointers.forEach(f => {
|
|
2320
|
+
if (this.isRemoteFile(f)) {
|
|
2321
|
+
f.abortUpload();
|
|
2322
|
+
}
|
|
2323
|
+
});
|
|
2324
|
+
this._filePointers = new Map();
|
|
2325
|
+
this.updateFilePointers();
|
|
2326
|
+
}
|
|
2327
|
+
this._updatingValue = undefined;
|
|
2328
|
+
}
|
|
2329
|
+
updateFilePointers() {
|
|
2330
|
+
if (this.value) {
|
|
2331
|
+
this.value.forEach(ezFile => this._filePointers.set(ezFile.name, ezFile));
|
|
2332
|
+
}
|
|
2333
|
+
}
|
|
2334
|
+
normalizeRequestHeaders() {
|
|
2335
|
+
this._requestHeaders = new Map();
|
|
2336
|
+
if (typeof this.requestHeaders == "string") {
|
|
2337
|
+
try {
|
|
2338
|
+
this.requestHeaders = JSON.parse(this.requestHeaders);
|
|
2339
|
+
}
|
|
2340
|
+
catch (e) {
|
|
2341
|
+
this.requestHeaders = undefined;
|
|
2342
|
+
}
|
|
2343
|
+
}
|
|
2344
|
+
for (var key in this.requestHeaders) {
|
|
2345
|
+
this._requestHeaders.set(key, this.requestHeaders[key]);
|
|
2346
|
+
}
|
|
2347
|
+
}
|
|
2348
|
+
/**
|
|
2349
|
+
* Método responsável por adicionar um ou mais arquivos ao componente.
|
|
2350
|
+
*/
|
|
2351
|
+
async addFiles(files) {
|
|
2352
|
+
if (this.maxFiles > 0) {
|
|
2353
|
+
let countDistinctFiles = this._filePointers.size;
|
|
2354
|
+
files.forEach(file => {
|
|
2355
|
+
if (!this._filePointers.has(file.name)) {
|
|
2356
|
+
countDistinctFiles++;
|
|
2357
|
+
}
|
|
2358
|
+
});
|
|
2359
|
+
if (countDistinctFiles > this.maxFiles) {
|
|
2360
|
+
this.showError(`A quantidade máxima de arquivos é ${this.maxFiles}.`);
|
|
2361
|
+
return;
|
|
2362
|
+
}
|
|
2363
|
+
}
|
|
2364
|
+
Array.prototype.forEach.call(files, this.addFile.bind(this));
|
|
2365
|
+
}
|
|
2366
|
+
async addFile(file) {
|
|
2367
|
+
const oldFile = this._filePointers.get(file.name);
|
|
2368
|
+
if (oldFile) {
|
|
2369
|
+
ApplicationUtils.confirm("Substituir arquivo", `Já existe um arquivo chamado "${file.name}". Deseja substituí-lo?`)
|
|
2370
|
+
.then(ok => {
|
|
2371
|
+
if (ok) {
|
|
2372
|
+
if (this.isRemoteFile(oldFile)) {
|
|
2373
|
+
oldFile.abortUpload();
|
|
2374
|
+
}
|
|
2375
|
+
this.doAddFile(file);
|
|
2376
|
+
}
|
|
2377
|
+
});
|
|
2378
|
+
}
|
|
2379
|
+
else {
|
|
2380
|
+
this.doAddFile(file);
|
|
2381
|
+
}
|
|
2382
|
+
}
|
|
2383
|
+
async doAddFile(file) {
|
|
2384
|
+
if (this.validateFile(file)) {
|
|
2385
|
+
const uploadingFile = new RemoteFile(file);
|
|
2386
|
+
this._filePointers.set(file.name, uploadingFile);
|
|
2387
|
+
uploadingFile.upload(this.urlUpload, this._requestHeaders, (file) => this.updateFeedback(file))
|
|
2388
|
+
.then((files) => files.forEach(ezFile => this.finishUpload(ezFile)))
|
|
2389
|
+
.catch(msg => this.showError(msg));
|
|
2390
|
+
index.forceUpdate(this);
|
|
2391
|
+
}
|
|
2392
|
+
}
|
|
2393
|
+
finishUpload(ezFile) {
|
|
2394
|
+
this._filePointers.set(ezFile.name, ezFile);
|
|
2395
|
+
this.updateValue();
|
|
2396
|
+
}
|
|
2397
|
+
updateValue() {
|
|
2398
|
+
this._updatingValue = [];
|
|
2399
|
+
this._filePointers.forEach(f => {
|
|
2400
|
+
if (!this.isRemoteFile(f)) {
|
|
2401
|
+
this._updatingValue.push(f);
|
|
2402
|
+
}
|
|
2403
|
+
});
|
|
2404
|
+
this.value = this._updatingValue;
|
|
2405
|
+
this.ezChange.emit(this.value);
|
|
2406
|
+
}
|
|
2407
|
+
buildProgressId(uploading) {
|
|
2408
|
+
let sanitizedName = uploading.name.replace(/[^a-z0-9_]/gi, "_");
|
|
2409
|
+
return `PROGRESS_${sanitizedName}_${uploading.file.lastModified}`;
|
|
2410
|
+
}
|
|
2411
|
+
updateFeedback(uf) {
|
|
2412
|
+
window.requestAnimationFrame(() => {
|
|
2413
|
+
if (this._host) {
|
|
2414
|
+
const progress = this._host.shadowRoot.querySelector("#" + this.buildProgressId(uf));
|
|
2415
|
+
if (progress) {
|
|
2416
|
+
progress.value = uf.progress;
|
|
2417
|
+
}
|
|
2418
|
+
}
|
|
2419
|
+
});
|
|
2420
|
+
}
|
|
2421
|
+
validateFile(file) {
|
|
2422
|
+
if (!this._filePointers.has(file.name) && this.maxFiles > 0 && this._filePointers.size >= this.maxFiles) {
|
|
2423
|
+
this.showError(`A quantidade máxima de arquivos é ${this.maxFiles}.`);
|
|
2424
|
+
return false;
|
|
2425
|
+
}
|
|
2426
|
+
if (file.size === 0) {
|
|
2427
|
+
this.showError(`Erro de permissão: O arquivo "${file.name}" não pode ser enviado.`);
|
|
2428
|
+
return false;
|
|
2429
|
+
}
|
|
2430
|
+
if (!this.urlUpload) {
|
|
2431
|
+
this.showError("Endereço de upload não informado");
|
|
2432
|
+
return false;
|
|
2433
|
+
}
|
|
2434
|
+
if (this.maxFileSize >= 0 && file.size > this.maxFileSize) {
|
|
2435
|
+
this.showError("O tamanho máximo dos arquivos é de " + this.formatBytes(this.maxFileSize));
|
|
2436
|
+
return false;
|
|
2437
|
+
}
|
|
2438
|
+
return true;
|
|
2439
|
+
}
|
|
2440
|
+
showError(message) {
|
|
2441
|
+
ApplicationUtils.alert("Enviando arquivo", message);
|
|
2442
|
+
}
|
|
2443
|
+
formatBytes(bytes, decimals = 1) {
|
|
2444
|
+
if (bytes === 0)
|
|
2445
|
+
return "0 Bytes";
|
|
2446
|
+
const k = 1024;
|
|
2447
|
+
const dm = decimals < 0 ? 0 : decimals;
|
|
2448
|
+
const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
|
2449
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
2450
|
+
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
|
|
2451
|
+
}
|
|
2452
|
+
onFileInputChange(event) {
|
|
2453
|
+
const input = event.target;
|
|
2454
|
+
this.addFiles(Array.from(input.files));
|
|
2455
|
+
this._fileInput.value = "";
|
|
2456
|
+
}
|
|
2457
|
+
isRemoteFile(item) {
|
|
2458
|
+
return "file" in item;
|
|
2459
|
+
}
|
|
2460
|
+
removeFromList(name) {
|
|
2461
|
+
this._filePointers.delete(name);
|
|
2462
|
+
this.updateValue();
|
|
2463
|
+
}
|
|
2464
|
+
removeFile(name) {
|
|
2465
|
+
const item = this._filePointers.get(name);
|
|
2466
|
+
if (this.isRemoteFile(item)) {
|
|
2467
|
+
item.abortUpload();
|
|
2468
|
+
this.removeFromList(name);
|
|
2469
|
+
}
|
|
2470
|
+
else {
|
|
2471
|
+
if (this.urlDelete) {
|
|
2472
|
+
const uploadingFile = new RemoteFile(null);
|
|
2473
|
+
this._filePointers.set(item.name, uploadingFile);
|
|
2474
|
+
uploadingFile.delete(item, this.urlDelete, null)
|
|
2475
|
+
.then(_ok => this.removeFromList(name))
|
|
2476
|
+
.catch(msg => this.showError(msg));
|
|
2477
|
+
}
|
|
2478
|
+
else {
|
|
2479
|
+
this.removeFromList(name);
|
|
2480
|
+
}
|
|
2481
|
+
}
|
|
2482
|
+
}
|
|
2483
|
+
openFilesDialog() {
|
|
2484
|
+
if (this.enabled) {
|
|
2485
|
+
this._fileInput.click();
|
|
2486
|
+
}
|
|
2487
|
+
}
|
|
2488
|
+
componentDidLoad() {
|
|
2489
|
+
if (this.enabled && this._dropZone && window.FileList && window.File) {
|
|
2490
|
+
this._dropZone.addEventListener("dragover", event => {
|
|
2491
|
+
event.stopPropagation();
|
|
2492
|
+
event.preventDefault();
|
|
2493
|
+
event.dataTransfer.dropEffect = "copy";
|
|
2494
|
+
this._dropZone.style.background = "#c2dbff";
|
|
2495
|
+
});
|
|
2496
|
+
this._dropZone.addEventListener("drop", event => {
|
|
2497
|
+
event.stopPropagation();
|
|
2498
|
+
event.preventDefault();
|
|
2499
|
+
this.addFiles(Array.from(event.dataTransfer.files));
|
|
2500
|
+
this._dropZone.style.background = "";
|
|
2501
|
+
});
|
|
2502
|
+
this._dropZone.addEventListener("dragleave", _event => {
|
|
2503
|
+
this._dropZone.style.background = "";
|
|
2504
|
+
});
|
|
2505
|
+
}
|
|
2506
|
+
}
|
|
2507
|
+
componentWillRender() {
|
|
2508
|
+
if (this.value) {
|
|
2509
|
+
if (this._filePointers.size < this.value.length) {
|
|
2510
|
+
this.updateFilePointers();
|
|
2511
|
+
}
|
|
2512
|
+
}
|
|
2513
|
+
}
|
|
2514
|
+
render() {
|
|
2515
|
+
return (index.h("div", { ref: (el) => this._dropZone = el, class: this.evalDisabledClass("iu", "background--disabled") }, index.h("div", { class: "iu__container", onClick: () => this.openFilesDialog() }, index.h("div", { class: "iu_header" }, this.label ? index.h("label", { class: this.evalDisabledClass("iu__label", "text--disabled"), title: this.label }, this.label) : null, index.h("div", { class: this.evalDisabledClass("iu__icon-label", "mouse-pointer--disabled") }, index.h("button", { class: "iu__file-icon", disabled: !this.enabled }), index.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()), index.h("input", { ref: (el) => this._fileInput = el, onChange: (ev) => this.onFileInputChange(ev), type: "file", multiple: true, hidden: true })));
|
|
2516
|
+
}
|
|
2517
|
+
buildFooter() {
|
|
2518
|
+
if (this._filePointers.size === 0) {
|
|
2519
|
+
return null;
|
|
2520
|
+
}
|
|
2521
|
+
const items = [];
|
|
2522
|
+
this._filePointers.forEach(item => items.push(this.buildFileItem(item)));
|
|
2523
|
+
return (index.h("div", { class: "iu__footer" }, items));
|
|
2524
|
+
}
|
|
2525
|
+
buildFileItem(item) {
|
|
2526
|
+
const fileName = item.name;
|
|
2527
|
+
const progress = Number(item["progress"]);
|
|
2528
|
+
const downloadURL = item["downloadURL"];
|
|
2529
|
+
const label = `${fileName} (${this.formatBytes(item.size)})`;
|
|
2530
|
+
return (index.h("div", { class: "iu__item", key: fileName, onClick: evt => evt.stopPropagation() }, index.h("div", { class: "iu__item-label modificador" }, index.h("div", { title: label, class: "col--stretch align--middle file__name text text--primary text--small text--ellipsis align--middle" }, downloadURL ? index.h("a", { href: downloadURL, download: true }, label) : label)), isNaN(progress)
|
|
2531
|
+
?
|
|
2532
|
+
null
|
|
2533
|
+
:
|
|
2534
|
+
index.h("div", { class: "col col--sd-4 col--stretch align--middle" }, index.h("progress", { id: this.buildProgressId(item), value: progress, max: "100" })), this.enabled
|
|
2535
|
+
?
|
|
2536
|
+
index.h("div", { class: "col col--stretch align--middle" }, index.h("button", { class: "btn-cancel ", onClick: () => this.removeFile(fileName) }))
|
|
2537
|
+
:
|
|
2538
|
+
null));
|
|
2539
|
+
}
|
|
2540
|
+
evalDisabledClass(regularClasses, disabledClass) {
|
|
2541
|
+
return this.enabled ? regularClasses : `${regularClasses} ${disabledClass}`;
|
|
2542
|
+
}
|
|
2543
|
+
get _host() { return index.getElement(this); }
|
|
2544
|
+
static get watchers() { return {
|
|
2545
|
+
"value": ["changeValue"],
|
|
2546
|
+
"requestHeaders": ["normalizeRequestHeaders"]
|
|
2547
|
+
}; }
|
|
2548
|
+
};
|
|
2549
|
+
EzUpload.style = ezUploadCss;
|
|
2550
|
+
|
|
2551
|
+
const testDuCss = ":host{display:block}";
|
|
2552
|
+
|
|
2553
|
+
let TestDu = class {
|
|
2554
|
+
constructor(hostRef) {
|
|
2555
|
+
index.registerInstance(this, hostRef);
|
|
2556
|
+
}
|
|
2557
|
+
componentWillLoad() {
|
|
2558
|
+
this.dataUnit = new index$1.DataUnit("testes_com_formulario");
|
|
2559
|
+
this.dataUnit.metadata = {
|
|
2560
|
+
name: "dd://br.com.sankhya.fin.cad.movimentacaoFinanceira/Financeiro",
|
|
2561
|
+
label: "Parceiro",
|
|
2562
|
+
fields: [
|
|
2563
|
+
{
|
|
2564
|
+
name: "CODPARC",
|
|
2565
|
+
label: "Parceiro",
|
|
2566
|
+
dataType: index$1.DataType.NUMBER,
|
|
2567
|
+
userInterface: index$1.UserInterface.SEARCH,
|
|
2568
|
+
required: true,
|
|
2569
|
+
properties: {}
|
|
2570
|
+
},
|
|
2571
|
+
{
|
|
2572
|
+
name: "RECDESP",
|
|
2573
|
+
label: "Receita/Despesa",
|
|
2574
|
+
dataType: index$1.DataType.TEXT,
|
|
2575
|
+
userInterface: index$1.UserInterface.OPTIONSELECTOR,
|
|
2576
|
+
required: true,
|
|
2577
|
+
properties: { options: `{"-1": "Despesa", "1": "Receita"}` }
|
|
2578
|
+
},
|
|
2579
|
+
{
|
|
2580
|
+
name: "P",
|
|
2581
|
+
label: "pera",
|
|
2582
|
+
dataType: index$1.DataType.TEXT,
|
|
2583
|
+
userInterface: index$1.UserInterface.OPTIONSELECTOR,
|
|
2584
|
+
properties: { options: `{"M": "Madura", "V": "Verde", "P": "Passada"}` }
|
|
2585
|
+
},
|
|
2586
|
+
{
|
|
2587
|
+
name: "ME",
|
|
2588
|
+
label: "ME",
|
|
2589
|
+
dataType: index$1.DataType.NUMBER,
|
|
2590
|
+
userInterface: index$1.UserInterface.DECIMALNUMBER,
|
|
2591
|
+
properties: { precision: 4, prettyPrecision: 1 }
|
|
2592
|
+
}
|
|
2593
|
+
]
|
|
2594
|
+
};
|
|
2595
|
+
this.dataUnit.dataLoader = () => new Promise(accept => accept([
|
|
2596
|
+
{
|
|
2597
|
+
__record__id__: "1321321321321321",
|
|
2598
|
+
CODPARC: 10,
|
|
2599
|
+
NOMEPARC: "Parceiro 10",
|
|
2600
|
+
P: "M",
|
|
2601
|
+
L: "Bagaço",
|
|
2602
|
+
LI: "Azedo"
|
|
2603
|
+
}
|
|
2604
|
+
]));
|
|
2605
|
+
}
|
|
2606
|
+
render() {
|
|
2607
|
+
return (index.h("ez-form", { dataUnit: this.dataUnit }));
|
|
2608
|
+
}
|
|
2609
|
+
};
|
|
2610
|
+
TestDu.style = testDuCss;
|
|
2611
|
+
|
|
2612
|
+
exports.ez_calendar = EzCalendar;
|
|
2613
|
+
exports.ez_check = EzCheck;
|
|
2614
|
+
exports.ez_collapsible_box = EzCollapsibleBox;
|
|
2615
|
+
exports.ez_combo_box = EzComboBox;
|
|
2616
|
+
exports.ez_date_input = EzDateInput;
|
|
2617
|
+
exports.ez_date_time_input = EzDateTimeInput;
|
|
2618
|
+
exports.ez_form = EzForm;
|
|
2619
|
+
exports.ez_number_input = EzNumberInput;
|
|
2620
|
+
exports.ez_search = EzSearch;
|
|
2621
|
+
exports.ez_tabselector = EzTabselector;
|
|
2622
|
+
exports.ez_text_area = EzTextArea;
|
|
2623
|
+
exports.ez_text_input = EzTextInput;
|
|
2624
|
+
exports.ez_upload = EzUpload;
|
|
2625
|
+
exports.test_du = TestDu;
|