@sankhyalabs/ezui 2.14.3 → 2.14.5

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.
Files changed (15) hide show
  1. package/dist/cjs/ez-dropdown.cjs.entry.js +2 -2
  2. package/dist/cjs/ez-scroller.cjs.entry.js +26 -11
  3. package/dist/collection/components/ez-dropdown/ez-dropdown.js +2 -2
  4. package/dist/collection/components/ez-scroller/ez-scroller.css +1 -0
  5. package/dist/collection/components/ez-scroller/ez-scroller.js +25 -10
  6. package/dist/custom-elements/index.js +28 -13
  7. package/dist/esm/ez-dropdown.entry.js +2 -2
  8. package/dist/esm/ez-scroller.entry.js +26 -11
  9. package/dist/ezui/ezui.esm.js +1 -1
  10. package/dist/ezui/p-43d281a7.entry.js +1 -0
  11. package/dist/ezui/p-ac7f2170.entry.js +1 -0
  12. package/dist/types/components/ez-scroller/ez-scroller.d.ts +2 -0
  13. package/package.json +1 -1
  14. package/dist/ezui/p-3b2091dd.entry.js +0 -1
  15. package/dist/ezui/p-91f8c816.entry.js +0 -1
package/dist/cjs/ez-dropdown.cjs.entry.js CHANGED
@@ -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) {
package/dist/cjs/ez-scroller.cjs.entry.js CHANGED
@@ -12,7 +12,7 @@ var EzScrollDirection;
12
12
  EzScrollDirection["BOTH"] = "both";
13
13
  })(EzScrollDirection || (EzScrollDirection = {}));
14
14
 
15
- 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}.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:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.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%)}";
15
+ 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:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.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%)}";
16
16
 
17
17
  let EzScroller = class {
18
18
  constructor(hostRef) {
@@ -45,10 +45,9 @@ let EzScroller = class {
45
45
  this._container.classList.remove("dragging");
46
46
  }
47
47
  }
48
- updateShadow() {
48
+ updateScroller() {
49
49
  const container = this._container;
50
- const wrapper = this._wrapper;
51
- if (container == undefined || wrapper == undefined) {
50
+ if (container == undefined) {
52
51
  return;
53
52
  }
54
53
  let remainingScroll;
@@ -63,7 +62,14 @@ let EzScroller = class {
63
62
  this._startHidden = container.scrollTop > 0;
64
63
  }
65
64
  this._endHidden = remainingScroll > 0;
66
- this.isActive = this._startHidden || this._endHidden;
65
+ this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
66
+ this.updateShadow();
67
+ }
68
+ updateShadow() {
69
+ const wrapper = this._wrapper;
70
+ if (!this.activeShadow || wrapper == undefined) {
71
+ return;
72
+ }
67
73
  const shadowPositions = ["", "start", "end", "middle"];
68
74
  const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
69
75
  if (currentPosition === "start") {
@@ -91,12 +97,19 @@ let EzScroller = class {
91
97
  if (this._resizeObserver != undefined) {
92
98
  this._resizeObserver.unobserve(container);
93
99
  }
94
- this._resizeObserver = new ResizeObserver(core.JSUtils.debounce(this.updateShadow.bind(this), 200));
100
+ this._resizeObserver = new ResizeObserver(core.JSUtils.debounce(this.updateScroller.bind(this), 200));
95
101
  this._resizeObserver.observe(container);
96
102
  }
97
103
  getContainerElement() {
98
104
  return index.h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, index.h("slot", null));
99
105
  }
106
+ isActiveScroller() {
107
+ if (this._container == undefined) {
108
+ return false;
109
+ }
110
+ return this._container.scrollWidth > this._container.clientWidth
111
+ || this._container.scrollHeight > this._container.clientHeight;
112
+ }
100
113
  //---------------------------------------------
101
114
  // Event handlers
102
115
  //---------------------------------------------
@@ -137,16 +150,18 @@ let EzScroller = class {
137
150
  }
138
151
  componentDidRender() {
139
152
  var _a, _b;
153
+ if (this._container == undefined) {
154
+ return;
155
+ }
140
156
  if (this.direction === EzScrollDirection.BOTH) {
141
157
  (_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
142
158
  (_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
159
+ this.isActive = this.isActiveScroller();
143
160
  return;
144
161
  }
145
- if (this._container && this.activeShadow) {
146
- this._container.onscroll = this.updateShadow.bind(this);
147
- this.configResize();
148
- this.updateShadow();
149
- }
162
+ this._container.onscroll = this.updateScroller.bind(this);
163
+ this.configResize();
164
+ this.updateScroller();
150
165
  }
151
166
  render() {
152
167
  return (index.h(index.Host, null, this.activeShadow
package/dist/collection/components/ez-dropdown/ez-dropdown.js CHANGED
@@ -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
  }
package/dist/collection/components/ez-scroller/ez-scroller.css CHANGED
@@ -43,6 +43,7 @@
43
43
  .ez-scroller__container--both {
44
44
  overflow-y: scroll;
45
45
  overflow-x: scroll;
46
+ flex-wrap: wrap;
46
47
  }
47
48
 
48
49
  .ez-scroller__container--horizontal {
package/dist/collection/components/ez-scroller/ez-scroller.js CHANGED
@@ -31,10 +31,9 @@ export class EzScroller {
31
31
  this._container.classList.remove("dragging");
32
32
  }
33
33
  }
34
- updateShadow() {
34
+ updateScroller() {
35
35
  const container = this._container;
36
- const wrapper = this._wrapper;
37
- if (container == undefined || wrapper == undefined) {
36
+ if (container == undefined) {
38
37
  return;
39
38
  }
40
39
  let remainingScroll;
@@ -49,7 +48,14 @@ export class EzScroller {
49
48
  this._startHidden = container.scrollTop > 0;
50
49
  }
51
50
  this._endHidden = remainingScroll > 0;
52
- this.isActive = this._startHidden || this._endHidden;
51
+ this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
52
+ this.updateShadow();
53
+ }
54
+ updateShadow() {
55
+ const wrapper = this._wrapper;
56
+ if (!this.activeShadow || wrapper == undefined) {
57
+ return;
58
+ }
53
59
  const shadowPositions = ["", "start", "end", "middle"];
54
60
  const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
55
61
  if (currentPosition === "start") {
@@ -77,13 +83,20 @@ export class EzScroller {
77
83
  if (this._resizeObserver != undefined) {
78
84
  this._resizeObserver.unobserve(container);
79
85
  }
80
- this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateShadow.bind(this), 200));
86
+ this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateScroller.bind(this), 200));
81
87
  this._resizeObserver.observe(container);
82
88
  }
83
89
  getContainerElement() {
84
90
  return h("div", { ref: ref => this._container = ref, class: this.getContainerClass() },
85
91
  h("slot", null));
86
92
  }
93
+ isActiveScroller() {
94
+ if (this._container == undefined) {
95
+ return false;
96
+ }
97
+ return this._container.scrollWidth > this._container.clientWidth
98
+ || this._container.scrollHeight > this._container.clientHeight;
99
+ }
87
100
  //---------------------------------------------
88
101
  // Event handlers
89
102
  //---------------------------------------------
@@ -124,16 +137,18 @@ export class EzScroller {
124
137
  }
125
138
  componentDidRender() {
126
139
  var _a, _b;
140
+ if (this._container == undefined) {
141
+ return;
142
+ }
127
143
  if (this.direction === EzScrollDirection.BOTH) {
128
144
  (_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
129
145
  (_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
146
+ this.isActive = this.isActiveScroller();
130
147
  return;
131
148
  }
132
- if (this._container && this.activeShadow) {
133
- this._container.onscroll = this.updateShadow.bind(this);
134
- this.configResize();
135
- this.updateShadow();
136
- }
149
+ this._container.onscroll = this.updateScroller.bind(this);
150
+ this.configResize();
151
+ this.updateScroller();
137
152
  }
138
153
  render() {
139
154
  return (h(Host, null, this.activeShadow
package/dist/custom-elements/index.js CHANGED
@@ -2465,7 +2465,7 @@ let EzDropdown$1 = class extends HTMLElement$1 {
2465
2465
  !isLockedLevels &&
2466
2466
  hasChildren &&
2467
2467
  h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
2468
- : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownDivider` })));
2468
+ : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
2469
2469
  });
2470
2470
  }
2471
2471
  renderDropdown(branchItems = this.items, level = 1) {
@@ -2481,7 +2481,7 @@ let EzDropdown$1 = class extends HTMLElement$1 {
2481
2481
  return (h("div", Object.assign({ class: "ez-dropdown__group" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownGroup`) }), groupLabel !== "noGroup" &&
2482
2482
  h("label", { class: "ez-dropdown__group-label", title: groupLabel }, groupLabel), hasGroup &&
2483
2483
  groupLabel === "noGroup" &&
2484
- h("hr", { class: "ez-dropdown__divider" }), this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
2484
+ h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownDivider`) })), this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
2485
2485
  }))));
2486
2486
  }
2487
2487
  hasOpenedSubmenu(level) {
@@ -120432,7 +120432,7 @@ var EzScrollDirection;
120432
120432
  EzScrollDirection["BOTH"] = "both";
120433
120433
  })(EzScrollDirection || (EzScrollDirection = {}));
120434
120434
 
120435
- 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}.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:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.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%)}";
120435
+ 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:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.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%)}";
120436
120436
 
120437
120437
  let EzScroller$1 = class extends HTMLElement$1 {
120438
120438
  constructor() {
@@ -120467,10 +120467,9 @@ let EzScroller$1 = class extends HTMLElement$1 {
120467
120467
  this._container.classList.remove("dragging");
120468
120468
  }
120469
120469
  }
120470
- updateShadow() {
120470
+ updateScroller() {
120471
120471
  const container = this._container;
120472
- const wrapper = this._wrapper;
120473
- if (container == undefined || wrapper == undefined) {
120472
+ if (container == undefined) {
120474
120473
  return;
120475
120474
  }
120476
120475
  let remainingScroll;
@@ -120485,7 +120484,14 @@ let EzScroller$1 = class extends HTMLElement$1 {
120485
120484
  this._startHidden = container.scrollTop > 0;
120486
120485
  }
120487
120486
  this._endHidden = remainingScroll > 0;
120488
- this.isActive = this._startHidden || this._endHidden;
120487
+ this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
120488
+ this.updateShadow();
120489
+ }
120490
+ updateShadow() {
120491
+ const wrapper = this._wrapper;
120492
+ if (!this.activeShadow || wrapper == undefined) {
120493
+ return;
120494
+ }
120489
120495
  const shadowPositions = ["", "start", "end", "middle"];
120490
120496
  const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
120491
120497
  if (currentPosition === "start") {
@@ -120513,12 +120519,19 @@ let EzScroller$1 = class extends HTMLElement$1 {
120513
120519
  if (this._resizeObserver != undefined) {
120514
120520
  this._resizeObserver.unobserve(container);
120515
120521
  }
120516
- this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateShadow.bind(this), 200));
120522
+ this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateScroller.bind(this), 200));
120517
120523
  this._resizeObserver.observe(container);
120518
120524
  }
120519
120525
  getContainerElement() {
120520
120526
  return h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, h("slot", null));
120521
120527
  }
120528
+ isActiveScroller() {
120529
+ if (this._container == undefined) {
120530
+ return false;
120531
+ }
120532
+ return this._container.scrollWidth > this._container.clientWidth
120533
+ || this._container.scrollHeight > this._container.clientHeight;
120534
+ }
120522
120535
  //---------------------------------------------
120523
120536
  // Event handlers
120524
120537
  //---------------------------------------------
@@ -120559,16 +120572,18 @@ let EzScroller$1 = class extends HTMLElement$1 {
120559
120572
  }
120560
120573
  componentDidRender() {
120561
120574
  var _a, _b;
120575
+ if (this._container == undefined) {
120576
+ return;
120577
+ }
120562
120578
  if (this.direction === EzScrollDirection.BOTH) {
120563
120579
  (_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
120564
120580
  (_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
120581
+ this.isActive = this.isActiveScroller();
120565
120582
  return;
120566
120583
  }
120567
- if (this._container && this.activeShadow) {
120568
- this._container.onscroll = this.updateShadow.bind(this);
120569
- this.configResize();
120570
- this.updateShadow();
120571
- }
120584
+ this._container.onscroll = this.updateScroller.bind(this);
120585
+ this.configResize();
120586
+ this.updateScroller();
120572
120587
  }
120573
120588
  render() {
120574
120589
  return (h(Host, null, this.activeShadow
package/dist/esm/ez-dropdown.entry.js CHANGED
@@ -392,7 +392,7 @@ let EzDropdown = class {
392
392
  !isLockedLevels &&
393
393
  hasChildren &&
394
394
  h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
395
- : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${item.id}_ezDropdownDivider` })));
395
+ : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
396
396
  });
397
397
  }
398
398
  renderDropdown(branchItems = this.items, level = 1) {
@@ -408,7 +408,7 @@ let EzDropdown = class {
408
408
  return (h("div", Object.assign({ class: "ez-dropdown__group" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownGroup`) }), groupLabel !== "noGroup" &&
409
409
  h("label", { class: "ez-dropdown__group-label", title: groupLabel }, groupLabel), hasGroup &&
410
410
  groupLabel === "noGroup" &&
411
- h("hr", { class: "ez-dropdown__divider" }), this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
411
+ h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${groupLabel}_ezDropdownDivider`) })), this.getItemsRender(itemsByGroup[groupLabel].items, level, hasIcon, hasChildren)));
412
412
  }))));
413
413
  }
414
414
  hasOpenedSubmenu(level) {
package/dist/esm/ez-scroller.entry.js CHANGED
@@ -8,7 +8,7 @@ var EzScrollDirection;
8
8
  EzScrollDirection["BOTH"] = "both";
9
9
  })(EzScrollDirection || (EzScrollDirection = {}));
10
10
 
11
- 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}.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:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.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%)}";
11
+ 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:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.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%)}";
12
12
 
13
13
  let EzScroller = class {
14
14
  constructor(hostRef) {
@@ -41,10 +41,9 @@ let EzScroller = class {
41
41
  this._container.classList.remove("dragging");
42
42
  }
43
43
  }
44
- updateShadow() {
44
+ updateScroller() {
45
45
  const container = this._container;
46
- const wrapper = this._wrapper;
47
- if (container == undefined || wrapper == undefined) {
46
+ if (container == undefined) {
48
47
  return;
49
48
  }
50
49
  let remainingScroll;
@@ -59,7 +58,14 @@ let EzScroller = class {
59
58
  this._startHidden = container.scrollTop > 0;
60
59
  }
61
60
  this._endHidden = remainingScroll > 0;
62
- this.isActive = this._startHidden || this._endHidden;
61
+ this.isActive = this._startHidden || this._endHidden || this.isActiveScroller();
62
+ this.updateShadow();
63
+ }
64
+ updateShadow() {
65
+ const wrapper = this._wrapper;
66
+ if (!this.activeShadow || wrapper == undefined) {
67
+ return;
68
+ }
63
69
  const shadowPositions = ["", "start", "end", "middle"];
64
70
  const currentPosition = shadowPositions[Number(this._startHidden) | Number(this._endHidden) << 1];
65
71
  if (currentPosition === "start") {
@@ -87,12 +93,19 @@ let EzScroller = class {
87
93
  if (this._resizeObserver != undefined) {
88
94
  this._resizeObserver.unobserve(container);
89
95
  }
90
- this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateShadow.bind(this), 200));
96
+ this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.updateScroller.bind(this), 200));
91
97
  this._resizeObserver.observe(container);
92
98
  }
93
99
  getContainerElement() {
94
100
  return h("div", { ref: ref => this._container = ref, class: this.getContainerClass() }, h("slot", null));
95
101
  }
102
+ isActiveScroller() {
103
+ if (this._container == undefined) {
104
+ return false;
105
+ }
106
+ return this._container.scrollWidth > this._container.clientWidth
107
+ || this._container.scrollHeight > this._container.clientHeight;
108
+ }
96
109
  //---------------------------------------------
97
110
  // Event handlers
98
111
  //---------------------------------------------
@@ -133,16 +146,18 @@ let EzScroller = class {
133
146
  }
134
147
  componentDidRender() {
135
148
  var _a, _b;
149
+ if (this._container == undefined) {
150
+ return;
151
+ }
136
152
  if (this.direction === EzScrollDirection.BOTH) {
137
153
  (_a = this._wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(this._shadowStart);
138
154
  (_b = this._wrapper) === null || _b === void 0 ? void 0 : _b.classList.remove(this._shadowEnd);
155
+ this.isActive = this.isActiveScroller();
139
156
  return;
140
157
  }
141
- if (this._container && this.activeShadow) {
142
- this._container.onscroll = this.updateShadow.bind(this);
143
- this.configResize();
144
- this.updateShadow();
145
- }
158
+ this._container.onscroll = this.updateScroller.bind(this);
159
+ this.configResize();
160
+ this.updateScroller();
146
161
  }
147
162
  render() {
148
163
  return (h(Host, null, this.activeShadow
package/dist/ezui/ezui.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as o}from"./p-7b80df03.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-73eb147d",[[1,"ez-guide-navigator",{open:[1540],items:[16],tooltipResolver:[16],filterText:[32],disableItem:[64],enableItem:[64]}]]],["p-20c01161",[[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]}]]],["p-6f9aba86",[[1,"ez-dialog",{confirm:[1028],dialogType:[1025,"dialog-type"],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],show:[64]}]]],["p-bc324ee8",[[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"]]]]],["p-ae168e45",[[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"]}]]],["p-7d42065a",[[1,"ez-alert",{alertType:[513,"alert-type"]}]]],["p-0cd0545d",[[1,"ez-breadcrumb",{items:[1040]}]]],["p-47ca5e09",[[1,"ez-chip",{label:[513],enabled:[516],removePosition:[513,"remove-position"],mode:[513],value:[1540],setFocus:[64],setBlur:[64]}]]],["p-91f8c816",[[1,"ez-dropdown",{items:[1040],value:[1040],itemBuilder:[16]}]]],["p-24717f87",[[1,"ez-file-item",{canRemove:[4,"can-remove"],fileName:[1,"file-name"],iconName:[1,"icon-name"],fileSize:[2,"file-size"],progress:[2]}]]],["p-47bcc678",[[0,"ez-application"]]],["p-1b94b9dc",[[1,"ez-card-item",{item:[16]}]]],["p-6dec5cfa",[[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]}]]],["p-ad8b7412",[[1,"ez-loading-bar",{_showLoading:[32],hide:[64],show:[64]}]]],["p-bf8a633d",[[1,"ez-modal",{modalSize:[1,"modal-size"],align:[1],opened:[1028],closeEsc:[4,"close-esc"],closeOutsideClick:[4,"close-outside-click"]}]]],["p-368037b9",[[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]}]]],["p-bd9792e2",[[1,"ez-popup",{size:[1],opened:[1540],useHeader:[516,"use-header"],heightMode:[513,"height-mode"],ezTitle:[1,"ez-title"]}]]],["p-ab5eee38",[[1,"ez-radio-button",{value:[1544],options:[1040],enabled:[516],label:[513],direction:[1537]}]]],["p-3b2091dd",[[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"]]]]],["p-626b8940",[[1,"ez-toast",{message:[1025],fadeTime:[1026,"fade-time"],useIcon:[1028,"use-icon"],canClose:[1028,"can-close"],show:[64]}]]],["p-4c444816",[[0,"ez-view-stack",{show:[64],getSelectedIndex:[64]}]]],["p-a4b4645d",[[1,"ez-tabselector",{selectedIndex:[1538,"selected-index"],selectedTab:[1537,"selected-tab"],tabs:[1],_processedTabs:[32]}]]],["p-608d13e8",[[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]}]]],["p-6630eca2",[[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]}]]],["p-1a27bb9f",[[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]}]]],["p-3320768e",[[1,"ez-date-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-e203c89f",[[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]}]]],["p-c071db26",[[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]}]]],["p-b2e861cb",[[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]}]]],["p-fc97f773",[[1,"ez-check",{label:[513],value:[1540],enabled:[1540],indeterminate:[516],mode:[513],getMode:[64],setFocus:[64]}]]],["p-b2efb22c",[[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]}]]],["p-ca7435a6",[[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]}]]],["p-b5557d33",[[1,"ez-text-edit",{value:[1],styled:[16],_newValue:[32],applyFocusSelect:[64]}]]],["p-c3529df3",[[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]}]]],["p-ca8f7199",[[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-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"]]]]],["p-67b9a2cb",[[1,"ez-calendar",{value:[1040],floating:[516],time:[516],showSeconds:[516,"show-seconds"],show:[64],fitVertical:[64],hide:[64]}]]],["p-99aea44b",[[1,"ez-icon",{size:[513],href:[513],iconName:[513,"icon-name"]}]]],["p-ad7151e0",[[1,"ez-button",{label:[513],enabled:[516],mode:[513],image:[513],iconName:[513,"icon-name"],size:[513],setFocus:[64],setBlur:[64]}]]],["p-ba03ac61",[[2,"ez-form-view",{fields:[16]}]]],["p-97d2d2f6",[[2,"ez-form",{dataUnit:[1040],config:[16],recordsValidator:[16],multiLevel:[4,"multi-level"],levelResolver:[16],contentBuilder:[16],validate:[64]}]]]],e)));
1
+ import{p as e,b as o}from"./p-7b80df03.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-73eb147d",[[1,"ez-guide-navigator",{open:[1540],items:[16],tooltipResolver:[16],filterText:[32],disableItem:[64],enableItem:[64]}]]],["p-20c01161",[[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]}]]],["p-6f9aba86",[[1,"ez-dialog",{confirm:[1028],dialogType:[1025,"dialog-type"],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],show:[64]}]]],["p-bc324ee8",[[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"]]]]],["p-ae168e45",[[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"]}]]],["p-7d42065a",[[1,"ez-alert",{alertType:[513,"alert-type"]}]]],["p-0cd0545d",[[1,"ez-breadcrumb",{items:[1040]}]]],["p-47ca5e09",[[1,"ez-chip",{label:[513],enabled:[516],removePosition:[513,"remove-position"],mode:[513],value:[1540],setFocus:[64],setBlur:[64]}]]],["p-43d281a7",[[1,"ez-dropdown",{items:[1040],value:[1040],itemBuilder:[16]}]]],["p-24717f87",[[1,"ez-file-item",{canRemove:[4,"can-remove"],fileName:[1,"file-name"],iconName:[1,"icon-name"],fileSize:[2,"file-size"],progress:[2]}]]],["p-47bcc678",[[0,"ez-application"]]],["p-1b94b9dc",[[1,"ez-card-item",{item:[16]}]]],["p-6dec5cfa",[[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]}]]],["p-ad8b7412",[[1,"ez-loading-bar",{_showLoading:[32],hide:[64],show:[64]}]]],["p-bf8a633d",[[1,"ez-modal",{modalSize:[1,"modal-size"],align:[1],opened:[1028],closeEsc:[4,"close-esc"],closeOutsideClick:[4,"close-outside-click"]}]]],["p-368037b9",[[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]}]]],["p-bd9792e2",[[1,"ez-popup",{size:[1],opened:[1540],useHeader:[516,"use-header"],heightMode:[513,"height-mode"],ezTitle:[1,"ez-title"]}]]],["p-ab5eee38",[[1,"ez-radio-button",{value:[1544],options:[1040],enabled:[516],label:[513],direction:[1537]}]]],["p-ac7f2170",[[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"]]]]],["p-626b8940",[[1,"ez-toast",{message:[1025],fadeTime:[1026,"fade-time"],useIcon:[1028,"use-icon"],canClose:[1028,"can-close"],show:[64]}]]],["p-4c444816",[[0,"ez-view-stack",{show:[64],getSelectedIndex:[64]}]]],["p-a4b4645d",[[1,"ez-tabselector",{selectedIndex:[1538,"selected-index"],selectedTab:[1537,"selected-tab"],tabs:[1],_processedTabs:[32]}]]],["p-608d13e8",[[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]}]]],["p-6630eca2",[[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]}]]],["p-1a27bb9f",[[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]}]]],["p-3320768e",[[1,"ez-date-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-e203c89f",[[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]}]]],["p-c071db26",[[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]}]]],["p-b2e861cb",[[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]}]]],["p-fc97f773",[[1,"ez-check",{label:[513],value:[1540],enabled:[1540],indeterminate:[516],mode:[513],getMode:[64],setFocus:[64]}]]],["p-b2efb22c",[[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]}]]],["p-ca7435a6",[[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]}]]],["p-b5557d33",[[1,"ez-text-edit",{value:[1],styled:[16],_newValue:[32],applyFocusSelect:[64]}]]],["p-c3529df3",[[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]}]]],["p-ca8f7199",[[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-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"]]]]],["p-67b9a2cb",[[1,"ez-calendar",{value:[1040],floating:[516],time:[516],showSeconds:[516,"show-seconds"],show:[64],fitVertical:[64],hide:[64]}]]],["p-99aea44b",[[1,"ez-icon",{size:[513],href:[513],iconName:[513,"icon-name"]}]]],["p-ad7151e0",[[1,"ez-button",{label:[513],enabled:[516],mode:[513],image:[513],iconName:[513,"icon-name"],size:[513],setFocus:[64],setBlur:[64]}]]],["p-ba03ac61",[[2,"ez-form-view",{fields:[16]}]]],["p-97d2d2f6",[[2,"ez-form",{dataUnit:[1040],config:[16],recordsValidator:[16],multiLevel:[4,"multi-level"],levelResolver:[16],contentBuilder:[16],validate:[64]}]]]],e)));
package/dist/ezui/p-43d281a7.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{h as o,r,c as e,H as d,g as n}from"./p-7b80df03.js";import{ElementIDUtils as i,ObjectUtils as l}from"@sankhyalabs/core";const t=({item:r,hasIcon:e,hasChildren:d,isLockedLevels:n,onSubActionClick:i})=>o("div",{class:"ez-dropdown__item-wrapper",title:r.label},a(r,e),o("span",{class:"ez-dropdown__item-label"},r.label),s(r,d,n,i)),a=(r,e)=>{if(null!=r&&e)return o("ez-icon",r.iconName?Object.assign({class:"ez-dropdown__icon-left",iconName:r.iconName,size:"medium"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:`${r.id}_ezDropdownItemIcon`}):{class:"ez-dropdown__icon-left ez-dropdown__hidden",size:"medium"})},s=(r,e,d,n)=>{var l,t;if(null!=r){if(!(null===(l=r.children)||void 0===l?void 0:l.length)&&null!=r.subAction&&Object.keys(r.subAction).length>0)return o("span",Object.assign({onClick:()=>n(r),title:r.subAction.label,class:`ez-dropdown__link ez-dropdown__link--${r.subAction.type||"primary"}`},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:`${r.subAction.id}_ezDropdownItemSubAction`}),r.subAction.label);if(!d&&e)return(null===(t=r.children)||void 0===t?void 0:t.length)>0?o("ez-icon",Object.assign({class:"ez-dropdown__icon-right",iconName:"chevron-right",size:"medium"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:`${r.id}_ezDropdownIconOpenChildren`})):o("ez-icon",{class:"ez-dropdown__icon-right ez-dropdown__hidden",size:"medium"})}};class p{constructor(){}show(o){const r=null==o?void 0:o.querySelector(".ez-dropdown__submenu");null!=o&&null!=r&&(r.classList.remove("ez-dropdown__submenu--hide"),this.setPosition(o),this.setScrollContainer(o),this.setMaxHeight(r))}hide(o){if(null==o)return;const r=o.querySelector(".ez-dropdown__submenu:not(.ez-dropdown__submenu--hide)");this.reset(r),this.hideChild(r)}hideChild(o){null!=o&&o.querySelectorAll(".ez-dropdown__submenu").forEach((o=>{this.reset(o)}))}setPosition(o){const r=null==o?void 0:o.querySelector(".ez-dropdown__submenu"),e=null==o?void 0:o.closest(".ez-dropdown");if(null==r||null==e)return;r.style.top=this.getPositionTop(o),r.style.left=this.getPositionRight(e);const d=null==r?void 0:r.getBoundingClientRect(),n=document.body.clientWidth;(null==d?void 0:d.right)>n&&this.updatePosition(e,r)}setMaxHeight(o){var r;const e=(null==o?void 0:o.shadowRoot)||o,d=null==e?void 0:e.querySelector(".ez-dropdown"),n=document.body.clientHeight;let i,l;if(null!=(null==e?void 0:e.tagName)?(i=e,l=null==i?void 0:i.getBoundingClientRect()):l=null==d?void 0:d.getBoundingClientRect(),null!=d&&null!=l){if(l.y+l.height>n)if(null!=i){const o=i.closest(".ez-dropdown"),e=null==o?void 0:o.getBoundingClientRect(),t=parseFloat((null===(r=getComputedStyle(i))||void 0===r?void 0:r.marginTop)||"0");if(null==o||null==e)return;e.y+l.height>n?(i.style.top=e.y-t+"px",d.style.maxHeight=n-e.y+"px"):i.style.top=n-l.height-t+"px"}else{let o=n-l.y;o<0&&(o=l.height-n),d.style.maxHeight=o+"px"}this.setSpacerContainer(d)}}setSpacerContainer(o){const r=null==o?void 0:o.querySelector(".ez-dropdown__container");null!=r&&(r.scrollHeight>r.clientHeight?r.classList.add("ez-dropdown__container--spacer"):r.classList.remove("ez-dropdown__container--spacer"))}reset(o){if(null==o)return;o.classList.add("ez-dropdown__submenu--hide"),o.style.left="",o.style.top="";const r=o.querySelector(".ez-dropdown");this.resetDropdown(r)}resetDropdown(o){null!=o&&(o.style.maxHeight="",this.setSpacerContainer(o))}setScrollContainer(o){const r=null==o?void 0:o.closest(".ez-dropdown__container");null!=r&&(r.onscroll=this.onScrollContainer.bind(this))}onScrollContainer(o){this.hideChild(null==o?void 0:o.target)}getPositionTop(o){const r=null==o?void 0:o.getBoundingClientRect();if(null!=r)return r.y+"px"}getPositionRight(o){const r=null==o?void 0:o.getBoundingClientRect();if(null!=r)return r.x+r.width+"px"}getPositionLeft(o,r){const e=null==o?void 0:o.getBoundingClientRect(),d=null==r?void 0:r.getBoundingClientRect();if(null!=e&&null!=d)return e.x-d.width+"px"}updatePosition(o,r){const e=null==o?void 0:o.getBoundingClientRect(),d=null==r?void 0:r.getBoundingClientRect();null!=e&&null!=d&&e.x<d.right&&(r.style.left=this.getPositionLeft(o,r),this.updatePosition(o,r))}}let c=class{constructor(o){r(this,o),this.ezClick=e(this,"ezClick",7),this.ezSubActionClick=e(this,"ezSubActionClick",7),this._itemList={},this._submenuList=[],this._openedMenuList={},this._levelLimits=3,this.items=[]}defaultItemBuilder(r,e,d,n){return o(t,{item:r,hasIcon:d,hasChildren:n,isLockedLevels:e,onSubActionClick:this.onSubActionClick.bind(this)})}getMaxOrder(o){return null==o||0===o.length?-1:Math.max(...o.map((o=>{var r;const e=null===(r=o.group)||void 0===r?void 0:r.order;return null!=e&&e>=0?e:-1})))}hasIcon(o){return null==o?void 0:o.some((o=>""!==(o.iconName||"")))}hasGroup(o){return null==o?void 0:o.some((o=>""!==(o.group||"")))}hasChildren(o){return null==o?void 0:o.some((o=>(o.children||[]).length>0))}isLockedLevels(o){return!!this._levelLimits&&o===this._levelLimits+1}getItemsByGroup(o,r){let e={};const d=this.getMaxOrder(o);return o.forEach((o=>{const n=o.group&&null!=o.group.label?o.group.label||"noGroup":o.group||"noGroup";let i=e[n];null==i&&(i={items:[],order:o.group&&null!=o.group.order?o.group.order:o.group?d+1:d+2}),this.validateItem(o,r),i.items.push(o),e[n]=i})),l.sortByProperty(e,"order")}validateItem(o,r){if(null==this._itemList&&(this._itemList={}),null==o.type&&(o.type="item"),null==o.id){const e=`level_${r}_${o.type}`,d=Object.keys(this._itemList).filter((o=>o.includes(e))).length;o.id=`${e}_${d+1}`}null==o.label&&(o.label=""),null!=o.subAction&&(null==o.subAction.id&&(o.subAction.id=`subAction_${o.id}`),null==o.subAction.label&&(o.subAction.label="")),null==this._itemList[o.id]&&(this._itemList[o.id]={})}getItemsRender(r,e,d,n){if(null==r)return;let l=e,t=!1;return n&&(l++,t=this.isLockedLevels(l)),r.map((r=>{var a;return"divider"!==r.type?o("div",Object.assign({ref:o=>this._itemList[r.id]=o,class:"ez-dropdown__item","data-level":e},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:i.getInternalIDInfo(`${r.id}_ezDropdownItem`)}),o("div",{class:"ez-dropdown__item-content",onClick:o=>this.onItemClick(o,r),onMouseOver:o=>this.onShowSubmenu(o,r)},this.itemBuilder?o("div",{class:"ez-dropdown__item-builder",innerHTML:this.itemBuilder(r,e)}):this.defaultItemBuilder(r,t,d,n)),(null===(a=r.children)||void 0===a?void 0:a.length)>0&&!t&&n&&o("div",{ref:o=>this._submenuList.push(o),class:"ez-dropdown__submenu ez-dropdown__submenu--hide"},this.renderDropdown(r.children,l))):o("hr",Object.assign({class:"ez-dropdown__divider"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:i.getInternalIDInfo(`${r.id}_ezDropdownDivider`)}))}))}renderDropdown(r=this.items,e=1){if(null==r||this.isLockedLevels(e))return;const d=this.getItemsByGroup(r,e),n=this.hasGroup(r),l=this.hasIcon(r),t=this.hasChildren(r);return o("div",{class:"ez-dropdown","data-level":e},o("div",{class:"ez-dropdown__container"},Object.keys(d).map((r=>o("div",Object.assign({class:"ez-dropdown__group"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:i.getInternalIDInfo(`${r}_ezDropdownGroup`)}),"noGroup"!==r&&o("label",{class:"ez-dropdown__group-label",title:r},r),n&&"noGroup"===r&&o("hr",Object.assign({class:"ez-dropdown__divider"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:i.getInternalIDInfo(`${r}_ezDropdownDivider`)})),this.getItemsRender(d[r].items,e,l,t))))))}hasOpenedSubmenu(o){const r=Object.keys(this._openedMenuList);return r.includes(o.toString())||r.some((r=>Number(r)>o))}hasSubmenuOpened(){var o;return null===(o=this._submenuList)||void 0===o?void 0:o.some((o=>!o.classList.contains("ez-dropdown__submenu--hide")))}setEvents(){document.removeEventListener("click",this.onHideAllSubmenu.bind(this)),document.addEventListener("click",this.onHideAllSubmenu.bind(this)),document.removeEventListener("scroll",this.onSubmenuReposition.bind(this)),document.addEventListener("scroll",this.onSubmenuReposition.bind(this))}onShowSubmenu(o,r){var e;if(null==o)return;const d=this._itemList[r.id];if(!(null==d?void 0:d.classList.contains("ez-dropdown__item")))return;const n=Number(d.dataset.level||"0");this.hasOpenedSubmenu(n)&&(this._submenuControl.hide(this._openedMenuList[n]),delete this._openedMenuList[n]),(null===(e=r.children)||void 0===e?void 0:e.length)&&(this._openedMenuList[d.dataset.level]=d,this._submenuControl.show(d))}onItemClick(o,r){const e=null==o?void 0:o.target;(null==e?void 0:e.classList.contains("ez-dropdown__link"))||(this.value=r,this.ezClick.emit(r))}onSubActionClick(o){this.ezSubActionClick.emit(o.subAction)}onHideAllSubmenu(o){const r=null==o?void 0:o.target;this.hasSubmenuOpened()&&(null==r||!r.closest(".ez-dropdown")&&"EZ-DROPDOWN"!==r.tagName)&&(this._openedMenuList={},this._submenuList.forEach(this._submenuControl.reset.bind(this._submenuControl)))}onSubmenuReposition(){null!=this._openedMenuList&&Object.keys(this._openedMenuList).forEach((o=>{this._submenuControl.setPosition(this._openedMenuList[o])}))}componentDidLoad(){i.addIDInfo(this._element),this._submenuControl=new p,this._submenuControl.setMaxHeight(this._element)}componentDidUpdate(){this._submenuControl.setMaxHeight(this._element)}componentDidRender(){this.setEvents()}render(){return o(d,null,this.renderDropdown())}get _element(){return n(this)}};c.style=":host{--ez-dropdown--z-index:var(--more-visible, 2);--ez-dropdown--padding:var(--space--small, 6px);--ez-dropdown--box-shadow:var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));--ez-dropdown--border-radius:var(--border--radius-medium, 12px);--ez-dropdown--background-color:var(--background--xlight, #fff);--ez-dropdown--font-family:var(--font-pattern, 'Roboto');--ez-dropdown--max-width:320px;--ez-dropdown--max-height:440px;--ez-dropdown__item--padding:var(--space--small, 6px);--ez-dropdown__item--gap:var(--space--small, 6px);--ez-dropdown__item--border-radius:var(--border--radius-small, 6px);--ez-dropdown__item--color:var(--title--primary, #2b3a54);--ez-dropdown__item--font-weight:var(--text-weight--medium, 400);--ez-dropdown__item--font-size:var(--text--medium, 14px);--ez-dropdown__item--line-height:calc(var(--ez-dropdown__item--font-size) + 4px);--ez-dropdown__item--background-color:var(--background--medium, #f0f3f7);--ez-dropdown__item--transition:var(--transition, .2s linear);--ez-dropdown__item-label--margin-right:var(--space--medium, 12px);--ez-dropdown__icon--size:var(--icon--medium, 18px);--ez-dropdown__divider--background-color:var(--color--disable-secondary, #f2f5f8);--ez-dropdown__divider--margin:var(--space--extra-small, 3px) 0;--ez-dropdown__group-label--color:var(--text--secondary, #A2ABB9);--ez-dropdown__group-label--font-weight:var(--text-weight--large, 600);--ez-dropdown__group-label--font-size:var(--text--small, 12px);--ez-dropdown__group-label--line-height:var(--text--medium, 14px);--ez-dropdown__group-label--padding:var(--space--small, 6px);--ez-dropdown__submenu--z-index:var(--most-visible, 3);--ez-dropdown__link--font-weight:var(--text-weight--large, 600);--ez-dropdown__link--primary--color:var(--color--primary, #008561);--ez-dropdown__link--critical--color:var(--color-alert--error-800, #BD0025);--ez-dropdown__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-dropdown__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-dropdown__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-dropdown__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-dropdown__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-dropdown__scrollbar--width:var(--space--small, 6px);--ez-dropdown__scrollbar--padding-right:var(--space--extra-small, 3px);display:flex;flex-direction:column;height:fit-content;user-select:none;box-sizing:border-box;position:fixed;z-index:var(--ez-dropdown--z-index)}:host *{box-sizing:border-box}.ez-dropdown{display:flex;padding:var(--ez-dropdown--padding);box-shadow:var(--ez-dropdown--box-shadow);border-radius:var(--ez-dropdown--border-radius);background-color:var(--ez-dropdown--background-color);max-width:var(--ez-dropdown--max-width);max-height:var(--ez-dropdown--max-height)}.ez-dropdown *{font-family:var(--ez-dropdown--font-family)}.ez-dropdown__container{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;flex:auto;scrollbar-color:var(--ez-dropdown__scrollbar--color-clicked) var(--ez-dropdown__scrollbar--color-background)}.ez-dropdown__container::-webkit-scrollbar{background-color:var(--ez-dropdown__scrollbar--color-background);width:var(--ez-dropdown__scrollbar--width);max-width:var(--ez-dropdown__scrollbar--width);min-width:var(--ez-dropdown__scrollbar--width)}.ez-dropdown__container::-webkit-scrollbar-track{background-color:var(--ez-dropdown__scrollbar--color-background);border-radius:var(--ez-dropdown__scrollbar--border-radius)}.ez-dropdown__container::-webkit-scrollbar-thumb{background-color:var(--ez-dropdown__scrollbar--color-default);border-radius:var(--ez-dropdown__scrollbar--border-radius)}.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:hover,.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-dropdown__scrollbar--color-hover)}.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:active,.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-dropdown__scrollbar--color-clicked)}.ez-dropdown__container--spacer{padding-right:var(--ez-dropdown__scrollbar--padding-right)}.ez-dropdown__item{display:flex;align-items:center;background-color:transparent;border-radius:var(--ez-dropdown__item--border-radius);transition:var(--ez-dropdown__item--transition)}.ez-dropdown__item:hover{background-color:var(--ez-dropdown__item--background-color)}.ez-dropdown__item-wrapper{display:flex;align-items:center;position:relative;cursor:pointer;width:100%;margin:0;white-space:nowrap;gap:var(--ez-dropdown__item--gap);color:var(--ez-dropdown__item--color);font-weight:var(--ez-dropdown__item--font-weight);font-size:var(--ez-dropdown__item--font-size);line-height:var(--ez-dropdown__item--line-height);padding:var(--ez-dropdown__item--padding)}.ez-dropdown__item-wrapper ez-icon{display:flex;justify-content:center;align-items:center;width:var(--ez-dropdown__icon--size);height:var(--ez-dropdown__icon--size);min-width:var(--ez-dropdown__icon--size);min-height:var(--ez-dropdown__icon--size)}.ez-dropdown__item-content{display:flex;align-items:center;flex:auto;overflow:hidden;gap:var(--ez-dropdown__item--gap)}.ez-dropdown__item-label{text-align:left;text-overflow:ellipsis;overflow:hidden;flex:auto}.ez-dropdown__item-label:not(:last-child){margin-right:var(--ez-dropdown__item-label--margin-right)}.ez-dropdown__item-content+.ez-dropdown__link{margin-left:var(--ez-dropdown__item-label--margin-right);margin-right:var(--ez-dropdown__item--padding)}.ez-dropdown__item-builder{flex:auto}.ez-dropdown__divider{width:100%;height:2px;border-radius:1px;border:none;display:block;background-color:var(--ez-dropdown__divider--background-color);margin:var(--ez-dropdown__divider--margin)}.ez-dropdown__hidden{visibility:hidden}.ez-dropdown__group{display:flex;flex-direction:column}.ez-dropdown__group-label{display:block;width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ez-dropdown__group-label--color);font-weight:var(--ez-dropdown__group-label--font-weight);font-size:var(--ez-dropdown__group-label--font-size);line-height:var(--ez-dropdown__group-label--line-height);padding:var(--ez-dropdown__group-label--padding)}.ez-dropdown__icon-right{margin-left:auto}.ez-dropdown__submenu{position:fixed;z-index:var(--ez-dropdown__submenu--z-index);margin-top:calc(var(--ez-dropdown__item--padding) * -1)}.ez-dropdown__submenu--hide{display:none}.ez-dropdown__link{display:block;margin-left:auto;cursor:pointer;text-overflow:ellipsis;overflow:hidden;font-weight:var(--ez-dropdown__link--font-weight);max-width:calc(var(--ez-dropdown--max-width) * 0.43)}.ez-dropdown__link--primary{color:var(--ez-dropdown__link--primary--color)}.ez-dropdown__link--critical{color:var(--ez-dropdown__link--critical--color)}.ez-dropdown__link:hover{text-decoration:underline}";export{c as ez_dropdown}
package/dist/ezui/p-ac7f2170.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r,h as e,H as o}from"./p-7b80df03.js";import{JSUtils as l}from"@sankhyalabs/core";var t;!function(r){r.HORIZONTAL="horizontal",r.VERTICAL="vertical",r.BOTH="both"}(t||(t={}));let s=class{constructor(e){r(this,e),this._shadowStart="ez-scroller__wrapper--shadow-start",this._shadowEnd="ez-scroller__wrapper--shadow-end",this.isActive=!1,this.locked=!1,this.activeShadow=!1}getContainerClass(){return`ez-scroller__container ez-scroller__container--${this.direction}\n ${this.locked||!this.isActive?" ez-scroller__container--locked":""}\n `}getWrapperClass(){return`ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`}finishDrag(){this._controller&&this._container.classList.remove("dragging")}updateScroller(){const r=this._container;if(null==r)return;let e;if(this.direction===t.HORIZONTAL){const{scrollWidth:o,clientWidth:l,scrollLeft:t}=r;e=o-l-Math.ceil(t),this._startHidden=r.scrollLeft>0}else if(this.direction===t.VERTICAL){const{scrollHeight:o,clientHeight:l,scrollTop:t}=r;e=o-l-Math.ceil(t),this._startHidden=r.scrollTop>0}this._endHidden=e>0,this.isActive=this._startHidden||this._endHidden||this.isActiveScroller(),this.updateShadow()}updateShadow(){const r=this._wrapper;if(!this.activeShadow||null==r)return;const e=["","start","end","middle"][Number(this._startHidden)|Number(this._endHidden)<<1];"start"===e?(r.classList.add(this._shadowStart),r.classList.remove(this._shadowEnd)):"end"===e?(r.classList.remove(this._shadowStart),r.classList.add(this._shadowEnd)):"middle"===e?(r.classList.add(this._shadowStart),r.classList.add(this._shadowEnd)):(r.classList.remove(this._shadowStart),r.classList.remove(this._shadowEnd))}configResize(){const r=this._container;null!=r&&(null!=this._resizeObserver&&this._resizeObserver.unobserve(r),this._resizeObserver=new ResizeObserver(l.debounce(this.updateScroller.bind(this),200)),this._resizeObserver.observe(r))}getContainerElement(){return e("div",{ref:r=>this._container=r,class:this.getContainerClass()},e("slot",null))}isActiveScroller(){return null!=this._container&&(this._container.scrollWidth>this._container.clientWidth||this._container.scrollHeight>this._container.clientHeight)}clickListener(r){this._controller&&this._controller.didScroll()&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation())}mouseDownHandler(r){this.locked?this.finishDrag():(this._controller||(this._controller=new c(this._container)),this._controller.startDragg(r),this._container.classList.add("dragging"))}mouseUpHandler(){this.finishDrag()}mouseMoveHandler(r){this.locked?this.finishDrag():this._controller&&(0===r.buttons?this.finishDrag():this._controller.doScroll(r))}componentDidRender(){var r,e;if(null!=this._container){if(this.direction===t.BOTH)return null===(r=this._wrapper)||void 0===r||r.classList.remove(this._shadowStart),null===(e=this._wrapper)||void 0===e||e.classList.remove(this._shadowEnd),void(this.isActive=this.isActiveScroller());this._container.onscroll=this.updateScroller.bind(this),this.configResize(),this.updateScroller()}}render(){return e(o,null,this.activeShadow?e("div",{ref:r=>this._wrapper=r,class:this.getWrapperClass()},this.getContainerElement()):this.getContainerElement())}};class c{constructor(r){this.scrollablePanel=r}startDragg(r){this.startX=this.measureX(r),this.startY=this.measureY(r),this.scrollWidth=0,this.scrollHeight=0}measureX(r){return r.pageX-this.scrollablePanel.offsetLeft}measureY(r){return r.pageY-this.scrollablePanel.offsetTop}doScroll(r){const e=this.measureX(r),o=this.measureY(r);if(e!=this.startX||o!=this.startY){const r=e-this.startX,l=o-this.startY;this.startX+=r,this.startY+=l,this.scrollWidth+=Math.abs(r),this.scrollHeight+=Math.abs(l),this.scrollablePanel.scrollLeft=Math.max(0,this.scrollablePanel.scrollLeft-r),this.scrollablePanel.scrollTop=Math.max(0,this.scrollablePanel.scrollTop-l)}}didScroll(){return this.scrollHeight>5||this.scrollWidth>5}}s.style=':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:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.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%)}';export{s as ez_scroller}
package/dist/types/components/ez-scroller/ez-scroller.d.ts CHANGED
@@ -24,9 +24,11 @@ export declare class EzScroller {
24
24
  private getContainerClass;
25
25
  private getWrapperClass;
26
26
  private finishDrag;
27
+ private updateScroller;
27
28
  private updateShadow;
28
29
  private configResize;
29
30
  private getContainerElement;
31
+ private isActiveScroller;
30
32
  clickListener(evt: MouseEvent): void;
31
33
  mouseDownHandler(evt: MouseEvent): void;
32
34
  mouseUpHandler(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sankhyalabs/ezui",
3
- "version": "2.14.3",
3
+ "version": "2.14.5",
4
4
  "description": "Biblioteca de componentes Sankhya.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/custom-elements/index.js",
package/dist/ezui/p-3b2091dd.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r,h as e,H as o}from"./p-7b80df03.js";import{JSUtils as l}from"@sankhyalabs/core";var t;!function(r){r.HORIZONTAL="horizontal",r.VERTICAL="vertical",r.BOTH="both"}(t||(t={}));let s=class{constructor(e){r(this,e),this._shadowStart="ez-scroller__wrapper--shadow-start",this._shadowEnd="ez-scroller__wrapper--shadow-end",this.isActive=!1,this.locked=!1,this.activeShadow=!1}getContainerClass(){return`ez-scroller__container ez-scroller__container--${this.direction}\n ${this.locked||!this.isActive?" ez-scroller__container--locked":""}\n `}getWrapperClass(){return`ez-scroller__wrapper ez-scroller__wrapper--${this.direction}`}finishDrag(){this._controller&&this._container.classList.remove("dragging")}updateShadow(){const r=this._container,e=this._wrapper;if(null==r||null==e)return;let o;if(this.direction===t.HORIZONTAL){const{scrollWidth:e,clientWidth:l,scrollLeft:t}=r;o=e-l-Math.ceil(t),this._startHidden=r.scrollLeft>0}else if(this.direction===t.VERTICAL){const{scrollHeight:e,clientHeight:l,scrollTop:t}=r;o=e-l-Math.ceil(t),this._startHidden=r.scrollTop>0}this._endHidden=o>0,this.isActive=this._startHidden||this._endHidden;const l=["","start","end","middle"][Number(this._startHidden)|Number(this._endHidden)<<1];"start"===l?(e.classList.add(this._shadowStart),e.classList.remove(this._shadowEnd)):"end"===l?(e.classList.remove(this._shadowStart),e.classList.add(this._shadowEnd)):"middle"===l?(e.classList.add(this._shadowStart),e.classList.add(this._shadowEnd)):(e.classList.remove(this._shadowStart),e.classList.remove(this._shadowEnd))}configResize(){const r=this._container;null!=r&&(null!=this._resizeObserver&&this._resizeObserver.unobserve(r),this._resizeObserver=new ResizeObserver(l.debounce(this.updateShadow.bind(this),200)),this._resizeObserver.observe(r))}getContainerElement(){return e("div",{ref:r=>this._container=r,class:this.getContainerClass()},e("slot",null))}clickListener(r){this._controller&&this._controller.didScroll()&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation())}mouseDownHandler(r){this.locked?this.finishDrag():(this._controller||(this._controller=new c(this._container)),this._controller.startDragg(r),this._container.classList.add("dragging"))}mouseUpHandler(){this.finishDrag()}mouseMoveHandler(r){this.locked?this.finishDrag():this._controller&&(0===r.buttons?this.finishDrag():this._controller.doScroll(r))}componentDidRender(){var r,e;if(this.direction===t.BOTH)return null===(r=this._wrapper)||void 0===r||r.classList.remove(this._shadowStart),void(null===(e=this._wrapper)||void 0===e||e.classList.remove(this._shadowEnd));this._container&&this.activeShadow&&(this._container.onscroll=this.updateShadow.bind(this),this.configResize(),this.updateShadow())}render(){return e(o,null,this.activeShadow?e("div",{ref:r=>this._wrapper=r,class:this.getWrapperClass()},this.getContainerElement()):this.getContainerElement())}};class c{constructor(r){this.scrollablePanel=r}startDragg(r){this.startX=this.measureX(r),this.startY=this.measureY(r),this.scrollWidth=0,this.scrollHeight=0}measureX(r){return r.pageX-this.scrollablePanel.offsetLeft}measureY(r){return r.pageY-this.scrollablePanel.offsetTop}doScroll(r){const e=this.measureX(r),o=this.measureY(r);if(e!=this.startX||o!=this.startY){const r=e-this.startX,l=o-this.startY;this.startX+=r,this.startY+=l,this.scrollWidth+=Math.abs(r),this.scrollHeight+=Math.abs(l),this.scrollablePanel.scrollLeft=Math.max(0,this.scrollablePanel.scrollLeft-r),this.scrollablePanel.scrollTop=Math.max(0,this.scrollablePanel.scrollTop-l)}}didScroll(){return this.scrollHeight>5||this.scrollWidth>5}}s.style=':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}.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:100%}.ez-scroller__wrapper--horizontal{flex-direction:row;width:100%;height:auto}.ez-scroller__wrapper--vertical{flex-direction:column;width:auto;height:100%}.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%)}';export{s as ez_scroller}
package/dist/ezui/p-91f8c816.entry.js DELETED
@@ -1 +0,0 @@
1
- import{h as o,r,c as e,H as d,g as n}from"./p-7b80df03.js";import{ElementIDUtils as i,ObjectUtils as l}from"@sankhyalabs/core";const t=({item:r,hasIcon:e,hasChildren:d,isLockedLevels:n,onSubActionClick:i})=>o("div",{class:"ez-dropdown__item-wrapper",title:r.label},a(r,e),o("span",{class:"ez-dropdown__item-label"},r.label),s(r,d,n,i)),a=(r,e)=>{if(null!=r&&e)return o("ez-icon",r.iconName?Object.assign({class:"ez-dropdown__icon-left",iconName:r.iconName,size:"medium"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:`${r.id}_ezDropdownItemIcon`}):{class:"ez-dropdown__icon-left ez-dropdown__hidden",size:"medium"})},s=(r,e,d,n)=>{var l,t;if(null!=r){if(!(null===(l=r.children)||void 0===l?void 0:l.length)&&null!=r.subAction&&Object.keys(r.subAction).length>0)return o("span",Object.assign({onClick:()=>n(r),title:r.subAction.label,class:`ez-dropdown__link ez-dropdown__link--${r.subAction.type||"primary"}`},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:`${r.subAction.id}_ezDropdownItemSubAction`}),r.subAction.label);if(!d&&e)return(null===(t=r.children)||void 0===t?void 0:t.length)>0?o("ez-icon",Object.assign({class:"ez-dropdown__icon-right",iconName:"chevron-right",size:"medium"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:`${r.id}_ezDropdownIconOpenChildren`})):o("ez-icon",{class:"ez-dropdown__icon-right ez-dropdown__hidden",size:"medium"})}};class p{constructor(){}show(o){const r=null==o?void 0:o.querySelector(".ez-dropdown__submenu");null!=o&&null!=r&&(r.classList.remove("ez-dropdown__submenu--hide"),this.setPosition(o),this.setScrollContainer(o),this.setMaxHeight(r))}hide(o){if(null==o)return;const r=o.querySelector(".ez-dropdown__submenu:not(.ez-dropdown__submenu--hide)");this.reset(r),this.hideChild(r)}hideChild(o){null!=o&&o.querySelectorAll(".ez-dropdown__submenu").forEach((o=>{this.reset(o)}))}setPosition(o){const r=null==o?void 0:o.querySelector(".ez-dropdown__submenu"),e=null==o?void 0:o.closest(".ez-dropdown");if(null==r||null==e)return;r.style.top=this.getPositionTop(o),r.style.left=this.getPositionRight(e);const d=null==r?void 0:r.getBoundingClientRect(),n=document.body.clientWidth;(null==d?void 0:d.right)>n&&this.updatePosition(e,r)}setMaxHeight(o){var r;const e=(null==o?void 0:o.shadowRoot)||o,d=null==e?void 0:e.querySelector(".ez-dropdown"),n=document.body.clientHeight;let i,l;if(null!=(null==e?void 0:e.tagName)?(i=e,l=null==i?void 0:i.getBoundingClientRect()):l=null==d?void 0:d.getBoundingClientRect(),null!=d&&null!=l){if(l.y+l.height>n)if(null!=i){const o=i.closest(".ez-dropdown"),e=null==o?void 0:o.getBoundingClientRect(),t=parseFloat((null===(r=getComputedStyle(i))||void 0===r?void 0:r.marginTop)||"0");if(null==o||null==e)return;e.y+l.height>n?(i.style.top=e.y-t+"px",d.style.maxHeight=n-e.y+"px"):i.style.top=n-l.height-t+"px"}else{let o=n-l.y;o<0&&(o=l.height-n),d.style.maxHeight=o+"px"}this.setSpacerContainer(d)}}setSpacerContainer(o){const r=null==o?void 0:o.querySelector(".ez-dropdown__container");null!=r&&(r.scrollHeight>r.clientHeight?r.classList.add("ez-dropdown__container--spacer"):r.classList.remove("ez-dropdown__container--spacer"))}reset(o){if(null==o)return;o.classList.add("ez-dropdown__submenu--hide"),o.style.left="",o.style.top="";const r=o.querySelector(".ez-dropdown");this.resetDropdown(r)}resetDropdown(o){null!=o&&(o.style.maxHeight="",this.setSpacerContainer(o))}setScrollContainer(o){const r=null==o?void 0:o.closest(".ez-dropdown__container");null!=r&&(r.onscroll=this.onScrollContainer.bind(this))}onScrollContainer(o){this.hideChild(null==o?void 0:o.target)}getPositionTop(o){const r=null==o?void 0:o.getBoundingClientRect();if(null!=r)return r.y+"px"}getPositionRight(o){const r=null==o?void 0:o.getBoundingClientRect();if(null!=r)return r.x+r.width+"px"}getPositionLeft(o,r){const e=null==o?void 0:o.getBoundingClientRect(),d=null==r?void 0:r.getBoundingClientRect();if(null!=e&&null!=d)return e.x-d.width+"px"}updatePosition(o,r){const e=null==o?void 0:o.getBoundingClientRect(),d=null==r?void 0:r.getBoundingClientRect();null!=e&&null!=d&&e.x<d.right&&(r.style.left=this.getPositionLeft(o,r),this.updatePosition(o,r))}}let c=class{constructor(o){r(this,o),this.ezClick=e(this,"ezClick",7),this.ezSubActionClick=e(this,"ezSubActionClick",7),this._itemList={},this._submenuList=[],this._openedMenuList={},this._levelLimits=3,this.items=[]}defaultItemBuilder(r,e,d,n){return o(t,{item:r,hasIcon:d,hasChildren:n,isLockedLevels:e,onSubActionClick:this.onSubActionClick.bind(this)})}getMaxOrder(o){return null==o||0===o.length?-1:Math.max(...o.map((o=>{var r;const e=null===(r=o.group)||void 0===r?void 0:r.order;return null!=e&&e>=0?e:-1})))}hasIcon(o){return null==o?void 0:o.some((o=>""!==(o.iconName||"")))}hasGroup(o){return null==o?void 0:o.some((o=>""!==(o.group||"")))}hasChildren(o){return null==o?void 0:o.some((o=>(o.children||[]).length>0))}isLockedLevels(o){return!!this._levelLimits&&o===this._levelLimits+1}getItemsByGroup(o,r){let e={};const d=this.getMaxOrder(o);return o.forEach((o=>{const n=o.group&&null!=o.group.label?o.group.label||"noGroup":o.group||"noGroup";let i=e[n];null==i&&(i={items:[],order:o.group&&null!=o.group.order?o.group.order:o.group?d+1:d+2}),this.validateItem(o,r),i.items.push(o),e[n]=i})),l.sortByProperty(e,"order")}validateItem(o,r){if(null==this._itemList&&(this._itemList={}),null==o.type&&(o.type="item"),null==o.id){const e=`level_${r}_${o.type}`,d=Object.keys(this._itemList).filter((o=>o.includes(e))).length;o.id=`${e}_${d+1}`}null==o.label&&(o.label=""),null!=o.subAction&&(null==o.subAction.id&&(o.subAction.id=`subAction_${o.id}`),null==o.subAction.label&&(o.subAction.label="")),null==this._itemList[o.id]&&(this._itemList[o.id]={})}getItemsRender(r,e,d,n){if(null==r)return;let l=e,t=!1;return n&&(l++,t=this.isLockedLevels(l)),r.map((r=>{var a;return"divider"!==r.type?o("div",Object.assign({ref:o=>this._itemList[r.id]=o,class:"ez-dropdown__item","data-level":e},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:i.getInternalIDInfo(`${r.id}_ezDropdownItem`)}),o("div",{class:"ez-dropdown__item-content",onClick:o=>this.onItemClick(o,r),onMouseOver:o=>this.onShowSubmenu(o,r)},this.itemBuilder?o("div",{class:"ez-dropdown__item-builder",innerHTML:this.itemBuilder(r,e)}):this.defaultItemBuilder(r,t,d,n)),(null===(a=r.children)||void 0===a?void 0:a.length)>0&&!t&&n&&o("div",{ref:o=>this._submenuList.push(o),class:"ez-dropdown__submenu ez-dropdown__submenu--hide"},this.renderDropdown(r.children,l))):o("hr",Object.assign({class:"ez-dropdown__divider"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:`${r.id}_ezDropdownDivider`}))}))}renderDropdown(r=this.items,e=1){if(null==r||this.isLockedLevels(e))return;const d=this.getItemsByGroup(r,e),n=this.hasGroup(r),l=this.hasIcon(r),t=this.hasChildren(r);return o("div",{class:"ez-dropdown","data-level":e},o("div",{class:"ez-dropdown__container"},Object.keys(d).map((r=>o("div",Object.assign({class:"ez-dropdown__group"},{[i.DATA_ELEMENT_ID_ATTRIBUTE_NAME]:i.getInternalIDInfo(`${r}_ezDropdownGroup`)}),"noGroup"!==r&&o("label",{class:"ez-dropdown__group-label",title:r},r),n&&"noGroup"===r&&o("hr",{class:"ez-dropdown__divider"}),this.getItemsRender(d[r].items,e,l,t))))))}hasOpenedSubmenu(o){const r=Object.keys(this._openedMenuList);return r.includes(o.toString())||r.some((r=>Number(r)>o))}hasSubmenuOpened(){var o;return null===(o=this._submenuList)||void 0===o?void 0:o.some((o=>!o.classList.contains("ez-dropdown__submenu--hide")))}setEvents(){document.removeEventListener("click",this.onHideAllSubmenu.bind(this)),document.addEventListener("click",this.onHideAllSubmenu.bind(this)),document.removeEventListener("scroll",this.onSubmenuReposition.bind(this)),document.addEventListener("scroll",this.onSubmenuReposition.bind(this))}onShowSubmenu(o,r){var e;if(null==o)return;const d=this._itemList[r.id];if(!(null==d?void 0:d.classList.contains("ez-dropdown__item")))return;const n=Number(d.dataset.level||"0");this.hasOpenedSubmenu(n)&&(this._submenuControl.hide(this._openedMenuList[n]),delete this._openedMenuList[n]),(null===(e=r.children)||void 0===e?void 0:e.length)&&(this._openedMenuList[d.dataset.level]=d,this._submenuControl.show(d))}onItemClick(o,r){const e=null==o?void 0:o.target;(null==e?void 0:e.classList.contains("ez-dropdown__link"))||(this.value=r,this.ezClick.emit(r))}onSubActionClick(o){this.ezSubActionClick.emit(o.subAction)}onHideAllSubmenu(o){const r=null==o?void 0:o.target;this.hasSubmenuOpened()&&(null==r||!r.closest(".ez-dropdown")&&"EZ-DROPDOWN"!==r.tagName)&&(this._openedMenuList={},this._submenuList.forEach(this._submenuControl.reset.bind(this._submenuControl)))}onSubmenuReposition(){null!=this._openedMenuList&&Object.keys(this._openedMenuList).forEach((o=>{this._submenuControl.setPosition(this._openedMenuList[o])}))}componentDidLoad(){i.addIDInfo(this._element),this._submenuControl=new p,this._submenuControl.setMaxHeight(this._element)}componentDidUpdate(){this._submenuControl.setMaxHeight(this._element)}componentDidRender(){this.setEvents()}render(){return o(d,null,this.renderDropdown())}get _element(){return n(this)}};c.style=":host{--ez-dropdown--z-index:var(--more-visible, 2);--ez-dropdown--padding:var(--space--small, 6px);--ez-dropdown--box-shadow:var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));--ez-dropdown--border-radius:var(--border--radius-medium, 12px);--ez-dropdown--background-color:var(--background--xlight, #fff);--ez-dropdown--font-family:var(--font-pattern, 'Roboto');--ez-dropdown--max-width:320px;--ez-dropdown--max-height:440px;--ez-dropdown__item--padding:var(--space--small, 6px);--ez-dropdown__item--gap:var(--space--small, 6px);--ez-dropdown__item--border-radius:var(--border--radius-small, 6px);--ez-dropdown__item--color:var(--title--primary, #2b3a54);--ez-dropdown__item--font-weight:var(--text-weight--medium, 400);--ez-dropdown__item--font-size:var(--text--medium, 14px);--ez-dropdown__item--line-height:calc(var(--ez-dropdown__item--font-size) + 4px);--ez-dropdown__item--background-color:var(--background--medium, #f0f3f7);--ez-dropdown__item--transition:var(--transition, .2s linear);--ez-dropdown__item-label--margin-right:var(--space--medium, 12px);--ez-dropdown__icon--size:var(--icon--medium, 18px);--ez-dropdown__divider--background-color:var(--color--disable-secondary, #f2f5f8);--ez-dropdown__divider--margin:var(--space--extra-small, 3px) 0;--ez-dropdown__group-label--color:var(--text--secondary, #A2ABB9);--ez-dropdown__group-label--font-weight:var(--text-weight--large, 600);--ez-dropdown__group-label--font-size:var(--text--small, 12px);--ez-dropdown__group-label--line-height:var(--text--medium, 14px);--ez-dropdown__group-label--padding:var(--space--small, 6px);--ez-dropdown__submenu--z-index:var(--most-visible, 3);--ez-dropdown__link--font-weight:var(--text-weight--large, 600);--ez-dropdown__link--primary--color:var(--color--primary, #008561);--ez-dropdown__link--critical--color:var(--color-alert--error-800, #BD0025);--ez-dropdown__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-dropdown__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-dropdown__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-dropdown__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-dropdown__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-dropdown__scrollbar--width:var(--space--small, 6px);--ez-dropdown__scrollbar--padding-right:var(--space--extra-small, 3px);display:flex;flex-direction:column;height:fit-content;user-select:none;box-sizing:border-box;position:fixed;z-index:var(--ez-dropdown--z-index)}:host *{box-sizing:border-box}.ez-dropdown{display:flex;padding:var(--ez-dropdown--padding);box-shadow:var(--ez-dropdown--box-shadow);border-radius:var(--ez-dropdown--border-radius);background-color:var(--ez-dropdown--background-color);max-width:var(--ez-dropdown--max-width);max-height:var(--ez-dropdown--max-height)}.ez-dropdown *{font-family:var(--ez-dropdown--font-family)}.ez-dropdown__container{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;flex:auto;scrollbar-color:var(--ez-dropdown__scrollbar--color-clicked) var(--ez-dropdown__scrollbar--color-background)}.ez-dropdown__container::-webkit-scrollbar{background-color:var(--ez-dropdown__scrollbar--color-background);width:var(--ez-dropdown__scrollbar--width);max-width:var(--ez-dropdown__scrollbar--width);min-width:var(--ez-dropdown__scrollbar--width)}.ez-dropdown__container::-webkit-scrollbar-track{background-color:var(--ez-dropdown__scrollbar--color-background);border-radius:var(--ez-dropdown__scrollbar--border-radius)}.ez-dropdown__container::-webkit-scrollbar-thumb{background-color:var(--ez-dropdown__scrollbar--color-default);border-radius:var(--ez-dropdown__scrollbar--border-radius)}.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:hover,.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-dropdown__scrollbar--color-hover)}.ez-dropdown__container::-webkit-scrollbar-thumb:vertical:active,.ez-dropdown__container::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-dropdown__scrollbar--color-clicked)}.ez-dropdown__container--spacer{padding-right:var(--ez-dropdown__scrollbar--padding-right)}.ez-dropdown__item{display:flex;align-items:center;background-color:transparent;border-radius:var(--ez-dropdown__item--border-radius);transition:var(--ez-dropdown__item--transition)}.ez-dropdown__item:hover{background-color:var(--ez-dropdown__item--background-color)}.ez-dropdown__item-wrapper{display:flex;align-items:center;position:relative;cursor:pointer;width:100%;margin:0;white-space:nowrap;gap:var(--ez-dropdown__item--gap);color:var(--ez-dropdown__item--color);font-weight:var(--ez-dropdown__item--font-weight);font-size:var(--ez-dropdown__item--font-size);line-height:var(--ez-dropdown__item--line-height);padding:var(--ez-dropdown__item--padding)}.ez-dropdown__item-wrapper ez-icon{display:flex;justify-content:center;align-items:center;width:var(--ez-dropdown__icon--size);height:var(--ez-dropdown__icon--size);min-width:var(--ez-dropdown__icon--size);min-height:var(--ez-dropdown__icon--size)}.ez-dropdown__item-content{display:flex;align-items:center;flex:auto;overflow:hidden;gap:var(--ez-dropdown__item--gap)}.ez-dropdown__item-label{text-align:left;text-overflow:ellipsis;overflow:hidden;flex:auto}.ez-dropdown__item-label:not(:last-child){margin-right:var(--ez-dropdown__item-label--margin-right)}.ez-dropdown__item-content+.ez-dropdown__link{margin-left:var(--ez-dropdown__item-label--margin-right);margin-right:var(--ez-dropdown__item--padding)}.ez-dropdown__item-builder{flex:auto}.ez-dropdown__divider{width:100%;height:2px;border-radius:1px;border:none;display:block;background-color:var(--ez-dropdown__divider--background-color);margin:var(--ez-dropdown__divider--margin)}.ez-dropdown__hidden{visibility:hidden}.ez-dropdown__group{display:flex;flex-direction:column}.ez-dropdown__group-label{display:block;width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ez-dropdown__group-label--color);font-weight:var(--ez-dropdown__group-label--font-weight);font-size:var(--ez-dropdown__group-label--font-size);line-height:var(--ez-dropdown__group-label--line-height);padding:var(--ez-dropdown__group-label--padding)}.ez-dropdown__icon-right{margin-left:auto}.ez-dropdown__submenu{position:fixed;z-index:var(--ez-dropdown__submenu--z-index);margin-top:calc(var(--ez-dropdown__item--padding) * -1)}.ez-dropdown__submenu--hide{display:none}.ez-dropdown__link{display:block;margin-left:auto;cursor:pointer;text-overflow:ellipsis;overflow:hidden;font-weight:var(--ez-dropdown__link--font-weight);max-width:calc(var(--ez-dropdown--max-width) * 0.43)}.ez-dropdown__link--primary{color:var(--ez-dropdown__link--primary--color)}.ez-dropdown__link--critical{color:var(--ez-dropdown__link--critical--color)}.ez-dropdown__link:hover{text-decoration:underline}";export{c as ez_dropdown}