@sankhyalabs/ezui 1.1.69 → 1.1.72
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/assets/actions-sprite.svg +257 -0
- package/dist/cjs/CSSVarsUtils-f8827674.js +18 -0
- package/dist/cjs/ez-action-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-button_16.cjs.entry.js +101 -97
- package/dist/cjs/ez-dialog.cjs.entry.js +5 -2
- package/dist/cjs/ez-label-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-modal.cjs.entry.js +16 -69
- package/dist/cjs/ez-number-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-popover.cjs.entry.js +14 -15
- package/dist/cjs/ez-popup.cjs.entry.js +2 -2
- package/dist/cjs/ez-time-input.cjs.entry.js +7 -70
- package/dist/cjs/ez-toast.cjs.entry.js +1 -1
- package/dist/cjs/ezui.cjs.js +2 -2
- package/dist/cjs/{index-0f668cc5.js → index-bb6cdd1a.js} +5 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/assets/actions-sprite.svg +257 -0
- package/dist/collection/components/ez-button/ez-button.css +8 -4
- package/dist/collection/components/ez-button/ez-button.js +5 -2
- package/dist/collection/components/ez-combo-box/ez-combo-box.css +46 -44
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +34 -35
- package/dist/collection/components/ez-date-input/ez-date-input.css +0 -9
- package/dist/collection/components/ez-date-input/ez-date-input.js +5 -1
- package/dist/collection/components/ez-dialog/ez-dialog.css +43 -43
- package/dist/collection/components/ez-dialog/ez-dialog.js +5 -2
- package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +1 -1
- package/dist/collection/components/ez-modal/ez-modal.js +27 -80
- package/dist/collection/components/ez-popover/ez-popover.css +4 -5
- package/dist/collection/components/ez-popover/ez-popover.js +25 -26
- package/dist/collection/components/ez-popup/ez-popup.css +5 -5
- package/dist/collection/components/ez-popup/ez-popup.js +1 -1
- package/dist/collection/components/ez-search/ez-search.js +1 -1
- package/dist/collection/components/ez-tabselector/ez-tabselector.css +7 -10
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +67 -69
- package/dist/collection/components/ez-time-input/ez-time-input.css +0 -168
- package/dist/collection/components/ez-time-input/ez-time-input.js +8 -75
- package/dist/collection/utils/CSSVarsUtils.js +14 -0
- package/dist/custom-elements/index.js +157 -254
- package/dist/esm/CSSVarsUtils-e0128b01.js +16 -0
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +101 -97
- package/dist/esm/ez-dialog.entry.js +5 -2
- package/dist/esm/ez-label-chip.entry.js +1 -1
- package/dist/esm/ez-modal.entry.js +16 -69
- package/dist/esm/ez-number-input.entry.js +1 -1
- package/dist/esm/ez-popover.entry.js +14 -15
- package/dist/esm/ez-popup.entry.js +2 -2
- package/dist/esm/ez-time-input.entry.js +7 -70
- package/dist/esm/ez-toast.entry.js +1 -1
- package/dist/esm/ezui.js +2 -2
- package/dist/esm/{index-89fc9bfd.js → index-989e6e7d.js} +5 -1
- package/dist/esm/loader.js +2 -2
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/{p-762ac7a0.js → p-384f89f7.js} +1 -1
- package/dist/ezui/p-55003571.entry.js +1 -0
- package/dist/ezui/p-5c5ba099.entry.js +1 -0
- package/dist/ezui/p-65ea9879.entry.js +1 -0
- package/dist/ezui/{p-9702db61.entry.js → p-889030b3.entry.js} +1 -1
- package/dist/ezui/{p-8d547517.entry.js → p-8b945611.entry.js} +1 -1
- package/dist/ezui/p-a6a87bc5.entry.js +1 -0
- package/dist/ezui/p-d01bcce1.entry.js +1 -0
- package/dist/ezui/p-d1889704.js +1 -0
- package/dist/ezui/{p-74e4415e.entry.js → p-e2533df1.entry.js} +1 -1
- package/dist/ezui/p-edcc9e6f.entry.js +1 -0
- package/dist/ezui/{p-1c33a56d.entry.js → p-f8f92f68.entry.js} +1 -1
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +5 -5
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +1 -0
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +4 -1
- package/dist/types/components/ez-modal/ez-modal.d.ts +7 -7
- package/dist/types/components/ez-popover/ez-popover.d.ts +4 -5
- package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +19 -10
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +1 -8
- package/dist/types/components.d.ts +56 -35
- package/dist/types/utils/CSSVarsUtils.d.ts +4 -0
- package/package.json +1 -1
- package/dist/ezui/p-169d99a1.entry.js +0 -1
- package/dist/ezui/p-7c7dbfcb.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
- package/dist/ezui/p-f7d7fb7f.entry.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createEvent, h, forceUpdate, Host, proxyCustomElement } from '@stencil/core/internal/client';
|
|
1
|
+
import { createEvent, h, forceUpdate, Host, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
|
|
2
2
|
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|
|
3
3
|
|
|
4
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)}";
|
|
@@ -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() {
|
|
@@ -40,9 +40,9 @@ 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];
|
|
43
45
|
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
48
|
content.style.paddingRight = "var(--button__inline__icon--padding)";
|
|
@@ -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") {
|
|
@@ -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
|
}
|
|
@@ -1228,7 +1230,22 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1228
1230
|
static get style() { return ezComboBoxCss; }
|
|
1229
1231
|
};
|
|
1230
1232
|
|
|
1231
|
-
|
|
1233
|
+
class CSSVarsUtils {
|
|
1234
|
+
static applyVarsTextInput(host, textInput) {
|
|
1235
|
+
if (textInput) {
|
|
1236
|
+
CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--background-color');
|
|
1237
|
+
CSSVarsUtils.applyIfExists(host, textInput, '--text-input__input--border-color');
|
|
1238
|
+
}
|
|
1239
|
+
}
|
|
1240
|
+
static applyIfExists(host, textInput, varName) {
|
|
1241
|
+
const prop = getComputedStyle(host).getPropertyValue(varName);
|
|
1242
|
+
if (prop) {
|
|
1243
|
+
textInput.style.setProperty(varName, prop);
|
|
1244
|
+
}
|
|
1245
|
+
}
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
const ezDateInputCss = ":host{display:block;width:100%;--di__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--di__calendar-image);mask-image:var(--di__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}";
|
|
1232
1249
|
|
|
1233
1250
|
let EzDateInput$1 = class extends HTMLElement {
|
|
1234
1251
|
constructor() {
|
|
@@ -1291,8 +1308,11 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1291
1308
|
getTextValue(d) {
|
|
1292
1309
|
return d ? new Intl.DateTimeFormat('pt-BR').format(d) : null;
|
|
1293
1310
|
}
|
|
1311
|
+
componentDidLoad() {
|
|
1312
|
+
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
1313
|
+
}
|
|
1294
1314
|
render() {
|
|
1295
|
-
return (h(Host, null, h("ez-text-input", {
|
|
1315
|
+
return (h(Host, null, h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
|
|
1296
1316
|
if (event.key === 'H' || event.key === 'h')
|
|
1297
1317
|
this.changeValue(new Date());
|
|
1298
1318
|
}, 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 })));
|
|
@@ -1306,7 +1326,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1306
1326
|
static get style() { return ezDateInputCss; }
|
|
1307
1327
|
};
|
|
1308
1328
|
|
|
1309
|
-
const ezDialogCss = ":host{--
|
|
1329
|
+
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
1330
|
|
|
1311
1331
|
class Message {
|
|
1312
1332
|
constructor(title, message, critical, confirm, icon, callBack) {
|
|
@@ -1339,6 +1359,9 @@ let EzDialog$1 = class extends HTMLElement {
|
|
|
1339
1359
|
this.opened = false;
|
|
1340
1360
|
this._messageQueue = [];
|
|
1341
1361
|
}
|
|
1362
|
+
/**
|
|
1363
|
+
* Lida com o clique nos botões de dentro do componente.
|
|
1364
|
+
*/
|
|
1342
1365
|
async handleButtonClick(selectedOption) {
|
|
1343
1366
|
this.opened = this._messageQueue.length > 0;
|
|
1344
1367
|
if (this._currentMessage.callBack) {
|
|
@@ -3464,7 +3487,7 @@ const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder,
|
|
|
3464
3487
|
buttons.previousVisible = false;
|
|
3465
3488
|
}
|
|
3466
3489
|
return h("div", { class: "form-sheet" },
|
|
3467
|
-
tabs ? h("ez-tabselector", {
|
|
3490
|
+
tabs ? h("ez-tabselector", { selectedIndex: selectedTab, selectedTab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
|
|
3468
3491
|
dataUnit ? h(NavigationBar, { enabled: enabled, dataUnit: dataUnit, buttonProps: buttons }) : null,
|
|
3469
3492
|
h("div", { class: "tab__container" },
|
|
3470
3493
|
items ? items.map(item => buildFormItem(item, name, store, currentDU, enabled)) : null,
|
|
@@ -3859,104 +3882,51 @@ let EzModal$1 = class extends HTMLElement {
|
|
|
3859
3882
|
/**
|
|
3860
3883
|
* Controle de exibição do Modal
|
|
3861
3884
|
*/
|
|
3862
|
-
this.
|
|
3885
|
+
this.opened = true;
|
|
3863
3886
|
/**
|
|
3864
3887
|
* Define se o modal será fechado ao clicar ESC
|
|
3865
3888
|
*/
|
|
3866
|
-
this.
|
|
3889
|
+
this.closeEsc = false;
|
|
3867
3890
|
/**
|
|
3868
3891
|
* Define se o modal será fechado ao clicar fora do conteúdo.
|
|
3869
3892
|
*/
|
|
3870
|
-
this.
|
|
3893
|
+
this.closeOutsideClick = false;
|
|
3871
3894
|
this.handleKeyboardEvent = (ev) => {
|
|
3872
|
-
if ((ev === null || ev === void 0 ? void 0 : ev.key) ===
|
|
3895
|
+
if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
|
|
3873
3896
|
this.closeModal();
|
|
3874
3897
|
}
|
|
3875
3898
|
};
|
|
3876
3899
|
}
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
// this.oppened = false;
|
|
3881
|
-
// this.ezChange.emit(this.oppened);
|
|
3882
|
-
// }
|
|
3883
|
-
// }
|
|
3884
|
-
handleOppenedChange() {
|
|
3885
|
-
if (this.oppened) {
|
|
3886
|
-
document.addEventListener('keydown', this.handleKeyboardEvent);
|
|
3900
|
+
handleopenedChange() {
|
|
3901
|
+
if (this.opened) {
|
|
3902
|
+
document.addEventListener("keydown", this.handleKeyboardEvent);
|
|
3887
3903
|
}
|
|
3888
3904
|
else {
|
|
3889
|
-
document.removeEventListener(
|
|
3905
|
+
document.removeEventListener("keydown", this.handleKeyboardEvent);
|
|
3890
3906
|
}
|
|
3891
3907
|
}
|
|
3892
3908
|
closeModal() {
|
|
3893
|
-
this.
|
|
3894
|
-
this.ezCloseModal.emit(this.
|
|
3895
|
-
}
|
|
3896
|
-
///////
|
|
3897
|
-
// trapTabKey(e) {
|
|
3898
|
-
// // Check for TAB key press
|
|
3899
|
-
// if (e.keyCode === 9) {
|
|
3900
|
-
// // SHIFT + TAB
|
|
3901
|
-
// if (e.shiftKey) {
|
|
3902
|
-
// if (document.activeElement === this._firstTabStop) {
|
|
3903
|
-
// e.preventDefault();
|
|
3904
|
-
// this._lastTabStop.focus();
|
|
3905
|
-
// }
|
|
3906
|
-
// // TAB
|
|
3907
|
-
// } else {
|
|
3908
|
-
// if (document.activeElement === this._lastTabStop) {
|
|
3909
|
-
// e.preventDefault();
|
|
3910
|
-
// this._firstTabStop.focus();
|
|
3911
|
-
// }
|
|
3912
|
-
// }
|
|
3913
|
-
// }
|
|
3914
|
-
// if (e.keyCode === 27) {
|
|
3915
|
-
// this.closeModal();
|
|
3916
|
-
// }
|
|
3917
|
-
// }
|
|
3918
|
-
// closeModal() {
|
|
3919
|
-
// this.oppened = false;
|
|
3920
|
-
// this._focusedElementBeforeModal.focus();
|
|
3921
|
-
// }
|
|
3922
|
-
// componentDidLoad() {
|
|
3923
|
-
// this._overlay.addEventListener('keydown', (ev) => { this.trapTabKey(ev) });
|
|
3924
|
-
// // Save current focus
|
|
3925
|
-
// this._focusedElementBeforeModal = document.activeElement;
|
|
3926
|
-
// // Find all focusable children
|
|
3927
|
-
// var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
|
|
3928
|
-
// var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
|
|
3929
|
-
// // Convert NodeList to Array
|
|
3930
|
-
// focusableElements = Array.prototype.slice.call(focusableElements);
|
|
3931
|
-
// this._firstTabStop = focusableElements[0];
|
|
3932
|
-
// this._lastTabStop = focusableElements[focusableElements.length - 1];
|
|
3933
|
-
// // Focus first child
|
|
3934
|
-
// this._firstTabStop.focus();
|
|
3935
|
-
// }
|
|
3936
|
-
// componentDidUpdate() {
|
|
3937
|
-
// var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
|
|
3938
|
-
// var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
|
|
3939
|
-
// }
|
|
3940
|
-
/////
|
|
3909
|
+
this.opened = false;
|
|
3910
|
+
this.ezCloseModal.emit(this.opened);
|
|
3911
|
+
}
|
|
3941
3912
|
componentDidLoad() {
|
|
3942
|
-
this.
|
|
3913
|
+
this.handleopenedChange();
|
|
3943
3914
|
}
|
|
3944
3915
|
onMouseDownHandler(event) {
|
|
3945
|
-
if (this.
|
|
3916
|
+
if (this.closeOutsideClick && event.target === this._overlay) {
|
|
3946
3917
|
this.closeModal();
|
|
3947
3918
|
}
|
|
3948
3919
|
}
|
|
3949
|
-
//Ainda teremos ajustes visuais
|
|
3950
3920
|
render() {
|
|
3951
3921
|
const positionSufix = this.align === "left" ? "left" : "right";
|
|
3952
|
-
return (h(Host, null, this.
|
|
3922
|
+
return (h(Host, null, this.opened
|
|
3953
3923
|
?
|
|
3954
|
-
h("div", { class:
|
|
3924
|
+
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))))
|
|
3955
3925
|
:
|
|
3956
3926
|
undefined));
|
|
3957
3927
|
}
|
|
3958
3928
|
static get watchers() { return {
|
|
3959
|
-
"
|
|
3929
|
+
"opened": ["handleopenedChange"]
|
|
3960
3930
|
}; }
|
|
3961
3931
|
static get style() { return ezModalCss; }
|
|
3962
3932
|
};
|
|
@@ -4262,7 +4232,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4262
4232
|
static get style() { return ezNumericInputCss; }
|
|
4263
4233
|
};
|
|
4264
4234
|
|
|
4265
|
-
const ezPopoverCss = ":host{--
|
|
4235
|
+
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%}";
|
|
4266
4236
|
|
|
4267
4237
|
let EzPopover$1 = class extends HTMLElement {
|
|
4268
4238
|
constructor() {
|
|
@@ -4275,28 +4245,28 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4275
4245
|
* No modo floating = false o popover só se tornará visível
|
|
4276
4246
|
* quando o método show() for acionado.
|
|
4277
4247
|
*/
|
|
4278
|
-
this.
|
|
4248
|
+
this.autoClose = true;
|
|
4279
4249
|
/**
|
|
4280
4250
|
* Offset top do popover em relação ao componente pai
|
|
4281
4251
|
*/
|
|
4282
|
-
this.top =
|
|
4252
|
+
this.top = "0px";
|
|
4283
4253
|
/**
|
|
4284
4254
|
* Offset left do popover em relação ao componente pai
|
|
4285
4255
|
*/
|
|
4286
|
-
this.left =
|
|
4256
|
+
this.left = "0px";
|
|
4287
4257
|
/**
|
|
4288
4258
|
* Offset bottom do popover em relação ao componente pai
|
|
4289
4259
|
*/
|
|
4290
|
-
this.bottom =
|
|
4260
|
+
this.bottom = "0px";
|
|
4291
4261
|
/**
|
|
4292
4262
|
* Offset right do popover em relação ao componente pai
|
|
4293
4263
|
*/
|
|
4294
|
-
this.right =
|
|
4264
|
+
this.right = "0px";
|
|
4295
4265
|
/**
|
|
4296
4266
|
* Ajusta o comportamento da largura do popover.
|
|
4297
4267
|
* Opções: "100% e "fit-content" (default)
|
|
4298
4268
|
*/
|
|
4299
|
-
this.
|
|
4269
|
+
this.boxWidth = "fit-content";
|
|
4300
4270
|
}
|
|
4301
4271
|
dispatchVisibilityChange(newValue, oldValue) {
|
|
4302
4272
|
if (newValue != oldValue) {
|
|
@@ -4308,7 +4278,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4308
4278
|
*/
|
|
4309
4279
|
async updatePosition(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
|
|
4310
4280
|
const floatingOptions = {
|
|
4311
|
-
autoClose: this.
|
|
4281
|
+
autoClose: this.autoClose,
|
|
4312
4282
|
top,
|
|
4313
4283
|
left,
|
|
4314
4284
|
bottom,
|
|
@@ -4328,11 +4298,10 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4328
4298
|
}
|
|
4329
4299
|
/**
|
|
4330
4300
|
* Faz com que o popover seja renderizado na DOM.
|
|
4331
|
-
*
|
|
4332
4301
|
*/
|
|
4333
4302
|
async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
|
|
4334
4303
|
const floatingOptions = {
|
|
4335
|
-
autoClose: this.
|
|
4304
|
+
autoClose: this.autoClose,
|
|
4336
4305
|
top,
|
|
4337
4306
|
left,
|
|
4338
4307
|
bottom,
|
|
@@ -4349,7 +4318,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4349
4318
|
}
|
|
4350
4319
|
};
|
|
4351
4320
|
this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
|
|
4352
|
-
this.
|
|
4321
|
+
this.opened = true;
|
|
4353
4322
|
}
|
|
4354
4323
|
/**
|
|
4355
4324
|
* Usado no modo floating. Faz com que o componente seja ocultado.
|
|
@@ -4358,7 +4327,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4358
4327
|
if (this._floatingID !== undefined) {
|
|
4359
4328
|
FloatingManager.close(this._floatingID);
|
|
4360
4329
|
this._floatingID = undefined;
|
|
4361
|
-
this.
|
|
4330
|
+
this.opened = false;
|
|
4362
4331
|
}
|
|
4363
4332
|
}
|
|
4364
4333
|
componentDidRender() {
|
|
@@ -4368,16 +4337,16 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4368
4337
|
}
|
|
4369
4338
|
}
|
|
4370
4339
|
render() {
|
|
4371
|
-
return (h(Host, null, h("section", { ref: el => this._container = el }, h("div", { class: `box ${this.
|
|
4340
|
+
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)))));
|
|
4372
4341
|
}
|
|
4373
4342
|
get _host() { return this; }
|
|
4374
4343
|
static get watchers() { return {
|
|
4375
|
-
"
|
|
4344
|
+
"opened": ["dispatchVisibilityChange"]
|
|
4376
4345
|
}; }
|
|
4377
4346
|
static get style() { return ezPopoverCss; }
|
|
4378
4347
|
};
|
|
4379
4348
|
|
|
4380
|
-
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--
|
|
4349
|
+
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%}}";
|
|
4381
4350
|
|
|
4382
4351
|
let EzPopup$1 = class extends HTMLElement {
|
|
4383
4352
|
constructor() {
|
|
@@ -4453,7 +4422,7 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4453
4422
|
this.ezChange.emit(evt.detail);
|
|
4454
4423
|
}
|
|
4455
4424
|
render() {
|
|
4456
|
-
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage,
|
|
4425
|
+
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 }));
|
|
4457
4426
|
}
|
|
4458
4427
|
;
|
|
4459
4428
|
static get watchers() { return {
|
|
@@ -4462,93 +4431,93 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4462
4431
|
static get style() { return ezSearchCss; }
|
|
4463
4432
|
};
|
|
4464
4433
|
|
|
4465
|
-
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);--
|
|
4434
|
+
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}";
|
|
4466
4435
|
|
|
4467
4436
|
let EzTabselector$1 = class extends HTMLElement {
|
|
4468
4437
|
constructor() {
|
|
4469
4438
|
super();
|
|
4470
4439
|
this.__registerHost();
|
|
4471
4440
|
this.__attachShadow();
|
|
4472
|
-
this.
|
|
4473
|
-
this.
|
|
4474
|
-
if (ev.key ===
|
|
4475
|
-
this.
|
|
4476
|
-
this.
|
|
4477
|
-
this.
|
|
4478
|
-
this.handleTabClick(this.
|
|
4441
|
+
this.ezChange = createEvent(this, "ezChange", 7);
|
|
4442
|
+
this.setFocusedParam = (ev) => {
|
|
4443
|
+
if (ev.key === "Enter") {
|
|
4444
|
+
this.selectedIndex = this.focusedIndex;
|
|
4445
|
+
this.focusedIndex = undefined;
|
|
4446
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
4447
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
4479
4448
|
ev.preventDefault();
|
|
4480
|
-
this.setFocusedTab(this.
|
|
4449
|
+
this.setFocusedTab(this.selectedIndex);
|
|
4481
4450
|
}
|
|
4482
|
-
else if (ev.key ===
|
|
4451
|
+
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
4483
4452
|
let operator = undefined;
|
|
4484
|
-
if (ev.key ===
|
|
4453
|
+
if (ev.key === "ArrowLeft") {
|
|
4485
4454
|
operator = false;
|
|
4486
4455
|
}
|
|
4487
|
-
else if (ev.key ===
|
|
4456
|
+
else if (ev.key === "ArrowRight") {
|
|
4488
4457
|
operator = true;
|
|
4489
4458
|
}
|
|
4490
4459
|
else {
|
|
4491
4460
|
return;
|
|
4492
4461
|
}
|
|
4493
|
-
if (this.
|
|
4462
|
+
if (this.focusedIndex === undefined) {
|
|
4494
4463
|
if (operator === false) {
|
|
4495
|
-
this.
|
|
4464
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
|
|
4496
4465
|
}
|
|
4497
4466
|
else {
|
|
4498
|
-
this.
|
|
4467
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
|
|
4499
4468
|
}
|
|
4500
4469
|
}
|
|
4501
4470
|
else {
|
|
4502
4471
|
if (operator === false) {
|
|
4503
|
-
this.
|
|
4472
|
+
this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
|
|
4504
4473
|
}
|
|
4505
4474
|
else {
|
|
4506
|
-
this.
|
|
4475
|
+
this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
|
|
4507
4476
|
}
|
|
4508
4477
|
}
|
|
4509
|
-
if (parseInt(this.
|
|
4510
|
-
this.
|
|
4478
|
+
if (parseInt(this.focusedIndex) < 0) {
|
|
4479
|
+
this.focusedIndex = "0";
|
|
4511
4480
|
}
|
|
4512
|
-
else if (parseInt(this.
|
|
4513
|
-
this.
|
|
4481
|
+
else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
|
|
4482
|
+
this.focusedIndex = (this._processedTabs.length - 1).toString();
|
|
4514
4483
|
}
|
|
4515
|
-
this.
|
|
4516
|
-
this.setFocusedTab(this.
|
|
4517
|
-
this.
|
|
4484
|
+
this.setFocusedBtn(true, this.focusedIndex);
|
|
4485
|
+
this.setFocusedTab(this.focusedIndex);
|
|
4486
|
+
this.ezChange.emit();
|
|
4518
4487
|
}
|
|
4519
|
-
else if (ev.key ===
|
|
4520
|
-
this.
|
|
4521
|
-
this.
|
|
4522
|
-
this.handleTabClick(this.
|
|
4488
|
+
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
4489
|
+
this.focusedIndex = undefined;
|
|
4490
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
4491
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
4523
4492
|
ev.preventDefault();
|
|
4524
|
-
this.setFocusedTab(this.
|
|
4493
|
+
this.setFocusedTab(this.selectedIndex);
|
|
4525
4494
|
}
|
|
4526
4495
|
// this.setFocusedTab();
|
|
4527
4496
|
};
|
|
4528
4497
|
}
|
|
4529
4498
|
handleTabClick(tab, index) {
|
|
4530
|
-
this.
|
|
4531
|
-
this.
|
|
4532
|
-
this.
|
|
4533
|
-
this.
|
|
4534
|
-
this.
|
|
4499
|
+
this.selectedIndex = index.toString();
|
|
4500
|
+
this.focusedIndex = undefined;
|
|
4501
|
+
this.selectedTab = tab;
|
|
4502
|
+
this.ezChange.emit();
|
|
4503
|
+
this.setFocusedBtn(false, this.selectedIndex);
|
|
4535
4504
|
}
|
|
4536
4505
|
componentWillRender() {
|
|
4537
4506
|
if (!this._processedTabs) {
|
|
4538
4507
|
this._processedTabs = [];
|
|
4539
4508
|
if (this.tabs) {
|
|
4540
|
-
this.tabs.split(
|
|
4509
|
+
this.tabs.split(",").forEach((label) => {
|
|
4541
4510
|
label = label.trim();
|
|
4542
4511
|
this._processedTabs.push(new Tab(label, label));
|
|
4543
4512
|
});
|
|
4544
4513
|
}
|
|
4545
|
-
this._hostElem.querySelectorAll(
|
|
4546
|
-
const tabKey = elem.getAttribute(
|
|
4547
|
-
const label = elem.getAttribute(
|
|
4514
|
+
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
4515
|
+
const tabKey = elem.getAttribute("tabKey");
|
|
4516
|
+
const label = elem.getAttribute("label");
|
|
4548
4517
|
const t = new Tab(label, tabKey);
|
|
4549
4518
|
const content = elem.firstChild;
|
|
4550
4519
|
if (content) {
|
|
4551
|
-
content.setAttribute(
|
|
4520
|
+
content.setAttribute("slot", "tab" + this._processedTabs.length);
|
|
4552
4521
|
this._hostElem.appendChild(content);
|
|
4553
4522
|
}
|
|
4554
4523
|
this._processedTabs.push(t);
|
|
@@ -4572,7 +4541,7 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4572
4541
|
const container = this._scrollContainer;
|
|
4573
4542
|
if (container) {
|
|
4574
4543
|
let lastTab = null;
|
|
4575
|
-
container.querySelectorAll(
|
|
4544
|
+
container.querySelectorAll(".tab").forEach((tab) => {
|
|
4576
4545
|
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
4577
4546
|
lastTab = tab;
|
|
4578
4547
|
}
|
|
@@ -4591,18 +4560,18 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4591
4560
|
this._startHidden = container.scrollLeft > 0;
|
|
4592
4561
|
this._endHidden = remainingScroll > 0;
|
|
4593
4562
|
if (this._startHidden) {
|
|
4594
|
-
this._backwardButton.classList.remove(
|
|
4563
|
+
this._backwardButton.classList.remove("hidden");
|
|
4595
4564
|
}
|
|
4596
4565
|
else {
|
|
4597
|
-
this._backwardButton.classList.add(
|
|
4566
|
+
this._backwardButton.classList.add("hidden");
|
|
4598
4567
|
}
|
|
4599
4568
|
if (this._endHidden) {
|
|
4600
|
-
this._forwardButton.classList.remove(
|
|
4569
|
+
this._forwardButton.classList.remove("hidden");
|
|
4601
4570
|
}
|
|
4602
4571
|
else {
|
|
4603
|
-
this._forwardButton.classList.add(
|
|
4572
|
+
this._forwardButton.classList.add("hidden");
|
|
4604
4573
|
}
|
|
4605
|
-
const classNames = [
|
|
4574
|
+
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
4606
4575
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
4607
4576
|
classNames.forEach((name) => {
|
|
4608
4577
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -4619,11 +4588,9 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4619
4588
|
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
4620
4589
|
}
|
|
4621
4590
|
setFocusedTab(index) {
|
|
4622
|
-
window.clearTimeout(this.
|
|
4623
|
-
this.
|
|
4591
|
+
window.clearTimeout(this._scrollCallBackTest);
|
|
4592
|
+
this._scrollCallBackTest = window.setTimeout(() => {
|
|
4624
4593
|
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
4625
|
-
console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
|
|
4626
|
-
console.log('tabtoscroll', tabtoscroll);
|
|
4627
4594
|
tabtoscroll.scrollIntoView();
|
|
4628
4595
|
}, 200);
|
|
4629
4596
|
}
|
|
@@ -4632,27 +4599,27 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4632
4599
|
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
4633
4600
|
}
|
|
4634
4601
|
const context = this._textMesurement.getContext("2d");
|
|
4635
|
-
context.font =
|
|
4636
|
-
return Math.min(220, 24 + context.measureText(text).width) +
|
|
4602
|
+
context.font = "14px Sora, Algerian";
|
|
4603
|
+
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
4637
4604
|
}
|
|
4638
4605
|
;
|
|
4639
|
-
|
|
4640
|
-
const tabsButtons = this._scrollContainer.querySelectorAll(
|
|
4606
|
+
setFocusedBtn(visible, parameter) {
|
|
4607
|
+
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
4641
4608
|
tabsButtons.forEach((el) => {
|
|
4642
|
-
el.classList.remove(
|
|
4643
|
-
if (el.id ===
|
|
4644
|
-
el.classList.add(
|
|
4609
|
+
el.classList.remove("is-focused");
|
|
4610
|
+
if (el.id === "tab" + parameter && visible) {
|
|
4611
|
+
el.classList.add("is-focused");
|
|
4645
4612
|
}
|
|
4646
4613
|
});
|
|
4647
4614
|
}
|
|
4648
4615
|
render() {
|
|
4649
|
-
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.
|
|
4650
|
-
const labelStyle = {
|
|
4616
|
+
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) => {
|
|
4617
|
+
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
4651
4618
|
const tabId = "tab" + index;
|
|
4652
|
-
const isSelected = index === parseInt(this.
|
|
4619
|
+
const isSelected = index === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
4653
4620
|
if (isSelected) {
|
|
4654
|
-
this.
|
|
4655
|
-
this.
|
|
4621
|
+
this.selectedTab = tab.tabKey;
|
|
4622
|
+
this.selectedIndex = index.toString();
|
|
4656
4623
|
}
|
|
4657
4624
|
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); } }));
|
|
4658
4625
|
})), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
@@ -4964,7 +4931,7 @@ let EzTextInput$1 = class extends HTMLElement {
|
|
|
4964
4931
|
static get style() { return ezTextInputCss; }
|
|
4965
4932
|
};
|
|
4966
4933
|
|
|
4967
|
-
const ezTimeInputCss = ":host{
|
|
4934
|
+
const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}";
|
|
4968
4935
|
|
|
4969
4936
|
let EzTimeInput$1 = class extends HTMLElement {
|
|
4970
4937
|
constructor() {
|
|
@@ -4980,17 +4947,6 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
4980
4947
|
*/
|
|
4981
4948
|
this.showSeconds = false;
|
|
4982
4949
|
}
|
|
4983
|
-
showError() {
|
|
4984
|
-
const hasError = typeof this.errorMessage === 'string' && this.errorMessage !== '';
|
|
4985
|
-
if (hasError) {
|
|
4986
|
-
this._inputElem.classList.add('hasError');
|
|
4987
|
-
this._messageBoxElem.classList.add('hasError');
|
|
4988
|
-
}
|
|
4989
|
-
else {
|
|
4990
|
-
this._inputElem.classList.remove('hasError');
|
|
4991
|
-
this._messageBoxElem.classList.remove('hasError');
|
|
4992
|
-
}
|
|
4993
|
-
}
|
|
4994
4950
|
prepareMask() {
|
|
4995
4951
|
if (this.showSeconds) {
|
|
4996
4952
|
if (this._maskFormatter == undefined) {
|
|
@@ -5009,23 +4965,6 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5009
4965
|
}
|
|
5010
4966
|
}
|
|
5011
4967
|
}
|
|
5012
|
-
adjustFloatingLabel() {
|
|
5013
|
-
if (this.label) {
|
|
5014
|
-
if (!this._inputElem.classList.contains("input--with--label")) {
|
|
5015
|
-
this._inputElem.classList.add("input--with--label");
|
|
5016
|
-
}
|
|
5017
|
-
if (this.viewValue && this.viewValue.toString().length > 0) {
|
|
5018
|
-
if (!this._labelElem.classList.contains("input__label--floated")) {
|
|
5019
|
-
this._labelElem.classList.add("input__label--floated");
|
|
5020
|
-
}
|
|
5021
|
-
}
|
|
5022
|
-
else {
|
|
5023
|
-
if (this._labelElem.classList.contains("input__label--floated")) {
|
|
5024
|
-
this._labelElem.classList.remove("input__label--floated");
|
|
5025
|
-
}
|
|
5026
|
-
}
|
|
5027
|
-
}
|
|
5028
|
-
}
|
|
5029
4968
|
onValueChanged() {
|
|
5030
4969
|
if (this.value === NaN) {
|
|
5031
4970
|
this.value = undefined;
|
|
@@ -5048,12 +4987,6 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5048
4987
|
this._inputElem.blur();
|
|
5049
4988
|
}
|
|
5050
4989
|
//---------------------------------------------
|
|
5051
|
-
// Test Methods
|
|
5052
|
-
//---------------------------------------------
|
|
5053
|
-
setInputElemnt(input) {
|
|
5054
|
-
this._iconElement = input;
|
|
5055
|
-
}
|
|
5056
|
-
//---------------------------------------------
|
|
5057
4990
|
// Event handlers
|
|
5058
4991
|
//---------------------------------------------
|
|
5059
4992
|
handleFocusout() {
|
|
@@ -5063,7 +4996,6 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5063
4996
|
this.clearField();
|
|
5064
4997
|
this.errorMessage = "Favor inserir um horário válido.";
|
|
5065
4998
|
}
|
|
5066
|
-
this.adjustFloatingLabel();
|
|
5067
4999
|
}
|
|
5068
5000
|
prepareValue(value) {
|
|
5069
5001
|
try {
|
|
@@ -5081,40 +5013,12 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5081
5013
|
this.viewValue = this._inputElem.value;
|
|
5082
5014
|
this.value = NumberUtils.stringToNumber(this.viewValue.replace(/\D/g, ""));
|
|
5083
5015
|
}
|
|
5084
|
-
adjustIconStyle() {
|
|
5085
|
-
if (this._iconElement) {
|
|
5086
|
-
this._iconElement.style.position = "absolute";
|
|
5087
|
-
this._iconElement.style.display = "flex";
|
|
5088
|
-
this._iconElement.style.alignItems = "center";
|
|
5089
|
-
this._iconElement.style.justifyContent = "center";
|
|
5090
|
-
this._iconElement.style.overflow = "hidden";
|
|
5091
|
-
this._iconElement.style.top = "0px";
|
|
5092
|
-
this._iconElement.style.width = "var(--eztime__icon--width)";
|
|
5093
|
-
this._iconElement.style.height = "var(--eztime--height)";
|
|
5094
|
-
this._iconElement.style.left = "0px";
|
|
5095
|
-
this._iconElement.style.borderRadius = "var(--eztime--border-radius) 0 0 var(--eztime--border-radius)";
|
|
5096
|
-
this._inputElem.classList.add('icon--left');
|
|
5097
|
-
if (this._labelElem) {
|
|
5098
|
-
this._labelElem.classList.add("input__label--left");
|
|
5099
|
-
}
|
|
5100
|
-
}
|
|
5101
|
-
this.showError();
|
|
5102
|
-
}
|
|
5103
|
-
doFocus() {
|
|
5104
|
-
if (this.label && this._labelElem) {
|
|
5105
|
-
if (!this._labelElem.classList.contains("input__label--floated")) {
|
|
5106
|
-
this._labelElem.classList.add("input__label--floated");
|
|
5107
|
-
}
|
|
5108
|
-
}
|
|
5109
|
-
}
|
|
5110
5016
|
//---------------------------------------------
|
|
5111
5017
|
// Lifecycle web component
|
|
5112
5018
|
//---------------------------------------------
|
|
5113
5019
|
componentDidLoad() {
|
|
5114
5020
|
this.onValueChanged();
|
|
5115
|
-
this.
|
|
5116
|
-
this.adjustFloatingLabel();
|
|
5117
|
-
this.showError();
|
|
5021
|
+
CSSVarsUtils.applyVarsTextInput(this._elem, this._inputElem);
|
|
5118
5022
|
}
|
|
5119
5023
|
componentWillLoad() {
|
|
5120
5024
|
this.prepareMask();
|
|
@@ -5126,12 +5030,11 @@ let EzTimeInput$1 = class extends HTMLElement {
|
|
|
5126
5030
|
}
|
|
5127
5031
|
}
|
|
5128
5032
|
render() {
|
|
5129
|
-
return (h(Host, null, h("ez-
|
|
5130
|
-
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)
|
|
5131
|
-
: 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)));
|
|
5033
|
+
return (h(Host, null, h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage }, h("ez-icon", { slot: "leftIcon", href: getAssetPath("./assets/actions-sprite.svg") + "#timer-outline" }))));
|
|
5132
5034
|
}
|
|
5035
|
+
static get assetsDirs() { return ["../assets"]; }
|
|
5036
|
+
get _elem() { return this; }
|
|
5133
5037
|
static get watchers() { return {
|
|
5134
|
-
"errorMessage": ["showError"],
|
|
5135
5038
|
"showSeconds": ["prepareMask"],
|
|
5136
5039
|
"value": ["onValueChanged"]
|
|
5137
5040
|
}; }
|
|
@@ -5646,19 +5549,19 @@ const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"la
|
|
|
5646
5549
|
const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516]}]);
|
|
5647
5550
|
const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
|
|
5648
5551
|
const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513]}]);
|
|
5649
|
-
const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"
|
|
5552
|
+
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]}]);
|
|
5650
5553
|
const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}]);
|
|
5651
5554
|
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"]}]);
|
|
5652
5555
|
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]}]);
|
|
5653
5556
|
const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
|
|
5654
5557
|
const EzLabelChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$1, [1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540]}]);
|
|
5655
|
-
const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"
|
|
5558
|
+
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"]}]);
|
|
5656
5559
|
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]}]);
|
|
5657
5560
|
const EzNumericInput = /*@__PURE__*/proxyCustomElement(EzNumericInput$1, [1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}]);
|
|
5658
|
-
const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"
|
|
5561
|
+
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]}]);
|
|
5659
5562
|
const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]);
|
|
5660
5563
|
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]}]);
|
|
5661
|
-
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"
|
|
5564
|
+
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}]);
|
|
5662
5565
|
const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538]}]);
|
|
5663
5566
|
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]}]);
|
|
5664
5567
|
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"]}]);
|