@sankhyalabs/ezui 1.1.64 → 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 +44 -52
- package/dist/cjs/ez-number-input.cjs.entry.js +9 -9
- package/dist/cjs/ez-popover.cjs.entry.js +10 -1
- 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 +45 -41
- 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/form-metadata.js +2 -2
- 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-popover/ez-popover.css +1 -1
- package/dist/collection/components/ez-popover/ez-popover.js +26 -1
- 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 +77 -76
- package/dist/esm/ez-button_16.entry.js +44 -52
- package/dist/esm/ez-number-input.entry.js +9 -9
- package/dist/esm/ez-popover.entry.js +11 -2
- 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-ee5058c1.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-popover/ez-popover.d.ts +6 -0
- 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 +32 -24
- package/package.json +2 -1
- package/dist/ezui/p-171bdc12.entry.js +0 -1
- package/dist/ezui/p-46275da0.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
|
}; }
|
|
@@ -4015,7 +4007,7 @@ let FormMetadata = class {
|
|
|
4015
4007
|
const subDuName = child.getAttribute("dataunit");
|
|
4016
4008
|
let subDu;
|
|
4017
4009
|
if (subDuName) {
|
|
4018
|
-
subDu = new DataUnit(subDuName, child.hasAttribute("many") ? 'N' : '1');
|
|
4010
|
+
subDu = new DataUnit(subDuName, 'noname', child.hasAttribute("many") ? 'N' : '1');
|
|
4019
4011
|
}
|
|
4020
4012
|
else {
|
|
4021
4013
|
subDu = dataUnit;
|
|
@@ -4030,7 +4022,7 @@ let FormMetadata = class {
|
|
|
4030
4022
|
if (!this.dataunit) {
|
|
4031
4023
|
this.dataunit = "dataunit_" + (this.name || this.label || new Date().getTime());
|
|
4032
4024
|
}
|
|
4033
|
-
const du = new DataUnit(this.dataunit, this.many ? 'N' : '1');
|
|
4025
|
+
const du = new DataUnit(this.dataunit, 'noname', this.many ? 'N' : '1');
|
|
4034
4026
|
this.metadata = this.fromElements(this._host.children, this.label, this.name, du, this.autoload);
|
|
4035
4027
|
}
|
|
4036
4028
|
render() {
|
|
@@ -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"]
|
|
@@ -6,11 +6,12 @@ const index = require('./index-0f668cc5.js');
|
|
|
6
6
|
require('./RequestMetadata-2cd01e8a.js');
|
|
7
7
|
const FloatingManager = require('./FloatingManager-6cfeb947.js');
|
|
8
8
|
|
|
9
|
-
const ezPopoverCss = ":host{--pop__box--border-radius:var(--border--radius-medium, 12px);--pop__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);position:relative;display:flex;user-select:none;width:100%}.box{z-index:var(--more-visible, 1);display:flex;flex-direction:column;height:fit-content;background-color:
|
|
9
|
+
const ezPopoverCss = ":host{--pop__box--border-radius:var(--border--radius-medium, 12px);--pop__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);position:relative;display:flex;user-select:none;width:100%}.box{z-index:var(--more-visible, 1);display:flex;flex-direction:column;height:fit-content;background-color:var(--background--xlight);border-radius:var(--pop__box--border-radius);box-shadow:var(--pop__box--box-shadow)}.box--fit-content{width:fit-content}.box--full-width{width:100%}";
|
|
10
10
|
|
|
11
11
|
let EzPopover = class {
|
|
12
12
|
constructor(hostRef) {
|
|
13
13
|
index.registerInstance(this, hostRef);
|
|
14
|
+
this.ezVisibilityChange = index.createEvent(this, "ezVisibilityChange", 7);
|
|
14
15
|
this._firstRender = true;
|
|
15
16
|
/**
|
|
16
17
|
* No modo floating = false o popover só se tornará visível
|
|
@@ -39,6 +40,11 @@ let EzPopover = class {
|
|
|
39
40
|
*/
|
|
40
41
|
this.boxwidth = 'fit-content';
|
|
41
42
|
}
|
|
43
|
+
dispatchVisibilityChange(newValue, oldValue) {
|
|
44
|
+
if (newValue != oldValue) {
|
|
45
|
+
this.ezVisibilityChange.emit(newValue);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
42
48
|
/**
|
|
43
49
|
* Atualiza a posição do popover em relação ao componente pai.
|
|
44
50
|
*/
|
|
@@ -111,6 +117,9 @@ let EzPopover = class {
|
|
|
111
117
|
return (index.h(index.Host, null, index.h("section", { ref: el => this._container = el }, index.h("div", { class: `box ${this.boxwidth === 'fit-content' ? 'box--fit-content' : 'box--full-width'}`, ref: el => this._box = el }, index.h("slot", null)))));
|
|
112
118
|
}
|
|
113
119
|
get _host() { return index.getElement(this); }
|
|
120
|
+
static get watchers() { return {
|
|
121
|
+
"isOpened": ["dispatchVisibilityChange"]
|
|
122
|
+
}; }
|
|
114
123
|
};
|
|
115
124
|
EzPopover.style = ezPopoverCss;
|
|
116
125
|
|
|
@@ -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
|
});
|