@sankhyalabs/ezui 1.1.127 → 1.1.130
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ez-button.cjs.entry.js +10 -12
- package/dist/cjs/ez-calendar.cjs.entry.js +8 -8
- package/dist/cjs/ez-collapsible-box.cjs.entry.js +4 -4
- package/dist/cjs/ez-combo-box.cjs.entry.js +9 -9
- package/dist/cjs/ez-form.cjs.entry.js +12 -12
- package/dist/cjs/ez-grid.cjs.entry.js +4 -4
- package/dist/cjs/ez-tabselector.cjs.entry.js +2 -2
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/grid-config.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/select-box.cjs.entry.js +1 -1
- package/dist/collection/components/ez-button/ez-button.css +73 -28
- package/dist/collection/components/ez-button/ez-button.js +15 -18
- package/dist/collection/components/ez-calendar/ez-calendar.css +2 -1
- package/dist/collection/components/ez-calendar/ez-calendar.js +7 -7
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +2 -1
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js +8 -8
- package/dist/collection/components/ez-combo-box/ez-combo-box.css +17 -64
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +11 -9
- package/dist/collection/components/ez-form/fieldbuilder/tpl/CheckBox.tpl.js +1 -1
- package/dist/collection/components/ez-form/fieldbuilder/tpl/ComboBox.tpl.js +1 -1
- package/dist/collection/components/ez-form/fieldbuilder/tpl/DateInput.tpl.js +3 -3
- package/dist/collection/components/ez-form/fieldbuilder/tpl/FileInput.tpl.js +1 -1
- package/dist/collection/components/ez-form/fieldbuilder/tpl/NumberInput.tpl.js +1 -1
- package/dist/collection/components/ez-form/fieldbuilder/tpl/SearchInput.tpl.js +1 -1
- package/dist/collection/components/ez-form/fieldbuilder/tpl/TextArea.tpl.js +1 -1
- package/dist/collection/components/ez-form/fieldbuilder/tpl/TextInput.tpl.js +1 -1
- package/dist/collection/components/ez-form/structure/FormSheet.js +2 -2
- package/dist/collection/components/ez-grid/ez-grid.js +7 -7
- package/dist/collection/components/ez-grid/subcomponents/gridconfig/grid-config.js +1 -1
- package/dist/collection/components/ez-grid/subcomponents/select-box/select-box.js +1 -1
- package/dist/collection/components/ez-tabselector/ez-tabselector.css +1 -1
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +1 -1
- package/dist/custom-elements/index.js +51 -53
- package/dist/esm/ez-button.entry.js +10 -12
- package/dist/esm/ez-calendar.entry.js +8 -8
- package/dist/esm/ez-collapsible-box.entry.js +4 -4
- package/dist/esm/ez-combo-box.entry.js +9 -9
- package/dist/esm/ez-form.entry.js +12 -12
- package/dist/esm/ez-grid.entry.js +4 -4
- package/dist/esm/ez-tabselector.entry.js +2 -2
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/grid-config.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/select-box.entry.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-27db8fba.entry.js +1 -0
- package/dist/ezui/{p-248d8511.entry.js → p-2d165ca8.entry.js} +1 -1
- package/dist/ezui/p-47fe4273.entry.js +1 -0
- package/dist/ezui/p-593a17e7.entry.js +1 -0
- package/dist/ezui/p-5b7405e8.entry.js +1 -0
- package/dist/ezui/p-66adbed5.entry.js +1 -0
- package/dist/ezui/{p-b59ab2d5.entry.js → p-6d39b7ea.entry.js} +1 -1
- package/dist/ezui/p-6e844308.entry.js +1 -0
- package/dist/ezui/p-ef17f443.entry.js +1 -0
- package/dist/types/components/ez-button/ez-button.d.ts +3 -3
- package/dist/types/components/ez-collapsible-box/ez-collapsible-box.d.ts +2 -3
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +2 -1
- package/dist/types/components.d.ts +12 -12
- package/package.json +1 -1
- package/dist/ezui/p-1c28d99b.entry.js +0 -1
- package/dist/ezui/p-35edc488.entry.js +0 -1
- package/dist/ezui/p-495cdb4c.entry.js +0 -1
- package/dist/ezui/p-7d5657c7.entry.js +0 -1
- package/dist/ezui/p-7df61f4a.entry.js +0 -1
- package/dist/ezui/p-7f87f762.entry.js +0 -1
- package/dist/ezui/p-cf8309fc.entry.js +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export const buildSearch = ({ name, label, readOnly, required }) => {
|
|
3
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
3
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
4
4
|
h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
|
|
5
5
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export const buildTextArea = ({ name, label, readOnly }) => {
|
|
3
|
-
return (h("div", { class: "col col--sd-12 padding-horizontal--small", key: name },
|
|
3
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
|
|
4
4
|
h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
|
|
5
5
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
export const buildTextInput = ({ name, label }) => {
|
|
3
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
3
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
4
4
|
h("ez-text-input", { label: label, "data-field-name": name, key: name })));
|
|
5
5
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { FormItem } from "./FormItem";
|
|
3
3
|
export const FormSheet = ({ store, source }) => {
|
|
4
|
-
return (h("div", { class: "dynamic-content box__container" },
|
|
5
|
-
h("div", { class: "row padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
|
|
4
|
+
return (h("div", { class: "dynamic-content ez-box__container" },
|
|
5
|
+
h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
|
|
6
6
|
};
|
|
@@ -171,11 +171,11 @@ export class EzGrid {
|
|
|
171
171
|
return null;
|
|
172
172
|
}
|
|
173
173
|
return [
|
|
174
|
-
h("div", { class: "text text--primary text--medium margin-right--medium" },
|
|
175
|
-
h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
|
|
174
|
+
h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" },
|
|
175
|
+
h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`),
|
|
176
176
|
` de ${this._navigationTotalRows}`),
|
|
177
|
-
h("ez-button", { size: "small", iconName: "chevron-left", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
|
|
178
|
-
h("ez-button", { size: "small", iconName: "chevron-right", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
|
|
177
|
+
h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
|
|
178
|
+
h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
|
|
179
179
|
];
|
|
180
180
|
}
|
|
181
181
|
applyConfig(config) {
|
|
@@ -192,13 +192,13 @@ export class EzGrid {
|
|
|
192
192
|
}
|
|
193
193
|
render() {
|
|
194
194
|
return (h(Host, null,
|
|
195
|
-
h("div", { class: "box box--shadow padding--medium grid-header" },
|
|
195
|
+
h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" },
|
|
196
196
|
h("div", { class: "grid-header__container" },
|
|
197
197
|
h("slot", { name: "leftButtons" })),
|
|
198
198
|
h("div", { class: "grid-header__container" },
|
|
199
199
|
this.getPaginationControl(),
|
|
200
|
-
h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))),
|
|
201
|
-
h("div", { class: "grid__container
|
|
200
|
+
h("ez-button", { size: "small", iconName: "settings", class: "ez-button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))),
|
|
201
|
+
h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }),
|
|
202
202
|
h("div", { class: "grid__footer" }),
|
|
203
203
|
h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false },
|
|
204
204
|
h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.applyConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeConfig() }))));
|
|
@@ -395,7 +395,7 @@ export class GridConfig {
|
|
|
395
395
|
h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })),
|
|
396
396
|
h("div", { class: "grid-config__footer" },
|
|
397
397
|
h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }),
|
|
398
|
-
h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));
|
|
398
|
+
h("ez-button", { label: "Concluir", class: "ez-button--primary", onClick: () => this.finish() }))));
|
|
399
399
|
}
|
|
400
400
|
static get is() { return "grid-config"; }
|
|
401
401
|
static get encapsulation() { return "scoped"; }
|
|
@@ -4,7 +4,7 @@ export class SelectBox {
|
|
|
4
4
|
this.selectedOption = { value: "na", label: "N/A" };
|
|
5
5
|
}
|
|
6
6
|
render() {
|
|
7
|
-
return (h("ez-combo-box", { class: "grid-config-combo inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true },
|
|
7
|
+
return (h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true },
|
|
8
8
|
h("option", { value: "na" }, "N/A"),
|
|
9
9
|
h("option", { value: "asc" }, "A-Z"),
|
|
10
10
|
h("option", { value: "desc" }, "Z-A")));
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
-webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.scroll.
|
|
36
|
+
.scroll.middle {
|
|
37
37
|
-webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -129,7 +129,7 @@ export class EzTabselector {
|
|
|
129
129
|
else {
|
|
130
130
|
this._forwardButton.classList.add("hidden");
|
|
131
131
|
}
|
|
132
|
-
const classNames = ["", "startHidden", "endHidden", "
|
|
132
|
+
const classNames = ["", "startHidden", "endHidden", "middle"];
|
|
133
133
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
134
134
|
classNames.forEach((name) => {
|
|
135
135
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -45,7 +45,7 @@ let EzApplication$1 = class extends HTMLElement$1 {
|
|
|
45
45
|
static get style() { return ezApplicationCss; }
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover
|
|
48
|
+
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
|
|
49
49
|
|
|
50
50
|
let EzButton$1 = class extends HTMLElement$1 {
|
|
51
51
|
constructor() {
|
|
@@ -60,10 +60,6 @@ let EzButton$1 = class extends HTMLElement$1 {
|
|
|
60
60
|
* Define o modo de uso do botão; opções: icon, link e regular
|
|
61
61
|
*/
|
|
62
62
|
this.mode = "regular";
|
|
63
|
-
/**
|
|
64
|
-
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
65
|
-
*/
|
|
66
|
-
this.size = "medium";
|
|
67
63
|
}
|
|
68
64
|
/**
|
|
69
65
|
* Realiza o foco no botão
|
|
@@ -77,8 +73,10 @@ let EzButton$1 = class extends HTMLElement$1 {
|
|
|
77
73
|
async setBlur() {
|
|
78
74
|
this._button.blur();
|
|
79
75
|
}
|
|
80
|
-
getIconSize() {
|
|
81
|
-
|
|
76
|
+
getIconSize(sizeParam = "medium") {
|
|
77
|
+
const sizeList = ["small", "medium", "large"];
|
|
78
|
+
const sizeLowerCase = this.size && this.size.toLowerCase();
|
|
79
|
+
return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
|
|
82
80
|
}
|
|
83
81
|
handleSlotChange(ev) {
|
|
84
82
|
const slot = ev.target;
|
|
@@ -93,33 +91,33 @@ let EzButton$1 = class extends HTMLElement$1 {
|
|
|
93
91
|
}
|
|
94
92
|
}
|
|
95
93
|
else {
|
|
96
|
-
content.style.setProperty(
|
|
94
|
+
content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
render() {
|
|
100
98
|
if (this.mode == "icon") {
|
|
101
|
-
return (h("button", { class: "icon " + this.
|
|
99
|
+
return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
102
100
|
if (!this.enabled)
|
|
103
101
|
evt.stopPropagation();
|
|
104
102
|
} })));
|
|
105
103
|
}
|
|
106
104
|
else if (this.mode == "label-icon") {
|
|
107
|
-
return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size:
|
|
105
|
+
return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
108
106
|
if (!this.enabled)
|
|
109
107
|
evt.stopPropagation();
|
|
110
108
|
} })), h("label", { title: this.label }, this.label)));
|
|
111
109
|
}
|
|
112
110
|
else if (this.mode == "link") {
|
|
113
|
-
return (h("a", { class: this.
|
|
111
|
+
return (h("a", { class: this.getIconSize(), ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
114
112
|
}
|
|
115
113
|
else {
|
|
116
|
-
return (h("button", { type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
114
|
+
return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
117
115
|
}
|
|
118
116
|
}
|
|
119
117
|
static get style() { return ezButtonCss; }
|
|
120
118
|
};
|
|
121
119
|
|
|
122
|
-
const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image: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>');--ez-calendar__nav-btn--next-image: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>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);padding:0px;font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;background-color:var(--ez-calendar__time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:136px;padding:0px;margin:0px;overflow:auto}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";
|
|
120
|
+
const ezCalendarCss = ":host{--ez-calendar--font-family:var(--font-pattern, Arial);--ez-calendar--color:var(--title--primary, #626e82);--ez-calendar--text-shadow:var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);--ez-calendar__body--background-color:var(--background--xlight, #FFF);--ez-calendar__time--background-color:var(--background--xlight, #FAFAFA);--ez-calendar__body--padding:var(--space--medium, 12px) var(--space--small, 6px);--ez-calendar__body--border-radius:var(--border--radius-medium, 12px);--ez-calendar__body--shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-container--z-index:var(--more-visible, 2);--ez-calendar__header-line--stroke:1px;--ez-calendar__header-line--color:var(--color--strokes, #C0C0C0);--ez-calendar__nav-btn--fill:var(--text--primary, #008561);--ez-calendar__nav-btn--hover--fill:var(--color--primary, #350404);--ez-calendar__nav-btn--width:10px;--ez-calendar__nav-btn--height:16px;--ez-calendar__nav-btn--previous-image: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>');--ez-calendar__nav-btn--next-image: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>');--ez-calendar__cell--margin:0px 1.5px;--ez-calendar__cell--width:var(--space--large, 24px);--ez-calendar__cell--padding:1.5px 0px;--ez-calendar__cell--border-radius:var(--border--radius-small, 6px);--ez-calendar__cell--over--background-color:var(--color--primary, #E2F4EF);--ez-calendar__cell--over--color:var(--color--primary-300, #008561);--ez-calendar__cell--outset--color:var(--color--disable-primary, #E5EAF0);--ez-calendar__cell--selected--background-color:var(--color--primary, #008561);--ez-calendar__cell--selected--color:var(--color--inverted, #FFF);--ez-calendar__btn-today--color:var(--color--primary);--ez-calendar__btn-today--hover--background-color:var(--color--primary-300, #E2F4EF);--ez-calendar__btn-today--border-radius:var(--border--radius-small, 6px);position:relative;display:flex;user-select:none}.calendar__container{display:flex;z-index:var(--more-visible, 2)}.calendar{z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-calendar__body--background-color);padding:var(--ez-calendar__body--padding);border-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__header{display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color)}.calendar__btn-next,.calendar__btn-previous{outline:none;border:none;background-color:unset;cursor:pointer;padding:0px}.calendar__btn-next::after,.calendar__btn-previous::after{content:'';display:flex;background-color:var(--ez-calendar__nav-btn--fill);width:var(--ez-calendar__nav-btn--width);height:var(--ez-calendar__nav-btn--height)}.calendar__btn-previous::after{-webkit-mask-image:var(--ez-calendar__nav-btn--previous-image);mask-image:var(--ez-calendar__nav-btn--previous-image)}.calendar__btn-next::after{-webkit-mask-image:var(--ez-calendar__nav-btn--next-image);mask-image:var(--ez-calendar__nav-btn--next-image)}.calendar__btn-next:hover::after,.calendar__btn-previous:hover::after{background-color:var(--ez-calendar__nav-btn--hover--fill)}.calendar__lbl-month{font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__line{display:flex;padding:0px;margin:0px}.calendar__cell{display:flex;justify-content:center;align-content:center;cursor:pointer;font-size:var(--text--extra-small, 10px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);padding:var(--ez-calendar__cell--padding);margin:var(--ez-calendar__cell--margin);min-width:var(--ez-calendar__cell--width);border-radius:var(--ez-calendar__cell--border-radius)}.calendar__cell:hover{background-color:var(--ez-calendar__cell--over--background-color);color:var(--ez-calendar__cell--over--color)}.calendar__cell--secondary{color:var(--ez-calendar__cell--outset--color)}.calendar__cell--unselectable:hover{background-color:unset;border-radius:unset;cursor:unset;color:var(--ez-calendar--color)}.calendar__cell--unselectable{font-weight:var(--text-weight--large, 600);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.calendar__cell--selected,.calendar__cell--selected:hover{background-color:var(--ez-calendar__cell--selected--background-color);color:var(--ez-calendar__cell--selected--color)}.calendar__footer{display:flex;flex-direction:column}.calendar__btn-today{border:none;background-color:unset;cursor:pointer;font-weight:var(--text-weight--large, 600);font-size:var(--title--extra-small, 12px);padding:0px;font-family:var(--ez-calendar--font-family);text-shadow:var(--ez-calendar--text-shadow);color:var(--ez-calendar__btn-today--color);border-radius:var(--ez-calendar__btn-today--border-radius)}.calendar__btn-today:hover{background-color:var(--ez-calendar__btn-today--hover--background-color)}section{display:flex}.calendar-time{margin-left:-10px;display:flex;flex-direction:column;padding:12px 0px 0px 10px;background-color:var(--ez-calendar__time--background-color);border-top-right-radius:var(--ez-calendar__body--border-radius);border-bottom-right-radius:var(--ez-calendar__body--border-radius);box-shadow:var(--ez-calendar__body--shadow)}.calendar__column{height:136px;padding:0px;margin:0px;overflow:auto}.calendar__column::-webkit-scrollbar{width:0px;max-width:0px;min-width:0px}.calendar-time__header{padding-left:var(--space--small, 6px);padding-right:var(--space--small, 6px);display:flex;justify-content:space-between;padding-bottom:var(--space--small, 6px);margin:0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);font-weight:var(--text-weight--extra-large, 700);font-size:var(--title--small, 14px);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow);border-bottom:solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);font-family:var(--ez-calendar--font-family);color:var(--ez-calendar--color);text-shadow:var(--ez-calendar--text-shadow)}.separatorTime{color:#A2ABB9;padding:0px 1px;line-height:16px;font-size:17px;font-weight:normal}.endHidden{-webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%)}.calendar__column .calendar__cell{margin:0px;padding:1.5px 1.5px}";
|
|
123
121
|
|
|
124
122
|
let EzCalendar$1 = class extends HTMLElement$1 {
|
|
125
123
|
constructor() {
|
|
@@ -291,7 +289,7 @@ let EzCalendar$1 = class extends HTMLElement$1 {
|
|
|
291
289
|
const firstDate = new Date();
|
|
292
290
|
firstDate.setTime(this._currentPosition.getTime());
|
|
293
291
|
firstDate.setDate(1 - firstDate.getDay());
|
|
294
|
-
return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
|
|
292
|
+
return (h("section", { ref: elem => this._container = elem }, h("div", { ref: elem => this._box = elem, class: "calendar__container" }, h("div", { class: "calendar" }, h("div", { class: "calendar__header" }, h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), h("div", { class: "calendar__body" }, h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => h("div", { "data-day": day, class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index => {
|
|
295
293
|
const date = new Date();
|
|
296
294
|
date.setTime(firstDate.getTime());
|
|
297
295
|
date.setDate(date.getDate() + offset + index);
|
|
@@ -308,25 +306,25 @@ let EzCalendar$1 = class extends HTMLElement$1 {
|
|
|
308
306
|
h("div", { class: "separatorTime" }, ":"), this.showSeconds &&
|
|
309
307
|
h("div", null, "S")), h("div", { class: "calendar__body ", style: { display: 'flex', paddingLeft: '12px', paddingRight: '12px' } }, h("div", { class: "calendar__column", ref: elem => this._hoursScroll = elem, onScroll: () => this.updateScroll(this._hoursScroll) }, this._hoursLabel.map((offset, index) => {
|
|
310
308
|
if (index === this.value.getHours()) {
|
|
311
|
-
return (h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
|
|
309
|
+
return (h("div", { style: { display: 'flex' }, ref: elem => this._hoursSelect = elem }, h("div", { "data-hour": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
|
|
312
310
|
}
|
|
313
311
|
else {
|
|
314
|
-
return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
|
|
312
|
+
return (h("div", { style: { display: 'flex' } }, h("div", { "data-hour": offset, class: "calendar__cell", onClick: () => this.selectHours(index) }, offset), h("div", { class: "separatorTime" }, ":")));
|
|
315
313
|
}
|
|
316
314
|
})), h("div", { class: "calendar__column", ref: elem => this._minutesScroll = elem, onScroll: () => this.updateScroll(this._minutesScroll) }, this._minutosLabel.map((offset, index) => {
|
|
317
315
|
if (index === this.value.getMinutes()) {
|
|
318
|
-
return (h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem }, h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
|
|
316
|
+
return (h("div", { style: { display: 'flex' }, ref: elem => this._minutesSelect = elem }, h("div", { "data-minute": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
|
|
319
317
|
}
|
|
320
318
|
else {
|
|
321
|
-
return (h("div", { style: { display: 'flex' } }, h("div", { class: "calendar__cell", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
|
|
319
|
+
return (h("div", { style: { display: 'flex' } }, h("div", { "data-minute": offset, class: "calendar__cell", onClick: () => this.selectMinutes(index) }, offset), this.showSeconds && h("div", { class: "separatorTime" }, ":")));
|
|
322
320
|
}
|
|
323
321
|
})), this.showSeconds &&
|
|
324
322
|
h("div", { class: "calendar__column", ref: elem => this._secondsScroll = elem, onScroll: () => this.updateScroll(this._secondsScroll) }, this._minutosLabel.map((offset, index) => {
|
|
325
323
|
if (index === this.value.getSeconds()) {
|
|
326
|
-
return (h("div", { class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
|
|
324
|
+
return (h("div", { "data-second": offset, class: "calendar__cell calendar__cell--selected", onClick: () => this.selectSeconds(index), ref: elem => this._secondsSelect = elem }, offset));
|
|
327
325
|
}
|
|
328
326
|
else {
|
|
329
|
-
return (h("div", { class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
|
|
327
|
+
return (h("div", { "data-second": offset, class: "calendar__cell", onClick: () => this.selectSeconds(index) }, offset));
|
|
330
328
|
}
|
|
331
329
|
})))))));
|
|
332
330
|
}
|
|
@@ -407,7 +405,7 @@ let EzCheck$1 = class extends HTMLElement$1 {
|
|
|
407
405
|
static get style() { return ezCheckCss; }
|
|
408
406
|
};
|
|
409
407
|
|
|
410
|
-
const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;margin-bottom:var(--space--medium, 12px)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition);--ez-icon--color:var(--ez-collapsible-box__icon--color, --ez-collapsible-box--color)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__content{display:flex;flex-wrap:wrap;
|
|
408
|
+
const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;margin-bottom:var(--space--medium, 12px)}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight);color:var(--ez-collapsible-box--color)}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition);--ez-icon--color:var(--ez-collapsible-box__icon--color, --ez-collapsible-box--color)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--stretched{width:100%;justify-content:space-between}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
|
|
411
409
|
|
|
412
410
|
let EzCollapsibleBox$1 = class extends HTMLElement$1 {
|
|
413
411
|
constructor() {
|
|
@@ -421,7 +419,6 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
|
|
|
421
419
|
this.value = false;
|
|
422
420
|
/**
|
|
423
421
|
* Define o tamanho do texto e do ícone do componente.
|
|
424
|
-
* Tamanhos suportados: "x-small", "small", "medium", "large" e "x-large".
|
|
425
422
|
*/
|
|
426
423
|
this.headerSize = "small";
|
|
427
424
|
/**
|
|
@@ -448,8 +445,9 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
|
|
|
448
445
|
getHeaderSize() {
|
|
449
446
|
const sizeAlias = ["xsmall", "xlarge"];
|
|
450
447
|
const sizeList = ["x-small", "small", "medium", "large", "x-large"];
|
|
451
|
-
const
|
|
452
|
-
|
|
448
|
+
const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
|
|
449
|
+
const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
|
|
450
|
+
return sizeList.includes(sizeCustom) ? sizeCustom : "small";
|
|
453
451
|
}
|
|
454
452
|
render() {
|
|
455
453
|
return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", { onClick: () => this.showHide(), class: "collapsible-box__title" +
|
|
@@ -480,7 +478,7 @@ class CSSVarsUtils {
|
|
|
480
478
|
}
|
|
481
479
|
}
|
|
482
480
|
|
|
483
|
-
const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn
|
|
481
|
+
const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--text--primary, #626e82);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #919191);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium));--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #000)}.list-container{position:relative;width:100%}.options-list{box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--ez-combo-box--background-color--xlight);padding:var(--ez-combo-box--space--small);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);scroll-behavior:smooth;max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small));overflow:auto}.item{text-align:left;display:flex;justify-content:space-between;align-items:center;border-radius:var(--ez-combo-box--border-radius-small);padding:0 var(--ez-combo-box--space--small);list-style-type:none;min-height:var(--ez-combo-box__list-height)}.item--label{text-align:left;flex-basis:85%;flex-grow:1;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item--value{text-align:right;flex-basis:15%;flex-grow:0;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large);font-family:var(--ez-combo-box--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{color:var(--ez-combo-box__btn-disabled--color);cursor:unset}.btn:disabled:hover{color:var(--ez-combo-box__btn-disabled--color);cursor:unset}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}";
|
|
484
482
|
|
|
485
483
|
let EzComboBox$1 = class extends HTMLElement$1 {
|
|
486
484
|
constructor() {
|
|
@@ -517,7 +515,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
|
|
|
517
515
|
*/
|
|
518
516
|
this.mode = "regular";
|
|
519
517
|
}
|
|
520
|
-
|
|
518
|
+
observerValue() {
|
|
521
519
|
if (this._inputElement) {
|
|
522
520
|
this._inputElement.value = this.getText();
|
|
523
521
|
}
|
|
@@ -633,7 +631,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
|
|
|
633
631
|
this.ezChange.emit(adjustedOpt);
|
|
634
632
|
}
|
|
635
633
|
else {
|
|
636
|
-
this.
|
|
634
|
+
this.observerValue();
|
|
637
635
|
}
|
|
638
636
|
}
|
|
639
637
|
updateSource(source) {
|
|
@@ -665,7 +663,7 @@ let EzComboBox$1 = class extends HTMLElement$1 {
|
|
|
665
663
|
this.selectOption(undefined);
|
|
666
664
|
}
|
|
667
665
|
else {
|
|
668
|
-
this.
|
|
666
|
+
this.observerValue();
|
|
669
667
|
}
|
|
670
668
|
}
|
|
671
669
|
//---------------------------------------------
|
|
@@ -705,6 +703,9 @@ let EzComboBox$1 = class extends HTMLElement$1 {
|
|
|
705
703
|
//---------------------------------------------
|
|
706
704
|
// Event handlers
|
|
707
705
|
//---------------------------------------------
|
|
706
|
+
handlerIconClick() {
|
|
707
|
+
this.searchMode ? this.loadOptions("ADVANCED") : this.showOptions();
|
|
708
|
+
}
|
|
708
709
|
onTextInputChangeHandler(event) {
|
|
709
710
|
if (!this._criteria) {
|
|
710
711
|
this._inputElement.value = event.data;
|
|
@@ -752,14 +753,11 @@ let EzComboBox$1 = class extends HTMLElement$1 {
|
|
|
752
753
|
this.cancelPreselection();
|
|
753
754
|
}
|
|
754
755
|
render() {
|
|
755
|
-
return (h(Host, null, h("ez-text-input", { class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._inputElement = elem, enabled: this.enabled && !this.suppressSearch, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, this.searchMode ?
|
|
756
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { this.loadOptions("ADVANCED"); }, slot: "leftIcon" })
|
|
757
|
-
:
|
|
758
|
-
h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-options", slot: "rightIcon", onClick: () => this.showOptions() })), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
|
|
756
|
+
return (h(Host, null, h("ez-text-input", { class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._inputElement = elem, enabled: this.enabled && !this.suppressSearch, onInput: evt => this.onTextInputChangeHandler(evt), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onEzChange: event => event.stopPropagation(), onKeyDown: event => this.keyDownHandler(event), label: this.label, value: this.getText(), canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { slot: "icon", "icon-name": this.searchMode ? "search" : "chevron-down" }))), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "options-list", ref: elem => this._optionsList = elem }, this._visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
|
|
759
757
|
}
|
|
760
758
|
get el() { return this; }
|
|
761
759
|
static get watchers() { return {
|
|
762
|
-
"value": ["
|
|
760
|
+
"value": ["observerValue"]
|
|
763
761
|
}; }
|
|
764
762
|
static get style() { return ezComboBoxCss; }
|
|
765
763
|
};
|
|
@@ -1161,12 +1159,12 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
|
|
|
1161
1159
|
};
|
|
1162
1160
|
|
|
1163
1161
|
const buildTextArea = ({ name, label, readOnly }) => {
|
|
1164
|
-
return (h("div", { class: "col col--sd-12 padding-horizontal--small", key: name },
|
|
1162
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name },
|
|
1165
1163
|
h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name })));
|
|
1166
1164
|
};
|
|
1167
1165
|
|
|
1168
1166
|
const buildTextInput = ({ name, label }) => {
|
|
1169
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
1167
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
1170
1168
|
h("ez-text-input", { label: label, "data-field-name": name, key: name })));
|
|
1171
1169
|
};
|
|
1172
1170
|
|
|
@@ -1177,7 +1175,7 @@ const buildCheckBox = (fieldConfig) => {
|
|
|
1177
1175
|
return buildField$1(fieldConfig.name, fieldConfig.label, fieldConfig.readOnly, false);
|
|
1178
1176
|
};
|
|
1179
1177
|
function buildField$1(fieldName, fieldLabel, readOnly, switchMode = false) {
|
|
1180
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 align--middle padding-horizontal--small padding-bottom--large" },
|
|
1178
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" },
|
|
1181
1179
|
h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? "switch" : "regular", "data-field-name": fieldName, key: fieldName })));
|
|
1182
1180
|
}
|
|
1183
1181
|
|
|
@@ -1191,30 +1189,30 @@ const buildComboBox = ({ name, label, readOnly, required }, properties) => {
|
|
|
1191
1189
|
else {
|
|
1192
1190
|
options = prop;
|
|
1193
1191
|
}
|
|
1194
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
1192
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
1195
1193
|
h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name, options: options })));
|
|
1196
1194
|
};
|
|
1197
1195
|
|
|
1198
1196
|
const buildSearch = ({ name, label, readOnly, required }) => {
|
|
1199
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
1197
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
1200
1198
|
h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, key: name })));
|
|
1201
1199
|
};
|
|
1202
1200
|
|
|
1203
1201
|
const buildFile = ({ name, label, readOnly }) => {
|
|
1204
|
-
return (h("div", { class: "col col--sd-12 padding-horizontal--small" },
|
|
1202
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" },
|
|
1205
1203
|
h("ez-upload", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
|
|
1206
1204
|
};
|
|
1207
1205
|
|
|
1208
1206
|
const buildDate = ({ name, label, readOnly }) => {
|
|
1209
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
1207
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
1210
1208
|
h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name })));
|
|
1211
1209
|
};
|
|
1212
1210
|
const buildTime = ({ name, label }) => {
|
|
1213
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
1211
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
1214
1212
|
h("ez-time-input", { label: label, "data-field-name": name, key: name })));
|
|
1215
1213
|
};
|
|
1216
1214
|
const buildTimeDate = ({ name, label }) => {
|
|
1217
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
1215
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
1218
1216
|
h("ez-date-time-input", { label: label, "data-field-name": name, key: name })));
|
|
1219
1217
|
};
|
|
1220
1218
|
|
|
@@ -1227,7 +1225,7 @@ const buildInteger = ({ name, label, readOnly }) => {
|
|
|
1227
1225
|
return buildNumeric(name, label, readOnly, 0, 0);
|
|
1228
1226
|
};
|
|
1229
1227
|
function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision) {
|
|
1230
|
-
return (h("div", { class: "col col--sd-12 col--tb-3 padding-horizontal--small" },
|
|
1228
|
+
return (h("div", { class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-padding-horizontal--small" },
|
|
1231
1229
|
h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, key: fieldName })));
|
|
1232
1230
|
}
|
|
1233
1231
|
|
|
@@ -1284,8 +1282,8 @@ const FormItem = ({ source }) => {
|
|
|
1284
1282
|
};
|
|
1285
1283
|
|
|
1286
1284
|
const FormSheet = ({ store, source }) => {
|
|
1287
|
-
return (h("div", { class: "dynamic-content box__container" },
|
|
1288
|
-
h("div", { class: "row padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
|
|
1285
|
+
return (h("div", { class: "dynamic-content ez-box__container" },
|
|
1286
|
+
h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
|
|
1289
1287
|
};
|
|
1290
1288
|
|
|
1291
1289
|
class FormMetadata {
|
|
@@ -112693,9 +112691,9 @@ let EzGrid$1 = class extends HTMLElement$1 {
|
|
|
112693
112691
|
return null;
|
|
112694
112692
|
}
|
|
112695
112693
|
return [
|
|
112696
|
-
h("div", { class: "text text--primary text--medium margin-right--medium" }, h("strong", { class: "text text--primary text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
|
|
112697
|
-
h("ez-button", { size: "small", iconName: "chevron-left", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
|
|
112698
|
-
h("ez-button", { size: "small", iconName: "chevron-right", class: "margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
|
|
112694
|
+
h("div", { class: "ez-text ez-text--primary ez-text--medium ez-margin-right--medium" }, h("strong", { class: "ez-text ez-text--primary ez-text--medium" }, `${this._navigationFirstRow}-${this._navigationLastRow}`), ` de ${this._navigationTotalRows}`),
|
|
112695
|
+
h("ez-button", { size: "small", iconName: "chevron-left", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasPrevious, onClick: () => this._gridController.previousPage(), label: "P\u00E1gina anterior" }),
|
|
112696
|
+
h("ez-button", { size: "small", iconName: "chevron-right", class: "ez-margin-right--medium", mode: "icon", enabled: this._navigationHasNext, onClick: () => this._gridController.nextPage(), label: "Pr\u00F3xima P\u00E1gina" })
|
|
112699
112697
|
];
|
|
112700
112698
|
}
|
|
112701
112699
|
applyConfig(config) {
|
|
@@ -112711,7 +112709,7 @@ let EzGrid$1 = class extends HTMLElement$1 {
|
|
|
112711
112709
|
this._popUpVisible = true;
|
|
112712
112710
|
}
|
|
112713
112711
|
render() {
|
|
112714
|
-
return (h(Host, null, h("div", { class: "box box--shadow padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container" }, this.getPaginationControl(), h("ez-button", { size: "small", iconName: "settings", class: "button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))), h("div", { class: "grid__container
|
|
112712
|
+
return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container" }, this.getPaginationControl(), h("ez-button", { size: "small", iconName: "settings", class: "ez-button--secondary", mode: "icon", onClick: () => { this.openConfig(); } }))), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" }), h("ez-modal", { modalSize: "small", closeEsc: true, closeOutsideClick: true, opened: this._popUpVisible, onEzCloseModal: () => this._popUpVisible = false }, h("grid-config", { ref: ref => this._gridConfig = ref, config: this.config, selectedTab: "Colunas", onConfigFinish: evt => { this.applyConfig(evt.detail); this.configChange.emit(evt.detail); }, onConfigCancel: _evt => this.closeConfig() }))));
|
|
112715
112713
|
}
|
|
112716
112714
|
static get assetsDirs() { return ["../assets"]; }
|
|
112717
112715
|
static get watchers() { return {
|
|
@@ -113741,7 +113739,7 @@ let EzSearch$1 = class extends HTMLElement$1 {
|
|
|
113741
113739
|
static get style() { return ezSearchCss; }
|
|
113742
113740
|
};
|
|
113743
113741
|
|
|
113744
|
-
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.
|
|
113742
|
+
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.middle{-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}";
|
|
113745
113743
|
|
|
113746
113744
|
let EzTabselector$1 = class extends HTMLElement$1 {
|
|
113747
113745
|
constructor() {
|
|
@@ -113877,7 +113875,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
|
|
|
113877
113875
|
else {
|
|
113878
113876
|
this._forwardButton.classList.add("hidden");
|
|
113879
113877
|
}
|
|
113880
|
-
const classNames = ["", "startHidden", "endHidden", "
|
|
113878
|
+
const classNames = ["", "startHidden", "endHidden", "middle"];
|
|
113881
113879
|
const currentClass = classNames[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
113882
113880
|
classNames.forEach((name) => {
|
|
113883
113881
|
if (name !== currentClass && container.classList.contains(name)) {
|
|
@@ -115225,7 +115223,7 @@ let GridConfig$1 = class extends HTMLElement$1 {
|
|
|
115225
115223
|
}
|
|
115226
115224
|
}
|
|
115227
115225
|
render() {
|
|
115228
|
-
return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', image: getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: 0, onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o das linhas' })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", href: getSpritePath("search") })))), h("div", { class: "grid-config__main" }, 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 }), h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }), h("ez-button", { label: "Concluir", class: "button--primary", onClick: () => this.finish() }))));
|
|
115226
|
+
return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, "Configura\u00E7\u00E3o da Grade"), h("label", { class: "subtitle" }, "Defina visibilidade e ordem das colunas.")), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', image: getSpritePath("close"), size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedTab: this.selectedTab, selectedIndex: 0, onEzChange: (ev) => { this.handleTabChange(ev); }, tabs: 'Colunas, Ordena\u00E7\u00E3o das linhas' })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: "Localizar coluna", onKeyUp: evt => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", href: getSpritePath("search") })))), h("div", { class: "grid-config__main" }, 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 }), h("div", { class: this.selectedTab === "Ordenação das linhas" ? "group-name" : "hidden" }, "Sequ\u00EAncia da ordena\u00E7\u00E3o"), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedTab === "Ordenação das linhas" ? "heigth-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: ev => this.handleOrderListChange(ev), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: "Cancelar", onClick: () => this.closeConfig() }), h("ez-button", { label: "Concluir", class: "ez-button--primary", onClick: () => this.finish() }))));
|
|
115229
115227
|
}
|
|
115230
115228
|
static get assetsDirs() { return ["../assets"]; }
|
|
115231
115229
|
static get style() { return gridConfigCss; }
|
|
@@ -115242,7 +115240,7 @@ let SelectBox$1 = class extends HTMLElement$1 {
|
|
|
115242
115240
|
this.selectedOption = { value: "na", label: "N/A" };
|
|
115243
115241
|
}
|
|
115244
115242
|
render() {
|
|
115245
|
-
return (h("ez-combo-box", { class: "grid-config-combo inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true }, h("option", { value: "na" }, "N/A"), h("option", { value: "asc" }, "A-Z"), h("option", { value: "desc" }, "Z-A")));
|
|
115243
|
+
return (h("ez-combo-box", { class: "grid-config-combo ez-input--inverted", label: "", suppressSearch: true, value: this.selectedOption, enabled: true, canShowError: false, suppressEmptyOption: true }, h("option", { value: "na" }, "N/A"), h("option", { value: "asc" }, "A-Z"), h("option", { value: "desc" }, "Z-A")));
|
|
115246
115244
|
}
|
|
115247
115245
|
static get assetsDirs() { return ["../assets"]; }
|
|
115248
115246
|
static get style() { return selectBoxCss; }
|