@sankhyalabs/ezui 0.0.0-feat-dev-KB-83113.2 → 0.0.0-feat-dev-KB-81491.2

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 (85) hide show
  1. package/dist/cjs/ez-badge.cjs.entry.js +14 -2
  2. package/dist/cjs/ez-calendar.cjs.entry.js +1 -13
  3. package/dist/cjs/ez-combo-box-list_3.cjs.entry.js +366 -0
  4. package/dist/cjs/ez-combo-box.cjs.entry.js +58 -184
  5. package/dist/cjs/ez-date-input.cjs.entry.js +4 -17
  6. package/dist/cjs/ez-date-time-input.cjs.entry.js +4 -16
  7. package/dist/cjs/ez-form-view.cjs.entry.js +1 -1
  8. package/dist/cjs/ez-grid.cjs.entry.js +119 -31
  9. package/dist/cjs/ez-multi-selection-list.cjs.entry.js +186 -0
  10. package/dist/cjs/{ez-multi-selection-list_2.cjs.entry.js → ez-popover-core_2.cjs.entry.js} +115 -196
  11. package/dist/cjs/ezui.cjs.js +1 -1
  12. package/dist/cjs/index-a7b0c73d.js +8 -4
  13. package/dist/cjs/loader.cjs.js +1 -1
  14. package/dist/collection/collection-manifest.json +2 -0
  15. package/dist/collection/components/ez-badge/ez-badge.css +12 -1
  16. package/dist/collection/components/ez-badge/ez-badge.js +31 -1
  17. package/dist/collection/components/ez-calendar/ez-calendar.js +1 -22
  18. package/dist/collection/components/ez-combo-box/ez-combo-box-list/ez-combo-box-list.css +205 -0
  19. package/dist/collection/components/ez-combo-box/ez-combo-box-list/ez-combo-box-list.js +405 -0
  20. package/dist/collection/components/ez-combo-box/ez-combo-box.css +0 -250
  21. package/dist/collection/components/ez-combo-box/ez-combo-box.js +61 -194
  22. package/dist/collection/components/ez-date-input/ez-date-input.js +4 -17
  23. package/dist/collection/components/ez-date-time-input/ez-date-time-input.js +4 -16
  24. package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js +1 -1
  25. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +5 -0
  26. package/dist/collection/components/ez-grid/ez-grid.js +59 -7
  27. package/dist/collection/components/ez-grid/utils/ColumnFilterManager.js +54 -7
  28. package/dist/collection/components/ez-grid/utils/InMemoryFilterColumnDataSource.js +4 -20
  29. package/dist/collection/components/ez-popover-plus/ez-popover-plus.css +0 -64
  30. package/dist/collection/components/ez-popover-plus/ez-popover-plus.js +47 -127
  31. package/dist/collection/components/ez-popover-plus/subcomponent/ez-popover-core.css +67 -0
  32. package/dist/collection/components/ez-popover-plus/subcomponent/ez-popover-core.js +468 -0
  33. package/dist/custom-elements/index.d.ts +12 -0
  34. package/dist/custom-elements/index.js +458 -286
  35. package/dist/esm/ez-badge.entry.js +14 -2
  36. package/dist/esm/ez-calendar.entry.js +1 -13
  37. package/dist/esm/ez-combo-box-list_3.entry.js +360 -0
  38. package/dist/esm/ez-combo-box.entry.js +59 -185
  39. package/dist/esm/ez-date-input.entry.js +4 -17
  40. package/dist/esm/ez-date-time-input.entry.js +4 -16
  41. package/dist/esm/ez-form-view.entry.js +1 -1
  42. package/dist/esm/ez-grid.entry.js +120 -32
  43. package/dist/esm/ez-multi-selection-list.entry.js +182 -0
  44. package/dist/esm/{ez-multi-selection-list_2.entry.js → ez-popover-core_2.entry.js} +116 -197
  45. package/dist/esm/ezui.js +1 -1
  46. package/dist/esm/index-baa5e267.js +8 -4
  47. package/dist/esm/loader.js +1 -1
  48. package/dist/ezui/ezui.esm.js +1 -1
  49. package/dist/ezui/p-0021df6a.entry.js +1 -0
  50. package/dist/ezui/p-15134d97.entry.js +1 -0
  51. package/dist/ezui/p-20cb13fa.entry.js +1 -0
  52. package/dist/ezui/p-23b6128c.entry.js +1 -0
  53. package/dist/ezui/p-336de13a.entry.js +1 -0
  54. package/dist/ezui/{p-52e2235a.entry.js → p-664b91e8.entry.js} +2 -2
  55. package/dist/ezui/p-dc73e1fe.entry.js +1 -0
  56. package/dist/ezui/p-dcf3c8e5.entry.js +1 -0
  57. package/dist/ezui/p-e75c7a23.entry.js +1 -0
  58. package/dist/ezui/p-f5931caa.entry.js +1 -0
  59. package/dist/types/components/ez-badge/ez-badge.d.ts +5 -0
  60. package/dist/types/components/ez-calendar/ez-calendar.d.ts +2 -4
  61. package/dist/types/components/ez-combo-box/ez-combo-box-list/ez-combo-box-list.d.ts +104 -0
  62. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +7 -16
  63. package/dist/types/components/ez-date-input/ez-date-input.d.ts +2 -2
  64. package/dist/types/components/ez-date-time-input/ez-date-time-input.d.ts +2 -2
  65. package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +1 -0
  66. package/dist/types/components/ez-grid/ez-grid.d.ts +5 -0
  67. package/dist/types/components/ez-grid/utils/ColumnFilterManager.d.ts +1 -1
  68. package/dist/types/components/ez-grid/utils/InMemoryFilterColumnDataSource.d.ts +0 -3
  69. package/dist/types/components/ez-popover-plus/ez-popover-plus.d.ts +6 -19
  70. package/dist/types/components/ez-popover-plus/subcomponent/ez-popover-core.d.ts +81 -0
  71. package/dist/types/components.d.ts +226 -3
  72. package/package.json +1 -1
  73. package/react/components.d.ts +2 -0
  74. package/react/components.js +2 -0
  75. package/react/components.js.map +1 -1
  76. package/dist/cjs/ez-custom-form-input_2.cjs.entry.js +0 -236
  77. package/dist/esm/ez-custom-form-input_2.entry.js +0 -231
  78. package/dist/ezui/p-0306dff7.entry.js +0 -1
  79. package/dist/ezui/p-0faf71c5.entry.js +0 -1
  80. package/dist/ezui/p-64b461b3.entry.js +0 -1
  81. package/dist/ezui/p-650e4b6d.entry.js +0 -1
  82. package/dist/ezui/p-b26f6c5b.entry.js +0 -1
  83. package/dist/ezui/p-cdac80f1.entry.js +0 -1
  84. package/dist/ezui/p-d9548bdf.entry.js +0 -1
  85. package/dist/ezui/p-dc8b36c3.entry.js +0 -1
@@ -15,7 +15,7 @@ var Sizes;
15
15
  Sizes["EXTRA_SMALL"] = "extra-small";
16
16
  })(Sizes || (Sizes = {}));
17
17
 
18
- const ezBadgeCss = ":host{--ez-badge--size-2xs:var(--space--2xs, 8px);--ez-badge--size-xs:var(--space--xs, 12px);--ez-badge--size-sm:var(--space--sm, 16px);--ez-badge--size-md:var(--space--md, 20px);--ez-badge--size-lg:var(--space--lg, 24px);--ez-badge--size-xl:var(--space--xl, 32px);--ez-badge--padding-2xs:0;--ez-badge--padding-xs:var(--space--nano, 2px);--ez-badge--padding-sm:calc(var(--space--nano, 2px) + 1px);--ez-badge--padding-md:var(--space--3xs, 4px);--ez-badge--padding-lg:calc(var(--space--3xs, 4px) + 2px);--ez-badge--padding-xl:var(--space--2xs);--ez-badge--border-radius:calc(var(--border--radius-medium, 12px) + 8px);--ez-badge--font-family:var(--font-pattern, Roboto);--ez-badge--font-weight-medium:var(--text-weight--medium, 400);--ez-badge--background-color:var(--color--primary, #008561);--ez-badge--border-none:0;--ez-badge--color:var(--text--inverted, #ffffff);--ez-badge--gap:calc(var(--ez-badge--padding-xs) + 1px);--ez-badge--font-size-md:var(--text--medium);--ez-badge--font-size-sm:var(--text--medium);--ez-badge--font-size-xs:var(--text--small)}ez-icon{--ez-icon--color:inherit}.badge{display:flex;justify-content:center;align-items:center;position:relative}.badge__content{font-family:var(--ez-badge--font-family, Roboto);font-weight:var(--ez-badge--font-weight-medium, 400);background-color:var(--ez-badge--background-color, #008561);border:var(--ez-badge--border-none, 0);color:var(--ez-badge--color, #ffffff);border-radius:var(--ez-badge--border-radius, 20px);gap:var(--ez-badge--gap, 3px);display:flex;justify-content:center;align-items:center}.badge__content--fill-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px)}.badge__content--fill-2xs{height:var(--ez-badge--size-2xs, 8px);min-width:var(--ez-badge--size-2xs, 8px)}.badge__content--text-md{height:calc(var(--ez-badge--size-md, 20px) - 2px);min-width:var(--ez-badge--size-sm, 20px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-md)}.badge__content--text-sm{height:calc(var(--ez-badge--size-sm, 16px) - 2px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-sm)}.badge__content--text-xs{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-2xs);padding-bottom:var(--ez-badge--padding-2xs);padding-right:var(--ez-badge--padding-lg);padding-left:var(--ez-badge--padding-lg);font-size:var(--ez-badge--font-size-xs)}.badge__content--icon-lg{height:var(--ez-badge--size-lg, 24px);min-width:var(--ez-badge--size-lg, 24px);padding:var(--ez-badge--padding-md)}.badge__content--icon-md{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-md)}.badge__content--icon-sm{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-xs)}.badge__content--icon-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px);padding:var(--ez-badge--padding-xs)}.badge__content--fill{position:absolute;top:0;inset-inline-end:0;z-index:var(--most-visible, 2)}.badge__content--fill-top-right{transform:translate(50%, -50%);position:absolute;top:0;right:0}.badge__content--fill-top-left{transform:translate(-50%, -50%);position:absolute;top:0;left:0}.badge__content--fill-bottom-left{transform:translate(-50%, 50%);position:absolute;bottom:0;left:0}.badge__content--fill-bottom-right{transform:translate(50%, 50%);position:absolute;bottom:0;right:0}";
18
+ const ezBadgeCss = ":host{--ez-badge--size-2xs:var(--space--2xs, 8px);--ez-badge--size-xs:var(--space--xs, 12px);--ez-badge--size-sm:var(--space--sm, 16px);--ez-badge--size-md:var(--space--md, 20px);--ez-badge--size-lg:var(--space--lg, 24px);--ez-badge--size-xl:var(--space--xl, 32px);--ez-badge--padding-2xs:0;--ez-badge--padding-xs:var(--space--nano, 2px);--ez-badge--padding-sm:calc(var(--space--nano, 2px) + 1px);--ez-badge--padding-md:var(--space--3xs, 4px);--ez-badge--padding-lg:calc(var(--space--3xs, 4px) + 2px);--ez-badge--padding-xl:var(--space--2xs);--ez-badge--border-radius:calc(var(--border--radius-medium, 12px) + 8px);--ez-badge--font-family:var(--font-pattern, Roboto);--ez-badge--font-weight-medium:var(--text-weight--medium, 400);--ez-badge--background-color:var(--color--primary, #008561);--ez-badge--border-none:0;--ez-badge--color:var(--text--inverted, #ffffff);--ez-badge--gap:calc(var(--ez-badge--padding-xs) + 1px);--ez-badge--font-size-md:var(--text--medium);--ez-badge--font-size-sm:var(--text--medium);--ez-badge--font-size-xs:var(--text--small)}ez-icon{--ez-icon--color:inherit}.badge{display:flex;justify-content:center;align-items:center;position:relative}.badge__content{font-family:var(--ez-badge--font-family, Roboto);font-weight:var(--ez-badge--font-weight-medium, 400);background-color:var(--ez-badge--background-color, #008561);border:var(--ez-badge--border-none, 0);color:var(--ez-badge--color, #ffffff);border-radius:var(--ez-badge--border-radius, 20px);gap:var(--ez-badge--gap, 3px);display:flex;justify-content:center}.badge__content--fill-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px)}.badge__content--fill-2xs{height:var(--ez-badge--size-2xs, 8px);min-width:var(--ez-badge--size-2xs, 8px)}.badge__content--text-md{height:calc(var(--ez-badge--size-md, 20px) - 2px);min-width:var(--ez-badge--size-sm, 20px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-md)}.badge__content--text-sm{height:calc(var(--ez-badge--size-sm, 16px) - 2px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-sm)}.badge__content--text-xs{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-2xs);padding-bottom:var(--ez-badge--padding-2xs);padding-right:var(--ez-badge--padding-lg);padding-left:var(--ez-badge--padding-lg);font-size:var(--ez-badge--font-size-xs)}.badge__content--icon-lg{height:var(--ez-badge--size-lg, 24px);min-width:var(--ez-badge--size-lg, 24px);padding:var(--ez-badge--padding-md)}.badge__content--icon-md{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-md)}.badge__content--icon-sm{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-xs)}.badge__content--icon-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px);padding:var(--ez-badge--padding-xs)}.badge__content--icon-align-center{align-items:center}.badge__content--icon-align-start{align-items:flex-start}.badge__content--icon-align-end{align-items:flex-end}.badge__content--fill{position:absolute;top:0;inset-inline-end:0;z-index:var(--most-visible, 2)}.badge__content--fill-top-right{transform:translate(50%, -50%);position:absolute;top:0;right:0}.badge__content--fill-top-left{transform:translate(-50%, -50%);position:absolute;top:0;left:0}.badge__content--fill-bottom-left{transform:translate(-50%, 50%);position:absolute;bottom:0;left:0}.badge__content--fill-bottom-right{transform:translate(50%, 50%);position:absolute;bottom:0;right:0}";
19
19
 
20
20
  const EzBadge = class {
21
21
  constructor(hostRef) {
@@ -46,6 +46,7 @@ const EzBadge = class {
46
46
  this.iconLeft = undefined;
47
47
  this.iconRight = undefined;
48
48
  this.position = { horizontal: "right", vertical: "top" };
49
+ this.alignItems = "center";
49
50
  }
50
51
  getIconSize() {
51
52
  switch (this.size) {
@@ -60,6 +61,16 @@ const EzBadge = class {
60
61
  return null;
61
62
  }
62
63
  }
64
+ getAlignItemsClass() {
65
+ switch (this.alignItems) {
66
+ case "flex-end":
67
+ return "end";
68
+ case "flex-start":
69
+ return "start";
70
+ default:
71
+ return "center";
72
+ }
73
+ }
63
74
  componentDidLoad() {
64
75
  if (this._element) {
65
76
  core.ElementIDUtils.addIDInfo(this._element);
@@ -83,7 +94,8 @@ const EzBadge = class {
83
94
  }
84
95
  createContainerClassName() {
85
96
  let sizeSufix = this._sizes[this.size].sufix;
86
- let containerClassNames = ["badge__content"];
97
+ let alignItemsClass = "badge__content--icon-align-" + this.getAlignItemsClass();
98
+ let containerClassNames = ["badge__content", alignItemsClass];
87
99
  if (this.hasSlot) {
88
100
  containerClassNames.push("badge__content--fill-" + sizeSufix);
89
101
  if (this.position.vertical == "bottom" && this.position.horizontal == "right") {
@@ -11,7 +11,6 @@ const EzCalendar = class {
11
11
  constructor(hostRef) {
12
12
  index.registerInstance(this, hostRef);
13
13
  this.ezChange = index.createEvent(this, "ezChange", 7);
14
- this._firstRender = true;
15
14
  this._todayLabel = "Hoje";
16
15
  this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
17
16
  this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
@@ -82,11 +81,6 @@ const EzCalendar = class {
82
81
  this._currentPosition.setDate(1);
83
82
  }
84
83
  }
85
- scrollListener() {
86
- if (this.floating && this.isFixed()) {
87
- this.hide();
88
- }
89
- }
90
84
  isFixed() {
91
85
  return this._hostElem.dataset.isFixed === "true";
92
86
  }
@@ -152,12 +146,6 @@ const EzCalendar = class {
152
146
  }
153
147
  }
154
148
  componentDidRender() {
155
- if (this.floating && this._firstRender) {
156
- this._calendarHeight = this._box.clientHeight;
157
- this._calendarWidth = this._box.clientWidth;
158
- this._box.remove();
159
- this._firstRender = false;
160
- }
161
149
  this.updateScroll(this._hoursScroll);
162
150
  this.updateScroll(this._minutesScroll);
163
151
  this.updateScroll(this._secondsScroll);
@@ -188,7 +176,7 @@ const EzCalendar = class {
188
176
  const firstDate = new Date();
189
177
  firstDate.setTime(this._currentPosition.getTime());
190
178
  firstDate.setDate(1 - firstDate.getDay());
191
- return (index.h("section", { ref: elem => this._container = elem }, index.h("div", { ref: elem => this._box = elem, class: "calendar__container" }, index.h("div", { class: "calendar" }, index.h("div", { class: "calendar__header" }, index.h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), index.h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), index.h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), index.h("div", { class: "calendar__body" }, index.h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => index.h("div", { "data-day": day, class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => index.h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index$1 => {
179
+ return (index.h("section", null, index.h("div", { class: "calendar__container" }, index.h("div", { class: "calendar" }, index.h("div", { class: "calendar__header" }, index.h("button", { class: "calendar__btn-previous", onClick: () => this.changeMonth(-1) }), index.h("label", { class: "calendar__lbl-month" }, this.getMonthLabel()), index.h("button", { class: "calendar__btn-next", onClick: () => this.changeMonth(1) })), index.h("div", { class: "calendar__body" }, index.h("div", { class: "calendar__line" }, this._weekDayLabels.map(day => index.h("div", { "data-day": day, class: "calendar__cell calendar__cell--unselectable" }, day))), [0, 7, 14, 21, 28, 35].map(offset => index.h("div", { class: "calendar__line" }, [0, 1, 2, 3, 4, 5, 6].map(index$1 => {
192
180
  const date = new Date();
193
181
  date.setTime(firstDate.getTime());
194
182
  date.setDate(date.getDate() + offset + index$1);
@@ -0,0 +1,366 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-a7b0c73d.js');
6
+ const core = require('@sankhyalabs/core');
7
+ const ICustomRender = require('./ICustomRender-6fafffce.js');
8
+ const ApplicationUtils = require('./ApplicationUtils-c9d1205c.js');
9
+ require('./DialogType-2114c337.js');
10
+ require('./CheckMode-ecb90b87.js');
11
+
12
+ const ezComboBoxListCss = ":host{--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);--ez-combo-box__list-container--padding:var(--space--extra-small, 3px)}.list-container{padding-top:var(--ez-combo-box__list-container--padding)}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow--medium, 0 8px 24px 0 rgba(43, 58, 84, 0.10));padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
13
+
14
+ const EzComboBoxList = class {
15
+ constructor(hostRef) {
16
+ index.registerInstance(this, hostRef);
17
+ this.showLoading = undefined;
18
+ this.visibleOptions = undefined;
19
+ this.textEmptyList = "Nenhum resultado encontrado";
20
+ this.showOptionValue = undefined;
21
+ this.preSelection = undefined;
22
+ this.maxWidth = undefined;
23
+ this.width = undefined;
24
+ this.onOptionSelect = undefined;
25
+ this.onOptionHover = undefined;
26
+ }
27
+ /**
28
+ * Move a seleção para a próxima opção na lista.
29
+ */
30
+ async nextOption() {
31
+ this.preSelection = this.preSelection === undefined ? 0 : Math.min(this.preSelection + 1, this.visibleOptions.length - 1);
32
+ this.scrollToOption(this.visibleOptions[this.preSelection]);
33
+ }
34
+ /**
35
+ * Move a seleção para a opção anterior na lista.
36
+ */
37
+ async previousOption() {
38
+ this.preSelection = this.preSelection === undefined ? 0 : Math.max(this.preSelection - 1, 0);
39
+ this.scrollToOption(this.visibleOptions[this.preSelection]);
40
+ }
41
+ /**
42
+ * Seleciona a opção atualmente pré-selecionada.
43
+ */
44
+ async selectCurrentOption() {
45
+ if (this.preSelection !== undefined) {
46
+ this.onOptionSelect(this.visibleOptions[this.preSelection]);
47
+ this.preSelection = undefined;
48
+ }
49
+ }
50
+ /**
51
+ * Observa mudanças na propriedade `width` e ajusta a largura da lista.
52
+ *
53
+ * @param newValue O novo valor da largura.
54
+ * @param oldValue O valor anterior da largura.
55
+ */
56
+ observeWidth(newValue, oldValue) {
57
+ if (newValue === oldValue)
58
+ return;
59
+ if (!this._listWrapper)
60
+ return;
61
+ this._listWrapper.style.width = `${this.width}px`;
62
+ }
63
+ /**
64
+ * Observa mudanças na propriedade `maxWidth` e ajusta a largura máxima da lista.
65
+ *
66
+ * @param newValue O novo valor da largura máxima.
67
+ * @param oldValue O valor anterior da largura máxima.
68
+ */
69
+ observeMaxWidth(newValue, oldValue) {
70
+ if (newValue === oldValue)
71
+ return;
72
+ if (!this._listWrapper)
73
+ return;
74
+ this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
75
+ }
76
+ /**
77
+ * Gerencia a navegação por teclado na lista do combo box.
78
+ *
79
+ * - `ArrowDown`: Move para a próxima opção.
80
+ * - `ArrowUp`: Move para a opção anterior.
81
+ * - `Enter`: Seleciona a opção atual.
82
+ * - `Escape`: Limpa a pré-seleção.
83
+ *
84
+ * @param event O evento de teclado.
85
+ */
86
+ handleKeyDown(event) {
87
+ switch (event.key) {
88
+ case "ArrowDown":
89
+ event.preventDefault();
90
+ event.stopPropagation();
91
+ this.nextOption();
92
+ break;
93
+ case "ArrowUp":
94
+ event.preventDefault();
95
+ event.stopPropagation();
96
+ this.previousOption();
97
+ break;
98
+ case "Enter":
99
+ this.selectCurrentOption();
100
+ break;
101
+ case "Escape":
102
+ this.preSelection = undefined;
103
+ break;
104
+ }
105
+ }
106
+ buildItem(opt, index$1) {
107
+ const widthValue = this.showOptionValue && this.maxWidth > 0 ? `${this.maxWidth}px` : '';
108
+ opt.label = opt.label || opt.value;
109
+ return index.h("li", { class: index$1 === this.preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.onOptionSelect(opt), onMouseOver: () => this.preSelection = index$1 }, this.showOptionValue
110
+ ? index.h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
111
+ : undefined, index.h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
112
+ }
113
+ scrollToOption(opt) {
114
+ window.requestAnimationFrame(() => {
115
+ const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[ <>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
116
+ if (liElem)
117
+ liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
118
+ });
119
+ }
120
+ componentDidLoad() {
121
+ this._listWrapper.style.width = `${this.width}px`;
122
+ this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
123
+ }
124
+ componentDidRender() {
125
+ var _a;
126
+ (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
127
+ core.ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
128
+ });
129
+ }
130
+ render() {
131
+ return (index.h("section", { class: "list-container" }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading && this.visibleOptions.length === 0 && (index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this.textEmptyList))), this.showLoading && (index.h("div", { class: "message" }, index.h("div", { class: "message__loading" }))), this.showOptionValue && (index.h("span", { class: "item__value item__value--hidden" })), !this.showLoading && this.visibleOptions.length > 0 &&
132
+ this.visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
133
+ }
134
+ static get watchers() { return {
135
+ "width": ["observeWidth"],
136
+ "maxWidth": ["observeMaxWidth"]
137
+ }; }
138
+ };
139
+ EzComboBoxList.style = ezComboBoxListCss;
140
+
141
+ const EzCustomFormInput = class {
142
+ constructor(hostRef) {
143
+ index.registerInstance(this, hostRef);
144
+ this.gui = undefined;
145
+ this.customEditor = undefined;
146
+ this.formViewField = undefined;
147
+ this.value = undefined;
148
+ this.detailContext = undefined;
149
+ this.builderFallback = undefined;
150
+ this.selectedRecord = undefined;
151
+ }
152
+ /**
153
+ * Aplica foco no campo.
154
+ */
155
+ async setFocus() {
156
+ var _a, _b;
157
+ (_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["setFocus"]) === null || _b === void 0 ? void 0 : _b.call(_a);
158
+ }
159
+ /**
160
+ * Remove o foco do campo.
161
+ */
162
+ async setBlur() {
163
+ var _a, _b;
164
+ (_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["setBlur"]) === null || _b === void 0 ? void 0 : _b.call(_a);
165
+ }
166
+ /**
167
+ * Retorna se o conteúdo é inválido.
168
+ */
169
+ async isInvalid() {
170
+ var _a, _b;
171
+ return ((_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["isInvalid"]) === null || _b === void 0 ? void 0 : _b.call(_a)) || false;
172
+ }
173
+ watchValue() {
174
+ this.handleValue(this.gui);
175
+ }
176
+ watchCustomEditor() {
177
+ this.getContent();
178
+ }
179
+ watchFormViewField(newValue, oldValue) {
180
+ if (!core.ObjectUtils.equals(newValue, oldValue))
181
+ this.getContent();
182
+ }
183
+ watchDetailContext() {
184
+ this.getContent();
185
+ }
186
+ watchBuilderFallback() {
187
+ this.getContent();
188
+ }
189
+ watchSelectedRecord(newValue, oldValue) {
190
+ const newRecordId = newValue === null || newValue === void 0 ? void 0 : newValue['__record__id__'];
191
+ const oldRecordId = oldValue === null || oldValue === void 0 ? void 0 : oldValue['__record__id__'];
192
+ if (newRecordId !== oldRecordId) {
193
+ this.getContent();
194
+ }
195
+ }
196
+ getContent() {
197
+ var _a, _b, _c, _d, _e;
198
+ const fieldProps = new Map();
199
+ for (const prop in this.formViewField.props) {
200
+ fieldProps.set(prop, this.formViewField.props[prop]);
201
+ }
202
+ const params = {
203
+ value: this.value,
204
+ name: this.formViewField.name,
205
+ currentEditor: this.builderFallback(this.formViewField),
206
+ setValue: (value) => this.setValue(value),
207
+ getValue: this.getValue,
208
+ record: this.selectedRecord,
209
+ editorMetadata: {
210
+ label: this.formViewField.label,
211
+ hidden: ((_a = this.formViewField.props) === null || _a === void 0 ? void 0 : _a.visible) === false,
212
+ userInterface: this.formViewField.userInterface,
213
+ options: (_b = this.formViewField.props) === null || _b === void 0 ? void 0 : _b.options,
214
+ props: this.formViewField.props ? fieldProps : undefined,
215
+ optionLoader: this.formViewField.optionLoader
216
+ },
217
+ source: ICustomRender.CustomEditorSource.FORM,
218
+ detailContext: this.detailContext
219
+ };
220
+ let gui = this.customEditor.getEditorElement(params);
221
+ if (!gui) {
222
+ gui = this.builderFallback(this.formViewField);
223
+ this.handleValue(gui);
224
+ this.gui = gui;
225
+ return;
226
+ }
227
+ if (!(gui instanceof HTMLElement) && typeof gui !== 'string') {
228
+ this.handleValue(gui);
229
+ this.gui = gui;
230
+ return;
231
+ }
232
+ if (typeof gui === 'string') {
233
+ gui = core.HTMLBuilder.parseElement(gui);
234
+ }
235
+ const value = (_e = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : this.value) !== null && _e !== void 0 ? _e : '';
236
+ gui.setAttribute('value', value);
237
+ this.gui = index.h("div", { key: core.StringUtils.generateUUID(), ref: el => el && el.appendChild(gui) });
238
+ }
239
+ setValue(value) {
240
+ this.value = value;
241
+ }
242
+ getValue() {
243
+ return this.value;
244
+ }
245
+ handleValue(gui) {
246
+ var _a;
247
+ //@ts-ignore
248
+ (_a = gui.$children$) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
249
+ child.$attrs$.value = this.value;
250
+ });
251
+ }
252
+ componentWillLoad() {
253
+ this.getContent();
254
+ }
255
+ render() {
256
+ return (index.h(index.Host, null, this.gui));
257
+ }
258
+ static get watchers() { return {
259
+ "value": ["watchValue"],
260
+ "customEditor": ["watchCustomEditor"],
261
+ "formViewField": ["watchFormViewField"],
262
+ "detailContext": ["watchDetailContext"],
263
+ "builderFallback": ["watchBuilderFallback"],
264
+ "selectedRecord": ["watchSelectedRecord"]
265
+ }; }
266
+ };
267
+
268
+ const ezTextEditCss = ":host{display:flex;align-items:center;gap:5px}.text-edit__form-input{width:auto;--ez-text-input__input--padding:0px}.text-edit__hidden-value{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}";
269
+
270
+ const EzTextEdit = class {
271
+ constructor(hostRef) {
272
+ index.registerInstance(this, hostRef);
273
+ this.saveEdition = index.createEvent(this, "saveEdition", 7);
274
+ this.cancelEdition = index.createEvent(this, "cancelEdition", 7);
275
+ this._newValue = undefined;
276
+ this.value = undefined;
277
+ this.styled = undefined;
278
+ }
279
+ /**
280
+ * Aplica foco no campo.
281
+ */
282
+ async applyFocusSelect() {
283
+ this.calcSizeInput(this.value, true);
284
+ }
285
+ calcSizeInput(value, setSelect = false) {
286
+ var _a, _b;
287
+ const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
288
+ if (textInput != undefined) {
289
+ const sizeText = this.getWidthValue(value);
290
+ textInput.style.width = sizeText + 'px';
291
+ if (setSelect) {
292
+ setTimeout(() => textInput.select(), 100);
293
+ }
294
+ }
295
+ }
296
+ getWidthValue(value) {
297
+ if (this._valueBasis != undefined) {
298
+ const span = this._valueBasis;
299
+ if (value != undefined) {
300
+ const cursorSpace = 2;
301
+ span.innerHTML = value;
302
+ return span.clientWidth > 0 ? (span.clientWidth + cursorSpace) : cursorSpace;
303
+ }
304
+ else {
305
+ span.innerHTML = "";
306
+ }
307
+ }
308
+ return 0;
309
+ }
310
+ setStyledInput() {
311
+ var _a, _b;
312
+ let fontSize = "";
313
+ let fontWeight = "";
314
+ let fontFamily = "";
315
+ if (this.styled != undefined) {
316
+ fontSize = this.styled.fontSize;
317
+ fontWeight = this.styled.fontWeight;
318
+ fontFamily = this.styled.fontFamily;
319
+ }
320
+ const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
321
+ if (textInput != undefined) {
322
+ textInput.style.fontSize = fontSize;
323
+ textInput.style.fontWeight = fontWeight;
324
+ textInput.style.fontFamily = fontFamily;
325
+ }
326
+ const span = this._valueBasis;
327
+ if (span != undefined) {
328
+ span.style.fontSize = fontSize;
329
+ span.style.fontWeight = fontWeight;
330
+ span.style.fontFamily = fontFamily;
331
+ }
332
+ }
333
+ handleSaveEdition() {
334
+ if (!this._newValue) {
335
+ ApplicationUtils.ApplicationUtils.alert("Aviso", "Não é possível salvar um campo em branco.").then(() => {
336
+ this.setNewValue(this.value, true);
337
+ });
338
+ return;
339
+ }
340
+ this.saveEdition.emit({ value: this.value, newValue: this._newValue });
341
+ }
342
+ handleCancelEdition() {
343
+ this.cancelEdition.emit();
344
+ }
345
+ setNewValue(value, setSelect = false) {
346
+ this._newValue = value;
347
+ this.calcSizeInput(this._newValue, setSelect);
348
+ }
349
+ componentDidLoad() {
350
+ this.applyFocusSelect();
351
+ this.setNewValue(this.value);
352
+ }
353
+ componentDidRender() {
354
+ this.setStyledInput();
355
+ }
356
+ render() {
357
+ core.ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
358
+ return (index.h(index.Host, null, index.h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), index.h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), index.h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.handleCancelEdition(); } })));
359
+ }
360
+ get _element() { return index.getElement(this); }
361
+ };
362
+ EzTextEdit.style = ezTextEditCss;
363
+
364
+ exports.ez_combo_box_list = EzComboBoxList;
365
+ exports.ez_custom_form_input = EzCustomFormInput;
366
+ exports.ez_text_edit = EzTextEdit;