@sankhyalabs/ezui 1.1.68 → 1.1.71
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 +97 -97
- package/dist/cjs/ez-dialog.cjs.entry.js +7 -1
- package/dist/cjs/ez-modal.cjs.entry.js +16 -69
- package/dist/cjs/ez-popover.cjs.entry.js +13 -18
- package/dist/cjs/ez-popup.cjs.entry.js +2 -2
- 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 +11 -6
- package/dist/collection/components/ez-button/ez-button.js +4 -1
- package/dist/collection/components/ez-calendar/ez-calendar.css +2 -2
- package/dist/collection/components/ez-check/ez-check.js +6 -6
- 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 +36 -37
- package/dist/collection/components/ez-date-input/ez-date-input.js +1 -1
- 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/FormSheet.js +1 -1
- package/dist/collection/components/ez-icon/ez-icon.js +2 -2
- 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-numeric-input/ez-numeric-input.css +1 -1
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.js +2 -2
- 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 +3 -3
- 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 +4 -4
- package/dist/collection/components/ez-text-input/ez-text-input.css +8 -0
- package/dist/collection/components/ez-text-input/ez-text-input.js +3 -3
- package/dist/collection/components/ez-time-input/ez-time-input.css +8 -0
- package/dist/collection/components/ez-time-input/ez-time-input.js +1 -1
- 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 +140 -192
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +97 -97
- package/dist/esm/ez-dialog.entry.js +7 -1
- package/dist/esm/ez-modal.entry.js +16 -69
- package/dist/esm/ez-popover.entry.js +13 -18
- package/dist/esm/ez-popup.entry.js +2 -2
- 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-5aa8871e.entry.js +1 -0
- 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/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 +7 -7
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +1 -1
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +8 -2
- package/dist/types/components/ez-icon/ez-icon.d.ts +1 -1
- 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-numeric-input/ez-numeric-input.d.ts +2 -2
- 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 +2 -2
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +19 -10
- package/dist/types/components/ez-text-area/ez-text-area.d.ts +3 -3
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +3 -3
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +1 -1
- package/dist/types/components/ez-upload/ez-upload.d.ts +3 -3
- package/dist/types/components.d.ts +116 -92
- package/package.json +1 -1
- package/dist/ezui/p-7c7dbfcb.entry.js +0 -1
- package/dist/ezui/p-7d066b1c.entry.js +0 -1
- package/dist/ezui/p-8c8f1c00.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{--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--
|
|
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')}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--button--min-width);height:var(--button--height);font-family:var(--button--font-family);font-size:var(--button--font-size);font-weight:var(--button--font-weight);padding:var(--button--padding-top) var(--button--padding-right) var(--button--padding-bottom) var(--button--padding-left);border-radius:var(--button--border-radius);background-color:var(--button--background-color);color:var(--button--color);fill:var(--button--color);border:var(--button--border)}button:hover{background-color:var(--button--hover--background-color)}button:focus{outline:none;border:var(--button--focus--border);box-shadow:var(--button--focus--box-shadow)}button:disabled{background-color:var(--button--disabled--background-color);color:var(--button--disabled-color);fill:var(--button--disabled-color);border:none;cursor:no-drop}button.icon{width:42px;min-width:42px;height:42px;padding:0px}a{font-family:var(--button--font-family);font-size:var(--button--font-size);font-weight:var(--button--font-weight);color:var(--button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}";
|
|
27
27
|
|
|
28
28
|
let EzButton$1 = class extends HTMLElement {
|
|
29
29
|
constructor() {
|
|
@@ -51,6 +51,9 @@ let EzButton$1 = class extends HTMLElement {
|
|
|
51
51
|
content.style.paddingLeft = "var(--button__inline__icon--padding)";
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
+
else {
|
|
55
|
+
content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
|
|
56
|
+
}
|
|
54
57
|
}
|
|
55
58
|
render() {
|
|
56
59
|
if (this.mode == "icon") {
|
|
@@ -884,12 +887,12 @@ let EzCheck$1 = class extends HTMLElement {
|
|
|
884
887
|
this.__attachShadow();
|
|
885
888
|
this.ezChange = createEvent(this, "ezChange", 7);
|
|
886
889
|
/**
|
|
887
|
-
* Deixa o campo disponível ou não
|
|
890
|
+
* Deixa o campo disponível ou não para interação com o usuário.
|
|
888
891
|
*/
|
|
889
892
|
this.enabled = true;
|
|
890
893
|
/**
|
|
891
894
|
* Existem dois modos de visualização: regular e switch.
|
|
892
|
-
* Se esta propriedade for omitida, o componete assume o formato "regular"
|
|
895
|
+
* Se esta propriedade for omitida, o componete assume o formato "regular".
|
|
893
896
|
* No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
|
|
894
897
|
* No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
|
|
895
898
|
*/
|
|
@@ -930,7 +933,7 @@ let EzCheck$1 = class extends HTMLElement {
|
|
|
930
933
|
getLabelClasses() {
|
|
931
934
|
let classes = "label";
|
|
932
935
|
if (!this.enabled) {
|
|
933
|
-
classes
|
|
936
|
+
classes += " label--disabled";
|
|
934
937
|
}
|
|
935
938
|
return classes;
|
|
936
939
|
}
|
|
@@ -985,7 +988,7 @@ let EzCollapsibleBox$1 = class extends HTMLElement {
|
|
|
985
988
|
static get style() { return ezCollapsibleBoxCss; }
|
|
986
989
|
};
|
|
987
990
|
|
|
988
|
-
const ezComboBoxCss = ":host{--
|
|
991
|
+
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
992
|
|
|
990
993
|
let EzComboBox$1 = class extends HTMLElement {
|
|
991
994
|
constructor() {
|
|
@@ -1000,11 +1003,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1000
1003
|
/**
|
|
1001
1004
|
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
1002
1005
|
*/
|
|
1003
|
-
this.
|
|
1006
|
+
this.showSelectedValue = false;
|
|
1004
1007
|
/**
|
|
1005
1008
|
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
1006
1009
|
*/
|
|
1007
|
-
this.
|
|
1010
|
+
this.showOptionValue = false;
|
|
1008
1011
|
}
|
|
1009
1012
|
internalUpdate() {
|
|
1010
1013
|
if (this._inputElement) {
|
|
@@ -1016,29 +1019,29 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1016
1019
|
this.updateVisibleOptions();
|
|
1017
1020
|
}
|
|
1018
1021
|
getText() {
|
|
1019
|
-
let text =
|
|
1022
|
+
let text = "";
|
|
1020
1023
|
const selected = this.getSelectedOption();
|
|
1021
1024
|
if (selected) {
|
|
1022
|
-
text = this.
|
|
1025
|
+
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
1023
1026
|
}
|
|
1024
1027
|
return text;
|
|
1025
1028
|
}
|
|
1026
1029
|
getSelectedOption() {
|
|
1027
|
-
if (typeof this.value ===
|
|
1030
|
+
if (typeof this.value === "string" || this.value instanceof String) {
|
|
1028
1031
|
return this._visibleOptions.find(o => o.value === this.value);
|
|
1029
1032
|
}
|
|
1030
1033
|
return this.value;
|
|
1031
1034
|
}
|
|
1032
1035
|
updateVisibleOptions() {
|
|
1033
1036
|
let opts = this._source || [];
|
|
1034
|
-
if (!this.
|
|
1037
|
+
if (!this.searchMode && this._criteria) {
|
|
1035
1038
|
const upperCriteria = this._criteria.toUpperCase();
|
|
1036
1039
|
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
1037
1040
|
}
|
|
1038
|
-
this._visibleOptions = [{ value:
|
|
1041
|
+
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
1039
1042
|
}
|
|
1040
1043
|
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.
|
|
1044
|
+
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
1045
|
}
|
|
1043
1046
|
showOptions() {
|
|
1044
1047
|
if (!this.enabled) {
|
|
@@ -1047,10 +1050,10 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1047
1050
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
1048
1051
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
1049
1052
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
1050
|
-
const top = this.errorMessage ?
|
|
1053
|
+
const top = this.errorMessage ? "0px" : "-17px";
|
|
1051
1054
|
this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
1052
1055
|
window.requestAnimationFrame(() => {
|
|
1053
|
-
this._optionsList.scrollIntoView({ behavior:
|
|
1056
|
+
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
1054
1057
|
});
|
|
1055
1058
|
}
|
|
1056
1059
|
hideOptions() {
|
|
@@ -1063,7 +1066,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1063
1066
|
return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
|
|
1064
1067
|
}
|
|
1065
1068
|
nextOption() {
|
|
1066
|
-
if (this.
|
|
1069
|
+
if (this.searchMode && !this.isOptionsVisible()) {
|
|
1067
1070
|
return;
|
|
1068
1071
|
}
|
|
1069
1072
|
this.showOptions();
|
|
@@ -1099,7 +1102,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1099
1102
|
selectOption(opt) {
|
|
1100
1103
|
const currentOpt = this.getSelectedOption();
|
|
1101
1104
|
if (currentOpt !== opt) {
|
|
1102
|
-
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ?
|
|
1105
|
+
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
1103
1106
|
this.value = adjustedOpt;
|
|
1104
1107
|
this.ezChange.emit(adjustedOpt);
|
|
1105
1108
|
}
|
|
@@ -1117,10 +1120,10 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1117
1120
|
this.updateVisibleOptions();
|
|
1118
1121
|
}
|
|
1119
1122
|
}
|
|
1120
|
-
loadOptions(mode, argument =
|
|
1123
|
+
loadOptions(mode, argument = "") {
|
|
1121
1124
|
this._criteria = argument;
|
|
1122
|
-
if (this.
|
|
1123
|
-
this.updateSource(this.
|
|
1125
|
+
if (this.optionLoader) {
|
|
1126
|
+
this.updateSource(this.optionLoader({ mode, argument }));
|
|
1124
1127
|
}
|
|
1125
1128
|
else {
|
|
1126
1129
|
this.updateSource(this.options);
|
|
@@ -1128,7 +1131,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1128
1131
|
}
|
|
1129
1132
|
cancelPreselection() {
|
|
1130
1133
|
if (!this._inputElement.value && this.value) {
|
|
1131
|
-
this.selectOption(
|
|
1134
|
+
this.selectOption(undefined);
|
|
1132
1135
|
}
|
|
1133
1136
|
else {
|
|
1134
1137
|
this.internalUpdate();
|
|
@@ -1140,11 +1143,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1140
1143
|
componentWillLoad() {
|
|
1141
1144
|
if (this.options === undefined) {
|
|
1142
1145
|
this.options = [];
|
|
1143
|
-
const optionsTags = this.el.querySelectorAll(
|
|
1146
|
+
const optionsTags = this.el.querySelectorAll("option");
|
|
1144
1147
|
if (optionsTags) {
|
|
1145
1148
|
optionsTags.forEach(e => {
|
|
1146
1149
|
let label = e.innerText;
|
|
1147
|
-
let value = e.getAttribute(
|
|
1150
|
+
let value = e.getAttribute("value");
|
|
1148
1151
|
if (!value) {
|
|
1149
1152
|
value = label;
|
|
1150
1153
|
}
|
|
@@ -1153,11 +1156,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1153
1156
|
});
|
|
1154
1157
|
}
|
|
1155
1158
|
}
|
|
1156
|
-
if (this.
|
|
1159
|
+
if (this.searchMode) {
|
|
1157
1160
|
this.updateSource([]);
|
|
1158
1161
|
}
|
|
1159
1162
|
else {
|
|
1160
|
-
this.loadOptions(
|
|
1163
|
+
this.loadOptions("PRELOAD");
|
|
1161
1164
|
}
|
|
1162
1165
|
}
|
|
1163
1166
|
componentDidRender() {
|
|
@@ -1175,13 +1178,12 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1175
1178
|
const argument = event.target.value;
|
|
1176
1179
|
this._criteria = argument;
|
|
1177
1180
|
if (this._criteria) {
|
|
1178
|
-
if (this.
|
|
1181
|
+
if (this.searchMode) {
|
|
1179
1182
|
if (this._changeDeboucingTimeout) {
|
|
1180
1183
|
window.clearTimeout(this._changeDeboucingTimeout);
|
|
1181
1184
|
}
|
|
1182
1185
|
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
1183
|
-
|
|
1184
|
-
this.loadOptions('PREDICTIVE', argument);
|
|
1186
|
+
this.loadOptions("PREDICTIVE", argument);
|
|
1185
1187
|
}, 200);
|
|
1186
1188
|
}
|
|
1187
1189
|
else {
|
|
@@ -1191,7 +1193,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1191
1193
|
}
|
|
1192
1194
|
}
|
|
1193
1195
|
onTextInputClickHandler() {
|
|
1194
|
-
if (!this.
|
|
1196
|
+
if (!this.searchMode) {
|
|
1195
1197
|
this.showOptions();
|
|
1196
1198
|
}
|
|
1197
1199
|
}
|
|
@@ -1216,8 +1218,8 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1216
1218
|
this.cancelPreselection();
|
|
1217
1219
|
}
|
|
1218
1220
|
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(), errorMessage: this.errorMessage }, this.
|
|
1220
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions(
|
|
1221
|
+
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 ?
|
|
1222
|
+
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
1221
1223
|
:
|
|
1222
1224
|
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
1225
|
}
|
|
@@ -1306,7 +1308,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1306
1308
|
static get style() { return ezDateInputCss; }
|
|
1307
1309
|
};
|
|
1308
1310
|
|
|
1309
|
-
const ezDialogCss = ":host{--
|
|
1311
|
+
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
1312
|
|
|
1311
1313
|
class Message {
|
|
1312
1314
|
constructor(title, message, critical, confirm, icon, callBack) {
|
|
@@ -1339,6 +1341,9 @@ let EzDialog$1 = class extends HTMLElement {
|
|
|
1339
1341
|
this.opened = false;
|
|
1340
1342
|
this._messageQueue = [];
|
|
1341
1343
|
}
|
|
1344
|
+
/**
|
|
1345
|
+
* Lida com o clique nos botões de dentro do componente.
|
|
1346
|
+
*/
|
|
1342
1347
|
async handleButtonClick(selectedOption) {
|
|
1343
1348
|
this.opened = this._messageQueue.length > 0;
|
|
1344
1349
|
if (this._currentMessage.callBack) {
|
|
@@ -1350,6 +1355,9 @@ let EzDialog$1 = class extends HTMLElement {
|
|
|
1350
1355
|
this._currentMessage = this._messageQueue.shift();
|
|
1351
1356
|
forceUpdate(this);
|
|
1352
1357
|
}
|
|
1358
|
+
/**
|
|
1359
|
+
* Faz com que o componente seja exibido.
|
|
1360
|
+
*/
|
|
1353
1361
|
async show(title, message, critical, confirm, icon) {
|
|
1354
1362
|
this.opened = true;
|
|
1355
1363
|
return new Promise(resolve => {
|
|
@@ -3461,7 +3469,7 @@ const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder,
|
|
|
3461
3469
|
buttons.previousVisible = false;
|
|
3462
3470
|
}
|
|
3463
3471
|
return h("div", { class: "form-sheet" },
|
|
3464
|
-
tabs ? h("ez-tabselector", {
|
|
3472
|
+
tabs ? h("ez-tabselector", { selectedIndex: selectedTab, selectedTab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
|
|
3465
3473
|
dataUnit ? h(NavigationBar, { enabled: enabled, dataUnit: dataUnit, buttonProps: buttons }) : null,
|
|
3466
3474
|
h("div", { class: "tab__container" },
|
|
3467
3475
|
items ? items.map(item => buildFormItem(item, name, store, currentDU, enabled)) : null,
|
|
@@ -3729,7 +3737,7 @@ let EzIcon$1 = class extends HTMLElement {
|
|
|
3729
3737
|
this.__registerHost();
|
|
3730
3738
|
this.__attachShadow();
|
|
3731
3739
|
/**
|
|
3732
|
-
* Tamanho do
|
|
3740
|
+
* Tamanho do ícone
|
|
3733
3741
|
*/
|
|
3734
3742
|
this.size = 'medium';
|
|
3735
3743
|
}
|
|
@@ -3856,104 +3864,51 @@ let EzModal$1 = class extends HTMLElement {
|
|
|
3856
3864
|
/**
|
|
3857
3865
|
* Controle de exibição do Modal
|
|
3858
3866
|
*/
|
|
3859
|
-
this.
|
|
3867
|
+
this.opened = true;
|
|
3860
3868
|
/**
|
|
3861
|
-
* Define se o modal será fechado ao
|
|
3869
|
+
* Define se o modal será fechado ao clicar ESC
|
|
3862
3870
|
*/
|
|
3863
|
-
this.
|
|
3871
|
+
this.closeEsc = false;
|
|
3864
3872
|
/**
|
|
3865
3873
|
* Define se o modal será fechado ao clicar fora do conteúdo.
|
|
3866
3874
|
*/
|
|
3867
|
-
this.
|
|
3875
|
+
this.closeOutsideClick = false;
|
|
3868
3876
|
this.handleKeyboardEvent = (ev) => {
|
|
3869
|
-
if ((ev === null || ev === void 0 ? void 0 : ev.key) ===
|
|
3877
|
+
if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
|
|
3870
3878
|
this.closeModal();
|
|
3871
3879
|
}
|
|
3872
3880
|
};
|
|
3873
3881
|
}
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
// this.oppened = false;
|
|
3878
|
-
// this.ezChange.emit(this.oppened);
|
|
3879
|
-
// }
|
|
3880
|
-
// }
|
|
3881
|
-
handleOppenedChange() {
|
|
3882
|
-
if (this.oppened) {
|
|
3883
|
-
document.addEventListener('keydown', this.handleKeyboardEvent);
|
|
3882
|
+
handleopenedChange() {
|
|
3883
|
+
if (this.opened) {
|
|
3884
|
+
document.addEventListener("keydown", this.handleKeyboardEvent);
|
|
3884
3885
|
}
|
|
3885
3886
|
else {
|
|
3886
|
-
document.removeEventListener(
|
|
3887
|
+
document.removeEventListener("keydown", this.handleKeyboardEvent);
|
|
3887
3888
|
}
|
|
3888
3889
|
}
|
|
3889
3890
|
closeModal() {
|
|
3890
|
-
this.
|
|
3891
|
-
this.ezCloseModal.emit(this.
|
|
3892
|
-
}
|
|
3893
|
-
///////
|
|
3894
|
-
// trapTabKey(e) {
|
|
3895
|
-
// // Check for TAB key press
|
|
3896
|
-
// if (e.keyCode === 9) {
|
|
3897
|
-
// // SHIFT + TAB
|
|
3898
|
-
// if (e.shiftKey) {
|
|
3899
|
-
// if (document.activeElement === this._firstTabStop) {
|
|
3900
|
-
// e.preventDefault();
|
|
3901
|
-
// this._lastTabStop.focus();
|
|
3902
|
-
// }
|
|
3903
|
-
// // TAB
|
|
3904
|
-
// } else {
|
|
3905
|
-
// if (document.activeElement === this._lastTabStop) {
|
|
3906
|
-
// e.preventDefault();
|
|
3907
|
-
// this._firstTabStop.focus();
|
|
3908
|
-
// }
|
|
3909
|
-
// }
|
|
3910
|
-
// }
|
|
3911
|
-
// if (e.keyCode === 27) {
|
|
3912
|
-
// this.closeModal();
|
|
3913
|
-
// }
|
|
3914
|
-
// }
|
|
3915
|
-
// closeModal() {
|
|
3916
|
-
// this.oppened = false;
|
|
3917
|
-
// this._focusedElementBeforeModal.focus();
|
|
3918
|
-
// }
|
|
3919
|
-
// componentDidLoad() {
|
|
3920
|
-
// this._overlay.addEventListener('keydown', (ev) => { this.trapTabKey(ev) });
|
|
3921
|
-
// // Save current focus
|
|
3922
|
-
// this._focusedElementBeforeModal = document.activeElement;
|
|
3923
|
-
// // Find all focusable children
|
|
3924
|
-
// var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
|
|
3925
|
-
// var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
|
|
3926
|
-
// // Convert NodeList to Array
|
|
3927
|
-
// focusableElements = Array.prototype.slice.call(focusableElements);
|
|
3928
|
-
// this._firstTabStop = focusableElements[0];
|
|
3929
|
-
// this._lastTabStop = focusableElements[focusableElements.length - 1];
|
|
3930
|
-
// // Focus first child
|
|
3931
|
-
// this._firstTabStop.focus();
|
|
3932
|
-
// }
|
|
3933
|
-
// componentDidUpdate() {
|
|
3934
|
-
// var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
|
|
3935
|
-
// var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
|
|
3936
|
-
// }
|
|
3937
|
-
/////
|
|
3891
|
+
this.opened = false;
|
|
3892
|
+
this.ezCloseModal.emit(this.opened);
|
|
3893
|
+
}
|
|
3938
3894
|
componentDidLoad() {
|
|
3939
|
-
this.
|
|
3895
|
+
this.handleopenedChange();
|
|
3940
3896
|
}
|
|
3941
3897
|
onMouseDownHandler(event) {
|
|
3942
|
-
if (this.
|
|
3898
|
+
if (this.closeOutsideClick && event.target === this._overlay) {
|
|
3943
3899
|
this.closeModal();
|
|
3944
3900
|
}
|
|
3945
3901
|
}
|
|
3946
|
-
//Ainda teremos ajustes visuais
|
|
3947
3902
|
render() {
|
|
3948
3903
|
const positionSufix = this.align === "left" ? "left" : "right";
|
|
3949
|
-
return (h(Host, null, this.
|
|
3904
|
+
return (h(Host, null, this.opened
|
|
3950
3905
|
?
|
|
3951
|
-
h("div", { class:
|
|
3906
|
+
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))))
|
|
3952
3907
|
:
|
|
3953
3908
|
undefined));
|
|
3954
3909
|
}
|
|
3955
3910
|
static get watchers() { return {
|
|
3956
|
-
"
|
|
3911
|
+
"opened": ["handleopenedChange"]
|
|
3957
3912
|
}; }
|
|
3958
3913
|
static get style() { return ezModalCss; }
|
|
3959
3914
|
};
|
|
@@ -4259,7 +4214,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4259
4214
|
static get style() { return ezNumericInputCss; }
|
|
4260
4215
|
};
|
|
4261
4216
|
|
|
4262
|
-
const ezPopoverCss = ":host{--
|
|
4217
|
+
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%}";
|
|
4263
4218
|
|
|
4264
4219
|
let EzPopover$1 = class extends HTMLElement {
|
|
4265
4220
|
constructor() {
|
|
@@ -4272,28 +4227,28 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4272
4227
|
* No modo floating = false o popover só se tornará visível
|
|
4273
4228
|
* quando o método show() for acionado.
|
|
4274
4229
|
*/
|
|
4275
|
-
this.
|
|
4230
|
+
this.autoClose = true;
|
|
4276
4231
|
/**
|
|
4277
4232
|
* Offset top do popover em relação ao componente pai
|
|
4278
4233
|
*/
|
|
4279
|
-
this.top =
|
|
4234
|
+
this.top = "0px";
|
|
4280
4235
|
/**
|
|
4281
4236
|
* Offset left do popover em relação ao componente pai
|
|
4282
4237
|
*/
|
|
4283
|
-
this.left =
|
|
4238
|
+
this.left = "0px";
|
|
4284
4239
|
/**
|
|
4285
4240
|
* Offset bottom do popover em relação ao componente pai
|
|
4286
4241
|
*/
|
|
4287
|
-
this.bottom =
|
|
4242
|
+
this.bottom = "0px";
|
|
4288
4243
|
/**
|
|
4289
4244
|
* Offset right do popover em relação ao componente pai
|
|
4290
4245
|
*/
|
|
4291
|
-
this.right =
|
|
4246
|
+
this.right = "0px";
|
|
4292
4247
|
/**
|
|
4293
4248
|
* Ajusta o comportamento da largura do popover.
|
|
4294
4249
|
* Opções: "100% e "fit-content" (default)
|
|
4295
4250
|
*/
|
|
4296
|
-
this.
|
|
4251
|
+
this.boxWidth = "fit-content";
|
|
4297
4252
|
}
|
|
4298
4253
|
dispatchVisibilityChange(newValue, oldValue) {
|
|
4299
4254
|
if (newValue != oldValue) {
|
|
@@ -4305,7 +4260,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4305
4260
|
*/
|
|
4306
4261
|
async updatePosition(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
|
|
4307
4262
|
const floatingOptions = {
|
|
4308
|
-
autoClose: this.
|
|
4263
|
+
autoClose: this.autoClose,
|
|
4309
4264
|
top,
|
|
4310
4265
|
left,
|
|
4311
4266
|
bottom,
|
|
@@ -4317,8 +4272,6 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4317
4272
|
if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
|
|
4318
4273
|
return true;
|
|
4319
4274
|
}
|
|
4320
|
-
//Here: we pass this._box as parameter but we need to change to _host
|
|
4321
|
-
//because we need to get the lasChild (inner content to put in slot)
|
|
4322
4275
|
_container = this._host;
|
|
4323
4276
|
return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
|
|
4324
4277
|
}
|
|
@@ -4327,11 +4280,10 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4327
4280
|
}
|
|
4328
4281
|
/**
|
|
4329
4282
|
* Faz com que o popover seja renderizado na DOM.
|
|
4330
|
-
*
|
|
4331
4283
|
*/
|
|
4332
4284
|
async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
|
|
4333
4285
|
const floatingOptions = {
|
|
4334
|
-
autoClose: this.
|
|
4286
|
+
autoClose: this.autoClose,
|
|
4335
4287
|
top,
|
|
4336
4288
|
left,
|
|
4337
4289
|
bottom,
|
|
@@ -4343,14 +4295,12 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4343
4295
|
if (_container.shadowRoot && _container.shadowRoot.contains(node)) {
|
|
4344
4296
|
return true;
|
|
4345
4297
|
}
|
|
4346
|
-
// Here: we pass this._box as parameter but we need to change to _host
|
|
4347
|
-
// because we need to get the lasChild (inner content to put in slot)
|
|
4348
4298
|
_container = this._host;
|
|
4349
4299
|
return !_container.lastElementChild.shadowRoot ? _container.contains(node) : _container.lastElementChild.shadowRoot.contains(node);
|
|
4350
4300
|
}
|
|
4351
4301
|
};
|
|
4352
4302
|
this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
|
|
4353
|
-
this.
|
|
4303
|
+
this.opened = true;
|
|
4354
4304
|
}
|
|
4355
4305
|
/**
|
|
4356
4306
|
* Usado no modo floating. Faz com que o componente seja ocultado.
|
|
@@ -4359,7 +4309,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4359
4309
|
if (this._floatingID !== undefined) {
|
|
4360
4310
|
FloatingManager.close(this._floatingID);
|
|
4361
4311
|
this._floatingID = undefined;
|
|
4362
|
-
this.
|
|
4312
|
+
this.opened = false;
|
|
4363
4313
|
}
|
|
4364
4314
|
}
|
|
4365
4315
|
componentDidRender() {
|
|
@@ -4369,16 +4319,16 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4369
4319
|
}
|
|
4370
4320
|
}
|
|
4371
4321
|
render() {
|
|
4372
|
-
return (h(Host, null, h("section", { ref: el => this._container = el }, h("div", { class: `box ${this.
|
|
4322
|
+
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)))));
|
|
4373
4323
|
}
|
|
4374
4324
|
get _host() { return this; }
|
|
4375
4325
|
static get watchers() { return {
|
|
4376
|
-
"
|
|
4326
|
+
"opened": ["dispatchVisibilityChange"]
|
|
4377
4327
|
}; }
|
|
4378
4328
|
static get style() { return ezPopoverCss; }
|
|
4379
4329
|
};
|
|
4380
4330
|
|
|
4381
|
-
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--
|
|
4331
|
+
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%}}";
|
|
4382
4332
|
|
|
4383
4333
|
let EzPopup$1 = class extends HTMLElement {
|
|
4384
4334
|
constructor() {
|
|
@@ -4403,7 +4353,7 @@ let EzPopup$1 = class extends HTMLElement {
|
|
|
4403
4353
|
*/
|
|
4404
4354
|
this.opened = false;
|
|
4405
4355
|
/**
|
|
4406
|
-
* Define o componente utilizará um cabeçalho com botão de fechamento.
|
|
4356
|
+
* Define se o componente utilizará um cabeçalho com botão de fechamento.
|
|
4407
4357
|
*/
|
|
4408
4358
|
this.useHeader = false;
|
|
4409
4359
|
}
|
|
@@ -4454,7 +4404,7 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4454
4404
|
this.ezChange.emit(evt.detail);
|
|
4455
4405
|
}
|
|
4456
4406
|
render() {
|
|
4457
|
-
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage,
|
|
4407
|
+
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 }));
|
|
4458
4408
|
}
|
|
4459
4409
|
;
|
|
4460
4410
|
static get watchers() { return {
|
|
@@ -4463,93 +4413,93 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4463
4413
|
static get style() { return ezSearchCss; }
|
|
4464
4414
|
};
|
|
4465
4415
|
|
|
4466
|
-
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);--
|
|
4416
|
+
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}";
|
|
4467
4417
|
|
|
4468
4418
|
let EzTabselector$1 = class extends HTMLElement {
|
|
4469
4419
|
constructor() {
|
|
4470
4420
|
super();
|
|
4471
4421
|
this.__registerHost();
|
|
4472
4422
|
this.__attachShadow();
|
|
4473
|
-
this.
|
|
4474
|
-
this.
|
|
4475
|
-
if (ev.key ===
|
|
4476
|
-
this.
|
|
4477
|
-
this.
|
|
4478
|
-
this.
|
|
4479
|
-
this.handleTabClick(this.
|
|
4423
|
+
this.ezChange = createEvent(this, "ezChange", 7);
|
|
4424
|
+
this.setFocusedParam = (ev) => {
|
|
4425
|
+
if (ev.key === "Enter") {
|
|
4426
|
+
this.selectedIndex = this.focusedIndex;
|
|
4427
|
+
this.focusedIndex = undefined;
|
|
4428
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
4429
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
4480
4430
|
ev.preventDefault();
|
|
4481
|
-
this.setFocusedTab(this.
|
|
4431
|
+
this.setFocusedTab(this.selectedIndex);
|
|
4482
4432
|
}
|
|
4483
|
-
else if (ev.key ===
|
|
4433
|
+
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
4484
4434
|
let operator = undefined;
|
|
4485
|
-
if (ev.key ===
|
|
4435
|
+
if (ev.key === "ArrowLeft") {
|
|
4486
4436
|
operator = false;
|
|
4487
4437
|
}
|
|
4488
|
-
else if (ev.key ===
|
|
4438
|
+
else if (ev.key === "ArrowRight") {
|
|
4489
4439
|
operator = true;
|
|
4490
4440
|
}
|
|
4491
4441
|
else {
|
|
4492
4442
|
return;
|
|
4493
4443
|
}
|
|
4494
|
-
if (this.
|
|
4444
|
+
if (this.focusedIndex === undefined) {
|
|
4495
4445
|
if (operator === false) {
|
|
4496
|
-
this.
|
|
4446
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
|
|
4497
4447
|
}
|
|
4498
4448
|
else {
|
|
4499
|
-
this.
|
|
4449
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
|
|
4500
4450
|
}
|
|
4501
4451
|
}
|
|
4502
4452
|
else {
|
|
4503
4453
|
if (operator === false) {
|
|
4504
|
-
this.
|
|
4454
|
+
this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
|
|
4505
4455
|
}
|
|
4506
4456
|
else {
|
|
4507
|
-
this.
|
|
4457
|
+
this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
|
|
4508
4458
|
}
|
|
4509
4459
|
}
|
|
4510
|
-
if (parseInt(this.
|
|
4511
|
-
this.
|
|
4460
|
+
if (parseInt(this.focusedIndex) < 0) {
|
|
4461
|
+
this.focusedIndex = "0";
|
|
4512
4462
|
}
|
|
4513
|
-
else if (parseInt(this.
|
|
4514
|
-
this.
|
|
4463
|
+
else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
|
|
4464
|
+
this.focusedIndex = (this._processedTabs.length - 1).toString();
|
|
4515
4465
|
}
|
|
4516
|
-
this.
|
|
4517
|
-
this.setFocusedTab(this.
|
|
4518
|
-
this.
|
|
4466
|
+
this.setFocusedBtn(true, this.focusedIndex);
|
|
4467
|
+
this.setFocusedTab(this.focusedIndex);
|
|
4468
|
+
this.ezChange.emit();
|
|
4519
4469
|
}
|
|
4520
|
-
else if (ev.key ===
|
|
4521
|
-
this.
|
|
4522
|
-
this.
|
|
4523
|
-
this.handleTabClick(this.
|
|
4470
|
+
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
4471
|
+
this.focusedIndex = undefined;
|
|
4472
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
4473
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
4524
4474
|
ev.preventDefault();
|
|
4525
|
-
this.setFocusedTab(this.
|
|
4475
|
+
this.setFocusedTab(this.selectedIndex);
|
|
4526
4476
|
}
|
|
4527
4477
|
// this.setFocusedTab();
|
|
4528
4478
|
};
|
|
4529
4479
|
}
|
|
4530
4480
|
handleTabClick(tab, index) {
|
|
4531
|
-
this.
|
|
4532
|
-
this.
|
|
4533
|
-
this.
|
|
4534
|
-
this.
|
|
4535
|
-
this.
|
|
4481
|
+
this.selectedIndex = index.toString();
|
|
4482
|
+
this.focusedIndex = undefined;
|
|
4483
|
+
this.selectedTab = tab;
|
|
4484
|
+
this.ezChange.emit();
|
|
4485
|
+
this.setFocusedBtn(false, this.selectedIndex);
|
|
4536
4486
|
}
|
|
4537
4487
|
componentWillRender() {
|
|
4538
4488
|
if (!this._processedTabs) {
|
|
4539
4489
|
this._processedTabs = [];
|
|
4540
4490
|
if (this.tabs) {
|
|
4541
|
-
this.tabs.split(
|
|
4491
|
+
this.tabs.split(",").forEach((label) => {
|
|
4542
4492
|
label = label.trim();
|
|
4543
4493
|
this._processedTabs.push(new Tab(label, label));
|
|
4544
4494
|
});
|
|
4545
4495
|
}
|
|
4546
|
-
this._hostElem.querySelectorAll(
|
|
4547
|
-
const tabKey = elem.getAttribute(
|
|
4548
|
-
const label = elem.getAttribute(
|
|
4496
|
+
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
4497
|
+
const tabKey = elem.getAttribute("tabKey");
|
|
4498
|
+
const label = elem.getAttribute("label");
|
|
4549
4499
|
const t = new Tab(label, tabKey);
|
|
4550
4500
|
const content = elem.firstChild;
|
|
4551
4501
|
if (content) {
|
|
4552
|
-
content.setAttribute(
|
|
4502
|
+
content.setAttribute("slot", "tab" + this._processedTabs.length);
|
|
4553
4503
|
this._hostElem.appendChild(content);
|
|
4554
4504
|
}
|
|
4555
4505
|
this._processedTabs.push(t);
|
|
@@ -4573,7 +4523,7 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4573
4523
|
const container = this._scrollContainer;
|
|
4574
4524
|
if (container) {
|
|
4575
4525
|
let lastTab = null;
|
|
4576
|
-
container.querySelectorAll(
|
|
4526
|
+
container.querySelectorAll(".tab").forEach((tab) => {
|
|
4577
4527
|
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
4578
4528
|
lastTab = tab;
|
|
4579
4529
|
}
|
|
@@ -4592,18 +4542,18 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4592
4542
|
this._startHidden = container.scrollLeft > 0;
|
|
4593
4543
|
this._endHidden = remainingScroll > 0;
|
|
4594
4544
|
if (this._startHidden) {
|
|
4595
|
-
this._backwardButton.classList.remove(
|
|
4545
|
+
this._backwardButton.classList.remove("hidden");
|
|
4596
4546
|
}
|
|
4597
4547
|
else {
|
|
4598
|
-
this._backwardButton.classList.add(
|
|
4548
|
+
this._backwardButton.classList.add("hidden");
|
|
4599
4549
|
}
|
|
4600
4550
|
if (this._endHidden) {
|
|
4601
|
-
this._forwardButton.classList.remove(
|
|
4551
|
+
this._forwardButton.classList.remove("hidden");
|
|
4602
4552
|
}
|
|
4603
4553
|
else {
|
|
4604
|
-
this._forwardButton.classList.add(
|
|
4554
|
+
this._forwardButton.classList.add("hidden");
|
|
4605
4555
|
}
|
|
4606
|
-
const classNames = [
|
|
4556
|
+
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
4607
4557
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
4608
4558
|
classNames.forEach((name) => {
|
|
4609
4559
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -4620,11 +4570,9 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4620
4570
|
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
4621
4571
|
}
|
|
4622
4572
|
setFocusedTab(index) {
|
|
4623
|
-
window.clearTimeout(this.
|
|
4624
|
-
this.
|
|
4573
|
+
window.clearTimeout(this._scrollCallBackTest);
|
|
4574
|
+
this._scrollCallBackTest = window.setTimeout(() => {
|
|
4625
4575
|
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
4626
|
-
console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
|
|
4627
|
-
console.log('tabtoscroll', tabtoscroll);
|
|
4628
4576
|
tabtoscroll.scrollIntoView();
|
|
4629
4577
|
}, 200);
|
|
4630
4578
|
}
|
|
@@ -4633,27 +4581,27 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4633
4581
|
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
4634
4582
|
}
|
|
4635
4583
|
const context = this._textMesurement.getContext("2d");
|
|
4636
|
-
context.font =
|
|
4637
|
-
return Math.min(220, 24 + context.measureText(text).width) +
|
|
4584
|
+
context.font = "14px Sora, Algerian";
|
|
4585
|
+
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
4638
4586
|
}
|
|
4639
4587
|
;
|
|
4640
|
-
|
|
4641
|
-
const tabsButtons = this._scrollContainer.querySelectorAll(
|
|
4588
|
+
setFocusedBtn(visible, parameter) {
|
|
4589
|
+
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
4642
4590
|
tabsButtons.forEach((el) => {
|
|
4643
|
-
el.classList.remove(
|
|
4644
|
-
if (el.id ===
|
|
4645
|
-
el.classList.add(
|
|
4591
|
+
el.classList.remove("is-focused");
|
|
4592
|
+
if (el.id === "tab" + parameter && visible) {
|
|
4593
|
+
el.classList.add("is-focused");
|
|
4646
4594
|
}
|
|
4647
4595
|
});
|
|
4648
4596
|
}
|
|
4649
4597
|
render() {
|
|
4650
|
-
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.
|
|
4651
|
-
const labelStyle = {
|
|
4598
|
+
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) => {
|
|
4599
|
+
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
4652
4600
|
const tabId = "tab" + index;
|
|
4653
|
-
const isSelected = index === parseInt(this.
|
|
4601
|
+
const isSelected = index === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
4654
4602
|
if (isSelected) {
|
|
4655
|
-
this.
|
|
4656
|
-
this.
|
|
4603
|
+
this.selectedTab = tab.tabKey;
|
|
4604
|
+
this.selectedIndex = index.toString();
|
|
4657
4605
|
}
|
|
4658
4606
|
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); } }));
|
|
4659
4607
|
})), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
@@ -4681,7 +4629,7 @@ let EzTextArea$1 = class extends HTMLElement {
|
|
|
4681
4629
|
*/
|
|
4682
4630
|
this.enabled = true;
|
|
4683
4631
|
/**
|
|
4684
|
-
* Ajusta o
|
|
4632
|
+
* Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
|
|
4685
4633
|
*/
|
|
4686
4634
|
this.rows = 4;
|
|
4687
4635
|
}
|
|
@@ -5647,19 +5595,19 @@ const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"la
|
|
|
5647
5595
|
const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516]}]);
|
|
5648
5596
|
const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
|
|
5649
5597
|
const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513]}]);
|
|
5650
|
-
const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"
|
|
5598
|
+
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]}]);
|
|
5651
5599
|
const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}]);
|
|
5652
5600
|
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"]}]);
|
|
5653
5601
|
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]}]);
|
|
5654
5602
|
const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
|
|
5655
5603
|
const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
|
|
5656
|
-
const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"
|
|
5604
|
+
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"]}]);
|
|
5657
5605
|
const EzNumberInput = /*@__PURE__*/proxyCustomElement(NumberInput, [1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513]}]);
|
|
5658
5606
|
const EzNumericInput = /*@__PURE__*/proxyCustomElement(EzNumericInput$1, [1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}]);
|
|
5659
|
-
const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"
|
|
5607
|
+
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]}]);
|
|
5660
5608
|
const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]);
|
|
5661
5609
|
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]}]);
|
|
5662
|
-
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"
|
|
5610
|
+
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}]);
|
|
5663
5611
|
const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538]}]);
|
|
5664
5612
|
const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1]}]);
|
|
5665
5613
|
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"]}]);
|