@sankhyalabs/ezui 1.1.78 → 1.1.81
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/{AssetsUtils-dd585fba.js → AssetsUtils-02db4f46.js} +1 -1
- package/dist/cjs/ez-action-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-application.cjs.entry.js +1 -1
- package/dist/cjs/ez-button_3.cjs.entry.js +520 -0
- package/dist/cjs/ez-calendar_14.cjs.entry.js +2598 -0
- package/dist/cjs/ez-dialog.cjs.entry.js +1 -1
- package/dist/cjs/{ez-button_11.cjs.entry.js → ez-grid.cjs.entry.js} +14 -1410
- package/dist/cjs/ez-icon.cjs.entry.js +30 -0
- package/dist/cjs/ez-label-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-modal_2.cjs.entry.js +370 -0
- package/dist/cjs/ez-popover.cjs.entry.js +2 -2
- package/dist/cjs/ez-popup.cjs.entry.js +1 -1
- package/dist/cjs/ez-time-input.cjs.entry.js +3 -3
- package/dist/cjs/ez-toast.cjs.entry.js +1 -1
- package/dist/cjs/ezui.cjs.js +2 -2
- package/dist/cjs/{index-4e4bae01.js → index-2003dec4.js} +0 -10
- package/dist/cjs/{index-40ebb2be.js → index-4fc4a0a4.js} +86 -63
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +0 -2
- package/dist/collection/components/ez-form/DataBinder.js +50 -0
- package/dist/collection/components/ez-form/ez-form.css +1 -15
- package/dist/collection/components/ez-form/ez-form.js +112 -427
- package/dist/collection/components/ez-form/fieldbuilder/FieldBuilder.js +46 -0
- package/dist/collection/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.js +11 -0
- package/dist/collection/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.js +14 -0
- package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js +9 -0
- package/dist/collection/components/ez-form/fieldbuilder/tpl/FileInput.tpl.js +5 -0
- package/dist/collection/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.js +13 -0
- package/dist/collection/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.js +5 -0
- package/dist/collection/components/ez-form/fieldbuilder/tpl/TextArea.tpl.js +5 -0
- package/dist/collection/components/ez-form/fieldbuilder/tpl/TextInput.tpl.js +5 -0
- package/dist/collection/components/ez-form/store/form.slice.js +38 -0
- package/dist/collection/components/ez-form/structure/FormItem.js +11 -0
- package/dist/collection/components/ez-form/structure/FormSheet.js +5 -0
- package/dist/collection/components/ez-form/structure/FormSheetMetadata.js +86 -0
- package/dist/collection/components/test-du/test-du.js +65 -23
- package/dist/custom-elements/index.d.ts +0 -12
- package/dist/custom-elements/index.js +462 -2104
- package/dist/esm/{AssetsUtils-3803e935.js → AssetsUtils-76ca41e1.js} +1 -1
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-application.entry.js +1 -1
- package/dist/esm/ez-button_3.entry.js +514 -0
- package/dist/esm/ez-calendar_14.entry.js +2581 -0
- package/dist/esm/ez-dialog.entry.js +1 -1
- package/dist/esm/{ez-button_11.entry.js → ez-grid.entry.js} +4 -1390
- package/dist/esm/ez-icon.entry.js +26 -0
- package/dist/esm/ez-label-chip.entry.js +1 -1
- package/dist/esm/ez-modal_2.entry.js +365 -0
- package/dist/esm/ez-popover.entry.js +2 -2
- package/dist/esm/ez-popup.entry.js +1 -1
- package/dist/esm/ez-time-input.entry.js +3 -3
- package/dist/esm/ez-toast.entry.js +1 -1
- package/dist/esm/ezui.js +2 -2
- package/dist/esm/{index-1dacecd3.js → index-077c7fcf.js} +0 -10
- package/dist/esm/{index-ca8700cb.js → index-e31373d9.js} +85 -61
- package/dist/esm/loader.js +2 -2
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/{p-516d0e0f.entry.js → p-0a2056d9.entry.js} +1 -1
- package/dist/ezui/{p-74f978db.entry.js → p-1c8d64d0.entry.js} +46 -46
- package/dist/ezui/p-1e36e3ff.entry.js +1 -0
- package/dist/ezui/p-446ec85b.js +1 -0
- package/dist/ezui/{p-a18a2d7b.entry.js → p-57ea4b84.entry.js} +1 -1
- package/dist/ezui/{p-5a86e18a.entry.js → p-6d157776.entry.js} +1 -1
- package/dist/ezui/p-7de3c95d.js +1 -0
- package/dist/ezui/p-8b9ef58b.entry.js +1 -0
- package/dist/ezui/{p-c6d469fc.entry.js → p-920bb8c9.entry.js} +1 -1
- package/dist/ezui/p-983bd291.js +1 -0
- package/dist/ezui/p-9dbf569a.entry.js +1 -0
- package/dist/ezui/p-a4a39579.entry.js +1 -0
- package/dist/ezui/{p-8d6cdd3e.entry.js → p-aef3394b.entry.js} +1 -1
- package/dist/ezui/p-d64a3939.entry.js +1 -0
- package/dist/ezui/{p-5da66d3e.entry.js → p-da31cd21.entry.js} +1 -1
- package/dist/ezui/{p-f3c5f27e.entry.js → p-da63000f.entry.js} +1 -1
- package/dist/types/components/ez-form/DataBinder.d.ts +10 -0
- package/dist/types/components/ez-form/ez-form.d.ts +25 -32
- package/dist/types/components/ez-form/fieldbuilder/FieldBuilder.d.ts +2 -0
- package/dist/types/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.d.ts +3 -0
- package/dist/types/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.d.ts +4 -0
- package/dist/types/components/ez-form/fieldbuilder/tpl/DateInput.tpl.d.ts +8 -0
- package/dist/types/components/ez-form/fieldbuilder/tpl/FileInput.tpl.d.ts +4 -0
- package/dist/types/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.d.ts +8 -0
- package/dist/types/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.d.ts +4 -0
- package/dist/types/components/ez-form/fieldbuilder/tpl/TextArea.tpl.d.ts +4 -0
- package/dist/types/components/ez-form/fieldbuilder/tpl/TextInput.tpl.d.ts +4 -0
- package/dist/types/components/ez-form/store/form.slice.d.ts +24 -0
- package/dist/types/components/ez-form/structure/FormItem.d.ts +9 -0
- package/dist/types/components/ez-form/structure/FormSheet.d.ts +9 -0
- package/dist/types/components/ez-form/structure/FormSheetMetadata.d.ts +27 -0
- package/dist/types/components/test-du/test-du.d.ts +8 -2
- package/dist/types/components.d.ts +9 -63
- package/package.json +2 -2
- package/react/components.d.ts +0 -2
- package/react/components.js +0 -2
- package/react/components.js.map +1 -1
- package/dist/cjs/ApplicationUtils-d1c1db56.js +0 -35
- package/dist/cjs/DataUnit-fdd7c70e.js +0 -474
- package/dist/cjs/DateUtils-716769e0.js +0 -46
- package/dist/cjs/ez-calendar.cjs.entry.js +0 -217
- package/dist/cjs/ez-collapsible-box_6.cjs.entry.js +0 -634
- package/dist/cjs/ez-combo-box.cjs.entry.js +0 -254
- package/dist/cjs/ez-date-time-input.cjs.entry.js +0 -133
- package/dist/cjs/ez-form.cjs.entry.js +0 -1838
- package/dist/cjs/ez-number-input.cjs.entry.js +0 -74
- package/dist/cjs/form-metadata.cjs.entry.js +0 -129
- package/dist/collection/components/ez-form/assets/trash-can-outline.svg +0 -3
- package/dist/collection/components/ez-form/store/Form.actions.js +0 -132
- package/dist/collection/components/ez-form/store/Form.reducer.js +0 -194
- package/dist/collection/components/ez-form/store/Form.selectors.js +0 -44
- package/dist/collection/components/ez-form/subcomponents/DataUnit.js +0 -301
- package/dist/collection/components/ez-form/subcomponents/FormMetadata.js +0 -8
- package/dist/collection/components/ez-form/subcomponents/css/place-holder.css +0 -24
- package/dist/collection/components/ez-form/subcomponents/form-metadata.js +0 -227
- package/dist/collection/components/ez-form/subcomponents/place-holder.js +0 -14
- package/dist/collection/components/ez-form/subcomponents/structure/Field.js +0 -95
- package/dist/collection/components/ez-form/subcomponents/structure/FieldSet.js +0 -27
- package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js +0 -41
- package/dist/collection/components/ez-form/subcomponents/structure/NavigationBar.js +0 -37
- package/dist/esm/ApplicationUtils-01280a9d.js +0 -33
- package/dist/esm/DataUnit-1cd45202.js +0 -464
- package/dist/esm/DateUtils-0a1bbd7a.js +0 -44
- package/dist/esm/ez-calendar.entry.js +0 -213
- package/dist/esm/ez-collapsible-box_6.entry.js +0 -625
- package/dist/esm/ez-combo-box.entry.js +0 -250
- package/dist/esm/ez-date-time-input.entry.js +0 -129
- package/dist/esm/ez-form.entry.js +0 -1834
- package/dist/esm/ez-number-input.entry.js +0 -70
- package/dist/esm/form-metadata.entry.js +0 -125
- package/dist/ezui/assets/trash-can-outline.svg +0 -3
- package/dist/ezui/p-14bee38e.entry.js +0 -1
- package/dist/ezui/p-37a611ea.js +0 -1
- package/dist/ezui/p-3a09c678.entry.js +0 -1
- package/dist/ezui/p-43c15c94.entry.js +0 -1
- package/dist/ezui/p-7107d7ef.js +0 -1
- package/dist/ezui/p-72ff3c95.entry.js +0 -1
- package/dist/ezui/p-88f45a83.entry.js +0 -1
- package/dist/ezui/p-8f4851a6.js +0 -1
- package/dist/ezui/p-9dfd537e.js +0 -1
- package/dist/ezui/p-a0331955.entry.js +0 -1
- package/dist/ezui/p-a15093e3.entry.js +0 -1
- package/dist/ezui/p-a19f2af3.entry.js +0 -1
- package/dist/ezui/p-c89629eb.js +0 -1
- package/dist/ezui/p-da929c01.js +0 -1
- package/dist/types/components/ez-form/store/Form.actions.d.ts +0 -111
- package/dist/types/components/ez-form/store/Form.reducer.d.ts +0 -20
- package/dist/types/components/ez-form/store/Form.selectors.d.ts +0 -14
- package/dist/types/components/ez-form/subcomponents/DataUnit.d.ts +0 -91
- package/dist/types/components/ez-form/subcomponents/FormMetadata.d.ts +0 -24
- package/dist/types/components/ez-form/subcomponents/form-metadata.d.ts +0 -16
- package/dist/types/components/ez-form/subcomponents/place-holder.d.ts +0 -3
- package/dist/types/components/ez-form/subcomponents/structure/Field.d.ts +0 -11
- package/dist/types/components/ez-form/subcomponents/structure/FieldSet.d.ts +0 -13
- package/dist/types/components/ez-form/subcomponents/structure/FormSheet.d.ts +0 -14
- package/dist/types/components/ez-form/subcomponents/structure/NavigationBar.d.ts +0 -19
|
@@ -2,137 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const index
|
|
7
|
-
const AssetsUtils = require('./AssetsUtils-
|
|
5
|
+
const index$1 = require('./index-2003dec4.js');
|
|
6
|
+
const index = require('./index-4fc4a0a4.js');
|
|
7
|
+
const AssetsUtils = require('./AssetsUtils-02db4f46.js');
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
let EzButton = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
/**
|
|
15
|
-
* Deixa o botão disponível ou não para interação com o usuário.
|
|
16
|
-
*/
|
|
17
|
-
this.enabled = true;
|
|
18
|
-
/**
|
|
19
|
-
* Define o modo de uso do botão; opções: icon, link e regular
|
|
20
|
-
*/
|
|
21
|
-
this.mode = "regular";
|
|
22
|
-
/**
|
|
23
|
-
* Quando em modo "icon" pode-se escolher entre [small,medium,large] (somente para o modo "icon")
|
|
24
|
-
*/
|
|
25
|
-
this.size = "medium";
|
|
26
|
-
}
|
|
27
|
-
getIconSize() {
|
|
28
|
-
return this.size;
|
|
29
|
-
}
|
|
30
|
-
handleSlotChange(ev) {
|
|
31
|
-
const slot = ev.target;
|
|
32
|
-
const content = slot.assignedElements()[0];
|
|
33
|
-
if (this.mode == "link") {
|
|
34
|
-
content.style.display = "inline";
|
|
35
|
-
if (slot.name == "leftIcon") {
|
|
36
|
-
content.style.paddingRight = "var(--ez-button__inline__icon--padding)";
|
|
37
|
-
}
|
|
38
|
-
else if (slot.name == "rightIcon") {
|
|
39
|
-
content.style.paddingLeft = "var(--ez-button__inline__icon--padding)";
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
content.style.setProperty('--ez-icon--color', 'var(--ez-icon--color)');
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
render() {
|
|
47
|
-
if (this.mode == "icon") {
|
|
48
|
-
return (index.h("button", { class: "icon " + this.size, type: "button", disabled: !this.enabled }, index.h("ez-icon", { class: "icon", href: this.image, size: this.getIconSize(), onClick: evt => {
|
|
49
|
-
if (!this.enabled)
|
|
50
|
-
evt.stopPropagation();
|
|
51
|
-
} })));
|
|
52
|
-
}
|
|
53
|
-
else if (this.mode == "label-icon") {
|
|
54
|
-
return (index.h("div", { class: "label-icon" }, index.h("button", { class: "icon", type: "button", disabled: !this.enabled }, index.h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => {
|
|
55
|
-
if (!this.enabled)
|
|
56
|
-
evt.stopPropagation();
|
|
57
|
-
} })), index.h("label", { title: this.label }, this.label)));
|
|
58
|
-
}
|
|
59
|
-
else if (this.mode == "link") {
|
|
60
|
-
return (index.h("a", null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
return (index.h("button", { type: "button", disabled: !this.enabled }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
EzButton.style = ezButtonCss;
|
|
68
|
-
|
|
69
|
-
const ezCheckCss = ":host{--ez-check--box--width:18px;--ez-check--box--height:18px;--ez-check--width:calc(var(--ez-check--box--width) + 14px);--ez-check--height:calc(var(--ez-check--box--width) + 14px);--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:20px;--ez-switch--pin--height:20px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--checked--background-color:var(--color--primary-300);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-secondary);--ez-switch--pin--checked--background-color:var(--color--primary);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;width:100%;align-items:center;margin:0}input.regularMode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.regularMode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regularMode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regularMode:disabled{cursor:auto;background:none}input.regularMode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regularMode:disabled::before{border:var(--ez-check--disabled--border)}input.regularMode:checked:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regularMode:checked:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regularMode:checked::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regularMode:checked:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regularMode:checked::after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regularMode:checked:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switchMode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:none;transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switchMode:disabled{background-color:var(--ez-switch--disabled--background-color)}input.switchMode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transform:translateY(-3px);border-radius:50%;width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switchMode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color)}input.switchMode:checked{transition:background-color var(--transition);background-color:var(--ez-switch--checked--background-color)}input.switchMode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width))/2);background-color:var(--ez-switch--pin--focus--background-color)}input.switchMode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switchMode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width)))}input.switchMode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-3px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color)}input.switchMode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);text-shadow:var(--text-shadow);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;padding-left:var(--space--small)}.label--disabled{color:var(--ez-check--label--disabled--color)}";
|
|
70
|
-
|
|
71
|
-
let EzCheck = class {
|
|
72
|
-
constructor(hostRef) {
|
|
73
|
-
index.registerInstance(this, hostRef);
|
|
74
|
-
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
75
|
-
/**
|
|
76
|
-
* Deixa o campo disponível ou não para interação com o usuário.
|
|
77
|
-
*/
|
|
78
|
-
this.enabled = true;
|
|
79
|
-
/**
|
|
80
|
-
* Existem dois modos de visualização: regular e switch.
|
|
81
|
-
* Se esta propriedade for omitida, o componete assume o formato "regular".
|
|
82
|
-
* No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada.
|
|
83
|
-
* No modo "switch" o campo tem uma interface em formato de um pino liga/desliga.
|
|
84
|
-
*/
|
|
85
|
-
this.mode = "regular";
|
|
86
|
-
}
|
|
87
|
-
adjustMode() {
|
|
88
|
-
if (this.mode === "switch") {
|
|
89
|
-
this._inputElem.classList.remove("regularMode");
|
|
90
|
-
this._inputElem.classList.add("switchMode");
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
this._inputElem.classList.remove("switchMode");
|
|
94
|
-
this._inputElem.classList.add("regularMode");
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
//---------------------------------------------
|
|
98
|
-
// Public methods
|
|
99
|
-
//---------------------------------------------
|
|
100
|
-
/**
|
|
101
|
-
* Devolve o modo escolhido para o componente
|
|
102
|
-
*/
|
|
103
|
-
async getMode() {
|
|
104
|
-
return this.mode;
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* Faz o foco no componente de input
|
|
108
|
-
*/
|
|
109
|
-
async setFocus() {
|
|
110
|
-
this._inputElem.focus();
|
|
111
|
-
}
|
|
112
|
-
componentDidLoad() {
|
|
113
|
-
this.adjustMode();
|
|
114
|
-
}
|
|
115
|
-
changeValue() {
|
|
116
|
-
this.value = !this.value;
|
|
117
|
-
this.ezChange.emit(this.value);
|
|
118
|
-
}
|
|
119
|
-
getLabelClasses() {
|
|
120
|
-
let classes = "label";
|
|
121
|
-
if (!this.enabled) {
|
|
122
|
-
classes += " label--disabled";
|
|
123
|
-
}
|
|
124
|
-
return classes;
|
|
125
|
-
}
|
|
126
|
-
render() {
|
|
127
|
-
return (index.h(index.Host, null, index.h("input", { type: "checkbox", class: "regularMode", checked: this.value === true, onChange: () => { this.changeValue(); }, disabled: !this.enabled, ref: (el) => this._inputElem = el }), this.label ? index.h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
|
|
128
|
-
}
|
|
129
|
-
static get watchers() { return {
|
|
130
|
-
"mode": ["adjustMode"]
|
|
131
|
-
}; }
|
|
132
|
-
};
|
|
133
|
-
EzCheck.style = ezCheckCss;
|
|
134
|
-
|
|
135
|
-
var agGridCommunity_cjs = index$1.createCommonjsModule(function (module, exports) {
|
|
9
|
+
var agGridCommunity_cjs = index.createCommonjsModule(function (module, exports) {
|
|
136
10
|
|
|
137
11
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
138
12
|
|
|
@@ -46434,7 +46308,7 @@ var BaseComponentWrapper = /** @class */ (function () {
|
|
|
46434
46308
|
* @link http://www.ag-grid.com/
|
|
46435
46309
|
* @license MIT
|
|
46436
46310
|
*/
|
|
46437
|
-
var globalObj = typeof index
|
|
46311
|
+
var globalObj = typeof index.commonjsGlobal === 'undefined' ? {} : index.commonjsGlobal;
|
|
46438
46312
|
globalObj.HTMLElement = typeof HTMLElement === 'undefined' ? {} : HTMLElement;
|
|
46439
46313
|
globalObj.HTMLButtonElement = typeof HTMLButtonElement === 'undefined' ? {} : HTMLButtonElement;
|
|
46440
46314
|
globalObj.HTMLSelectElement = typeof HTMLSelectElement === 'undefined' ? {} : HTMLSelectElement;
|
|
@@ -50139,7 +50013,7 @@ exports.simpleHttpRequest = simpleHttpRequest;
|
|
|
50139
50013
|
exports.stringToArray = stringToArray;
|
|
50140
50014
|
});
|
|
50141
50015
|
|
|
50142
|
-
var agGridEnterprise_cjs = index
|
|
50016
|
+
var agGridEnterprise_cjs = index.createCommonjsModule(function (module, exports) {
|
|
50143
50017
|
|
|
50144
50018
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
50145
50019
|
|
|
@@ -110367,60 +110241,6 @@ class AgGridController {
|
|
|
110367
110241
|
}
|
|
110368
110242
|
}
|
|
110369
110243
|
|
|
110370
|
-
/**
|
|
110371
|
-
* Classe com utiliários comuns para Strings.
|
|
110372
|
-
*/
|
|
110373
|
-
class StringUtils {
|
|
110374
|
-
/**
|
|
110375
|
-
* Verifica se a string está vazia.
|
|
110376
|
-
* Valores null e undefined são considerados como vazio.
|
|
110377
|
-
*
|
|
110378
|
-
* @param value String para ser validada.
|
|
110379
|
-
*/
|
|
110380
|
-
static isEmpty(value) {
|
|
110381
|
-
if (value == undefined || value === null) {
|
|
110382
|
-
return true;
|
|
110383
|
-
}
|
|
110384
|
-
value = value.toString();
|
|
110385
|
-
value = value.trim();
|
|
110386
|
-
if (value.length === 0) {
|
|
110387
|
-
return true;
|
|
110388
|
-
}
|
|
110389
|
-
return false;
|
|
110390
|
-
}
|
|
110391
|
-
/**
|
|
110392
|
-
* Remove acentos de vogais, substitui Ç por c e retorna a string em caixa alta.
|
|
110393
|
-
*
|
|
110394
|
-
* @param value String para ser transformada.
|
|
110395
|
-
*/
|
|
110396
|
-
static replaceAccentuatedChars(text) {
|
|
110397
|
-
text = text.toUpperCase();
|
|
110398
|
-
text = text.replace(/[À]/, "A");
|
|
110399
|
-
text = text.replace(/[Á]/, "A");
|
|
110400
|
-
text = text.replace(/[Â]/, "A");
|
|
110401
|
-
text = text.replace(/[Ã]/, "A");
|
|
110402
|
-
text = text.replace(/[Ä]/, "A");
|
|
110403
|
-
text = text.replace(/[È]/, "E");
|
|
110404
|
-
text = text.replace(/[É]/, "E");
|
|
110405
|
-
text = text.replace(/[Ê]/, "E");
|
|
110406
|
-
text = text.replace(/[Ë]/, "E");
|
|
110407
|
-
text = text.replace(/[Ì]/, "I");
|
|
110408
|
-
text = text.replace(/[Í]/, "I");
|
|
110409
|
-
text = text.replace(/[Î]/, "I");
|
|
110410
|
-
text = text.replace(/[Ï]/, "I");
|
|
110411
|
-
text = text.replace(/[Ò]/, "O");
|
|
110412
|
-
text = text.replace(/[Ó]/, "O");
|
|
110413
|
-
text = text.replace(/[Ô]/, "O");
|
|
110414
|
-
text = text.replace(/[Ö]/, "O");
|
|
110415
|
-
text = text.replace(/[Ù]/, "U");
|
|
110416
|
-
text = text.replace(/[Ú]/, "U");
|
|
110417
|
-
text = text.replace(/[Û]/, "U");
|
|
110418
|
-
text = text.replace(/[Ü]/, "U");
|
|
110419
|
-
text = text.replace(/[Ç]/, "C");
|
|
110420
|
-
return text.replace(/[^a-z0-9]/gi, '');
|
|
110421
|
-
}
|
|
110422
|
-
}
|
|
110423
|
-
|
|
110424
110244
|
class DataUnitBridge {
|
|
110425
110245
|
constructor(gridController, dataUnit) {
|
|
110426
110246
|
this._gridController = gridController;
|
|
@@ -110429,7 +110249,7 @@ class DataUnitBridge {
|
|
|
110429
110249
|
}
|
|
110430
110250
|
processAction(action) {
|
|
110431
110251
|
switch (action.type) {
|
|
110432
|
-
case index
|
|
110252
|
+
case index.Action.METADATA_LOADED:
|
|
110433
110253
|
const columnDefs = [];
|
|
110434
110254
|
this._dataUnit.metadata.fields.forEach(f => {
|
|
110435
110255
|
if (f.visible !== false) {
|
|
@@ -110446,9 +110266,9 @@ const ezGridCss = ":host{--ezgrid__header--background-color:var(--background--xl
|
|
|
110446
110266
|
|
|
110447
110267
|
let EzGrid = class {
|
|
110448
110268
|
constructor(hostRef) {
|
|
110449
|
-
index.registerInstance(this, hostRef);
|
|
110450
|
-
this.ezColumnStateChange = index.createEvent(this, "ezColumnStateChange", 7);
|
|
110451
|
-
this.ezSelectionChange = index.createEvent(this, "ezSelectionChange", 7);
|
|
110269
|
+
index$1.registerInstance(this, hostRef);
|
|
110270
|
+
this.ezColumnStateChange = index$1.createEvent(this, "ezColumnStateChange", 7);
|
|
110271
|
+
this.ezSelectionChange = index$1.createEvent(this, "ezSelectionChange", 7);
|
|
110452
110272
|
this._gridController = new AgGridController(false);
|
|
110453
110273
|
this._popUpVisible = false;
|
|
110454
110274
|
/**
|
|
@@ -110528,9 +110348,9 @@ let EzGrid = class {
|
|
|
110528
110348
|
return null;
|
|
110529
110349
|
}
|
|
110530
110350
|
return [
|
|
110531
|
-
index.h("div", { class: "text text--primary text--medium margin-right--medium" }, index.h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
|
|
110532
|
-
index.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("chevron-left"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
|
|
110533
|
-
index.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("chevron-right"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
|
|
110351
|
+
index$1.h("div", { class: "text text--primary text--medium margin-right--medium" }, index$1.h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
|
|
110352
|
+
index$1.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("chevron-left"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
|
|
110353
|
+
index$1.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("chevron-right"), class: "button--secondary margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
|
|
110534
110354
|
];
|
|
110535
110355
|
}
|
|
110536
110356
|
applyConfig(cols) {
|
|
@@ -110546,1226 +110366,10 @@ let EzGrid = class {
|
|
|
110546
110366
|
this._popUpVisible = true;
|
|
110547
110367
|
}
|
|
110548
110368
|
render() {
|
|
110549
|
-
return (index.h(index.Host, null, index.h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" }, this.getPaginationControl(), index.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("settings"), class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })), index.h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }), index.h("div", { class: "grid__footer" }), index.h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, index.h("grid-config", { ref: ref => this._gridConfig = ref, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
|
|
110369
|
+
return (index$1.h(index$1.Host, null, index$1.h("div", { class: "box box--shadow padding--medium grid__header margin-bottom--small" }, this.getPaginationControl(), index$1.h("ez-button", { size: "small", image: AssetsUtils.getSpritePath("settings"), class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } })), index$1.h("div", { class: "grid__container ag-sankhya-theme", ref: elem => this._container = elem }), index$1.h("div", { class: "grid__footer" }), index$1.h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, index$1.h("grid-config", { ref: ref => this._gridConfig = ref, selectedTab: "Colunas", onConfigFinish: evt => this.applyConfig(evt.detail), onConfigCancel: _evt => this.closeConfig() }))));
|
|
110550
110370
|
}
|
|
110551
110371
|
static get assetsDirs() { return ["../assets"]; }
|
|
110552
110372
|
};
|
|
110553
110373
|
EzGrid.style = ezGridCss;
|
|
110554
110374
|
|
|
110555
|
-
const ezIconCss = ":host{display:flex;overflow:hidden;position:relative;--ez-icon--color:var(--icon--color, #ffffff)}svg{display:flex;justify-content:center;align-items:center;fill:var(--ez-icon--color)}.x-small{width:12px;height:12px}.small{width:16px;height:16px}.medium{width:20px;height:20px}.large{width:24px;height:24px}.x-large{width:30px;height:30px}";
|
|
110556
|
-
|
|
110557
|
-
let EzIcon = class {
|
|
110558
|
-
constructor(hostRef) {
|
|
110559
|
-
index.registerInstance(this, hostRef);
|
|
110560
|
-
/**
|
|
110561
|
-
* Tamanho do ícone
|
|
110562
|
-
*/
|
|
110563
|
-
this.size = 'medium';
|
|
110564
|
-
}
|
|
110565
|
-
isSprite() {
|
|
110566
|
-
return this.href && this.href.indexOf('#') > -1;
|
|
110567
|
-
}
|
|
110568
|
-
render() {
|
|
110569
|
-
return (index.h(index.Host, null, this.isSprite()
|
|
110570
|
-
?
|
|
110571
|
-
index.h("svg", { class: this.size, role: "img" }, index.h("use", { xlinkHref: this.href }))
|
|
110572
|
-
:
|
|
110573
|
-
index.h("img", { class: this.size, src: this.href })));
|
|
110574
|
-
}
|
|
110575
|
-
};
|
|
110576
|
-
EzIcon.style = ezIconCss;
|
|
110577
|
-
|
|
110578
|
-
const ezListCss = ":host{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon__padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item__margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:var(--border--small, 1px solid);--ez-list__item--border-color:var(--title--primary, #2b3a54);--ez-list__item--font-family:var(--font-pattern, \"Sora\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item__border-radius:var(--border--radius-small, 6px);--ez-list__selected-item__background:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Sora\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group__overlay--font-family:var(--font-pattern, \"Sora\");--ez-list__group__overlay--font-size:var(--text--medium, 14px);--ez-list__group-container__scrollbar--border-radius:var(--border--radius-large, 24px);--ez-list__group-container__scrollbar--width:var(--space--medium, 12px);--ez-list__group-container__scrollbar--background-color:var(--text--primary, #626e82);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__draggable__scrollbar--border-radius:var(--border--radius-large, 24px);--ez-list__draggable__scrollbar--width:var(--space--medium, 12px);--ez-list__draggable__scrollbar--background-color:var(--text--primary, #626e82);--ez-list__draggable__icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}.draggable{display:flex;align-items:center;justify-content:space-between;background-color:#fff;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);flex:1}.dragging{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container{margin:0px !important}.item-content{display:flex;justify-content:center;align-items:center}.draggable-list{color:var(--text-color);padding:0;margin:0;width:100%;max-height:100%;padding-bottom:var(--space--small)}.draggable-list li{background-color:#fff;display:flex;margin:var(--ez-list__item__margin);font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color);height:32px}.over{border-top:1px dashed var(--ez-list__over--border--color)}.draggable-selected{background-color:var(--background--strong) !important}.draggable-selected div:hover{background-color:var(--background--strong) !important}.draggable-list::-webkit-scrollbar-track{background-color:#f0f2f5}.draggable-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable__scrollbar--background-color);border-radius:var(--ez-list__draggable__scrollbar--border-radius)}.draggable-list::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__draggable__scrollbar--width);max-width:var(--ez-list__draggable__scrollbar--width);min-width:var(--ez-list__draggable__scrollbar--width)}.draggable-icon{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon::after{content:'';display:flex;background-color:var(--ez-list__icon--color);width:18px;height:18px;-webkit-mask-image:var(--ez-list__draggable__icon--image);mask-image:var(--ez-list__draggable__icon--image)}*{box-sizing:border-box}.checkbox{width:fit-content}.text--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-container{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%}.group-name{font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group{display:flex;flex-direction:column}.group-container::-webkit-scrollbar-track{background-color:#f0f2f5}.group-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__group-container__scrollbar--background-color);border-radius:var(--ez-list__group-container__scrollbar--border-radius)}.group-container::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__group-container__scrollbar--width);max-width:var(--ez-list__group-container__scrollbar--width);min-width:var(--ez-list__group-container__scrollbar--width)}.section-container{display:flex;position:relative;height:100%}.items-container{width:100%;max-height:100%;overflow-y:auto;outline:none}.group-items-container{width:100%;max-height:100%;height:100%;outline:none}.items-container::-webkit-scrollbar-track{background-color:#f0f2f5}.items-container::-webkit-scrollbar-thumb{background-color:var(--ez-list__draggable__scrollbar--background-color);border-radius:var(--ez-list__draggable__scrollbar--border-radius)}.items-container::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-list__draggable__scrollbar--width);max-width:var(--ez-list__draggable__scrollbar--width);min-width:var(--ez-list__draggable__scrollbar--width)}.group-overlay{font-family:var(--ez-list__group__overlay--font-family);font-size:var(--ez-list__group__overlay--font-size);background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer}.overlay-text{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item{background:var(--ez-list__selected-item__background);border-radius:var(--ez-list__selected-item__border-radius)}.slot-item{align-items:flex-end}.overGroup{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
|
|
110579
|
-
|
|
110580
|
-
let EzList = class {
|
|
110581
|
-
constructor(hostRef) {
|
|
110582
|
-
index.registerInstance(this, hostRef);
|
|
110583
|
-
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
110584
|
-
this._listItems = [];
|
|
110585
|
-
this._listGroupItems = [];
|
|
110586
|
-
this._listItemsHistory = [];
|
|
110587
|
-
/**
|
|
110588
|
-
* Define a lista inicial do componente.
|
|
110589
|
-
*/
|
|
110590
|
-
this.dataSource = [];
|
|
110591
|
-
/**
|
|
110592
|
-
* Define se o componente renderizará os itens separados em grupos..
|
|
110593
|
-
*/
|
|
110594
|
-
this.useGroups = false;
|
|
110595
|
-
/**
|
|
110596
|
-
* Define se o componente terá o comportamento de arrasto de linhas.
|
|
110597
|
-
*/
|
|
110598
|
-
this.ezDraggable = false;
|
|
110599
|
-
/**
|
|
110600
|
-
* Define se os items da lista serão selecionáveis.
|
|
110601
|
-
*/
|
|
110602
|
-
this.ezSelectable = false;
|
|
110603
|
-
}
|
|
110604
|
-
createList() {
|
|
110605
|
-
if (this.useGroups) {
|
|
110606
|
-
let list = [...this.dataSource];
|
|
110607
|
-
list.forEach(itemGroup => {
|
|
110608
|
-
this.sortGroup(itemGroup);
|
|
110609
|
-
});
|
|
110610
|
-
this._listGroupItems = list;
|
|
110611
|
-
}
|
|
110612
|
-
else {
|
|
110613
|
-
this._listItems = this._listItemsHistory.length > 0 ? this._listItemsHistory : [...this.dataSource];
|
|
110614
|
-
}
|
|
110615
|
-
}
|
|
110616
|
-
sortGroup(itemGroup) {
|
|
110617
|
-
if (itemGroup.sort) {
|
|
110618
|
-
itemGroup.items.sort(function (a, b) {
|
|
110619
|
-
return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
|
|
110620
|
-
});
|
|
110621
|
-
if (itemGroup.sort === "DSC") {
|
|
110622
|
-
itemGroup.items.reverse();
|
|
110623
|
-
}
|
|
110624
|
-
}
|
|
110625
|
-
}
|
|
110626
|
-
/**
|
|
110627
|
-
* Recebe como argumento um ListItem {label: string} e um booleano que define se o componente deve fazer scroll para exibir o item específico (opcional).
|
|
110628
|
-
*/
|
|
110629
|
-
async setSelection(selectedItem, scrollToOption) {
|
|
110630
|
-
if (selectedItem && this.ezSelectable) {
|
|
110631
|
-
if (this.useGroups) {
|
|
110632
|
-
let newList = [...this._listGroupItems];
|
|
110633
|
-
newList.forEach(groupItem => {
|
|
110634
|
-
groupItem.items.forEach(item => {
|
|
110635
|
-
if (item.label == selectedItem.label) {
|
|
110636
|
-
item.selected = !item.selected;
|
|
110637
|
-
}
|
|
110638
|
-
else {
|
|
110639
|
-
item.selected = false;
|
|
110640
|
-
}
|
|
110641
|
-
});
|
|
110642
|
-
});
|
|
110643
|
-
this._listGroupItems = newList;
|
|
110644
|
-
}
|
|
110645
|
-
else {
|
|
110646
|
-
let newList = [...this._listItems];
|
|
110647
|
-
newList.forEach(item => {
|
|
110648
|
-
if (item.label === selectedItem.label) {
|
|
110649
|
-
item.selected = !item.selected;
|
|
110650
|
-
}
|
|
110651
|
-
else {
|
|
110652
|
-
item.selected = false;
|
|
110653
|
-
}
|
|
110654
|
-
});
|
|
110655
|
-
this._listItems = newList;
|
|
110656
|
-
}
|
|
110657
|
-
if (scrollToOption) {
|
|
110658
|
-
let liElem = this.useGroups ?
|
|
110659
|
-
this._groupContainer.querySelector('li#item_' + this.getItemId(selectedItem.label))
|
|
110660
|
-
: this._itemContainer.querySelector('li#item_' + this.getItemId(selectedItem.label));
|
|
110661
|
-
if (liElem) {
|
|
110662
|
-
liElem.scrollIntoView();
|
|
110663
|
-
}
|
|
110664
|
-
}
|
|
110665
|
-
}
|
|
110666
|
-
else {
|
|
110667
|
-
this.removeSelection();
|
|
110668
|
-
}
|
|
110669
|
-
}
|
|
110670
|
-
removeSelection() {
|
|
110671
|
-
if (this.useGroups) {
|
|
110672
|
-
let newList = [...this._listGroupItems];
|
|
110673
|
-
newList.forEach(groupItem => {
|
|
110674
|
-
groupItem.items.forEach(item => {
|
|
110675
|
-
item.selected = false;
|
|
110676
|
-
});
|
|
110677
|
-
});
|
|
110678
|
-
this._listGroupItems = newList;
|
|
110679
|
-
}
|
|
110680
|
-
else {
|
|
110681
|
-
let newList = [...this._listItems];
|
|
110682
|
-
newList.forEach(item => {
|
|
110683
|
-
item.selected = false;
|
|
110684
|
-
});
|
|
110685
|
-
this._listItems = newList;
|
|
110686
|
-
}
|
|
110687
|
-
}
|
|
110688
|
-
/**
|
|
110689
|
-
* Retorna o item selecionado.
|
|
110690
|
-
*/
|
|
110691
|
-
async getSelection() {
|
|
110692
|
-
let selectedItem;
|
|
110693
|
-
if (this.useGroups) {
|
|
110694
|
-
this._listGroupItems.every(group => {
|
|
110695
|
-
let item = group.items.find((item) => item.selected == true);
|
|
110696
|
-
if (item) {
|
|
110697
|
-
selectedItem = item;
|
|
110698
|
-
return false;
|
|
110699
|
-
}
|
|
110700
|
-
return true;
|
|
110701
|
-
});
|
|
110702
|
-
}
|
|
110703
|
-
else {
|
|
110704
|
-
selectedItem = this._listItems.find((item) => item.selected == true);
|
|
110705
|
-
}
|
|
110706
|
-
return selectedItem;
|
|
110707
|
-
}
|
|
110708
|
-
/**
|
|
110709
|
-
* Retorna a lista de items conforme o modo de uso.
|
|
110710
|
-
*/
|
|
110711
|
-
async getList() {
|
|
110712
|
-
if (this.useGroups) {
|
|
110713
|
-
return this._listGroupItems;
|
|
110714
|
-
}
|
|
110715
|
-
return this._listItems;
|
|
110716
|
-
}
|
|
110717
|
-
componentWillLoad() {
|
|
110718
|
-
this._listItemsHistory = [];
|
|
110719
|
-
}
|
|
110720
|
-
componentWillRender() {
|
|
110721
|
-
this.createList();
|
|
110722
|
-
}
|
|
110723
|
-
onDrop(ev, dragEndItem) {
|
|
110724
|
-
this.removeOverClass(ev);
|
|
110725
|
-
this.setSelection(undefined);
|
|
110726
|
-
if (this._dragStartItem) {
|
|
110727
|
-
if (this.useGroups) {
|
|
110728
|
-
let newList = [...this._listGroupItems];
|
|
110729
|
-
let groupEnd = this._listGroupItems.find(group => dragEndItem.groupName == group.group);
|
|
110730
|
-
//Remove item arrastado
|
|
110731
|
-
newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
|
|
110732
|
-
//Adiciona item arrastado
|
|
110733
|
-
if (groupEnd.sort) {
|
|
110734
|
-
newList.find(group => group.group == dragEndItem.groupName).items.push(this._dragStartItem.item);
|
|
110735
|
-
newList.find(group => group.group == dragEndItem.groupName).items.sort(function (a, b) {
|
|
110736
|
-
return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
|
|
110737
|
-
});
|
|
110738
|
-
if (groupEnd.sort === "DSC") {
|
|
110739
|
-
newList.find(group => group.group == dragEndItem.groupName).items.reverse();
|
|
110740
|
-
}
|
|
110741
|
-
}
|
|
110742
|
-
else {
|
|
110743
|
-
newList.find(group => group.group == dragEndItem.groupName).items.splice(dragEndItem.index, 0, this._dragStartItem.item);
|
|
110744
|
-
}
|
|
110745
|
-
this._listGroupItems = newList;
|
|
110746
|
-
this.ezChange.emit(this._listGroupItems);
|
|
110747
|
-
}
|
|
110748
|
-
else {
|
|
110749
|
-
let newList = [...this._listItems];
|
|
110750
|
-
newList.splice(this._dragStartItem.index, 1);
|
|
110751
|
-
newList.splice(dragEndItem.index, 0, this._dragStartItem.item);
|
|
110752
|
-
this._listItems = newList;
|
|
110753
|
-
this._listItemsHistory = newList;
|
|
110754
|
-
this.ezChange.emit(this._listItems);
|
|
110755
|
-
}
|
|
110756
|
-
}
|
|
110757
|
-
ev.stopPropagation();
|
|
110758
|
-
}
|
|
110759
|
-
onDropGroup(groupSelected) {
|
|
110760
|
-
var _a;
|
|
110761
|
-
let newList = [...this._listGroupItems];
|
|
110762
|
-
this.setSelection(undefined);
|
|
110763
|
-
let newGroup = newList.find(group => group.group === groupSelected.group);
|
|
110764
|
-
if (newGroup) {
|
|
110765
|
-
if (((_a = newGroup.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
110766
|
-
let newItem;
|
|
110767
|
-
newGroup.items.forEach((item, index) => {
|
|
110768
|
-
if (item.label === this._dragStartItem.item.label) {
|
|
110769
|
-
newItem = { item: item, index: index };
|
|
110770
|
-
}
|
|
110771
|
-
});
|
|
110772
|
-
if (newItem) {
|
|
110773
|
-
newGroup.items.splice(newItem.index, 1);
|
|
110774
|
-
newGroup.items.unshift(newItem.item);
|
|
110775
|
-
this.sortGroup(newGroup);
|
|
110776
|
-
}
|
|
110777
|
-
else {
|
|
110778
|
-
newGroup.items.unshift(this._dragStartItem.item);
|
|
110779
|
-
this.sortGroup(newGroup);
|
|
110780
|
-
newList.find(group => group.group === this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
|
|
110781
|
-
}
|
|
110782
|
-
}
|
|
110783
|
-
else {
|
|
110784
|
-
newList.find(group => group.group === this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
|
|
110785
|
-
newGroup.items = [this._dragStartItem.item];
|
|
110786
|
-
}
|
|
110787
|
-
this._listGroupItems = newList;
|
|
110788
|
-
}
|
|
110789
|
-
}
|
|
110790
|
-
onDragEnd() {
|
|
110791
|
-
this._dragStartItem = undefined;
|
|
110792
|
-
if (this._draggingElement) {
|
|
110793
|
-
try {
|
|
110794
|
-
this._element.shadowRoot.removeChild(this._draggingElement);
|
|
110795
|
-
}
|
|
110796
|
-
catch (err) { }
|
|
110797
|
-
this._draggingElement = undefined;
|
|
110798
|
-
}
|
|
110799
|
-
}
|
|
110800
|
-
addOverClass(ev) {
|
|
110801
|
-
if (ev.target.__proto__ == HTMLDivElement.prototype && ev.target.classList.contains("draggable")) {
|
|
110802
|
-
ev.target.classList.add('over');
|
|
110803
|
-
}
|
|
110804
|
-
}
|
|
110805
|
-
addOverGroupClass(ev, group) {
|
|
110806
|
-
if (ev.target) {
|
|
110807
|
-
let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
|
|
110808
|
-
if (group.items.length > 0) {
|
|
110809
|
-
let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
|
|
110810
|
-
groupOverlay.setAttribute("style", "display:grid");
|
|
110811
|
-
}
|
|
110812
|
-
else {
|
|
110813
|
-
groupContainer === null || groupContainer === void 0 ? void 0 : groupContainer.classList.add('overGroup');
|
|
110814
|
-
}
|
|
110815
|
-
}
|
|
110816
|
-
}
|
|
110817
|
-
removeOverClass(ev) {
|
|
110818
|
-
ev.target.classList.remove('over');
|
|
110819
|
-
}
|
|
110820
|
-
removeOverGroupClass(ev, group) {
|
|
110821
|
-
if (ev.target) {
|
|
110822
|
-
let groupContainer = this._groupContainer.querySelector("div#" + this.getDivGroupId(group.group));
|
|
110823
|
-
if (group.items.length > 0) {
|
|
110824
|
-
let groupOverlay = groupContainer.getElementsByClassName("group-overlay")[0];
|
|
110825
|
-
groupOverlay.setAttribute("style", "display:none");
|
|
110826
|
-
}
|
|
110827
|
-
else {
|
|
110828
|
-
groupContainer === null || groupContainer === void 0 ? void 0 : groupContainer.classList.remove('overGroup');
|
|
110829
|
-
}
|
|
110830
|
-
}
|
|
110831
|
-
}
|
|
110832
|
-
onDragStart(event, item, group, index) {
|
|
110833
|
-
if (this.useGroups) {
|
|
110834
|
-
this._dragStartItem = { groupName: group.group, item: item, index: index };
|
|
110835
|
-
}
|
|
110836
|
-
else {
|
|
110837
|
-
this._dragStartItem = { item: item.item, index: item.index };
|
|
110838
|
-
}
|
|
110839
|
-
let sourceElement = event.srcElement.cloneNode(true);
|
|
110840
|
-
this._draggingElement = event.srcElement.cloneNode(true);
|
|
110841
|
-
this._draggingElement.style.position = "absolute";
|
|
110842
|
-
this._draggingElement.style.top = (event.clientY + 5) + 'px';
|
|
110843
|
-
this._draggingElement.style.left = (event.clientX + 5) + 'px';
|
|
110844
|
-
this._draggingElement.style.height = event.srcElement.clientHeight + 'px';
|
|
110845
|
-
this._draggingElement.style.width = event.srcElement.clientWidth + 'px';
|
|
110846
|
-
this._draggingElement.style.background = "#FFFFFF";
|
|
110847
|
-
this._draggingElement.style.border = "1px solid #008561";
|
|
110848
|
-
this._draggingElement.style["box-sizing"] = "border-box";
|
|
110849
|
-
this._draggingElement.style["box-shadow"] = "0px 0px 16px rgba(0, 38, 111, 0.122)";
|
|
110850
|
-
this._draggingElement.style["border-radius"] = "6px";
|
|
110851
|
-
this._element.shadowRoot.appendChild(this._draggingElement);
|
|
110852
|
-
event.dataTransfer.setDragImage(sourceElement, -10000, -10000);
|
|
110853
|
-
}
|
|
110854
|
-
onDrag(event) {
|
|
110855
|
-
if (this._draggingElement) {
|
|
110856
|
-
this._draggingElement.style.top = (event.clientY + 5) + 'px';
|
|
110857
|
-
this._draggingElement.style.left = (event.clientX + 5) + 'px';
|
|
110858
|
-
}
|
|
110859
|
-
}
|
|
110860
|
-
selectFirstItem() {
|
|
110861
|
-
if (this.useGroups) {
|
|
110862
|
-
this.setSelection(this._listGroupItems[0].items[0]);
|
|
110863
|
-
}
|
|
110864
|
-
{
|
|
110865
|
-
this.setSelection(this._listItems[0]);
|
|
110866
|
-
}
|
|
110867
|
-
}
|
|
110868
|
-
nextOption(selectedItem) {
|
|
110869
|
-
let nextItem = undefined;
|
|
110870
|
-
if (this.useGroups) {
|
|
110871
|
-
this._listGroupItems.every((group, groupIndex, listGroupItems) => {
|
|
110872
|
-
let item = undefined;
|
|
110873
|
-
let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
|
|
110874
|
-
if (itemIndex != undefined && itemIndex != -1) {
|
|
110875
|
-
if (itemIndex === group.items.length - 1) {
|
|
110876
|
-
if (groupIndex + 1 <= listGroupItems.length - 1) {
|
|
110877
|
-
item = { label: listGroupItems[groupIndex + 1].items[0].label };
|
|
110878
|
-
}
|
|
110879
|
-
}
|
|
110880
|
-
else {
|
|
110881
|
-
item = { label: group.items[itemIndex + 1].label };
|
|
110882
|
-
}
|
|
110883
|
-
}
|
|
110884
|
-
if (item != undefined) {
|
|
110885
|
-
nextItem = item;
|
|
110886
|
-
return false;
|
|
110887
|
-
}
|
|
110888
|
-
return true;
|
|
110889
|
-
});
|
|
110890
|
-
}
|
|
110891
|
-
else {
|
|
110892
|
-
let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
|
|
110893
|
-
if (itemIndex >= 0 && itemIndex < this._listItems.length) {
|
|
110894
|
-
nextItem = this._listItems[itemIndex + 1];
|
|
110895
|
-
}
|
|
110896
|
-
}
|
|
110897
|
-
this.setSelection(nextItem, true);
|
|
110898
|
-
}
|
|
110899
|
-
previousOption(selectedItem) {
|
|
110900
|
-
let previousItem = undefined;
|
|
110901
|
-
if (this.useGroups) {
|
|
110902
|
-
this._listGroupItems.every((group, groupIndex, listGroupItems) => {
|
|
110903
|
-
let item = undefined;
|
|
110904
|
-
let itemIndex = group.items.findIndex(item => item.label == selectedItem.label);
|
|
110905
|
-
if (itemIndex != undefined && itemIndex != -1) {
|
|
110906
|
-
if (itemIndex === 0) {
|
|
110907
|
-
if ((groupIndex - 1 >= 0)) {
|
|
110908
|
-
item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
|
|
110909
|
-
}
|
|
110910
|
-
}
|
|
110911
|
-
else {
|
|
110912
|
-
item = { label: group.items[itemIndex - 1].label };
|
|
110913
|
-
}
|
|
110914
|
-
}
|
|
110915
|
-
if (item != undefined) {
|
|
110916
|
-
previousItem = item;
|
|
110917
|
-
return false;
|
|
110918
|
-
}
|
|
110919
|
-
return true;
|
|
110920
|
-
});
|
|
110921
|
-
}
|
|
110922
|
-
else {
|
|
110923
|
-
let itemIndex = this._listItems.findIndex(item => item.label === selectedItem.label);
|
|
110924
|
-
if (itemIndex > 0 && itemIndex < this._listItems.length) {
|
|
110925
|
-
previousItem = this._listItems[itemIndex - 1];
|
|
110926
|
-
}
|
|
110927
|
-
}
|
|
110928
|
-
this.setSelection(previousItem, true);
|
|
110929
|
-
}
|
|
110930
|
-
keyDownHandler(event) {
|
|
110931
|
-
event.preventDefault();
|
|
110932
|
-
this.getSelection().then(selectedItem => {
|
|
110933
|
-
if (selectedItem) {
|
|
110934
|
-
switch (event.key) {
|
|
110935
|
-
case "ArrowDown":
|
|
110936
|
-
this.nextOption(selectedItem);
|
|
110937
|
-
break;
|
|
110938
|
-
case "ArrowUp":
|
|
110939
|
-
this.previousOption(selectedItem);
|
|
110940
|
-
break;
|
|
110941
|
-
}
|
|
110942
|
-
}
|
|
110943
|
-
else {
|
|
110944
|
-
this.selectFirstItem();
|
|
110945
|
-
}
|
|
110946
|
-
});
|
|
110947
|
-
event.stopPropagation();
|
|
110948
|
-
}
|
|
110949
|
-
getItemId(itemLabel) {
|
|
110950
|
-
if (itemLabel) {
|
|
110951
|
-
return itemLabel.replace(/[^a-z0-9_]/gi, "_");
|
|
110952
|
-
}
|
|
110953
|
-
return undefined;
|
|
110954
|
-
}
|
|
110955
|
-
getDivGroupId(groupName) {
|
|
110956
|
-
if (groupName) {
|
|
110957
|
-
return "group-" + groupName.replace(/[^a-z0-9_]/gi, "_");
|
|
110958
|
-
}
|
|
110959
|
-
return undefined;
|
|
110960
|
-
}
|
|
110961
|
-
onDragOverGroup(event, group) {
|
|
110962
|
-
if (this._dragStartItem && this._dragStartItem.groupName !== group.group) {
|
|
110963
|
-
event.preventDefault();
|
|
110964
|
-
this.addOverGroupClass(event, group);
|
|
110965
|
-
}
|
|
110966
|
-
}
|
|
110967
|
-
onDragOverItem(event, group) {
|
|
110968
|
-
if (this._dragStartItem) {
|
|
110969
|
-
event.preventDefault();
|
|
110970
|
-
if (group) {
|
|
110971
|
-
group.sort ?
|
|
110972
|
-
() => {
|
|
110973
|
-
this.addOverGroupClass(event, group);
|
|
110974
|
-
}
|
|
110975
|
-
: this.addOverClass(event);
|
|
110976
|
-
}
|
|
110977
|
-
else {
|
|
110978
|
-
this.addOverClass(event);
|
|
110979
|
-
}
|
|
110980
|
-
event.stopPropagation();
|
|
110981
|
-
}
|
|
110982
|
-
}
|
|
110983
|
-
render() {
|
|
110984
|
-
return (index.h(index.Host, { ref: (el) => this._element = el }, this.useGroups ?
|
|
110985
|
-
index.h("div", { class: "group-container", ref: (el) => this._groupContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, this._listGroupItems.map(group => {
|
|
110986
|
-
return index.h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDragLeave: (event) => { this.removeOverGroupClass(event, group); }, onDragEnd: (event) => { this.onDragEnd(); this.removeOverGroupClass(event, group); }, onDragOver: (event) => { this.onDragOverGroup(event, group); }, onDrop: () => this.onDropGroup(group) }, index.h("label", { class: "group-name", onDragLeave: (event) => { this.removeOverGroupClass(event, group); }, onDragOver: (event) => { this.onDragOverGroup(event, group); }, onDragEnd: (event) => { this.onDragEnd(); this.removeOverGroupClass(event, group); }, onDrop: () => this.onDropGroup(group) }, group.group), index.h("section", { class: "section-container", onDragOver: (ev) => ev.preventDefault() }, index.h("div", { class: "group-items-container" }, index.h("div", { class: "draggable-list" }, group.items.map((item, index$1) => {
|
|
110987
|
-
return index.h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) }, index.h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onClick: () => { this.setSelection(item); }, onDragLeave: (event) => { group.sort ? undefined : this.removeOverClass(event); }, onDragEnd: () => this.onDragEnd(), onDragStart: (event) => this.onDragStart(event, item, group, index$1), onDragOver: (event) => this.onDragOverItem(event, group), onDrop: (event) => this.onDrop(event, { groupName: group.group, item: item, index: index$1 }), onDrag: (event) => this.onDrag(event), draggable: this.ezDraggable }, index.h("div", { class: "item-content" }, this.ezDraggable ? index.h("span", { class: "draggable-icon" }) : undefined, index.h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)), this.itemSlotBuilder ?
|
|
110988
|
-
index.h("div", { class: "slot-item" }, this.itemSlotBuilder(item, group))
|
|
110989
|
-
: undefined));
|
|
110990
|
-
}))), index.h("div", { class: "group-overlay" }, index.h("div", { id: "overlay-text" }, index.h("b", null, "Mover"), " para ", group.group))));
|
|
110991
|
-
}))
|
|
110992
|
-
:
|
|
110993
|
-
index.h("div", { class: "items-container", ref: (el) => this._itemContainer = el, tabIndex: 0, onKeyDown: (event) => { this.keyDownHandler(event); } }, index.h("div", { class: "draggable-list" }, this._listItems.map((item, index$1) => {
|
|
110994
|
-
return index.h("li", { id: 'item_' + this.getItemId(item.label), class: this.ezSelectable ? "selectable-container" : "", key: 'item_' + this.getItemId(item.label) }, index.h("div", { class: "draggable" + (item.selected == true ? " selected-item " : "") + (this.ezSelectable == true ? " selectable " : ""), onDragStart: (event) => this.onDragStart(event, { item: item, index: index$1 }), onClick: () => { this.setSelection(item); }, onDragLeave: event => this.removeOverClass(event), onDragOver: (event) => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: (event) => this.onDrop(event, { item: item, index: index$1 }), onDrag: (event) => this.onDrag(event), draggable: this.ezDraggable }, index.h("div", { class: "item-content" }, this.ezDraggable ? index.h("span", { class: "draggable-icon" }) : undefined, index.h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label)), this.itemSlotBuilder ?
|
|
110995
|
-
index.h("div", null, this.itemSlotBuilder(item))
|
|
110996
|
-
: undefined));
|
|
110997
|
-
})))));
|
|
110998
|
-
}
|
|
110999
|
-
};
|
|
111000
|
-
EzList.style = ezListCss;
|
|
111001
|
-
|
|
111002
|
-
const ezModalCss = ":host{--ez-modal-z-index:var(--most-visible, 3);--ez-modal-vertical-padding:var(--space--large, 24px);display:block}.modal{position:fixed;padding:var(--ez-modal-vertical-padding) 0;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;max-height:calc(100% - 48px);height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:24px;border-radius:12px 0px 0px 12px;box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.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%}}";
|
|
111003
|
-
|
|
111004
|
-
let EzModal = class {
|
|
111005
|
-
constructor(hostRef) {
|
|
111006
|
-
index.registerInstance(this, hostRef);
|
|
111007
|
-
this.ezCloseModal = index.createEvent(this, "ezCloseModal", 7);
|
|
111008
|
-
/**
|
|
111009
|
-
* Controle de exibição do Modal
|
|
111010
|
-
*/
|
|
111011
|
-
this.opened = true;
|
|
111012
|
-
/**
|
|
111013
|
-
* Define se o modal será fechado ao clicar ESC
|
|
111014
|
-
*/
|
|
111015
|
-
this.closeEsc = false;
|
|
111016
|
-
/**
|
|
111017
|
-
* Define se o modal será fechado ao clicar fora do conteúdo.
|
|
111018
|
-
*/
|
|
111019
|
-
this.closeOutsideClick = false;
|
|
111020
|
-
this.handleKeyboardEvent = (ev) => {
|
|
111021
|
-
if ((ev === null || ev === void 0 ? void 0 : ev.key) === "Escape" && this.closeEsc) {
|
|
111022
|
-
this.closeModal();
|
|
111023
|
-
}
|
|
111024
|
-
};
|
|
111025
|
-
}
|
|
111026
|
-
handleopenedChange() {
|
|
111027
|
-
if (this.opened) {
|
|
111028
|
-
document.addEventListener("keydown", this.handleKeyboardEvent);
|
|
111029
|
-
}
|
|
111030
|
-
else {
|
|
111031
|
-
document.removeEventListener("keydown", this.handleKeyboardEvent);
|
|
111032
|
-
}
|
|
111033
|
-
}
|
|
111034
|
-
closeModal() {
|
|
111035
|
-
this.opened = false;
|
|
111036
|
-
this.ezCloseModal.emit(this.opened);
|
|
111037
|
-
}
|
|
111038
|
-
componentDidLoad() {
|
|
111039
|
-
this.handleopenedChange();
|
|
111040
|
-
}
|
|
111041
|
-
onMouseDownHandler(event) {
|
|
111042
|
-
if (this.closeOutsideClick && event.target === this._overlay) {
|
|
111043
|
-
this.closeModal();
|
|
111044
|
-
}
|
|
111045
|
-
}
|
|
111046
|
-
render() {
|
|
111047
|
-
const positionSufix = this.align === "left" ? "left" : "right";
|
|
111048
|
-
return (index.h(index.Host, null, this.opened
|
|
111049
|
-
?
|
|
111050
|
-
index.h("div", { class: "modal", onMouseDown: evt => this.onMouseDownHandler(evt) }, index.h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, index.h("div", { class: `modal__content modal__content--${positionSufix} ${this.modalSize}` }, index.h("slot", null))))
|
|
111051
|
-
:
|
|
111052
|
-
undefined));
|
|
111053
|
-
}
|
|
111054
|
-
static get watchers() { return {
|
|
111055
|
-
"opened": ["handleopenedChange"]
|
|
111056
|
-
}; }
|
|
111057
|
-
};
|
|
111058
|
-
EzModal.style = ezModalCss;
|
|
111059
|
-
|
|
111060
|
-
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;--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}";
|
|
111061
|
-
|
|
111062
|
-
let EzTabselector = class {
|
|
111063
|
-
constructor(hostRef) {
|
|
111064
|
-
index.registerInstance(this, hostRef);
|
|
111065
|
-
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
111066
|
-
this.setFocusedParam = (ev) => {
|
|
111067
|
-
if (ev.key === "Enter") {
|
|
111068
|
-
this.selectedIndex = this.focusedIndex;
|
|
111069
|
-
this.focusedIndex = undefined;
|
|
111070
|
-
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
111071
|
-
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
111072
|
-
ev.preventDefault();
|
|
111073
|
-
this.setFocusedTab(this.selectedIndex);
|
|
111074
|
-
}
|
|
111075
|
-
else if (ev.key === "ArrowLeft" || ev.key === "ArrowRight") {
|
|
111076
|
-
let operator = undefined;
|
|
111077
|
-
if (ev.key === "ArrowLeft") {
|
|
111078
|
-
operator = false;
|
|
111079
|
-
}
|
|
111080
|
-
else if (ev.key === "ArrowRight") {
|
|
111081
|
-
operator = true;
|
|
111082
|
-
}
|
|
111083
|
-
else {
|
|
111084
|
-
return;
|
|
111085
|
-
}
|
|
111086
|
-
if (this.focusedIndex === undefined) {
|
|
111087
|
-
if (operator === false) {
|
|
111088
|
-
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) - 1).toString() : undefined;
|
|
111089
|
-
}
|
|
111090
|
-
else {
|
|
111091
|
-
this.focusedIndex = this.selectedIndex !== undefined ? (parseInt(this.selectedIndex) + 1).toString() : undefined;
|
|
111092
|
-
}
|
|
111093
|
-
}
|
|
111094
|
-
else {
|
|
111095
|
-
if (operator === false) {
|
|
111096
|
-
this.focusedIndex = (parseInt(this.focusedIndex) - 1).toString();
|
|
111097
|
-
}
|
|
111098
|
-
else {
|
|
111099
|
-
this.focusedIndex = (parseInt(this.focusedIndex) + 1).toString();
|
|
111100
|
-
}
|
|
111101
|
-
}
|
|
111102
|
-
if (parseInt(this.focusedIndex) < 0) {
|
|
111103
|
-
this.focusedIndex = "0";
|
|
111104
|
-
}
|
|
111105
|
-
else if (parseInt(this.focusedIndex) > this._processedTabs.length - 1) {
|
|
111106
|
-
this.focusedIndex = (this._processedTabs.length - 1).toString();
|
|
111107
|
-
}
|
|
111108
|
-
this.setFocusedBtn(true, this.focusedIndex);
|
|
111109
|
-
this.setFocusedTab(this.focusedIndex);
|
|
111110
|
-
this.ezChange.emit(this.selectedTab);
|
|
111111
|
-
}
|
|
111112
|
-
else if (ev.key === "Tab" || ev.key === "Escape") {
|
|
111113
|
-
this.focusedIndex = undefined;
|
|
111114
|
-
this.selectedTab = this._processedTabs[this.selectedIndex]["tabKey"];
|
|
111115
|
-
this.handleTabClick(this.selectedTab, parseInt(this.selectedIndex));
|
|
111116
|
-
ev.preventDefault();
|
|
111117
|
-
this.setFocusedTab(this.selectedIndex);
|
|
111118
|
-
}
|
|
111119
|
-
// this.setFocusedTab();
|
|
111120
|
-
};
|
|
111121
|
-
}
|
|
111122
|
-
handleTabClick(tab, index) {
|
|
111123
|
-
this.selectedIndex = index.toString();
|
|
111124
|
-
this.focusedIndex = undefined;
|
|
111125
|
-
this.selectedTab = tab;
|
|
111126
|
-
this.ezChange.emit(this.selectedTab);
|
|
111127
|
-
this.setFocusedBtn(false, this.selectedIndex);
|
|
111128
|
-
}
|
|
111129
|
-
componentWillRender() {
|
|
111130
|
-
if (!this._processedTabs) {
|
|
111131
|
-
this._processedTabs = [];
|
|
111132
|
-
if (this.tabs) {
|
|
111133
|
-
this.tabs.split(",").forEach((label) => {
|
|
111134
|
-
label = label.trim();
|
|
111135
|
-
this._processedTabs.push(new Tab(label, label));
|
|
111136
|
-
});
|
|
111137
|
-
}
|
|
111138
|
-
this._hostElem.querySelectorAll("ez-tab").forEach((elem) => {
|
|
111139
|
-
const tabKey = elem.getAttribute("tabKey");
|
|
111140
|
-
const label = elem.getAttribute("label");
|
|
111141
|
-
const t = new Tab(label, tabKey);
|
|
111142
|
-
const content = elem.firstChild;
|
|
111143
|
-
if (content) {
|
|
111144
|
-
content.setAttribute("slot", "tab" + this._processedTabs.length);
|
|
111145
|
-
this._hostElem.appendChild(content);
|
|
111146
|
-
}
|
|
111147
|
-
this._processedTabs.push(t);
|
|
111148
|
-
});
|
|
111149
|
-
}
|
|
111150
|
-
}
|
|
111151
|
-
handleSlotChange(ev) {
|
|
111152
|
-
const slot = ev.target;
|
|
111153
|
-
const content = slot.assignedElements()[0];
|
|
111154
|
-
if (content) {
|
|
111155
|
-
content.style.marginLeft = "6px";
|
|
111156
|
-
}
|
|
111157
|
-
}
|
|
111158
|
-
scrollBackward() {
|
|
111159
|
-
const container = this._scrollContainer;
|
|
111160
|
-
if (container) {
|
|
111161
|
-
container.scrollLeft -= container.clientWidth;
|
|
111162
|
-
}
|
|
111163
|
-
}
|
|
111164
|
-
scrollFoward() {
|
|
111165
|
-
const container = this._scrollContainer;
|
|
111166
|
-
if (container) {
|
|
111167
|
-
let lastTab = null;
|
|
111168
|
-
container.querySelectorAll(".tab").forEach((tab) => {
|
|
111169
|
-
if (tab.getBoundingClientRect().right < container.clientWidth) {
|
|
111170
|
-
lastTab = tab;
|
|
111171
|
-
}
|
|
111172
|
-
});
|
|
111173
|
-
container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
|
|
111174
|
-
}
|
|
111175
|
-
}
|
|
111176
|
-
componentDidRender() {
|
|
111177
|
-
this.updateScroll();
|
|
111178
|
-
}
|
|
111179
|
-
updateScroll() {
|
|
111180
|
-
const container = this._scrollContainer;
|
|
111181
|
-
if (container) {
|
|
111182
|
-
const { scrollWidth, clientWidth, scrollLeft } = container;
|
|
111183
|
-
const remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
|
|
111184
|
-
this._startHidden = container.scrollLeft > 0;
|
|
111185
|
-
this._endHidden = remainingScroll > 0;
|
|
111186
|
-
if (this._startHidden) {
|
|
111187
|
-
this._backwardButton.classList.remove("hidden");
|
|
111188
|
-
}
|
|
111189
|
-
else {
|
|
111190
|
-
this._backwardButton.classList.add("hidden");
|
|
111191
|
-
}
|
|
111192
|
-
if (this._endHidden) {
|
|
111193
|
-
this._forwardButton.classList.remove("hidden");
|
|
111194
|
-
}
|
|
111195
|
-
else {
|
|
111196
|
-
this._forwardButton.classList.add("hidden");
|
|
111197
|
-
}
|
|
111198
|
-
const classNames = ["", "startHidden", "endHidden", "midle"];
|
|
111199
|
-
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
111200
|
-
classNames.forEach((name) => {
|
|
111201
|
-
if (name !== currentClass && container.classList.contains(name)) {
|
|
111202
|
-
container.classList.remove(name);
|
|
111203
|
-
}
|
|
111204
|
-
});
|
|
111205
|
-
if (currentClass && !container.classList.contains(currentClass)) {
|
|
111206
|
-
container.classList.add(currentClass);
|
|
111207
|
-
}
|
|
111208
|
-
}
|
|
111209
|
-
}
|
|
111210
|
-
domScrollHandler() {
|
|
111211
|
-
window.clearTimeout(this._scrollCallBack);
|
|
111212
|
-
this._scrollCallBack = window.setTimeout(() => { this.updateScroll(); }, 200);
|
|
111213
|
-
}
|
|
111214
|
-
setFocusedTab(index) {
|
|
111215
|
-
window.clearTimeout(this._scrollCallBackTest);
|
|
111216
|
-
this._scrollCallBackTest = window.setTimeout(() => {
|
|
111217
|
-
const tabtoscroll = this._scrollContainer.querySelector(`#tab${index}`);
|
|
111218
|
-
tabtoscroll.scrollIntoView();
|
|
111219
|
-
}, 200);
|
|
111220
|
-
}
|
|
111221
|
-
getTextWidth(text) {
|
|
111222
|
-
if (this._textMesurement === undefined) {
|
|
111223
|
-
this._textMesurement = this._hostElem.shadowRoot.ownerDocument.createElement("canvas");
|
|
111224
|
-
}
|
|
111225
|
-
const context = this._textMesurement.getContext("2d");
|
|
111226
|
-
context.font = "14px Sora, Algerian";
|
|
111227
|
-
return Math.min(220, 24 + context.measureText(text).width) + "px";
|
|
111228
|
-
}
|
|
111229
|
-
;
|
|
111230
|
-
setFocusedBtn(visible, parameter) {
|
|
111231
|
-
const tabsButtons = this._scrollContainer.querySelectorAll(".tab");
|
|
111232
|
-
tabsButtons.forEach((el) => {
|
|
111233
|
-
el.classList.remove("is-focused");
|
|
111234
|
-
if (el.id === "tab" + parameter && visible) {
|
|
111235
|
-
el.classList.add("is-focused");
|
|
111236
|
-
}
|
|
111237
|
-
});
|
|
111238
|
-
}
|
|
111239
|
-
render() {
|
|
111240
|
-
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) => {
|
|
111241
|
-
const labelStyle = { "min-width": this.getTextWidth(tab.label) };
|
|
111242
|
-
const tabId = "tab" + index$1;
|
|
111243
|
-
const isSelected = index$1 === parseInt(this.selectedIndex) || (this.selectedTab && tab.tabKey === this.selectedTab);
|
|
111244
|
-
if (isSelected) {
|
|
111245
|
-
this.selectedTab = tab.tabKey;
|
|
111246
|
-
this.selectedIndex = index$1.toString();
|
|
111247
|
-
}
|
|
111248
|
-
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); } }));
|
|
111249
|
-
})), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
|
|
111250
|
-
}
|
|
111251
|
-
get _hostElem() { return index.getElement(this); }
|
|
111252
|
-
};
|
|
111253
|
-
class Tab {
|
|
111254
|
-
constructor(label, tabKey) {
|
|
111255
|
-
this.label = label;
|
|
111256
|
-
this.tabKey = tabKey;
|
|
111257
|
-
}
|
|
111258
|
-
}
|
|
111259
|
-
EzTabselector.style = ezTabselectorCss;
|
|
111260
|
-
|
|
111261
|
-
const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:48px;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--large, 500);--ez-text-input--color:var(--title--primary, #000);--ez-text-input__input--background-color:var(--background--medium, #e0e0e0);--ez-text-input__input--border:var(--border--medium, 2px solid);--ez-text-input__input--border-color:var(--ez-text-input__input--background-color);--ez-text-input__input--focus--border-color:var(--color--alert-cold-800, #042EFF);--ez-text-input__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-text-input__input--disabled--color:var(--text--disable, #AFB6C0);--ez-text-input__input--error--border-color:#CC2936;--ez-text-input__message_box--font-size:var(--text--small, 12px);--ez-text-input__message_box--info--color:var(--color--success, #22085d);--ez-text-input__message_box--error--color:var(--color--error, #FF0000);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--ez-text-input--height);border-radius:var(--ez-text-input--border-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color)}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color)}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color)}input.text--right{text-align:right}.message-box{display:flex;min-height:16px;min-width:100%;margin-top:2px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input__message_box--font-size);color:var(--ez-text-input__message_box--info--color)}.hasError{color:var(--ez-text-input__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}";
|
|
111262
|
-
|
|
111263
|
-
let EzTextInput = class {
|
|
111264
|
-
constructor(hostRef) {
|
|
111265
|
-
index.registerInstance(this, hostRef);
|
|
111266
|
-
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
111267
|
-
/**
|
|
111268
|
-
* Deixa o campo disponível ou não para digitação.
|
|
111269
|
-
*/
|
|
111270
|
-
this.enabled = true;
|
|
111271
|
-
}
|
|
111272
|
-
showError() {
|
|
111273
|
-
const hasError = typeof this.errorMessage === "string" && this.errorMessage !== "";
|
|
111274
|
-
if (hasError) {
|
|
111275
|
-
this._inputElem.classList.add("hasError");
|
|
111276
|
-
this._messageBoxElem.classList.add("hasError");
|
|
111277
|
-
}
|
|
111278
|
-
else {
|
|
111279
|
-
this._inputElem.classList.remove("hasError");
|
|
111280
|
-
this._messageBoxElem.classList.remove("hasError");
|
|
111281
|
-
}
|
|
111282
|
-
}
|
|
111283
|
-
prepareMask() {
|
|
111284
|
-
if (this.mask) {
|
|
111285
|
-
if (this._maskFormatter == undefined) {
|
|
111286
|
-
this._maskFormatter = new index$1.MaskFormatter(this.mask);
|
|
111287
|
-
}
|
|
111288
|
-
else {
|
|
111289
|
-
this._maskFormatter.mask = this.mask;
|
|
111290
|
-
}
|
|
111291
|
-
}
|
|
111292
|
-
}
|
|
111293
|
-
updateInputValue() {
|
|
111294
|
-
if (this._inputElem) {
|
|
111295
|
-
this._inputElem.value = this.value;
|
|
111296
|
-
}
|
|
111297
|
-
this.handleChange();
|
|
111298
|
-
this.errorMessage = "";
|
|
111299
|
-
this.ezChange.emit(this.value);
|
|
111300
|
-
this.adjustFloatingLabel();
|
|
111301
|
-
}
|
|
111302
|
-
adjustFloatingLabel() {
|
|
111303
|
-
if (this.label && this._labelElem) {
|
|
111304
|
-
if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
|
|
111305
|
-
this._inputElem.classList.add("input--with--label");
|
|
111306
|
-
}
|
|
111307
|
-
const hasValue = this.value && this.value.toString().length > 0;
|
|
111308
|
-
const containsFloatedClass = this._labelElem.classList.contains("input__label--floated");
|
|
111309
|
-
if (hasValue || this.isFocused()) {
|
|
111310
|
-
if (!containsFloatedClass) {
|
|
111311
|
-
this._labelElem.classList.add("input__label--floated");
|
|
111312
|
-
}
|
|
111313
|
-
}
|
|
111314
|
-
else {
|
|
111315
|
-
if (containsFloatedClass) {
|
|
111316
|
-
this._labelElem.classList.remove("input__label--floated");
|
|
111317
|
-
}
|
|
111318
|
-
}
|
|
111319
|
-
}
|
|
111320
|
-
}
|
|
111321
|
-
isFocused() {
|
|
111322
|
-
return this._hostElement.shadowRoot.activeElement !== null;
|
|
111323
|
-
}
|
|
111324
|
-
//---------------------------------------------
|
|
111325
|
-
// Public methods
|
|
111326
|
-
//---------------------------------------------
|
|
111327
|
-
/**
|
|
111328
|
-
* Faz o foco no componente de input
|
|
111329
|
-
*/
|
|
111330
|
-
async setFocus() {
|
|
111331
|
-
this._inputElem.focus();
|
|
111332
|
-
}
|
|
111333
|
-
/**
|
|
111334
|
-
* Remove o foco no componente de input
|
|
111335
|
-
*/
|
|
111336
|
-
async setBlur() {
|
|
111337
|
-
this._inputElem.blur();
|
|
111338
|
-
}
|
|
111339
|
-
//---------------------------------------------
|
|
111340
|
-
// Event handlers
|
|
111341
|
-
//---------------------------------------------
|
|
111342
|
-
handleFocusout() {
|
|
111343
|
-
const value = this._inputElem.value;
|
|
111344
|
-
if (value && this._maskFormatter) {
|
|
111345
|
-
try {
|
|
111346
|
-
this._inputElem.value = this._maskFormatter.format(value);
|
|
111347
|
-
}
|
|
111348
|
-
catch (e) {
|
|
111349
|
-
this.errorMessage = e.message;
|
|
111350
|
-
}
|
|
111351
|
-
}
|
|
111352
|
-
this.value = this._inputElem.value;
|
|
111353
|
-
this.adjustFloatingLabel();
|
|
111354
|
-
}
|
|
111355
|
-
isValidValue(value) {
|
|
111356
|
-
if (this.restrict) {
|
|
111357
|
-
return Array.from(value).reduce((valid, c) => valid && this.restrict.indexOf(c) > -1, true);
|
|
111358
|
-
}
|
|
111359
|
-
return true;
|
|
111360
|
-
}
|
|
111361
|
-
handleChange() {
|
|
111362
|
-
if (!this._inputElem) {
|
|
111363
|
-
return;
|
|
111364
|
-
}
|
|
111365
|
-
const value = this._inputElem.value;
|
|
111366
|
-
if (this.isValidValue(value)) {
|
|
111367
|
-
this._lastValidValue = value;
|
|
111368
|
-
}
|
|
111369
|
-
else {
|
|
111370
|
-
this._inputElem.value = this._lastValidValue === undefined ? "" : this._lastValidValue;
|
|
111371
|
-
}
|
|
111372
|
-
this.value = this._inputElem.value;
|
|
111373
|
-
}
|
|
111374
|
-
handleSlotChange(ev) {
|
|
111375
|
-
const slot = ev.target;
|
|
111376
|
-
const content = slot.assignedElements()[0];
|
|
111377
|
-
if (content) {
|
|
111378
|
-
content.style.position = "absolute";
|
|
111379
|
-
content.style.display = "flex";
|
|
111380
|
-
content.style.alignItems = "center";
|
|
111381
|
-
content.style.justifyContent = "center";
|
|
111382
|
-
content.style.overflow = "hidden";
|
|
111383
|
-
content.style.top = "0px";
|
|
111384
|
-
content.style.width = "var(--ez-text-input__icon--width)";
|
|
111385
|
-
content.style.height = "var(--ez-text-input--height)";
|
|
111386
|
-
if (slot.name == "leftIcon") {
|
|
111387
|
-
content.style.left = "0px";
|
|
111388
|
-
content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
|
|
111389
|
-
this._inputElem.classList.add("icon--left");
|
|
111390
|
-
if (this._labelElem) {
|
|
111391
|
-
this._labelElem.classList.add("input__label--left");
|
|
111392
|
-
}
|
|
111393
|
-
}
|
|
111394
|
-
else if (slot.name == "rightIcon") {
|
|
111395
|
-
content.style.right = "0px";
|
|
111396
|
-
content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
|
|
111397
|
-
this._inputElem.classList.add("icon--right");
|
|
111398
|
-
if (this._labelElem) {
|
|
111399
|
-
this._labelElem.classList.add("input__label--right");
|
|
111400
|
-
}
|
|
111401
|
-
}
|
|
111402
|
-
}
|
|
111403
|
-
this.showError();
|
|
111404
|
-
}
|
|
111405
|
-
doFocus() {
|
|
111406
|
-
if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
|
|
111407
|
-
this._labelElem.classList.add("input__label--floated");
|
|
111408
|
-
}
|
|
111409
|
-
}
|
|
111410
|
-
//---------------------------------------------
|
|
111411
|
-
// Lifecycle web component
|
|
111412
|
-
//---------------------------------------------
|
|
111413
|
-
componentDidLoad() {
|
|
111414
|
-
this.showError();
|
|
111415
|
-
this.prepareMask();
|
|
111416
|
-
this.adjustFloatingLabel();
|
|
111417
|
-
}
|
|
111418
|
-
componentWillLoad() {
|
|
111419
|
-
this.prepareMask();
|
|
111420
|
-
if (this.value) {
|
|
111421
|
-
if (this._maskFormatter) {
|
|
111422
|
-
try {
|
|
111423
|
-
this.value = this._maskFormatter.format(this.value);
|
|
111424
|
-
}
|
|
111425
|
-
catch (e) {
|
|
111426
|
-
this.errorMessage = e.message;
|
|
111427
|
-
}
|
|
111428
|
-
}
|
|
111429
|
-
if (!this.isValidValue(this.value)) {
|
|
111430
|
-
this._lastValidValue = "";
|
|
111431
|
-
this.value = "";
|
|
111432
|
-
}
|
|
111433
|
-
}
|
|
111434
|
-
}
|
|
111435
|
-
render() {
|
|
111436
|
-
return (index.h(index.Host, null, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label ?
|
|
111437
|
-
index.h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
|
|
111438
|
-
: null, index.h("input", { onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), index.h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
111439
|
-
}
|
|
111440
|
-
get _hostElement() { return index.getElement(this); }
|
|
111441
|
-
static get watchers() { return {
|
|
111442
|
-
"errorMessage": ["showError"],
|
|
111443
|
-
"mask": ["prepareMask"],
|
|
111444
|
-
"value": ["updateInputValue"]
|
|
111445
|
-
}; }
|
|
111446
|
-
};
|
|
111447
|
-
EzTextInput.style = ezTextInputCss;
|
|
111448
|
-
|
|
111449
|
-
const gridConfigCss = ":host{--ez-grid-config__footer--padding-top:var(--space--medium, 12px);--ez-grid-config__main--padding-right:var(--space--medium, 12px);--ez-grid-config__tabselector-container--padding:var(--space--medium, 12px);--ez-grid-config__button-close--padding-left:var(--space--medium, 12px);--ez-grid-config__subtitle--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__title--font-family:var(--font-pattern, \"Sora\");--ez-grid-config__title--font-weight:var(--text-weight--large, 14px);--ez-grid-config__subtitle--font-size:var(--text--medium, 14px);--ez-grid-config__scrollbar--width:var(--space--medium, 12px);--ez-grid-config__main__scrollbar--background-color:var(--text--primary, #626e82);--ez-grid-config__main__scrollbar--border-radius:var(--border--radius-medium, 12px);display:grid;grid-template-rows:auto 1fr auto;max-height:100%;width:100%}.padding-right--medium{padding-right:var(--space--medium)}ez-list{height:100%}.grid-config__footer{padding-top:var(--ez-grid-config__footer--padding-top);display:flex;justify-content:flex-end;width:100%}.hidden{display:none}.grid-config__main{padding-right:var(--ez-grid-config__main--padding-right);overflow-y:auto}.tabselector-container{padding:var(--ez-grid-config__tabselector-container--padding) 0}.button-close{padding-left:var(--ez-grid-config__button-close--padding-left)}.title-container{display:flex;justify-content:center;align-items:center}.subtitle{font-family:var(--ez-grid-config__subtitle--font-family);font-size:var(--ez-grid-config__subtitle--font-size)}.title{display:flex;font-family:var(--ez-grid-config__title--font-family);margin:0;font-weight:var(--ez-grid-config__title--font-weight);line-height:1.3}.grid-config__main::-webkit-scrollbar-track{background-color:#f0f2f5}.grid-config__main::-webkit-scrollbar-thumb{background-color:var(--ez-grid-config__main__scrollbar--background-color);border-radius:var(--ez-grid-config__main__scrollbar--border-radius)}.grid-config__main::-webkit-scrollbar{background-color:#f0f2f5;width:var(--ez-grid-config__scrollbar--width);max-width:var(--ez-grid-config__scrollbar--width);min-width:var(--ez-grid-config__scrollbar--width)}";
|
|
111450
|
-
|
|
111451
|
-
let GridConfig = class {
|
|
111452
|
-
constructor(hostRef) {
|
|
111453
|
-
index.registerInstance(this, hostRef);
|
|
111454
|
-
this.configFinish = index.createEvent(this, "configFinish", 7);
|
|
111455
|
-
this.configCancel = index.createEvent(this, "configCancel", 7);
|
|
111456
|
-
this._columnListHistory = [];
|
|
111457
|
-
this._orderListItems = [];
|
|
111458
|
-
this._columListItems = [];
|
|
111459
|
-
this.selectedTab = "Colunas";
|
|
111460
|
-
this._selectedIndex = -1;
|
|
111461
|
-
}
|
|
111462
|
-
/* Creation Methods */
|
|
111463
|
-
createOrderList() {
|
|
111464
|
-
var _a;
|
|
111465
|
-
let newList = [];
|
|
111466
|
-
if (((_a = this._columnListHistory) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
111467
|
-
this._columnListHistory.find(group => group.group === "Visíveis").items.forEach(column => {
|
|
111468
|
-
let item = { label: column.label };
|
|
111469
|
-
newList.push(item);
|
|
111470
|
-
});
|
|
111471
|
-
}
|
|
111472
|
-
else {
|
|
111473
|
-
this.columns.forEach(column => {
|
|
111474
|
-
let item = { name: column.name, label: column.label };
|
|
111475
|
-
if (!column.hidden) {
|
|
111476
|
-
newList.push(item);
|
|
111477
|
-
}
|
|
111478
|
-
});
|
|
111479
|
-
}
|
|
111480
|
-
this._orderListItems = newList;
|
|
111481
|
-
}
|
|
111482
|
-
createColumnList() {
|
|
111483
|
-
let visibleGroup = {
|
|
111484
|
-
group: 'Visíveis',
|
|
111485
|
-
items: [],
|
|
111486
|
-
};
|
|
111487
|
-
let hiddenGroup = {
|
|
111488
|
-
group: 'Ocultas',
|
|
111489
|
-
items: [],
|
|
111490
|
-
sort: 'ASC'
|
|
111491
|
-
};
|
|
111492
|
-
this.columns.forEach(column => {
|
|
111493
|
-
let item = { label: column.label };
|
|
111494
|
-
if (column.hidden) {
|
|
111495
|
-
hiddenGroup.items.push(item);
|
|
111496
|
-
}
|
|
111497
|
-
else {
|
|
111498
|
-
visibleGroup.items.push(item);
|
|
111499
|
-
}
|
|
111500
|
-
});
|
|
111501
|
-
if (this._columnListHistory.length <= 0) {
|
|
111502
|
-
this._columListItems = [visibleGroup, hiddenGroup];
|
|
111503
|
-
}
|
|
111504
|
-
}
|
|
111505
|
-
buildColumnListSlot(item, group) {
|
|
111506
|
-
return (index.h("div", null, index.h("ez-check", { mode: 'switch', id: 'switch' + item + group, value: group.group === "Visíveis", onEzChange: (ev) => { this.switchColumnGroup(ev, item); } })));
|
|
111507
|
-
}
|
|
111508
|
-
buildOrderListSlot(item) {
|
|
111509
|
-
let existingItem = this.columns.find(columnItem => columnItem.label === item.label);
|
|
111510
|
-
return (index.h("div", null, index.h("select-box", { selectedOption: existingItem === null || existingItem === void 0 ? void 0 : existingItem.sort, key: 'select-box' + item, onEzChange: (ev) => { ev.stopPropagation(); this.updateOrder(ev.detail, item); } })));
|
|
111511
|
-
}
|
|
111512
|
-
updateOrder(sortOrder, updatedItem) {
|
|
111513
|
-
let newList = [...this.columns];
|
|
111514
|
-
let newItem = newList.find(item => item.label === updatedItem.label);
|
|
111515
|
-
if (newItem) {
|
|
111516
|
-
newItem.sort = sortOrder;
|
|
111517
|
-
}
|
|
111518
|
-
this.columns = newList;
|
|
111519
|
-
}
|
|
111520
|
-
/* Actions Methods */
|
|
111521
|
-
switchColumnGroup(ev, switchedItem) {
|
|
111522
|
-
ev.stopPropagation();
|
|
111523
|
-
let newList = [...this._columListItems];
|
|
111524
|
-
if (ev.detail === true) {
|
|
111525
|
-
let hiddenGroup = newList.find(group => group.group === "Ocultas");
|
|
111526
|
-
let index = hiddenGroup.items.findIndex(item => item.label === switchedItem.label);
|
|
111527
|
-
if (index >= 0) {
|
|
111528
|
-
hiddenGroup.items.splice(index, 1);
|
|
111529
|
-
}
|
|
111530
|
-
let visibleGroup = newList.find(group => group.group === "Visíveis");
|
|
111531
|
-
visibleGroup.items.push(switchedItem);
|
|
111532
|
-
this._columListItems = newList;
|
|
111533
|
-
this.createOrderList();
|
|
111534
|
-
}
|
|
111535
|
-
else if (ev.detail === false) {
|
|
111536
|
-
let visibleGroup = newList.find(group => group.group === "Visíveis");
|
|
111537
|
-
let index = visibleGroup.items.findIndex(item => item.label === switchedItem.label);
|
|
111538
|
-
if (index >= 0) {
|
|
111539
|
-
visibleGroup.items.splice(index, 1);
|
|
111540
|
-
}
|
|
111541
|
-
let hiddenGroup = newList.find(group => group.group === "Ocultas");
|
|
111542
|
-
hiddenGroup.items.push(switchedItem);
|
|
111543
|
-
this._columListItems = newList;
|
|
111544
|
-
this.createOrderList();
|
|
111545
|
-
}
|
|
111546
|
-
}
|
|
111547
|
-
finish() {
|
|
111548
|
-
let newColumnList = [];
|
|
111549
|
-
this._columListItems.forEach(group => {
|
|
111550
|
-
group.items.forEach(item => {
|
|
111551
|
-
const baseColumn = this.columns.find(column => column.label === item.label);
|
|
111552
|
-
let newColumnItem = Object.assign({}, baseColumn);
|
|
111553
|
-
if (group.group === "Ocultas") {
|
|
111554
|
-
newColumnItem.hidden = true;
|
|
111555
|
-
}
|
|
111556
|
-
else {
|
|
111557
|
-
newColumnItem.hidden = false;
|
|
111558
|
-
}
|
|
111559
|
-
newColumnList.push(newColumnItem);
|
|
111560
|
-
});
|
|
111561
|
-
});
|
|
111562
|
-
this._columnListHistory = [];
|
|
111563
|
-
this.columns = newColumnList;
|
|
111564
|
-
this.configFinish.emit(this.columns);
|
|
111565
|
-
}
|
|
111566
|
-
async locateColumn(evt, searchingText) {
|
|
111567
|
-
var _a;
|
|
111568
|
-
const hitEnter = evt.key === "Enter";
|
|
111569
|
-
if (!searchingText) {
|
|
111570
|
-
searchingText = (_a = evt.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
|
|
111571
|
-
}
|
|
111572
|
-
let newSelected = -1;
|
|
111573
|
-
if (this.selectedTab === "Ordenação") {
|
|
111574
|
-
if (searchingText) {
|
|
111575
|
-
const matchedIndexes = [];
|
|
111576
|
-
let orderListDatasource;
|
|
111577
|
-
await this._orderList.getList().then(listGroup => {
|
|
111578
|
-
orderListDatasource = listGroup;
|
|
111579
|
-
orderListDatasource.forEach((column, index) => {
|
|
111580
|
-
if (this.compareWords(column, searchingText)) {
|
|
111581
|
-
matchedIndexes.push(index);
|
|
111582
|
-
}
|
|
111583
|
-
});
|
|
111584
|
-
});
|
|
111585
|
-
if (matchedIndexes.length > 0) {
|
|
111586
|
-
if (hitEnter) {
|
|
111587
|
-
for (let j = 0; j < matchedIndexes.length; j++) {
|
|
111588
|
-
if (matchedIndexes[j] > this._selectedIndex) {
|
|
111589
|
-
newSelected = matchedIndexes[j];
|
|
111590
|
-
break;
|
|
111591
|
-
}
|
|
111592
|
-
}
|
|
111593
|
-
}
|
|
111594
|
-
if (newSelected === -1) {
|
|
111595
|
-
newSelected = matchedIndexes[0];
|
|
111596
|
-
}
|
|
111597
|
-
}
|
|
111598
|
-
this._selectedIndex = newSelected;
|
|
111599
|
-
let selectedColumn;
|
|
111600
|
-
selectedColumn = orderListDatasource[newSelected];
|
|
111601
|
-
if (selectedColumn) {
|
|
111602
|
-
this._orderList.setSelection({ label: selectedColumn.label }, true);
|
|
111603
|
-
}
|
|
111604
|
-
else {
|
|
111605
|
-
this._orderList.setSelection(undefined);
|
|
111606
|
-
}
|
|
111607
|
-
}
|
|
111608
|
-
else {
|
|
111609
|
-
this._orderList.setSelection(undefined);
|
|
111610
|
-
}
|
|
111611
|
-
}
|
|
111612
|
-
else {
|
|
111613
|
-
if (searchingText) {
|
|
111614
|
-
const matchedIndexes = [];
|
|
111615
|
-
this.columns.forEach((column, index) => {
|
|
111616
|
-
if (this.compareWords(column, searchingText)) {
|
|
111617
|
-
matchedIndexes.push(index);
|
|
111618
|
-
}
|
|
111619
|
-
});
|
|
111620
|
-
if (matchedIndexes.length > 0) {
|
|
111621
|
-
if (hitEnter) {
|
|
111622
|
-
for (let j = 0; j < matchedIndexes.length; j++) {
|
|
111623
|
-
if (matchedIndexes[j] > this._selectedIndex) {
|
|
111624
|
-
newSelected = matchedIndexes[j];
|
|
111625
|
-
break;
|
|
111626
|
-
}
|
|
111627
|
-
}
|
|
111628
|
-
}
|
|
111629
|
-
if (newSelected === -1) {
|
|
111630
|
-
newSelected = matchedIndexes[0];
|
|
111631
|
-
}
|
|
111632
|
-
}
|
|
111633
|
-
this._selectedIndex = newSelected;
|
|
111634
|
-
let selectedColumn = this.columns[newSelected];
|
|
111635
|
-
if (selectedColumn) {
|
|
111636
|
-
this._columnList.setSelection({ label: selectedColumn.label }, true);
|
|
111637
|
-
}
|
|
111638
|
-
else {
|
|
111639
|
-
this._columnList.setSelection(undefined);
|
|
111640
|
-
}
|
|
111641
|
-
}
|
|
111642
|
-
else {
|
|
111643
|
-
this._columnList.setSelection(undefined);
|
|
111644
|
-
}
|
|
111645
|
-
}
|
|
111646
|
-
}
|
|
111647
|
-
compareWords(column, searchingText) {
|
|
111648
|
-
if (StringUtils.replaceAccentuatedChars(column.label).indexOf(StringUtils.replaceAccentuatedChars(searchingText)) > -1) {
|
|
111649
|
-
return true;
|
|
111650
|
-
}
|
|
111651
|
-
return false;
|
|
111652
|
-
}
|
|
111653
|
-
closeConfig() {
|
|
111654
|
-
this._columnListHistory = [];
|
|
111655
|
-
this.configCancel.emit();
|
|
111656
|
-
}
|
|
111657
|
-
/* Handlers */
|
|
111658
|
-
handleTabChange(ev) {
|
|
111659
|
-
var _a;
|
|
111660
|
-
if ((_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.selectedTab) {
|
|
111661
|
-
if (ev.target.selectedTab === "Ordenação") {
|
|
111662
|
-
this._columnListHistory = this._columnList.dataSource;
|
|
111663
|
-
this.createOrderList();
|
|
111664
|
-
}
|
|
111665
|
-
this.selectedTab = ev.target.selectedTab;
|
|
111666
|
-
}
|
|
111667
|
-
}
|
|
111668
|
-
handleColumnListChange(ev) {
|
|
111669
|
-
var _a;
|
|
111670
|
-
if (ev.detail) {
|
|
111671
|
-
let visibleItems = (_a = ev.detail.find(group => group.group === "Visíveis")) === null || _a === void 0 ? void 0 : _a.items;
|
|
111672
|
-
if (visibleItems) {
|
|
111673
|
-
this._orderListItems = visibleItems;
|
|
111674
|
-
}
|
|
111675
|
-
}
|
|
111676
|
-
}
|
|
111677
|
-
componentWillRender() {
|
|
111678
|
-
var _a;
|
|
111679
|
-
if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
111680
|
-
this.createColumnList();
|
|
111681
|
-
this.createOrderList();
|
|
111682
|
-
}
|
|
111683
|
-
}
|
|
111684
|
-
componentDidRender() {
|
|
111685
|
-
var _a;
|
|
111686
|
-
if (((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
111687
|
-
this.locateColumn(new KeyboardEvent("arrow-right", { key: "ArrowRight" }), this._searchElement.value);
|
|
111688
|
-
}
|
|
111689
|
-
}
|
|
111690
|
-
render() {
|
|
111691
|
-
return (index.h(index.Host, null, index.h("div", { class: "grid-config__header" }, index.h("div", { class: "title-container" }, index.h("div", { class: "" }, index.h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), index.h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), index.h("div", { class: "button-close" }, index.h("ez-button", { mode: 'icon', image: AssetsUtils.getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))), index.h("div", { class: "tabselector-container" }, index.h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: '0', onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o' })), index.h("div", null, index.h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) }, index.h("ez-icon", { slot: "leftIcon", size: "medium", href: AssetsUtils.getSpritePath("search") })))), index.h("div", { class: "grid-config__main" }, index.h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedTab === "Colunas" ? "" : "hidden", dataSource: this._columListItems, onEzChange: ev => this.handleColumnListChange(ev), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), index.h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação" ? "" : "hidden", dataSource: this._orderListItems, ezSelectable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), index.h("div", { class: "grid-config__footer" }, index.h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }), index.h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));
|
|
111692
|
-
}
|
|
111693
|
-
static get assetsDirs() { return ["../assets"]; }
|
|
111694
|
-
};
|
|
111695
|
-
GridConfig.style = gridConfigCss;
|
|
111696
|
-
|
|
111697
|
-
const selectBoxCss = "select{border:1px solid #DCE0E8;font-family:'Sora';border-radius:3px;outline:none;cursor:pointer}";
|
|
111698
|
-
|
|
111699
|
-
let SelectBox = class {
|
|
111700
|
-
constructor(hostRef) {
|
|
111701
|
-
index.registerInstance(this, hostRef);
|
|
111702
|
-
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
111703
|
-
}
|
|
111704
|
-
changeSelection() {
|
|
111705
|
-
this.ezChange.emit(this._selectElem.value);
|
|
111706
|
-
}
|
|
111707
|
-
componentDidRender() {
|
|
111708
|
-
if (this._selectElem) {
|
|
111709
|
-
if (this.selectedOption) {
|
|
111710
|
-
this._selectElem.value = this.selectedOption;
|
|
111711
|
-
}
|
|
111712
|
-
else {
|
|
111713
|
-
this._selectElem.value = "na";
|
|
111714
|
-
}
|
|
111715
|
-
}
|
|
111716
|
-
}
|
|
111717
|
-
render() {
|
|
111718
|
-
return (index.h("select", { ref: (el) => this._selectElem = el, onChange: () => { this.changeSelection(); } }, index.h("option", { value: "na" }, "N/A"), index.h("option", { value: "asc" }, "A-Z"), index.h("option", { value: "desc" }, "Z-A")));
|
|
111719
|
-
}
|
|
111720
|
-
static get assetsDirs() { return ["../assets"]; }
|
|
111721
|
-
};
|
|
111722
|
-
SelectBox.style = selectBoxCss;
|
|
111723
|
-
|
|
111724
|
-
const testDuCss = ":host{display:block}";
|
|
111725
|
-
|
|
111726
|
-
let TestDu = class {
|
|
111727
|
-
constructor(hostRef) {
|
|
111728
|
-
index.registerInstance(this, hostRef);
|
|
111729
|
-
this._dataUnit = new index$1.DataUnit("duteste");
|
|
111730
|
-
}
|
|
111731
|
-
componentDidLoad() {
|
|
111732
|
-
this._dataUnit.dataLoader = (_dataUnit, _sort, _filters) => {
|
|
111733
|
-
return Promise.resolve([
|
|
111734
|
-
{ __record__id__: "registro1", CODPARC: 10, NOMEPARC: "Parceiro 10" },
|
|
111735
|
-
{ __record__id__: "registro2", CODPARC: 20, NOMEPARC: "Parceiro 20" }
|
|
111736
|
-
]);
|
|
111737
|
-
};
|
|
111738
|
-
this._dataUnit.metadata = {
|
|
111739
|
-
name: "Parceiro",
|
|
111740
|
-
label: "Parceiro",
|
|
111741
|
-
fields: [
|
|
111742
|
-
{
|
|
111743
|
-
name: "CODPARC",
|
|
111744
|
-
label: "Cód. Parceiro",
|
|
111745
|
-
dataType: index$1.DataType.NUMBER
|
|
111746
|
-
},
|
|
111747
|
-
{
|
|
111748
|
-
name: "NOMEPARC",
|
|
111749
|
-
label: "Nome Parceiro",
|
|
111750
|
-
dataType: index$1.DataType.TEXT
|
|
111751
|
-
}
|
|
111752
|
-
]
|
|
111753
|
-
};
|
|
111754
|
-
}
|
|
111755
|
-
render() {
|
|
111756
|
-
return (index.h("section", { class: "padding--large" }, index.h("div", { class: "row margin-bottom--large" }, index.h("h1", { class: "title title--primary" }, "Formul\u00E1rios")), index.h("div", { class: "col col--sd-12", style: { height: "600px" } }, index.h("ez-grid", { dataUnit: this._dataUnit, "server-url": "https://www.ag-grid.com/example-assets/row-data.json", "multiple-selection": true, "page-size": "100" }))));
|
|
111757
|
-
}
|
|
111758
|
-
};
|
|
111759
|
-
TestDu.style = testDuCss;
|
|
111760
|
-
|
|
111761
|
-
exports.ez_button = EzButton;
|
|
111762
|
-
exports.ez_check = EzCheck;
|
|
111763
110375
|
exports.ez_grid = EzGrid;
|
|
111764
|
-
exports.ez_icon = EzIcon;
|
|
111765
|
-
exports.ez_list = EzList;
|
|
111766
|
-
exports.ez_modal = EzModal;
|
|
111767
|
-
exports.ez_tabselector = EzTabselector;
|
|
111768
|
-
exports.ez_text_input = EzTextInput;
|
|
111769
|
-
exports.grid_config = GridConfig;
|
|
111770
|
-
exports.select_box = SelectBox;
|
|
111771
|
-
exports.test_du = TestDu;
|