@sankhyalabs/ezui 5.21.2 → 5.22.0-dev.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 (181) hide show
  1. package/dist/cjs/ICustomRender-6fafffce.js +13 -0
  2. package/dist/cjs/ez-actions-button.cjs.entry.js +1 -0
  3. package/dist/cjs/ez-chart.cjs.entry.js +435 -0
  4. package/dist/cjs/ez-collapsible-box.cjs.entry.js +1 -0
  5. package/dist/cjs/ez-combo-box.cjs.entry.js +1 -0
  6. package/dist/cjs/{ez-text-edit.cjs.entry.js → ez-custom-form-input_2.cjs.entry.js} +99 -0
  7. package/dist/cjs/ez-form-view.cjs.entry.js +34 -3
  8. package/dist/cjs/ez-form.cjs.entry.js +77 -2
  9. package/dist/cjs/ez-grid.cjs.entry.js +313 -39
  10. package/dist/cjs/ez-list.cjs.entry.js +10 -2
  11. package/dist/cjs/ez-number-input.cjs.entry.js +37 -31
  12. package/dist/cjs/ez-scroller_2.cjs.entry.js +222 -0
  13. package/dist/cjs/ez-search.cjs.entry.js +39 -32
  14. package/dist/cjs/ez-sidebar-navigator.cjs.entry.js +92 -0
  15. package/dist/cjs/ez-split-item.cjs.entry.js +1 -0
  16. package/dist/cjs/{ez-scroller_3.cjs.entry.js → ez-tree.cjs.entry.js} +0 -215
  17. package/dist/cjs/ezui.cjs.js +1 -1
  18. package/dist/cjs/index-a7b0c73d.js +16 -4
  19. package/dist/cjs/loader.cjs.js +1 -1
  20. package/dist/collection/collection-manifest.json +3 -0
  21. package/dist/collection/components/ez-chart/components/BarChart.js +27 -0
  22. package/dist/collection/components/ez-chart/components/ColumnChart.js +27 -0
  23. package/dist/collection/components/ez-chart/components/DonutChart.js +42 -0
  24. package/dist/collection/components/ez-chart/components/LineChart.js +27 -0
  25. package/dist/collection/components/ez-chart/components/PieChart.js +45 -0
  26. package/dist/collection/components/ez-chart/components/index.js +5 -0
  27. package/dist/collection/components/ez-chart/ez-chart.css +5 -0
  28. package/dist/collection/components/ez-chart/ez-chart.js +286 -0
  29. package/dist/collection/components/ez-chart/interfaces/ChartAxis.js +1 -0
  30. package/dist/collection/components/ez-chart/interfaces/ChartContext.js +14 -0
  31. package/dist/collection/components/ez-chart/interfaces/ChartOptions.js +1 -0
  32. package/dist/collection/components/ez-chart/interfaces/ChartSerie.js +1 -0
  33. package/dist/collection/components/ez-chart/interfaces/ChartStrategies.js +1 -0
  34. package/dist/collection/components/ez-chart/interfaces/ChartType.js +8 -0
  35. package/dist/collection/components/ez-chart/interfaces/index.js +5 -0
  36. package/dist/collection/components/ez-chart/test/mock-chart.js +137 -0
  37. package/dist/collection/components/ez-chart/types/BaseHighChartsRender.js +146 -0
  38. package/dist/collection/components/ez-form/ez-form.js +130 -4
  39. package/dist/collection/components/ez-form-view/custom-input/ez-custom-form-input.js +278 -0
  40. package/dist/collection/components/ez-form-view/ez-form-view.js +110 -1
  41. package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js +3 -2
  42. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +51 -22
  43. package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js +6 -1
  44. package/dist/collection/components/ez-grid/controller/ag-grid/GridEditionManager.js +35 -1
  45. package/dist/collection/components/ez-grid/controller/ag-grid/components/EzGridCustomCellEditor.js +59 -0
  46. package/dist/collection/components/ez-grid/controller/ag-grid/components/EzGridCustomCellRender.js +40 -0
  47. package/dist/collection/components/ez-grid/controller/ag-grid/components/test/constants/EzGridCustomCellEditorConstants.js +11 -0
  48. package/dist/collection/components/ez-grid/controller/ag-grid/components/test/constants/EzGridCustomCellRenderConstants.js +11 -0
  49. package/dist/collection/components/ez-grid/controller/ag-grid/editor/EzCellEditor.js +10 -3
  50. package/dist/collection/components/ez-grid/controller/ag-grid/editor/EzCellRender.js +40 -0
  51. package/dist/collection/components/ez-grid/controller/ag-grid/editor/IUICellRender.js +1 -0
  52. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/NumberInput.tpl.js +3 -2
  53. package/dist/collection/components/ez-grid/controller/ag-grid/test/constants/GridEditionMock.js +40 -0
  54. package/dist/collection/components/ez-grid/ez-grid.js +237 -12
  55. package/dist/collection/components/ez-grid/interfaces/ICustomFormatter.js +1 -0
  56. package/dist/collection/components/ez-grid/interfaces/index.js +1 -0
  57. package/dist/collection/components/ez-grid/test/resources/gridDataUnit.js +19 -0
  58. package/dist/collection/components/ez-list/ez-list.js +28 -2
  59. package/dist/collection/components/ez-number-input/ez-number-input.js +46 -31
  60. package/dist/collection/components/ez-search/ez-search.js +38 -32
  61. package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.css +6 -2
  62. package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.js +1 -1
  63. package/dist/collection/components/ez-sidebar-navigator/ez-sidebar-navigator.css +180 -0
  64. package/dist/collection/components/ez-sidebar-navigator/ez-sidebar-navigator.js +293 -0
  65. package/dist/collection/components/ez-sidebar-navigator/interfaces/ModeMenuEnum.js +5 -0
  66. package/dist/collection/components/ez-sidebar-navigator/interfaces/SizeMenuEnum.js +6 -0
  67. package/dist/collection/components/ez-sidebar-navigator/interfaces/TypeMenuEnum.js +6 -0
  68. package/dist/collection/components/ez-sidebar-navigator/interfaces/index.js +3 -0
  69. package/dist/collection/components/ez-sidebar-navigator/messages/constants.js +5 -0
  70. package/dist/collection/utils/customEditor/interfaces/ICustomEditor.js +5 -0
  71. package/dist/collection/utils/customEditor/interfaces/ICustomEditorInfo.js +1 -0
  72. package/dist/collection/utils/customRender/interfaces/ICustomRender.js +5 -0
  73. package/dist/collection/utils/customRender/interfaces/ICustomRenderInfo.js +1 -0
  74. package/dist/collection/utils/form/DataBinder.js +26 -0
  75. package/dist/collection/utils/form/test/DataBinder.test.js +41 -4
  76. package/dist/collection/utils/form/test/resources/metadataTest.js +15 -0
  77. package/dist/collection/utils/index.js +2 -0
  78. package/dist/custom-elements/index.d.ts +18 -0
  79. package/dist/custom-elements/index.js +1147 -117
  80. package/dist/esm/ICustomRender-875b5a40.js +13 -0
  81. package/dist/esm/ez-actions-button.entry.js +1 -0
  82. package/dist/esm/ez-chart.entry.js +431 -0
  83. package/dist/esm/ez-collapsible-box.entry.js +1 -0
  84. package/dist/esm/ez-combo-box.entry.js +1 -0
  85. package/dist/esm/{ez-text-edit.entry.js → ez-custom-form-input_2.entry.js} +101 -3
  86. package/dist/esm/ez-form-view.entry.js +34 -3
  87. package/dist/esm/ez-form.entry.js +78 -3
  88. package/dist/esm/ez-grid.entry.js +313 -39
  89. package/dist/esm/ez-list.entry.js +10 -2
  90. package/dist/esm/ez-number-input.entry.js +38 -32
  91. package/dist/esm/ez-scroller_2.entry.js +217 -0
  92. package/dist/esm/ez-search.entry.js +39 -32
  93. package/dist/esm/ez-sidebar-navigator.entry.js +88 -0
  94. package/dist/esm/ez-split-item.entry.js +1 -0
  95. package/dist/esm/{ez-scroller_3.entry.js → ez-tree.entry.js} +3 -216
  96. package/dist/esm/ezui.js +1 -1
  97. package/dist/esm/index-baa5e267.js +16 -4
  98. package/dist/esm/loader.js +1 -1
  99. package/dist/ezui/ezui.esm.js +1 -1
  100. package/dist/ezui/p-12ae1104.entry.js +1 -0
  101. package/dist/ezui/p-2097d0cf.entry.js +1 -0
  102. package/dist/ezui/p-3b4eeeb6.entry.js +1 -0
  103. package/dist/ezui/p-4607fb89.js +1 -0
  104. package/dist/ezui/p-4d5235f1.entry.js +1 -0
  105. package/dist/ezui/p-5056284a.entry.js +1 -0
  106. package/dist/ezui/p-5b205c80.entry.js +1 -0
  107. package/dist/ezui/p-7922142b.entry.js +1 -0
  108. package/dist/ezui/{p-fbee26ec.entry.js → p-816cece6.entry.js} +2 -2
  109. package/dist/ezui/p-84e439b9.entry.js +1 -0
  110. package/dist/ezui/p-8888d9ed.entry.js +1 -0
  111. package/dist/ezui/p-922ac38b.entry.js +1 -0
  112. package/dist/ezui/p-9ab22a07.entry.js +1 -0
  113. package/dist/ezui/p-a31b9c90.entry.js +1 -0
  114. package/dist/ezui/p-bcb53f27.entry.js +1 -0
  115. package/dist/ezui/p-ecc2c1ec.entry.js +1 -0
  116. package/dist/types/components/ez-chart/components/BarChart.d.ts +9 -0
  117. package/dist/types/components/ez-chart/components/ColumnChart.d.ts +9 -0
  118. package/dist/types/components/ez-chart/components/DonutChart.d.ts +9 -0
  119. package/dist/types/components/ez-chart/components/LineChart.d.ts +9 -0
  120. package/dist/types/components/ez-chart/components/PieChart.d.ts +9 -0
  121. package/dist/types/components/ez-chart/components/index.d.ts +5 -0
  122. package/dist/types/components/ez-chart/ez-chart.d.ts +58 -0
  123. package/dist/types/components/ez-chart/interfaces/ChartAxis.d.ts +7 -0
  124. package/dist/types/components/ez-chart/interfaces/ChartContext.d.ts +11 -0
  125. package/dist/types/components/ez-chart/interfaces/ChartOptions.d.ts +10 -0
  126. package/dist/types/components/ez-chart/interfaces/ChartSerie.d.ts +20 -0
  127. package/dist/types/components/ez-chart/interfaces/ChartStrategies.d.ts +7 -0
  128. package/dist/types/components/ez-chart/interfaces/ChartType.d.ts +7 -0
  129. package/dist/types/components/ez-chart/interfaces/index.d.ts +5 -0
  130. package/dist/types/components/ez-chart/types/BaseHighChartsRender.d.ts +15 -0
  131. package/dist/types/components/ez-form/ez-form.d.ts +20 -1
  132. package/dist/types/components/ez-form-view/custom-input/ez-custom-form-input.d.ts +48 -0
  133. package/dist/types/components/ez-form-view/ez-form-view.d.ts +16 -1
  134. package/dist/types/components/ez-grid/controller/EzGridController.d.ts +37 -0
  135. package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +13 -4
  136. package/dist/types/components/ez-grid/controller/ag-grid/DataSource.d.ts +1 -0
  137. package/dist/types/components/ez-grid/controller/ag-grid/GridEditionManager.d.ts +7 -1
  138. package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomCellEditor.d.ts +19 -0
  139. package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomCellRender.d.ts +14 -0
  140. package/dist/types/components/ez-grid/controller/ag-grid/components/test/constants/EzGridCustomCellEditorConstants.d.ts +11 -0
  141. package/dist/types/components/ez-grid/controller/ag-grid/components/test/constants/EzGridCustomCellRenderConstants.d.ts +11 -0
  142. package/dist/types/components/ez-grid/controller/ag-grid/editor/EzCellEditor.d.ts +6 -0
  143. package/dist/types/components/ez-grid/controller/ag-grid/editor/EzCellRender.d.ts +15 -0
  144. package/dist/types/components/ez-grid/controller/ag-grid/editor/IUICellRender.d.ts +10 -0
  145. package/dist/types/components/ez-grid/controller/ag-grid/test/constants/GridEditionMock.d.ts +6 -0
  146. package/dist/types/components/ez-grid/ez-grid.d.ts +35 -1
  147. package/dist/types/components/ez-grid/interfaces/ICustomFormatter.d.ts +5 -0
  148. package/dist/types/components/ez-grid/interfaces/index.d.ts +1 -0
  149. package/dist/types/components/ez-grid/test/resources/gridDataUnit.d.ts +2 -0
  150. package/dist/types/components/ez-list/ez-list.d.ts +5 -0
  151. package/dist/types/components/ez-number-input/ez-number-input.d.ts +3 -0
  152. package/dist/types/components/ez-search/ez-search.d.ts +4 -2
  153. package/dist/types/components/ez-sidebar-navigator/ez-sidebar-navigator.d.ts +57 -0
  154. package/dist/types/components/ez-sidebar-navigator/interfaces/ModeMenuEnum.d.ts +4 -0
  155. package/dist/types/components/ez-sidebar-navigator/interfaces/SizeMenuEnum.d.ts +5 -0
  156. package/dist/types/components/ez-sidebar-navigator/interfaces/TypeMenuEnum.d.ts +5 -0
  157. package/dist/types/components/ez-sidebar-navigator/interfaces/index.d.ts +3 -0
  158. package/dist/types/components/ez-sidebar-navigator/messages/constants.d.ts +5 -0
  159. package/dist/types/components.d.ts +334 -5
  160. package/dist/types/utils/customEditor/interfaces/ICustomEditor.d.ts +31 -0
  161. package/dist/types/utils/customEditor/interfaces/ICustomEditorInfo.d.ts +5 -0
  162. package/dist/types/utils/customRender/interfaces/ICustomRender.d.ts +29 -0
  163. package/dist/types/utils/customRender/interfaces/ICustomRenderInfo.d.ts +5 -0
  164. package/dist/types/utils/form/DataBinder.d.ts +3 -0
  165. package/dist/types/utils/form/test/resources/metadataTest.d.ts +2 -0
  166. package/dist/types/utils/index.d.ts +2 -0
  167. package/package.json +2 -1
  168. package/react/components.d.ts +3 -0
  169. package/react/components.js +3 -0
  170. package/react/components.js.map +1 -1
  171. package/dist/ezui/p-0447d17c.entry.js +0 -1
  172. package/dist/ezui/p-20ec22c0.entry.js +0 -1
  173. package/dist/ezui/p-2a1a0e04.entry.js +0 -1
  174. package/dist/ezui/p-637f69f2.entry.js +0 -1
  175. package/dist/ezui/p-786559c5.entry.js +0 -1
  176. package/dist/ezui/p-7c770f14.entry.js +0 -1
  177. package/dist/ezui/p-91f626d3.entry.js +0 -1
  178. package/dist/ezui/p-99ead599.entry.js +0 -1
  179. package/dist/ezui/p-b567fa8c.entry.js +0 -1
  180. package/dist/ezui/p-bae3d0aa.entry.js +0 -1
  181. package/dist/ezui/p-db77a984.entry.js +0 -1
@@ -12,7 +12,6 @@ export class EzSearch {
12
12
  this._tabPressed = false;
13
13
  this._textEmptyList = "Nenhum resultado encontrado";
14
14
  this._textEmptySearch = "Nenhum resultado de {0} encontrado";
15
- this._lookupMode = false;
16
15
  this._startHighlightTag = "<span class='card-item__highlight'>";
17
16
  this._endHighlightTag = "</span>";
18
17
  this._preSelection = undefined;
@@ -41,36 +40,30 @@ export class EzSearch {
41
40
  var _a;
42
41
  if (this._textInput) {
43
42
  this._textInput.errorMessage = this.errorMessage;
44
- if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
43
+ if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim()) && this.errorMessage) {
45
44
  this.setInputValue();
46
45
  }
47
46
  }
48
47
  }
49
- observeValue(newValue, oldValue) {
50
- if (this._textInput && newValue != oldValue) {
51
- try {
52
- if (newValue === "string") {
53
- this.setInputValue();
54
- return;
55
- }
56
- const newValueSelected = this.getSelectedOption(newValue);
57
- const oldValueSelected = this.getSelectedOption(oldValue);
58
- const currentValue = this.getSelectedOption(this.value);
59
- if (this.isDifferentValues(currentValue, newValueSelected)) {
60
- this.value = newValueSelected;
61
- }
62
- if (this.isDifferentValues(newValueSelected, oldValueSelected)) {
63
- this.setInputValue();
64
- const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
65
- if (!this._lookupMode) {
66
- this.ezChange.emit(valueEmitted);
67
- }
68
- }
69
- this.resetOptions();
48
+ validateNewValue(newValue, oldValue) {
49
+ const getValue = (val) => typeof val === 'object' ? val === null || val === void 0 ? void 0 : val.value : val;
50
+ return (getValue(newValue) !== getValue(oldValue));
51
+ }
52
+ async observeValue(newValue, oldValue) {
53
+ if (this._textInput && newValue !== oldValue && this.validateNewValue(newValue, oldValue)) {
54
+ if (typeof newValue === "string") {
55
+ await this.handleValueAsString(newValue);
56
+ return;
70
57
  }
71
- finally {
72
- this._lookupMode = false;
58
+ const newValueSelected = this.getSelectedOption(newValue);
59
+ const currentValue = this.getSelectedOption(this._currentValue);
60
+ if (this.isDifferentValues(currentValue, newValueSelected)) {
61
+ this._currentValue = newValueSelected;
62
+ this.setInputValue();
63
+ const valueEmitted = newValueSelected !== null && newValueSelected !== void 0 ? newValueSelected : undefined;
64
+ this.ezChange.emit(valueEmitted);
73
65
  }
66
+ this.resetOptions();
74
67
  }
75
68
  }
76
69
  observeOptions(newOptions, oldOptions) {
@@ -137,6 +130,16 @@ export class EzSearch {
137
130
  });
138
131
  }
139
132
  }
133
+ async handleValueAsString(value) {
134
+ if (this.getSelectedOption(value)) {
135
+ this.setInputValue();
136
+ return;
137
+ }
138
+ await this.loadDescriptionValue(value);
139
+ this.setInputValue();
140
+ this.ezChange.emit(this.value);
141
+ this._currentValue = this.value;
142
+ }
140
143
  updateListPosition() {
141
144
  let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
142
145
  const elementRect = this._listWrapper.getBoundingClientRect();
@@ -192,7 +195,7 @@ export class EzSearch {
192
195
  return text;
193
196
  }
194
197
  getText() {
195
- const currentValue = this.getSelectedOption(this.value);
198
+ const currentValue = this.getSelectedOption(this._currentValue);
196
199
  const text = this.getFormattedText(currentValue);
197
200
  if (text == undefined) {
198
201
  return;
@@ -367,6 +370,7 @@ export class EzSearch {
367
370
  || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
368
371
  const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
369
372
  this.value = adjustedOpt;
373
+ this._currentValue = adjustedOpt;
370
374
  }
371
375
  else {
372
376
  this.setInputValue();
@@ -387,7 +391,7 @@ export class EzSearch {
387
391
  }
388
392
  }
389
393
  cancelPreselection() {
390
- if (!this._textInput.value && this.value) {
394
+ if (!this._textInput.value && this._currentValue) {
391
395
  this.selectOption(undefined);
392
396
  }
393
397
  else {
@@ -408,6 +412,7 @@ export class EzSearch {
408
412
  }
409
413
  clearSearch() {
410
414
  this.value = null;
415
+ this._currentValue = null;
411
416
  }
412
417
  controlListWithOnlyOne() {
413
418
  var _a, _b;
@@ -437,11 +442,11 @@ export class EzSearch {
437
442
  if (StringUtils.isEmpty(this.value)) {
438
443
  return;
439
444
  }
440
- let value = this.value;
441
- if (typeof value === "object") {
445
+ if (!this.validateNewValue(this.value, this._currentValue)) {
442
446
  return;
443
447
  }
444
- if (StringUtils.isEmpty(value)) {
448
+ let value = this.value;
449
+ if (typeof value === "object") {
445
450
  return;
446
451
  }
447
452
  this.loadDescriptionValue(value);
@@ -478,8 +483,8 @@ export class EzSearch {
478
483
  this.showNoResultMessage();
479
484
  return;
480
485
  }
481
- this._lookupMode = true;
482
- this.value = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
486
+ this._currentValue = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
487
+ this.value = this._currentValue;
483
488
  }
484
489
  loadOptionValue(argument) {
485
490
  var _a;
@@ -538,6 +543,7 @@ export class EzSearch {
538
543
  this.validateDescriptionValue();
539
544
  }
540
545
  componentDidLoad() {
546
+ this._currentValue = this.value;
541
547
  CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
542
548
  this.setInputValue(false);
543
549
  this._resizeObserver = new ResizeObserver((entries) => {
@@ -43,15 +43,19 @@ button {
43
43
  box-shadow: var(--ez-sidebar-button--box-shadow);
44
44
  padding: 0;
45
45
  cursor: pointer;
46
+ align-items: center;
46
47
  }
47
48
 
48
49
  span {
49
50
  width: var(--ez-sidebar-button--width);
50
51
  height: var(--ez-sidebar-button--height);
51
- margin: var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--small) var(--ez-sidebar-button--space--medium) 0;
52
+ margin: var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;
52
53
  background: var(--ez-sidebar-button--background-color--primary);
53
54
  border-radius: 0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0;
54
55
  }
56
+ ez-icon {
57
+ --ez-icon--color: var(--ez-sidebar-button--background-color--primary);
58
+ }
55
59
 
56
60
  button:hover {
57
61
  box-shadow: var(--ez-sidebar-button--hover--box-shadow);
@@ -59,5 +63,5 @@ button:hover {
59
63
 
60
64
  button:hover span {
61
65
  width: var(--ez-sidebar-button--hover--width);
62
- margin: var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) var(--ez-sidebar-button--space--medium) 0;
66
+ margin: var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;
63
67
  }
@@ -11,7 +11,7 @@ export class EzSidebarButton {
11
11
  }
12
12
  }
13
13
  render() {
14
- return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null)));
14
+ return (h("button", { type: "button", onClick: () => { this.ezClick.emit(); }, ref: (el) => this._button = el }, h("span", null), h("ez-icon", { iconName: "chevron-right" })));
15
15
  }
16
16
  static get is() { return "ez-sidebar-button"; }
17
17
  static get encapsulation() { return "shadow"; }
@@ -0,0 +1,180 @@
1
+ :host {
2
+ /* Label Container */
3
+ /*@doc Define o espaçamento da esquerda do container*/
4
+ --ez-sidebar-navigator--padding-left: var(--space--xs, 12px);
5
+ /*@doc Define o espaçamento da direita do container*/
6
+ --ez-sidebar-navigator--padding-right: var(--space--xs, 12px);
7
+ /*@doc Define o espaçamento entre o cabeçalho conteúdo e rodapé*/
8
+ --ez-sidebar-navigator--gap: var(--space--xs, 12px);
9
+ /*@doc Define a cor de shadow box do container de label*/
10
+ --ez-sidebar-navigator--box-shadow: var(--shadow, 0px 0px 24px 0px #000);
11
+ /*@doc Define a cor de fundo do container de label*/
12
+ --ez-sidebar-navigator--background-color: var(--color--inverted);
13
+ /*@doc Define o border radius do container de label*/
14
+ --ez-sidebar-navigator--border-radius: 0px var(--border--radius-medium) var(--border--radius-medium) 0px;
15
+ /*@doc Força uma altura especifica para o sidebar, o padrão é 100% da tela*/
16
+ --ez-sidebar-navigator--height: calc(100vh - var(--space--lg, 24px));
17
+
18
+ /*Labels Header */
19
+ /*@doc Define o espaçamento entre os componente do cabeçalho*/
20
+ --ez-sidebar-navigator--header-gap: var(--space--xs, 12px);
21
+
22
+ /*Labels Footer */
23
+ /*@doc Define o espaçamento entre os componente do rodadé*/
24
+ --ez-sidebar-navigator--footer-gap: var(--space--xs, 12px);
25
+
26
+
27
+ /* Title */
28
+ /*@doc Define a fonte do título do componente */
29
+ --ez-ez-sidebar-navigator__title--font-family: var(--font-pattern, "Roboto");
30
+ /*@doc Define o tamanho da fonte do título do componente.*/
31
+ --ez-ez-sidebar-navigator__title--font-size: var(--title--medium, 16px);
32
+ /*@doc Define a cor da fonte do título do componente.*/
33
+ --ez-ez-sidebar-navigator__title--color: var(--title--primary, #2b3a54);
34
+ /*@doc Define o peso da fonte do título do componente.*/
35
+ --ez-ez-sidebar-navigator__title--font-weight: var(--text-weight--extra-large, 700);
36
+
37
+ }
38
+
39
+ .inverted {
40
+ /* private */
41
+ transform: rotate(180deg);
42
+ }
43
+
44
+ .ez-sidebar-navigator {
45
+ /* private */
46
+ display: -webkit-box;
47
+ display: -ms-flexbox;
48
+ display: flex;
49
+ -webkit-box-orient: vertical;
50
+ -webkit-box-direction: normal;
51
+ -ms-flex-direction: column;
52
+ flex-direction: column;
53
+ height: var(--ez-sidebar-navigator--height);
54
+ padding-top: var(--space--xs, 12px);
55
+ padding-bottom: var(--space--xs, 12px);
56
+
57
+ /* public */
58
+ gap: var(--ez-sidebar-navigator--gap);
59
+ padding-left: var(--ez-sidebar-navigator--padding-left);
60
+ padding-right: var(--ez-sidebar-navigator--padding-right);
61
+ background-color: var(--ez-sidebar-navigator--background-color);
62
+ -webkit-box-shadow: var(--ez-sidebar-navigator--box-shadow);
63
+ box-shadow: var(--ez-sidebar-navigator--box-shadow);
64
+ border-radius: var(--ez-sidebar-navigator--border-radius);
65
+ }
66
+
67
+ .ez-sidebar-navigator__header {
68
+ /* private */
69
+ display: -webkit-box;
70
+ display: -ms-flexbox;
71
+ display: flex;
72
+ -webkit-box-align: center;
73
+ -ms-flex-align: center;
74
+ align-items: center;
75
+ justify-content: space-between;
76
+
77
+ /* public */
78
+ gap: var(--ez-sidebar-navigator--header-gap);
79
+ }
80
+
81
+ .ez-sidebar-navigator__content {
82
+ height: 100%;
83
+ }
84
+
85
+ .ez-sidebar-navigator__footer {
86
+ /* private */
87
+ display: -webkit-box;
88
+ display: -ms-flexbox;
89
+ display: flex;
90
+ -webkit-box-align: center;
91
+ -ms-flex-align: center;
92
+ align-items: center;
93
+
94
+ /* public */
95
+ gap: var(--ez-sidebar-navigator--footer-gap);
96
+ }
97
+
98
+ .ez-sidebar-navigator__title {
99
+ /* private */
100
+ white-space: nowrap;
101
+ text-overflow: ellipsis;
102
+ overflow: hidden;
103
+
104
+ /* public */
105
+ font-family: var(--ez-ez-sidebar-navigator__title--font-family);
106
+ font-size: var(--ez-ez-sidebar-navigator__title--font-size);
107
+ font-weight: var(--ez-ez-sidebar-navigator__title--font-weight);
108
+ color: var(--ez-ez-sidebar-navigator__title--color);
109
+
110
+ }
111
+
112
+ .ez-sidebar-navigator__end {
113
+ /* private */
114
+ display: -webkit-box;
115
+ display: -ms-flexbox;
116
+ display: flex;
117
+ -webkit-box-align: center;
118
+ -ms-flex-align: center;
119
+ align-items: center;
120
+ margin-left: auto;
121
+ /* public */
122
+ gap: var(--ez-sidebar-navigator--gap);
123
+ }
124
+
125
+ .dynamic {
126
+ position: absolute;
127
+ z-index: var(--most-visible , 4);
128
+ }
129
+
130
+ .fixed {
131
+ position: relative;
132
+ }
133
+
134
+ .hidden {
135
+ display: none;
136
+ }
137
+
138
+ .show {
139
+ animation: fadeIn .1s ease-in-out 1;
140
+ }
141
+
142
+ @keyframes fadeIn {
143
+ from {
144
+ transform: translate(-100%);
145
+ }
146
+ }
147
+
148
+ .sm {
149
+ /* private */
150
+ width: 240px;
151
+ }
152
+
153
+ .md {
154
+ /* private */
155
+ width: 280px;
156
+ }
157
+
158
+ .lg {
159
+ /* private */
160
+ width: 320px;
161
+ }
162
+
163
+ @media screen and (max-width: 991px) {
164
+ .responsive {
165
+ /* private */
166
+ width: 240px;
167
+ }
168
+ }
169
+ @media screen and (min-width: 992px) {
170
+ .responsive {
171
+ /* private */
172
+ width: 280px;
173
+ }
174
+ }
175
+ @media screen and (min-width: 1200px) {
176
+ .responsive {
177
+ /* private */
178
+ width: 320px;
179
+ }
180
+ }
@@ -0,0 +1,293 @@
1
+ import { h, Host } from "@stencil/core";
2
+ import { ElementIDUtils } from "@sankhyalabs/core";
3
+ import { EzScrollDirection } from "../ez-scroller/EzScrollDirection";
4
+ import { ModeMenuEnum, SizeMenuEnum, TypeMenuEnum } from "./interfaces";
5
+ import { MESSAGES } from './messages/constants';
6
+ export class EzSidebarNavigator {
7
+ constructor() {
8
+ this.handleToggleSidebar = () => {
9
+ this.open = !this.open;
10
+ };
11
+ this.handleToggleMode = () => {
12
+ this.mode = this.mode === ModeMenuEnum.FIXED ? ModeMenuEnum.FLOAT : ModeMenuEnum.FIXED;
13
+ this.ezChangeMode.emit(this.mode);
14
+ };
15
+ this.type = TypeMenuEnum.DYNAMIC;
16
+ this.mode = ModeMenuEnum.FLOAT;
17
+ this.size = SizeMenuEnum.SMALL;
18
+ this.isResponsive = false;
19
+ this.titleMenu = "";
20
+ this.showCollapseMenu = true;
21
+ this.showFixedButton = true;
22
+ this.open = false;
23
+ }
24
+ /**
25
+ * Método para fixar/desafixar o menu, emitindo o evento ezChangeMode.
26
+ */
27
+ async changeModeMenu() {
28
+ if (this.type === TypeMenuEnum.DYNAMIC) {
29
+ this.handleToggleMode();
30
+ }
31
+ }
32
+ /**
33
+ * Método para fechar o menu automaticamente após uma ação, fluxo, etc.
34
+ */
35
+ async closeSidebar() {
36
+ this.open = false;
37
+ }
38
+ /**
39
+ * Método para abrir o menu automaticamente após uma ação, fluxo, etc.
40
+ */
41
+ async openSidebar() {
42
+ this.open = true;
43
+ }
44
+ componentDidLoad() {
45
+ if (this.type === TypeMenuEnum.FIXED) {
46
+ this.mode = ModeMenuEnum.FIXED;
47
+ this.open = true;
48
+ }
49
+ }
50
+ render() {
51
+ ElementIDUtils.addIDInfoIfNotExists(this._element);
52
+ return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.mode === ModeMenuEnum.FIXED ? this.handleToggleSidebar : undefined, onMouseEnter: this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined, "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: `ez-col ez-col--sd-12 ez-col--tb-3 ez-sidebar-navigator ${this.mode === ModeMenuEnum.FLOAT ? 'dynamic' : 'fixed'} ${this.isResponsive ? 'responsive' : this.size} ${!this.open ? "hidden" : "show"}`, "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar"), onMouseLeave: this.type !== TypeMenuEnum.FIXED && this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined }, h("header", { class: "ez-sidebar-navigator__header" }, h("slot", { name: "start" }), this.titleMenu !== '' && (h("div", { class: "ez-sidebar-navigator__title", title: this.titleMenu }, this.titleMenu)), !this.titleMenu && (h("slot", { name: "content" })), h("div", { class: "ez-sidebar-navigator__end" }, h("slot", { name: "end" }), (this.type === TypeMenuEnum.DYNAMIC && this.showFixedButton) && (h("ez-button", { onClick: this.handleToggleMode, mode: "icon", size: "small", iconName: this.mode === ModeMenuEnum.FIXED ? "un-pin" : "push-pin", title: this.mode === ModeMenuEnum.FIXED ? MESSAGES.UN_PIN_MENU : MESSAGES.PUSH_PIN_MENU, "aria-label": this.mode === ModeMenuEnum.FIXED ? MESSAGES.UN_PIN_MENU : MESSAGES.PUSH_PIN_MENU, "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("pinButton") })), (this.mode === ModeMenuEnum.FIXED && this.showCollapseMenu) && (h("ez-button", { onClick: this.handleToggleSidebar, class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: MESSAGES.HIDE_MENU, "aria-label": MESSAGES.HIDE_MENU, "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })))), this.titleMenu && (h("slot", { name: "content" })), h("ez-scroller", { class: "ez-sidebar-navigator__content", direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("slot", null)), h("footer", { class: "ez-sidebar-navigator__footer" }, h("slot", { name: "footer" }))))
53
+ : undefined));
54
+ }
55
+ static get is() { return "ez-sidebar-navigator"; }
56
+ static get encapsulation() { return "shadow"; }
57
+ static get originalStyleUrls() {
58
+ return {
59
+ "$": ["ez-sidebar-navigator.css"]
60
+ };
61
+ }
62
+ static get styleUrls() {
63
+ return {
64
+ "$": ["ez-sidebar-navigator.css"]
65
+ };
66
+ }
67
+ static get properties() {
68
+ return {
69
+ "type": {
70
+ "type": "string",
71
+ "mutable": false,
72
+ "complexType": {
73
+ "original": "TypeMenuEnum",
74
+ "resolved": "TypeMenuEnum.DYNAMIC | TypeMenuEnum.FIXED | TypeMenuEnum.FLOAT",
75
+ "references": {
76
+ "TypeMenuEnum": {
77
+ "location": "import",
78
+ "path": "./interfaces"
79
+ }
80
+ }
81
+ },
82
+ "required": false,
83
+ "optional": false,
84
+ "docs": {
85
+ "tags": [],
86
+ "text": "Define o tipo do menu (float, fixed ou dynamic (livre))."
87
+ },
88
+ "attribute": "type",
89
+ "reflect": false,
90
+ "defaultValue": "TypeMenuEnum.DYNAMIC"
91
+ },
92
+ "mode": {
93
+ "type": "string",
94
+ "mutable": true,
95
+ "complexType": {
96
+ "original": "ModeMenuEnum",
97
+ "resolved": "ModeMenuEnum.FIXED | ModeMenuEnum.FLOAT",
98
+ "references": {
99
+ "ModeMenuEnum": {
100
+ "location": "import",
101
+ "path": "./interfaces"
102
+ }
103
+ }
104
+ },
105
+ "required": false,
106
+ "optional": false,
107
+ "docs": {
108
+ "tags": [],
109
+ "text": "Define se o menu ser\u00E1 do tipo FIXED ou FLOAT."
110
+ },
111
+ "attribute": "mode",
112
+ "reflect": false,
113
+ "defaultValue": "ModeMenuEnum.FLOAT"
114
+ },
115
+ "size": {
116
+ "type": "string",
117
+ "mutable": false,
118
+ "complexType": {
119
+ "original": "SizeMenuEnum",
120
+ "resolved": "SizeMenuEnum.LARGE | SizeMenuEnum.MEDIUM | SizeMenuEnum.SMALL",
121
+ "references": {
122
+ "SizeMenuEnum": {
123
+ "location": "import",
124
+ "path": "./interfaces"
125
+ }
126
+ }
127
+ },
128
+ "required": false,
129
+ "optional": false,
130
+ "docs": {
131
+ "tags": [],
132
+ "text": "Define o tamanho do menu (small, medium, large)."
133
+ },
134
+ "attribute": "size",
135
+ "reflect": false,
136
+ "defaultValue": "SizeMenuEnum.SMALL"
137
+ },
138
+ "isResponsive": {
139
+ "type": "boolean",
140
+ "mutable": false,
141
+ "complexType": {
142
+ "original": "boolean",
143
+ "resolved": "boolean",
144
+ "references": {}
145
+ },
146
+ "required": false,
147
+ "optional": false,
148
+ "docs": {
149
+ "tags": [],
150
+ "text": "Define se ter\u00E1 responsividade, Controle dever\u00E1 ser pelo CSS."
151
+ },
152
+ "attribute": "is-responsive",
153
+ "reflect": false,
154
+ "defaultValue": "false"
155
+ },
156
+ "titleMenu": {
157
+ "type": "string",
158
+ "mutable": false,
159
+ "complexType": {
160
+ "original": "string",
161
+ "resolved": "string",
162
+ "references": {}
163
+ },
164
+ "required": false,
165
+ "optional": false,
166
+ "docs": {
167
+ "tags": [],
168
+ "text": "Define o t\u00EDtulo do Sidebar Navigator"
169
+ },
170
+ "attribute": "title-menu",
171
+ "reflect": false,
172
+ "defaultValue": "\"\""
173
+ },
174
+ "showCollapseMenu": {
175
+ "type": "boolean",
176
+ "mutable": false,
177
+ "complexType": {
178
+ "original": "boolean",
179
+ "resolved": "boolean",
180
+ "references": {}
181
+ },
182
+ "required": false,
183
+ "optional": false,
184
+ "docs": {
185
+ "tags": [],
186
+ "text": "Define se o bot\u00E3o de \"Recolher Menu\" ser\u00E1 exibido"
187
+ },
188
+ "attribute": "show-collapse-menu",
189
+ "reflect": false,
190
+ "defaultValue": "true"
191
+ },
192
+ "showFixedButton": {
193
+ "type": "boolean",
194
+ "mutable": false,
195
+ "complexType": {
196
+ "original": "boolean",
197
+ "resolved": "boolean",
198
+ "references": {}
199
+ },
200
+ "required": false,
201
+ "optional": false,
202
+ "docs": {
203
+ "tags": [],
204
+ "text": "Define se o bot\u00E3o de \"Fixar Menu\" ser\u00E1 exibido"
205
+ },
206
+ "attribute": "show-fixed-button",
207
+ "reflect": false,
208
+ "defaultValue": "true"
209
+ }
210
+ };
211
+ }
212
+ static get states() {
213
+ return {
214
+ "open": {}
215
+ };
216
+ }
217
+ static get events() {
218
+ return [{
219
+ "method": "ezChangeMode",
220
+ "name": "ezChangeMode",
221
+ "bubbles": true,
222
+ "cancelable": true,
223
+ "composed": true,
224
+ "docs": {
225
+ "tags": [],
226
+ "text": "Evento emitido sempre que o modo (FLOAT ou FIXED) do menu for alterado.."
227
+ },
228
+ "complexType": {
229
+ "original": "ModeMenuEnum",
230
+ "resolved": "ModeMenuEnum.FIXED | ModeMenuEnum.FLOAT",
231
+ "references": {
232
+ "ModeMenuEnum": {
233
+ "location": "import",
234
+ "path": "./interfaces"
235
+ }
236
+ }
237
+ }
238
+ }];
239
+ }
240
+ static get methods() {
241
+ return {
242
+ "changeModeMenu": {
243
+ "complexType": {
244
+ "signature": "() => Promise<void>",
245
+ "parameters": [],
246
+ "references": {
247
+ "Promise": {
248
+ "location": "global"
249
+ }
250
+ },
251
+ "return": "Promise<void>"
252
+ },
253
+ "docs": {
254
+ "text": "M\u00E9todo para fixar/desafixar o menu, emitindo o evento ezChangeMode.",
255
+ "tags": []
256
+ }
257
+ },
258
+ "closeSidebar": {
259
+ "complexType": {
260
+ "signature": "() => Promise<void>",
261
+ "parameters": [],
262
+ "references": {
263
+ "Promise": {
264
+ "location": "global"
265
+ }
266
+ },
267
+ "return": "Promise<void>"
268
+ },
269
+ "docs": {
270
+ "text": "M\u00E9todo para fechar o menu automaticamente ap\u00F3s uma a\u00E7\u00E3o, fluxo, etc.",
271
+ "tags": []
272
+ }
273
+ },
274
+ "openSidebar": {
275
+ "complexType": {
276
+ "signature": "() => Promise<void>",
277
+ "parameters": [],
278
+ "references": {
279
+ "Promise": {
280
+ "location": "global"
281
+ }
282
+ },
283
+ "return": "Promise<void>"
284
+ },
285
+ "docs": {
286
+ "text": "M\u00E9todo para abrir o menu automaticamente ap\u00F3s uma a\u00E7\u00E3o, fluxo, etc.",
287
+ "tags": []
288
+ }
289
+ }
290
+ };
291
+ }
292
+ static get elementRef() { return "_element"; }
293
+ }
@@ -0,0 +1,5 @@
1
+ export var ModeMenuEnum;
2
+ (function (ModeMenuEnum) {
3
+ ModeMenuEnum["FLOAT"] = "float";
4
+ ModeMenuEnum["FIXED"] = "fixed";
5
+ })(ModeMenuEnum || (ModeMenuEnum = {}));
@@ -0,0 +1,6 @@
1
+ export var SizeMenuEnum;
2
+ (function (SizeMenuEnum) {
3
+ SizeMenuEnum["SMALL"] = "sm";
4
+ SizeMenuEnum["MEDIUM"] = "md";
5
+ SizeMenuEnum["LARGE"] = "lg";
6
+ })(SizeMenuEnum || (SizeMenuEnum = {}));
@@ -0,0 +1,6 @@
1
+ export var TypeMenuEnum;
2
+ (function (TypeMenuEnum) {
3
+ TypeMenuEnum["FLOAT"] = "float";
4
+ TypeMenuEnum["FIXED"] = "fixed";
5
+ TypeMenuEnum["DYNAMIC"] = "dynamic";
6
+ })(TypeMenuEnum || (TypeMenuEnum = {}));
@@ -0,0 +1,3 @@
1
+ export * from './ModeMenuEnum';
2
+ export * from './SizeMenuEnum';
3
+ export * from './TypeMenuEnum';
@@ -0,0 +1,5 @@
1
+ export const MESSAGES = {
2
+ HIDE_MENU: 'Ocultar menu',
3
+ UN_PIN_MENU: 'Desafixar menu',
4
+ PUSH_PIN_MENU: 'Fixar menu',
5
+ };