@sankhyalabs/ezui 1.1.66 → 1.1.69
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-action-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-button_16.cjs.entry.js +48 -56
- package/dist/cjs/ez-dialog.cjs.entry.js +3 -0
- package/dist/cjs/ez-modal.cjs.entry.js +1 -1
- package/dist/cjs/ez-number-input.cjs.entry.js +9 -9
- package/dist/cjs/ez-popover.cjs.entry.js +1 -5
- package/dist/cjs/ez-popup.cjs.entry.js +1 -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-action-chip/ez-action-chip.css +2 -1
- package/dist/collection/components/ez-action-chip/ez-action-chip.js +1 -1
- package/dist/collection/components/ez-button/ez-button.css +47 -45
- package/dist/collection/components/ez-button/ez-button.js +5 -5
- package/dist/collection/components/ez-calendar/ez-calendar.css +2 -2
- package/dist/collection/components/ez-check/ez-check.css +78 -78
- package/dist/collection/components/ez-check/ez-check.js +7 -7
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +2 -2
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +6 -6
- package/dist/collection/components/ez-date-input/ez-date-input.js +9 -9
- package/dist/collection/components/ez-dialog/ez-dialog.js +5 -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-label-chip/ez-label-chip.css +2 -1
- package/dist/collection/components/ez-label-chip/ez-label-chip.js +1 -1
- package/dist/collection/components/ez-modal/ez-modal.css +1 -1
- package/dist/collection/components/ez-modal/ez-modal.js +4 -4
- package/dist/collection/components/ez-number-input/ez-number-input.js +11 -11
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.css +1 -1
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.js +9 -9
- package/dist/collection/components/ez-popover/ez-popover.css +1 -1
- package/dist/collection/components/ez-popover/ez-popover.js +0 -4
- package/dist/collection/components/ez-popup/ez-popup.css +2 -2
- package/dist/collection/components/ez-popup/ez-popup.js +3 -3
- package/dist/collection/components/ez-search/ez-search.js +5 -5
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +1 -1
- package/dist/collection/components/ez-text-area/ez-text-area.css +6 -0
- package/dist/collection/components/ez-text-area/ez-text-area.js +9 -9
- package/dist/collection/components/ez-text-input/ez-text-input.css +68 -60
- package/dist/collection/components/ez-text-input/ez-text-input.js +14 -38
- package/dist/collection/components/ez-time-input/ez-time-input.css +8 -0
- package/dist/collection/components/ez-time-input/ez-time-input.js +9 -9
- package/dist/collection/components/ez-toast/ez-toast.css +2 -2
- package/dist/collection/components/ez-upload/ez-upload.css +4 -1
- package/dist/collection/components/ez-upload/ez-upload.js +3 -3
- package/dist/custom-elements/index.js +78 -87
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +48 -56
- package/dist/esm/ez-dialog.entry.js +3 -0
- package/dist/esm/ez-modal.entry.js +1 -1
- package/dist/esm/ez-number-input.entry.js +9 -9
- package/dist/esm/ez-popover.entry.js +1 -5
- package/dist/esm/ez-popup.entry.js +1 -1
- 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-169d99a1.entry.js +1 -0
- package/dist/ezui/{p-4f4b8aae.entry.js → p-1c33a56d.entry.js} +1 -1
- package/dist/ezui/{p-d8a47f23.entry.js → p-74e4415e.entry.js} +1 -1
- package/dist/ezui/{p-6a6f9712.entry.js → p-ee5058c1.entry.js} +1 -1
- package/dist/ezui/{p-7f528c19.entry.js → p-f7d7fb7f.entry.js} +1 -1
- package/dist/types/components/ez-action-chip/ez-action-chip.d.ts +1 -1
- package/dist/types/components/ez-button/ez-button.d.ts +1 -1
- package/dist/types/components/ez-check/ez-check.d.ts +3 -3
- package/dist/types/components/ez-collapsible-box/ez-collapsible-box.d.ts +1 -1
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +3 -3
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +2 -2
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +4 -1
- package/dist/types/components/ez-icon/ez-icon.d.ts +6 -0
- package/dist/types/components/ez-label-chip/ez-label-chip.d.ts +1 -1
- package/dist/types/components/ez-modal/ez-modal.d.ts +3 -3
- 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 +3 -3
- package/dist/types/components/ez-popup/ez-popup.d.ts +2 -2
- package/dist/types/components/ez-search/ez-search.d.ts +3 -3
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +1 -1
- package/dist/types/components/ez-text-area/ez-text-area.d.ts +4 -4
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +4 -8
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +2 -2
- package/dist/types/components/ez-upload/ez-upload.d.ts +3 -3
- package/dist/types/components.d.ts +88 -81
- package/package.json +2 -1
- package/dist/ezui/p-afc553a4.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-89fc9bfd.js';
|
|
2
2
|
|
|
3
|
-
const ezActionChipCss = ":host{--ac--height:36px;--ac--border-radius:var(--border--radius-large, 24px);--ac__border:1px solid;--ac__border-color-strokes:var(--color--strokes, #DCE0E8);--ac--font-size:var(--text--medium, 14px);--ac--font-family:var(--font-pattern, Arial);--ac--font-weight:var(--text-weight--large, 500);--ac__label--title--primary:var(--title--primary, #919191);--ac__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ac__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ac__label__default--border-color--hover:var(--color--primary-600, #007a5a)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;color:var(--ac__label--title--primary);fill:var(--ac__label--title--primary);border:var(--ac__border);border-radius:var(--ac--border-radius);border-color:var(--ac__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px)
|
|
3
|
+
const ezActionChipCss = ":host{--ac--height:36px;--ac--border-radius:var(--border--radius-large, 24px);--ac__border:1px solid;--ac__border-color-strokes:var(--color--strokes, #DCE0E8);--ac--font-size:var(--text--medium, 14px);--ac--font-family:var(--font-pattern, Arial);--ac--font-weight:var(--text-weight--large, 500);--ac__label--title--primary:var(--title--primary, #919191);--ac__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ac__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ac__label__default--border-color--hover:var(--color--primary-600, #007a5a)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;cursor:pointer;color:var(--ac__label--title--primary);fill:var(--ac__label--title--primary);border:var(--ac__border);border-radius:var(--ac--border-radius);border-color:var(--ac__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px)}.label__container:hover{border-color:var(--ac__label__default--border-color--hover);background-color:var(--ac__label__default--background-color--hover)}label{display:flex;align-items:center;font-weight:var(--text-weight--large, 600);cursor:pointer;height:var(--ac--height);font-family:var(--ac--font-family);font-size:var(--ac--font-size)}";
|
|
4
4
|
|
|
5
5
|
let EzLabelChip = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, h, c as createEvent, f as forceUpdate, H as Host
|
|
|
2
2
|
import { N as NumberUtils, M as MaskFormatter } from './RequestMetadata-c265c9d5.js';
|
|
3
3
|
import { F as FloatingManager } from './FloatingManager-bb90ef41.js';
|
|
4
4
|
|
|
5
|
-
const ezButtonCss = ":host{--
|
|
5
|
+
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;}";
|
|
6
6
|
|
|
7
7
|
let EzButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -17,15 +17,15 @@ let EzButton = class {
|
|
|
17
17
|
this.mode = "regular";
|
|
18
18
|
}
|
|
19
19
|
handleSlotChange(ev) {
|
|
20
|
-
const slot = ev.target;
|
|
21
|
-
const content = slot.assignedElements()[0];
|
|
22
20
|
if (this.mode == "link") {
|
|
21
|
+
const slot = ev.target;
|
|
22
|
+
const content = slot.assignedElements()[0];
|
|
23
23
|
content.style.display = "inline";
|
|
24
24
|
if (slot.name == "leftIcon") {
|
|
25
|
-
content.style.paddingRight = "var(--
|
|
25
|
+
content.style.paddingRight = "var(--button__inline__icon--padding)";
|
|
26
26
|
}
|
|
27
27
|
else if (slot.name == "rightIcon") {
|
|
28
|
-
content.style.paddingLeft = "var(--
|
|
28
|
+
content.style.paddingLeft = "var(--button__inline__icon--padding)";
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -201,19 +201,19 @@ let EzCalendar = class {
|
|
|
201
201
|
};
|
|
202
202
|
EzCalendar.style = ezCalendarCss;
|
|
203
203
|
|
|
204
|
-
const ezCheckCss = ":host{--
|
|
204
|
+
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)}";
|
|
205
205
|
|
|
206
206
|
let EzCheck = class {
|
|
207
207
|
constructor(hostRef) {
|
|
208
208
|
registerInstance(this, hostRef);
|
|
209
209
|
this.ezChange = createEvent(this, "ezChange", 7);
|
|
210
210
|
/**
|
|
211
|
-
* Deixa o campo disponível ou não
|
|
211
|
+
* Deixa o campo disponível ou não para interação com o usuário.
|
|
212
212
|
*/
|
|
213
213
|
this.enabled = true;
|
|
214
214
|
/**
|
|
215
215
|
* Existem dois modos de visualização: regular e switch.
|
|
216
|
-
* Se esta propriedade for omitida, o componete assume o formato "regular"
|
|
216
|
+
* Se esta propriedade for omitida, o componete assume o formato "regular".
|
|
217
217
|
* No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
|
|
218
218
|
* No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
|
|
219
219
|
*/
|
|
@@ -254,12 +254,12 @@ let EzCheck = class {
|
|
|
254
254
|
getLabelClasses() {
|
|
255
255
|
let classes = "label";
|
|
256
256
|
if (!this.enabled) {
|
|
257
|
-
classes
|
|
257
|
+
classes += " label--disabled";
|
|
258
258
|
}
|
|
259
259
|
return classes;
|
|
260
260
|
}
|
|
261
261
|
render() {
|
|
262
|
-
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) :
|
|
262
|
+
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));
|
|
263
263
|
}
|
|
264
264
|
static get watchers() { return {
|
|
265
265
|
"mode": ["adjustMode"]
|
|
@@ -367,7 +367,7 @@ let EzComboBox = class {
|
|
|
367
367
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
368
368
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
369
369
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
370
|
-
const top = this.
|
|
370
|
+
const top = this.errorMessage ? '0px' : '-17px';
|
|
371
371
|
this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
372
372
|
window.requestAnimationFrame(() => {
|
|
373
373
|
this._optionsList.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
|
|
@@ -536,7 +536,7 @@ let EzComboBox = class {
|
|
|
536
536
|
this.cancelPreselection();
|
|
537
537
|
}
|
|
538
538
|
render() {
|
|
539
|
-
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(),
|
|
539
|
+
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 ?
|
|
540
540
|
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions('ADVANCED'); }, slot: "leftIcon" })
|
|
541
541
|
:
|
|
542
542
|
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))))));
|
|
@@ -563,7 +563,7 @@ let EzDateInput = class {
|
|
|
563
563
|
this._textInput.label = this.label;
|
|
564
564
|
}
|
|
565
565
|
setErrorMessage() {
|
|
566
|
-
this._textInput.
|
|
566
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
567
567
|
}
|
|
568
568
|
applyValueToInput() {
|
|
569
569
|
if (this._textInput) {
|
|
@@ -572,7 +572,7 @@ let EzDateInput = class {
|
|
|
572
572
|
}
|
|
573
573
|
changeValue(newValue) {
|
|
574
574
|
newValue = newValue == null ? null : DateUtils.clearTime(newValue);
|
|
575
|
-
this._textInput.
|
|
575
|
+
this._textInput.errorMessage = "";
|
|
576
576
|
if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
|
|
577
577
|
this.value = newValue;
|
|
578
578
|
this.ezChange.emit();
|
|
@@ -584,7 +584,7 @@ let EzDateInput = class {
|
|
|
584
584
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
585
585
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
586
586
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
587
|
-
const top = this._textInput.
|
|
587
|
+
const top = this._textInput.errorMessage ? 0 : -17;
|
|
588
588
|
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
589
589
|
}
|
|
590
590
|
hideCalendar() {
|
|
@@ -603,7 +603,7 @@ let EzDateInput = class {
|
|
|
603
603
|
}
|
|
604
604
|
}
|
|
605
605
|
else {
|
|
606
|
-
this._textInput.
|
|
606
|
+
this._textInput.errorMessage = "O valor digitado não é uma data válida";
|
|
607
607
|
}
|
|
608
608
|
}
|
|
609
609
|
getTextValue(d) {
|
|
@@ -613,12 +613,12 @@ let EzDateInput = class {
|
|
|
613
613
|
return (h(Host, null, h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
|
|
614
614
|
if (event.key === 'H' || event.key === 'h')
|
|
615
615
|
this.changeValue(new Date());
|
|
616
|
-
}, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled,
|
|
616
|
+
}, 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 })));
|
|
617
617
|
}
|
|
618
618
|
get _elem() { return getElement(this); }
|
|
619
619
|
static get watchers() { return {
|
|
620
620
|
"label": ["setLabel"],
|
|
621
|
-
"
|
|
621
|
+
"errorMessage": ["setErrorMessage"],
|
|
622
622
|
"value": ["applyValueToInput"]
|
|
623
623
|
}; }
|
|
624
624
|
};
|
|
@@ -2575,7 +2575,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2575
2575
|
switch (userInterface) {
|
|
2576
2576
|
case 'LONGTEXT':
|
|
2577
2577
|
return h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
|
|
2578
|
-
h("ez-text-area", { value: value || '', label: formattedLabel, onEzChange: evt => changeFieldHandler(evt.target['value']),
|
|
2578
|
+
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 }));
|
|
2579
2579
|
case 'CHECKBOX':
|
|
2580
2580
|
case 'SWITCH':
|
|
2581
2581
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small align--middle padding-bottom--large" }, loadingData ? h("place-holder", null) :
|
|
@@ -2584,7 +2584,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2584
2584
|
const optsObj = properties ? JSON.parse(getProp(properties, 'options')) : {};
|
|
2585
2585
|
const normalized = Object.keys(optsObj).map(key => { return { value: key, label: optsObj[key] }; });
|
|
2586
2586
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
2587
|
-
h("ez-combo-box", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
2587
|
+
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 }));
|
|
2588
2588
|
case 'SEARCH':
|
|
2589
2589
|
const context = {
|
|
2590
2590
|
__MAIN_FORM: form,
|
|
@@ -2612,7 +2612,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2612
2612
|
context['CRITERIA'] = criteriaList;
|
|
2613
2613
|
}
|
|
2614
2614
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
2615
|
-
h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
2615
|
+
h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, optionloader: (argument) => {
|
|
2616
2616
|
if (form) {
|
|
2617
2617
|
return form.loadSearch(argument, context);
|
|
2618
2618
|
}
|
|
@@ -2626,7 +2626,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2626
2626
|
h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
|
|
2627
2627
|
case 'DATE':
|
|
2628
2628
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
2629
|
-
h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
2629
|
+
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 }));
|
|
2630
2630
|
case 'DECIMALNUMBER':
|
|
2631
2631
|
case 'INTEGERNUMBER':
|
|
2632
2632
|
let precision = 0;
|
|
@@ -2636,11 +2636,11 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2636
2636
|
prettyPrecision = Number(getProp(properties, "prettyprecision") || precision);
|
|
2637
2637
|
}
|
|
2638
2638
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
2639
|
-
h("ez-numeric-input", { value: !value ? null : value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']),
|
|
2639
|
+
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 }));
|
|
2640
2640
|
//IMAGE, DATETIME, ELAPSEDTIME, PASSWORD, MASKEDTEXT, HTML
|
|
2641
2641
|
default:
|
|
2642
2642
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
2643
|
-
h("ez-text-input", { value: value, label: formattedLabel, enabled: isEnabled, loading: loadingData, onInput: (event) => changeFieldHandler(event.target['value']),
|
|
2643
|
+
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 }));
|
|
2644
2644
|
}
|
|
2645
2645
|
};
|
|
2646
2646
|
function getProp(properties, name) {
|
|
@@ -2960,12 +2960,14 @@ let EzForm = class {
|
|
|
2960
2960
|
};
|
|
2961
2961
|
EzForm.style = ezFormCss;
|
|
2962
2962
|
|
|
2963
|
-
const ezIconCss = ":host{display:block;overflow:hidden;position:relative}svg{display:flex;justify-content:center;align-items:center;fill:var(--color
|
|
2963
|
+
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}";
|
|
2964
2964
|
|
|
2965
2965
|
let EzIcon = class {
|
|
2966
2966
|
constructor(hostRef) {
|
|
2967
2967
|
registerInstance(this, hostRef);
|
|
2968
|
-
|
|
2968
|
+
/**
|
|
2969
|
+
* Tamanho do ícone
|
|
2970
|
+
*/
|
|
2969
2971
|
this.size = 'medium';
|
|
2970
2972
|
}
|
|
2971
2973
|
isSprite() {
|
|
@@ -2996,7 +2998,7 @@ let EzNumericInput = class {
|
|
|
2996
2998
|
this._textInput.label = this.label;
|
|
2997
2999
|
}
|
|
2998
3000
|
setErrorMessage() {
|
|
2999
|
-
this._textInput.
|
|
3001
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
3000
3002
|
}
|
|
3001
3003
|
applyValueToInput() {
|
|
3002
3004
|
if (this._textInput) {
|
|
@@ -3004,7 +3006,7 @@ let EzNumericInput = class {
|
|
|
3004
3006
|
}
|
|
3005
3007
|
}
|
|
3006
3008
|
changeValue(newValue) {
|
|
3007
|
-
this._textInput.
|
|
3009
|
+
this._textInput.errorMessage = "";
|
|
3008
3010
|
if (newValue !== this.value) {
|
|
3009
3011
|
this.value = newValue;
|
|
3010
3012
|
this.ezChange.emit();
|
|
@@ -3013,7 +3015,7 @@ let EzNumericInput = class {
|
|
|
3013
3015
|
parseNumber() {
|
|
3014
3016
|
const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : null;
|
|
3015
3017
|
if (parsedNumber != null && isNaN(parsedNumber)) {
|
|
3016
|
-
this._textInput.
|
|
3018
|
+
this._textInput.errorMessage = "O valor digitado não é um número válido";
|
|
3017
3019
|
}
|
|
3018
3020
|
else {
|
|
3019
3021
|
this.changeValue(parsedNumber);
|
|
@@ -3026,11 +3028,11 @@ let EzNumericInput = class {
|
|
|
3026
3028
|
return null;
|
|
3027
3029
|
}
|
|
3028
3030
|
render() {
|
|
3029
|
-
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,
|
|
3031
|
+
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 }));
|
|
3030
3032
|
}
|
|
3031
3033
|
static get watchers() { return {
|
|
3032
3034
|
"label": ["setLabel"],
|
|
3033
|
-
"
|
|
3035
|
+
"errorMessage": ["setErrorMessage"],
|
|
3034
3036
|
"value": ["applyValueToInput"]
|
|
3035
3037
|
}; }
|
|
3036
3038
|
};
|
|
@@ -3067,7 +3069,7 @@ let EzSearch = class {
|
|
|
3067
3069
|
this.ezChange.emit(evt.detail);
|
|
3068
3070
|
}
|
|
3069
3071
|
render() {
|
|
3070
|
-
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled,
|
|
3072
|
+
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 }));
|
|
3071
3073
|
}
|
|
3072
3074
|
;
|
|
3073
3075
|
static get watchers() { return {
|
|
@@ -3290,12 +3292,12 @@ let EzTextArea = class {
|
|
|
3290
3292
|
*/
|
|
3291
3293
|
this.enabled = true;
|
|
3292
3294
|
/**
|
|
3293
|
-
* Ajusta o
|
|
3295
|
+
* Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
|
|
3294
3296
|
*/
|
|
3295
3297
|
this.rows = 4;
|
|
3296
3298
|
}
|
|
3297
3299
|
showError() {
|
|
3298
|
-
const hasError = typeof this.
|
|
3300
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
3299
3301
|
if (hasError) {
|
|
3300
3302
|
this._container.classList.add('hasError');
|
|
3301
3303
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -3375,21 +3377,17 @@ let EzTextArea = class {
|
|
|
3375
3377
|
render() {
|
|
3376
3378
|
return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label ?
|
|
3377
3379
|
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)
|
|
3378
|
-
: 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.
|
|
3380
|
+
: 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)));
|
|
3379
3381
|
}
|
|
3380
3382
|
get _hostElement() { return getElement(this); }
|
|
3381
3383
|
static get watchers() { return {
|
|
3382
|
-
"
|
|
3384
|
+
"errorMessage": ["showError"],
|
|
3383
3385
|
"value": ["updateInputValue"]
|
|
3384
3386
|
}; }
|
|
3385
3387
|
};
|
|
3386
3388
|
EzTextArea.style = ezTextAreaCss;
|
|
3387
3389
|
|
|
3388
|
-
|
|
3389
|
-
return strValue && /^-?\d*[.,]?\d*$/.test(strValue);
|
|
3390
|
-
}
|
|
3391
|
-
|
|
3392
|
-
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}";
|
|
3390
|
+
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}";
|
|
3393
3391
|
|
|
3394
3392
|
let EzTextInput = class {
|
|
3395
3393
|
constructor(hostRef) {
|
|
@@ -3401,7 +3399,7 @@ let EzTextInput = class {
|
|
|
3401
3399
|
this.enabled = true;
|
|
3402
3400
|
}
|
|
3403
3401
|
showError() {
|
|
3404
|
-
const hasError = typeof this.
|
|
3402
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
3405
3403
|
if (hasError) {
|
|
3406
3404
|
this._inputElem.classList.add('hasError');
|
|
3407
3405
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -3476,16 +3474,13 @@ let EzTextInput = class {
|
|
|
3476
3474
|
this._inputElem.value = this._maskFormatter.format(value);
|
|
3477
3475
|
}
|
|
3478
3476
|
catch (e) {
|
|
3479
|
-
this.
|
|
3477
|
+
this.errorMessage = e.message;
|
|
3480
3478
|
}
|
|
3481
3479
|
}
|
|
3482
3480
|
this.value = this._inputElem.value;
|
|
3483
3481
|
this.adjustFloatingLabel();
|
|
3484
3482
|
}
|
|
3485
3483
|
isValidValue(value) {
|
|
3486
|
-
if (this.onlynumber) {
|
|
3487
|
-
return value == "" || isValidNumber(value);
|
|
3488
|
-
}
|
|
3489
3484
|
if (this.restrict) {
|
|
3490
3485
|
return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
|
|
3491
3486
|
}
|
|
@@ -3514,11 +3509,11 @@ let EzTextInput = class {
|
|
|
3514
3509
|
content.style.justifyContent = "center";
|
|
3515
3510
|
content.style.overflow = "hidden";
|
|
3516
3511
|
content.style.top = "0px";
|
|
3517
|
-
content.style.width = "var(--
|
|
3518
|
-
content.style.height = "var(--
|
|
3512
|
+
content.style.width = "var(--text-input__icon--width)";
|
|
3513
|
+
content.style.height = "var(--text-input--height)";
|
|
3519
3514
|
if (slot.name == "leftIcon") {
|
|
3520
3515
|
content.style.left = "0px";
|
|
3521
|
-
content.style.borderRadius = "var(--
|
|
3516
|
+
content.style.borderRadius = "var(--text-input--border-radius) 0 0 var(--text-input--border-radius)";
|
|
3522
3517
|
this._inputElem.classList.add('icon--left');
|
|
3523
3518
|
if (this._labelElem) {
|
|
3524
3519
|
this._labelElem.classList.add('input__label--left');
|
|
@@ -3526,7 +3521,7 @@ let EzTextInput = class {
|
|
|
3526
3521
|
}
|
|
3527
3522
|
else if (slot.name == "rightIcon") {
|
|
3528
3523
|
content.style.right = "0px";
|
|
3529
|
-
content.style.borderRadius = "0 var(--
|
|
3524
|
+
content.style.borderRadius = "0 var(--text-input--border-radius) var(--text-input--border-radius) 0";
|
|
3530
3525
|
this._inputElem.classList.add('icon--right');
|
|
3531
3526
|
if (this._labelElem) {
|
|
3532
3527
|
this._labelElem.classList.add('input__label--right');
|
|
@@ -3544,9 +3539,6 @@ let EzTextInput = class {
|
|
|
3544
3539
|
// Lifecycle web component
|
|
3545
3540
|
//---------------------------------------------
|
|
3546
3541
|
componentDidLoad() {
|
|
3547
|
-
if (this.onlynumber) {
|
|
3548
|
-
this._inputElem.classList.add('text--right');
|
|
3549
|
-
}
|
|
3550
3542
|
this.showError();
|
|
3551
3543
|
this.prepareMask();
|
|
3552
3544
|
this.adjustFloatingLabel();
|
|
@@ -3559,7 +3551,7 @@ let EzTextInput = class {
|
|
|
3559
3551
|
this.value = this._maskFormatter.format(this.value);
|
|
3560
3552
|
}
|
|
3561
3553
|
catch (e) {
|
|
3562
|
-
this.
|
|
3554
|
+
this.errorMessage = e.message;
|
|
3563
3555
|
}
|
|
3564
3556
|
}
|
|
3565
3557
|
if (!this.isValidValue(this.value)) {
|
|
@@ -3571,11 +3563,11 @@ let EzTextInput = class {
|
|
|
3571
3563
|
render() {
|
|
3572
3564
|
return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
|
|
3573
3565
|
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)
|
|
3574
|
-
: 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.
|
|
3566
|
+
: 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)));
|
|
3575
3567
|
}
|
|
3576
3568
|
get _hostElement() { return getElement(this); }
|
|
3577
3569
|
static get watchers() { return {
|
|
3578
|
-
"
|
|
3570
|
+
"errorMessage": ["showError"],
|
|
3579
3571
|
"mask": ["prepareMask"],
|
|
3580
3572
|
"value": ["updateInputValue"]
|
|
3581
3573
|
}; }
|
|
@@ -42,6 +42,9 @@ let EzDialog = class {
|
|
|
42
42
|
this._currentMessage = this._messageQueue.shift();
|
|
43
43
|
forceUpdate(this);
|
|
44
44
|
}
|
|
45
|
+
/**
|
|
46
|
+
* Faz com que o componente seja exibido.
|
|
47
|
+
*/
|
|
45
48
|
async show(title, message, critical, confirm, icon) {
|
|
46
49
|
this.opened = true;
|
|
47
50
|
return new Promise(resolve => {
|
|
@@ -36,7 +36,7 @@ let NumberInput = class {
|
|
|
36
36
|
this.checkNumberValidation = (valuePtBRorNumber) => {
|
|
37
37
|
try {
|
|
38
38
|
if (valuePtBRorNumber != "" && NumberUtils.format(valuePtBRorNumber, this.precision, this.prettyprecision) === "NaN") {
|
|
39
|
-
this.
|
|
39
|
+
this.errorMessage = `Valor não é um número válido`;
|
|
40
40
|
this.value = undefined;
|
|
41
41
|
this.strvalue = undefined;
|
|
42
42
|
if (this._inputElem) {
|
|
@@ -46,14 +46,14 @@ let NumberInput = class {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
catch (err) {
|
|
49
|
-
this.
|
|
49
|
+
this.errorMessage = err.message;
|
|
50
50
|
return false;
|
|
51
51
|
}
|
|
52
52
|
return true;
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
55
|
showError() {
|
|
56
|
-
const hasError = typeof this.
|
|
56
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
57
57
|
if (this._inputElem) {
|
|
58
58
|
if (hasError) {
|
|
59
59
|
this._inputElem.classList.add('hasError');
|
|
@@ -81,7 +81,7 @@ let NumberInput = class {
|
|
|
81
81
|
if (isNaN(newValue) && newValue !== undefined) {
|
|
82
82
|
this.value = undefined;
|
|
83
83
|
this.strvalue = "";
|
|
84
|
-
this.
|
|
84
|
+
this.errorMessage = `Valor não é um número válido`;
|
|
85
85
|
this.adjustFloatingLabel();
|
|
86
86
|
}
|
|
87
87
|
else {
|
|
@@ -127,7 +127,7 @@ let NumberInput = class {
|
|
|
127
127
|
async handleFocusout() {
|
|
128
128
|
//Setting value and strvalue by stringinput
|
|
129
129
|
if (this._inputElem) {
|
|
130
|
-
this.
|
|
130
|
+
this.errorMessage = "";
|
|
131
131
|
if (this._inputElem.value !== "") {
|
|
132
132
|
this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
|
|
133
133
|
const value = NumberUtils.keepOnlyDecimalSeparator(this._inputElem.value, this.formatnumber.toUpperCase());
|
|
@@ -139,7 +139,7 @@ let NumberInput = class {
|
|
|
139
139
|
this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
|
|
140
140
|
}
|
|
141
141
|
catch (e) {
|
|
142
|
-
this.
|
|
142
|
+
this.errorMessage = e.message;
|
|
143
143
|
return;
|
|
144
144
|
}
|
|
145
145
|
}
|
|
@@ -194,7 +194,7 @@ let NumberInput = class {
|
|
|
194
194
|
this._inputElem.value = this.formatnumber.toUpperCase() !== "EN-US" ? NumberUtils.format(value, this.precision, this.prettyprecision) : NumberUtils.changeFormat(NumberUtils.format(value, this.precision, this.prettyprecision));
|
|
195
195
|
}
|
|
196
196
|
catch (e) {
|
|
197
|
-
this.
|
|
197
|
+
this.errorMessage = e.message;
|
|
198
198
|
return;
|
|
199
199
|
}
|
|
200
200
|
this.strvalue = this._inputElem.value;
|
|
@@ -231,11 +231,11 @@ let NumberInput = class {
|
|
|
231
231
|
}
|
|
232
232
|
render() {
|
|
233
233
|
const labelInput = this.label ? h("label", { onClick: () => this._inputElem.focus(), class: "input__label", ref: (el) => this._labelElem = el }, this.label) : null;
|
|
234
|
-
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.
|
|
234
|
+
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)));
|
|
235
235
|
}
|
|
236
236
|
get el() { return getElement(this); }
|
|
237
237
|
static get watchers() { return {
|
|
238
|
-
"
|
|
238
|
+
"errorMessage": ["showError"],
|
|
239
239
|
"precision": ["onPrecisionChanged"],
|
|
240
240
|
"prettyprecision": ["onPrettyPrecisionChanged"],
|
|
241
241
|
"value": ["onValueChanged"]
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
|
|
|
2
2
|
import './RequestMetadata-c265c9d5.js';
|
|
3
3
|
import { F as FloatingManager } from './FloatingManager-bb90ef41.js';
|
|
4
4
|
|
|
5
|
-
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:
|
|
5
|
+
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%}";
|
|
6
6
|
|
|
7
7
|
let EzPopover = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -58,8 +58,6 @@ let EzPopover = class {
|
|
|
58
58
|
if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
|
|
59
59
|
return true;
|
|
60
60
|
}
|
|
61
|
-
//Here: we pass this._box as parameter but we need to change to _host
|
|
62
|
-
//because we need to get the lasChild (inner content to put in slot)
|
|
63
61
|
_container = this._host;
|
|
64
62
|
return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
|
|
65
63
|
}
|
|
@@ -84,8 +82,6 @@ let EzPopover = class {
|
|
|
84
82
|
if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
|
|
85
83
|
return true;
|
|
86
84
|
}
|
|
87
|
-
// Here: we pass this._box as parameter but we need to change to _host
|
|
88
|
-
// because we need to get the lasChild (inner content to put in slot)
|
|
89
85
|
_container = this._host;
|
|
90
86
|
return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
|
|
91
87
|
}
|
|
@@ -16,7 +16,7 @@ let EzTimeInput = class {
|
|
|
16
16
|
this.showSeconds = false;
|
|
17
17
|
}
|
|
18
18
|
showError() {
|
|
19
|
-
const hasError = typeof this.
|
|
19
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
20
20
|
if (hasError) {
|
|
21
21
|
this._inputElem.classList.add('hasError');
|
|
22
22
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -92,11 +92,11 @@ let EzTimeInput = class {
|
|
|
92
92
|
// Event handlers
|
|
93
93
|
//---------------------------------------------
|
|
94
94
|
handleFocusout() {
|
|
95
|
-
this.
|
|
95
|
+
this.errorMessage = "";
|
|
96
96
|
this.prepareValue(this.viewValue);
|
|
97
97
|
if (!TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
|
|
98
98
|
this.clearField();
|
|
99
|
-
this.
|
|
99
|
+
this.errorMessage = "Favor inserir um horário válido.";
|
|
100
100
|
}
|
|
101
101
|
this.adjustFloatingLabel();
|
|
102
102
|
}
|
|
@@ -106,7 +106,7 @@ let EzTimeInput = class {
|
|
|
106
106
|
}
|
|
107
107
|
catch (e) {
|
|
108
108
|
this.clearField();
|
|
109
|
-
this.
|
|
109
|
+
this.errorMessage = e.message;
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
clearField() {
|
|
@@ -163,10 +163,10 @@ let EzTimeInput = class {
|
|
|
163
163
|
render() {
|
|
164
164
|
return (h(Host, null, h("ez-icon", { ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#timer-outline" }), this.label ?
|
|
165
165
|
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)
|
|
166
|
-
: 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.
|
|
166
|
+
: 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)));
|
|
167
167
|
}
|
|
168
168
|
static get watchers() { return {
|
|
169
|
-
"
|
|
169
|
+
"errorMessage": ["showError"],
|
|
170
170
|
"showSeconds": ["prepareMask"],
|
|
171
171
|
"value": ["onValueChanged"]
|
|
172
172
|
}; }
|