@sankhyalabs/ezui 1.1.69 → 1.1.72
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/actions-sprite.svg +257 -0
- package/dist/cjs/CSSVarsUtils-f8827674.js +18 -0
- package/dist/cjs/ez-action-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-button_16.cjs.entry.js +101 -97
- package/dist/cjs/ez-dialog.cjs.entry.js +5 -2
- package/dist/cjs/ez-label-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-modal.cjs.entry.js +16 -69
- package/dist/cjs/ez-number-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-popover.cjs.entry.js +14 -15
- package/dist/cjs/ez-popup.cjs.entry.js +2 -2
- package/dist/cjs/ez-time-input.cjs.entry.js +7 -70
- package/dist/cjs/ez-toast.cjs.entry.js +1 -1
- package/dist/cjs/ezui.cjs.js +2 -2
- package/dist/cjs/{index-0f668cc5.js → index-bb6cdd1a.js} +5 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/assets/actions-sprite.svg +257 -0
- package/dist/collection/components/ez-button/ez-button.css +8 -4
- package/dist/collection/components/ez-button/ez-button.js +5 -2
- package/dist/collection/components/ez-combo-box/ez-combo-box.css +46 -44
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +34 -35
- package/dist/collection/components/ez-date-input/ez-date-input.css +0 -9
- package/dist/collection/components/ez-date-input/ez-date-input.js +5 -1
- package/dist/collection/components/ez-dialog/ez-dialog.css +43 -43
- package/dist/collection/components/ez-dialog/ez-dialog.js +5 -2
- package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +1 -1
- package/dist/collection/components/ez-modal/ez-modal.js +27 -80
- package/dist/collection/components/ez-popover/ez-popover.css +4 -5
- package/dist/collection/components/ez-popover/ez-popover.js +25 -26
- package/dist/collection/components/ez-popup/ez-popup.css +5 -5
- package/dist/collection/components/ez-popup/ez-popup.js +1 -1
- package/dist/collection/components/ez-search/ez-search.js +1 -1
- package/dist/collection/components/ez-tabselector/ez-tabselector.css +7 -10
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +67 -69
- package/dist/collection/components/ez-time-input/ez-time-input.css +0 -168
- package/dist/collection/components/ez-time-input/ez-time-input.js +8 -75
- package/dist/collection/utils/CSSVarsUtils.js +14 -0
- package/dist/custom-elements/index.js +157 -254
- package/dist/esm/CSSVarsUtils-e0128b01.js +16 -0
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +101 -97
- package/dist/esm/ez-dialog.entry.js +5 -2
- package/dist/esm/ez-label-chip.entry.js +1 -1
- package/dist/esm/ez-modal.entry.js +16 -69
- package/dist/esm/ez-number-input.entry.js +1 -1
- package/dist/esm/ez-popover.entry.js +14 -15
- package/dist/esm/ez-popup.entry.js +2 -2
- package/dist/esm/ez-time-input.entry.js +7 -70
- package/dist/esm/ez-toast.entry.js +1 -1
- package/dist/esm/ezui.js +2 -2
- package/dist/esm/{index-89fc9bfd.js → index-989e6e7d.js} +5 -1
- package/dist/esm/loader.js +2 -2
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/{p-762ac7a0.js → p-384f89f7.js} +1 -1
- package/dist/ezui/p-55003571.entry.js +1 -0
- package/dist/ezui/p-5c5ba099.entry.js +1 -0
- package/dist/ezui/p-65ea9879.entry.js +1 -0
- package/dist/ezui/{p-9702db61.entry.js → p-889030b3.entry.js} +1 -1
- package/dist/ezui/{p-8d547517.entry.js → p-8b945611.entry.js} +1 -1
- package/dist/ezui/p-a6a87bc5.entry.js +1 -0
- package/dist/ezui/p-d01bcce1.entry.js +1 -0
- package/dist/ezui/p-d1889704.js +1 -0
- package/dist/ezui/{p-74e4415e.entry.js → p-e2533df1.entry.js} +1 -1
- package/dist/ezui/p-edcc9e6f.entry.js +1 -0
- package/dist/ezui/{p-1c33a56d.entry.js → p-f8f92f68.entry.js} +1 -1
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +5 -5
- package/dist/types/components/ez-date-input/ez-date-input.d.ts +1 -0
- package/dist/types/components/ez-dialog/ez-dialog.d.ts +4 -1
- package/dist/types/components/ez-modal/ez-modal.d.ts +7 -7
- package/dist/types/components/ez-popover/ez-popover.d.ts +4 -5
- package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
- package/dist/types/components/ez-tabselector/ez-tabselector.d.ts +19 -10
- package/dist/types/components/ez-time-input/ez-time-input.d.ts +1 -8
- package/dist/types/components.d.ts +56 -35
- package/dist/types/utils/CSSVarsUtils.d.ts +4 -0
- package/package.json +1 -1
- package/dist/ezui/p-169d99a1.entry.js +0 -1
- package/dist/ezui/p-7c7dbfcb.entry.js +0 -1
- package/dist/ezui/p-8c8f1c00.entry.js +0 -1
- package/dist/ezui/p-d185d7e8.entry.js +0 -1
- package/dist/ezui/p-ee5058c1.entry.js +0 -1
- package/dist/ezui/p-f7d7fb7f.entry.js +0 -1
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bb6cdd1a.js');
|
|
6
6
|
const RequestMetadata = require('./RequestMetadata-2cd01e8a.js');
|
|
7
7
|
const FloatingManager = require('./FloatingManager-6cfeb947.js');
|
|
8
|
+
const CSSVarsUtils = require('./CSSVarsUtils-f8827674.js');
|
|
8
9
|
|
|
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--
|
|
10
|
+
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
11
|
|
|
11
12
|
let EzButton = class {
|
|
12
13
|
constructor(hostRef) {
|
|
@@ -21,9 +22,9 @@ let EzButton = class {
|
|
|
21
22
|
this.mode = "regular";
|
|
22
23
|
}
|
|
23
24
|
handleSlotChange(ev) {
|
|
25
|
+
const slot = ev.target;
|
|
26
|
+
const content = slot.assignedElements()[0];
|
|
24
27
|
if (this.mode == "link") {
|
|
25
|
-
const slot = ev.target;
|
|
26
|
-
const content = slot.assignedElements()[0];
|
|
27
28
|
content.style.display = "inline";
|
|
28
29
|
if (slot.name == "leftIcon") {
|
|
29
30
|
content.style.paddingRight = "var(--button__inline__icon--padding)";
|
|
@@ -32,6 +33,9 @@ let EzButton = class {
|
|
|
32
33
|
content.style.paddingLeft = "var(--button__inline__icon--padding)";
|
|
33
34
|
}
|
|
34
35
|
}
|
|
36
|
+
else {
|
|
37
|
+
content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
|
|
38
|
+
}
|
|
35
39
|
}
|
|
36
40
|
render() {
|
|
37
41
|
if (this.mode == "icon") {
|
|
@@ -311,7 +315,7 @@ let EzCollapsibleBox = class {
|
|
|
311
315
|
};
|
|
312
316
|
EzCollapsibleBox.style = ezCollapsibleBoxCss;
|
|
313
317
|
|
|
314
|
-
const ezComboBoxCss = ":host{--
|
|
318
|
+
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
319
|
|
|
316
320
|
let EzComboBox = class {
|
|
317
321
|
constructor(hostRef) {
|
|
@@ -324,11 +328,11 @@ let EzComboBox = class {
|
|
|
324
328
|
/**
|
|
325
329
|
* Ajusta a opção de mostrar o "value" ao selecionar uma opção. Por padrão não mostra.
|
|
326
330
|
*/
|
|
327
|
-
this.
|
|
331
|
+
this.showSelectedValue = false;
|
|
328
332
|
/**
|
|
329
333
|
* Ajusta a opção de mostrar o "value" para cada opção. Por padrão não mostra
|
|
330
334
|
*/
|
|
331
|
-
this.
|
|
335
|
+
this.showOptionValue = false;
|
|
332
336
|
}
|
|
333
337
|
internalUpdate() {
|
|
334
338
|
if (this._inputElement) {
|
|
@@ -340,29 +344,29 @@ let EzComboBox = class {
|
|
|
340
344
|
this.updateVisibleOptions();
|
|
341
345
|
}
|
|
342
346
|
getText() {
|
|
343
|
-
let text =
|
|
347
|
+
let text = "";
|
|
344
348
|
const selected = this.getSelectedOption();
|
|
345
349
|
if (selected) {
|
|
346
|
-
text = this.
|
|
350
|
+
text = this.showSelectedValue ? `${selected.value} - ${selected.label}` : selected.label;
|
|
347
351
|
}
|
|
348
352
|
return text;
|
|
349
353
|
}
|
|
350
354
|
getSelectedOption() {
|
|
351
|
-
if (typeof this.value ===
|
|
355
|
+
if (typeof this.value === "string" || this.value instanceof String) {
|
|
352
356
|
return this._visibleOptions.find(o => o.value === this.value);
|
|
353
357
|
}
|
|
354
358
|
return this.value;
|
|
355
359
|
}
|
|
356
360
|
updateVisibleOptions() {
|
|
357
361
|
let opts = this._source || [];
|
|
358
|
-
if (!this.
|
|
362
|
+
if (!this.searchMode && this._criteria) {
|
|
359
363
|
const upperCriteria = this._criteria.toUpperCase();
|
|
360
364
|
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
361
365
|
}
|
|
362
|
-
this._visibleOptions = [{ value:
|
|
366
|
+
this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
|
|
363
367
|
}
|
|
364
368
|
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.
|
|
369
|
+
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
370
|
}
|
|
367
371
|
showOptions() {
|
|
368
372
|
if (!this.enabled) {
|
|
@@ -371,10 +375,10 @@ let EzComboBox = class {
|
|
|
371
375
|
//FIXME: Provavelmente isso fará com que o popup abra em uma
|
|
372
376
|
//posição errada no futuro. Preferi fazer simples no começo,
|
|
373
377
|
//porque não quis onerar o text input com essa funcionalidade...
|
|
374
|
-
const top = this.errorMessage ?
|
|
378
|
+
const top = this.errorMessage ? "0px" : "-17px";
|
|
375
379
|
this._floatingID = FloatingManager.FloatingManager.float(this._optionsList, this._listContainer, { autoClose: true, top });
|
|
376
380
|
window.requestAnimationFrame(() => {
|
|
377
|
-
this._optionsList.scrollIntoView({ behavior:
|
|
381
|
+
this._optionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
378
382
|
});
|
|
379
383
|
}
|
|
380
384
|
hideOptions() {
|
|
@@ -387,7 +391,7 @@ let EzComboBox = class {
|
|
|
387
391
|
return this._floatingID !== undefined && FloatingManager.FloatingManager.isFloating(this._floatingID);
|
|
388
392
|
}
|
|
389
393
|
nextOption() {
|
|
390
|
-
if (this.
|
|
394
|
+
if (this.searchMode && !this.isOptionsVisible()) {
|
|
391
395
|
return;
|
|
392
396
|
}
|
|
393
397
|
this.showOptions();
|
|
@@ -423,7 +427,7 @@ let EzComboBox = class {
|
|
|
423
427
|
selectOption(opt) {
|
|
424
428
|
const currentOpt = this.getSelectedOption();
|
|
425
429
|
if (currentOpt !== opt) {
|
|
426
|
-
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ?
|
|
430
|
+
const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? undefined : opt;
|
|
427
431
|
this.value = adjustedOpt;
|
|
428
432
|
this.ezChange.emit(adjustedOpt);
|
|
429
433
|
}
|
|
@@ -441,10 +445,10 @@ let EzComboBox = class {
|
|
|
441
445
|
this.updateVisibleOptions();
|
|
442
446
|
}
|
|
443
447
|
}
|
|
444
|
-
loadOptions(mode, argument =
|
|
448
|
+
loadOptions(mode, argument = "") {
|
|
445
449
|
this._criteria = argument;
|
|
446
|
-
if (this.
|
|
447
|
-
this.updateSource(this.
|
|
450
|
+
if (this.optionLoader) {
|
|
451
|
+
this.updateSource(this.optionLoader({ mode, argument }));
|
|
448
452
|
}
|
|
449
453
|
else {
|
|
450
454
|
this.updateSource(this.options);
|
|
@@ -452,7 +456,7 @@ let EzComboBox = class {
|
|
|
452
456
|
}
|
|
453
457
|
cancelPreselection() {
|
|
454
458
|
if (!this._inputElement.value && this.value) {
|
|
455
|
-
this.selectOption(
|
|
459
|
+
this.selectOption(undefined);
|
|
456
460
|
}
|
|
457
461
|
else {
|
|
458
462
|
this.internalUpdate();
|
|
@@ -464,11 +468,11 @@ let EzComboBox = class {
|
|
|
464
468
|
componentWillLoad() {
|
|
465
469
|
if (this.options === undefined) {
|
|
466
470
|
this.options = [];
|
|
467
|
-
const optionsTags = this.el.querySelectorAll(
|
|
471
|
+
const optionsTags = this.el.querySelectorAll("option");
|
|
468
472
|
if (optionsTags) {
|
|
469
473
|
optionsTags.forEach(e => {
|
|
470
474
|
let label = e.innerText;
|
|
471
|
-
let value = e.getAttribute(
|
|
475
|
+
let value = e.getAttribute("value");
|
|
472
476
|
if (!value) {
|
|
473
477
|
value = label;
|
|
474
478
|
}
|
|
@@ -477,11 +481,11 @@ let EzComboBox = class {
|
|
|
477
481
|
});
|
|
478
482
|
}
|
|
479
483
|
}
|
|
480
|
-
if (this.
|
|
484
|
+
if (this.searchMode) {
|
|
481
485
|
this.updateSource([]);
|
|
482
486
|
}
|
|
483
487
|
else {
|
|
484
|
-
this.loadOptions(
|
|
488
|
+
this.loadOptions("PRELOAD");
|
|
485
489
|
}
|
|
486
490
|
}
|
|
487
491
|
componentDidRender() {
|
|
@@ -499,13 +503,12 @@ let EzComboBox = class {
|
|
|
499
503
|
const argument = event.target.value;
|
|
500
504
|
this._criteria = argument;
|
|
501
505
|
if (this._criteria) {
|
|
502
|
-
if (this.
|
|
506
|
+
if (this.searchMode) {
|
|
503
507
|
if (this._changeDeboucingTimeout) {
|
|
504
508
|
window.clearTimeout(this._changeDeboucingTimeout);
|
|
505
509
|
}
|
|
506
510
|
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
507
|
-
|
|
508
|
-
this.loadOptions('PREDICTIVE', argument);
|
|
511
|
+
this.loadOptions("PREDICTIVE", argument);
|
|
509
512
|
}, 200);
|
|
510
513
|
}
|
|
511
514
|
else {
|
|
@@ -515,7 +518,7 @@ let EzComboBox = class {
|
|
|
515
518
|
}
|
|
516
519
|
}
|
|
517
520
|
onTextInputClickHandler() {
|
|
518
|
-
if (!this.
|
|
521
|
+
if (!this.searchMode) {
|
|
519
522
|
this.showOptions();
|
|
520
523
|
}
|
|
521
524
|
}
|
|
@@ -540,8 +543,8 @@ let EzComboBox = class {
|
|
|
540
543
|
this.cancelPreselection();
|
|
541
544
|
}
|
|
542
545
|
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(
|
|
546
|
+
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 ?
|
|
547
|
+
index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
545
548
|
:
|
|
546
549
|
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
550
|
}
|
|
@@ -552,7 +555,7 @@ let EzComboBox = class {
|
|
|
552
555
|
};
|
|
553
556
|
EzComboBox.style = ezComboBoxCss;
|
|
554
557
|
|
|
555
|
-
const ezDateInputCss = ":host{display:block;width:100%;--
|
|
558
|
+
const ezDateInputCss = ":host{display:block;width:100%;--di__calendar-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"15px\"><path d=\"M 3.171875,5.25 C 2.6485088,5.25 2.21875,5.6797588 2.21875,6.203125 2.21875,6.7264912 2.6485088,7.15625 3.171875,7.15625 3.6952412,7.15625 4.125,6.7264912 4.125,6.203125 4.125,5.6797588 3.6952412,5.25 3.171875,5.25 Z m 2.875,0 C 5.5235088,5.25 5.09375,5.6797588 5.09375,6.203125 5.09375,6.7264912 5.5235088,7.15625 6.046875,7.15625 6.5702412,7.15625 7,6.7264912 7,6.203125 7,5.6797588 6.5702412,5.25 6.046875,5.25 Z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.9511719,-0.4297588 0.9511719,-0.953125 C 9.8730469,5.6797588 9.4452412,5.25 8.921875,5.25 Z m 2.873047,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.953125 0.953125,0.953125 0.523366,0 0.953125,-0.4297588 0.953125,-0.953125 C 12.748047,5.6797588 12.318288,5.25 11.794922,5.25 Z M 3.171875,8.1230469 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 0.5233662,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297588,0.9531251 0.953125,0.9531251 C 6.5702412,10.029297 7,9.5995381 7,9.0761719 7,8.5528057 6.5702412,8.1230469 6.046875,8.1230469 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.4297587,0.9531251 0.953125,0.9531251 0.5233661,0 0.9531249,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.4297588 -0.953125,0.953125 0,0.5233662 0.429759,0.9531251 0.953125,0.9531251 0.523367,0 0.953125,-0.4297589 0.953125,-0.9531251 0,-0.5233662 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.171875,10.998047 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 0.5233662,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.875,0 c -0.5233662,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297588,0.953125 0.953125,0.953125 C 6.5702412,12.904297 7,12.474538 7,11.951172 7,11.427806 6.5702412,10.998047 6.046875,10.998047 Z m 2.8554688,0 c -0.5233663,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.4297587,0.953125 0.953125,0.953125 0.5233661,0 0.9531249,-0.429759 0.953125,-0.953125 0,-0.523366 -0.4297588,-0.953125 -0.953125,-0.953125 z m 2.9003902,0 c -0.523366,0 -0.953125,0.429759 -0.953125,0.953125 0,0.523366 0.429759,0.953125 0.953125,0.953125 0.523367,0 0.953125,-0.429759 0.953125,-0.953125 0,-0.523366 -0.429758,-0.953125 -0.953125,-0.953125 z M 3.5,0 c -0.554,0 -1,0.446 -1,1 v 0.050781 C 1.0853217,1.2909766 0,2.5186658 0,4 v 9 c 0,1.652487 1.3475134,3 3,3 h 9 c 1.652487,0 3,-1.347513 3,-3 V 4 C 15,2.5186658 13.914678,1.2909766 12.5,1.0507812 V 1 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 c 0,-0.554 -0.446,-1 -1,-1 -0.554,0 -1,0.446 -1,1 h -2 C 4.5,0.446 4.054,0 3.5,0 Z m 1,2.0996094 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 v -0.640625 h 2 v 0.640625 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 V 2.1738281 C 13.311725,2.3905225 13.900391,3.11278 13.900391,4 v 9 c 0,1.062113 -0.838278,1.900391 -1.900391,1.900391 H 3 C 1.9378864,14.900391 1.0996094,14.062113 1.0996094,13 V 4 C 1.0996094,3.11278 1.6882747,2.3905225 2.5,2.1738281 v 0.5664063 c 0,0.554 0.446,1 1,1 0.554,0 1,-0.446 1,-1 z\"/></svg>')}.btn-open-cal{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-cal:disabled{cursor:unset}.btn-open-cal::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:15px;height:16px;-webkit-mask-image:var(--di__calendar-image);mask-image:var(--di__calendar-image)}.btn-open-cal:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-cal:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}";
|
|
556
559
|
|
|
557
560
|
let EzDateInput = class {
|
|
558
561
|
constructor(hostRef) {
|
|
@@ -613,8 +616,11 @@ let EzDateInput = class {
|
|
|
613
616
|
getTextValue(d) {
|
|
614
617
|
return d ? new Intl.DateTimeFormat('pt-BR').format(d) : null;
|
|
615
618
|
}
|
|
619
|
+
componentDidLoad() {
|
|
620
|
+
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
621
|
+
}
|
|
616
622
|
render() {
|
|
617
|
-
return (index.h(index.Host, null, index.h("ez-text-input", {
|
|
623
|
+
return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._textInput = elem, onBlur: () => this.parseDate(), onKeyDown: event => {
|
|
618
624
|
if (event.key === 'H' || event.key === 'h')
|
|
619
625
|
this.changeValue(new Date());
|
|
620
626
|
}, label: this.label, onEzChange: event => event.stopPropagation(), value: this.getTextValue(this.value), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
|
|
@@ -2705,7 +2711,7 @@ const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder,
|
|
|
2705
2711
|
buttons.previousVisible = false;
|
|
2706
2712
|
}
|
|
2707
2713
|
return index.h("div", { class: "form-sheet" },
|
|
2708
|
-
tabs ? index.h("ez-tabselector", {
|
|
2714
|
+
tabs ? index.h("ez-tabselector", { selectedIndex: selectedTab, selectedTab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
|
|
2709
2715
|
dataUnit ? index.h(NavigationBar, { enabled: enabled, dataUnit: dataUnit, buttonProps: buttons }) : null,
|
|
2710
2716
|
index.h("div", { class: "tab__container" },
|
|
2711
2717
|
items ? items.map(item => buildFormItem(item, name, store, currentDU, enabled)) : null,
|
|
@@ -3073,7 +3079,7 @@ let EzSearch = class {
|
|
|
3073
3079
|
this.ezChange.emit(evt.detail);
|
|
3074
3080
|
}
|
|
3075
3081
|
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,
|
|
3082
|
+
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
3083
|
}
|
|
3078
3084
|
;
|
|
3079
3085
|
static get watchers() { return {
|
|
@@ -3082,91 +3088,91 @@ let EzSearch = class {
|
|
|
3082
3088
|
};
|
|
3083
3089
|
EzSearch.style = ezSearchCss;
|
|
3084
3090
|
|
|
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);--
|
|
3091
|
+
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
3092
|
|
|
3087
3093
|
let EzTabselector = class {
|
|
3088
3094
|
constructor(hostRef) {
|
|
3089
3095
|
index.registerInstance(this, hostRef);
|
|
3090
|
-
this.
|
|
3091
|
-
this.
|
|
3092
|
-
if (ev.key ===
|
|
3093
|
-
this.
|
|
3094
|
-
this.
|
|
3095
|
-
this.
|
|
3096
|
-
this.handleTabClick(this.
|
|
3096
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
3097
|
+
this.setFocusedParam = (ev) => {
|
|
3098
|
+
if (ev.key === "Enter") {
|
|
3099
|
+
this.selectedIndex = this.focusedIndex;
|
|
3100
|
+
this.focusedIndex = undefined;
|
|
3101
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
3102
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
3097
3103
|
ev.preventDefault();
|
|
3098
|
-
this.setFocusedTab(this.
|
|
3104
|
+
this.setFocusedTab(this.selectedIndex);
|
|
3099
3105
|
}
|
|
3100
|
-
else if (ev.key ===
|
|
3106
|
+
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
3101
3107
|
let operator = undefined;
|
|
3102
|
-
if (ev.key ===
|
|
3108
|
+
if (ev.key === "ArrowLeft") {
|
|
3103
3109
|
operator = false;
|
|
3104
3110
|
}
|
|
3105
|
-
else if (ev.key ===
|
|
3111
|
+
else if (ev.key === "ArrowRight") {
|
|
3106
3112
|
operator = true;
|
|
3107
3113
|
}
|
|
3108
3114
|
else {
|
|
3109
3115
|
return;
|
|
3110
3116
|
}
|
|
3111
|
-
if (this.
|
|
3117
|
+
if (this.focusedIndex === undefined) {
|
|
3112
3118
|
if (operator === false) {
|
|
3113
|
-
this.
|
|
3119
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
|
|
3114
3120
|
}
|
|
3115
3121
|
else {
|
|
3116
|
-
this.
|
|
3122
|
+
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
|
|
3117
3123
|
}
|
|
3118
3124
|
}
|
|
3119
3125
|
else {
|
|
3120
3126
|
if (operator === false) {
|
|
3121
|
-
this.
|
|
3127
|
+
this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
|
|
3122
3128
|
}
|
|
3123
3129
|
else {
|
|
3124
|
-
this.
|
|
3130
|
+
this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
|
|
3125
3131
|
}
|
|
3126
3132
|
}
|
|
3127
|
-
if (parseInt(this.
|
|
3128
|
-
this.
|
|
3133
|
+
if (parseInt(this.focusedIndex) < 0) {
|
|
3134
|
+
this.focusedIndex = "0";
|
|
3129
3135
|
}
|
|
3130
|
-
else if (parseInt(this.
|
|
3131
|
-
this.
|
|
3136
|
+
else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
|
|
3137
|
+
this.focusedIndex = (this._processedTabs.length - 1).toString();
|
|
3132
3138
|
}
|
|
3133
|
-
this.
|
|
3134
|
-
this.setFocusedTab(this.
|
|
3135
|
-
this.
|
|
3136
|
-
}
|
|
3137
|
-
else if (ev.key ===
|
|
3138
|
-
this.
|
|
3139
|
-
this.
|
|
3140
|
-
this.handleTabClick(this.
|
|
3139
|
+
this.setFocusedBtn(true, this.focusedIndex);
|
|
3140
|
+
this.setFocusedTab(this.focusedIndex);
|
|
3141
|
+
this.ezChange.emit();
|
|
3142
|
+
}
|
|
3143
|
+
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
3144
|
+
this.focusedIndex = undefined;
|
|
3145
|
+
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
3146
|
+
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
3141
3147
|
ev.preventDefault();
|
|
3142
|
-
this.setFocusedTab(this.
|
|
3148
|
+
this.setFocusedTab(this.selectedIndex);
|
|
3143
3149
|
}
|
|
3144
3150
|
// this.setFocusedTab();
|
|
3145
3151
|
};
|
|
3146
3152
|
}
|
|
3147
3153
|
handleTabClick(tab, index) {
|
|
3148
|
-
this.
|
|
3149
|
-
this.
|
|
3150
|
-
this.
|
|
3151
|
-
this.
|
|
3152
|
-
this.
|
|
3154
|
+
this.selectedIndex = index.toString();
|
|
3155
|
+
this.focusedIndex = undefined;
|
|
3156
|
+
this.selectedTab = tab;
|
|
3157
|
+
this.ezChange.emit();
|
|
3158
|
+
this.setFocusedBtn(false, this.selectedIndex);
|
|
3153
3159
|
}
|
|
3154
3160
|
componentWillRender() {
|
|
3155
3161
|
if (!this._processedTabs) {
|
|
3156
3162
|
this._processedTabs = [];
|
|
3157
3163
|
if (this.tabs) {
|
|
3158
|
-
this.tabs.split(
|
|
3164
|
+
this.tabs.split(",").forEach((label) => {
|
|
3159
3165
|
label = label.trim();
|
|
3160
3166
|
this._processedTabs.push(new Tab(label, label));
|
|
3161
3167
|
});
|
|
3162
3168
|
}
|
|
3163
|
-
this._hostElem.querySelectorAll(
|
|
3164
|
-
const tabKey = elem.getAttribute(
|
|
3165
|
-
const label = elem.getAttribute(
|
|
3169
|
+
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
3170
|
+
const tabKey = elem.getAttribute("tabKey");
|
|
3171
|
+
const label = elem.getAttribute("label");
|
|
3166
3172
|
const t = new Tab(label, tabKey);
|
|
3167
3173
|
const content = elem.firstChild;
|
|
3168
3174
|
if (content) {
|
|
3169
|
-
content.setAttribute(
|
|
3175
|
+
content.setAttribute("slot", "tab" + this._processedTabs.length);
|
|
3170
3176
|
this._hostElem.appendChild(content);
|
|
3171
3177
|
}
|
|
3172
3178
|
this._processedTabs.push(t);
|
|
@@ -3190,7 +3196,7 @@ let EzTabselector = class {
|
|
|
3190
3196
|
const container = this._scrollContainer;
|
|
3191
3197
|
if (container) {
|
|
3192
3198
|
let lastTab = null;
|
|
3193
|
-
container.querySelectorAll(
|
|
3199
|
+
container.querySelectorAll(".tab").forEach((tab) => {
|
|
3194
3200
|
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
3195
3201
|
lastTab = tab;
|
|
3196
3202
|
}
|
|
@@ -3209,18 +3215,18 @@ let EzTabselector = class {
|
|
|
3209
3215
|
this._startHidden = container.scrollLeft > 0;
|
|
3210
3216
|
this._endHidden = remainingScroll > 0;
|
|
3211
3217
|
if (this._startHidden) {
|
|
3212
|
-
this._backwardButton.classList.remove(
|
|
3218
|
+
this._backwardButton.classList.remove("hidden");
|
|
3213
3219
|
}
|
|
3214
3220
|
else {
|
|
3215
|
-
this._backwardButton.classList.add(
|
|
3221
|
+
this._backwardButton.classList.add("hidden");
|
|
3216
3222
|
}
|
|
3217
3223
|
if (this._endHidden) {
|
|
3218
|
-
this._forwardButton.classList.remove(
|
|
3224
|
+
this._forwardButton.classList.remove("hidden");
|
|
3219
3225
|
}
|
|
3220
3226
|
else {
|
|
3221
|
-
this._forwardButton.classList.add(
|
|
3227
|
+
this._forwardButton.classList.add("hidden");
|
|
3222
3228
|
}
|
|
3223
|
-
const classNames = [
|
|
3229
|
+
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
3224
3230
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
3225
3231
|
classNames.forEach((name) => {
|
|
3226
3232
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -3237,11 +3243,9 @@ let EzTabselector = class {
|
|
|
3237
3243
|
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
3238
3244
|
}
|
|
3239
3245
|
setFocusedTab(index) {
|
|
3240
|
-
window.clearTimeout(this.
|
|
3241
|
-
this.
|
|
3246
|
+
window.clearTimeout(this._scrollCallBackTest);
|
|
3247
|
+
this._scrollCallBackTest = window.setTimeout(() => {
|
|
3242
3248
|
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
3243
|
-
console.log('tabtoscroll => ID', `#tab${this.selectedindex}`);
|
|
3244
|
-
console.log('tabtoscroll', tabtoscroll);
|
|
3245
3249
|
tabtoscroll.scrollIntoView();
|
|
3246
3250
|
}, 200);
|
|
3247
3251
|
}
|
|
@@ -3250,27 +3254,27 @@ let EzTabselector = class {
|
|
|
3250
3254
|
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
3251
3255
|
}
|
|
3252
3256
|
const context = this._textMesurement.getContext("2d");
|
|
3253
|
-
context.font =
|
|
3254
|
-
return Math.min(220, 24 + context.measureText(text).width) +
|
|
3257
|
+
context.font = "14px Sora, Algerian";
|
|
3258
|
+
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
3255
3259
|
}
|
|
3256
3260
|
;
|
|
3257
|
-
|
|
3258
|
-
const tabsButtons = this._scrollContainer.querySelectorAll(
|
|
3261
|
+
setFocusedBtn(visible, parameter) {
|
|
3262
|
+
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
3259
3263
|
tabsButtons.forEach((el) => {
|
|
3260
|
-
el.classList.remove(
|
|
3261
|
-
if (el.id ===
|
|
3262
|
-
el.classList.add(
|
|
3264
|
+
el.classList.remove("is-focused");
|
|
3265
|
+
if (el.id === "tab" + parameter && visible) {
|
|
3266
|
+
el.classList.add("is-focused");
|
|
3263
3267
|
}
|
|
3264
3268
|
});
|
|
3265
3269
|
}
|
|
3266
3270
|
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 = {
|
|
3271
|
+
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) => {
|
|
3272
|
+
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
3269
3273
|
const tabId = "tab" + index$1;
|
|
3270
|
-
const isSelected = index$1 === parseInt(this.
|
|
3274
|
+
const isSelected = index$1 === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
3271
3275
|
if (isSelected) {
|
|
3272
|
-
this.
|
|
3273
|
-
this.
|
|
3276
|
+
this.selectedTab = tab.tabKey;
|
|
3277
|
+
this.selectedIndex = index$1.toString();
|
|
3274
3278
|
}
|
|
3275
3279
|
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
3280
|
})), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bb6cdd1a.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) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-bb6cdd1a.js');
|
|
6
6
|
|
|
7
7
|
const ezLabelChipCss = ":host{--lc--height:36px;--lc__label--font-size:var(--text--medium, 14px);--lc__label--font-family:var(--font-pattern, Arial);--lc__label--font-weight:var(--text-weight--large, 600);--lc__label--space--medium:var(--space--medium, 12px);--lc__label--title--primary:var(--title--primary, #919191);--lc__label__container--border-radius:var(--border--radius-large, 24px);--lc__label__container--border:1px solid;--lc__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--lc__label__container--color-primary:var(--color--primary, #008561);--lc__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--lc__label__container--background-color:#0085610F;--lc__label__container--border-color:#0085610F;--lc__label__container--default--border-color--hover:var(--color--primary-600, #007a5a);--lc__label__container--default--background-color--hover:var(--color--primary-200, #f2faf8);--lc__label__container--text--disabled:var(--text--disable, #AFB6C0);--lc__btn__close--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 4.7098145,3.9968334 7.8535703,0.85318776 C 7.9473034,0.75946455 8,0.63233985 8,0.49978585 8,0.36723841 7.947304,0.24011361 7.8535703,0.14638378 7.7598354,0.05266059 7.6327257,6.48e-8 7.500152,6.48e-8 7.3676457,6.48e-8 7.2404691,0.0526608 7.1467354,0.14638378 L 4.00298,3.2900293 0.8591984,0.14638378 C 0.76546463,0.05266059 0.63834103,6.48e-8 0.50578123,6.48e-8 0.3732281,6.48e-8 0.24609783,0.05266059 0.15236397,0.14638378 0.05863012,0.24011361 0.00597395,0.36723841 0.00597395,0.49978585 c 0,0.132554 0.05265617,0.2596787 0.14639002,0.35340191 L 3.2961455,3.9968334 0.15236397,7.1411589 C 0.10466427,7.1872561 0.06663114,7.2424161 0.04046961,7.303371 0.01431473,7.3643212 5.6180845e-4,7.429943 1.6859246e-5,7.4962264 -5.2808998e-4,7.5625744 0.01214297,7.6283944 0.03729854,7.6897476 c 0.02514888,0.061416 0.06227604,0.1171794 0.1092096,0.1640783 0.0469402,0.046903 0.10274083,0.083936 0.16415749,0.1090508 0.0614166,0.025114 0.12721688,0.037703 0.19355667,0.037103 0.06634,-5.714e-4 0.13190027,-0.014457 0.19284393,-0.04064 0.0609507,-0.026246 0.11606474,-0.064351 0.16213217,-0.1120492 L 4.00298,4.7036374 7.1467354,7.8472967 c 0.093734,0.09373 0.2209103,0.1463572 0.3534166,0.1463572 0.1325737,0 0.2596834,-0.052623 0.3534183,-0.1463572 C 7.9473034,7.753567 8,7.6264624 8,7.493895 8,7.3613281 7.9473086,7.2342224 7.8535703,7.1404927 Z\"/></svg>')}.btn-close{align-items:flex-start;display:flex;outline:none;border:none;padding:0px 0px 0px 6px;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--lc__label__container--color-primary);width:8px;height:8px;-webkit-mask-image:var(--lc__btn__close--image);mask-image:var(--lc__btn__close--image)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;background-color:#FFFFFF;align-self:center;color:var(--lc__label--title--primary);fill:var(--lc__label--title--primary);border:var(--lc__label__container--border);border-radius:var(--lc__label__container--border-radius);border-color:var(--lc__label__container--border-color-strokes);padding-right:var(--lc__label--space--medium);padding-left:var(--lc__label--space--medium)}.label__container:hover{border-color:var(--lc__label__container--default--border-color--hover);background-color:var(--lc__label__container--default--background-color--hover)}.label__container--active{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;align-self:center;border:var(--lc__label__container--border);border-radius:var(--lc__label__container--border-radius);padding-right:var(--lc__label--space--medium);padding-left:var(--lc__label--space--medium);fill:var(--lc__label__container--color-primary);color:var(--lc__label__container--color-primary);border-color:var(--lc__label__container--border-color);background-color:var(--lc__label__container--background-color)}.label__container--disabled{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;align-self:center;border:var(--lc__label__container--border);border-color:var(--lc__label__container-color--disable-secondary);border-radius:var(--lc__label__container--border-radius);padding-right:var(--lc__label--space--medium);padding-left:var(--lc__label--space--medium);fill:var(--lc__label__container--text--disabled);color:var(--lc__label__container--text--disabled);background-color:var(--lc__label__container-color--disable-secondary)}label{display:flex;align-items:center;font-weight:var(--lc__label--font-weight);cursor:pointer;height:var(--lc--height);font-family:var(--lc__label--font-family);font-size:var(--lc__label--font-size)}.label__icon{display:flex;cursor:pointer}";
|
|
8
8
|
|