@sankhyalabs/ezui 1.1.67 → 1.1.70
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 +133 -144
- package/dist/cjs/ez-dialog.cjs.entry.js +7 -1
- package/dist/cjs/ez-modal.cjs.entry.js +16 -69
- package/dist/cjs/ez-number-input.cjs.entry.js +9 -9
- package/dist/cjs/ez-popover.cjs.entry.js +13 -18
- package/dist/cjs/ez-popup.cjs.entry.js +2 -2
- 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 +48 -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.css +46 -44
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +38 -39
- package/dist/collection/components/ez-date-input/ez-date-input.js +9 -9
- package/dist/collection/components/ez-dialog/ez-dialog.css +43 -43
- package/dist/collection/components/ez-dialog/ez-dialog.js +10 -4
- package/dist/collection/components/ez-form/subcomponents/structure/Field.js +6 -6
- package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +1 -1
- 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 +30 -83
- 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 +4 -5
- package/dist/collection/components/ez-popover/ez-popover.js +25 -30
- package/dist/collection/components/ez-popup/ez-popup.css +7 -7
- package/dist/collection/components/ez-popup/ez-popup.js +4 -4
- package/dist/collection/components/ez-search/ez-search.js +5 -5
- package/dist/collection/components/ez-tabselector/ez-tabselector.css +7 -10
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +68 -70
- 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 +198 -261
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +133 -144
- package/dist/esm/ez-dialog.entry.js +7 -1
- package/dist/esm/ez-modal.entry.js +16 -69
- package/dist/esm/ez-number-input.entry.js +9 -9
- package/dist/esm/ez-popover.entry.js +13 -18
- package/dist/esm/ez-popup.entry.js +2 -2
- package/dist/esm/ez-time-input.entry.js +6 -6
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-1bc9ddad.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-a7e23f65.entry.js +1 -0
- package/dist/ezui/p-a88ee12f.entry.js +1 -0
- package/dist/ezui/p-b692a0ab.entry.js +1 -0
- package/dist/ezui/p-b6e0fd3e.entry.js +1 -0
- 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 +8 -8
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +2 -2
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +8 -2
- 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 +9 -9
- 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-popover/ez-popover.d.ts +4 -5
- package/dist/types/components/ez-popup/ez-popup.d.ts +3 -3
- package/dist/types/components/ez-search/ez-search.d.ts +3 -3
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +19 -10
- 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 +142 -114
- package/package.json +2 -1
- package/dist/ezui/p-7c7dbfcb.entry.js +0 -1
- package/dist/ezui/p-8c8f1c00.entry.js +0 -1
- package/dist/ezui/p-afc553a4.entry.js +0 -1
- package/dist/ezui/p-d185d7e8.entry.js +0 -1
- package/dist/ezui/p-ee5058c1.entry.js +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createEvent, h, forceUpdate, Host, proxyCustomElement } from '@stencil/core/internal/client';
|
|
2
2
|
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|
|
3
3
|
|
|
4
|
-
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)
|
|
4
|
+
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)}";
|
|
5
5
|
|
|
6
6
|
let EzLabelChip$2 = class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -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--primary, #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(--background--medium, #c0c0c0);--button--border-radius:var(--border--radius-large, 12px);--button--border:none;--button--hover--background-color:var(--background--strong, var(--button--background-color));--button--disabled-color:var(--text--disable);--button--disabled--background-color:var(--color--disable-secondary);--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;--icon--color:#ffffff}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() {
|
|
@@ -40,15 +40,15 @@ let EzButton$1 = class extends HTMLElement {
|
|
|
40
40
|
this.mode = "regular";
|
|
41
41
|
}
|
|
42
42
|
handleSlotChange(ev) {
|
|
43
|
-
const slot = ev.target;
|
|
44
|
-
const content = slot.assignedElements()[0];
|
|
45
43
|
if (this.mode == "link") {
|
|
44
|
+
const slot = ev.target;
|
|
45
|
+
const content = slot.assignedElements()[0];
|
|
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() {
|
|
@@ -884,12 +884,12 @@ let EzCheck$1 = class extends HTMLElement {
|
|
|
884
884
|
this.__attachShadow();
|
|
885
885
|
this.ezChange = createEvent(this, "ezChange", 7);
|
|
886
886
|
/**
|
|
887
|
-
* Deixa o campo disponível ou não
|
|
887
|
+
* Deixa o campo disponível ou não para interação com o usuário.
|
|
888
888
|
*/
|
|
889
889
|
this.enabled = true;
|
|
890
890
|
/**
|
|
891
891
|
* Existem dois modos de visualização: regular e switch.
|
|
892
|
-
* Se esta propriedade for omitida, o componete assume o formato "regular"
|
|
892
|
+
* Se esta propriedade for omitida, o componete assume o formato "regular".
|
|
893
893
|
* No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
|
|
894
894
|
* No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
|
|
895
895
|
*/
|
|
@@ -930,12 +930,12 @@ let EzCheck$1 = class extends HTMLElement {
|
|
|
930
930
|
getLabelClasses() {
|
|
931
931
|
let classes = "label";
|
|
932
932
|
if (!this.enabled) {
|
|
933
|
-
classes
|
|
933
|
+
classes += " label--disabled";
|
|
934
934
|
}
|
|
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"]
|
|
@@ -985,7 +985,7 @@ let EzCollapsibleBox$1 = class extends HTMLElement {
|
|
|
985
985
|
static get style() { return ezCollapsibleBoxCss; }
|
|
986
986
|
};
|
|
987
987
|
|
|
988
|
-
const ezComboBoxCss = ":host{--
|
|
988
|
+
const ezComboBoxCss = ":host{--combo-box--height:42px;--combo-box--width:100%;--combo-box__icon--width:48px;--combo-box--border-radius:var(--border--radius-medium, 12px);--combo-box--border-radius-small:var(--border--radius-small, 6px);--combo-box--font-size:var(--text--medium, 14px);--combo-box--font-family:var(--font-pattern, Arial);--combo-box--font-weight--large:var(--text-weight--large, 500);--combo-box--font-weight--medium:var(--text-weight--medium, 400);--combo-box--background-color--xlight:var(--background--xlight, #fff);--combo-box__input--background-color:var(--background--medium, #e0e0e0);--combo-box__input--border:var(--border--medium, 2px solid);--combo-box__input--border-color:var(--combo-box__input--background-color);--combo-box__input--focus--border-color:var(--color--primary, #008561);--combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--combo-box__input--error--border-color:#CC2936;--combo-box__label--color:var(--title--primary, #919191);--combo-box__list-text--primary:var(--text--primary, #626e82);--combo-box__list-height:calc(var(--combo-box--font-size) + var(--combo-box--space--medium));--combo-box--drop-down__image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"16px\"><path d=\"M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z\"/></svg>');--combo-box--search__image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"22px\" width=\"22px\"><path d=\"m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z\"/></svg>');--combo-box--space--medium:var(--space--medium, 12px);--combo-box--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--combo-box--width)}ez-text-input{--it__input--background-color:var(--combo-box__input--background-color, #FFFFFF);--it__input--border-color:var(--combo-box__input--border-color, #DCE0E8)}.list-container{position:relative;width:100%}.options-list{box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--combo-box--background-color--xlight);padding:var(--combo-box--space--small);border-radius:var(--combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);scroll-behavior:smooth;max-height:calc(4*var(--combo-box__list-height) + 2*var(--combo-box--space--small));overflow:auto}.item{text-align:left;display:flex;justify-content:space-between;align-items:center;border-radius:var(--combo-box--border-radius-small);padding:0 var(--combo-box--space--small);list-style-type:none;min-height:var(--combo-box__list-height)}.item--label{text-align:left;flex-basis:85%;flex-grow:1;color:var(--combo-box__list-text--primary);font-weight:var(--combo-box--font-weight--large);font-family:var(--combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item--value{text-align:right;flex-basis:15%;flex-grow:0;color:var(--combo-box__list-text--primary);font-weight:var(--combo-box--font-weight--large);font-family:var(--combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li:hover{background-color:var(--background--medium)}.preselected{background-color:var(--background--medium)}.btn-open-options{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-options:disabled{cursor:unset}.btn-open-options::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:16px;height:16px;-webkit-mask-image:var(--combo-box--drop-down__image);mask-image:var(--combo-box--drop-down__image)}.btn-open-options:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-options:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}.btn-open-search{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-search:disabled{cursor:unset}.btn-open-search::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:22px;height:22px;-webkit-mask-image:var(--combo-box--search__image);mask-image:var(--combo-box--search__image)}.btn-open-search:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-search:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}";
|
|
989
989
|
|
|
990
990
|
let EzComboBox$1 = class extends HTMLElement {
|
|
991
991
|
constructor() {
|
|
@@ -1000,11 +1000,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1000
1000
|
/**
|
|
1001
1001
|
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
1002
1002
|
*/
|
|
1003
|
-
this.
|
|
1003
|
+
this.showSelectedValue = false;
|
|
1004
1004
|
/**
|
|
1005
1005
|
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
1006
1006
|
*/
|
|
1007
|
-
this.
|
|
1007
|
+
this.showOptionValue = false;
|
|
1008
1008
|
}
|
|
1009
1009
|
internalUpdate() {
|
|
1010
1010
|
if (this._inputElement) {
|
|
@@ -1016,29 +1016,29 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1016
1016
|
this.updateVisibleOptions();
|
|
1017
1017
|
}
|
|
1018
1018
|
getText() {
|
|
1019
|
-
let text =
|
|
1019
|
+
let text = "";
|
|
1020
1020
|
const selected = this.getSelectedOption();
|
|
1021
1021
|
if (selected) {
|
|
1022
|
-
text = this.
|
|
1022
|
+
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
1023
1023
|
}
|
|
1024
1024
|
return text;
|
|
1025
1025
|
}
|
|
1026
1026
|
getSelectedOption() {
|
|
1027
|
-
if (typeof this.value ===
|
|
1027
|
+
if (typeof this.value === "string" || this.value instanceof String) {
|
|
1028
1028
|
return this._visibleOptions.find(o => o.value === this.value);
|
|
1029
1029
|
}
|
|
1030
1030
|
return this.value;
|
|
1031
1031
|
}
|
|
1032
1032
|
updateVisibleOptions() {
|
|
1033
1033
|
let opts = this._source || [];
|
|
1034
|
-
if (!this.
|
|
1034
|
+
if (!this.searchMode && this._criteria) {
|
|
1035
1035
|
const upperCriteria = this._criteria.toUpperCase();
|
|
1036
1036
|
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
1037
1037
|
}
|
|
1038
|
-
this._visibleOptions = [{ value:
|
|
1038
|
+
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
1039
1039
|
}
|
|
1040
1040
|
buildItem(opt, index) {
|
|
1041
|
-
return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, h("span", { class: "item--label", title: opt.label }, opt.label), this.
|
|
1041
|
+
return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, h("span", { class: "item--label", title: opt.label }, opt.label), this.showOptionValue ? h("span", { class: "item--value", title: opt.value }, opt.value) : undefined);
|
|
1042
1042
|
}
|
|
1043
1043
|
showOptions() {
|
|
1044
1044
|
if (!this.enabled) {
|
|
@@ -1047,10 +1047,10 @@ 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
|
-
this._optionsList.scrollIntoView({ behavior:
|
|
1053
|
+
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
1054
1054
|
});
|
|
1055
1055
|
}
|
|
1056
1056
|
hideOptions() {
|
|
@@ -1063,7 +1063,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1063
1063
|
return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
|
|
1064
1064
|
}
|
|
1065
1065
|
nextOption() {
|
|
1066
|
-
if (this.
|
|
1066
|
+
if (this.searchMode && !this.isOptionsVisible()) {
|
|
1067
1067
|
return;
|
|
1068
1068
|
}
|
|
1069
1069
|
this.showOptions();
|
|
@@ -1099,7 +1099,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1099
1099
|
selectOption(opt) {
|
|
1100
1100
|
const currentOpt = this.getSelectedOption();
|
|
1101
1101
|
if (currentOpt !== opt) {
|
|
1102
|
-
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ?
|
|
1102
|
+
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
1103
1103
|
this.value = adjustedOpt;
|
|
1104
1104
|
this.ezChange.emit(adjustedOpt);
|
|
1105
1105
|
}
|
|
@@ -1117,10 +1117,10 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1117
1117
|
this.updateVisibleOptions();
|
|
1118
1118
|
}
|
|
1119
1119
|
}
|
|
1120
|
-
loadOptions(mode, argument =
|
|
1120
|
+
loadOptions(mode, argument = "") {
|
|
1121
1121
|
this._criteria = argument;
|
|
1122
|
-
if (this.
|
|
1123
|
-
this.updateSource(this.
|
|
1122
|
+
if (this.optionLoader) {
|
|
1123
|
+
this.updateSource(this.optionLoader({ mode, argument }));
|
|
1124
1124
|
}
|
|
1125
1125
|
else {
|
|
1126
1126
|
this.updateSource(this.options);
|
|
@@ -1128,7 +1128,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1128
1128
|
}
|
|
1129
1129
|
cancelPreselection() {
|
|
1130
1130
|
if (!this._inputElement.value && this.value) {
|
|
1131
|
-
this.selectOption(
|
|
1131
|
+
this.selectOption(undefined);
|
|
1132
1132
|
}
|
|
1133
1133
|
else {
|
|
1134
1134
|
this.internalUpdate();
|
|
@@ -1140,11 +1140,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1140
1140
|
componentWillLoad() {
|
|
1141
1141
|
if (this.options === undefined) {
|
|
1142
1142
|
this.options = [];
|
|
1143
|
-
const optionsTags = this.el.querySelectorAll(
|
|
1143
|
+
const optionsTags = this.el.querySelectorAll("option");
|
|
1144
1144
|
if (optionsTags) {
|
|
1145
1145
|
optionsTags.forEach(e => {
|
|
1146
1146
|
let label = e.innerText;
|
|
1147
|
-
let value = e.getAttribute(
|
|
1147
|
+
let value = e.getAttribute("value");
|
|
1148
1148
|
if (!value) {
|
|
1149
1149
|
value = label;
|
|
1150
1150
|
}
|
|
@@ -1153,11 +1153,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1153
1153
|
});
|
|
1154
1154
|
}
|
|
1155
1155
|
}
|
|
1156
|
-
if (this.
|
|
1156
|
+
if (this.searchMode) {
|
|
1157
1157
|
this.updateSource([]);
|
|
1158
1158
|
}
|
|
1159
1159
|
else {
|
|
1160
|
-
this.loadOptions(
|
|
1160
|
+
this.loadOptions("PRELOAD");
|
|
1161
1161
|
}
|
|
1162
1162
|
}
|
|
1163
1163
|
componentDidRender() {
|
|
@@ -1175,13 +1175,12 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1175
1175
|
const argument = event.target.value;
|
|
1176
1176
|
this._criteria = argument;
|
|
1177
1177
|
if (this._criteria) {
|
|
1178
|
-
if (this.
|
|
1178
|
+
if (this.searchMode) {
|
|
1179
1179
|
if (this._changeDeboucingTimeout) {
|
|
1180
1180
|
window.clearTimeout(this._changeDeboucingTimeout);
|
|
1181
1181
|
}
|
|
1182
1182
|
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
1183
|
-
|
|
1184
|
-
this.loadOptions('PREDICTIVE', argument);
|
|
1183
|
+
this.loadOptions("PREDICTIVE", argument);
|
|
1185
1184
|
}, 200);
|
|
1186
1185
|
}
|
|
1187
1186
|
else {
|
|
@@ -1191,7 +1190,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1191
1190
|
}
|
|
1192
1191
|
}
|
|
1193
1192
|
onTextInputClickHandler() {
|
|
1194
|
-
if (!this.
|
|
1193
|
+
if (!this.searchMode) {
|
|
1195
1194
|
this.showOptions();
|
|
1196
1195
|
}
|
|
1197
1196
|
}
|
|
@@ -1216,8 +1215,8 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1216
1215
|
this.cancelPreselection();
|
|
1217
1216
|
}
|
|
1218
1217
|
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(),
|
|
1220
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions(
|
|
1218
|
+
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 ?
|
|
1219
|
+
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
1221
1220
|
:
|
|
1222
1221
|
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))))));
|
|
1223
1222
|
}
|
|
@@ -1245,7 +1244,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1245
1244
|
this._textInput.label = this.label;
|
|
1246
1245
|
}
|
|
1247
1246
|
setErrorMessage() {
|
|
1248
|
-
this._textInput.
|
|
1247
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
1249
1248
|
}
|
|
1250
1249
|
applyValueToInput() {
|
|
1251
1250
|
if (this._textInput) {
|
|
@@ -1254,7 +1253,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1254
1253
|
}
|
|
1255
1254
|
changeValue(newValue) {
|
|
1256
1255
|
newValue = newValue == null ? null : DateUtils.clearTime(newValue);
|
|
1257
|
-
this._textInput.
|
|
1256
|
+
this._textInput.errorMessage = "";
|
|
1258
1257
|
if (this.getTextValue(newValue) !== this.getTextValue(this.value)) {
|
|
1259
1258
|
this.value = newValue;
|
|
1260
1259
|
this.ezChange.emit();
|
|
@@ -1266,7 +1265,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1266
1265
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
1267
1266
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
1268
1267
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
1269
|
-
const top = this._textInput.
|
|
1268
|
+
const top = this._textInput.errorMessage ? 0 : -17;
|
|
1270
1269
|
this._calendar.fitVertical(top, this._elem.clientHeight);
|
|
1271
1270
|
}
|
|
1272
1271
|
hideCalendar() {
|
|
@@ -1285,7 +1284,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1285
1284
|
}
|
|
1286
1285
|
}
|
|
1287
1286
|
else {
|
|
1288
|
-
this._textInput.
|
|
1287
|
+
this._textInput.errorMessage = "O valor digitado não é uma data válida";
|
|
1289
1288
|
}
|
|
1290
1289
|
}
|
|
1291
1290
|
getTextValue(d) {
|
|
@@ -1295,18 +1294,18 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1295
1294
|
return (h(Host, null, h("ez-text-input", { class: "text-input", ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
|
|
1296
1295
|
if (event.key === 'H' || event.key === 'h')
|
|
1297
1296
|
this.changeValue(new Date());
|
|
1298
|
-
}, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled,
|
|
1297
|
+
}, 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
1298
|
}
|
|
1300
1299
|
get _elem() { return this; }
|
|
1301
1300
|
static get watchers() { return {
|
|
1302
1301
|
"label": ["setLabel"],
|
|
1303
|
-
"
|
|
1302
|
+
"errorMessage": ["setErrorMessage"],
|
|
1304
1303
|
"value": ["applyValueToInput"]
|
|
1305
1304
|
}; }
|
|
1306
1305
|
static get style() { return ezDateInputCss; }
|
|
1307
1306
|
};
|
|
1308
1307
|
|
|
1309
|
-
const ezDialogCss = ":host{--
|
|
1308
|
+
const ezDialogCss = ":host{--dialog__container-padding:var(--space--large, 24px);--dialog__btn__close--background-color:var(--title--primary, #2b3a54);--dialog__btn__no--padding-right:var(--space--large, 24px);--dialog__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--dialog__title--font-pattern:var(--font-pattern, \"'Sora', 'Algerian'\");--dialog__title--padding-left:var(--space--small, 6px);--dialog__title__container--padding-bottom:var(--space--medium, 12px);--dialog__title--weight--large:var(--text-weight--large, 600);--dialog__body--font-pattern:var(--font-pattern, \"'Sora', 'Algerian'\");--dialog__body--text-shadow:var(--text-shadow, \"0 0 0 #353535, 0 0 1px transparent\");--dialog__body--text-weight--medium:var(--text-weight--medium, 400);--dialog__body--padding-bottom:var(--space--large, 24px);--dialog__body--font-size:var(--text--medium, 14px);--dialog__body--color:var(--text--primary, #626e82);--dialog__critical--background-color:var(--color--alert-error-800, #BD0025);--dialog__warning--background-color:var(--color--alert-warning-500, #EFB103);--dialog-z-index:var(--most-visible, 3);--dialog--warning__image:url('data: image/svg+xml;utf8,<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 7.5,0 0,13 h 15 z m 0,2.73684 5.1341,8.89476 H 2.36591 Z M 6.81818,5.47368 V 8.21053 H 8.18182 V 5.47368 Z m 0,4.10527 V 10.9474 H 8.18182 V 9.57895\"/></svg>');--dialog--critical__image:url('data: image/svg+xml;utf8,<svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 7.6534493,6.4948538 12.762051,1.3864299 C 12.914368,1.2341297 13,1.027552 13,0.81215179 13,0.59676225 12.914369,0.39018443 12.762051,0.23787352 12.609733,0.08557341 12.40318,0 12.187747,0 11.972425,0 11.765762,0.08557341 11.613445,0.23787352 L 6.5048431,5.3462975 1.3961977,0.23787352 C 1.2438802,0.08557341 1.0373043,0 0.82189458,0 0.60649572,0 0.39990901,0.08557341 0.24759147,0.23787352 0.09527396,0.39018443 0.00970766,0.59676225 0.00970766,0.81215179 c 0,0.21540021 0.0855663,0.42197791 0.23788381,0.57427811 L 5.3562369,6.4948538 0.24759147,11.604381 c -0.0775121,0.07492 -0.13931586,0.164543 -0.18182835,0.263595 -0.04250169,0.09905 -0.064850182,0.205678 -0.0657357237,0.313391 -8.8554258e-4,0.107813 0.0197049337,0.214771 0.0605827337,0.314472 0.04086693,0.0998 0.10119858,0.190415 0.17746563,0.266625 0.0762779,0.07622 0.16695386,0.136398 0.26675594,0.177208 0.099802,0.04082 0.20672745,0.06127 0.31452961,0.06029 0.1078025,-9.53e-4 0.21433799,-0.0235 0.31337139,-0.06604 0.099045,-0.04265 0.1886052,-0.104571 0.263465,-0.182081 L 6.5048431,7.6434102 11.613445,12.751855 c 0.152317,0.152312 0.35898,0.237831 0.574302,0.237831 0.215433,0 0.421986,-0.08552 0.574304,-0.237831 C 12.914368,12.599545 13,12.393 13,12.177578 13,11.962157 12.91437,11.75561 12.762051,11.603299 Z\"/></svg>')}h2{margin-block-start:0;margin-block-end:0;margin-inline-start:0px;margin-inline-end:0px}.overlay{position:fixed;display:flex;top:0px;z-index:var(--dialog-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.dialog{display:flex;width:80%;position:absolute;top:50%;left:50%;margin-right:-50%;box-sizing:border-box;transform:translate(-50%, -50%);box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122)}@media screen and (min-width: 768px){.dialog{width:50%}}@media screen and (min-width: 992px){.dialog{width:33.33333%}}.dialog__container{width:100%;background:#FFFF;border-radius:0px 6px 6px 0px;box-sizing:border-box;padding:var(--dialog__container-padding)}.dialog__critical--indicator{box-sizing:border-box;width:12px;border-radius:6px 0px 0px 6px;background-color:var(--dialog__critical--background-color)}.dialog__warning--indicator{width:12px;border-radius:6px 0px 0px 6px;box-sizing:border-box;background-color:var(--dialog__warning--background-color)}.message{font-size:var(--dialog__body--font-size);font-weight:var(--dialog__body--text-weight--medium);font-family:var(--dialog__body--font-pattern);text-shadow:var(--dialog__body--text-shadow);padding-bottom:var(--dialog__body--padding-bottom);color:var(--dialog__body--color);max-height:30vh;content-visibility:auto;margin-bottom:24px;overflow-y:auto}.changeable__icon{width:15px;height:15px}.title{display:flex;font-family:var(--dialog__title--font-pattern);margin:0;font-weight:var(--dialog__title--weight--large);line-height:1.3}.title__container{display:flex;padding-bottom:var(--dialog__title__container--padding-bottom)}.title__box{display:flex;width:100%;align-items:center;align-self:center}.title--label{padding-left:var(--dialog__title--padding-left)}.title-icon{outline:none;border:none;background-color:var(--dialog__warning--background-color);width:26px;height:26px;border-radius:100%;padding:0;display:flex;justify-content:center;align-items:center}.title-icon--critical{background-color:var(--dialog__critical--background-color)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--dialog__btn__close--background-color);width:12px;height:12px;-webkit-mask-image:var(--dialog__btn__close__image);mask-image:var(--dialog__btn__close__image)}.title-icon::after{content:'';display:flex;background-color:#FFFF;width:15px;height:15px;-webkit-mask-image:var(--dialog--warning__image);mask-image:var(--dialog--warning__image)}.title-icon--critical::after{content:'';display:flex;background-color:#FFFF;width:13px;height:13px;-webkit-mask-image:var(--dialog--critical__image);mask-image:var(--dialog--critical__image)}.button-yes-no__container{display:flex;box-sizing:border-box;align-self:center;align-items:center;justify-content:flex-end}.button__no{padding-right:var(--dialog__btn__no--padding-right)}.button__ok--container{display:flex;justify-content:flex-end}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
|
|
1310
1309
|
|
|
1311
1310
|
class Message {
|
|
1312
1311
|
constructor(title, message, critical, confirm, icon, callBack) {
|
|
@@ -1339,6 +1338,9 @@ let EzDialog$1 = class extends HTMLElement {
|
|
|
1339
1338
|
this.opened = false;
|
|
1340
1339
|
this._messageQueue = [];
|
|
1341
1340
|
}
|
|
1341
|
+
/**
|
|
1342
|
+
* Lida com o clique nos botões de dentro do componente.
|
|
1343
|
+
*/
|
|
1342
1344
|
async handleButtonClick(selectedOption) {
|
|
1343
1345
|
this.opened = this._messageQueue.length > 0;
|
|
1344
1346
|
if (this._currentMessage.callBack) {
|
|
@@ -1350,6 +1352,9 @@ let EzDialog$1 = class extends HTMLElement {
|
|
|
1350
1352
|
this._currentMessage = this._messageQueue.shift();
|
|
1351
1353
|
forceUpdate(this);
|
|
1352
1354
|
}
|
|
1355
|
+
/**
|
|
1356
|
+
* Faz com que o componente seja exibido.
|
|
1357
|
+
*/
|
|
1353
1358
|
async show(title, message, critical, confirm, icon) {
|
|
1354
1359
|
this.opened = true;
|
|
1355
1360
|
return new Promise(resolve => {
|
|
@@ -3335,7 +3340,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3335
3340
|
switch (userInterface) {
|
|
3336
3341
|
case 'LONGTEXT':
|
|
3337
3342
|
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']),
|
|
3343
|
+
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
3344
|
case 'CHECKBOX':
|
|
3340
3345
|
case 'SWITCH':
|
|
3341
3346
|
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 +3349,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3344
3349
|
const optsObj = properties ? JSON.parse(getProp(properties, 'options')) : {};
|
|
3345
3350
|
const normalized = Object.keys(optsObj).map(key => { return { value: key, label: optsObj[key] }; });
|
|
3346
3351
|
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']),
|
|
3352
|
+
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
3353
|
case 'SEARCH':
|
|
3349
3354
|
const context = {
|
|
3350
3355
|
__MAIN_FORM: form,
|
|
@@ -3372,7 +3377,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3372
3377
|
context['CRITERIA'] = criteriaList;
|
|
3373
3378
|
}
|
|
3374
3379
|
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']),
|
|
3380
|
+
h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, optionloader: (argument) => {
|
|
3376
3381
|
if (form) {
|
|
3377
3382
|
return form.loadSearch(argument, context);
|
|
3378
3383
|
}
|
|
@@ -3386,7 +3391,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3386
3391
|
h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
|
|
3387
3392
|
case 'DATE':
|
|
3388
3393
|
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']),
|
|
3394
|
+
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
3395
|
case 'DECIMALNUMBER':
|
|
3391
3396
|
case 'INTEGERNUMBER':
|
|
3392
3397
|
let precision = 0;
|
|
@@ -3396,11 +3401,11 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
3396
3401
|
prettyPrecision = Number(getProp(properties, "prettyprecision") || precision);
|
|
3397
3402
|
}
|
|
3398
3403
|
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']),
|
|
3404
|
+
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
3405
|
//IMAGE, DATETIME, ELAPSEDTIME, PASSWORD, MASKEDTEXT, HTML
|
|
3401
3406
|
default:
|
|
3402
3407
|
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']),
|
|
3408
|
+
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
3409
|
}
|
|
3405
3410
|
};
|
|
3406
3411
|
function getProp(properties, name) {
|
|
@@ -3461,7 +3466,7 @@ const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder,
|
|
|
3461
3466
|
buttons.previousVisible = false;
|
|
3462
3467
|
}
|
|
3463
3468
|
return h("div", { class: "form-sheet" },
|
|
3464
|
-
tabs ? h("ez-tabselector", {
|
|
3469
|
+
tabs ? h("ez-tabselector", { selectedIndex: selectedTab, selectedTab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
|
|
3465
3470
|
dataUnit ? h(NavigationBar, { enabled: enabled, dataUnit: dataUnit, buttonProps: buttons }) : null,
|
|
3466
3471
|
h("div", { class: "tab__container" },
|
|
3467
3472
|
items ? items.map(item => buildFormItem(item, name, store, currentDU, enabled)) : null,
|
|
@@ -3721,14 +3726,16 @@ let EzForm$1 = class extends HTMLElement {
|
|
|
3721
3726
|
static get style() { return ezFormCss; }
|
|
3722
3727
|
};
|
|
3723
3728
|
|
|
3724
|
-
const ezIconCss = ":host{display:block;overflow:hidden;position:relative}svg{display:flex;justify-content:center;align-items:center;fill:var(--color
|
|
3729
|
+
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
3730
|
|
|
3726
3731
|
let EzIcon$1 = class extends HTMLElement {
|
|
3727
3732
|
constructor() {
|
|
3728
3733
|
super();
|
|
3729
3734
|
this.__registerHost();
|
|
3730
3735
|
this.__attachShadow();
|
|
3731
|
-
|
|
3736
|
+
/**
|
|
3737
|
+
* Tamanho do ícone
|
|
3738
|
+
*/
|
|
3732
3739
|
this.size = 'medium';
|
|
3733
3740
|
}
|
|
3734
3741
|
isSprite() {
|
|
@@ -3854,104 +3861,51 @@ let EzModal$1 = class extends HTMLElement {
|
|
|
3854
3861
|
/**
|
|
3855
3862
|
* Controle de exibição do Modal
|
|
3856
3863
|
*/
|
|
3857
|
-
this.
|
|
3864
|
+
this.opened = true;
|
|
3858
3865
|
/**
|
|
3859
|
-
* Define se o modal será fechado ao
|
|
3866
|
+
* Define se o modal será fechado ao clicar ESC
|
|
3860
3867
|
*/
|
|
3861
|
-
this.
|
|
3868
|
+
this.closeEsc = false;
|
|
3862
3869
|
/**
|
|
3863
3870
|
* Define se o modal será fechado ao clicar fora do conteúdo.
|
|
3864
3871
|
*/
|
|
3865
|
-
this.
|
|
3872
|
+
this.closeOutsideClick = false;
|
|
3866
3873
|
this.handleKeyboardEvent = (ev) => {
|
|
3867
|
-
if ((ev === null || ev === void 0 ? void 0 : ev.key) ===
|
|
3874
|
+
if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
|
|
3868
3875
|
this.closeModal();
|
|
3869
3876
|
}
|
|
3870
3877
|
};
|
|
3871
3878
|
}
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
// this.oppened = false;
|
|
3876
|
-
// this.ezChange.emit(this.oppened);
|
|
3877
|
-
// }
|
|
3878
|
-
// }
|
|
3879
|
-
handleOppenedChange() {
|
|
3880
|
-
if (this.oppened) {
|
|
3881
|
-
document.addEventListener('keydown', this.handleKeyboardEvent);
|
|
3879
|
+
handleopenedChange() {
|
|
3880
|
+
if (this.opened) {
|
|
3881
|
+
document.addEventListener("keydown", this.handleKeyboardEvent);
|
|
3882
3882
|
}
|
|
3883
3883
|
else {
|
|
3884
|
-
document.removeEventListener(
|
|
3884
|
+
document.removeEventListener("keydown", this.handleKeyboardEvent);
|
|
3885
3885
|
}
|
|
3886
3886
|
}
|
|
3887
3887
|
closeModal() {
|
|
3888
|
-
this.
|
|
3889
|
-
this.ezCloseModal.emit(this.
|
|
3890
|
-
}
|
|
3891
|
-
///////
|
|
3892
|
-
// trapTabKey(e) {
|
|
3893
|
-
// // Check for TAB key press
|
|
3894
|
-
// if (e.keyCode === 9) {
|
|
3895
|
-
// // SHIFT + TAB
|
|
3896
|
-
// if (e.shiftKey) {
|
|
3897
|
-
// if (document.activeElement === this._firstTabStop) {
|
|
3898
|
-
// e.preventDefault();
|
|
3899
|
-
// this._lastTabStop.focus();
|
|
3900
|
-
// }
|
|
3901
|
-
// // TAB
|
|
3902
|
-
// } else {
|
|
3903
|
-
// if (document.activeElement === this._lastTabStop) {
|
|
3904
|
-
// e.preventDefault();
|
|
3905
|
-
// this._firstTabStop.focus();
|
|
3906
|
-
// }
|
|
3907
|
-
// }
|
|
3908
|
-
// }
|
|
3909
|
-
// if (e.keyCode === 27) {
|
|
3910
|
-
// this.closeModal();
|
|
3911
|
-
// }
|
|
3912
|
-
// }
|
|
3913
|
-
// closeModal() {
|
|
3914
|
-
// this.oppened = false;
|
|
3915
|
-
// this._focusedElementBeforeModal.focus();
|
|
3916
|
-
// }
|
|
3917
|
-
// componentDidLoad() {
|
|
3918
|
-
// this._overlay.addEventListener('keydown', (ev) => { this.trapTabKey(ev) });
|
|
3919
|
-
// // Save current focus
|
|
3920
|
-
// this._focusedElementBeforeModal = document.activeElement;
|
|
3921
|
-
// // Find all focusable children
|
|
3922
|
-
// var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
|
|
3923
|
-
// var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
|
|
3924
|
-
// // Convert NodeList to Array
|
|
3925
|
-
// focusableElements = Array.prototype.slice.call(focusableElements);
|
|
3926
|
-
// this._firstTabStop = focusableElements[0];
|
|
3927
|
-
// this._lastTabStop = focusableElements[focusableElements.length - 1];
|
|
3928
|
-
// // Focus first child
|
|
3929
|
-
// this._firstTabStop.focus();
|
|
3930
|
-
// }
|
|
3931
|
-
// componentDidUpdate() {
|
|
3932
|
-
// var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
|
|
3933
|
-
// var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
|
|
3934
|
-
// }
|
|
3935
|
-
/////
|
|
3888
|
+
this.opened = false;
|
|
3889
|
+
this.ezCloseModal.emit(this.opened);
|
|
3890
|
+
}
|
|
3936
3891
|
componentDidLoad() {
|
|
3937
|
-
this.
|
|
3892
|
+
this.handleopenedChange();
|
|
3938
3893
|
}
|
|
3939
3894
|
onMouseDownHandler(event) {
|
|
3940
|
-
if (this.
|
|
3895
|
+
if (this.closeOutsideClick && event.target === this._overlay) {
|
|
3941
3896
|
this.closeModal();
|
|
3942
3897
|
}
|
|
3943
3898
|
}
|
|
3944
|
-
//Ainda teremos ajustes visuais
|
|
3945
3899
|
render() {
|
|
3946
3900
|
const positionSufix = this.align === "left" ? "left" : "right";
|
|
3947
|
-
return (h(Host, null, this.
|
|
3901
|
+
return (h(Host, null, this.opened
|
|
3948
3902
|
?
|
|
3949
|
-
h("div", { class:
|
|
3903
|
+
h("div", { class: "modal", onMouseDown: evt => this.onMouseDownHandler(evt) }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content modal__content--${positionSufix} ${this.modalSize}` }, h("slot", null))))
|
|
3950
3904
|
:
|
|
3951
3905
|
undefined));
|
|
3952
3906
|
}
|
|
3953
3907
|
static get watchers() { return {
|
|
3954
|
-
"
|
|
3908
|
+
"opened": ["handleopenedChange"]
|
|
3955
3909
|
}; }
|
|
3956
3910
|
static get style() { return ezModalCss; }
|
|
3957
3911
|
};
|
|
@@ -3993,7 +3947,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
3993
3947
|
this.checkNumberValidation = (valuePtBRorNumber) => {
|
|
3994
3948
|
try {
|
|
3995
3949
|
if (valuePtBRorNumber != "" && NumberUtils.format(valuePtBRorNumber, this.precision, this.prettyprecision) === "NaN") {
|
|
3996
|
-
this.
|
|
3950
|
+
this.errorMessage = `Valor não é um número válido`;
|
|
3997
3951
|
this.value = undefined;
|
|
3998
3952
|
this.strvalue = undefined;
|
|
3999
3953
|
if (this._inputElem) {
|
|
@@ -4003,14 +3957,14 @@ let NumberInput = class extends HTMLElement {
|
|
|
4003
3957
|
}
|
|
4004
3958
|
}
|
|
4005
3959
|
catch (err) {
|
|
4006
|
-
this.
|
|
3960
|
+
this.errorMessage = err.message;
|
|
4007
3961
|
return false;
|
|
4008
3962
|
}
|
|
4009
3963
|
return true;
|
|
4010
3964
|
};
|
|
4011
3965
|
}
|
|
4012
3966
|
showError() {
|
|
4013
|
-
const hasError = typeof this.
|
|
3967
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4014
3968
|
if (this._inputElem) {
|
|
4015
3969
|
if (hasError) {
|
|
4016
3970
|
this._inputElem.classList.add('hasError');
|
|
@@ -4038,7 +3992,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
4038
3992
|
if (isNaN(newValue) && newValue !== undefined) {
|
|
4039
3993
|
this.value = undefined;
|
|
4040
3994
|
this.strvalue = "";
|
|
4041
|
-
this.
|
|
3995
|
+
this.errorMessage = `Valor não é um número válido`;
|
|
4042
3996
|
this.adjustFloatingLabel();
|
|
4043
3997
|
}
|
|
4044
3998
|
else {
|
|
@@ -4084,7 +4038,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
4084
4038
|
async handleFocusout() {
|
|
4085
4039
|
//Setting value and strvalue by stringinput
|
|
4086
4040
|
if (this._inputElem) {
|
|
4087
|
-
this.
|
|
4041
|
+
this.errorMessage = "";
|
|
4088
4042
|
if (this._inputElem.value !== "") {
|
|
4089
4043
|
this._inputElem.value = this.settingStrValueIntNumber(this._inputElem.value);
|
|
4090
4044
|
const value = NumberUtils.keepOnlyDecimalSeparator(this._inputElem.value, this.formatnumber.toUpperCase());
|
|
@@ -4096,7 +4050,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
4096
4050
|
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
4051
|
}
|
|
4098
4052
|
catch (e) {
|
|
4099
|
-
this.
|
|
4053
|
+
this.errorMessage = e.message;
|
|
4100
4054
|
return;
|
|
4101
4055
|
}
|
|
4102
4056
|
}
|
|
@@ -4151,7 +4105,7 @@ let NumberInput = class extends HTMLElement {
|
|
|
4151
4105
|
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
4106
|
}
|
|
4153
4107
|
catch (e) {
|
|
4154
|
-
this.
|
|
4108
|
+
this.errorMessage = e.message;
|
|
4155
4109
|
return;
|
|
4156
4110
|
}
|
|
4157
4111
|
this.strvalue = this._inputElem.value;
|
|
@@ -4188,11 +4142,11 @@ let NumberInput = class extends HTMLElement {
|
|
|
4188
4142
|
}
|
|
4189
4143
|
render() {
|
|
4190
4144
|
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.
|
|
4145
|
+
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
4146
|
}
|
|
4193
4147
|
get el() { return this; }
|
|
4194
4148
|
static get watchers() { return {
|
|
4195
|
-
"
|
|
4149
|
+
"errorMessage": ["showError"],
|
|
4196
4150
|
"precision": ["onPrecisionChanged"],
|
|
4197
4151
|
"prettyprecision": ["onPrettyPrecisionChanged"],
|
|
4198
4152
|
"value": ["onValueChanged"]
|
|
@@ -4217,7 +4171,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4217
4171
|
this._textInput.label = this.label;
|
|
4218
4172
|
}
|
|
4219
4173
|
setErrorMessage() {
|
|
4220
|
-
this._textInput.
|
|
4174
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
4221
4175
|
}
|
|
4222
4176
|
applyValueToInput() {
|
|
4223
4177
|
if (this._textInput) {
|
|
@@ -4225,7 +4179,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4225
4179
|
}
|
|
4226
4180
|
}
|
|
4227
4181
|
changeValue(newValue) {
|
|
4228
|
-
this._textInput.
|
|
4182
|
+
this._textInput.errorMessage = "";
|
|
4229
4183
|
if (newValue !== this.value) {
|
|
4230
4184
|
this.value = newValue;
|
|
4231
4185
|
this.ezChange.emit();
|
|
@@ -4234,7 +4188,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4234
4188
|
parseNumber() {
|
|
4235
4189
|
const parsedNumber = this._textInput.value ? NumberUtils.stringToNumber(this._textInput.value) : null;
|
|
4236
4190
|
if (parsedNumber != null && isNaN(parsedNumber)) {
|
|
4237
|
-
this._textInput.
|
|
4191
|
+
this._textInput.errorMessage = "O valor digitado não é um número válido";
|
|
4238
4192
|
}
|
|
4239
4193
|
else {
|
|
4240
4194
|
this.changeValue(parsedNumber);
|
|
@@ -4247,17 +4201,17 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4247
4201
|
return null;
|
|
4248
4202
|
}
|
|
4249
4203
|
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,
|
|
4204
|
+
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
4205
|
}
|
|
4252
4206
|
static get watchers() { return {
|
|
4253
4207
|
"label": ["setLabel"],
|
|
4254
|
-
"
|
|
4208
|
+
"errorMessage": ["setErrorMessage"],
|
|
4255
4209
|
"value": ["applyValueToInput"]
|
|
4256
4210
|
}; }
|
|
4257
4211
|
static get style() { return ezNumericInputCss; }
|
|
4258
4212
|
};
|
|
4259
4213
|
|
|
4260
|
-
const ezPopoverCss = ":host{--
|
|
4214
|
+
const ezPopoverCss = ":host{--popover__box--border-radius:var(--border--radius-medium, 12px);--popover__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(--popover__box--border-radius);box-shadow:var(--popover__box--box-shadow)}.box--fit-content{width:fit-content}.box--full-width{width:100%}";
|
|
4261
4215
|
|
|
4262
4216
|
let EzPopover$1 = class extends HTMLElement {
|
|
4263
4217
|
constructor() {
|
|
@@ -4270,28 +4224,28 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4270
4224
|
* No modo floating = false o popover só se tornará visível
|
|
4271
4225
|
* quando o método show() for acionado.
|
|
4272
4226
|
*/
|
|
4273
|
-
this.
|
|
4227
|
+
this.autoClose = true;
|
|
4274
4228
|
/**
|
|
4275
4229
|
* Offset top do popover em relação ao componente pai
|
|
4276
4230
|
*/
|
|
4277
|
-
this.top =
|
|
4231
|
+
this.top = "0px";
|
|
4278
4232
|
/**
|
|
4279
4233
|
* Offset left do popover em relação ao componente pai
|
|
4280
4234
|
*/
|
|
4281
|
-
this.left =
|
|
4235
|
+
this.left = "0px";
|
|
4282
4236
|
/**
|
|
4283
4237
|
* Offset bottom do popover em relação ao componente pai
|
|
4284
4238
|
*/
|
|
4285
|
-
this.bottom =
|
|
4239
|
+
this.bottom = "0px";
|
|
4286
4240
|
/**
|
|
4287
4241
|
* Offset right do popover em relação ao componente pai
|
|
4288
4242
|
*/
|
|
4289
|
-
this.right =
|
|
4243
|
+
this.right = "0px";
|
|
4290
4244
|
/**
|
|
4291
4245
|
* Ajusta o comportamento da largura do popover.
|
|
4292
4246
|
* Opções: "100% e "fit-content" (default)
|
|
4293
4247
|
*/
|
|
4294
|
-
this.
|
|
4248
|
+
this.boxWidth = "fit-content";
|
|
4295
4249
|
}
|
|
4296
4250
|
dispatchVisibilityChange(newValue, oldValue) {
|
|
4297
4251
|
if (newValue != oldValue) {
|
|
@@ -4303,7 +4257,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4303
4257
|
*/
|
|
4304
4258
|
async updatePosition(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
|
|
4305
4259
|
const floatingOptions = {
|
|
4306
|
-
autoClose: this.
|
|
4260
|
+
autoClose: this.autoClose,
|
|
4307
4261
|
top,
|
|
4308
4262
|
left,
|
|
4309
4263
|
bottom,
|
|
@@ -4315,8 +4269,6 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4315
4269
|
if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
|
|
4316
4270
|
return true;
|
|
4317
4271
|
}
|
|
4318
|
-
//Here: we pass this._box as parameter but we need to change to _host
|
|
4319
|
-
//because we need to get the lasChild (inner content to put in slot)
|
|
4320
4272
|
_container = this._host;
|
|
4321
4273
|
return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
|
|
4322
4274
|
}
|
|
@@ -4325,11 +4277,10 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4325
4277
|
}
|
|
4326
4278
|
/**
|
|
4327
4279
|
* Faz com que o popover seja renderizado na DOM.
|
|
4328
|
-
*
|
|
4329
4280
|
*/
|
|
4330
4281
|
async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
|
|
4331
4282
|
const floatingOptions = {
|
|
4332
|
-
autoClose: this.
|
|
4283
|
+
autoClose: this.autoClose,
|
|
4333
4284
|
top,
|
|
4334
4285
|
left,
|
|
4335
4286
|
bottom,
|
|
@@ -4341,14 +4292,12 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4341
4292
|
if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
|
|
4342
4293
|
return true;
|
|
4343
4294
|
}
|
|
4344
|
-
// Here: we pass this._box as parameter but we need to change to _host
|
|
4345
|
-
// because we need to get the lasChild (inner content to put in slot)
|
|
4346
4295
|
_container = this._host;
|
|
4347
4296
|
return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
|
|
4348
4297
|
}
|
|
4349
4298
|
};
|
|
4350
4299
|
this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
|
|
4351
|
-
this.
|
|
4300
|
+
this.opened = true;
|
|
4352
4301
|
}
|
|
4353
4302
|
/**
|
|
4354
4303
|
* Usado no modo floating. Faz com que o componente seja ocultado.
|
|
@@ -4357,7 +4306,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4357
4306
|
if (this._floatingID !== undefined) {
|
|
4358
4307
|
FloatingManager.close(this._floatingID);
|
|
4359
4308
|
this._floatingID = undefined;
|
|
4360
|
-
this.
|
|
4309
|
+
this.opened = false;
|
|
4361
4310
|
}
|
|
4362
4311
|
}
|
|
4363
4312
|
componentDidRender() {
|
|
@@ -4367,16 +4316,16 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4367
4316
|
}
|
|
4368
4317
|
}
|
|
4369
4318
|
render() {
|
|
4370
|
-
return (h(Host, null, h("section", { ref: el => this._container = el }, h("div", { class: `box ${this.
|
|
4319
|
+
return (h(Host, null, h("section", { ref: el => this._container = el }, h("div", { class: `box ${this.boxWidth === "fit-content" ? "box--fit-content" : "box--full-width"}`, ref: el => this._box = el }, h("slot", null)))));
|
|
4371
4320
|
}
|
|
4372
4321
|
get _host() { return this; }
|
|
4373
4322
|
static get watchers() { return {
|
|
4374
|
-
"
|
|
4323
|
+
"opened": ["dispatchVisibilityChange"]
|
|
4375
4324
|
}; }
|
|
4376
4325
|
static get style() { return ezPopoverCss; }
|
|
4377
4326
|
};
|
|
4378
4327
|
|
|
4379
|
-
const ezPopupCss = ":host{display:flex;--popup-z-index:var(--most-visible, 3);--popup__container--color:var(--title--primary, #2b3a54);--popup__container--padding:var(--space--large, 24px);--popup__header--padding-bottom:var(--space--medium, 12px);--popup__title--font-family:var(--font-pattern, \"'Sora', 'Algerian'\");--popup__title--font-size:var(--title--extra-large, 24px);--popup__title--color:var(--title--primary, #2b3a54);--popup__title--font-weight:var(--text-weight--large, 600);--popup__btn__close--
|
|
4328
|
+
const ezPopupCss = ":host{display:flex;--popup-z-index:var(--most-visible, 3);--popup__container--color:var(--title--primary, #2b3a54);--popup__container--padding:var(--space--large, 24px);--popup__header--padding-bottom:var(--space--medium, 12px);--popup__title--font-family:var(--font-pattern, \"'Sora', 'Algerian'\");--popup__title--font-size:var(--title--extra-large, 24px);--popup__title--color:var(--title--primary, #2b3a54);--popup__title--font-weight:var(--text-weight--large, 600);--popup__btn__close--icon-color:var(--title--primary, #2b3a54);--popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--popup-z-index);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;display:flex;flex-wrap:wrap;overflow:hidden;background:#FFFF;color:var(--popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--popup__container--padding)}.popup__content{box-sizing:border-box;max-height:100%;width:100%;display:flex;flex-wrap:wrap}.popup__expandable-content{box-sizing:border-box;overflow-y:auto;width:100%;display:flex;flex-wrap:wrap;max-height:80vh;content-visibility:auto}.popup__header{padding-bottom:var(--popup__header--padding-bottom);width:100%;display:flex}.popup__title{display:flex;margin:0;width:100%;font-family:var(--popup__title--font-family);font-size:var(--popup__title--font-size);font-weight:var(--popup__title--font-weight);color:var(--popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--popup__btn__close--icon);mask-image:var(--popup__btn__close--icon)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
|
|
4380
4329
|
|
|
4381
4330
|
let EzPopup$1 = class extends HTMLElement {
|
|
4382
4331
|
constructor() {
|
|
@@ -4401,7 +4350,7 @@ let EzPopup$1 = class extends HTMLElement {
|
|
|
4401
4350
|
*/
|
|
4402
4351
|
this.opened = false;
|
|
4403
4352
|
/**
|
|
4404
|
-
* Define o componente utilizará um cabeçalho com botão de fechamento.
|
|
4353
|
+
* Define se o componente utilizará um cabeçalho com botão de fechamento.
|
|
4405
4354
|
*/
|
|
4406
4355
|
this.useHeader = false;
|
|
4407
4356
|
}
|
|
@@ -4452,7 +4401,7 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4452
4401
|
this.ezChange.emit(evt.detail);
|
|
4453
4402
|
}
|
|
4454
4403
|
render() {
|
|
4455
|
-
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled,
|
|
4404
|
+
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
4405
|
}
|
|
4457
4406
|
;
|
|
4458
4407
|
static get watchers() { return {
|
|
@@ -4461,93 +4410,93 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4461
4410
|
static get style() { return ezSearchCss; }
|
|
4462
4411
|
};
|
|
4463
4412
|
|
|
4464
|
-
const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;margin-bottom:var(--space--large, 24px);--
|
|
4413
|
+
const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;margin-bottom:var(--space--large, 24px);--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.midle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
|
|
4465
4414
|
|
|
4466
4415
|
let EzTabselector$1 = class extends HTMLElement {
|
|
4467
4416
|
constructor() {
|
|
4468
4417
|
super();
|
|
4469
4418
|
this.__registerHost();
|
|
4470
4419
|
this.__attachShadow();
|
|
4471
|
-
this.
|
|
4472
|
-
this.
|
|
4473
|
-
if (ev.key ===
|
|
4474
|
-
this.
|
|
4475
|
-
this.
|
|
4476
|
-
this.
|
|
4477
|
-
this.handleTabClick(this.
|
|
4420
|
+
this.ezChange = createEvent(this, "ezChange", 7);
|
|
4421
|
+
this.setFocusedParam = (ev) => {
|
|
4422
|
+
if (ev.key === "Enter") {
|
|
4423
|
+
this.selectedIndex = this.focusedIndex;
|
|
4424
|
+
this.focusedIndex = undefined;
|
|
4425
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
4426
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
4478
4427
|
ev.preventDefault();
|
|
4479
|
-
this.setFocusedTab(this.
|
|
4428
|
+
this.setFocusedTab(this.selectedIndex);
|
|
4480
4429
|
}
|
|
4481
|
-
else if (ev.key ===
|
|
4430
|
+
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
4482
4431
|
let operator = undefined;
|
|
4483
|
-
if (ev.key ===
|
|
4432
|
+
if (ev.key === "ArrowLeft") {
|
|
4484
4433
|
operator = false;
|
|
4485
4434
|
}
|
|
4486
|
-
else if (ev.key ===
|
|
4435
|
+
else if (ev.key === "ArrowRight") {
|
|
4487
4436
|
operator = true;
|
|
4488
4437
|
}
|
|
4489
4438
|
else {
|
|
4490
4439
|
return;
|
|
4491
4440
|
}
|
|
4492
|
-
if (this.
|
|
4441
|
+
if (this.focusedIndex === undefined) {
|
|
4493
4442
|
if (operator === false) {
|
|
4494
|
-
this.
|
|
4443
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
|
|
4495
4444
|
}
|
|
4496
4445
|
else {
|
|
4497
|
-
this.
|
|
4446
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
|
|
4498
4447
|
}
|
|
4499
4448
|
}
|
|
4500
4449
|
else {
|
|
4501
4450
|
if (operator === false) {
|
|
4502
|
-
this.
|
|
4451
|
+
this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
|
|
4503
4452
|
}
|
|
4504
4453
|
else {
|
|
4505
|
-
this.
|
|
4454
|
+
this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
|
|
4506
4455
|
}
|
|
4507
4456
|
}
|
|
4508
|
-
if (parseInt(this.
|
|
4509
|
-
this.
|
|
4457
|
+
if (parseInt(this.focusedIndex) < 0) {
|
|
4458
|
+
this.focusedIndex = "0";
|
|
4510
4459
|
}
|
|
4511
|
-
else if (parseInt(this.
|
|
4512
|
-
this.
|
|
4460
|
+
else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
|
|
4461
|
+
this.focusedIndex = (this._processedTabs.length - 1).toString();
|
|
4513
4462
|
}
|
|
4514
|
-
this.
|
|
4515
|
-
this.setFocusedTab(this.
|
|
4516
|
-
this.
|
|
4463
|
+
this.setFocusedBtn(true, this.focusedIndex);
|
|
4464
|
+
this.setFocusedTab(this.focusedIndex);
|
|
4465
|
+
this.ezChange.emit();
|
|
4517
4466
|
}
|
|
4518
|
-
else if (ev.key ===
|
|
4519
|
-
this.
|
|
4520
|
-
this.
|
|
4521
|
-
this.handleTabClick(this.
|
|
4467
|
+
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
4468
|
+
this.focusedIndex = undefined;
|
|
4469
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
4470
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
4522
4471
|
ev.preventDefault();
|
|
4523
|
-
this.setFocusedTab(this.
|
|
4472
|
+
this.setFocusedTab(this.selectedIndex);
|
|
4524
4473
|
}
|
|
4525
4474
|
// this.setFocusedTab();
|
|
4526
4475
|
};
|
|
4527
4476
|
}
|
|
4528
4477
|
handleTabClick(tab, index) {
|
|
4529
|
-
this.
|
|
4530
|
-
this.
|
|
4531
|
-
this.
|
|
4532
|
-
this.
|
|
4533
|
-
this.
|
|
4478
|
+
this.selectedIndex = index.toString();
|
|
4479
|
+
this.focusedIndex = undefined;
|
|
4480
|
+
this.selectedTab = tab;
|
|
4481
|
+
this.ezChange.emit();
|
|
4482
|
+
this.setFocusedBtn(false, this.selectedIndex);
|
|
4534
4483
|
}
|
|
4535
4484
|
componentWillRender() {
|
|
4536
4485
|
if (!this._processedTabs) {
|
|
4537
4486
|
this._processedTabs = [];
|
|
4538
4487
|
if (this.tabs) {
|
|
4539
|
-
this.tabs.split(
|
|
4488
|
+
this.tabs.split(",").forEach((label) => {
|
|
4540
4489
|
label = label.trim();
|
|
4541
4490
|
this._processedTabs.push(new Tab(label, label));
|
|
4542
4491
|
});
|
|
4543
4492
|
}
|
|
4544
|
-
this._hostElem.querySelectorAll(
|
|
4545
|
-
const tabKey = elem.getAttribute(
|
|
4546
|
-
const label = elem.getAttribute(
|
|
4493
|
+
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
4494
|
+
const tabKey = elem.getAttribute("tabKey");
|
|
4495
|
+
const label = elem.getAttribute("label");
|
|
4547
4496
|
const t = new Tab(label, tabKey);
|
|
4548
4497
|
const content = elem.firstChild;
|
|
4549
4498
|
if (content) {
|
|
4550
|
-
content.setAttribute(
|
|
4499
|
+
content.setAttribute("slot", "tab" + this._processedTabs.length);
|
|
4551
4500
|
this._hostElem.appendChild(content);
|
|
4552
4501
|
}
|
|
4553
4502
|
this._processedTabs.push(t);
|
|
@@ -4571,7 +4520,7 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4571
4520
|
const container = this._scrollContainer;
|
|
4572
4521
|
if (container) {
|
|
4573
4522
|
let lastTab = null;
|
|
4574
|
-
container.querySelectorAll(
|
|
4523
|
+
container.querySelectorAll(".tab").forEach((tab) => {
|
|
4575
4524
|
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
4576
4525
|
lastTab = tab;
|
|
4577
4526
|
}
|
|
@@ -4590,18 +4539,18 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4590
4539
|
this._startHidden = container.scrollLeft > 0;
|
|
4591
4540
|
this._endHidden = remainingScroll > 0;
|
|
4592
4541
|
if (this._startHidden) {
|
|
4593
|
-
this._backwardButton.classList.remove(
|
|
4542
|
+
this._backwardButton.classList.remove("hidden");
|
|
4594
4543
|
}
|
|
4595
4544
|
else {
|
|
4596
|
-
this._backwardButton.classList.add(
|
|
4545
|
+
this._backwardButton.classList.add("hidden");
|
|
4597
4546
|
}
|
|
4598
4547
|
if (this._endHidden) {
|
|
4599
|
-
this._forwardButton.classList.remove(
|
|
4548
|
+
this._forwardButton.classList.remove("hidden");
|
|
4600
4549
|
}
|
|
4601
4550
|
else {
|
|
4602
|
-
this._forwardButton.classList.add(
|
|
4551
|
+
this._forwardButton.classList.add("hidden");
|
|
4603
4552
|
}
|
|
4604
|
-
const classNames = [
|
|
4553
|
+
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
4605
4554
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
4606
4555
|
classNames.forEach((name) => {
|
|
4607
4556
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -4618,11 +4567,9 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4618
4567
|
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
4619
4568
|
}
|
|
4620
4569
|
setFocusedTab(index) {
|
|
4621
|
-
window.clearTimeout(this.
|
|
4622
|
-
this.
|
|
4570
|
+
window.clearTimeout(this._scrollCallBackTest);
|
|
4571
|
+
this._scrollCallBackTest = window.setTimeout(() => {
|
|
4623
4572
|
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
4624
|
-
console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
|
|
4625
|
-
console.log('tabtoscroll', tabtoscroll);
|
|
4626
4573
|
tabtoscroll.scrollIntoView();
|
|
4627
4574
|
}, 200);
|
|
4628
4575
|
}
|
|
@@ -4631,27 +4578,27 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4631
4578
|
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
4632
4579
|
}
|
|
4633
4580
|
const context = this._textMesurement.getContext("2d");
|
|
4634
|
-
context.font =
|
|
4635
|
-
return Math.min(220, 24 + context.measureText(text).width) +
|
|
4581
|
+
context.font = "14px Sora, Algerian";
|
|
4582
|
+
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
4636
4583
|
}
|
|
4637
4584
|
;
|
|
4638
|
-
|
|
4639
|
-
const tabsButtons = this._scrollContainer.querySelectorAll(
|
|
4585
|
+
setFocusedBtn(visible, parameter) {
|
|
4586
|
+
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
4640
4587
|
tabsButtons.forEach((el) => {
|
|
4641
|
-
el.classList.remove(
|
|
4642
|
-
if (el.id ===
|
|
4643
|
-
el.classList.add(
|
|
4588
|
+
el.classList.remove("is-focused");
|
|
4589
|
+
if (el.id === "tab" + parameter && visible) {
|
|
4590
|
+
el.classList.add("is-focused");
|
|
4644
4591
|
}
|
|
4645
4592
|
});
|
|
4646
4593
|
}
|
|
4647
4594
|
render() {
|
|
4648
|
-
return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.
|
|
4649
|
-
const labelStyle = {
|
|
4595
|
+
return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
|
|
4596
|
+
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
4650
4597
|
const tabId = "tab" + index;
|
|
4651
|
-
const isSelected = index === parseInt(this.
|
|
4598
|
+
const isSelected = index === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
4652
4599
|
if (isSelected) {
|
|
4653
|
-
this.
|
|
4654
|
-
this.
|
|
4600
|
+
this.selectedTab = tab.tabKey;
|
|
4601
|
+
this.selectedIndex = index.toString();
|
|
4655
4602
|
}
|
|
4656
4603
|
return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index), style: labelStyle }, h("span", { class: "tab-label", title: tab.label }, tab.label), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
|
|
4657
4604
|
})), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
@@ -4679,12 +4626,12 @@ let EzTextArea$1 = class extends HTMLElement {
|
|
|
4679
4626
|
*/
|
|
4680
4627
|
this.enabled = true;
|
|
4681
4628
|
/**
|
|
4682
|
-
* Ajusta o
|
|
4629
|
+
* Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
|
|
4683
4630
|
*/
|
|
4684
4631
|
this.rows = 4;
|
|
4685
4632
|
}
|
|
4686
4633
|
showError() {
|
|
4687
|
-
const hasError = typeof this.
|
|
4634
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4688
4635
|
if (hasError) {
|
|
4689
4636
|
this._container.classList.add('hasError');
|
|
4690
4637
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -4764,21 +4711,17 @@ let EzTextArea$1 = class extends HTMLElement {
|
|
|
4764
4711
|
render() {
|
|
4765
4712
|
return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label ?
|
|
4766
4713
|
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.
|
|
4714
|
+
: 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
4715
|
}
|
|
4769
4716
|
get _hostElement() { return this; }
|
|
4770
4717
|
static get watchers() { return {
|
|
4771
|
-
"
|
|
4718
|
+
"errorMessage": ["showError"],
|
|
4772
4719
|
"value": ["updateInputValue"]
|
|
4773
4720
|
}; }
|
|
4774
4721
|
static get style() { return ezTextAreaCss; }
|
|
4775
4722
|
};
|
|
4776
4723
|
|
|
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}";
|
|
4724
|
+
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
4725
|
|
|
4783
4726
|
let EzTextInput$1 = class extends HTMLElement {
|
|
4784
4727
|
constructor() {
|
|
@@ -4792,7 +4735,7 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4792
4735
|
this.enabled = true;
|
|
4793
4736
|
}
|
|
4794
4737
|
showError() {
|
|
4795
|
-
const hasError = typeof this.
|
|
4738
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4796
4739
|
if (hasError) {
|
|
4797
4740
|
this._inputElem.classList.add('hasError');
|
|
4798
4741
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -4867,16 +4810,13 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4867
4810
|
this._inputElem.value = this._maskFormatter.format(value);
|
|
4868
4811
|
}
|
|
4869
4812
|
catch (e) {
|
|
4870
|
-
this.
|
|
4813
|
+
this.errorMessage = e.message;
|
|
4871
4814
|
}
|
|
4872
4815
|
}
|
|
4873
4816
|
this.value = this._inputElem.value;
|
|
4874
4817
|
this.adjustFloatingLabel();
|
|
4875
4818
|
}
|
|
4876
4819
|
isValidValue(value) {
|
|
4877
|
-
if (this.onlynumber) {
|
|
4878
|
-
return value == "" || isValidNumber(value);
|
|
4879
|
-
}
|
|
4880
4820
|
if (this.restrict) {
|
|
4881
4821
|
return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
|
|
4882
4822
|
}
|
|
@@ -4905,11 +4845,11 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4905
4845
|
content.style.justifyContent = "center";
|
|
4906
4846
|
content.style.overflow = "hidden";
|
|
4907
4847
|
content.style.top = "0px";
|
|
4908
|
-
content.style.width = "var(--
|
|
4909
|
-
content.style.height = "var(--
|
|
4848
|
+
content.style.width = "var(--text-input__icon--width)";
|
|
4849
|
+
content.style.height = "var(--text-input--height)";
|
|
4910
4850
|
if (slot.name == "leftIcon") {
|
|
4911
4851
|
content.style.left = "0px";
|
|
4912
|
-
content.style.borderRadius = "var(--
|
|
4852
|
+
content.style.borderRadius = "var(--text-input--border-radius) 0 0 var(--text-input--border-radius)";
|
|
4913
4853
|
this._inputElem.classList.add('icon--left');
|
|
4914
4854
|
if (this._labelElem) {
|
|
4915
4855
|
this._labelElem.classList.add('input__label--left');
|
|
@@ -4917,7 +4857,7 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4917
4857
|
}
|
|
4918
4858
|
else if (slot.name == "rightIcon") {
|
|
4919
4859
|
content.style.right = "0px";
|
|
4920
|
-
content.style.borderRadius = "0 var(--
|
|
4860
|
+
content.style.borderRadius = "0 var(--text-input--border-radius) var(--text-input--border-radius) 0";
|
|
4921
4861
|
this._inputElem.classList.add('icon--right');
|
|
4922
4862
|
if (this._labelElem) {
|
|
4923
4863
|
this._labelElem.classList.add('input__label--right');
|
|
@@ -4935,9 +4875,6 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4935
4875
|
// Lifecycle web component
|
|
4936
4876
|
//---------------------------------------------
|
|
4937
4877
|
componentDidLoad() {
|
|
4938
|
-
if (this.onlynumber) {
|
|
4939
|
-
this._inputElem.classList.add('text--right');
|
|
4940
|
-
}
|
|
4941
4878
|
this.showError();
|
|
4942
4879
|
this.prepareMask();
|
|
4943
4880
|
this.adjustFloatingLabel();
|
|
@@ -4950,7 +4887,7 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4950
4887
|
this.value = this._maskFormatter.format(this.value);
|
|
4951
4888
|
}
|
|
4952
4889
|
catch (e) {
|
|
4953
|
-
this.
|
|
4890
|
+
this.errorMessage = e.message;
|
|
4954
4891
|
}
|
|
4955
4892
|
}
|
|
4956
4893
|
if (!this.isValidValue(this.value)) {
|
|
@@ -4962,11 +4899,11 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4962
4899
|
render() {
|
|
4963
4900
|
return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
|
|
4964
4901
|
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.
|
|
4902
|
+
: 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
4903
|
}
|
|
4967
4904
|
get _hostElement() { return this; }
|
|
4968
4905
|
static get watchers() { return {
|
|
4969
|
-
"
|
|
4906
|
+
"errorMessage": ["showError"],
|
|
4970
4907
|
"mask": ["prepareMask"],
|
|
4971
4908
|
"value": ["updateInputValue"]
|
|
4972
4909
|
}; }
|
|
@@ -4990,7 +4927,7 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
4990
4927
|
this.showSeconds = false;
|
|
4991
4928
|
}
|
|
4992
4929
|
showError() {
|
|
4993
|
-
const hasError = typeof this.
|
|
4930
|
+
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4994
4931
|
if (hasError) {
|
|
4995
4932
|
this._inputElem.classList.add('hasError');
|
|
4996
4933
|
this._messageBoxElem.classList.add('hasError');
|
|
@@ -5066,11 +5003,11 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5066
5003
|
// Event handlers
|
|
5067
5004
|
//---------------------------------------------
|
|
5068
5005
|
handleFocusout() {
|
|
5069
|
-
this.
|
|
5006
|
+
this.errorMessage = "";
|
|
5070
5007
|
this.prepareValue(this.viewValue);
|
|
5071
5008
|
if (!TimeFormatter.validateTime(this.viewValue, this.showSeconds)) {
|
|
5072
5009
|
this.clearField();
|
|
5073
|
-
this.
|
|
5010
|
+
this.errorMessage = "Favor inserir um horário válido.";
|
|
5074
5011
|
}
|
|
5075
5012
|
this.adjustFloatingLabel();
|
|
5076
5013
|
}
|
|
@@ -5080,7 +5017,7 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5080
5017
|
}
|
|
5081
5018
|
catch (e) {
|
|
5082
5019
|
this.clearField();
|
|
5083
|
-
this.
|
|
5020
|
+
this.errorMessage = e.message;
|
|
5084
5021
|
}
|
|
5085
5022
|
}
|
|
5086
5023
|
clearField() {
|
|
@@ -5137,10 +5074,10 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5137
5074
|
render() {
|
|
5138
5075
|
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
5076
|
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.
|
|
5077
|
+
: 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
5078
|
}
|
|
5142
5079
|
static get watchers() { return {
|
|
5143
|
-
"
|
|
5080
|
+
"errorMessage": ["showError"],
|
|
5144
5081
|
"showSeconds": ["prepareMask"],
|
|
5145
5082
|
"value": ["onValueChanged"]
|
|
5146
5083
|
}; }
|
|
@@ -5655,22 +5592,22 @@ const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"la
|
|
|
5655
5592
|
const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516]}]);
|
|
5656
5593
|
const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
|
|
5657
5594
|
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],"
|
|
5595
|
+
const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}]);
|
|
5596
|
+
const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}]);
|
|
5660
5597
|
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
5598
|
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
5599
|
const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
|
|
5663
5600
|
const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
|
|
5664
|
-
const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"
|
|
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],"
|
|
5667
|
-
const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"
|
|
5601
|
+
const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]);
|
|
5602
|
+
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]}]);
|
|
5603
|
+
const EzNumericInput = /*@__PURE__*/proxyCustomElement(EzNumericInput$1, [1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}]);
|
|
5604
|
+
const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540]}]);
|
|
5668
5605
|
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],"
|
|
5670
|
-
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"
|
|
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],"
|
|
5606
|
+
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]}]);
|
|
5607
|
+
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}]);
|
|
5608
|
+
const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538]}]);
|
|
5609
|
+
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]}]);
|
|
5610
|
+
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
5611
|
const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"]}]);
|
|
5675
5612
|
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
5613
|
const FormMetadata = /*@__PURE__*/proxyCustomElement(FormMetadata$1, [1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}]);
|