@sankhyalabs/ezui 5.22.0-dev.117 → 5.22.0-dev.119
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/{DataBinder-c2060474.js → DataBinder-b9973a19.js} +39 -11
- package/dist/cjs/ez-check.cjs.entry.js +18 -10
- package/dist/cjs/ez-combo-box.cjs.entry.js +2 -1
- package/dist/cjs/ez-date-input.cjs.entry.js +2 -1
- package/dist/cjs/ez-date-time-input.cjs.entry.js +2 -1
- package/dist/cjs/ez-dialog.cjs.entry.js +3 -2
- package/dist/cjs/ez-form.cjs.entry.js +1 -1
- package/dist/cjs/ez-grid.cjs.entry.js +2 -2
- package/dist/cjs/ez-number-input.cjs.entry.js +2 -1
- package/dist/cjs/ez-search.cjs.entry.js +2 -1
- package/dist/cjs/ez-text-area.cjs.entry.js +24 -3
- package/dist/cjs/ez-text-input.cjs.entry.js +27 -3
- package/dist/cjs/ez-time-input.cjs.entry.js +2 -1
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-check/ez-check.css +9 -0
- package/dist/collection/components/ez-check/ez-check.js +34 -9
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +19 -1
- package/dist/collection/components/ez-date-input/ez-date-input.js +19 -1
- package/dist/collection/components/ez-date-time-input/ez-date-time-input.js +19 -1
- package/dist/collection/components/ez-dialog/ez-dialog.css +24 -21
- package/dist/collection/components/ez-dialog/ez-dialog.js +2 -1
- package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +1 -1
- package/dist/collection/components/ez-number-input/ez-number-input.js +19 -1
- package/dist/collection/components/ez-search/ez-search.js +19 -1
- package/dist/collection/components/ez-text-area/ez-text-area.js +47 -2
- package/dist/collection/components/ez-text-input/ez-text-input.js +47 -3
- package/dist/collection/components/ez-time-input/ez-time-input.js +19 -1
- package/dist/collection/utils/form/DataBinder.js +40 -12
- package/dist/collection/utils/form/test/DataBinder.test.js +14 -0
- package/dist/custom-elements/index.js +134 -46
- package/dist/esm/{DataBinder-89946126.js → DataBinder-1035e36f.js} +40 -12
- package/dist/esm/ez-check.entry.js +18 -10
- package/dist/esm/ez-combo-box.entry.js +2 -1
- package/dist/esm/ez-date-input.entry.js +2 -1
- package/dist/esm/ez-date-time-input.entry.js +2 -1
- package/dist/esm/ez-dialog.entry.js +3 -2
- package/dist/esm/ez-form.entry.js +1 -1
- package/dist/esm/ez-grid.entry.js +2 -2
- package/dist/esm/ez-number-input.entry.js +2 -1
- package/dist/esm/ez-search.entry.js +2 -1
- package/dist/esm/ez-text-area.entry.js +24 -3
- package/dist/esm/ez-text-input.entry.js +27 -3
- package/dist/esm/ez-time-input.entry.js +2 -1
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-15ea0c98.js +1 -0
- package/dist/ezui/p-3ba9565c.entry.js +1 -0
- package/dist/ezui/p-496f7832.entry.js +1 -0
- package/dist/ezui/p-4bd6dd6a.entry.js +1 -0
- package/dist/ezui/p-629d15ed.entry.js +1 -0
- package/dist/ezui/p-7019f782.entry.js +1 -0
- package/dist/ezui/{p-da069110.entry.js → p-91b118a7.entry.js} +2 -2
- package/dist/ezui/p-9478b13b.entry.js +1 -0
- package/dist/ezui/p-b81881ac.entry.js +1 -0
- package/dist/ezui/p-c00df4be.entry.js +1 -0
- package/dist/ezui/p-cb75eb46.entry.js +1 -0
- package/dist/ezui/p-ebd23857.entry.js +1 -0
- package/dist/ezui/{p-8ac8093c.entry.js → p-f6316720.entry.js} +1 -1
- package/dist/types/components/ez-check/ez-check.d.ts +7 -2
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +4 -0
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +4 -0
- package/dist/types/components/ez-date-time-input/ez-date-time-input.d.ts +4 -0
- package/dist/types/components/ez-number-input/ez-number-input.d.ts +4 -0
- package/dist/types/components/ez-search/ez-search.d.ts +4 -0
- package/dist/types/components/ez-text-area/ez-text-area.d.ts +8 -0
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +9 -0
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +4 -0
- package/dist/types/components.d.ts +72 -0
- package/dist/types/utils/form/DataBinder.d.ts +4 -2
- package/package.json +1 -1
- package/dist/ezui/p-13249c07.entry.js +0 -1
- package/dist/ezui/p-17de16e5.entry.js +0 -1
- package/dist/ezui/p-1a060042.entry.js +0 -1
- package/dist/ezui/p-31b71e50.entry.js +0 -1
- package/dist/ezui/p-58545666.entry.js +0 -1
- package/dist/ezui/p-7fdd479f.entry.js +0 -1
- package/dist/ezui/p-9f22e1dc.entry.js +0 -1
- package/dist/ezui/p-a64cfcfc.js +0 -1
- package/dist/ezui/p-c1527804.entry.js +0 -1
- package/dist/ezui/p-cd07f8be.entry.js +0 -1
- package/dist/ezui/p-e3544d23.entry.js +0 -1
|
@@ -17,6 +17,7 @@ export class EzNumberInput {
|
|
|
17
17
|
this.prettyPrecision = undefined;
|
|
18
18
|
this.mode = "regular";
|
|
19
19
|
this.autoFocus = false;
|
|
20
|
+
this.alternativePlaceholder = undefined;
|
|
20
21
|
}
|
|
21
22
|
/**
|
|
22
23
|
* Aplica o foco no campo.
|
|
@@ -175,7 +176,7 @@ export class EzNumberInput {
|
|
|
175
176
|
if (this.allowNegative) {
|
|
176
177
|
restrict += '-';
|
|
177
178
|
}
|
|
178
|
-
return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: restrict, enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value }));
|
|
179
|
+
return (h("ez-text-input", { class: "number__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: restrict, enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, value: this._value, alternativePlaceholder: this.alternativePlaceholder }));
|
|
179
180
|
}
|
|
180
181
|
static get is() { return "ez-number-input"; }
|
|
181
182
|
static get encapsulation() { return "shadow"; }
|
|
@@ -365,6 +366,23 @@ export class EzNumberInput {
|
|
|
365
366
|
"attribute": "auto-focus",
|
|
366
367
|
"reflect": false,
|
|
367
368
|
"defaultValue": "false"
|
|
369
|
+
},
|
|
370
|
+
"alternativePlaceholder": {
|
|
371
|
+
"type": "string",
|
|
372
|
+
"mutable": false,
|
|
373
|
+
"complexType": {
|
|
374
|
+
"original": "string",
|
|
375
|
+
"resolved": "string",
|
|
376
|
+
"references": {}
|
|
377
|
+
},
|
|
378
|
+
"required": false,
|
|
379
|
+
"optional": false,
|
|
380
|
+
"docs": {
|
|
381
|
+
"tags": [],
|
|
382
|
+
"text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
|
|
383
|
+
},
|
|
384
|
+
"attribute": "alternative-placeholder",
|
|
385
|
+
"reflect": false
|
|
368
386
|
}
|
|
369
387
|
};
|
|
370
388
|
}
|
|
@@ -42,6 +42,7 @@ export class EzSearch {
|
|
|
42
42
|
this.ensureClearButtonVisible = false;
|
|
43
43
|
this.suppressPreLoad = true;
|
|
44
44
|
this.autoFocus = false;
|
|
45
|
+
this.alternativePlaceholder = undefined;
|
|
45
46
|
}
|
|
46
47
|
observeErrorMessage() {
|
|
47
48
|
var _a;
|
|
@@ -596,7 +597,7 @@ export class EzSearch {
|
|
|
596
597
|
render() {
|
|
597
598
|
var _a;
|
|
598
599
|
ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
|
|
599
|
-
return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
|
|
600
|
+
return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, alternativePlaceholder: this.alternativePlaceholder }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
|
|
600
601
|
? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
|
|
601
602
|
: undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el] }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
|
|
602
603
|
}
|
|
@@ -1007,6 +1008,23 @@ export class EzSearch {
|
|
|
1007
1008
|
"attribute": "auto-focus",
|
|
1008
1009
|
"reflect": false,
|
|
1009
1010
|
"defaultValue": "false"
|
|
1011
|
+
},
|
|
1012
|
+
"alternativePlaceholder": {
|
|
1013
|
+
"type": "string",
|
|
1014
|
+
"mutable": false,
|
|
1015
|
+
"complexType": {
|
|
1016
|
+
"original": "string",
|
|
1017
|
+
"resolved": "string",
|
|
1018
|
+
"references": {}
|
|
1019
|
+
},
|
|
1020
|
+
"required": false,
|
|
1021
|
+
"optional": false,
|
|
1022
|
+
"docs": {
|
|
1023
|
+
"tags": [],
|
|
1024
|
+
"text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
|
|
1025
|
+
},
|
|
1026
|
+
"attribute": "alternative-placeholder",
|
|
1027
|
+
"reflect": true
|
|
1010
1028
|
}
|
|
1011
1029
|
};
|
|
1012
1030
|
}
|
|
@@ -14,6 +14,8 @@ export class EzTextArea {
|
|
|
14
14
|
this.enableResize = true;
|
|
15
15
|
this.autoRows = false;
|
|
16
16
|
this.autoFocus = false;
|
|
17
|
+
this.alternativePlaceholder = undefined;
|
|
18
|
+
this.forceLabelFloat = false;
|
|
17
19
|
}
|
|
18
20
|
observeErrorMessage() {
|
|
19
21
|
var _a, _b, _c, _d;
|
|
@@ -64,6 +66,9 @@ export class EzTextArea {
|
|
|
64
66
|
(_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
65
67
|
}
|
|
66
68
|
}
|
|
69
|
+
observeAlternativePlaceholder(newValue) {
|
|
70
|
+
this.forceLabelFloat = !!newValue;
|
|
71
|
+
}
|
|
67
72
|
//---------------------------------------------
|
|
68
73
|
// Public methods
|
|
69
74
|
//---------------------------------------------
|
|
@@ -112,6 +117,8 @@ export class EzTextArea {
|
|
|
112
117
|
return this._inputElem && (this.value || "") !== this._inputElem.value;
|
|
113
118
|
}
|
|
114
119
|
adjustFloatingLabel() {
|
|
120
|
+
if (this.forceLabelFloat)
|
|
121
|
+
return;
|
|
115
122
|
if (this.label && this._labelElem) {
|
|
116
123
|
const hasValue = this.value && this.value.toString().length > 0;
|
|
117
124
|
const containsFloatedClass = this._labelElem.classList.contains("textarea__label--floated");
|
|
@@ -195,6 +202,19 @@ export class EzTextArea {
|
|
|
195
202
|
var _a;
|
|
196
203
|
(_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
197
204
|
}
|
|
205
|
+
buildPlaceholder() {
|
|
206
|
+
if (this.alternativePlaceholder)
|
|
207
|
+
return this.alternativePlaceholder;
|
|
208
|
+
return (this.mode === "slim" && this.label) ? this.label : '';
|
|
209
|
+
}
|
|
210
|
+
buildLabelClass() {
|
|
211
|
+
let classList = this.enabled ? 'textarea__label' : 'textarea__label textarea__label--disabled';
|
|
212
|
+
if (this.errorMessage)
|
|
213
|
+
classList = classList + ' hasError';
|
|
214
|
+
if (this.forceLabelFloat)
|
|
215
|
+
classList = classList + ' textarea__label--floated';
|
|
216
|
+
return classList;
|
|
217
|
+
}
|
|
198
218
|
//---------------------------------------------
|
|
199
219
|
// Lifecycle web component
|
|
200
220
|
//---------------------------------------------
|
|
@@ -211,11 +231,11 @@ export class EzTextArea {
|
|
|
211
231
|
render() {
|
|
212
232
|
ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
|
|
213
233
|
return (h(Host, null, h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
|
|
214
|
-
h("label", { ref: (el) => this._labelElem = el, class: this.
|
|
234
|
+
h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
|
|
215
235
|
: null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
|
|
216
236
|
"textarea--slim": this.mode === "slim",
|
|
217
237
|
"textarea--resizable": this.enableResize
|
|
218
|
-
}, placeholder: this.
|
|
238
|
+
}, placeholder: this.buildPlaceholder(), onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, rows: this.rows })), this.canShowError && this.mode != "slim" &&
|
|
219
239
|
h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
220
240
|
}
|
|
221
241
|
static get is() { return "ez-text-area"; }
|
|
@@ -408,9 +428,31 @@ export class EzTextArea {
|
|
|
408
428
|
"attribute": "auto-focus",
|
|
409
429
|
"reflect": false,
|
|
410
430
|
"defaultValue": "false"
|
|
431
|
+
},
|
|
432
|
+
"alternativePlaceholder": {
|
|
433
|
+
"type": "string",
|
|
434
|
+
"mutable": false,
|
|
435
|
+
"complexType": {
|
|
436
|
+
"original": "string",
|
|
437
|
+
"resolved": "string",
|
|
438
|
+
"references": {}
|
|
439
|
+
},
|
|
440
|
+
"required": false,
|
|
441
|
+
"optional": false,
|
|
442
|
+
"docs": {
|
|
443
|
+
"tags": [],
|
|
444
|
+
"text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
|
|
445
|
+
},
|
|
446
|
+
"attribute": "alternative-placeholder",
|
|
447
|
+
"reflect": true
|
|
411
448
|
}
|
|
412
449
|
};
|
|
413
450
|
}
|
|
451
|
+
static get states() {
|
|
452
|
+
return {
|
|
453
|
+
"forceLabelFloat": {}
|
|
454
|
+
};
|
|
455
|
+
}
|
|
414
456
|
static get events() {
|
|
415
457
|
return [{
|
|
416
458
|
"method": "ezChange",
|
|
@@ -523,6 +565,9 @@ export class EzTextArea {
|
|
|
523
565
|
}, {
|
|
524
566
|
"propName": "autoRows",
|
|
525
567
|
"methodName": "observeAutoRows"
|
|
568
|
+
}, {
|
|
569
|
+
"propName": "alternativePlaceholder",
|
|
570
|
+
"methodName": "observeAlternativePlaceholder"
|
|
526
571
|
}];
|
|
527
572
|
}
|
|
528
573
|
}
|
|
@@ -4,6 +4,7 @@ export class EzTextInput {
|
|
|
4
4
|
constructor() {
|
|
5
5
|
this._isOverflowing = false;
|
|
6
6
|
this.label = undefined;
|
|
7
|
+
this.alternativePlaceholder = undefined;
|
|
7
8
|
this.value = undefined;
|
|
8
9
|
this.enabled = true;
|
|
9
10
|
this.errorMessage = undefined;
|
|
@@ -17,6 +18,7 @@ export class EzTextInput {
|
|
|
17
18
|
this.password = false;
|
|
18
19
|
this.autoFocus = false;
|
|
19
20
|
this.hasRightSlotContent = false;
|
|
21
|
+
this.forceLabelFloat = false;
|
|
20
22
|
}
|
|
21
23
|
observeHasInvalid(newValue, oldValue) {
|
|
22
24
|
if (newValue === oldValue) {
|
|
@@ -48,6 +50,9 @@ export class EzTextInput {
|
|
|
48
50
|
}
|
|
49
51
|
}
|
|
50
52
|
}
|
|
53
|
+
observeAlternativePlaceholder(newValue) {
|
|
54
|
+
this.forceLabelFloat = !!newValue;
|
|
55
|
+
}
|
|
51
56
|
//---------------------------------------------
|
|
52
57
|
// Private methods
|
|
53
58
|
//---------------------------------------------
|
|
@@ -75,6 +80,8 @@ export class EzTextInput {
|
|
|
75
80
|
if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
|
|
76
81
|
this._inputElem.classList.add("input--with--label");
|
|
77
82
|
}
|
|
83
|
+
if (this.forceLabelFloat)
|
|
84
|
+
return;
|
|
78
85
|
const hasValue = this.value && this.value.toString().length > 0;
|
|
79
86
|
const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
|
|
80
87
|
if (hasValue || this.isFocused()) {
|
|
@@ -250,6 +257,19 @@ export class EzTextInput {
|
|
|
250
257
|
getValue() {
|
|
251
258
|
return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
|
|
252
259
|
}
|
|
260
|
+
buildLabelClass() {
|
|
261
|
+
let classList = this.enabled ? 'input__label' : 'input__label input__label--disabled';
|
|
262
|
+
if (this.errorMessage)
|
|
263
|
+
classList = classList + ' hasError';
|
|
264
|
+
if (this.forceLabelFloat)
|
|
265
|
+
classList = classList + ' input__label--floated';
|
|
266
|
+
return classList;
|
|
267
|
+
}
|
|
268
|
+
buildPlaceholder() {
|
|
269
|
+
if (this.alternativePlaceholder)
|
|
270
|
+
return this.alternativePlaceholder;
|
|
271
|
+
return (this.mode === "slim" && this.label) ? this.label : '';
|
|
272
|
+
}
|
|
253
273
|
checkIsOverflowing() {
|
|
254
274
|
if (this._inputElem) {
|
|
255
275
|
this._isOverflowing = this._inputElem.offsetWidth < this._inputElem.scrollWidth;
|
|
@@ -299,11 +319,14 @@ export class EzTextInput {
|
|
|
299
319
|
this._inputElem.setSelectionRange(0, (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value.length);
|
|
300
320
|
});
|
|
301
321
|
}
|
|
322
|
+
componentDidRender() {
|
|
323
|
+
this.adjustFloatingLabel();
|
|
324
|
+
}
|
|
302
325
|
render() {
|
|
303
326
|
ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
|
|
304
327
|
return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
|
|
305
|
-
h("label", { ref: (el) => this._labelElem = el, class:
|
|
306
|
-
: null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.
|
|
328
|
+
h("label", { ref: (el) => this._labelElem = el, class: this.buildLabelClass(), onClick: () => this._inputElem.focus(), title: this.label }, this.label)
|
|
329
|
+
: null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.buildPlaceholder(), value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), active: this._isOverflowing, useAnchorSize: true }), this.canShowError && this.mode != "slim" && this.errorMessage &&
|
|
307
330
|
h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" })), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
|
|
308
331
|
}
|
|
309
332
|
static get is() { return "ez-text-input"; }
|
|
@@ -337,6 +360,23 @@ export class EzTextInput {
|
|
|
337
360
|
"attribute": "label",
|
|
338
361
|
"reflect": true
|
|
339
362
|
},
|
|
363
|
+
"alternativePlaceholder": {
|
|
364
|
+
"type": "string",
|
|
365
|
+
"mutable": false,
|
|
366
|
+
"complexType": {
|
|
367
|
+
"original": "string",
|
|
368
|
+
"resolved": "string",
|
|
369
|
+
"references": {}
|
|
370
|
+
},
|
|
371
|
+
"required": false,
|
|
372
|
+
"optional": false,
|
|
373
|
+
"docs": {
|
|
374
|
+
"tags": [],
|
|
375
|
+
"text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
|
|
376
|
+
},
|
|
377
|
+
"attribute": "alternative-placeholder",
|
|
378
|
+
"reflect": true
|
|
379
|
+
},
|
|
340
380
|
"value": {
|
|
341
381
|
"type": "string",
|
|
342
382
|
"mutable": true,
|
|
@@ -553,7 +593,8 @@ export class EzTextInput {
|
|
|
553
593
|
}
|
|
554
594
|
static get states() {
|
|
555
595
|
return {
|
|
556
|
-
"hasRightSlotContent": {}
|
|
596
|
+
"hasRightSlotContent": {},
|
|
597
|
+
"forceLabelFloat": {}
|
|
557
598
|
};
|
|
558
599
|
}
|
|
559
600
|
static get events() {
|
|
@@ -649,6 +690,9 @@ export class EzTextInput {
|
|
|
649
690
|
}, {
|
|
650
691
|
"propName": "value",
|
|
651
692
|
"methodName": "observeValue"
|
|
693
|
+
}, {
|
|
694
|
+
"propName": "alternativePlaceholder",
|
|
695
|
+
"methodName": "observeAlternativePlaceholder"
|
|
652
696
|
}];
|
|
653
697
|
}
|
|
654
698
|
}
|
|
@@ -11,6 +11,7 @@ export class EzTimeInput {
|
|
|
11
11
|
this.mode = "regular";
|
|
12
12
|
this.canShowError = true;
|
|
13
13
|
this.autoFocus = false;
|
|
14
|
+
this.alternativePlaceholder = undefined;
|
|
14
15
|
}
|
|
15
16
|
observeErrorMessage() {
|
|
16
17
|
var _a;
|
|
@@ -148,7 +149,7 @@ export class EzTimeInput {
|
|
|
148
149
|
}
|
|
149
150
|
render() {
|
|
150
151
|
ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
151
|
-
return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
|
|
152
|
+
return (h(Host, null, h("ez-text-input", { class: "time__input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder }, h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
|
|
152
153
|
}
|
|
153
154
|
static get is() { return "ez-time-input"; }
|
|
154
155
|
static get encapsulation() { return "shadow"; }
|
|
@@ -305,6 +306,23 @@ export class EzTimeInput {
|
|
|
305
306
|
"attribute": "auto-focus",
|
|
306
307
|
"reflect": false,
|
|
307
308
|
"defaultValue": "false"
|
|
309
|
+
},
|
|
310
|
+
"alternativePlaceholder": {
|
|
311
|
+
"type": "string",
|
|
312
|
+
"mutable": false,
|
|
313
|
+
"complexType": {
|
|
314
|
+
"original": "string",
|
|
315
|
+
"resolved": "string",
|
|
316
|
+
"references": {}
|
|
317
|
+
},
|
|
318
|
+
"required": false,
|
|
319
|
+
"optional": false,
|
|
320
|
+
"docs": {
|
|
321
|
+
"tags": [],
|
|
322
|
+
"text": "Texto alternativo ser apresentado como t\u00EDtulo do campo."
|
|
323
|
+
},
|
|
324
|
+
"attribute": "alternative-placeholder",
|
|
325
|
+
"reflect": false
|
|
308
326
|
}
|
|
309
327
|
};
|
|
310
328
|
}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import { ApplicationContext, Action, WaitingChangeException, DataUnitAction, StringUtils } from
|
|
1
|
+
import { ApplicationContext, Action, WaitingChangeException, DataUnitAction, StringUtils, ObjectUtils, } from '@sankhyalabs/core';
|
|
2
2
|
import { RecordValidationProcessor } from "../validators/recordvalidator/RecordValidationProcessor";
|
|
3
3
|
export default class DataBinder {
|
|
4
4
|
constructor(dataUnit) {
|
|
5
5
|
this.onDataUnitEvent = (action) => {
|
|
6
|
-
var _a
|
|
6
|
+
var _a;
|
|
7
7
|
switch (action.type) {
|
|
8
|
+
case Action.MULTIPLE_EDITION_CHANGED:
|
|
9
|
+
this.clearInvalid();
|
|
10
|
+
this.updateAllFieldsValues();
|
|
11
|
+
break;
|
|
8
12
|
case Action.DATA_LOADED:
|
|
9
13
|
case Action.DATA_SAVED:
|
|
10
14
|
case Action.RECORDS_REMOVED:
|
|
@@ -19,13 +23,11 @@ export default class DataBinder {
|
|
|
19
23
|
case Action.CHANGE_UNDONE:
|
|
20
24
|
case Action.CHANGE_REDONE:
|
|
21
25
|
case Action.RECORD_LOADED:
|
|
22
|
-
|
|
23
|
-
this.updateValue(field.fieldName, field.field);
|
|
24
|
-
});
|
|
26
|
+
this.updateAllFieldsValues();
|
|
25
27
|
this.clearFieldError(Object.keys(action.payload)[0]);
|
|
26
28
|
break;
|
|
27
29
|
case Action.FIELD_INVALIDATED:
|
|
28
|
-
(
|
|
30
|
+
(_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
|
|
29
31
|
this.updateErrorMessage(field.fieldName, field.field);
|
|
30
32
|
});
|
|
31
33
|
break;
|
|
@@ -123,13 +125,19 @@ export default class DataBinder {
|
|
|
123
125
|
this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
|
|
124
126
|
}
|
|
125
127
|
}
|
|
126
|
-
|
|
128
|
+
updateFieldValue(fieldName, field) {
|
|
127
129
|
const bind = this._fields.get(fieldName);
|
|
128
130
|
try {
|
|
129
|
-
if (bind)
|
|
131
|
+
if (bind)
|
|
130
132
|
bind.listen = false;
|
|
133
|
+
if (this._dataUnit.isMultipleEdition && this.hasMultipleValuesBetweenRecords(fieldName)) {
|
|
134
|
+
field['value'] = undefined;
|
|
135
|
+
field['alternativePlaceholder'] = 'Múltiplos Valores';
|
|
136
|
+
}
|
|
137
|
+
else {
|
|
138
|
+
field["value"] = this._dataUnit.getFieldValue(fieldName);
|
|
139
|
+
field['alternativePlaceholder'] = undefined;
|
|
131
140
|
}
|
|
132
|
-
field["value"] = this._dataUnit.getFieldValue(fieldName);
|
|
133
141
|
this.updateErrorMessage(fieldName, field);
|
|
134
142
|
}
|
|
135
143
|
finally {
|
|
@@ -138,6 +146,14 @@ export default class DataBinder {
|
|
|
138
146
|
}
|
|
139
147
|
}
|
|
140
148
|
}
|
|
149
|
+
hasMultipleValuesBetweenRecords(key) {
|
|
150
|
+
var _a, _b;
|
|
151
|
+
const selectedRecords = (_b = (_a = this._dataUnit.getSelectionInfo()) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : [];
|
|
152
|
+
if (selectedRecords.length <= 1)
|
|
153
|
+
return false;
|
|
154
|
+
const firstValue = selectedRecords[0][key];
|
|
155
|
+
return !selectedRecords.every(record => ObjectUtils.equals(record[key], firstValue));
|
|
156
|
+
}
|
|
141
157
|
validate() {
|
|
142
158
|
return this._recordValidatorProcessor.validate();
|
|
143
159
|
}
|
|
@@ -176,7 +192,7 @@ export default class DataBinder {
|
|
|
176
192
|
oldBind.destroy();
|
|
177
193
|
}
|
|
178
194
|
this.bindSearchOptionsLoader(fieldName, field);
|
|
179
|
-
|
|
195
|
+
this.updateFieldValue(fieldName, field);
|
|
180
196
|
this.updateErrorMessage(fieldName, field);
|
|
181
197
|
this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
|
|
182
198
|
this.applyEzUploadContext(fieldName, field);
|
|
@@ -218,8 +234,14 @@ export default class DataBinder {
|
|
|
218
234
|
this._dataUnit.addRecord();
|
|
219
235
|
}
|
|
220
236
|
this._dataUnit.clearInvalid(this.getCurrentRecordId(), fieldName);
|
|
221
|
-
|
|
222
|
-
|
|
237
|
+
if (this._dataUnit.isMultipleEdition) {
|
|
238
|
+
const selectionInfo = this._dataUnit.getSelectionInfo();
|
|
239
|
+
this._dataUnit.setFieldValue(fieldName, newValue, selectionInfo.recordIds);
|
|
240
|
+
}
|
|
241
|
+
else {
|
|
242
|
+
const record = this._dataUnit.getSelectedRecord();
|
|
243
|
+
this._dataUnit.setFieldValue(fieldName, newValue, record ? [record.__record__id__] : undefined);
|
|
244
|
+
}
|
|
223
245
|
if (this._dataUnit.waitingForChange(fieldName)) {
|
|
224
246
|
const bind = this._fields.get(fieldName);
|
|
225
247
|
if (bind) {
|
|
@@ -251,6 +273,12 @@ export default class DataBinder {
|
|
|
251
273
|
field["maxFiles"] = ((_b = descriptor.properties) === null || _b === void 0 ? void 0 : _b.MAX_FILES) || 0;
|
|
252
274
|
}
|
|
253
275
|
}
|
|
276
|
+
updateAllFieldsValues() {
|
|
277
|
+
var _a;
|
|
278
|
+
(_a = this._fields) === null || _a === void 0 ? void 0 : _a.forEach(field => {
|
|
279
|
+
this.updateFieldValue(field.fieldName, field.field);
|
|
280
|
+
});
|
|
281
|
+
}
|
|
254
282
|
interceptAction(action) {
|
|
255
283
|
if (action.type === Action.RECORDS_COPIED) {
|
|
256
284
|
const cleanFields = this._formMetadata.getCleanOnCopyFields();
|
|
@@ -43,4 +43,18 @@ describe('DataBinder', () => {
|
|
|
43
43
|
const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
|
|
44
44
|
expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBe(0);
|
|
45
45
|
});
|
|
46
|
+
it('Should tell if has multiple values between fields', () => {
|
|
47
|
+
dataBinder['_dataUnit'].getSelectionInfo = jest.fn().mockReturnValue({ records: mockRecords() });
|
|
48
|
+
const hasMultiplesLabels = dataBinder['hasMultipleValuesBetweenRecords']('label');
|
|
49
|
+
const hasMultiplesValues = dataBinder['hasMultipleValuesBetweenRecords']('value');
|
|
50
|
+
expect(hasMultiplesLabels).toBe(false);
|
|
51
|
+
expect(hasMultiplesValues).toBe(true);
|
|
52
|
+
});
|
|
46
53
|
});
|
|
54
|
+
function mockRecords() {
|
|
55
|
+
return [
|
|
56
|
+
{ label: 'label mocked', value: 'value mocked 1' },
|
|
57
|
+
{ label: 'label mocked', value: 'value mocked 2' },
|
|
58
|
+
{ label: 'label mocked', value: 'value mocked 3' },
|
|
59
|
+
];
|
|
60
|
+
}
|