@sankhyalabs/ezui 1.1.69 → 1.1.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ez-button_16.cjs.entry.js +89 -92
- package/dist/cjs/ez-dialog.cjs.entry.js +4 -1
- package/dist/cjs/ez-modal.cjs.entry.js +15 -68
- package/dist/cjs/ez-popover.cjs.entry.js +13 -14
- package/dist/cjs/ez-popup.cjs.entry.js +1 -1
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-button/ez-button.css +5 -4
- 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-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/custom-elements/index.js +126 -180
- package/dist/esm/ez-button_16.entry.js +89 -92
- package/dist/esm/ez-dialog.entry.js +4 -1
- package/dist/esm/ez-modal.entry.js +15 -68
- package/dist/esm/ez-popover.entry.js +13 -14
- package/dist/esm/ez-popup.entry.js +1 -1
- 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-a7e23f65.entry.js +1 -0
- package/dist/ezui/p-a88ee12f.entry.js +1 -0
- package/dist/ezui/p-b692a0ab.entry.js +1 -0
- package/dist/ezui/p-b6e0fd3e.entry.js +1 -0
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +5 -5
- 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.d.ts +56 -35
- 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
|
@@ -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')}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--button--min-width);height:var(--button--height);font-family:var(--button--font-family);font-size:var(--button--font-size);font-weight:var(--button--font-weight);padding:var(--button--padding-top) var(--button--padding-right) var(--button--padding-bottom) var(--button--padding-left);border-radius:var(--button--border-radius);background-color:var(--button--background-color);color:var(--button--color);fill:var(--button--color);border:var(--button--border)}button:hover{background-color:var(--button--hover--background-color)}button:focus{outline:none;border:var(--button--focus--border);box-shadow:var(--button--focus--box-shadow)}button:disabled{background-color:var(--button--disabled--background-color);color:var(--button--disabled-color);fill:var(--button--disabled-color);border:none;cursor:no-drop}button.icon{width:42px;min-width:42px;height:42px;padding:0px;--icon--color:#ffffff}a{font-family:var(--button--font-family);font-size:var(--button--font-size);font-weight:var(--button--font-weight);color:var(--button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}";
|
|
27
27
|
|
|
28
28
|
let EzButton$1 = class extends HTMLElement {
|
|
29
29
|
constructor() {
|
|
@@ -985,7 +985,7 @@ let EzCollapsibleBox$1 = class extends HTMLElement {
|
|
|
985
985
|
static get style() { return ezCollapsibleBoxCss; }
|
|
986
986
|
};
|
|
987
987
|
|
|
988
|
-
const ezComboBoxCss = ":host{--
|
|
988
|
+
const ezComboBoxCss = ":host{--combo-box--height:42px;--combo-box--width:100%;--combo-box__icon--width:48px;--combo-box--border-radius:var(--border--radius-medium, 12px);--combo-box--border-radius-small:var(--border--radius-small, 6px);--combo-box--font-size:var(--text--medium, 14px);--combo-box--font-family:var(--font-pattern, Arial);--combo-box--font-weight--large:var(--text-weight--large, 500);--combo-box--font-weight--medium:var(--text-weight--medium, 400);--combo-box--background-color--xlight:var(--background--xlight, #fff);--combo-box__input--background-color:var(--background--medium, #e0e0e0);--combo-box__input--border:var(--border--medium, 2px solid);--combo-box__input--border-color:var(--combo-box__input--background-color);--combo-box__input--focus--border-color:var(--color--primary, #008561);--combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--combo-box__input--error--border-color:#CC2936;--combo-box__label--color:var(--title--primary, #919191);--combo-box__list-text--primary:var(--text--primary, #626e82);--combo-box__list-height:calc(var(--combo-box--font-size) + var(--combo-box--space--medium));--combo-box--drop-down__image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"16px\"><path d=\"M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z\"/></svg>');--combo-box--search__image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"22px\" width=\"22px\"><path d=\"m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z\"/></svg>');--combo-box--space--medium:var(--space--medium, 12px);--combo-box--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--combo-box--width)}ez-text-input{--it__input--background-color:var(--combo-box__input--background-color, #FFFFFF);--it__input--border-color:var(--combo-box__input--border-color, #DCE0E8)}.list-container{position:relative;width:100%}.options-list{box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--combo-box--background-color--xlight);padding:var(--combo-box--space--small);border-radius:var(--combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);scroll-behavior:smooth;max-height:calc(4*var(--combo-box__list-height) + 2*var(--combo-box--space--small));overflow:auto}.item{text-align:left;display:flex;justify-content:space-between;align-items:center;border-radius:var(--combo-box--border-radius-small);padding:0 var(--combo-box--space--small);list-style-type:none;min-height:var(--combo-box__list-height)}.item--label{text-align:left;flex-basis:85%;flex-grow:1;color:var(--combo-box__list-text--primary);font-weight:var(--combo-box--font-weight--large);font-family:var(--combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item--value{text-align:right;flex-basis:15%;flex-grow:0;color:var(--combo-box__list-text--primary);font-weight:var(--combo-box--font-weight--large);font-family:var(--combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li:hover{background-color:var(--background--medium)}.preselected{background-color:var(--background--medium)}.btn-open-options{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-options:disabled{cursor:unset}.btn-open-options::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:16px;height:16px;-webkit-mask-image:var(--combo-box--drop-down__image);mask-image:var(--combo-box--drop-down__image)}.btn-open-options:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-options:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}.btn-open-search{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-search:disabled{cursor:unset}.btn-open-search::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:22px;height:22px;-webkit-mask-image:var(--combo-box--search__image);mask-image:var(--combo-box--search__image)}.btn-open-search:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-search:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}";
|
|
989
989
|
|
|
990
990
|
let EzComboBox$1 = class extends HTMLElement {
|
|
991
991
|
constructor() {
|
|
@@ -1000,11 +1000,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1000
1000
|
/**
|
|
1001
1001
|
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
1002
1002
|
*/
|
|
1003
|
-
this.
|
|
1003
|
+
this.showSelectedValue = false;
|
|
1004
1004
|
/**
|
|
1005
1005
|
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
1006
1006
|
*/
|
|
1007
|
-
this.
|
|
1007
|
+
this.showOptionValue = false;
|
|
1008
1008
|
}
|
|
1009
1009
|
internalUpdate() {
|
|
1010
1010
|
if (this._inputElement) {
|
|
@@ -1016,29 +1016,29 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1016
1016
|
this.updateVisibleOptions();
|
|
1017
1017
|
}
|
|
1018
1018
|
getText() {
|
|
1019
|
-
let text =
|
|
1019
|
+
let text = "";
|
|
1020
1020
|
const selected = this.getSelectedOption();
|
|
1021
1021
|
if (selected) {
|
|
1022
|
-
text = this.
|
|
1022
|
+
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
1023
1023
|
}
|
|
1024
1024
|
return text;
|
|
1025
1025
|
}
|
|
1026
1026
|
getSelectedOption() {
|
|
1027
|
-
if (typeof this.value ===
|
|
1027
|
+
if (typeof this.value === "string" || this.value instanceof String) {
|
|
1028
1028
|
return this._visibleOptions.find(o => o.value === this.value);
|
|
1029
1029
|
}
|
|
1030
1030
|
return this.value;
|
|
1031
1031
|
}
|
|
1032
1032
|
updateVisibleOptions() {
|
|
1033
1033
|
let opts = this._source || [];
|
|
1034
|
-
if (!this.
|
|
1034
|
+
if (!this.searchMode && this._criteria) {
|
|
1035
1035
|
const upperCriteria = this._criteria.toUpperCase();
|
|
1036
1036
|
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
1037
1037
|
}
|
|
1038
|
-
this._visibleOptions = [{ value:
|
|
1038
|
+
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
1039
1039
|
}
|
|
1040
1040
|
buildItem(opt, index) {
|
|
1041
|
-
return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, h("span", { class: "item--label", title: opt.label }, opt.label), this.
|
|
1041
|
+
return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, h("span", { class: "item--label", title: opt.label }, opt.label), this.showOptionValue ? h("span", { class: "item--value", title: opt.value }, opt.value) : undefined);
|
|
1042
1042
|
}
|
|
1043
1043
|
showOptions() {
|
|
1044
1044
|
if (!this.enabled) {
|
|
@@ -1047,10 +1047,10 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1047
1047
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
1048
1048
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
1049
1049
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
1050
|
-
const top = this.errorMessage ?
|
|
1050
|
+
const top = this.errorMessage ? "0px" : "-17px";
|
|
1051
1051
|
this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
1052
1052
|
window.requestAnimationFrame(() => {
|
|
1053
|
-
this._optionsList.scrollIntoView({ behavior:
|
|
1053
|
+
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
1054
1054
|
});
|
|
1055
1055
|
}
|
|
1056
1056
|
hideOptions() {
|
|
@@ -1063,7 +1063,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1063
1063
|
return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
|
|
1064
1064
|
}
|
|
1065
1065
|
nextOption() {
|
|
1066
|
-
if (this.
|
|
1066
|
+
if (this.searchMode && !this.isOptionsVisible()) {
|
|
1067
1067
|
return;
|
|
1068
1068
|
}
|
|
1069
1069
|
this.showOptions();
|
|
@@ -1099,7 +1099,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1099
1099
|
selectOption(opt) {
|
|
1100
1100
|
const currentOpt = this.getSelectedOption();
|
|
1101
1101
|
if (currentOpt !== opt) {
|
|
1102
|
-
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ?
|
|
1102
|
+
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
1103
1103
|
this.value = adjustedOpt;
|
|
1104
1104
|
this.ezChange.emit(adjustedOpt);
|
|
1105
1105
|
}
|
|
@@ -1117,10 +1117,10 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1117
1117
|
this.updateVisibleOptions();
|
|
1118
1118
|
}
|
|
1119
1119
|
}
|
|
1120
|
-
loadOptions(mode, argument =
|
|
1120
|
+
loadOptions(mode, argument = "") {
|
|
1121
1121
|
this._criteria = argument;
|
|
1122
|
-
if (this.
|
|
1123
|
-
this.updateSource(this.
|
|
1122
|
+
if (this.optionLoader) {
|
|
1123
|
+
this.updateSource(this.optionLoader({ mode, argument }));
|
|
1124
1124
|
}
|
|
1125
1125
|
else {
|
|
1126
1126
|
this.updateSource(this.options);
|
|
@@ -1128,7 +1128,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1128
1128
|
}
|
|
1129
1129
|
cancelPreselection() {
|
|
1130
1130
|
if (!this._inputElement.value && this.value) {
|
|
1131
|
-
this.selectOption(
|
|
1131
|
+
this.selectOption(undefined);
|
|
1132
1132
|
}
|
|
1133
1133
|
else {
|
|
1134
1134
|
this.internalUpdate();
|
|
@@ -1140,11 +1140,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1140
1140
|
componentWillLoad() {
|
|
1141
1141
|
if (this.options === undefined) {
|
|
1142
1142
|
this.options = [];
|
|
1143
|
-
const optionsTags = this.el.querySelectorAll(
|
|
1143
|
+
const optionsTags = this.el.querySelectorAll("option");
|
|
1144
1144
|
if (optionsTags) {
|
|
1145
1145
|
optionsTags.forEach(e => {
|
|
1146
1146
|
let label = e.innerText;
|
|
1147
|
-
let value = e.getAttribute(
|
|
1147
|
+
let value = e.getAttribute("value");
|
|
1148
1148
|
if (!value) {
|
|
1149
1149
|
value = label;
|
|
1150
1150
|
}
|
|
@@ -1153,11 +1153,11 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1153
1153
|
});
|
|
1154
1154
|
}
|
|
1155
1155
|
}
|
|
1156
|
-
if (this.
|
|
1156
|
+
if (this.searchMode) {
|
|
1157
1157
|
this.updateSource([]);
|
|
1158
1158
|
}
|
|
1159
1159
|
else {
|
|
1160
|
-
this.loadOptions(
|
|
1160
|
+
this.loadOptions("PRELOAD");
|
|
1161
1161
|
}
|
|
1162
1162
|
}
|
|
1163
1163
|
componentDidRender() {
|
|
@@ -1175,13 +1175,12 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1175
1175
|
const argument = event.target.value;
|
|
1176
1176
|
this._criteria = argument;
|
|
1177
1177
|
if (this._criteria) {
|
|
1178
|
-
if (this.
|
|
1178
|
+
if (this.searchMode) {
|
|
1179
1179
|
if (this._changeDeboucingTimeout) {
|
|
1180
1180
|
window.clearTimeout(this._changeDeboucingTimeout);
|
|
1181
1181
|
}
|
|
1182
1182
|
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
1183
|
-
|
|
1184
|
-
this.loadOptions('PREDICTIVE', argument);
|
|
1183
|
+
this.loadOptions("PREDICTIVE", argument);
|
|
1185
1184
|
}, 200);
|
|
1186
1185
|
}
|
|
1187
1186
|
else {
|
|
@@ -1191,7 +1190,7 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1191
1190
|
}
|
|
1192
1191
|
}
|
|
1193
1192
|
onTextInputClickHandler() {
|
|
1194
|
-
if (!this.
|
|
1193
|
+
if (!this.searchMode) {
|
|
1195
1194
|
this.showOptions();
|
|
1196
1195
|
}
|
|
1197
1196
|
}
|
|
@@ -1216,8 +1215,8 @@ let EzComboBox$1 = class extends HTMLElement {
|
|
|
1216
1215
|
this.cancelPreselection();
|
|
1217
1216
|
}
|
|
1218
1217
|
render() {
|
|
1219
|
-
return (h(Host, null, h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), errorMessage: this.errorMessage }, this.
|
|
1220
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions(
|
|
1218
|
+
return (h(Host, null, h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), errorMessage: this.errorMessage }, this.searchMode ?
|
|
1219
|
+
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
1221
1220
|
:
|
|
1222
1221
|
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
|
|
1223
1222
|
}
|
|
@@ -1306,7 +1305,7 @@ let EzDateInput$1 = class extends HTMLElement {
|
|
|
1306
1305
|
static get style() { return ezDateInputCss; }
|
|
1307
1306
|
};
|
|
1308
1307
|
|
|
1309
|
-
const ezDialogCss = ":host{--
|
|
1308
|
+
const ezDialogCss = ":host{--dialog__container-padding:var(--space--large, 24px);--dialog__btn__close--background-color:var(--title--primary, #2b3a54);--dialog__btn__no--padding-right:var(--space--large, 24px);--dialog__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--dialog__title--font-pattern:var(--font-pattern, \"'Sora', 'Algerian'\");--dialog__title--padding-left:var(--space--small, 6px);--dialog__title__container--padding-bottom:var(--space--medium, 12px);--dialog__title--weight--large:var(--text-weight--large, 600);--dialog__body--font-pattern:var(--font-pattern, \"'Sora', 'Algerian'\");--dialog__body--text-shadow:var(--text-shadow, \"0 0 0 #353535, 0 0 1px transparent\");--dialog__body--text-weight--medium:var(--text-weight--medium, 400);--dialog__body--padding-bottom:var(--space--large, 24px);--dialog__body--font-size:var(--text--medium, 14px);--dialog__body--color:var(--text--primary, #626e82);--dialog__critical--background-color:var(--color--alert-error-800, #BD0025);--dialog__warning--background-color:var(--color--alert-warning-500, #EFB103);--dialog-z-index:var(--most-visible, 3);--dialog--warning__image:url('data: image/svg+xml;utf8,<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 7.5,0 0,13 h 15 z m 0,2.73684 5.1341,8.89476 H 2.36591 Z M 6.81818,5.47368 V 8.21053 H 8.18182 V 5.47368 Z m 0,4.10527 V 10.9474 H 8.18182 V 9.57895\"/></svg>');--dialog--critical__image:url('data: image/svg+xml;utf8,<svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 7.6534493,6.4948538 12.762051,1.3864299 C 12.914368,1.2341297 13,1.027552 13,0.81215179 13,0.59676225 12.914369,0.39018443 12.762051,0.23787352 12.609733,0.08557341 12.40318,0 12.187747,0 11.972425,0 11.765762,0.08557341 11.613445,0.23787352 L 6.5048431,5.3462975 1.3961977,0.23787352 C 1.2438802,0.08557341 1.0373043,0 0.82189458,0 0.60649572,0 0.39990901,0.08557341 0.24759147,0.23787352 0.09527396,0.39018443 0.00970766,0.59676225 0.00970766,0.81215179 c 0,0.21540021 0.0855663,0.42197791 0.23788381,0.57427811 L 5.3562369,6.4948538 0.24759147,11.604381 c -0.0775121,0.07492 -0.13931586,0.164543 -0.18182835,0.263595 -0.04250169,0.09905 -0.064850182,0.205678 -0.0657357237,0.313391 -8.8554258e-4,0.107813 0.0197049337,0.214771 0.0605827337,0.314472 0.04086693,0.0998 0.10119858,0.190415 0.17746563,0.266625 0.0762779,0.07622 0.16695386,0.136398 0.26675594,0.177208 0.099802,0.04082 0.20672745,0.06127 0.31452961,0.06029 0.1078025,-9.53e-4 0.21433799,-0.0235 0.31337139,-0.06604 0.099045,-0.04265 0.1886052,-0.104571 0.263465,-0.182081 L 6.5048431,7.6434102 11.613445,12.751855 c 0.152317,0.152312 0.35898,0.237831 0.574302,0.237831 0.215433,0 0.421986,-0.08552 0.574304,-0.237831 C 12.914368,12.599545 13,12.393 13,12.177578 13,11.962157 12.91437,11.75561 12.762051,11.603299 Z\"/></svg>')}h2{margin-block-start:0;margin-block-end:0;margin-inline-start:0px;margin-inline-end:0px}.overlay{position:fixed;display:flex;top:0px;z-index:var(--dialog-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.dialog{display:flex;width:80%;position:absolute;top:50%;left:50%;margin-right:-50%;box-sizing:border-box;transform:translate(-50%, -50%);box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122)}@media screen and (min-width: 768px){.dialog{width:50%}}@media screen and (min-width: 992px){.dialog{width:33.33333%}}.dialog__container{width:100%;background:#FFFF;border-radius:0px 6px 6px 0px;box-sizing:border-box;padding:var(--dialog__container-padding)}.dialog__critical--indicator{box-sizing:border-box;width:12px;border-radius:6px 0px 0px 6px;background-color:var(--dialog__critical--background-color)}.dialog__warning--indicator{width:12px;border-radius:6px 0px 0px 6px;box-sizing:border-box;background-color:var(--dialog__warning--background-color)}.message{font-size:var(--dialog__body--font-size);font-weight:var(--dialog__body--text-weight--medium);font-family:var(--dialog__body--font-pattern);text-shadow:var(--dialog__body--text-shadow);padding-bottom:var(--dialog__body--padding-bottom);color:var(--dialog__body--color);max-height:30vh;content-visibility:auto;margin-bottom:24px;overflow-y:auto}.changeable__icon{width:15px;height:15px}.title{display:flex;font-family:var(--dialog__title--font-pattern);margin:0;font-weight:var(--dialog__title--weight--large);line-height:1.3}.title__container{display:flex;padding-bottom:var(--dialog__title__container--padding-bottom)}.title__box{display:flex;width:100%;align-items:center;align-self:center}.title--label{padding-left:var(--dialog__title--padding-left)}.title-icon{outline:none;border:none;background-color:var(--dialog__warning--background-color);width:26px;height:26px;border-radius:100%;padding:0;display:flex;justify-content:center;align-items:center}.title-icon--critical{background-color:var(--dialog__critical--background-color)}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--dialog__btn__close--background-color);width:12px;height:12px;-webkit-mask-image:var(--dialog__btn__close__image);mask-image:var(--dialog__btn__close__image)}.title-icon::after{content:'';display:flex;background-color:#FFFF;width:15px;height:15px;-webkit-mask-image:var(--dialog--warning__image);mask-image:var(--dialog--warning__image)}.title-icon--critical::after{content:'';display:flex;background-color:#FFFF;width:13px;height:13px;-webkit-mask-image:var(--dialog--critical__image);mask-image:var(--dialog--critical__image)}.button-yes-no__container{display:flex;box-sizing:border-box;align-self:center;align-items:center;justify-content:flex-end}.button__no{padding-right:var(--dialog__btn__no--padding-right)}.button__ok--container{display:flex;justify-content:flex-end}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
|
|
1310
1309
|
|
|
1311
1310
|
class Message {
|
|
1312
1311
|
constructor(title, message, critical, confirm, icon, callBack) {
|
|
@@ -1339,6 +1338,9 @@ let EzDialog$1 = class extends HTMLElement {
|
|
|
1339
1338
|
this.opened = false;
|
|
1340
1339
|
this._messageQueue = [];
|
|
1341
1340
|
}
|
|
1341
|
+
/**
|
|
1342
|
+
* Lida com o clique nos botões de dentro do componente.
|
|
1343
|
+
*/
|
|
1342
1344
|
async handleButtonClick(selectedOption) {
|
|
1343
1345
|
this.opened = this._messageQueue.length > 0;
|
|
1344
1346
|
if (this._currentMessage.callBack) {
|
|
@@ -3464,7 +3466,7 @@ const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder,
|
|
|
3464
3466
|
buttons.previousVisible = false;
|
|
3465
3467
|
}
|
|
3466
3468
|
return h("div", { class: "form-sheet" },
|
|
3467
|
-
tabs ? h("ez-tabselector", {
|
|
3469
|
+
tabs ? h("ez-tabselector", { selectedIndex: selectedTab, selectedTab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
|
|
3468
3470
|
dataUnit ? h(NavigationBar, { enabled: enabled, dataUnit: dataUnit, buttonProps: buttons }) : null,
|
|
3469
3471
|
h("div", { class: "tab__container" },
|
|
3470
3472
|
items ? items.map(item => buildFormItem(item, name, store, currentDU, enabled)) : null,
|
|
@@ -3859,104 +3861,51 @@ let EzModal$1 = class extends HTMLElement {
|
|
|
3859
3861
|
/**
|
|
3860
3862
|
* Controle de exibição do Modal
|
|
3861
3863
|
*/
|
|
3862
|
-
this.
|
|
3864
|
+
this.opened = true;
|
|
3863
3865
|
/**
|
|
3864
3866
|
* Define se o modal será fechado ao clicar ESC
|
|
3865
3867
|
*/
|
|
3866
|
-
this.
|
|
3868
|
+
this.closeEsc = false;
|
|
3867
3869
|
/**
|
|
3868
3870
|
* Define se o modal será fechado ao clicar fora do conteúdo.
|
|
3869
3871
|
*/
|
|
3870
|
-
this.
|
|
3872
|
+
this.closeOutsideClick = false;
|
|
3871
3873
|
this.handleKeyboardEvent = (ev) => {
|
|
3872
|
-
if ((ev === null || ev === void 0 ? void 0 : ev.key) ===
|
|
3874
|
+
if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
|
|
3873
3875
|
this.closeModal();
|
|
3874
3876
|
}
|
|
3875
3877
|
};
|
|
3876
3878
|
}
|
|
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);
|
|
3879
|
+
handleopenedChange() {
|
|
3880
|
+
if (this.opened) {
|
|
3881
|
+
document.addEventListener("keydown", this.handleKeyboardEvent);
|
|
3887
3882
|
}
|
|
3888
3883
|
else {
|
|
3889
|
-
document.removeEventListener(
|
|
3884
|
+
document.removeEventListener("keydown", this.handleKeyboardEvent);
|
|
3890
3885
|
}
|
|
3891
3886
|
}
|
|
3892
3887
|
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
|
-
/////
|
|
3888
|
+
this.opened = false;
|
|
3889
|
+
this.ezCloseModal.emit(this.opened);
|
|
3890
|
+
}
|
|
3941
3891
|
componentDidLoad() {
|
|
3942
|
-
this.
|
|
3892
|
+
this.handleopenedChange();
|
|
3943
3893
|
}
|
|
3944
3894
|
onMouseDownHandler(event) {
|
|
3945
|
-
if (this.
|
|
3895
|
+
if (this.closeOutsideClick && event.target === this._overlay) {
|
|
3946
3896
|
this.closeModal();
|
|
3947
3897
|
}
|
|
3948
3898
|
}
|
|
3949
|
-
//Ainda teremos ajustes visuais
|
|
3950
3899
|
render() {
|
|
3951
3900
|
const positionSufix = this.align === "left" ? "left" : "right";
|
|
3952
|
-
return (h(Host, null, this.
|
|
3901
|
+
return (h(Host, null, this.opened
|
|
3953
3902
|
?
|
|
3954
|
-
h("div", { class:
|
|
3903
|
+
h("div", { class: "modal", onMouseDown: evt => this.onMouseDownHandler(evt) }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { class: `modal__content modal__content--${positionSufix} ${this.modalSize}` }, h("slot", null))))
|
|
3955
3904
|
:
|
|
3956
3905
|
undefined));
|
|
3957
3906
|
}
|
|
3958
3907
|
static get watchers() { return {
|
|
3959
|
-
"
|
|
3908
|
+
"opened": ["handleopenedChange"]
|
|
3960
3909
|
}; }
|
|
3961
3910
|
static get style() { return ezModalCss; }
|
|
3962
3911
|
};
|
|
@@ -4262,7 +4211,7 @@ let EzNumericInput$1 = class extends HTMLElement {
|
|
|
4262
4211
|
static get style() { return ezNumericInputCss; }
|
|
4263
4212
|
};
|
|
4264
4213
|
|
|
4265
|
-
const ezPopoverCss = ":host{--
|
|
4214
|
+
const ezPopoverCss = ":host{--popover__box--border-radius:var(--border--radius-medium, 12px);--popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);position:relative;display:flex;user-select:none;width:100%}.box{z-index:var(--more-visible, 1);display:flex;flex-direction:column;height:fit-content;background-color:var(--background--xlight);border-radius:var(--popover__box--border-radius);box-shadow:var(--popover__box--box-shadow)}.box--fit-content{width:fit-content}.box--full-width{width:100%}";
|
|
4266
4215
|
|
|
4267
4216
|
let EzPopover$1 = class extends HTMLElement {
|
|
4268
4217
|
constructor() {
|
|
@@ -4275,28 +4224,28 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4275
4224
|
* No modo floating = false o popover só se tornará visível
|
|
4276
4225
|
* quando o método show() for acionado.
|
|
4277
4226
|
*/
|
|
4278
|
-
this.
|
|
4227
|
+
this.autoClose = true;
|
|
4279
4228
|
/**
|
|
4280
4229
|
* Offset top do popover em relação ao componente pai
|
|
4281
4230
|
*/
|
|
4282
|
-
this.top =
|
|
4231
|
+
this.top = "0px";
|
|
4283
4232
|
/**
|
|
4284
4233
|
* Offset left do popover em relação ao componente pai
|
|
4285
4234
|
*/
|
|
4286
|
-
this.left =
|
|
4235
|
+
this.left = "0px";
|
|
4287
4236
|
/**
|
|
4288
4237
|
* Offset bottom do popover em relação ao componente pai
|
|
4289
4238
|
*/
|
|
4290
|
-
this.bottom =
|
|
4239
|
+
this.bottom = "0px";
|
|
4291
4240
|
/**
|
|
4292
4241
|
* Offset right do popover em relação ao componente pai
|
|
4293
4242
|
*/
|
|
4294
|
-
this.right =
|
|
4243
|
+
this.right = "0px";
|
|
4295
4244
|
/**
|
|
4296
4245
|
* Ajusta o comportamento da largura do popover.
|
|
4297
4246
|
* Opções: "100% e "fit-content" (default)
|
|
4298
4247
|
*/
|
|
4299
|
-
this.
|
|
4248
|
+
this.boxWidth = "fit-content";
|
|
4300
4249
|
}
|
|
4301
4250
|
dispatchVisibilityChange(newValue, oldValue) {
|
|
4302
4251
|
if (newValue != oldValue) {
|
|
@@ -4308,7 +4257,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4308
4257
|
*/
|
|
4309
4258
|
async updatePosition(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
|
|
4310
4259
|
const floatingOptions = {
|
|
4311
|
-
autoClose: this.
|
|
4260
|
+
autoClose: this.autoClose,
|
|
4312
4261
|
top,
|
|
4313
4262
|
left,
|
|
4314
4263
|
bottom,
|
|
@@ -4328,11 +4277,10 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4328
4277
|
}
|
|
4329
4278
|
/**
|
|
4330
4279
|
* Faz com que o popover seja renderizado na DOM.
|
|
4331
|
-
*
|
|
4332
4280
|
*/
|
|
4333
4281
|
async show(top = this.top, left = this.left, bottom = this.bottom, right = this.right) {
|
|
4334
4282
|
const floatingOptions = {
|
|
4335
|
-
autoClose: this.
|
|
4283
|
+
autoClose: this.autoClose,
|
|
4336
4284
|
top,
|
|
4337
4285
|
left,
|
|
4338
4286
|
bottom,
|
|
@@ -4349,7 +4297,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4349
4297
|
}
|
|
4350
4298
|
};
|
|
4351
4299
|
this._floatingID = FloatingManager.float(this._box, this._container, floatingOptions);
|
|
4352
|
-
this.
|
|
4300
|
+
this.opened = true;
|
|
4353
4301
|
}
|
|
4354
4302
|
/**
|
|
4355
4303
|
* Usado no modo floating. Faz com que o componente seja ocultado.
|
|
@@ -4358,7 +4306,7 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4358
4306
|
if (this._floatingID !== undefined) {
|
|
4359
4307
|
FloatingManager.close(this._floatingID);
|
|
4360
4308
|
this._floatingID = undefined;
|
|
4361
|
-
this.
|
|
4309
|
+
this.opened = false;
|
|
4362
4310
|
}
|
|
4363
4311
|
}
|
|
4364
4312
|
componentDidRender() {
|
|
@@ -4368,16 +4316,16 @@ let EzPopover$1 = class extends HTMLElement {
|
|
|
4368
4316
|
}
|
|
4369
4317
|
}
|
|
4370
4318
|
render() {
|
|
4371
|
-
return (h(Host, null, h("section", { ref: el => this._container = el }, h("div", { class: `box ${this.
|
|
4319
|
+
return (h(Host, null, h("section", { ref: el => this._container = el }, h("div", { class: `box ${this.boxWidth === "fit-content" ? "box--fit-content" : "box--full-width"}`, ref: el => this._box = el }, h("slot", null)))));
|
|
4372
4320
|
}
|
|
4373
4321
|
get _host() { return this; }
|
|
4374
4322
|
static get watchers() { return {
|
|
4375
|
-
"
|
|
4323
|
+
"opened": ["dispatchVisibilityChange"]
|
|
4376
4324
|
}; }
|
|
4377
4325
|
static get style() { return ezPopoverCss; }
|
|
4378
4326
|
};
|
|
4379
4327
|
|
|
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--
|
|
4328
|
+
const ezPopupCss = ":host{display:flex;--popup-z-index:var(--most-visible, 3);--popup__container--color:var(--title--primary, #2b3a54);--popup__container--padding:var(--space--large, 24px);--popup__header--padding-bottom:var(--space--medium, 12px);--popup__title--font-family:var(--font-pattern, \"'Sora', 'Algerian'\");--popup__title--font-size:var(--title--extra-large, 24px);--popup__title--color:var(--title--primary, #2b3a54);--popup__title--font-weight:var(--text-weight--large, 600);--popup__btn__close--icon-color:var(--title--primary, #2b3a54);--popup__btn__close--icon:url('data:image/svg+xml;utf8,<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 8.2421753,6.9944578 13.743748,1.4930784 C 13.907781,1.3290628 14,1.1065946 14,0.87462511 14,0.64266712 13.907782,0.42019873 13.743748,0.25617155 13.579712,0.09215597 13.35727,6.48e-8 13.125266,6.48e-8 12.89338,6.48e-8 12.670821,0.09215634 12.506787,0.25617155 L 7.005215,5.7575508 1.5035972,0.25617155 C 1.3395631,0.09215597 1.1170968,6.48e-8 0.88511716,6.48e-8 0.65314917,6.48e-8 0.4306712,0.09215597 0.26663695,0.25617155 0.10260271,0.42019873 0.01045441,0.64266712 0.01045441,0.87462511 c 0,0.23196949 0.0921483,0.45443769 0.25618254,0.61845329 L 5.7682546,6.9944578 0.26663695,12.497027 c -0.0834745,0.08067 -0.15003245,0.1772 -0.19581514,0.283871 C 0.02505077,12.887561 9.831648e-4,13.002399 2.950369e-5,13.118395 -9.2415746e-4,13.234504 0.02125019,13.349689 0.06527245,13.457057 c 0.04401053,0.107479 0.10898307,0.205064 0.1911168,0.287137 0.0821454,0.08208 0.17979645,0.146888 0.28727561,0.190839 0.10747906,0.04395 0.22262954,0.06598 0.33872417,0.06493 0.116095,-10e-4 0.23082547,-0.0253 0.33747687,-0.07112 0.1066637,-0.04593 0.2031133,-0.112615 0.2837313,-0.196086 L 7.005215,8.2313646 12.506787,13.732768 c 0.164034,0.164027 0.386593,0.256125 0.618479,0.256125 0.232004,0 0.454446,-0.09209 0.618482,-0.256125 C 13.907781,13.568741 14,13.346308 14,13.114315 14,12.882323 13.90779,12.659888 13.743748,12.495861 Z\"/></svg>')}.overlay{position:fixed;display:flex;top:0px;z-index:var(--popup-z-index);left:0px;width:100%;align-items:center;justify-content:center;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.popup{display:flex;height:100%;align-items:center;justify-content:center;box-sizing:border-box}.popup__container{width:100%;max-height:90%;display:flex;flex-wrap:wrap;overflow:hidden;background:#FFFF;color:var(--popup__container--color);border-radius:12px;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);box-sizing:border-box;padding:var(--popup__container--padding)}.popup__content{box-sizing:border-box;max-height:100%;width:100%;display:flex;flex-wrap:wrap}.popup__expandable-content{box-sizing:border-box;overflow-y:auto;width:100%;display:flex;flex-wrap:wrap;max-height:80vh;content-visibility:auto}.popup__header{padding-bottom:var(--popup__header--padding-bottom);width:100%;display:flex}.popup__title{display:flex;margin:0;width:100%;font-family:var(--popup__title--font-family);font-size:var(--popup__title--font-size);font-weight:var(--popup__title--font-weight);color:var(--popup__title--color);line-height:1.3}.btn-close{justify-content:flex-end;align-self:flex-start;align-items:flex-start;display:flex;outline:none;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--popup__btn__close--icon-color);width:14px;height:14px;-webkit-mask-image:var(--popup__btn__close--icon);mask-image:var(--popup__btn__close--icon)}.btn-close--solo{width:100%}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
|
|
4381
4329
|
|
|
4382
4330
|
let EzPopup$1 = class extends HTMLElement {
|
|
4383
4331
|
constructor() {
|
|
@@ -4453,7 +4401,7 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4453
4401
|
this.ezChange.emit(evt.detail);
|
|
4454
4402
|
}
|
|
4455
4403
|
render() {
|
|
4456
|
-
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage,
|
|
4404
|
+
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionloader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showselectedvalue, showOptionValue: this.showoptionvalue }));
|
|
4457
4405
|
}
|
|
4458
4406
|
;
|
|
4459
4407
|
static get watchers() { return {
|
|
@@ -4462,93 +4410,93 @@ let EzSearch$1 = class extends HTMLElement {
|
|
|
4462
4410
|
static get style() { return ezSearchCss; }
|
|
4463
4411
|
};
|
|
4464
4412
|
|
|
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);--
|
|
4413
|
+
const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;margin-bottom:var(--space--large, 24px);--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.midle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Sora, Algerian\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}";
|
|
4466
4414
|
|
|
4467
4415
|
let EzTabselector$1 = class extends HTMLElement {
|
|
4468
4416
|
constructor() {
|
|
4469
4417
|
super();
|
|
4470
4418
|
this.__registerHost();
|
|
4471
4419
|
this.__attachShadow();
|
|
4472
|
-
this.
|
|
4473
|
-
this.
|
|
4474
|
-
if (ev.key ===
|
|
4475
|
-
this.
|
|
4476
|
-
this.
|
|
4477
|
-
this.
|
|
4478
|
-
this.handleTabClick(this.
|
|
4420
|
+
this.ezChange = createEvent(this, "ezChange", 7);
|
|
4421
|
+
this.setFocusedParam = (ev) => {
|
|
4422
|
+
if (ev.key === "Enter") {
|
|
4423
|
+
this.selectedIndex = this.focusedIndex;
|
|
4424
|
+
this.focusedIndex = undefined;
|
|
4425
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
4426
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
4479
4427
|
ev.preventDefault();
|
|
4480
|
-
this.setFocusedTab(this.
|
|
4428
|
+
this.setFocusedTab(this.selectedIndex);
|
|
4481
4429
|
}
|
|
4482
|
-
else if (ev.key ===
|
|
4430
|
+
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
4483
4431
|
let operator = undefined;
|
|
4484
|
-
if (ev.key ===
|
|
4432
|
+
if (ev.key === "ArrowLeft") {
|
|
4485
4433
|
operator = false;
|
|
4486
4434
|
}
|
|
4487
|
-
else if (ev.key ===
|
|
4435
|
+
else if (ev.key === "ArrowRight") {
|
|
4488
4436
|
operator = true;
|
|
4489
4437
|
}
|
|
4490
4438
|
else {
|
|
4491
4439
|
return;
|
|
4492
4440
|
}
|
|
4493
|
-
if (this.
|
|
4441
|
+
if (this.focusedIndex === undefined) {
|
|
4494
4442
|
if (operator === false) {
|
|
4495
|
-
this.
|
|
4443
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
|
|
4496
4444
|
}
|
|
4497
4445
|
else {
|
|
4498
|
-
this.
|
|
4446
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
|
|
4499
4447
|
}
|
|
4500
4448
|
}
|
|
4501
4449
|
else {
|
|
4502
4450
|
if (operator === false) {
|
|
4503
|
-
this.
|
|
4451
|
+
this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
|
|
4504
4452
|
}
|
|
4505
4453
|
else {
|
|
4506
|
-
this.
|
|
4454
|
+
this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
|
|
4507
4455
|
}
|
|
4508
4456
|
}
|
|
4509
|
-
if (parseInt(this.
|
|
4510
|
-
this.
|
|
4457
|
+
if (parseInt(this.focusedIndex) < 0) {
|
|
4458
|
+
this.focusedIndex = "0";
|
|
4511
4459
|
}
|
|
4512
|
-
else if (parseInt(this.
|
|
4513
|
-
this.
|
|
4460
|
+
else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
|
|
4461
|
+
this.focusedIndex = (this._processedTabs.length - 1).toString();
|
|
4514
4462
|
}
|
|
4515
|
-
this.
|
|
4516
|
-
this.setFocusedTab(this.
|
|
4517
|
-
this.
|
|
4463
|
+
this.setFocusedBtn(true, this.focusedIndex);
|
|
4464
|
+
this.setFocusedTab(this.focusedIndex);
|
|
4465
|
+
this.ezChange.emit();
|
|
4518
4466
|
}
|
|
4519
|
-
else if (ev.key ===
|
|
4520
|
-
this.
|
|
4521
|
-
this.
|
|
4522
|
-
this.handleTabClick(this.
|
|
4467
|
+
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
4468
|
+
this.focusedIndex = undefined;
|
|
4469
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
4470
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
4523
4471
|
ev.preventDefault();
|
|
4524
|
-
this.setFocusedTab(this.
|
|
4472
|
+
this.setFocusedTab(this.selectedIndex);
|
|
4525
4473
|
}
|
|
4526
4474
|
// this.setFocusedTab();
|
|
4527
4475
|
};
|
|
4528
4476
|
}
|
|
4529
4477
|
handleTabClick(tab, index) {
|
|
4530
|
-
this.
|
|
4531
|
-
this.
|
|
4532
|
-
this.
|
|
4533
|
-
this.
|
|
4534
|
-
this.
|
|
4478
|
+
this.selectedIndex = index.toString();
|
|
4479
|
+
this.focusedIndex = undefined;
|
|
4480
|
+
this.selectedTab = tab;
|
|
4481
|
+
this.ezChange.emit();
|
|
4482
|
+
this.setFocusedBtn(false, this.selectedIndex);
|
|
4535
4483
|
}
|
|
4536
4484
|
componentWillRender() {
|
|
4537
4485
|
if (!this._processedTabs) {
|
|
4538
4486
|
this._processedTabs = [];
|
|
4539
4487
|
if (this.tabs) {
|
|
4540
|
-
this.tabs.split(
|
|
4488
|
+
this.tabs.split(",").forEach((label) => {
|
|
4541
4489
|
label = label.trim();
|
|
4542
4490
|
this._processedTabs.push(new Tab(label, label));
|
|
4543
4491
|
});
|
|
4544
4492
|
}
|
|
4545
|
-
this._hostElem.querySelectorAll(
|
|
4546
|
-
const tabKey = elem.getAttribute(
|
|
4547
|
-
const label = elem.getAttribute(
|
|
4493
|
+
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
4494
|
+
const tabKey = elem.getAttribute("tabKey");
|
|
4495
|
+
const label = elem.getAttribute("label");
|
|
4548
4496
|
const t = new Tab(label, tabKey);
|
|
4549
4497
|
const content = elem.firstChild;
|
|
4550
4498
|
if (content) {
|
|
4551
|
-
content.setAttribute(
|
|
4499
|
+
content.setAttribute("slot", "tab" + this._processedTabs.length);
|
|
4552
4500
|
this._hostElem.appendChild(content);
|
|
4553
4501
|
}
|
|
4554
4502
|
this._processedTabs.push(t);
|
|
@@ -4572,7 +4520,7 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4572
4520
|
const container = this._scrollContainer;
|
|
4573
4521
|
if (container) {
|
|
4574
4522
|
let lastTab = null;
|
|
4575
|
-
container.querySelectorAll(
|
|
4523
|
+
container.querySelectorAll(".tab").forEach((tab) => {
|
|
4576
4524
|
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
4577
4525
|
lastTab = tab;
|
|
4578
4526
|
}
|
|
@@ -4591,18 +4539,18 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4591
4539
|
this._startHidden = container.scrollLeft > 0;
|
|
4592
4540
|
this._endHidden = remainingScroll > 0;
|
|
4593
4541
|
if (this._startHidden) {
|
|
4594
|
-
this._backwardButton.classList.remove(
|
|
4542
|
+
this._backwardButton.classList.remove("hidden");
|
|
4595
4543
|
}
|
|
4596
4544
|
else {
|
|
4597
|
-
this._backwardButton.classList.add(
|
|
4545
|
+
this._backwardButton.classList.add("hidden");
|
|
4598
4546
|
}
|
|
4599
4547
|
if (this._endHidden) {
|
|
4600
|
-
this._forwardButton.classList.remove(
|
|
4548
|
+
this._forwardButton.classList.remove("hidden");
|
|
4601
4549
|
}
|
|
4602
4550
|
else {
|
|
4603
|
-
this._forwardButton.classList.add(
|
|
4551
|
+
this._forwardButton.classList.add("hidden");
|
|
4604
4552
|
}
|
|
4605
|
-
const classNames = [
|
|
4553
|
+
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
4606
4554
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
4607
4555
|
classNames.forEach((name) => {
|
|
4608
4556
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -4619,11 +4567,9 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4619
4567
|
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
4620
4568
|
}
|
|
4621
4569
|
setFocusedTab(index) {
|
|
4622
|
-
window.clearTimeout(this.
|
|
4623
|
-
this.
|
|
4570
|
+
window.clearTimeout(this._scrollCallBackTest);
|
|
4571
|
+
this._scrollCallBackTest = window.setTimeout(() => {
|
|
4624
4572
|
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
4625
|
-
console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
|
|
4626
|
-
console.log('tabtoscroll', tabtoscroll);
|
|
4627
4573
|
tabtoscroll.scrollIntoView();
|
|
4628
4574
|
}, 200);
|
|
4629
4575
|
}
|
|
@@ -4632,27 +4578,27 @@ let EzTabselector$1 = class extends HTMLElement {
|
|
|
4632
4578
|
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
4633
4579
|
}
|
|
4634
4580
|
const context = this._textMesurement.getContext("2d");
|
|
4635
|
-
context.font =
|
|
4636
|
-
return Math.min(220, 24 + context.measureText(text).width) +
|
|
4581
|
+
context.font = "14px Sora, Algerian";
|
|
4582
|
+
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
4637
4583
|
}
|
|
4638
4584
|
;
|
|
4639
|
-
|
|
4640
|
-
const tabsButtons = this._scrollContainer.querySelectorAll(
|
|
4585
|
+
setFocusedBtn(visible, parameter) {
|
|
4586
|
+
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
4641
4587
|
tabsButtons.forEach((el) => {
|
|
4642
|
-
el.classList.remove(
|
|
4643
|
-
if (el.id ===
|
|
4644
|
-
el.classList.add(
|
|
4588
|
+
el.classList.remove("is-focused");
|
|
4589
|
+
if (el.id === "tab" + parameter && visible) {
|
|
4590
|
+
el.classList.add("is-focused");
|
|
4645
4591
|
}
|
|
4646
4592
|
});
|
|
4647
4593
|
}
|
|
4648
4594
|
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 = {
|
|
4595
|
+
return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
|
|
4596
|
+
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
4651
4597
|
const tabId = "tab" + index;
|
|
4652
|
-
const isSelected = index === parseInt(this.
|
|
4598
|
+
const isSelected = index === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
4653
4599
|
if (isSelected) {
|
|
4654
|
-
this.
|
|
4655
|
-
this.
|
|
4600
|
+
this.selectedTab = tab.tabKey;
|
|
4601
|
+
this.selectedIndex = index.toString();
|
|
4656
4602
|
}
|
|
4657
4603
|
return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index), style: labelStyle }, h("span", { class: "tab-label", title: tab.label }, tab.label), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
|
|
4658
4604
|
})), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
@@ -5646,19 +5592,19 @@ const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"la
|
|
|
5646
5592
|
const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516]}]);
|
|
5647
5593
|
const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
|
|
5648
5594
|
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"],"
|
|
5595
|
+
const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}]);
|
|
5650
5596
|
const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}]);
|
|
5651
5597
|
const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
|
|
5652
5598
|
const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540]}]);
|
|
5653
5599
|
const EzIcon = /*@__PURE__*/proxyCustomElement(EzIcon$1, [1,"ez-icon",{"size":[513],"href":[513]}]);
|
|
5654
5600
|
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",{"
|
|
5601
|
+
const EzModal = /*@__PURE__*/proxyCustomElement(EzModal$1, [1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]);
|
|
5656
5602
|
const EzNumberInput = /*@__PURE__*/proxyCustomElement(NumberInput, [1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513]}]);
|
|
5657
5603
|
const EzNumericInput = /*@__PURE__*/proxyCustomElement(EzNumericInput$1, [1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}]);
|
|
5658
|
-
const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"
|
|
5604
|
+
const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540]}]);
|
|
5659
5605
|
const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]);
|
|
5660
5606
|
const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}]);
|
|
5661
|
-
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"
|
|
5607
|
+
const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}]);
|
|
5662
5608
|
const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538]}]);
|
|
5663
5609
|
const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1]}]);
|
|
5664
5610
|
const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"]}]);
|