@sankhyalabs/ezui 1.1.67 → 1.1.68
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/ez-button_16.cjs.entry.js +42 -50
- package/dist/cjs/ez-number-input.cjs.entry.js +9 -9
- package/dist/cjs/ez-time-input.cjs.entry.js +6 -6
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-button/ez-button.css +44 -43
- package/dist/collection/components/ez-button/ez-button.js +2 -2
- package/dist/collection/components/ez-check/ez-check.css +78 -78
- package/dist/collection/components/ez-check/ez-check.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +4 -4
- package/dist/collection/components/ez-date-input/ez-date-input.js +8 -8
- package/dist/collection/components/ez-form/subcomponents/structure/Field.js +6 -6
- package/dist/collection/components/ez-icon/ez-icon.css +3 -1
- package/dist/collection/components/ez-icon/ez-icon.js +5 -3
- package/dist/collection/components/ez-number-input/ez-number-input.js +11 -11
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.js +7 -7
- package/dist/collection/components/ez-search/ez-search.js +3 -3
- package/dist/collection/components/ez-text-area/ez-text-area.js +5 -5
- package/dist/collection/components/ez-text-input/ez-text-input.css +60 -60
- package/dist/collection/components/ez-text-input/ez-text-input.js +11 -35
- package/dist/collection/components/ez-time-input/ez-time-input.js +8 -8
- package/dist/custom-elements/index.js +65 -73
- package/dist/esm/ez-button_16.entry.js +42 -50
- package/dist/esm/ez-number-input.entry.js +9 -9
- package/dist/esm/ez-time-input.entry.js +6 -6
- 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-d8a47f23.entry.js → p-74e4415e.entry.js} +1 -1
- package/dist/ezui/p-7d066b1c.entry.js +1 -0
- package/dist/ezui/{p-7f528c19.entry.js → p-f7d7fb7f.entry.js} +1 -1
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +1 -1
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +1 -1
- package/dist/types/components/ez-icon/ez-icon.d.ts +6 -0
- package/dist/types/components/ez-number-input/ez-number-input.d.ts +1 -1
- package/dist/types/components/ez-numeric-input/ez-numeric-input.d.ts +1 -1
- package/dist/types/components/ez-search/ez-search.d.ts +1 -1
- package/dist/types/components/ez-text-area/ez-text-area.d.ts +1 -1
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +1 -5
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +1 -1
- package/dist/types/components.d.ts +28 -24
- package/package.json +2 -1
- package/dist/ezui/p-afc553a4.entry.js +0 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-0f668cc5.js');
|
|
|
6
6
|
const RequestMetadata = require('./RequestMetadata-2cd01e8a.js');
|
|
7
7
|
const FloatingManager = require('./FloatingManager-6cfeb947.js');
|
|
8
8
|
|
|
9
|
-
const ezButtonCss = ":host{--
|
|
9
|
+
const ezButtonCss = ":host{--button--min-width:100px;--button--height:42px;--button__icon--width:18px;--button__inline__icon--padding:12px;--button--padding-top:var(--space--medium, 12px);--button--padding-bottom:var(--space--medium, 12px);--button--padding-right:var(--space--large, 24px);--button--padding-left:var(--space--large, 24px);--button--color:var(--text--inverted, #FFF);--button--font-size:var(--text--medium, 14px);--button--font-family:var(--font-pattern, Arial);--button--font-weight:var(--text-weight--large);--button--background-color:var(--color--primary, #c0c0c0);--button--border-radius:var(--border--radius-large, 12px);--button--border:none;--button--hover--background-color:var(--color--primary-700, var(--button--background-color));--button--disabled-color:var(--text--disable);--button--disabled--background-color:var(--color--disable-primary);--button--focus--border:var(--button--border);--button--focus--box-shadow:none;--button--link-color:var(--title--primary, '#C0C0C0')}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--button--min-width);height:var(--button--height);font-family:var(--button--font-family);font-size:var(--button--font-size);font-weight:var(--button--font-weight);padding:var(--button--padding-top) var(--button--padding-right) var(--button--padding-bottom) var(--button--padding-left);border-radius:var(--button--border-radius);background-color:var(--button--background-color);color:var(--button--color);fill:var(--button--color);border:var(--button--border)}button:hover{background-color:var(--button--hover--background-color)}button:focus{outline:none;border:var(--button--focus--border);box-shadow:var(--button--focus--box-shadow)}button:disabled{background-color:var(--button--disabled--background-color);color:var(--button--disabled-color);fill:var(--button--disabled-color);border:none;cursor:no-drop}button.icon{width:42px;min-width:42px;height:42px;padding:0px}a{font-family:var(--button--font-family);font-size:var(--button--font-size);font-weight:var(--button--font-weight);color:var(--button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center}";
|
|
10
10
|
|
|
11
11
|
let EzButton = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -26,10 +26,10 @@ let EzButton = class {
|
|
|
26
26
|
if (this.mode == "link") {
|
|
27
27
|
content.style.display = "inline";
|
|
28
28
|
if (slot.name == "leftIcon") {
|
|
29
|
-
content.style.paddingRight = "var(--
|
|
29
|
+
content.style.paddingRight = "var(--button__inline__icon--padding)";
|
|
30
30
|
}
|
|
31
31
|
else if (slot.name == "rightIcon") {
|
|
32
|
-
content.style.paddingLeft = "var(--
|
|
32
|
+
content.style.paddingLeft = "var(--button__inline__icon--padding)";
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -205,7 +205,7 @@ let EzCalendar = class {
|
|
|
205
205
|
};
|
|
206
206
|
EzCalendar.style = ezCalendarCss;
|
|
207
207
|
|
|
208
|
-
const ezCheckCss = ":host{--
|
|
208
|
+
const ezCheckCss = ":host{--check--box--width:18px;--check--box--height:18px;--check--width:calc(var(--check--box--width) + 14px);--check--height:calc(var(--check--box--width) + 14px);--check--border-radius:var(--border--radius-small);--check--checked--background-color:var(--color--primary-200);--check--focus--background-color:var(--color--strokes, #FFFFFF);--check--hover--background-color:var(--background--medium);--check--checked--disabled--background-color:var(--color--disable-secondary);--check--border:var(--border--medium) var(--title--primary);--check--disabled--border:var(--border--medium) var(--color--strokes);--check--checked--border:var(--border--medium) var(--color--primary);--check--checked--hover--background-color:var(--color--primary-200);--check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--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>');--check--check--background-color:var(--color--primary);--check--check--disabled--background-color:var(--color--strokes);--switch--slider--width:34px;--switch--slider--height:14px;--switch--pin--width:20px;--switch--pin--height:20px;--switch--focus--width:32px;--switch--focus--height:32px;--switch--background-color:var(--color--strokes);--switch--disabled--background-color:var(--color--disable-secondary);--switch--checked--background-color:var(--color--primary-300);--switch--pin--background-color:var(--background--xlight);--switch--pin--disabled--background-color:var(--color--disable-secondary);--switch--pin--checked--background-color:var(--color--primary);--switch--pin--checked--disabled--background-color:#E8F7F4;--switch--pin--focus--background-color:var(--text--disable);--switch--pin--checked--focus--background-color:var(--color--primary);--check--label--font-size:var(--text--medium, 14px);--check--label--font-family:var(--font-pattern, Arial);--check--label--color:var(--title--primary, #000);--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(--check--width);height:var(--check--height)}input.regularMode:enabled:hover{background-color:var(--check--hover--background-color)}input.regularMode:enabled:focus{outline:none;background-color:var(--check--focus--background-color)}input.regularMode:disabled{cursor:auto;background:none}input.regularMode::before{box-sizing:border-box;content:\"\";display:block;width:var(--check--box--width);height:var(--check--box--height);border-radius:var(--check--border-radius);border:var(--check--border)}input.regularMode:disabled::before{border:var(--check--disabled--border)}input.regularMode:checked:enabled:hover{background-color:var(--check--checked--hover--background-color)}input.regularMode:checked:enabled:focus{background-color:var(--check--checked--focus--background-color)}input.regularMode:checked::before{border:var(--check--checked--border);background-color:var(--check--checked--background-color)}input.regularMode:checked:disabled:before{border:var(--check--disabled--border);background-color:var(--check--checked--disabled--background-color)}input.regularMode:checked::after{display:flex;position:absolute;content:\"\";background-color:var(--check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--check--check--image);mask-image:var(--check--check--image)}input.regularMode:checked:disabled::after{background-color:var(--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:none;transition:background-color var(--transition);width:var(--switch--slider--width);height:var(--switch--slider--height);background-color:var(--switch--background-color)}input.switchMode:disabled{background-color:var(--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:translateY(-3px);border-radius:50%;width:var(--switch--pin--width);height:var(--switch--pin--height);background-color:var(--switch--pin--background-color)}input.switchMode:disabled::after{background-color:var(--switch--pin--disabled--background-color)}input.switchMode:checked{transition:background-color var(--transition);background-color:var(--switch--checked--background-color)}input.switchMode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--switch--focus--width);height:var(--switch--focus--height);top:calc((var(--switch--slider--height) - var(--switch--focus--height)) / 2);left:calc((var(--switch--pin--width) - var(--switch--focus--width))/2);background-color:var(--switch--pin--focus--background-color)}input.switchMode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switchMode:checked:focus::before{background-color:var(--switch--pin--checked--focus--background-color);transform:translateX(calc(var(--switch--slider--width) - var(--switch--pin--width)))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transform:translateX(calc(var(--switch--slider--width) - var(--switch--pin--width))) translateY(-3px);box-shadow:var(--shadow);background-color:var(--switch--pin--checked--background-color)}input.switchMode:checked:disabled::after{background-color:var(--switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--check--label--color);text-shadow:var(--text-shadow);font-size:var(--check--label--font-size);font-family:var(--check--label--font-family);cursor:default;padding-left:var(--space--small)}.label--disabled{color:var(--check--label--disabled--color)}";
|
|
209
209
|
|
|
210
210
|
let EzCheck = class {
|
|
211
211
|
constructor(hostRef) {
|
|
@@ -263,7 +263,7 @@ let EzCheck = class {
|
|
|
263
263
|
return classes;
|
|
264
264
|
}
|
|
265
265
|
render() {
|
|
266
|
-
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) :
|
|
266
|
+
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));
|
|
267
267
|
}
|
|
268
268
|
static get watchers() { return {
|
|
269
269
|
"mode": ["adjustMode"]
|
|
@@ -371,7 +371,7 @@ let EzComboBox = class {
|
|
|
371
371
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
372
372
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
373
373
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
374
|
-
const top = this.
|
|
374
|
+
const top = this.errorMessage ? '0px' : '-17px';
|
|
375
375
|
this._floatingID = FloatingManager.FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
376
376
|
window.requestAnimationFrame(() => {
|
|
377
377
|
this._optionsList.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
|
|
@@ -540,7 +540,7 @@ let EzComboBox = class {
|
|
|
540
540
|
this.cancelPreselection();
|
|
541
541
|
}
|
|
542
542
|
render() {
|
|
543
|
-
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(),
|
|
543
|
+
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(), errorMessage: this.errorMessage }, this.searchmode ?
|
|
544
544
|
index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions('ADVANCED'); }, slot: "leftIcon" })
|
|
545
545
|
:
|
|
546
546
|
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))))));
|
|
@@ -567,7 +567,7 @@ let EzDateInput = class {
|
|
|
567
567
|
this._textInput.label = this.label;
|
|
568
568
|
}
|
|
569
569
|
setErrorMessage() {
|
|
570
|
-
this._textInput.
|
|
570
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
571
571
|
}
|
|
572
572
|
applyValueToInput() {
|
|
573
573
|
if (this._textInput) {
|
|
@@ -576,7 +576,7 @@ let EzDateInput = class {
|
|
|
576
576
|
}
|
|
577
577
|
changeValue(newValue) {
|
|
578
578
|
newValue = newValue == null ? null : DateUtils.clearTime(newValue);
|
|
579
|
-
this._textInput.
|
|
579
|
+
this._textInput.errorMessage = "";
|
|
580
580
|
if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
|
|
581
581
|
this.value = newValue;
|
|
582
582
|
this.ezChange.emit();
|
|
@@ -588,7 +588,7 @@ let EzDateInput = class {
|
|
|
588
588
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
589
589
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
590
590
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
591
|
-
const top = this._textInput.
|
|
591
|
+
const top = this._textInput.errorMessage ? 0 : -17;
|
|
592
592
|
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
593
593
|
}
|
|
594
594
|
hideCalendar() {
|
|
@@ -607,7 +607,7 @@ let EzDateInput = class {
|
|
|
607
607
|
}
|
|
608
608
|
}
|
|
609
609
|
else {
|
|
610
|
-
this._textInput.
|
|
610
|
+
this._textInput.errorMessage = "O valor digitado não é uma data válida";
|
|
611
611
|
}
|
|
612
612
|
}
|
|
613
613
|
getTextValue(d) {
|
|
@@ -617,12 +617,12 @@ let EzDateInput = class {
|
|
|
617
617
|
return (index.h(index.Host, null, index.h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
|
|
618
618
|
if (event.key === 'H' || event.key === 'h')
|
|
619
619
|
this.changeValue(new Date());
|
|
620
|
-
}, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled,
|
|
620
|
+
}, 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 })));
|
|
621
621
|
}
|
|
622
622
|
get _elem() { return index.getElement(this); }
|
|
623
623
|
static get watchers() { return {
|
|
624
624
|
"label": ["setLabel"],
|
|
625
|
-
"
|
|
625
|
+
"errorMessage": ["setErrorMessage"],
|
|
626
626
|
"value": ["applyValueToInput"]
|
|
627
627
|
}; }
|
|
628
628
|
};
|
|
@@ -2579,7 +2579,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2579
2579
|
switch (userInterface) {
|
|
2580
2580
|
case 'LONGTEXT':
|
|
2581
2581
|
return index.h("div", { class: "col col--sd-12 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
2582
|
-
index.h("ez-text-area", { value: value || '', label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target['value']),
|
|
2582
|
+
index.h("ez-text-area", { value: value || '', label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, enabled: isEnabled }));
|
|
2583
2583
|
case 'CHECKBOX':
|
|
2584
2584
|
case 'SWITCH':
|
|
2585
2585
|
return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" }, loadingData ? index.h("place-holder", null) :
|
|
@@ -2588,7 +2588,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2588
2588
|
const optsObj = properties ? JSON.parse(getProp(properties, 'options')) : {};
|
|
2589
2589
|
const normalized = Object.keys(optsObj).map(key => { return { value: key, label: optsObj[key] }; });
|
|
2590
2590
|
return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
2591
|
-
index.h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
2591
|
+
index.h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key, options: normalized }));
|
|
2592
2592
|
case 'SEARCH':
|
|
2593
2593
|
const context = {
|
|
2594
2594
|
__MAIN_FORM: form,
|
|
@@ -2616,7 +2616,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2616
2616
|
context['CRITERIA'] = criteriaList;
|
|
2617
2617
|
}
|
|
2618
2618
|
return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
2619
|
-
index.h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
2619
|
+
index.h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, optionloader: (argument) => {
|
|
2620
2620
|
if (form) {
|
|
2621
2621
|
return form.loadSearch(argument, context);
|
|
2622
2622
|
}
|
|
@@ -2630,7 +2630,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2630
2630
|
index.h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
|
|
2631
2631
|
case 'DATE':
|
|
2632
2632
|
return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
2633
|
-
index.h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
2633
|
+
index.h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
|
|
2634
2634
|
case 'DECIMALNUMBER':
|
|
2635
2635
|
case 'INTEGERNUMBER':
|
|
2636
2636
|
let precision = 0;
|
|
@@ -2640,11 +2640,11 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2640
2640
|
prettyPrecision = Number(getProp(properties, "prettyprecision") || precision);
|
|
2641
2641
|
}
|
|
2642
2642
|
return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
2643
|
-
index.h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
2643
|
+
index.h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, precision: precision, prettyprecision: prettyPrecision, ref: elem => scrollToView(forceScroll, elem), key: key }));
|
|
2644
2644
|
//IMAGE, DATETIME, ELAPSEDTIME, PASSWORD, MASKEDTEXT, HTML
|
|
2645
2645
|
default:
|
|
2646
2646
|
return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
2647
|
-
index.h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target['value']),
|
|
2647
|
+
index.h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
|
|
2648
2648
|
}
|
|
2649
2649
|
};
|
|
2650
2650
|
function getProp(properties, name) {
|
|
@@ -2964,12 +2964,14 @@ let EzForm = class {
|
|
|
2964
2964
|
};
|
|
2965
2965
|
EzForm.style = ezFormCss;
|
|
2966
2966
|
|
|
2967
|
-
const ezIconCss = ":host{display:block;overflow:hidden;position:relative}svg{display:flex;justify-content:center;align-items:center;fill:var(--color
|
|
2967
|
+
const ezIconCss = ":host{display:block;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}";
|
|
2968
2968
|
|
|
2969
2969
|
let EzIcon = class {
|
|
2970
2970
|
constructor(hostRef) {
|
|
2971
2971
|
index.registerInstance(this, hostRef);
|
|
2972
|
-
|
|
2972
|
+
/**
|
|
2973
|
+
* Tamanho do icone
|
|
2974
|
+
*/
|
|
2973
2975
|
this.size = 'medium';
|
|
2974
2976
|
}
|
|
2975
2977
|
isSprite() {
|
|
@@ -3000,7 +3002,7 @@ let EzNumericInput = class {
|
|
|
3000
3002
|
this._textInput.label = this.label;
|
|
3001
3003
|
}
|
|
3002
3004
|
setErrorMessage() {
|
|
3003
|
-
this._textInput.
|
|
3005
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
3004
3006
|
}
|
|
3005
3007
|
applyValueToInput() {
|
|
3006
3008
|
if (this._textInput) {
|
|
@@ -3008,7 +3010,7 @@ let EzNumericInput = class {
|
|
|
3008
3010
|
}
|
|
3009
3011
|
}
|
|
3010
3012
|
changeValue(newValue) {
|
|
3011
|
-
this._textInput.
|
|
3013
|
+
this._textInput.errorMessage = "";
|
|
3012
3014
|
if (newValue !== this.value) {
|
|
3013
3015
|
this.value = newValue;
|
|
3014
3016
|
this.ezChange.emit();
|
|
@@ -3017,7 +3019,7 @@ let EzNumericInput = class {
|
|
|
3017
3019
|
parseNumber() {
|
|
3018
3020
|
const parsedNumber = this._textInput.value ? RequestMetadata.NumberUtils.stringToNumber(this._textInput.value) : null;
|
|
3019
3021
|
if (parsedNumber != null && isNaN(parsedNumber)) {
|
|
3020
|
-
this._textInput.
|
|
3022
|
+
this._textInput.errorMessage = "O valor digitado não é um número válido";
|
|
3021
3023
|
}
|
|
3022
3024
|
else {
|
|
3023
3025
|
this.changeValue(parsedNumber);
|
|
@@ -3030,11 +3032,11 @@ let EzNumericInput = class {
|
|
|
3030
3032
|
return null;
|
|
3031
3033
|
}
|
|
3032
3034
|
render() {
|
|
3033
|
-
return (index.h("ez-text-input", { class: "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,
|
|
3035
|
+
return (index.h("ez-text-input", { class: "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 }));
|
|
3034
3036
|
}
|
|
3035
3037
|
static get watchers() { return {
|
|
3036
3038
|
"label": ["setLabel"],
|
|
3037
|
-
"
|
|
3039
|
+
"errorMessage": ["setErrorMessage"],
|
|
3038
3040
|
"value": ["applyValueToInput"]
|
|
3039
3041
|
}; }
|
|
3040
3042
|
};
|
|
@@ -3071,7 +3073,7 @@ let EzSearch = class {
|
|
|
3071
3073
|
this.ezChange.emit(evt.detail);
|
|
3072
3074
|
}
|
|
3073
3075
|
render() {
|
|
3074
|
-
return (index.h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled,
|
|
3076
|
+
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 }));
|
|
3075
3077
|
}
|
|
3076
3078
|
;
|
|
3077
3079
|
static get watchers() { return {
|
|
@@ -3299,7 +3301,7 @@ let EzTextArea = class {
|
|
|
3299
3301
|
this.rows = 4;
|
|
3300
3302
|
}
|
|
3301
3303
|
showError() {
|
|
3302
|
-
const hasError = typeof this.
|
|
3304
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
3303
3305
|
if (hasError) {
|
|
3304
3306
|
this._container.classList.add('hasError');
|
|
3305
3307
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -3379,21 +3381,17 @@ let EzTextArea = class {
|
|
|
3379
3381
|
render() {
|
|
3380
3382
|
return (index.h(index.Host, null, index.h("div", { class: "textarea", ref: (el) => this._container = el }, this.label ?
|
|
3381
3383
|
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)
|
|
3382
|
-
: 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.
|
|
3384
|
+
: 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)));
|
|
3383
3385
|
}
|
|
3384
3386
|
get _hostElement() { return index.getElement(this); }
|
|
3385
3387
|
static get watchers() { return {
|
|
3386
|
-
"
|
|
3388
|
+
"errorMessage": ["showError"],
|
|
3387
3389
|
"value": ["updateInputValue"]
|
|
3388
3390
|
}; }
|
|
3389
3391
|
};
|
|
3390
3392
|
EzTextArea.style = ezTextAreaCss;
|
|
3391
3393
|
|
|
3392
|
-
|
|
3393
|
-
return strValue && /^-?\d*[.,]?\d*$/.test(strValue);
|
|
3394
|
-
}
|
|
3395
|
-
|
|
3396
|
-
const ezTextInputCss = ":host{--it--height:42px;--it--width:100%;--it__icon--width:48px;--it--border-radius:var(--border--radius-medium, 12px);--it--font-size:var(--text--medium, 14px);--it--font-family:var(--font-pattern, Arial);--it--font-weight:var(--text-weight--large, 500);--it--color:var(--title--primary, #000);--it__input--background-color:var(--background--medium, #e0e0e0);--it__input--border:var(--border--medium, 2px solid);--it__input--border-color:var(--it__input--background-color);--it__input--focus--border-color:var(--color--alert-cold-800, #042EFF);--it__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--it__input--disabled--color:var(--text--disable, #AFB6C0);--it__input--error--border-color:#CC2936;--it__message_box--font-size:var(--text--small, 12px);--it__message_box--info--color:var(--color--success, #22085d);--it__message_box--error--color:var(--color--error, #FF0000);--it__label--floating--top:6px;--it__label--padding-top:12px;--it__label--padding-left:14px;--it__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--it--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--it--height);border-radius:var(--it--border-radius);font-family:var(--it--font-family);font-size:var(--it--font-size);border:var(--it__input--border);border-color:var(--it__input--border-color);background-color:var(--it__input--background-color);color:var(--it--color)}input:disabled{background-color:var(--it__input--disabled--background-color);color:var(--it__input--disabled--color)}input:focus{outline:none;border-color:var(--it__input--focus--border-color)}input.icon--left{padding-left:var(--it__icon--width)}input.icon--right{padding-right:var(--it__icon--width)}input.hasError{color:var(--it--color);border-color:var(--it__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(--it--font-family);font-size:var(--it__message_box--font-size);color:var(--it__message_box--info--color)}.hasError{color:var(--it__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(--it__label--padding-right));left:var(--it--space--medium);font-family:var(--it--font-family);font-size:var(--it--font-size);font-weight:var(--it--font-weight);color:var(--it--color);top:var(--it__label--padding-top);left:var(--it__label--padding-left);padding-right:var(--it__label--padding-right)}.input__label--floated{font-family:var(--it--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--it__label--floating--top)}.input__label--disabled{color:var(--it__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--it__icon--width) + 2px);width:calc(100% - var(--it__icon--width))}.input__label--right{right:var(--it__icon--width);width:calc(100% - var(--it__icon--width))}.input__label--left.input__label--right{left:calc(var(--it__icon--width) + 2px);width:calc(100% - var(--it__icon--width) * 2)}.input--with--label{padding-bottom:0}";
|
|
3394
|
+
const ezTextInputCss = ":host{--text-input--height:42px;--text-input--width:100%;--text-input__icon--width:48px;--text-input--border-radius:var(--border--radius-medium, 12px);--text-input--font-size:var(--text--medium, 14px);--text-input--font-family:var(--font-pattern, Arial);--text-input--font-weight:var(--text-weight--large, 500);--text-input--color:var(--title--primary, #000);--text-input__input--background-color:var(--background--medium, #e0e0e0);--text-input__input--border:var(--border--medium, 2px solid);--text-input__input--border-color:var(--text-input__input--background-color);--text-input__input--focus--border-color:var(--color--alert-cold-800, #042EFF);--text-input__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-input__input--disabled--color:var(--text--disable, #AFB6C0);--text-input__input--error--border-color:#CC2936;--text-input__message_box--font-size:var(--text--small, 12px);--text-input__message_box--info--color:var(--color--success, #22085d);--text-input__message_box--error--color:var(--color--error, #FF0000);--text-input__label--floating--top:6px;--text-input__label--padding-top:12px;--text-input__label--padding-left:14px;--text-input__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--text-input--height);border-radius:var(--text-input--border-radius);font-family:var(--text-input--font-family);font-size:var(--text-input--font-size);border:var(--text-input__input--border);border-color:var(--text-input__input--border-color);background-color:var(--text-input__input--background-color);color:var(--text-input--color)}input:disabled{background-color:var(--text-input__input--disabled--background-color);color:var(--text-input__input--disabled--color)}input:focus{outline:none;border-color:var(--text-input__input--focus--border-color)}input.icon--left{padding-left:var(--text-input__icon--width)}input.icon--right{padding-right:var(--text-input__icon--width)}input.hasError{color:var(--text-input--color);border-color:var(--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(--text-input--font-family);font-size:var(--text-input__message_box--font-size);color:var(--text-input__message_box--info--color)}.hasError{color:var(--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(--text-input__label--padding-right));left:var(--text-input--space--medium);font-family:var(--text-input--font-family);font-size:var(--text-input--font-size);font-weight:var(--text-input--font-weight);color:var(--text-input--color);top:var(--text-input__label--padding-top);left:var(--text-input__label--padding-left);padding-right:var(--text-input__label--padding-right)}.input__label--floated{font-family:var(--text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-input__label--floating--top)}.input__label--disabled{color:var(--text-input__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--text-input__icon--width) + 2px);width:calc(100% - var(--text-input__icon--width))}.input__label--right{right:var(--text-input__icon--width);width:calc(100% - var(--text-input__icon--width))}.input__label--left.input__label--right{left:calc(var(--text-input__icon--width) + 2px);width:calc(100% - var(--text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}";
|
|
3397
3395
|
|
|
3398
3396
|
let EzTextInput = class {
|
|
3399
3397
|
constructor(hostRef) {
|
|
@@ -3405,7 +3403,7 @@ let EzTextInput = class {
|
|
|
3405
3403
|
this.enabled = true;
|
|
3406
3404
|
}
|
|
3407
3405
|
showError() {
|
|
3408
|
-
const hasError = typeof this.
|
|
3406
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
3409
3407
|
if (hasError) {
|
|
3410
3408
|
this._inputElem.classList.add('hasError');
|
|
3411
3409
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -3480,16 +3478,13 @@ let EzTextInput = class {
|
|
|
3480
3478
|
this._inputElem.value = this._maskFormatter.format(value);
|
|
3481
3479
|
}
|
|
3482
3480
|
catch (e) {
|
|
3483
|
-
this.
|
|
3481
|
+
this.errorMessage = e.message;
|
|
3484
3482
|
}
|
|
3485
3483
|
}
|
|
3486
3484
|
this.value = this._inputElem.value;
|
|
3487
3485
|
this.adjustFloatingLabel();
|
|
3488
3486
|
}
|
|
3489
3487
|
isValidValue(value) {
|
|
3490
|
-
if (this.onlynumber) {
|
|
3491
|
-
return value == "" || isValidNumber(value);
|
|
3492
|
-
}
|
|
3493
3488
|
if (this.restrict) {
|
|
3494
3489
|
return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
|
|
3495
3490
|
}
|
|
@@ -3518,11 +3513,11 @@ let EzTextInput = class {
|
|
|
3518
3513
|
content.style.justifyContent = "center";
|
|
3519
3514
|
content.style.overflow = "hidden";
|
|
3520
3515
|
content.style.top = "0px";
|
|
3521
|
-
content.style.width = "var(--
|
|
3522
|
-
content.style.height = "var(--
|
|
3516
|
+
content.style.width = "var(--text-input__icon--width)";
|
|
3517
|
+
content.style.height = "var(--text-input--height)";
|
|
3523
3518
|
if (slot.name == "leftIcon") {
|
|
3524
3519
|
content.style.left = "0px";
|
|
3525
|
-
content.style.borderRadius = "var(--
|
|
3520
|
+
content.style.borderRadius = "var(--text-input--border-radius) 0 0 var(--text-input--border-radius)";
|
|
3526
3521
|
this._inputElem.classList.add('icon--left');
|
|
3527
3522
|
if (this._labelElem) {
|
|
3528
3523
|
this._labelElem.classList.add('input__label--left');
|
|
@@ -3530,7 +3525,7 @@ let EzTextInput = class {
|
|
|
3530
3525
|
}
|
|
3531
3526
|
else if (slot.name == "rightIcon") {
|
|
3532
3527
|
content.style.right = "0px";
|
|
3533
|
-
content.style.borderRadius = "0 var(--
|
|
3528
|
+
content.style.borderRadius = "0 var(--text-input--border-radius) var(--text-input--border-radius) 0";
|
|
3534
3529
|
this._inputElem.classList.add('icon--right');
|
|
3535
3530
|
if (this._labelElem) {
|
|
3536
3531
|
this._labelElem.classList.add('input__label--right');
|
|
@@ -3548,9 +3543,6 @@ let EzTextInput = class {
|
|
|
3548
3543
|
// Lifecycle web component
|
|
3549
3544
|
//---------------------------------------------
|
|
3550
3545
|
componentDidLoad() {
|
|
3551
|
-
if (this.onlynumber) {
|
|
3552
|
-
this._inputElem.classList.add('text--right');
|
|
3553
|
-
}
|
|
3554
3546
|
this.showError();
|
|
3555
3547
|
this.prepareMask();
|
|
3556
3548
|
this.adjustFloatingLabel();
|
|
@@ -3563,7 +3555,7 @@ let EzTextInput = class {
|
|
|
3563
3555
|
this.value = this._maskFormatter.format(this.value);
|
|
3564
3556
|
}
|
|
3565
3557
|
catch (e) {
|
|
3566
|
-
this.
|
|
3558
|
+
this.errorMessage = e.message;
|
|
3567
3559
|
}
|
|
3568
3560
|
}
|
|
3569
3561
|
if (!this.isValidValue(this.value)) {
|
|
@@ -3575,11 +3567,11 @@ let EzTextInput = class {
|
|
|
3575
3567
|
render() {
|
|
3576
3568
|
return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
|
|
3577
3569
|
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)
|
|
3578
|
-
: 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); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.
|
|
3570
|
+
: 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); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
3579
3571
|
}
|
|
3580
3572
|
get _hostElement() { return index.getElement(this); }
|
|
3581
3573
|
static get watchers() { return {
|
|
3582
|
-
"
|
|
3574
|
+
"errorMessage": ["showError"],
|
|
3583
3575
|
"mask": ["prepareMask"],
|
|
3584
3576
|
"value": ["updateInputValue"]
|
|
3585
3577
|
}; }
|
|
@@ -40,7 +40,7 @@ let NumberInput = class {
|
|
|
40
40
|
this.checkNumberValidation = (valuePtBRorNumber) => {
|
|
41
41
|
try {
|
|
42
42
|
if (valuePtBRorNumber != "" && RequestMetadata.NumberUtils.format(valuePtBRorNumber, this.precision, this.prettyprecision) === "NaN") {
|
|
43
|
-
this.
|
|
43
|
+
this.errorMessage = `Valor não é um número válido`;
|
|
44
44
|
this.value = undefined;
|
|
45
45
|
this.strvalue = undefined;
|
|
46
46
|
if (this._inputElem) {
|
|
@@ -50,14 +50,14 @@ let NumberInput = class {
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
catch (err) {
|
|
53
|
-
this.
|
|
53
|
+
this.errorMessage = err.message;
|
|
54
54
|
return false;
|
|
55
55
|
}
|
|
56
56
|
return true;
|
|
57
57
|
};
|
|
58
58
|
}
|
|
59
59
|
showError() {
|
|
60
|
-
const hasError = typeof this.
|
|
60
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
61
61
|
if (this._inputElem) {
|
|
62
62
|
if (hasError) {
|
|
63
63
|
this._inputElem.classList.add('hasError');
|
|
@@ -85,7 +85,7 @@ let NumberInput = class {
|
|
|
85
85
|
if (isNaN(newValue) && newValue !== undefined) {
|
|
86
86
|
this.value = undefined;
|
|
87
87
|
this.strvalue = "";
|
|
88
|
-
this.
|
|
88
|
+
this.errorMessage = `Valor não é um número válido`;
|
|
89
89
|
this.adjustFloatingLabel();
|
|
90
90
|
}
|
|
91
91
|
else {
|
|
@@ -131,7 +131,7 @@ let NumberInput = class {
|
|
|
131
131
|
async handleFocusout() {
|
|
132
132
|
//Setting value and strvalue by stringinput
|
|
133
133
|
if (this._inputElem) {
|
|
134
|
-
this.
|
|
134
|
+
this.errorMessage = "";
|
|
135
135
|
if (this._inputElem.value !== "") {
|
|
136
136
|
this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
|
|
137
137
|
const value = RequestMetadata.NumberUtils.keepOnlyDecimalSeparator(this._inputElem.value, this.formatnumber.toUpperCase());
|
|
@@ -143,7 +143,7 @@ let NumberInput = class {
|
|
|
143
143
|
this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? RequestMetadata.NumberUtils.format(value, this.precision, this.prettyprecision) : RequestMetadata.NumberUtils.changeFormat(RequestMetadata.NumberUtils.format(value, this.precision, this.prettyprecision));
|
|
144
144
|
}
|
|
145
145
|
catch (e) {
|
|
146
|
-
this.
|
|
146
|
+
this.errorMessage = e.message;
|
|
147
147
|
return;
|
|
148
148
|
}
|
|
149
149
|
}
|
|
@@ -198,7 +198,7 @@ let NumberInput = class {
|
|
|
198
198
|
this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? RequestMetadata.NumberUtils.format(value, this.precision, this.prettyprecision) : RequestMetadata.NumberUtils.changeFormat(RequestMetadata.NumberUtils.format(value, this.precision, this.prettyprecision));
|
|
199
199
|
}
|
|
200
200
|
catch (e) {
|
|
201
|
-
this.
|
|
201
|
+
this.errorMessage = e.message;
|
|
202
202
|
return;
|
|
203
203
|
}
|
|
204
204
|
this.strvalue = this._inputElem.value;
|
|
@@ -235,11 +235,11 @@ let NumberInput = class {
|
|
|
235
235
|
}
|
|
236
236
|
render() {
|
|
237
237
|
const labelInput = this.label ? index.h("label", { onClick: () => this._inputElem.focus(), class: "input__label", ref: (el) => this._labelElem = el }, this.label) : null;
|
|
238
|
-
return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), labelInput, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.strvalue, disabled: !this.enabled, onInput: this.handleChange.bind(this), onFocusout: this.handleFocusout.bind(this) }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.
|
|
238
|
+
return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), labelInput, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.strvalue, disabled: !this.enabled, onInput: this.handleChange.bind(this), onFocusout: this.handleFocusout.bind(this) }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errorMessage)));
|
|
239
239
|
}
|
|
240
240
|
get el() { return index.getElement(this); }
|
|
241
241
|
static get watchers() { return {
|
|
242
|
-
"
|
|
242
|
+
"errorMessage": ["showError"],
|
|
243
243
|
"precision": ["onPrecisionChanged"],
|
|
244
244
|
"prettyprecision": ["onPrettyPrecisionChanged"],
|
|
245
245
|
"value": ["onValueChanged"]
|
|
@@ -20,7 +20,7 @@ let EzTimeInput = class {
|
|
|
20
20
|
this.showSeconds = false;
|
|
21
21
|
}
|
|
22
22
|
showError() {
|
|
23
|
-
const hasError = typeof this.
|
|
23
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
24
24
|
if (hasError) {
|
|
25
25
|
this._inputElem.classList.add('hasError');
|
|
26
26
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -96,11 +96,11 @@ let EzTimeInput = class {
|
|
|
96
96
|
// Event handlers
|
|
97
97
|
//---------------------------------------------
|
|
98
98
|
handleFocusout() {
|
|
99
|
-
this.
|
|
99
|
+
this.errorMessage = "";
|
|
100
100
|
this.prepareValue(this.viewValue);
|
|
101
101
|
if (!RequestMetadata.TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
|
|
102
102
|
this.clearField();
|
|
103
|
-
this.
|
|
103
|
+
this.errorMessage = "Favor inserir um horário válido.";
|
|
104
104
|
}
|
|
105
105
|
this.adjustFloatingLabel();
|
|
106
106
|
}
|
|
@@ -110,7 +110,7 @@ let EzTimeInput = class {
|
|
|
110
110
|
}
|
|
111
111
|
catch (e) {
|
|
112
112
|
this.clearField();
|
|
113
|
-
this.
|
|
113
|
+
this.errorMessage = e.message;
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
clearField() {
|
|
@@ -167,10 +167,10 @@ let EzTimeInput = class {
|
|
|
167
167
|
render() {
|
|
168
168
|
return (index.h(index.Host, null, index.h("ez-icon", { ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#timer-outline" }), this.label ?
|
|
169
169
|
index.h("label", { onClick: () => this._inputElem.focus(), class: this.value ? "input__label input__label--floated" : "input__label", ref: (el) => this._labelElem = el, title: this.label }, this.label)
|
|
170
|
-
: null, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.viewValue, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.
|
|
170
|
+
: null, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.viewValue, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errorMessage)));
|
|
171
171
|
}
|
|
172
172
|
static get watchers() { return {
|
|
173
|
-
"
|
|
173
|
+
"errorMessage": ["showError"],
|
|
174
174
|
"showSeconds": ["prepareMask"],
|
|
175
175
|
"value": ["onValueChanged"]
|
|
176
176
|
}; }
|
package/dist/cjs/ezui.cjs.js
CHANGED
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"
|
|
18
|
+
return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
|
|
19
19
|
});
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"
|
|
17
|
+
return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|