@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
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-0f668cc5.js');
|
|
6
6
|
|
|
7
|
-
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)
|
|
7
|
+
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)}";
|
|
8
8
|
|
|
9
9
|
let EzLabelChip = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -6,7 +6,7 @@ const index = require('./index-0f668cc5.js');
|
|
|
6
6
|
const RequestMetadata = require('./RequestMetadata-2cd01e8a.js');
|
|
7
7
|
const FloatingManager = require('./FloatingManager-6cfeb947.js');
|
|
8
8
|
|
|
9
|
-
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--
|
|
9
|
+
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;}";
|
|
10
10
|
|
|
11
11
|
let EzButton = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -32,6 +32,9 @@ let EzButton = class {
|
|
|
32
32
|
content.style.paddingLeft = "var(--button__inline__icon--padding)";
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
+
else {
|
|
36
|
+
content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
|
|
37
|
+
}
|
|
35
38
|
}
|
|
36
39
|
render() {
|
|
37
40
|
if (this.mode == "icon") {
|
|
@@ -212,12 +215,12 @@ let EzCheck = class {
|
|
|
212
215
|
index.registerInstance(this, hostRef);
|
|
213
216
|
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
214
217
|
/**
|
|
215
|
-
* Deixa o campo disponível ou não
|
|
218
|
+
* Deixa o campo disponível ou não para interação com o usuário.
|
|
216
219
|
*/
|
|
217
220
|
this.enabled = true;
|
|
218
221
|
/**
|
|
219
222
|
* Existem dois modos de visualização: regular e switch.
|
|
220
|
-
* Se esta propriedade for omitida, o componete assume o formato "regular"
|
|
223
|
+
* Se esta propriedade for omitida, o componete assume o formato "regular".
|
|
221
224
|
* No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
|
|
222
225
|
* No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
|
|
223
226
|
*/
|
|
@@ -258,7 +261,7 @@ let EzCheck = class {
|
|
|
258
261
|
getLabelClasses() {
|
|
259
262
|
let classes = "label";
|
|
260
263
|
if (!this.enabled) {
|
|
261
|
-
classes
|
|
264
|
+
classes += " label--disabled";
|
|
262
265
|
}
|
|
263
266
|
return classes;
|
|
264
267
|
}
|
|
@@ -311,7 +314,7 @@ let EzCollapsibleBox = class {
|
|
|
311
314
|
};
|
|
312
315
|
EzCollapsibleBox.style = ezCollapsibleBoxCss;
|
|
313
316
|
|
|
314
|
-
const ezComboBoxCss = ":host{--
|
|
317
|
+
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)}";
|
|
315
318
|
|
|
316
319
|
let EzComboBox = class {
|
|
317
320
|
constructor(hostRef) {
|
|
@@ -324,11 +327,11 @@ let EzComboBox = class {
|
|
|
324
327
|
/**
|
|
325
328
|
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
326
329
|
*/
|
|
327
|
-
this.
|
|
330
|
+
this.showSelectedValue = false;
|
|
328
331
|
/**
|
|
329
332
|
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
330
333
|
*/
|
|
331
|
-
this.
|
|
334
|
+
this.showOptionValue = false;
|
|
332
335
|
}
|
|
333
336
|
internalUpdate() {
|
|
334
337
|
if (this._inputElement) {
|
|
@@ -340,29 +343,29 @@ let EzComboBox = class {
|
|
|
340
343
|
this.updateVisibleOptions();
|
|
341
344
|
}
|
|
342
345
|
getText() {
|
|
343
|
-
let text =
|
|
346
|
+
let text = "";
|
|
344
347
|
const selected = this.getSelectedOption();
|
|
345
348
|
if (selected) {
|
|
346
|
-
text = this.
|
|
349
|
+
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
347
350
|
}
|
|
348
351
|
return text;
|
|
349
352
|
}
|
|
350
353
|
getSelectedOption() {
|
|
351
|
-
if (typeof this.value ===
|
|
354
|
+
if (typeof this.value === "string" || this.value instanceof String) {
|
|
352
355
|
return this._visibleOptions.find(o => o.value === this.value);
|
|
353
356
|
}
|
|
354
357
|
return this.value;
|
|
355
358
|
}
|
|
356
359
|
updateVisibleOptions() {
|
|
357
360
|
let opts = this._source || [];
|
|
358
|
-
if (!this.
|
|
361
|
+
if (!this.searchMode && this._criteria) {
|
|
359
362
|
const upperCriteria = this._criteria.toUpperCase();
|
|
360
363
|
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
361
364
|
}
|
|
362
|
-
this._visibleOptions = [{ value:
|
|
365
|
+
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
363
366
|
}
|
|
364
367
|
buildItem(opt, index$1) {
|
|
365
|
-
return index.h("li", { class: index$1 === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, index.h("span", { class: "item--label", title: opt.label }, opt.label), this.
|
|
368
|
+
return index.h("li", { class: index$1 === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = undefined }, index.h("span", { class: "item--label", title: opt.label }, opt.label), this.showOptionValue ? index.h("span", { class: "item--value", title: opt.value }, opt.value) : undefined);
|
|
366
369
|
}
|
|
367
370
|
showOptions() {
|
|
368
371
|
if (!this.enabled) {
|
|
@@ -371,10 +374,10 @@ let EzComboBox = class {
|
|
|
371
374
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
372
375
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
373
376
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
374
|
-
const top = this.errorMessage ?
|
|
377
|
+
const top = this.errorMessage ? "0px" : "-17px";
|
|
375
378
|
this._floatingID = FloatingManager.FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
376
379
|
window.requestAnimationFrame(() => {
|
|
377
|
-
this._optionsList.scrollIntoView({ behavior:
|
|
380
|
+
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
378
381
|
});
|
|
379
382
|
}
|
|
380
383
|
hideOptions() {
|
|
@@ -387,7 +390,7 @@ let EzComboBox = class {
|
|
|
387
390
|
return this._floatingID !== undefined && FloatingManager.FloatingManager.isFloating(this._floatingID);
|
|
388
391
|
}
|
|
389
392
|
nextOption() {
|
|
390
|
-
if (this.
|
|
393
|
+
if (this.searchMode && !this.isOptionsVisible()) {
|
|
391
394
|
return;
|
|
392
395
|
}
|
|
393
396
|
this.showOptions();
|
|
@@ -423,7 +426,7 @@ let EzComboBox = class {
|
|
|
423
426
|
selectOption(opt) {
|
|
424
427
|
const currentOpt = this.getSelectedOption();
|
|
425
428
|
if (currentOpt !== opt) {
|
|
426
|
-
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ?
|
|
429
|
+
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
427
430
|
this.value = adjustedOpt;
|
|
428
431
|
this.ezChange.emit(adjustedOpt);
|
|
429
432
|
}
|
|
@@ -441,10 +444,10 @@ let EzComboBox = class {
|
|
|
441
444
|
this.updateVisibleOptions();
|
|
442
445
|
}
|
|
443
446
|
}
|
|
444
|
-
loadOptions(mode, argument =
|
|
447
|
+
loadOptions(mode, argument = "") {
|
|
445
448
|
this._criteria = argument;
|
|
446
|
-
if (this.
|
|
447
|
-
this.updateSource(this.
|
|
449
|
+
if (this.optionLoader) {
|
|
450
|
+
this.updateSource(this.optionLoader({ mode, argument }));
|
|
448
451
|
}
|
|
449
452
|
else {
|
|
450
453
|
this.updateSource(this.options);
|
|
@@ -452,7 +455,7 @@ let EzComboBox = class {
|
|
|
452
455
|
}
|
|
453
456
|
cancelPreselection() {
|
|
454
457
|
if (!this._inputElement.value && this.value) {
|
|
455
|
-
this.selectOption(
|
|
458
|
+
this.selectOption(undefined);
|
|
456
459
|
}
|
|
457
460
|
else {
|
|
458
461
|
this.internalUpdate();
|
|
@@ -464,11 +467,11 @@ let EzComboBox = class {
|
|
|
464
467
|
componentWillLoad() {
|
|
465
468
|
if (this.options === undefined) {
|
|
466
469
|
this.options = [];
|
|
467
|
-
const optionsTags = this.el.querySelectorAll(
|
|
470
|
+
const optionsTags = this.el.querySelectorAll("option");
|
|
468
471
|
if (optionsTags) {
|
|
469
472
|
optionsTags.forEach(e => {
|
|
470
473
|
let label = e.innerText;
|
|
471
|
-
let value = e.getAttribute(
|
|
474
|
+
let value = e.getAttribute("value");
|
|
472
475
|
if (!value) {
|
|
473
476
|
value = label;
|
|
474
477
|
}
|
|
@@ -477,11 +480,11 @@ let EzComboBox = class {
|
|
|
477
480
|
});
|
|
478
481
|
}
|
|
479
482
|
}
|
|
480
|
-
if (this.
|
|
483
|
+
if (this.searchMode) {
|
|
481
484
|
this.updateSource([]);
|
|
482
485
|
}
|
|
483
486
|
else {
|
|
484
|
-
this.loadOptions(
|
|
487
|
+
this.loadOptions("PRELOAD");
|
|
485
488
|
}
|
|
486
489
|
}
|
|
487
490
|
componentDidRender() {
|
|
@@ -499,13 +502,12 @@ let EzComboBox = class {
|
|
|
499
502
|
const argument = event.target.value;
|
|
500
503
|
this._criteria = argument;
|
|
501
504
|
if (this._criteria) {
|
|
502
|
-
if (this.
|
|
505
|
+
if (this.searchMode) {
|
|
503
506
|
if (this._changeDeboucingTimeout) {
|
|
504
507
|
window.clearTimeout(this._changeDeboucingTimeout);
|
|
505
508
|
}
|
|
506
509
|
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
507
|
-
|
|
508
|
-
this.loadOptions('PREDICTIVE', argument);
|
|
510
|
+
this.loadOptions("PREDICTIVE", argument);
|
|
509
511
|
}, 200);
|
|
510
512
|
}
|
|
511
513
|
else {
|
|
@@ -515,7 +517,7 @@ let EzComboBox = class {
|
|
|
515
517
|
}
|
|
516
518
|
}
|
|
517
519
|
onTextInputClickHandler() {
|
|
518
|
-
if (!this.
|
|
520
|
+
if (!this.searchMode) {
|
|
519
521
|
this.showOptions();
|
|
520
522
|
}
|
|
521
523
|
}
|
|
@@ -540,8 +542,8 @@ let EzComboBox = class {
|
|
|
540
542
|
this.cancelPreselection();
|
|
541
543
|
}
|
|
542
544
|
render() {
|
|
543
|
-
return (index.h(index.Host, null, index.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.
|
|
544
|
-
index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions(
|
|
545
|
+
return (index.h(index.Host, null, index.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 ?
|
|
546
|
+
index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
545
547
|
:
|
|
546
548
|
index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
|
|
547
549
|
}
|
|
@@ -2705,7 +2707,7 @@ const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder,
|
|
|
2705
2707
|
buttons.previousVisible = false;
|
|
2706
2708
|
}
|
|
2707
2709
|
return index.h("div", { class: "form-sheet" },
|
|
2708
|
-
tabs ? index.h("ez-tabselector", {
|
|
2710
|
+
tabs ? index.h("ez-tabselector", { selectedIndex: selectedTab, selectedTab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
|
|
2709
2711
|
dataUnit ? index.h(NavigationBar, { enabled: enabled, dataUnit: dataUnit, buttonProps: buttons }) : null,
|
|
2710
2712
|
index.h("div", { class: "tab__container" },
|
|
2711
2713
|
items ? items.map(item => buildFormItem(item, name, store, currentDU, enabled)) : null,
|
|
@@ -2970,7 +2972,7 @@ let EzIcon = class {
|
|
|
2970
2972
|
constructor(hostRef) {
|
|
2971
2973
|
index.registerInstance(this, hostRef);
|
|
2972
2974
|
/**
|
|
2973
|
-
* Tamanho do
|
|
2975
|
+
* Tamanho do ícone
|
|
2974
2976
|
*/
|
|
2975
2977
|
this.size = 'medium';
|
|
2976
2978
|
}
|
|
@@ -3073,7 +3075,7 @@ let EzSearch = class {
|
|
|
3073
3075
|
this.ezChange.emit(evt.detail);
|
|
3074
3076
|
}
|
|
3075
3077
|
render() {
|
|
3076
|
-
return (index.h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage,
|
|
3078
|
+
return (index.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 }));
|
|
3077
3079
|
}
|
|
3078
3080
|
;
|
|
3079
3081
|
static get watchers() { return {
|
|
@@ -3082,91 +3084,91 @@ let EzSearch = class {
|
|
|
3082
3084
|
};
|
|
3083
3085
|
EzSearch.style = ezSearchCss;
|
|
3084
3086
|
|
|
3085
|
-
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);--
|
|
3087
|
+
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}";
|
|
3086
3088
|
|
|
3087
3089
|
let EzTabselector = class {
|
|
3088
3090
|
constructor(hostRef) {
|
|
3089
3091
|
index.registerInstance(this, hostRef);
|
|
3090
|
-
this.
|
|
3091
|
-
this.
|
|
3092
|
-
if (ev.key ===
|
|
3093
|
-
this.
|
|
3094
|
-
this.
|
|
3095
|
-
this.
|
|
3096
|
-
this.handleTabClick(this.
|
|
3092
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
3093
|
+
this.setFocusedParam = (ev) => {
|
|
3094
|
+
if (ev.key === "Enter") {
|
|
3095
|
+
this.selectedIndex = this.focusedIndex;
|
|
3096
|
+
this.focusedIndex = undefined;
|
|
3097
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
3098
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
3097
3099
|
ev.preventDefault();
|
|
3098
|
-
this.setFocusedTab(this.
|
|
3100
|
+
this.setFocusedTab(this.selectedIndex);
|
|
3099
3101
|
}
|
|
3100
|
-
else if (ev.key ===
|
|
3102
|
+
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
3101
3103
|
let operator = undefined;
|
|
3102
|
-
if (ev.key ===
|
|
3104
|
+
if (ev.key === "ArrowLeft") {
|
|
3103
3105
|
operator = false;
|
|
3104
3106
|
}
|
|
3105
|
-
else if (ev.key ===
|
|
3107
|
+
else if (ev.key === "ArrowRight") {
|
|
3106
3108
|
operator = true;
|
|
3107
3109
|
}
|
|
3108
3110
|
else {
|
|
3109
3111
|
return;
|
|
3110
3112
|
}
|
|
3111
|
-
if (this.
|
|
3113
|
+
if (this.focusedIndex === undefined) {
|
|
3112
3114
|
if (operator === false) {
|
|
3113
|
-
this.
|
|
3115
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
|
|
3114
3116
|
}
|
|
3115
3117
|
else {
|
|
3116
|
-
this.
|
|
3118
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
|
|
3117
3119
|
}
|
|
3118
3120
|
}
|
|
3119
3121
|
else {
|
|
3120
3122
|
if (operator === false) {
|
|
3121
|
-
this.
|
|
3123
|
+
this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
|
|
3122
3124
|
}
|
|
3123
3125
|
else {
|
|
3124
|
-
this.
|
|
3126
|
+
this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
|
|
3125
3127
|
}
|
|
3126
3128
|
}
|
|
3127
|
-
if (parseInt(this.
|
|
3128
|
-
this.
|
|
3129
|
+
if (parseInt(this.focusedIndex) < 0) {
|
|
3130
|
+
this.focusedIndex = "0";
|
|
3129
3131
|
}
|
|
3130
|
-
else if (parseInt(this.
|
|
3131
|
-
this.
|
|
3132
|
+
else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
|
|
3133
|
+
this.focusedIndex = (this._processedTabs.length - 1).toString();
|
|
3132
3134
|
}
|
|
3133
|
-
this.
|
|
3134
|
-
this.setFocusedTab(this.
|
|
3135
|
-
this.
|
|
3136
|
-
}
|
|
3137
|
-
else if (ev.key ===
|
|
3138
|
-
this.
|
|
3139
|
-
this.
|
|
3140
|
-
this.handleTabClick(this.
|
|
3135
|
+
this.setFocusedBtn(true, this.focusedIndex);
|
|
3136
|
+
this.setFocusedTab(this.focusedIndex);
|
|
3137
|
+
this.ezChange.emit();
|
|
3138
|
+
}
|
|
3139
|
+
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
3140
|
+
this.focusedIndex = undefined;
|
|
3141
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
3142
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
3141
3143
|
ev.preventDefault();
|
|
3142
|
-
this.setFocusedTab(this.
|
|
3144
|
+
this.setFocusedTab(this.selectedIndex);
|
|
3143
3145
|
}
|
|
3144
3146
|
// this.setFocusedTab();
|
|
3145
3147
|
};
|
|
3146
3148
|
}
|
|
3147
3149
|
handleTabClick(tab, index) {
|
|
3148
|
-
this.
|
|
3149
|
-
this.
|
|
3150
|
-
this.
|
|
3151
|
-
this.
|
|
3152
|
-
this.
|
|
3150
|
+
this.selectedIndex = index.toString();
|
|
3151
|
+
this.focusedIndex = undefined;
|
|
3152
|
+
this.selectedTab = tab;
|
|
3153
|
+
this.ezChange.emit();
|
|
3154
|
+
this.setFocusedBtn(false, this.selectedIndex);
|
|
3153
3155
|
}
|
|
3154
3156
|
componentWillRender() {
|
|
3155
3157
|
if (!this._processedTabs) {
|
|
3156
3158
|
this._processedTabs = [];
|
|
3157
3159
|
if (this.tabs) {
|
|
3158
|
-
this.tabs.split(
|
|
3160
|
+
this.tabs.split(",").forEach((label) => {
|
|
3159
3161
|
label = label.trim();
|
|
3160
3162
|
this._processedTabs.push(new Tab(label, label));
|
|
3161
3163
|
});
|
|
3162
3164
|
}
|
|
3163
|
-
this._hostElem.querySelectorAll(
|
|
3164
|
-
const tabKey = elem.getAttribute(
|
|
3165
|
-
const label = elem.getAttribute(
|
|
3165
|
+
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
3166
|
+
const tabKey = elem.getAttribute("tabKey");
|
|
3167
|
+
const label = elem.getAttribute("label");
|
|
3166
3168
|
const t = new Tab(label, tabKey);
|
|
3167
3169
|
const content = elem.firstChild;
|
|
3168
3170
|
if (content) {
|
|
3169
|
-
content.setAttribute(
|
|
3171
|
+
content.setAttribute("slot", "tab" + this._processedTabs.length);
|
|
3170
3172
|
this._hostElem.appendChild(content);
|
|
3171
3173
|
}
|
|
3172
3174
|
this._processedTabs.push(t);
|
|
@@ -3190,7 +3192,7 @@ let EzTabselector = class {
|
|
|
3190
3192
|
const container = this._scrollContainer;
|
|
3191
3193
|
if (container) {
|
|
3192
3194
|
let lastTab = null;
|
|
3193
|
-
container.querySelectorAll(
|
|
3195
|
+
container.querySelectorAll(".tab").forEach((tab) => {
|
|
3194
3196
|
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
3195
3197
|
lastTab = tab;
|
|
3196
3198
|
}
|
|
@@ -3209,18 +3211,18 @@ let EzTabselector = class {
|
|
|
3209
3211
|
this._startHidden = container.scrollLeft > 0;
|
|
3210
3212
|
this._endHidden = remainingScroll > 0;
|
|
3211
3213
|
if (this._startHidden) {
|
|
3212
|
-
this._backwardButton.classList.remove(
|
|
3214
|
+
this._backwardButton.classList.remove("hidden");
|
|
3213
3215
|
}
|
|
3214
3216
|
else {
|
|
3215
|
-
this._backwardButton.classList.add(
|
|
3217
|
+
this._backwardButton.classList.add("hidden");
|
|
3216
3218
|
}
|
|
3217
3219
|
if (this._endHidden) {
|
|
3218
|
-
this._forwardButton.classList.remove(
|
|
3220
|
+
this._forwardButton.classList.remove("hidden");
|
|
3219
3221
|
}
|
|
3220
3222
|
else {
|
|
3221
|
-
this._forwardButton.classList.add(
|
|
3223
|
+
this._forwardButton.classList.add("hidden");
|
|
3222
3224
|
}
|
|
3223
|
-
const classNames = [
|
|
3225
|
+
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
3224
3226
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
3225
3227
|
classNames.forEach((name) => {
|
|
3226
3228
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -3237,11 +3239,9 @@ let EzTabselector = class {
|
|
|
3237
3239
|
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
3238
3240
|
}
|
|
3239
3241
|
setFocusedTab(index) {
|
|
3240
|
-
window.clearTimeout(this.
|
|
3241
|
-
this.
|
|
3242
|
+
window.clearTimeout(this._scrollCallBackTest);
|
|
3243
|
+
this._scrollCallBackTest = window.setTimeout(() => {
|
|
3242
3244
|
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
3243
|
-
console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
|
|
3244
|
-
console.log('tabtoscroll', tabtoscroll);
|
|
3245
3245
|
tabtoscroll.scrollIntoView();
|
|
3246
3246
|
}, 200);
|
|
3247
3247
|
}
|
|
@@ -3250,27 +3250,27 @@ let EzTabselector = class {
|
|
|
3250
3250
|
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
3251
3251
|
}
|
|
3252
3252
|
const context = this._textMesurement.getContext("2d");
|
|
3253
|
-
context.font =
|
|
3254
|
-
return Math.min(220, 24 + context.measureText(text).width) +
|
|
3253
|
+
context.font = "14px Sora, Algerian";
|
|
3254
|
+
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
3255
3255
|
}
|
|
3256
3256
|
;
|
|
3257
|
-
|
|
3258
|
-
const tabsButtons = this._scrollContainer.querySelectorAll(
|
|
3257
|
+
setFocusedBtn(visible, parameter) {
|
|
3258
|
+
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
3259
3259
|
tabsButtons.forEach((el) => {
|
|
3260
|
-
el.classList.remove(
|
|
3261
|
-
if (el.id ===
|
|
3262
|
-
el.classList.add(
|
|
3260
|
+
el.classList.remove("is-focused");
|
|
3261
|
+
if (el.id === "tab" + parameter && visible) {
|
|
3262
|
+
el.classList.add("is-focused");
|
|
3263
3263
|
}
|
|
3264
3264
|
});
|
|
3265
3265
|
}
|
|
3266
3266
|
render() {
|
|
3267
|
-
return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.
|
|
3268
|
-
const labelStyle = {
|
|
3267
|
+
return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index$1) => {
|
|
3268
|
+
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
3269
3269
|
const tabId = "tab" + index$1;
|
|
3270
|
-
const isSelected = index$1 === parseInt(this.
|
|
3270
|
+
const isSelected = index$1 === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
3271
3271
|
if (isSelected) {
|
|
3272
|
-
this.
|
|
3273
|
-
this.
|
|
3272
|
+
this.selectedTab = tab.tabKey;
|
|
3273
|
+
this.selectedIndex = index$1.toString();
|
|
3274
3274
|
}
|
|
3275
3275
|
return index.h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab.tabKey, index$1), style: labelStyle }, index.h("span", { class: "tab-label", title: tab.label }, tab.label), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
|
|
3276
3276
|
})), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
@@ -3296,7 +3296,7 @@ let EzTextArea = class {
|
|
|
3296
3296
|
*/
|
|
3297
3297
|
this.enabled = true;
|
|
3298
3298
|
/**
|
|
3299
|
-
* Ajusta o
|
|
3299
|
+
* Ajusta o número de linhas e consequentemente o height do textarea. Valor default: 4
|
|
3300
3300
|
*/
|
|
3301
3301
|
this.rows = 4;
|
|
3302
3302
|
}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-0f668cc5.js');
|
|
6
6
|
|
|
7
|
-
const ezDialogCss = ":host{--
|
|
7
|
+
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%}}";
|
|
8
8
|
|
|
9
9
|
class Message {
|
|
10
10
|
constructor(title, message, critical, confirm, icon, callBack) {
|
|
@@ -35,6 +35,9 @@ let EzDialog = class {
|
|
|
35
35
|
this.opened = false;
|
|
36
36
|
this._messageQueue = [];
|
|
37
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* Lida com o clique nos botões de dentro do componente.
|
|
40
|
+
*/
|
|
38
41
|
async handleButtonClick(selectedOption) {
|
|
39
42
|
this.opened = this._messageQueue.length > 0;
|
|
40
43
|
if (this._currentMessage.callBack) {
|
|
@@ -46,6 +49,9 @@ let EzDialog = class {
|
|
|
46
49
|
this._currentMessage = this._messageQueue.shift();
|
|
47
50
|
index.forceUpdate(this);
|
|
48
51
|
}
|
|
52
|
+
/**
|
|
53
|
+
* Faz com que o componente seja exibido.
|
|
54
|
+
*/
|
|
49
55
|
async show(title, message, critical, confirm, icon) {
|
|
50
56
|
this.opened = true;
|
|
51
57
|
return new Promise(resolve => {
|