@sankhyalabs/ezui 1.1.68 → 1.1.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ez-action-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-button_16.cjs.entry.js +97 -97
- package/dist/cjs/ez-dialog.cjs.entry.js +7 -1
- package/dist/cjs/ez-modal.cjs.entry.js +16 -69
- package/dist/cjs/ez-popover.cjs.entry.js +13 -18
- package/dist/cjs/ez-popup.cjs.entry.js +2 -2
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-action-chip/ez-action-chip.css +2 -1
- package/dist/collection/components/ez-action-chip/ez-action-chip.js +1 -1
- package/dist/collection/components/ez-button/ez-button.css +11 -6
- package/dist/collection/components/ez-button/ez-button.js +4 -1
- package/dist/collection/components/ez-calendar/ez-calendar.css +2 -2
- package/dist/collection/components/ez-check/ez-check.js +6 -6
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +2 -2
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.css +46 -44
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +36 -37
- package/dist/collection/components/ez-date-input/ez-date-input.js +1 -1
- package/dist/collection/components/ez-dialog/ez-dialog.css +43 -43
- package/dist/collection/components/ez-dialog/ez-dialog.js +10 -4
- package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +1 -1
- package/dist/collection/components/ez-icon/ez-icon.js +2 -2
- package/dist/collection/components/ez-label-chip/ez-label-chip.css +2 -1
- package/dist/collection/components/ez-label-chip/ez-label-chip.js +1 -1
- package/dist/collection/components/ez-modal/ez-modal.css +1 -1
- package/dist/collection/components/ez-modal/ez-modal.js +30 -83
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.css +1 -1
- package/dist/collection/components/ez-numeric-input/ez-numeric-input.js +2 -2
- package/dist/collection/components/ez-popover/ez-popover.css +4 -5
- package/dist/collection/components/ez-popover/ez-popover.js +25 -30
- package/dist/collection/components/ez-popup/ez-popup.css +7 -7
- package/dist/collection/components/ez-popup/ez-popup.js +4 -4
- package/dist/collection/components/ez-search/ez-search.js +3 -3
- package/dist/collection/components/ez-tabselector/ez-tabselector.css +7 -10
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +68 -70
- package/dist/collection/components/ez-text-area/ez-text-area.css +6 -0
- package/dist/collection/components/ez-text-area/ez-text-area.js +4 -4
- package/dist/collection/components/ez-text-input/ez-text-input.css +8 -0
- package/dist/collection/components/ez-text-input/ez-text-input.js +3 -3
- package/dist/collection/components/ez-time-input/ez-time-input.css +8 -0
- package/dist/collection/components/ez-time-input/ez-time-input.js +1 -1
- package/dist/collection/components/ez-toast/ez-toast.css +2 -2
- package/dist/collection/components/ez-upload/ez-upload.css +4 -1
- package/dist/collection/components/ez-upload/ez-upload.js +3 -3
- package/dist/custom-elements/index.js +140 -192
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +97 -97
- package/dist/esm/ez-dialog.entry.js +7 -1
- package/dist/esm/ez-modal.entry.js +16 -69
- package/dist/esm/ez-popover.entry.js +13 -18
- package/dist/esm/ez-popup.entry.js +2 -2
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-1bc9ddad.entry.js +1 -0
- package/dist/ezui/{p-4f4b8aae.entry.js → p-1c33a56d.entry.js} +1 -1
- package/dist/ezui/p-5aa8871e.entry.js +1 -0
- package/dist/ezui/p-a7e23f65.entry.js +1 -0
- package/dist/ezui/p-a88ee12f.entry.js +1 -0
- package/dist/ezui/p-b692a0ab.entry.js +1 -0
- package/dist/types/components/ez-action-chip/ez-action-chip.d.ts +1 -1
- package/dist/types/components/ez-button/ez-button.d.ts +1 -1
- package/dist/types/components/ez-check/ez-check.d.ts +3 -3
- package/dist/types/components/ez-collapsible-box/ez-collapsible-box.d.ts +1 -1
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +7 -7
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +1 -1
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +8 -2
- package/dist/types/components/ez-icon/ez-icon.d.ts +1 -1
- package/dist/types/components/ez-label-chip/ez-label-chip.d.ts +1 -1
- package/dist/types/components/ez-modal/ez-modal.d.ts +9 -9
- package/dist/types/components/ez-numeric-input/ez-numeric-input.d.ts +2 -2
- package/dist/types/components/ez-popover/ez-popover.d.ts +4 -5
- package/dist/types/components/ez-popup/ez-popup.d.ts +3 -3
- package/dist/types/components/ez-search/ez-search.d.ts +2 -2
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +19 -10
- package/dist/types/components/ez-text-area/ez-text-area.d.ts +3 -3
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +3 -3
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +1 -1
- package/dist/types/components/ez-upload/ez-upload.d.ts +3 -3
- package/dist/types/components.d.ts +116 -92
- package/package.json +1 -1
- package/dist/ezui/p-7c7dbfcb.entry.js +0 -1
- package/dist/ezui/p-7d066b1c.entry.js +0 -1
- package/dist/ezui/p-8c8f1c00.entry.js +0 -1
- package/dist/ezui/p-d185d7e8.entry.js +0 -1
- package/dist/ezui/p-ee5058c1.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-89fc9bfd.js';
|
|
2
2
|
|
|
3
|
-
const ezActionChipCss = ":host{--ac--height:36px;--ac--border-radius:var(--border--radius-large, 24px);--ac__border:1px solid;--ac__border-color-strokes:var(--color--strokes, #DCE0E8);--ac--font-size:var(--text--medium, 14px);--ac--font-family:var(--font-pattern, Arial);--ac--font-weight:var(--text-weight--large, 500);--ac__label--title--primary:var(--title--primary, #919191);--ac__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ac__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ac__label__default--border-color--hover:var(--color--primary-600, #007a5a)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;color:var(--ac__label--title--primary);fill:var(--ac__label--title--primary);border:var(--ac__border);border-radius:var(--ac--border-radius);border-color:var(--ac__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px)
|
|
3
|
+
const ezActionChipCss = ":host{--ac--height:36px;--ac--border-radius:var(--border--radius-large, 24px);--ac__border:1px solid;--ac__border-color-strokes:var(--color--strokes, #DCE0E8);--ac--font-size:var(--text--medium, 14px);--ac--font-family:var(--font-pattern, Arial);--ac--font-weight:var(--text-weight--large, 500);--ac__label--title--primary:var(--title--primary, #919191);--ac__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ac__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ac__label__default--border-color--hover:var(--color--primary-600, #007a5a)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;cursor:pointer;color:var(--ac__label--title--primary);fill:var(--ac__label--title--primary);border:var(--ac__border);border-radius:var(--ac--border-radius);border-color:var(--ac__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px)}.label__container:hover{border-color:var(--ac__label__default--border-color--hover);background-color:var(--ac__label__default--background-color--hover)}label{display:flex;align-items:center;font-weight:var(--text-weight--large, 600);cursor:pointer;height:var(--ac--height);font-family:var(--ac--font-family);font-size:var(--ac--font-size)}";
|
|
4
4
|
|
|
5
5
|
let EzLabelChip = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, h, c as createEvent, f as forceUpdate, H as Host
|
|
|
2
2
|
import { N as NumberUtils, M as MaskFormatter } from './RequestMetadata-c265c9d5.js';
|
|
3
3
|
import { F as FloatingManager } from './FloatingManager-bb90ef41.js';
|
|
4
4
|
|
|
5
|
-
const ezButtonCss = ":host{--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--
|
|
5
|
+
const ezButtonCss = ":host{--button--min-width:100px;--button--height:42px;--button__icon--width:18px;--button__inline__icon--padding:12px;--button--padding-top:var(--space--medium, 12px);--button--padding-bottom:var(--space--medium, 12px);--button--padding-right:var(--space--large, 24px);--button--padding-left:var(--space--large, 24px);--button--color:var(--text--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;}";
|
|
6
6
|
|
|
7
7
|
let EzButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -28,6 +28,9 @@ let EzButton = class {
|
|
|
28
28
|
content.style.paddingLeft = "var(--button__inline__icon--padding)";
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
+
else {
|
|
32
|
+
content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
|
|
33
|
+
}
|
|
31
34
|
}
|
|
32
35
|
render() {
|
|
33
36
|
if (this.mode == "icon") {
|
|
@@ -208,12 +211,12 @@ let EzCheck = class {
|
|
|
208
211
|
registerInstance(this, hostRef);
|
|
209
212
|
this.ezChange = createEvent(this, "ezChange", 7);
|
|
210
213
|
/**
|
|
211
|
-
* Deixa o campo disponível ou não
|
|
214
|
+
* Deixa o campo disponível ou não para interação com o usuário.
|
|
212
215
|
*/
|
|
213
216
|
this.enabled = true;
|
|
214
217
|
/**
|
|
215
218
|
* Existem dois modos de visualização: regular e switch.
|
|
216
|
-
* Se esta propriedade for omitida, o componete assume o formato "regular"
|
|
219
|
+
* Se esta propriedade for omitida, o componete assume o formato "regular".
|
|
217
220
|
* No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
|
|
218
221
|
* No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
|
|
219
222
|
*/
|
|
@@ -254,7 +257,7 @@ let EzCheck = class {
|
|
|
254
257
|
getLabelClasses() {
|
|
255
258
|
let classes = "label";
|
|
256
259
|
if (!this.enabled) {
|
|
257
|
-
classes
|
|
260
|
+
classes += " label--disabled";
|
|
258
261
|
}
|
|
259
262
|
return classes;
|
|
260
263
|
}
|
|
@@ -307,7 +310,7 @@ let EzCollapsibleBox = class {
|
|
|
307
310
|
};
|
|
308
311
|
EzCollapsibleBox.style = ezCollapsibleBoxCss;
|
|
309
312
|
|
|
310
|
-
const ezComboBoxCss = ":host{--
|
|
313
|
+
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)}";
|
|
311
314
|
|
|
312
315
|
let EzComboBox = class {
|
|
313
316
|
constructor(hostRef) {
|
|
@@ -320,11 +323,11 @@ let EzComboBox = class {
|
|
|
320
323
|
/**
|
|
321
324
|
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
322
325
|
*/
|
|
323
|
-
this.
|
|
326
|
+
this.showSelectedValue = false;
|
|
324
327
|
/**
|
|
325
328
|
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
326
329
|
*/
|
|
327
|
-
this.
|
|
330
|
+
this.showOptionValue = false;
|
|
328
331
|
}
|
|
329
332
|
internalUpdate() {
|
|
330
333
|
if (this._inputElement) {
|
|
@@ -336,29 +339,29 @@ let EzComboBox = class {
|
|
|
336
339
|
this.updateVisibleOptions();
|
|
337
340
|
}
|
|
338
341
|
getText() {
|
|
339
|
-
let text =
|
|
342
|
+
let text = "";
|
|
340
343
|
const selected = this.getSelectedOption();
|
|
341
344
|
if (selected) {
|
|
342
|
-
text = this.
|
|
345
|
+
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
343
346
|
}
|
|
344
347
|
return text;
|
|
345
348
|
}
|
|
346
349
|
getSelectedOption() {
|
|
347
|
-
if (typeof this.value ===
|
|
350
|
+
if (typeof this.value === "string" || this.value instanceof String) {
|
|
348
351
|
return this._visibleOptions.find(o => o.value === this.value);
|
|
349
352
|
}
|
|
350
353
|
return this.value;
|
|
351
354
|
}
|
|
352
355
|
updateVisibleOptions() {
|
|
353
356
|
let opts = this._source || [];
|
|
354
|
-
if (!this.
|
|
357
|
+
if (!this.searchMode && this._criteria) {
|
|
355
358
|
const upperCriteria = this._criteria.toUpperCase();
|
|
356
359
|
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
357
360
|
}
|
|
358
|
-
this._visibleOptions = [{ value:
|
|
361
|
+
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
359
362
|
}
|
|
360
363
|
buildItem(opt, index) {
|
|
361
|
-
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.
|
|
364
|
+
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);
|
|
362
365
|
}
|
|
363
366
|
showOptions() {
|
|
364
367
|
if (!this.enabled) {
|
|
@@ -367,10 +370,10 @@ let EzComboBox = class {
|
|
|
367
370
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
368
371
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
369
372
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
370
|
-
const top = this.errorMessage ?
|
|
373
|
+
const top = this.errorMessage ? "0px" : "-17px";
|
|
371
374
|
this._floatingID = FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
372
375
|
window.requestAnimationFrame(() => {
|
|
373
|
-
this._optionsList.scrollIntoView({ behavior:
|
|
376
|
+
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
374
377
|
});
|
|
375
378
|
}
|
|
376
379
|
hideOptions() {
|
|
@@ -383,7 +386,7 @@ let EzComboBox = class {
|
|
|
383
386
|
return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
|
|
384
387
|
}
|
|
385
388
|
nextOption() {
|
|
386
|
-
if (this.
|
|
389
|
+
if (this.searchMode && !this.isOptionsVisible()) {
|
|
387
390
|
return;
|
|
388
391
|
}
|
|
389
392
|
this.showOptions();
|
|
@@ -419,7 +422,7 @@ let EzComboBox = class {
|
|
|
419
422
|
selectOption(opt) {
|
|
420
423
|
const currentOpt = this.getSelectedOption();
|
|
421
424
|
if (currentOpt !== opt) {
|
|
422
|
-
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ?
|
|
425
|
+
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
423
426
|
this.value = adjustedOpt;
|
|
424
427
|
this.ezChange.emit(adjustedOpt);
|
|
425
428
|
}
|
|
@@ -437,10 +440,10 @@ let EzComboBox = class {
|
|
|
437
440
|
this.updateVisibleOptions();
|
|
438
441
|
}
|
|
439
442
|
}
|
|
440
|
-
loadOptions(mode, argument =
|
|
443
|
+
loadOptions(mode, argument = "") {
|
|
441
444
|
this._criteria = argument;
|
|
442
|
-
if (this.
|
|
443
|
-
this.updateSource(this.
|
|
445
|
+
if (this.optionLoader) {
|
|
446
|
+
this.updateSource(this.optionLoader({ mode, argument }));
|
|
444
447
|
}
|
|
445
448
|
else {
|
|
446
449
|
this.updateSource(this.options);
|
|
@@ -448,7 +451,7 @@ let EzComboBox = class {
|
|
|
448
451
|
}
|
|
449
452
|
cancelPreselection() {
|
|
450
453
|
if (!this._inputElement.value && this.value) {
|
|
451
|
-
this.selectOption(
|
|
454
|
+
this.selectOption(undefined);
|
|
452
455
|
}
|
|
453
456
|
else {
|
|
454
457
|
this.internalUpdate();
|
|
@@ -460,11 +463,11 @@ let EzComboBox = class {
|
|
|
460
463
|
componentWillLoad() {
|
|
461
464
|
if (this.options === undefined) {
|
|
462
465
|
this.options = [];
|
|
463
|
-
const optionsTags = this.el.querySelectorAll(
|
|
466
|
+
const optionsTags = this.el.querySelectorAll("option");
|
|
464
467
|
if (optionsTags) {
|
|
465
468
|
optionsTags.forEach(e => {
|
|
466
469
|
let label = e.innerText;
|
|
467
|
-
let value = e.getAttribute(
|
|
470
|
+
let value = e.getAttribute("value");
|
|
468
471
|
if (!value) {
|
|
469
472
|
value = label;
|
|
470
473
|
}
|
|
@@ -473,11 +476,11 @@ let EzComboBox = class {
|
|
|
473
476
|
});
|
|
474
477
|
}
|
|
475
478
|
}
|
|
476
|
-
if (this.
|
|
479
|
+
if (this.searchMode) {
|
|
477
480
|
this.updateSource([]);
|
|
478
481
|
}
|
|
479
482
|
else {
|
|
480
|
-
this.loadOptions(
|
|
483
|
+
this.loadOptions("PRELOAD");
|
|
481
484
|
}
|
|
482
485
|
}
|
|
483
486
|
componentDidRender() {
|
|
@@ -495,13 +498,12 @@ let EzComboBox = class {
|
|
|
495
498
|
const argument = event.target.value;
|
|
496
499
|
this._criteria = argument;
|
|
497
500
|
if (this._criteria) {
|
|
498
|
-
if (this.
|
|
501
|
+
if (this.searchMode) {
|
|
499
502
|
if (this._changeDeboucingTimeout) {
|
|
500
503
|
window.clearTimeout(this._changeDeboucingTimeout);
|
|
501
504
|
}
|
|
502
505
|
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
503
|
-
|
|
504
|
-
this.loadOptions('PREDICTIVE', argument);
|
|
506
|
+
this.loadOptions("PREDICTIVE", argument);
|
|
505
507
|
}, 200);
|
|
506
508
|
}
|
|
507
509
|
else {
|
|
@@ -511,7 +513,7 @@ let EzComboBox = class {
|
|
|
511
513
|
}
|
|
512
514
|
}
|
|
513
515
|
onTextInputClickHandler() {
|
|
514
|
-
if (!this.
|
|
516
|
+
if (!this.searchMode) {
|
|
515
517
|
this.showOptions();
|
|
516
518
|
}
|
|
517
519
|
}
|
|
@@ -536,8 +538,8 @@ let EzComboBox = class {
|
|
|
536
538
|
this.cancelPreselection();
|
|
537
539
|
}
|
|
538
540
|
render() {
|
|
539
|
-
return (h(Host, null, h("ez-text-input", { ref: elem => this._inputElement = elem, enabled: this.enabled, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), errorMessage: this.errorMessage }, this.
|
|
540
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions(
|
|
541
|
+
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 ?
|
|
542
|
+
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
541
543
|
:
|
|
542
544
|
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))))));
|
|
543
545
|
}
|
|
@@ -2701,7 +2703,7 @@ const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder,
|
|
|
2701
2703
|
buttons.previousVisible = false;
|
|
2702
2704
|
}
|
|
2703
2705
|
return h("div", { class: "form-sheet" },
|
|
2704
|
-
tabs ? h("ez-tabselector", {
|
|
2706
|
+
tabs ? h("ez-tabselector", { selectedIndex: selectedTab, selectedTab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
|
|
2705
2707
|
dataUnit ? h(NavigationBar, { enabled: enabled, dataUnit: dataUnit, buttonProps: buttons }) : null,
|
|
2706
2708
|
h("div", { class: "tab__container" },
|
|
2707
2709
|
items ? items.map(item => buildFormItem(item, name, store, currentDU, enabled)) : null,
|
|
@@ -2966,7 +2968,7 @@ let EzIcon = class {
|
|
|
2966
2968
|
constructor(hostRef) {
|
|
2967
2969
|
registerInstance(this, hostRef);
|
|
2968
2970
|
/**
|
|
2969
|
-
* Tamanho do
|
|
2971
|
+
* Tamanho do ícone
|
|
2970
2972
|
*/
|
|
2971
2973
|
this.size = 'medium';
|
|
2972
2974
|
}
|
|
@@ -3069,7 +3071,7 @@ let EzSearch = class {
|
|
|
3069
3071
|
this.ezChange.emit(evt.detail);
|
|
3070
3072
|
}
|
|
3071
3073
|
render() {
|
|
3072
|
-
return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage,
|
|
3074
|
+
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 }));
|
|
3073
3075
|
}
|
|
3074
3076
|
;
|
|
3075
3077
|
static get watchers() { return {
|
|
@@ -3078,91 +3080,91 @@ let EzSearch = class {
|
|
|
3078
3080
|
};
|
|
3079
3081
|
EzSearch.style = ezSearchCss;
|
|
3080
3082
|
|
|
3081
|
-
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);--
|
|
3083
|
+
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}";
|
|
3082
3084
|
|
|
3083
3085
|
let EzTabselector = class {
|
|
3084
3086
|
constructor(hostRef) {
|
|
3085
3087
|
registerInstance(this, hostRef);
|
|
3086
|
-
this.
|
|
3087
|
-
this.
|
|
3088
|
-
if (ev.key ===
|
|
3089
|
-
this.
|
|
3090
|
-
this.
|
|
3091
|
-
this.
|
|
3092
|
-
this.handleTabClick(this.
|
|
3088
|
+
this.ezChange = createEvent(this, "ezChange", 7);
|
|
3089
|
+
this.setFocusedParam = (ev) => {
|
|
3090
|
+
if (ev.key === "Enter") {
|
|
3091
|
+
this.selectedIndex = this.focusedIndex;
|
|
3092
|
+
this.focusedIndex = undefined;
|
|
3093
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
3094
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
3093
3095
|
ev.preventDefault();
|
|
3094
|
-
this.setFocusedTab(this.
|
|
3096
|
+
this.setFocusedTab(this.selectedIndex);
|
|
3095
3097
|
}
|
|
3096
|
-
else if (ev.key ===
|
|
3098
|
+
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
3097
3099
|
let operator = undefined;
|
|
3098
|
-
if (ev.key ===
|
|
3100
|
+
if (ev.key === "ArrowLeft") {
|
|
3099
3101
|
operator = false;
|
|
3100
3102
|
}
|
|
3101
|
-
else if (ev.key ===
|
|
3103
|
+
else if (ev.key === "ArrowRight") {
|
|
3102
3104
|
operator = true;
|
|
3103
3105
|
}
|
|
3104
3106
|
else {
|
|
3105
3107
|
return;
|
|
3106
3108
|
}
|
|
3107
|
-
if (this.
|
|
3109
|
+
if (this.focusedIndex === undefined) {
|
|
3108
3110
|
if (operator === false) {
|
|
3109
|
-
this.
|
|
3111
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
|
|
3110
3112
|
}
|
|
3111
3113
|
else {
|
|
3112
|
-
this.
|
|
3114
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
|
|
3113
3115
|
}
|
|
3114
3116
|
}
|
|
3115
3117
|
else {
|
|
3116
3118
|
if (operator === false) {
|
|
3117
|
-
this.
|
|
3119
|
+
this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
|
|
3118
3120
|
}
|
|
3119
3121
|
else {
|
|
3120
|
-
this.
|
|
3122
|
+
this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
|
|
3121
3123
|
}
|
|
3122
3124
|
}
|
|
3123
|
-
if (parseInt(this.
|
|
3124
|
-
this.
|
|
3125
|
+
if (parseInt(this.focusedIndex) < 0) {
|
|
3126
|
+
this.focusedIndex = "0";
|
|
3125
3127
|
}
|
|
3126
|
-
else if (parseInt(this.
|
|
3127
|
-
this.
|
|
3128
|
+
else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
|
|
3129
|
+
this.focusedIndex = (this._processedTabs.length - 1).toString();
|
|
3128
3130
|
}
|
|
3129
|
-
this.
|
|
3130
|
-
this.setFocusedTab(this.
|
|
3131
|
-
this.
|
|
3132
|
-
}
|
|
3133
|
-
else if (ev.key ===
|
|
3134
|
-
this.
|
|
3135
|
-
this.
|
|
3136
|
-
this.handleTabClick(this.
|
|
3131
|
+
this.setFocusedBtn(true, this.focusedIndex);
|
|
3132
|
+
this.setFocusedTab(this.focusedIndex);
|
|
3133
|
+
this.ezChange.emit();
|
|
3134
|
+
}
|
|
3135
|
+
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
3136
|
+
this.focusedIndex = undefined;
|
|
3137
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
3138
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
3137
3139
|
ev.preventDefault();
|
|
3138
|
-
this.setFocusedTab(this.
|
|
3140
|
+
this.setFocusedTab(this.selectedIndex);
|
|
3139
3141
|
}
|
|
3140
3142
|
// this.setFocusedTab();
|
|
3141
3143
|
};
|
|
3142
3144
|
}
|
|
3143
3145
|
handleTabClick(tab, index) {
|
|
3144
|
-
this.
|
|
3145
|
-
this.
|
|
3146
|
-
this.
|
|
3147
|
-
this.
|
|
3148
|
-
this.
|
|
3146
|
+
this.selectedIndex = index.toString();
|
|
3147
|
+
this.focusedIndex = undefined;
|
|
3148
|
+
this.selectedTab = tab;
|
|
3149
|
+
this.ezChange.emit();
|
|
3150
|
+
this.setFocusedBtn(false, this.selectedIndex);
|
|
3149
3151
|
}
|
|
3150
3152
|
componentWillRender() {
|
|
3151
3153
|
if (!this._processedTabs) {
|
|
3152
3154
|
this._processedTabs = [];
|
|
3153
3155
|
if (this.tabs) {
|
|
3154
|
-
this.tabs.split(
|
|
3156
|
+
this.tabs.split(",").forEach((label) => {
|
|
3155
3157
|
label = label.trim();
|
|
3156
3158
|
this._processedTabs.push(new Tab(label, label));
|
|
3157
3159
|
});
|
|
3158
3160
|
}
|
|
3159
|
-
this._hostElem.querySelectorAll(
|
|
3160
|
-
const tabKey = elem.getAttribute(
|
|
3161
|
-
const label = elem.getAttribute(
|
|
3161
|
+
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
3162
|
+
const tabKey = elem.getAttribute("tabKey");
|
|
3163
|
+
const label = elem.getAttribute("label");
|
|
3162
3164
|
const t = new Tab(label, tabKey);
|
|
3163
3165
|
const content = elem.firstChild;
|
|
3164
3166
|
if (content) {
|
|
3165
|
-
content.setAttribute(
|
|
3167
|
+
content.setAttribute("slot", "tab" + this._processedTabs.length);
|
|
3166
3168
|
this._hostElem.appendChild(content);
|
|
3167
3169
|
}
|
|
3168
3170
|
this._processedTabs.push(t);
|
|
@@ -3186,7 +3188,7 @@ let EzTabselector = class {
|
|
|
3186
3188
|
const container = this._scrollContainer;
|
|
3187
3189
|
if (container) {
|
|
3188
3190
|
let lastTab = null;
|
|
3189
|
-
container.querySelectorAll(
|
|
3191
|
+
container.querySelectorAll(".tab").forEach((tab) => {
|
|
3190
3192
|
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
3191
3193
|
lastTab = tab;
|
|
3192
3194
|
}
|
|
@@ -3205,18 +3207,18 @@ let EzTabselector = class {
|
|
|
3205
3207
|
this._startHidden = container.scrollLeft > 0;
|
|
3206
3208
|
this._endHidden = remainingScroll > 0;
|
|
3207
3209
|
if (this._startHidden) {
|
|
3208
|
-
this._backwardButton.classList.remove(
|
|
3210
|
+
this._backwardButton.classList.remove("hidden");
|
|
3209
3211
|
}
|
|
3210
3212
|
else {
|
|
3211
|
-
this._backwardButton.classList.add(
|
|
3213
|
+
this._backwardButton.classList.add("hidden");
|
|
3212
3214
|
}
|
|
3213
3215
|
if (this._endHidden) {
|
|
3214
|
-
this._forwardButton.classList.remove(
|
|
3216
|
+
this._forwardButton.classList.remove("hidden");
|
|
3215
3217
|
}
|
|
3216
3218
|
else {
|
|
3217
|
-
this._forwardButton.classList.add(
|
|
3219
|
+
this._forwardButton.classList.add("hidden");
|
|
3218
3220
|
}
|
|
3219
|
-
const classNames = [
|
|
3221
|
+
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
3220
3222
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
3221
3223
|
classNames.forEach((name) => {
|
|
3222
3224
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -3233,11 +3235,9 @@ let EzTabselector = class {
|
|
|
3233
3235
|
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
3234
3236
|
}
|
|
3235
3237
|
setFocusedTab(index) {
|
|
3236
|
-
window.clearTimeout(this.
|
|
3237
|
-
this.
|
|
3238
|
+
window.clearTimeout(this._scrollCallBackTest);
|
|
3239
|
+
this._scrollCallBackTest = window.setTimeout(() => {
|
|
3238
3240
|
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
3239
|
-
console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
|
|
3240
|
-
console.log('tabtoscroll', tabtoscroll);
|
|
3241
3241
|
tabtoscroll.scrollIntoView();
|
|
3242
3242
|
}, 200);
|
|
3243
3243
|
}
|
|
@@ -3246,27 +3246,27 @@ let EzTabselector = class {
|
|
|
3246
3246
|
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
3247
3247
|
}
|
|
3248
3248
|
const context = this._textMesurement.getContext("2d");
|
|
3249
|
-
context.font =
|
|
3250
|
-
return Math.min(220, 24 + context.measureText(text).width) +
|
|
3249
|
+
context.font = "14px Sora, Algerian";
|
|
3250
|
+
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
3251
3251
|
}
|
|
3252
3252
|
;
|
|
3253
|
-
|
|
3254
|
-
const tabsButtons = this._scrollContainer.querySelectorAll(
|
|
3253
|
+
setFocusedBtn(visible, parameter) {
|
|
3254
|
+
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
3255
3255
|
tabsButtons.forEach((el) => {
|
|
3256
|
-
el.classList.remove(
|
|
3257
|
-
if (el.id ===
|
|
3258
|
-
el.classList.add(
|
|
3256
|
+
el.classList.remove("is-focused");
|
|
3257
|
+
if (el.id === "tab" + parameter && visible) {
|
|
3258
|
+
el.classList.add("is-focused");
|
|
3259
3259
|
}
|
|
3260
3260
|
});
|
|
3261
3261
|
}
|
|
3262
3262
|
render() {
|
|
3263
|
-
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.
|
|
3264
|
-
const labelStyle = {
|
|
3263
|
+
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) => {
|
|
3264
|
+
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
3265
3265
|
const tabId = "tab" + index;
|
|
3266
|
-
const isSelected = index === parseInt(this.
|
|
3266
|
+
const isSelected = index === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
3267
3267
|
if (isSelected) {
|
|
3268
|
-
this.
|
|
3269
|
-
this.
|
|
3268
|
+
this.selectedTab = tab.tabKey;
|
|
3269
|
+
this.selectedIndex = index.toString();
|
|
3270
3270
|
}
|
|
3271
3271
|
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); } }));
|
|
3272
3272
|
})), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
@@ -3292,7 +3292,7 @@ let EzTextArea = class {
|
|
|
3292
3292
|
*/
|
|
3293
3293
|
this.enabled = true;
|
|
3294
3294
|
/**
|
|
3295
|
-
* Ajusta o
|
|
3295
|
+
* Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
|
|
3296
3296
|
*/
|
|
3297
3297
|
this.rows = 4;
|
|
3298
3298
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, f as forceUpdate, h } from './index-89fc9bfd.js';
|
|
2
2
|
|
|
3
|
-
const ezDialogCss = ":host{--
|
|
3
|
+
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%}}";
|
|
4
4
|
|
|
5
5
|
class Message {
|
|
6
6
|
constructor(title, message, critical, confirm, icon, callBack) {
|
|
@@ -31,6 +31,9 @@ let EzDialog = class {
|
|
|
31
31
|
this.opened = false;
|
|
32
32
|
this._messageQueue = [];
|
|
33
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* Lida com o clique nos botões de dentro do componente.
|
|
36
|
+
*/
|
|
34
37
|
async handleButtonClick(selectedOption) {
|
|
35
38
|
this.opened = this._messageQueue.length > 0;
|
|
36
39
|
if (this._currentMessage.callBack) {
|
|
@@ -42,6 +45,9 @@ let EzDialog = class {
|
|
|
42
45
|
this._currentMessage = this._messageQueue.shift();
|
|
43
46
|
forceUpdate(this);
|
|
44
47
|
}
|
|
48
|
+
/**
|
|
49
|
+
* Faz com que o componente seja exibido.
|
|
50
|
+
*/
|
|
45
51
|
async show(title, message, critical, confirm, icon) {
|
|
46
52
|
this.opened = true;
|
|
47
53
|
return new Promise(resolve => {
|