@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
|
@@ -23,7 +23,7 @@ let EzLabelChip$2 = class extends HTMLElement {
|
|
|
23
23
|
static get style() { return ezActionChipCss; }
|
|
24
24
|
};
|
|
25
25
|
|
|
26
|
-
const ezButtonCss = ":host{--
|
|
26
|
+
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}";
|
|
27
27
|
|
|
28
28
|
let EzButton$1 = class extends HTMLElement {
|
|
29
29
|
constructor() {
|
|
@@ -45,10 +45,10 @@ let EzButton$1 = class extends HTMLElement {
|
|
|
45
45
|
if (this.mode == "link") {
|
|
46
46
|
content.style.display = "inline";
|
|
47
47
|
if (slot.name == "leftIcon") {
|
|
48
|
-
content.style.paddingRight = "var(--
|
|
48
|
+
content.style.paddingRight = "var(--button__inline__icon--padding)";
|
|
49
49
|
}
|
|
50
50
|
else if (slot.name == "rightIcon") {
|
|
51
|
-
content.style.paddingLeft = "var(--
|
|
51
|
+
content.style.paddingLeft = "var(--button__inline__icon--padding)";
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -875,7 +875,7 @@ let EzCalendar$1 = class extends HTMLElement {
|
|
|
875
875
|
static get style() { return ezCalendarCss; }
|
|
876
876
|
};
|
|
877
877
|
|
|
878
|
-
const ezCheckCss = ":host{--
|
|
878
|
+
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)}";
|
|
879
879
|
|
|
880
880
|
let EzCheck$1 = class extends HTMLElement {
|
|
881
881
|
constructor() {
|
|
@@ -935,7 +935,7 @@ let EzCheck$1 = class extends HTMLElement {
|
|
|
935
935
|
return classes;
|
|
936
936
|
}
|
|
937
937
|
render() {
|
|
938
|
-
return (h(Host, null, h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) :
|
|
938
|
+
return (h(Host, null, h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }), this.label ? h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
|
|
939
939
|
}
|
|
940
940
|
static get watchers() { return {
|
|
941
941
|
"mode": ["adjustMode"]
|
|
@@ -1047,7 +1047,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1047
1047
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
1048
1048
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
1049
1049
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
1050
|
-
const top = this.
|
|
1050
|
+
const top = this.errorMessage ? '0px' : '-17px';
|
|
1051
1051
|
this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
1052
1052
|
window.requestAnimationFrame(() => {
|
|
1053
1053
|
this._optionsList.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
|
|
@@ -1216,7 +1216,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1216
1216
|
this.cancelPreselection();
|
|
1217
1217
|
}
|
|
1218
1218
|
render() {
|
|
1219
|
-
return (h(Host, null, h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(),
|
|
1219
|
+
return (h(Host, null, h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), errorMessage: this.errorMessage }, this.searchmode ?
|
|
1220
1220
|
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions('ADVANCED'); }, slot: "leftIcon" })
|
|
1221
1221
|
:
|
|
1222
1222
|
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
|
|
@@ -1245,7 +1245,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1245
1245
|
this._textInput.label = this.label;
|
|
1246
1246
|
}
|
|
1247
1247
|
setErrorMessage() {
|
|
1248
|
-
this._textInput.
|
|
1248
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
1249
1249
|
}
|
|
1250
1250
|
applyValueToInput() {
|
|
1251
1251
|
if (this._textInput) {
|
|
@@ -1254,7 +1254,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1254
1254
|
}
|
|
1255
1255
|
changeValue(newValue) {
|
|
1256
1256
|
newValue = newValue == null ? null : DateUtils.clearTime(newValue);
|
|
1257
|
-
this._textInput.
|
|
1257
|
+
this._textInput.errorMessage = "";
|
|
1258
1258
|
if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
|
|
1259
1259
|
this.value = newValue;
|
|
1260
1260
|
this.ezChange.emit();
|
|
@@ -1266,7 +1266,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1266
1266
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
1267
1267
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
1268
1268
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
1269
|
-
const top = this._textInput.
|
|
1269
|
+
const top = this._textInput.errorMessage ? 0 : -17;
|
|
1270
1270
|
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
1271
1271
|
}
|
|
1272
1272
|
hideCalendar() {
|
|
@@ -1285,7 +1285,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1285
1285
|
}
|
|
1286
1286
|
}
|
|
1287
1287
|
else {
|
|
1288
|
-
this._textInput.
|
|
1288
|
+
this._textInput.errorMessage = "O valor digitado não é uma data válida";
|
|
1289
1289
|
}
|
|
1290
1290
|
}
|
|
1291
1291
|
getTextValue(d) {
|
|
@@ -1295,12 +1295,12 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1295
1295
|
return (h(Host, null, h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
|
|
1296
1296
|
if (event.key === 'H' || event.key === 'h')
|
|
1297
1297
|
this.changeValue(new Date());
|
|
1298
|
-
}, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled,
|
|
1298
|
+
}, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage }, h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
|
|
1299
1299
|
}
|
|
1300
1300
|
get _elem() { return this; }
|
|
1301
1301
|
static get watchers() { return {
|
|
1302
1302
|
"label": ["setLabel"],
|
|
1303
|
-
"
|
|
1303
|
+
"errorMessage": ["setErrorMessage"],
|
|
1304
1304
|
"value": ["applyValueToInput"]
|
|
1305
1305
|
}; }
|
|
1306
1306
|
static get style() { return ezDateInputCss; }
|
|
@@ -3335,7 +3335,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3335
3335
|
switch (userInterface) {
|
|
3336
3336
|
case 'LONGTEXT':
|
|
3337
3337
|
return h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
|
|
3338
|
-
h("ez-text-area", { value: value || '', label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target['value']),
|
|
3338
|
+
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 }));
|
|
3339
3339
|
case 'CHECKBOX':
|
|
3340
3340
|
case 'SWITCH':
|
|
3341
3341
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" }, loadingData ? h("place-holder", null) :
|
|
@@ -3344,7 +3344,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3344
3344
|
const optsObj = properties ? JSON.parse(getProp(properties, 'options')) : {};
|
|
3345
3345
|
const normalized = Object.keys(optsObj).map(key => { return { value: key, label: optsObj[key] }; });
|
|
3346
3346
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
3347
|
-
h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
3347
|
+
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 }));
|
|
3348
3348
|
case 'SEARCH':
|
|
3349
3349
|
const context = {
|
|
3350
3350
|
__MAIN_FORM: form,
|
|
@@ -3372,7 +3372,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3372
3372
|
context['CRITERIA'] = criteriaList;
|
|
3373
3373
|
}
|
|
3374
3374
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
3375
|
-
h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
3375
|
+
h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, optionloader: (argument) => {
|
|
3376
3376
|
if (form) {
|
|
3377
3377
|
return form.loadSearch(argument, context);
|
|
3378
3378
|
}
|
|
@@ -3386,7 +3386,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3386
3386
|
h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
|
|
3387
3387
|
case 'DATE':
|
|
3388
3388
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
3389
|
-
h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
3389
|
+
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 }));
|
|
3390
3390
|
case 'DECIMALNUMBER':
|
|
3391
3391
|
case 'INTEGERNUMBER':
|
|
3392
3392
|
let precision = 0;
|
|
@@ -3396,11 +3396,11 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3396
3396
|
prettyPrecision = Number(getProp(properties, "prettyprecision") || precision);
|
|
3397
3397
|
}
|
|
3398
3398
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
3399
|
-
h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
3399
|
+
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 }));
|
|
3400
3400
|
//IMAGE, DATETIME, ELAPSEDTIME, PASSWORD, MASKEDTEXT, HTML
|
|
3401
3401
|
default:
|
|
3402
3402
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
3403
|
-
h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target['value']),
|
|
3403
|
+
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 }));
|
|
3404
3404
|
}
|
|
3405
3405
|
};
|
|
3406
3406
|
function getProp(properties, name) {
|
|
@@ -3721,14 +3721,16 @@ let EzForm$1 = class extends HTMLElement {
|
|
|
3721
3721
|
static get style() { return ezFormCss; }
|
|
3722
3722
|
};
|
|
3723
3723
|
|
|
3724
|
-
const ezIconCss = ":host{display:block;overflow:hidden;position:relative}svg{display:flex;justify-content:center;align-items:center;fill:var(--color
|
|
3724
|
+
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}";
|
|
3725
3725
|
|
|
3726
3726
|
let EzIcon$1 = class extends HTMLElement {
|
|
3727
3727
|
constructor() {
|
|
3728
3728
|
super();
|
|
3729
3729
|
this.__registerHost();
|
|
3730
3730
|
this.__attachShadow();
|
|
3731
|
-
|
|
3731
|
+
/**
|
|
3732
|
+
* Tamanho do icone
|
|
3733
|
+
*/
|
|
3732
3734
|
this.size = 'medium';
|
|
3733
3735
|
}
|
|
3734
3736
|
isSprite() {
|
|
@@ -3993,7 +3995,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
3993
3995
|
this.checkNumberValidation = (valuePtBRorNumber) => {
|
|
3994
3996
|
try {
|
|
3995
3997
|
if (valuePtBRorNumber != "" && NumberUtils.format(valuePtBRorNumber, this.precision, this.prettyprecision) === "NaN") {
|
|
3996
|
-
this.
|
|
3998
|
+
this.errorMessage = `Valor não é um número válido`;
|
|
3997
3999
|
this.value = undefined;
|
|
3998
4000
|
this.strvalue = undefined;
|
|
3999
4001
|
if (this._inputElem) {
|
|
@@ -4003,14 +4005,14 @@ let NumberInput = class extends HTMLElement {
|
|
|
4003
4005
|
}
|
|
4004
4006
|
}
|
|
4005
4007
|
catch (err) {
|
|
4006
|
-
this.
|
|
4008
|
+
this.errorMessage = err.message;
|
|
4007
4009
|
return false;
|
|
4008
4010
|
}
|
|
4009
4011
|
return true;
|
|
4010
4012
|
};
|
|
4011
4013
|
}
|
|
4012
4014
|
showError() {
|
|
4013
|
-
const hasError = typeof this.
|
|
4015
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4014
4016
|
if (this._inputElem) {
|
|
4015
4017
|
if (hasError) {
|
|
4016
4018
|
this._inputElem.classList.add('hasError');
|
|
@@ -4038,7 +4040,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
4038
4040
|
if (isNaN(newValue) && newValue !== undefined) {
|
|
4039
4041
|
this.value = undefined;
|
|
4040
4042
|
this.strvalue = "";
|
|
4041
|
-
this.
|
|
4043
|
+
this.errorMessage = `Valor não é um número válido`;
|
|
4042
4044
|
this.adjustFloatingLabel();
|
|
4043
4045
|
}
|
|
4044
4046
|
else {
|
|
@@ -4084,7 +4086,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
4084
4086
|
async handleFocusout() {
|
|
4085
4087
|
//Setting value and strvalue by stringinput
|
|
4086
4088
|
if (this._inputElem) {
|
|
4087
|
-
this.
|
|
4089
|
+
this.errorMessage = "";
|
|
4088
4090
|
if (this._inputElem.value !== "") {
|
|
4089
4091
|
this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
|
|
4090
4092
|
const value = NumberUtils.keepOnlyDecimalSeparator(this._inputElem.value, this.formatnumber.toUpperCase());
|
|
@@ -4096,7 +4098,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
4096
4098
|
this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
|
|
4097
4099
|
}
|
|
4098
4100
|
catch (e) {
|
|
4099
|
-
this.
|
|
4101
|
+
this.errorMessage = e.message;
|
|
4100
4102
|
return;
|
|
4101
4103
|
}
|
|
4102
4104
|
}
|
|
@@ -4151,7 +4153,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
4151
4153
|
this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
|
|
4152
4154
|
}
|
|
4153
4155
|
catch (e) {
|
|
4154
|
-
this.
|
|
4156
|
+
this.errorMessage = e.message;
|
|
4155
4157
|
return;
|
|
4156
4158
|
}
|
|
4157
4159
|
this.strvalue = this._inputElem.value;
|
|
@@ -4188,11 +4190,11 @@ let NumberInput = class extends HTMLElement {
|
|
|
4188
4190
|
}
|
|
4189
4191
|
render() {
|
|
4190
4192
|
const labelInput = this.label ? h("label", { onClick: () => this._inputElem.focus(), class: "input__label", ref: (el) => this._labelElem = el }, this.label) : null;
|
|
4191
|
-
return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), labelInput, 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) }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.
|
|
4193
|
+
return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), labelInput, 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) }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errorMessage)));
|
|
4192
4194
|
}
|
|
4193
4195
|
get el() { return this; }
|
|
4194
4196
|
static get watchers() { return {
|
|
4195
|
-
"
|
|
4197
|
+
"errorMessage": ["showError"],
|
|
4196
4198
|
"precision": ["onPrecisionChanged"],
|
|
4197
4199
|
"prettyprecision": ["onPrettyPrecisionChanged"],
|
|
4198
4200
|
"value": ["onValueChanged"]
|
|
@@ -4217,7 +4219,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4217
4219
|
this._textInput.label = this.label;
|
|
4218
4220
|
}
|
|
4219
4221
|
setErrorMessage() {
|
|
4220
|
-
this._textInput.
|
|
4222
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
4221
4223
|
}
|
|
4222
4224
|
applyValueToInput() {
|
|
4223
4225
|
if (this._textInput) {
|
|
@@ -4225,7 +4227,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4225
4227
|
}
|
|
4226
4228
|
}
|
|
4227
4229
|
changeValue(newValue) {
|
|
4228
|
-
this._textInput.
|
|
4230
|
+
this._textInput.errorMessage = "";
|
|
4229
4231
|
if (newValue !== this.value) {
|
|
4230
4232
|
this.value = newValue;
|
|
4231
4233
|
this.ezChange.emit();
|
|
@@ -4234,7 +4236,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4234
4236
|
parseNumber() {
|
|
4235
4237
|
const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : null;
|
|
4236
4238
|
if (parsedNumber != null && isNaN(parsedNumber)) {
|
|
4237
|
-
this._textInput.
|
|
4239
|
+
this._textInput.errorMessage = "O valor digitado não é um número válido";
|
|
4238
4240
|
}
|
|
4239
4241
|
else {
|
|
4240
4242
|
this.changeValue(parsedNumber);
|
|
@@ -4247,11 +4249,11 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4247
4249
|
return null;
|
|
4248
4250
|
}
|
|
4249
4251
|
render() {
|
|
4250
|
-
return (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,
|
|
4252
|
+
return (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 }));
|
|
4251
4253
|
}
|
|
4252
4254
|
static get watchers() { return {
|
|
4253
4255
|
"label": ["setLabel"],
|
|
4254
|
-
"
|
|
4256
|
+
"errorMessage": ["setErrorMessage"],
|
|
4255
4257
|
"value": ["applyValueToInput"]
|
|
4256
4258
|
}; }
|
|
4257
4259
|
static get style() { return ezNumericInputCss; }
|
|
@@ -4452,7 +4454,7 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4452
4454
|
this.ezChange.emit(evt.detail);
|
|
4453
4455
|
}
|
|
4454
4456
|
render() {
|
|
4455
|
-
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled,
|
|
4457
|
+
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionloader: this.optionloader, searchmode: true, onEzChange: evt => this.onComboChange(evt), showselectedvalue: this.showselectedvalue, showoptionvalue: this.showoptionvalue }));
|
|
4456
4458
|
}
|
|
4457
4459
|
;
|
|
4458
4460
|
static get watchers() { return {
|
|
@@ -4684,7 +4686,7 @@ let EzTextArea$1 = class extends HTMLElement {
|
|
|
4684
4686
|
this.rows = 4;
|
|
4685
4687
|
}
|
|
4686
4688
|
showError() {
|
|
4687
|
-
const hasError = typeof this.
|
|
4689
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4688
4690
|
if (hasError) {
|
|
4689
4691
|
this._container.classList.add('hasError');
|
|
4690
4692
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -4764,21 +4766,17 @@ let EzTextArea$1 = class extends HTMLElement {
|
|
|
4764
4766
|
render() {
|
|
4765
4767
|
return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label ?
|
|
4766
4768
|
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)
|
|
4767
|
-
: null, h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.
|
|
4769
|
+
: null, h("textarea", { onFocus: () => this.handleFocus(), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
4768
4770
|
}
|
|
4769
4771
|
get _hostElement() { return this; }
|
|
4770
4772
|
static get watchers() { return {
|
|
4771
|
-
"
|
|
4773
|
+
"errorMessage": ["showError"],
|
|
4772
4774
|
"value": ["updateInputValue"]
|
|
4773
4775
|
}; }
|
|
4774
4776
|
static get style() { return ezTextAreaCss; }
|
|
4775
4777
|
};
|
|
4776
4778
|
|
|
4777
|
-
|
|
4778
|
-
return strValue && /^-?\d*[.,]?\d*$/.test(strValue);
|
|
4779
|
-
}
|
|
4780
|
-
|
|
4781
|
-
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}";
|
|
4779
|
+
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}";
|
|
4782
4780
|
|
|
4783
4781
|
let EzTextInput$1 = class extends HTMLElement {
|
|
4784
4782
|
constructor() {
|
|
@@ -4792,7 +4790,7 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4792
4790
|
this.enabled = true;
|
|
4793
4791
|
}
|
|
4794
4792
|
showError() {
|
|
4795
|
-
const hasError = typeof this.
|
|
4793
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4796
4794
|
if (hasError) {
|
|
4797
4795
|
this._inputElem.classList.add('hasError');
|
|
4798
4796
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -4867,16 +4865,13 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4867
4865
|
this._inputElem.value = this._maskFormatter.format(value);
|
|
4868
4866
|
}
|
|
4869
4867
|
catch (e) {
|
|
4870
|
-
this.
|
|
4868
|
+
this.errorMessage = e.message;
|
|
4871
4869
|
}
|
|
4872
4870
|
}
|
|
4873
4871
|
this.value = this._inputElem.value;
|
|
4874
4872
|
this.adjustFloatingLabel();
|
|
4875
4873
|
}
|
|
4876
4874
|
isValidValue(value) {
|
|
4877
|
-
if (this.onlynumber) {
|
|
4878
|
-
return value == "" || isValidNumber(value);
|
|
4879
|
-
}
|
|
4880
4875
|
if (this.restrict) {
|
|
4881
4876
|
return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
|
|
4882
4877
|
}
|
|
@@ -4905,11 +4900,11 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4905
4900
|
content.style.justifyContent = "center";
|
|
4906
4901
|
content.style.overflow = "hidden";
|
|
4907
4902
|
content.style.top = "0px";
|
|
4908
|
-
content.style.width = "var(--
|
|
4909
|
-
content.style.height = "var(--
|
|
4903
|
+
content.style.width = "var(--text-input__icon--width)";
|
|
4904
|
+
content.style.height = "var(--text-input--height)";
|
|
4910
4905
|
if (slot.name == "leftIcon") {
|
|
4911
4906
|
content.style.left = "0px";
|
|
4912
|
-
content.style.borderRadius = "var(--
|
|
4907
|
+
content.style.borderRadius = "var(--text-input--border-radius) 0 0 var(--text-input--border-radius)";
|
|
4913
4908
|
this._inputElem.classList.add('icon--left');
|
|
4914
4909
|
if (this._labelElem) {
|
|
4915
4910
|
this._labelElem.classList.add('input__label--left');
|
|
@@ -4917,7 +4912,7 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4917
4912
|
}
|
|
4918
4913
|
else if (slot.name == "rightIcon") {
|
|
4919
4914
|
content.style.right = "0px";
|
|
4920
|
-
content.style.borderRadius = "0 var(--
|
|
4915
|
+
content.style.borderRadius = "0 var(--text-input--border-radius) var(--text-input--border-radius) 0";
|
|
4921
4916
|
this._inputElem.classList.add('icon--right');
|
|
4922
4917
|
if (this._labelElem) {
|
|
4923
4918
|
this._labelElem.classList.add('input__label--right');
|
|
@@ -4935,9 +4930,6 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4935
4930
|
// Lifecycle web component
|
|
4936
4931
|
//---------------------------------------------
|
|
4937
4932
|
componentDidLoad() {
|
|
4938
|
-
if (this.onlynumber) {
|
|
4939
|
-
this._inputElem.classList.add('text--right');
|
|
4940
|
-
}
|
|
4941
4933
|
this.showError();
|
|
4942
4934
|
this.prepareMask();
|
|
4943
4935
|
this.adjustFloatingLabel();
|
|
@@ -4950,7 +4942,7 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4950
4942
|
this.value = this._maskFormatter.format(this.value);
|
|
4951
4943
|
}
|
|
4952
4944
|
catch (e) {
|
|
4953
|
-
this.
|
|
4945
|
+
this.errorMessage = e.message;
|
|
4954
4946
|
}
|
|
4955
4947
|
}
|
|
4956
4948
|
if (!this.isValidValue(this.value)) {
|
|
@@ -4962,11 +4954,11 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4962
4954
|
render() {
|
|
4963
4955
|
return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
|
|
4964
4956
|
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)
|
|
4965
|
-
: null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.
|
|
4957
|
+
: null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
4966
4958
|
}
|
|
4967
4959
|
get _hostElement() { return this; }
|
|
4968
4960
|
static get watchers() { return {
|
|
4969
|
-
"
|
|
4961
|
+
"errorMessage": ["showError"],
|
|
4970
4962
|
"mask": ["prepareMask"],
|
|
4971
4963
|
"value": ["updateInputValue"]
|
|
4972
4964
|
}; }
|
|
@@ -4990,7 +4982,7 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
4990
4982
|
this.showSeconds = false;
|
|
4991
4983
|
}
|
|
4992
4984
|
showError() {
|
|
4993
|
-
const hasError = typeof this.
|
|
4985
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4994
4986
|
if (hasError) {
|
|
4995
4987
|
this._inputElem.classList.add('hasError');
|
|
4996
4988
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -5066,11 +5058,11 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5066
5058
|
// Event handlers
|
|
5067
5059
|
//---------------------------------------------
|
|
5068
5060
|
handleFocusout() {
|
|
5069
|
-
this.
|
|
5061
|
+
this.errorMessage = "";
|
|
5070
5062
|
this.prepareValue(this.viewValue);
|
|
5071
5063
|
if (!TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
|
|
5072
5064
|
this.clearField();
|
|
5073
|
-
this.
|
|
5065
|
+
this.errorMessage = "Favor inserir um horário válido.";
|
|
5074
5066
|
}
|
|
5075
5067
|
this.adjustFloatingLabel();
|
|
5076
5068
|
}
|
|
@@ -5080,7 +5072,7 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5080
5072
|
}
|
|
5081
5073
|
catch (e) {
|
|
5082
5074
|
this.clearField();
|
|
5083
|
-
this.
|
|
5075
|
+
this.errorMessage = e.message;
|
|
5084
5076
|
}
|
|
5085
5077
|
}
|
|
5086
5078
|
clearField() {
|
|
@@ -5137,10 +5129,10 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5137
5129
|
render() {
|
|
5138
5130
|
return (h(Host, null, h("ez-icon", { ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#timer-outline" }), this.label ?
|
|
5139
5131
|
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)
|
|
5140
|
-
: null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.viewValue, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.
|
|
5132
|
+
: null, h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.viewValue, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el }, this.errorMessage)));
|
|
5141
5133
|
}
|
|
5142
5134
|
static get watchers() { return {
|
|
5143
|
-
"
|
|
5135
|
+
"errorMessage": ["showError"],
|
|
5144
5136
|
"showSeconds": ["prepareMask"],
|
|
5145
5137
|
"value": ["onValueChanged"]
|
|
5146
5138
|
}; }
|
|
@@ -5655,22 +5647,22 @@ const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"la
|
|
|
5655
5647
|
const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516]}]);
|
|
5656
5648
|
const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
|
|
5657
5649
|
const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513]}]);
|
|
5658
|
-
const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"
|
|
5659
|
-
const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"
|
|
5650
|
+
const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [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]}]);
|
|
5651
|
+
const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}]);
|
|
5660
5652
|
const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
|
|
5661
5653
|
const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540]}]);
|
|
5662
5654
|
const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
|
|
5663
5655
|
const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
|
|
5664
5656
|
const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]);
|
|
5665
|
-
const EzNumberInput = /*@__PURE__*/proxyCustomElement(NumberInput, [1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"
|
|
5666
|
-
const EzNumericInput = /*@__PURE__*/proxyCustomElement(EzNumericInput$1, [1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"
|
|
5657
|
+
const EzNumberInput = /*@__PURE__*/proxyCustomElement(NumberInput, [1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513]}]);
|
|
5658
|
+
const EzNumericInput = /*@__PURE__*/proxyCustomElement(EzNumericInput$1, [1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}]);
|
|
5667
5659
|
const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"]}]);
|
|
5668
5660
|
const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]);
|
|
5669
|
-
const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"
|
|
5661
|
+
const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}]);
|
|
5670
5662
|
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}]);
|
|
5671
|
-
const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"
|
|
5672
|
-
const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"
|
|
5673
|
-
const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"
|
|
5663
|
+
const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538]}]);
|
|
5664
|
+
const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1]}]);
|
|
5665
|
+
const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}]);
|
|
5674
5666
|
const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"]}]);
|
|
5675
5667
|
const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040]}]);
|
|
5676
5668
|
const FormMetadata = /*@__PURE__*/proxyCustomElement(FormMetadata$1, [1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}]);
|