@sankhyalabs/ezui 2.14.4 → 2.15.0
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/EzScrollDirection-b2c99895.js +8 -0
- package/dist/cjs/ez-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/{ez-filter-input_3.cjs.entry.js → ez-filter-input_4.cjs.entry.js} +197 -1
- package/dist/cjs/ez-guide-navigator.cjs.entry.js +3 -2
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-dropdown/ez-dropdown.js +2 -2
- package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.css +19 -10
- package/dist/collection/components/ez-guide-navigator/ez-guide-navigator.js +3 -1
- package/dist/collection/components/ez-scroller/ez-scroller.css +1 -5
- package/dist/collection/components/ez-tree/ez-tree.css +3 -0
- package/dist/custom-elements/index.js +13 -13
- package/dist/esm/EzScrollDirection-2df26c93.js +8 -0
- package/dist/esm/ez-dropdown.entry.js +2 -2
- package/dist/esm/{ez-filter-input_3.entry.js → ez-filter-input_4.entry.js} +199 -4
- package/dist/esm/ez-guide-navigator.entry.js +3 -2
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-43d281a7.entry.js +1 -0
- package/dist/ezui/p-6414e7cb.entry.js +1 -0
- package/dist/ezui/p-98bb8b16.js +1 -0
- package/dist/ezui/p-cc038b32.entry.js +1 -0
- package/package.json +1 -1
- package/dist/cjs/ez-scroller.cjs.entry.js +0 -209
- package/dist/esm/ez-scroller.entry.js +0 -205
- package/dist/ezui/p-73eb147d.entry.js +0 -1
- package/dist/ezui/p-91f8c816.entry.js +0 -1
- package/dist/ezui/p-ac7f2170.entry.js +0 -1
- package/dist/ezui/p-ca8f7199.entry.js +0 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
exports.EzScrollDirection = void 0;
|
|
4
|
+
(function (EzScrollDirection) {
|
|
5
|
+
EzScrollDirection["HORIZONTAL"] = "horizontal";
|
|
6
|
+
EzScrollDirection["VERTICAL"] = "vertical";
|
|
7
|
+
EzScrollDirection["BOTH"] = "both";
|
|
8
|
+
})(exports.EzScrollDirection || (exports.EzScrollDirection = {}));
|
|
@@ -396,7 +396,7 @@ let EzDropdown = class {
|
|
|
396
396
|
!isLockedLevels &&
|
|
397
397
|
hasChildren &&
|
|
398
398
|
index.h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
|
|
399
|
-
: index.h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownDivider` })));
|
|
399
|
+
: index.h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
|
|
400
400
|
});
|
|
401
401
|
}
|
|
402
402
|
renderDropdown(branchItems = this.items, level = 1) {
|
|
@@ -412,7 +412,7 @@ let EzDropdown = class {
|
|
|
412
412
|
return (index.h("div", Object.assign({ class: "ez-dropdown__group" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownGroup`) }), groupLabel !== "noGroup" &&
|
|
413
413
|
index.h("label", { class: "ez-dropdown__group-label", title: groupLabel }, groupLabel), hasGroup &&
|
|
414
414
|
groupLabel === "noGroup" &&
|
|
415
|
-
index.h("hr", { class: "ez-dropdown__divider" }), this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
|
|
415
|
+
index.h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [core.ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: core.ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownDivider`) })), this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
|
|
416
416
|
}))));
|
|
417
417
|
}
|
|
418
418
|
hasOpenedSubmenu(level) {
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-5e208fa5.js');
|
|
6
6
|
const core = require('@sankhyalabs/core');
|
|
7
7
|
const CSSVarsUtils = require('./CSSVarsUtils-af809e73.js');
|
|
8
|
+
const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
|
|
8
9
|
|
|
9
10
|
const ezFilterInputCss = ":host{display:block;width:100%}";
|
|
10
11
|
|
|
@@ -78,6 +79,200 @@ let EzFilterInput = class {
|
|
|
78
79
|
};
|
|
79
80
|
EzFilterInput.style = ezFilterInputCss;
|
|
80
81
|
|
|
82
|
+
const ezScrollerCss = ":host{--ez-scroller--box-shadow-color:var(--background--body, #fafcff);--ez-scroller__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-scroller__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-scroller__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-scroller__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-scroller__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-scroller__scrollbar--width:var(--space--small, 6px);display:flex;cursor:grab;width:100%;overflow:hidden}.dragging{cursor:grabbing}.ez-scroller__container{display:flex;overflow-y:hidden;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked),.ez-scroller__container:not(.ez-scroller__container--locked):hover{scrollbar-color:var(--ez-scroller__scrollbar--color-clicked) var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container--both{overflow-y:scroll;overflow-x:scroll;flex-wrap:wrap}.ez-scroller__container--horizontal{overflow-x:scroll;flex-direction:row}.ez-scroller__container--vertical{overflow-y:scroll;flex-direction:column}.ez-scroller__container::-webkit-scrollbar{background-color:transparent;width:var(--ez-scroller__scrollbar--width);height:var(--ez-scroller__scrollbar--width);max-width:var(--ez-scroller__scrollbar--width);min-width:var(--ez-scroller__scrollbar--width)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-track{visibility:hidden;background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-track,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-track{background-color:var(--ez-scroller__scrollbar--color-background)}.ez-scroller__container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--ez-scroller__scrollbar--border-radius)}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb{background-color:var(--ez-scroller__scrollbar--color-default)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:hover,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-scroller__scrollbar--color-hover)}.ez-scroller__container::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container::-webkit-scrollbar-thumb:horizontal:active{background-color:transparent}.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container--both:not(.ez-scroller__container--locked)::-webkit-scrollbar-thumb:horizontal:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:vertical:active,.ez-scroller__container:not(.ez-scroller__container--locked):hover::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-scroller__scrollbar--color-clicked)}.ez-scroller__wrapper{display:flex;position:relative;width:100%;height:auto}.ez-scroller__wrapper--horizontal{flex-direction:row}.ez-scroller__wrapper--vertical{flex-direction:column}.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--shadow-end::after{content:\"\";display:flex;position:absolute;z-index:1}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{width:24px;min-height:calc(100% - 10px)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-start::before{left:0;background:linear-gradient(to right, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--horizontal.ez-scroller__wrapper--shadow-end::after{right:0;background:linear-gradient(to left, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before,.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{min-width:calc(100% - 10px);height:24px}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-start::before{top:0;background:linear-gradient(to bottom, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}.ez-scroller__wrapper--vertical.ez-scroller__wrapper--shadow-end::after{bottom:0;background:linear-gradient(to top, var(--ez-scroller--box-shadow-color) 20%, transparent 80%)}";
|
|
83
|
+
|
|
84
|
+
let EzScroller = class {
|
|
85
|
+
constructor(hostRef) {
|
|
86
|
+
index.registerInstance(this, hostRef);
|
|
87
|
+
this._shadowStart = "ez-scroller__wrapper--shadow-start";
|
|
88
|
+
this._shadowEnd = "ez-scroller__wrapper--shadow-end";
|
|
89
|
+
this.isActive = false;
|
|
90
|
+
/**
|
|
91
|
+
* Define se o `scroll` estará bloqueado.
|
|
92
|
+
*/
|
|
93
|
+
this.locked = false;
|
|
94
|
+
/**
|
|
95
|
+
* Define se haverá efeito de sombreado.
|
|
96
|
+
*/
|
|
97
|
+
this.activeShadow = false;
|
|
98
|
+
}
|
|
99
|
+
//---------------------------------------------
|
|
100
|
+
// Private methods
|
|
101
|
+
//---------------------------------------------
|
|
102
|
+
getContainerClass() {
|
|
103
|
+
return `ez-scroller__container ez-scroller__container--${this.direction}
|
|
104
|
+
${this.locked || !this.isActive ? " ez-scroller__container--locked" : ""}
|
|
105
|
+
`;
|
|
106
|
+
}
|
|
107
|
+
getWrapperClass() {
|
|
108
|
+
return `ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`;
|
|
109
|
+
}
|
|
110
|
+
finishDrag() {
|
|
111
|
+
if (this._controller) {
|
|
112
|
+
this._container.classList.remove("dragging");
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
updateScroller() {
|
|
116
|
+
const container = this._container;
|
|
117
|
+
if (container == undefined) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
let remainingScroll;
|
|
121
|
+
if (this.direction === EzScrollDirection.EzScrollDirection.HORIZONTAL) {
|
|
122
|
+
const { scrollWidth, clientWidth, scrollLeft } = container;
|
|
123
|
+
remainingScroll = scrollWidth - clientWidth - Math.ceil(scrollLeft);
|
|
124
|
+
this._startHidden = container.scrollLeft > 0;
|
|
125
|
+
}
|
|
126
|
+
else if (this.direction === EzScrollDirection.EzScrollDirection.VERTICAL) {
|
|
127
|
+
const { scrollHeight, clientHeight, scrollTop } = container;
|
|
128
|
+
remainingScroll = scrollHeight - clientHeight - Math.ceil(scrollTop);
|
|
129
|
+
this._startHidden = container.scrollTop > 0;
|
|
130
|
+
}
|
|
131
|
+
this._endHidden = remainingScroll > 0;
|
|
132
|
+
this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
|
|
133
|
+
this.updateShadow();
|
|
134
|
+
}
|
|
135
|
+
updateShadow() {
|
|
136
|
+
const wrapper = this._wrapper;
|
|
137
|
+
if (!this.activeShadow || wrapper == undefined) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
const shadowPositions = ["", "start", "end", "middle"];
|
|
141
|
+
const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
|
|
142
|
+
if (currentPosition === "start") {
|
|
143
|
+
wrapper.classList.add(this._shadowStart);
|
|
144
|
+
wrapper.classList.remove(this._shadowEnd);
|
|
145
|
+
}
|
|
146
|
+
else if (currentPosition === "end") {
|
|
147
|
+
wrapper.classList.remove(this._shadowStart);
|
|
148
|
+
wrapper.classList.add(this._shadowEnd);
|
|
149
|
+
}
|
|
150
|
+
else if (currentPosition === "middle") {
|
|
151
|
+
wrapper.classList.add(this._shadowStart);
|
|
152
|
+
wrapper.classList.add(this._shadowEnd);
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
wrapper.classList.remove(this._shadowStart);
|
|
156
|
+
wrapper.classList.remove(this._shadowEnd);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
configResize() {
|
|
160
|
+
const container = this._container;
|
|
161
|
+
if (container == undefined) {
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
if (this._resizeObserver != undefined) {
|
|
165
|
+
this._resizeObserver.unobserve(container);
|
|
166
|
+
}
|
|
167
|
+
this._resizeObserver = new ResizeObserver(core.JSUtils.debounce(this.updateScroller.bind(this), 200));
|
|
168
|
+
this._resizeObserver.observe(container);
|
|
169
|
+
}
|
|
170
|
+
getContainerElement() {
|
|
171
|
+
return index.h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, index.h("slot", null));
|
|
172
|
+
}
|
|
173
|
+
isActiveScroller() {
|
|
174
|
+
if (this._container == undefined) {
|
|
175
|
+
return false;
|
|
176
|
+
}
|
|
177
|
+
return this._container.scrollWidth > this._container.clientWidth
|
|
178
|
+
|| this._container.scrollHeight > this._container.clientHeight;
|
|
179
|
+
}
|
|
180
|
+
//---------------------------------------------
|
|
181
|
+
// Event handlers
|
|
182
|
+
//---------------------------------------------
|
|
183
|
+
clickListener(evt) {
|
|
184
|
+
if (this._controller && this._controller.didScroll()) {
|
|
185
|
+
evt.preventDefault();
|
|
186
|
+
evt.stopPropagation();
|
|
187
|
+
evt.stopImmediatePropagation();
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
mouseDownHandler(evt) {
|
|
191
|
+
if (this.locked) {
|
|
192
|
+
this.finishDrag();
|
|
193
|
+
return;
|
|
194
|
+
}
|
|
195
|
+
if (!this._controller) {
|
|
196
|
+
this._controller = new ScrollCtrl(this._container);
|
|
197
|
+
}
|
|
198
|
+
this._controller.startDragg(evt);
|
|
199
|
+
this._container.classList.add("dragging");
|
|
200
|
+
}
|
|
201
|
+
mouseUpHandler() {
|
|
202
|
+
this.finishDrag();
|
|
203
|
+
}
|
|
204
|
+
mouseMoveHandler(evt) {
|
|
205
|
+
if (this.locked) {
|
|
206
|
+
this.finishDrag();
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
if (this._controller) {
|
|
210
|
+
if (evt.buttons === 0) {
|
|
211
|
+
this.finishDrag();
|
|
212
|
+
}
|
|
213
|
+
else {
|
|
214
|
+
this._controller.doScroll(evt);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
componentDidRender() {
|
|
219
|
+
var _a, _b;
|
|
220
|
+
if (this._container == undefined) {
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
if (this.direction === EzScrollDirection.EzScrollDirection.BOTH) {
|
|
224
|
+
(_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
|
|
225
|
+
(_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
|
|
226
|
+
this.isActive = this.isActiveScroller();
|
|
227
|
+
return;
|
|
228
|
+
}
|
|
229
|
+
this._container.onscroll = this.updateScroller.bind(this);
|
|
230
|
+
this.configResize();
|
|
231
|
+
this.updateScroller();
|
|
232
|
+
}
|
|
233
|
+
render() {
|
|
234
|
+
return (index.h(index.Host, null, this.activeShadow
|
|
235
|
+
? index.h("div", { ref: ref => this._wrapper = ref, class: this.getWrapperClass() }, this.getContainerElement())
|
|
236
|
+
: this.getContainerElement()));
|
|
237
|
+
}
|
|
238
|
+
};
|
|
239
|
+
class ScrollCtrl {
|
|
240
|
+
constructor(scrollablePanel) {
|
|
241
|
+
this.scrollablePanel = scrollablePanel;
|
|
242
|
+
}
|
|
243
|
+
startDragg(evt) {
|
|
244
|
+
this.startX = this.measureX(evt);
|
|
245
|
+
this.startY = this.measureY(evt);
|
|
246
|
+
this.scrollWidth = 0;
|
|
247
|
+
this.scrollHeight = 0;
|
|
248
|
+
}
|
|
249
|
+
measureX(e) {
|
|
250
|
+
return e.pageX - this.scrollablePanel.offsetLeft;
|
|
251
|
+
}
|
|
252
|
+
measureY(e) {
|
|
253
|
+
return e.pageY - this.scrollablePanel.offsetTop;
|
|
254
|
+
}
|
|
255
|
+
doScroll(e) {
|
|
256
|
+
const x = this.measureX(e);
|
|
257
|
+
const y = this.measureY(e);
|
|
258
|
+
if (x != this.startX || y != this.startY) {
|
|
259
|
+
const scrollX = x - this.startX;
|
|
260
|
+
const scrollY = y - this.startY;
|
|
261
|
+
this.startX += scrollX;
|
|
262
|
+
this.startY += scrollY;
|
|
263
|
+
this.scrollWidth += Math.abs(scrollX);
|
|
264
|
+
this.scrollHeight += Math.abs(scrollY);
|
|
265
|
+
this.scrollablePanel.scrollLeft = Math.max(0, this.scrollablePanel.scrollLeft - scrollX);
|
|
266
|
+
this.scrollablePanel.scrollTop = Math.max(0, this.scrollablePanel.scrollTop - scrollY);
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
didScroll() {
|
|
270
|
+
const tollerance = 5;
|
|
271
|
+
return this.scrollHeight > tollerance || this.scrollWidth > tollerance;
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
EzScroller.style = ezScrollerCss;
|
|
275
|
+
|
|
81
276
|
const ezSidebarButtonCss = ":host{--ez-sidebar-button--width:6px;--ez-sidebar-button--hover--width:12px;--ez-sidebar-button--height:96px;--ez-sidebar-button--background-color--xlight:var(--background--xlight, #fff);--ez-sidebar-button--background-color--primary:var(--color--primary);--ez-sidebar-button--space--small:var(--space--small, 6px);--ez-sidebar-button--space--medium:var(--space--medium, 12px);--ez-sidebar-button--box-shadow:var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));--ez-sidebar-button--hover--box-shadow:var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));--ez-sidebar-button--border--radius-small:var(--border--radius-small);--ez-sidebar-button--border--radius-medium:var(--border--radius-medium)}button{display:flex;background:var(--ez-sidebar-button--background-color--xlight);border:0;border-radius:0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;box-shadow:var(--ez-sidebar-button--box-shadow);padding:0;cursor:pointer}span{width:var(--ez-sidebar-button--width);height:var(--ez-sidebar-button--height);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;background:var(--ez-sidebar-button--background-color--primary);border-radius:0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0}button:hover{box-shadow:var(--ez-sidebar-button--hover--box-shadow)}button:hover span{width:var(--ez-sidebar-button--hover--width);margin:var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0}";
|
|
82
277
|
|
|
83
278
|
let EzSidebarButton = class {
|
|
@@ -362,7 +557,7 @@ class Tree extends Node {
|
|
|
362
557
|
}
|
|
363
558
|
}
|
|
364
559
|
|
|
365
|
-
const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding)}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
|
|
560
|
+
const ezTreeCss = ":host{--ez-tree--border-radius:var(--border--radius-small, 8px);--ez-tree--padding-inline-start:20px;--ez-tree--margin:var(--space--extra-small, 3px);--ez-tree--margin-right:calc(var(--space--small, 6px) + 2px);--ez-tree--font-family:var(--font-pattern, Arial);--ez-tree--font-size:var(--text--medium, 14px);--ez-tree--selected--font-weight:var(--text-weight--large, 600);--ez-tree--font-weight:var(--text-weight--small, 400);--ez-tree--color:var(--title--primary, #2B3A54);--ez-tree--selected--color:var(--color--primary, #008561);--ez-tree--disabled--color:var(--text--disable, #AFB6C0);--ez-tree__tree-item--height:var(--size-medium, 18px);--ez-tree__tree-item--padding:var(--space--small, 6px);--ez-tree__tree-item--background-color:var(--background--xlight, #FFFFFF);--ez-tree__tree-item--selected--background-color:var(--color--primary-300, #E2F4EF);--ez-tree__tree-item--hover--background-color:var(--background--medium, #F0F3F7);--ez-tree__tree-item--disabled--background-color:var(--ez-tree__tree-Item--background-color);--ez-tree__item-icon-box--height:var(--ez-tree__tree-item--height);--ez-tree__item-icon-box--width:var(--size-medium, 18px);--ez-tree__item-icon-box--padding:var(--ez-tree__tree-item--padding);display:flex;flex-direction:column;margin:0 var(--ez-tree--margin) var(--ez-tree--margin) var(--ez-tree--margin);outline:none}ul{list-style-type:none;margin:0;padding-inline-start:var(--ez-tree--padding-inline-start)}ul.first-level{padding-inline-start:0}.tree-item{display:flex;align-items:center;margin-top:var(--ez-tree--margin);margin-right:var(--ez-tree--margin-right);border-radius:var(--ez-tree--border-radius);height:var(--ez-tree__tree-item--height);padding:var(--ez-tree__tree-item--padding)}.tree-item[selected]{background-color:var(--ez-tree__tree-item--selected--background-color)}.tree-item:hover{background-color:var(--ez-tree__tree-item--hover--background-color)}.tree-item[disabled],.tree-item[disabled]:hover{background-color:var(--ez-tree__tree-item--disabled--background-color)}.item-icon-box{display:flex;align-items:center;justify-content:center;width:var(--ez-tree__item-icon-box--width);height:var(--ez-tree__item-icon-box--height);padding:var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) var(--ez-tree__item-icon-box--padding) 0}.item-icon{--ez-icon--color:var(--ez-tree--color)}.item-icon:hover{cursor:pointer}.tree-item[selected] .item-icon{--ez-icon--color:var(--ez-tree--selected--color)}.tree-item[disabled] .item-icon{cursor:unset;--ez-icon--color:var(--ez-tree--disabled--color)}.item-label{cursor:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-tree--font-family);font-size:var(--ez-tree--font-size);font-weight:var(--ez-tree--font-weight);color:var(--ez-tree--color)}.tree-item[selected] .item-label{color:var(--ez-tree--selected--color);font-weight:var(--ez-tree--selected--font-weight)}.tree-item[disabled] .item-label{color:var(--ez-tree--disabled--color)}";
|
|
366
561
|
|
|
367
562
|
let EzTree = class {
|
|
368
563
|
constructor(hostRef) {
|
|
@@ -598,5 +793,6 @@ let EzTree = class {
|
|
|
598
793
|
EzTree.style = ezTreeCss;
|
|
599
794
|
|
|
600
795
|
exports.ez_filter_input = EzFilterInput;
|
|
796
|
+
exports.ez_scroller = EzScroller;
|
|
601
797
|
exports.ez_sidebar_button = EzSidebarButton;
|
|
602
798
|
exports.ez_tree = EzTree;
|
|
@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-5e208fa5.js');
|
|
6
6
|
const core = require('@sankhyalabs/core');
|
|
7
|
+
const EzScrollDirection = require('./EzScrollDirection-b2c99895.js');
|
|
7
8
|
|
|
8
|
-
const ezGuideNavigatorCss = ":host{--ez-guide-navigator--padding:
|
|
9
|
+
const ezGuideNavigatorCss = ":host{--ez-guide-navigator--padding-left:var(--space--large);--ez-guide-navigator--padding-right:var(--space--small);--ez-guide-navigator--box-shadow:var(--shadow, 0px 0px 24px 0px #000);--ez-guide-navigator--background-color:var(--color--inverted);--ez-guide-navigator--border-radius:0px var(--border--radius-medium) var(--border--radius-medium) 0px;--ez-guide-navigator--actions-gap:var(--space--medium);--ez-guide-navigator--actions-margin:var(--space--medium) 0 var(--space--medium);--ez-guide-navigator--actions-padding-right:calc(var(--space--medium, 12px) + var(--space--small, 6px))}.inverted{transform:rotate(180deg)}.ez-guide-navigator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;padding-left:var(--ez-guide-navigator--padding-left);padding-right:var(--ez-guide-navigator--padding-right);background-color:var(--ez-guide-navigator--background-color);-webkit-box-shadow:var(--ez-guide-navigator--box-shadow);box-shadow:var(--ez-guide-navigator--box-shadow);border-radius:var(--ez-guide-navigator--border-radius)}.ez-guide-navigator__actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--ez-guide-navigator--actions-gap);margin:var(--ez-guide-navigator--actions-margin);padding-right:var(--ez-guide-navigator--actions-padding-right)}.hidden{display:none}";
|
|
9
10
|
|
|
10
11
|
const ENTER_KEY = "Enter";
|
|
11
12
|
let EzGuideNavigator = class {
|
|
@@ -46,7 +47,7 @@ let EzGuideNavigator = class {
|
|
|
46
47
|
}
|
|
47
48
|
render() {
|
|
48
49
|
core.ElementIDUtils.addIDInfoIfNotExists(this._element);
|
|
49
|
-
return (index.h(index.Host, null, index.h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": core.ElementIDUtils.getInternalIDInfo("openButton") }), index.h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator " + (this.open ? "" : "hidden"), "data-element-id": core.ElementIDUtils.getInternalIDInfo("sidebar") }, index.h("div", { role: "search", class: "ez-guide-navigator__actions" }, index.h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => (this.filterText = event.detail), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": core.ElementIDUtils.getInternalIDInfo("textinput") }), index.h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": core.ElementIDUtils.getInternalIDInfo("closeButton") })), index.h("ez-tree", { ref: element => (this._tree = element), items: this.items, "data-element-id": core.ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver }))));
|
|
50
|
+
return (index.h(index.Host, null, index.h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.handleToggleSidebar.bind(this), "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": core.ElementIDUtils.getInternalIDInfo("openButton") }), index.h("aside", { tabIndex: -1, id: "navigator", class: "ez-col ez-col--sd-12 ez-col--tb-3 ez-guide-navigator " + (this.open ? "" : "hidden"), "data-element-id": core.ElementIDUtils.getInternalIDInfo("sidebar") }, index.h("div", { role: "search", class: "ez-guide-navigator__actions" }, index.h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => (this.filterText = event.detail), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": core.ElementIDUtils.getInternalIDInfo("textinput") }), index.h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": core.ElementIDUtils.getInternalIDInfo("closeButton") })), index.h("ez-scroller", { direction: EzScrollDirection.EzScrollDirection.VERTICAL, activeShadow: true }, index.h("ez-tree", { ref: element => (this._tree = element), items: this.items, "data-element-id": core.ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver })))));
|
|
50
51
|
}
|
|
51
52
|
get _element() { return index.getElement(this); }
|
|
52
53
|
};
|
package/dist/cjs/ezui.cjs.js
CHANGED
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["ez-guide-navigator.cjs",[[1,"ez-guide-navigator",{"open":[1540],"items":[16],"tooltipResolver":[16],"filterText":[32],"disableItem":[64],"enableItem":[64]}]]],["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-
|
|
18
|
+
return index.bootstrapLazy([["ez-guide-navigator.cjs",[[1,"ez-guide-navigator",{"open":[1540],"items":[16],"tooltipResolver":[16],"filterText":[32],"disableItem":[64],"enableItem":[64]}]]],["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-filter-input_4.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}],[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]],[1,"ez-sidebar-button"],[1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64],"applyFilter":[64]},[[2,"keydown","onKeyDownListener"]]]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form-view.cjs",[[2,"ez-form-view",{"fields":[16]}]]],["ez-form.cjs",[[2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"multiLevel":[4,"multi-level"],"levelResolver":[16],"contentBuilder":[16],"validate":[64]}]]]], options);
|
|
19
19
|
});
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["ez-guide-navigator.cjs",[[1,"ez-guide-navigator",{"open":[1540],"items":[16],"tooltipResolver":[16],"filterText":[32],"disableItem":[64],"enableItem":[64]}]]],["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-
|
|
17
|
+
return index.bootstrapLazy([["ez-guide-navigator.cjs",[[1,"ez-guide-navigator",{"open":[1540],"items":[16],"tooltipResolver":[16],"filterText":[32],"disableItem":[64],"enableItem":[64]}]]],["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[516],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-filter-input_4.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}],[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]],[1,"ez-sidebar-button"],[1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64],"applyFilter":[64]},[[2,"keydown","onKeyDownListener"]]]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]}]]],["ez-form-view.cjs",[[2,"ez-form-view",{"fields":[16]}]]],["ez-form.cjs",[[2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"multiLevel":[4,"multi-level"],"levelResolver":[16],"contentBuilder":[16],"validate":[64]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -116,7 +116,7 @@ export class EzDropdown {
|
|
|
116
116
|
!isLockedLevels &&
|
|
117
117
|
hasChildren &&
|
|
118
118
|
h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
|
|
119
|
-
: h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownDivider` })));
|
|
119
|
+
: h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
|
|
120
120
|
});
|
|
121
121
|
}
|
|
122
122
|
renderDropdown(branchItems = this.items, level = 1) {
|
|
@@ -135,7 +135,7 @@ export class EzDropdown {
|
|
|
135
135
|
h("label", { class: "ez-dropdown__group-label", title: groupLabel }, groupLabel),
|
|
136
136
|
hasGroup &&
|
|
137
137
|
groupLabel === "noGroup" &&
|
|
138
|
-
h("hr", { class: "ez-dropdown__divider" }),
|
|
138
|
+
h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownDivider`) })),
|
|
139
139
|
this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
|
|
140
140
|
}))));
|
|
141
141
|
}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
/* Label Container */
|
|
3
|
-
/*@doc Define o espaçamento
|
|
4
|
-
--ez-guide-navigator--padding:
|
|
3
|
+
/*@doc Define o espaçamento da esquerda do container*/
|
|
4
|
+
--ez-guide-navigator--padding-left: var(--space--large);
|
|
5
|
+
/*@doc Define o espaçamento da direita do container*/
|
|
6
|
+
--ez-guide-navigator--padding-right: var(--space--small);
|
|
5
7
|
/*@doc Define a cor de shadow box do container de label*/
|
|
6
8
|
--ez-guide-navigator--box-shadow: var(--shadow, 0px 0px 24px 0px #000);
|
|
7
9
|
/*@doc Define a cor de fundo do container de label*/
|
|
@@ -9,20 +11,22 @@
|
|
|
9
11
|
/*@doc Define o border radius do container de label*/
|
|
10
12
|
--ez-guide-navigator--border-radius: 0px var(--border--radius-medium) var(--border--radius-medium) 0px;
|
|
11
13
|
|
|
12
|
-
|
|
13
14
|
/*Labels Actions */
|
|
14
15
|
/*@doc Define o espaçamento entre as ações*/
|
|
15
16
|
--ez-guide-navigator--actions-gap: var(--space--medium);
|
|
16
17
|
/*@doc Define a margem vertical do elemento*/
|
|
17
18
|
--ez-guide-navigator--actions-margin: var(--space--medium) 0 var(--space--medium);
|
|
19
|
+
/*@doc Define o espaçamento da direita do elemento*/
|
|
20
|
+
--ez-guide-navigator--actions-padding-right: calc(var(--space--medium, 12px) + var(--space--small, 6px));
|
|
18
21
|
}
|
|
19
22
|
|
|
20
23
|
.inverted {
|
|
24
|
+
/* private */
|
|
21
25
|
transform: rotate(180deg);
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
.ez-guide-navigator {
|
|
25
|
-
/*
|
|
29
|
+
/* private */
|
|
26
30
|
display: -webkit-box;
|
|
27
31
|
display: -ms-flexbox;
|
|
28
32
|
display: flex;
|
|
@@ -30,28 +34,33 @@
|
|
|
30
34
|
-webkit-box-direction: normal;
|
|
31
35
|
-ms-flex-direction: column;
|
|
32
36
|
flex-direction: column;
|
|
33
|
-
|
|
34
|
-
|
|
37
|
+
height: 100%;
|
|
38
|
+
|
|
39
|
+
/* public */
|
|
40
|
+
padding-left: var(--ez-guide-navigator--padding-left);
|
|
41
|
+
padding-right: var(--ez-guide-navigator--padding-right);
|
|
35
42
|
background-color: var(--ez-guide-navigator--background-color);
|
|
36
43
|
-webkit-box-shadow: var(--ez-guide-navigator--box-shadow);
|
|
37
44
|
box-shadow: var(--ez-guide-navigator--box-shadow);
|
|
38
45
|
border-radius: var(--ez-guide-navigator--border-radius);
|
|
39
|
-
|
|
40
46
|
}
|
|
41
47
|
|
|
42
48
|
.ez-guide-navigator__actions {
|
|
43
|
-
/*
|
|
49
|
+
/* private */
|
|
44
50
|
display: -webkit-box;
|
|
45
51
|
display: -ms-flexbox;
|
|
46
52
|
display: flex;
|
|
47
53
|
-webkit-box-align: center;
|
|
48
54
|
-ms-flex-align: center;
|
|
49
55
|
align-items: center;
|
|
50
|
-
|
|
56
|
+
|
|
57
|
+
/* public */
|
|
51
58
|
gap: var(--ez-guide-navigator--actions-gap);
|
|
52
|
-
margin: var(--ez-guide-navigator--actions-margin)
|
|
59
|
+
margin: var(--ez-guide-navigator--actions-margin);
|
|
60
|
+
padding-right: var(--ez-guide-navigator--actions-padding-right);
|
|
53
61
|
}
|
|
54
62
|
|
|
55
63
|
.hidden {
|
|
64
|
+
/* private */
|
|
56
65
|
display: none;
|
|
57
66
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Component, Prop, State, h, Host, Method, Element } from "@stencil/core";
|
|
2
2
|
import { ElementIDUtils } from "@sankhyalabs/core";
|
|
3
|
+
import { EzScrollDirection } from "../ez-scroller/EzScrollDirection";
|
|
3
4
|
const ENTER_KEY = "Enter";
|
|
4
5
|
export class EzGuideNavigator {
|
|
5
6
|
constructor() {
|
|
@@ -44,7 +45,8 @@ export class EzGuideNavigator {
|
|
|
44
45
|
h("div", { role: "search", class: "ez-guide-navigator__actions" },
|
|
45
46
|
h("ez-filter-input", { mode: "slim", value: this.filterText, onEzChange: (event) => (this.filterText = event.detail), label: "Buscar guia", "aria-placeholder": "Buscar guia", onKeyUp: this.handleFilterTree.bind(this), "data-element-id": ElementIDUtils.getInternalIDInfo("textinput") }),
|
|
46
47
|
h("ez-button", { onClick: this.handleToggleSidebar.bind(this), class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: "Ocultar menu", "aria-label": "Ocultar menu", "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })),
|
|
47
|
-
h("ez-
|
|
48
|
+
h("ez-scroller", { direction: EzScrollDirection.VERTICAL, activeShadow: true },
|
|
49
|
+
h("ez-tree", { ref: element => (this._tree = element), items: this.items, "data-element-id": ElementIDUtils.getInternalIDInfo("tree"), tooltipResolver: this.tooltipResolver })))));
|
|
48
50
|
}
|
|
49
51
|
static get is() { return "ez-guide-navigator"; }
|
|
50
52
|
static get encapsulation() { return "shadow"; }
|
|
@@ -129,19 +129,15 @@
|
|
|
129
129
|
display: flex;
|
|
130
130
|
position: relative;
|
|
131
131
|
width: 100%;
|
|
132
|
-
height:
|
|
132
|
+
height: auto;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
.ez-scroller__wrapper--horizontal {
|
|
136
136
|
flex-direction: row;
|
|
137
|
-
width: 100%;
|
|
138
|
-
height: auto;
|
|
139
137
|
}
|
|
140
138
|
|
|
141
139
|
.ez-scroller__wrapper--vertical {
|
|
142
140
|
flex-direction: column;
|
|
143
|
-
width: auto;
|
|
144
|
-
height: 100%;
|
|
145
141
|
}
|
|
146
142
|
|
|
147
143
|
.ez-scroller__wrapper--shadow-start::before,
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
--ez-tree--padding-inline-start: 20px;
|
|
7
7
|
/*@doc Define a margem do componente.*/
|
|
8
8
|
--ez-tree--margin: var(--space--extra-small, 3px);
|
|
9
|
+
/*@doc Define a margem da direita do componente.*/
|
|
10
|
+
--ez-tree--margin-right: calc(var(--space--small, 6px) + 2px);
|
|
9
11
|
|
|
10
12
|
/* Fontes e cor de ícones*/
|
|
11
13
|
/*@doc Define a família da fonte.*/
|
|
@@ -75,6 +77,7 @@ ul.first-level {
|
|
|
75
77
|
|
|
76
78
|
/*public*/
|
|
77
79
|
margin-top: var(--ez-tree--margin);
|
|
80
|
+
margin-right: var(--ez-tree--margin-right);
|
|
78
81
|
border-radius: var(--ez-tree--border-radius);
|
|
79
82
|
height: var(--ez-tree__tree-item--height);
|
|
80
83
|
padding: var(--ez-tree__tree-item--padding);
|