@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-38445.0 → 0.0.0-bugfix-dev-KB-68079.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (190) hide show
  1. package/dist/cjs/ez-actions-button.cjs.entry.js +1 -1
  2. package/dist/cjs/ez-alert-list.cjs.entry.js +1 -1
  3. package/dist/cjs/ez-alert.cjs.entry.js +1 -1
  4. package/dist/cjs/ez-application.cjs.entry.js +1 -1
  5. package/dist/cjs/ez-badge.cjs.entry.js +1 -1
  6. package/dist/cjs/ez-breadcrumb.cjs.entry.js +1 -1
  7. package/dist/cjs/ez-button.cjs.entry.js +1 -1
  8. package/dist/cjs/ez-calendar.cjs.entry.js +1 -1
  9. package/dist/cjs/ez-card-item_3.cjs.entry.js +1 -1
  10. package/dist/cjs/ez-chart.cjs.entry.js +2 -2
  11. package/dist/cjs/ez-check.cjs.entry.js +1 -1
  12. package/dist/cjs/ez-chip.cjs.entry.js +1 -1
  13. package/dist/cjs/ez-collapsible-box.cjs.entry.js +1 -1
  14. package/dist/cjs/ez-combo-box.cjs.entry.js +1 -1
  15. package/dist/cjs/ez-custom-form-input_2.cjs.entry.js +2 -2
  16. package/dist/cjs/ez-date-input.cjs.entry.js +1 -1
  17. package/dist/cjs/ez-date-time-input.cjs.entry.js +1 -1
  18. package/dist/cjs/ez-dialog.cjs.entry.js +1 -1
  19. package/dist/cjs/ez-dropdown.cjs.entry.js +1 -1
  20. package/dist/cjs/ez-file-item.cjs.entry.js +1 -1
  21. package/dist/cjs/ez-form-view.cjs.entry.js +1 -1
  22. package/dist/cjs/ez-form.cjs.entry.js +1 -1
  23. package/dist/cjs/ez-grid.cjs.entry.js +8 -3
  24. package/dist/cjs/ez-guide-navigator.cjs.entry.js +1 -1
  25. package/dist/cjs/ez-icon.cjs.entry.js +1 -1
  26. package/dist/cjs/ez-list.cjs.entry.js +1 -1
  27. package/dist/cjs/ez-loading-bar.cjs.entry.js +1 -1
  28. package/dist/cjs/ez-modal-container.cjs.entry.js +1 -1
  29. package/dist/cjs/ez-modal.cjs.entry.js +1 -1
  30. package/dist/cjs/ez-multi-selection-list.cjs.entry.js +1 -1
  31. package/dist/cjs/ez-number-input.cjs.entry.js +1 -1
  32. package/dist/cjs/ez-popover.cjs.entry.js +1 -1
  33. package/dist/cjs/ez-popup.cjs.entry.js +1 -1
  34. package/dist/cjs/ez-radio-button.cjs.entry.js +1 -1
  35. package/dist/cjs/ez-scroller_2.cjs.entry.js +222 -0
  36. package/dist/cjs/ez-search.cjs.entry.js +30 -32
  37. package/dist/cjs/ez-sidebar-navigator.cjs.entry.js +92 -0
  38. package/dist/cjs/ez-skeleton.cjs.entry.js +1 -1
  39. package/dist/cjs/ez-split-button.cjs.entry.js +1 -1
  40. package/dist/cjs/ez-split-item.cjs.entry.js +1 -1
  41. package/dist/cjs/ez-split-panel.cjs.entry.js +1 -1
  42. package/dist/cjs/ez-tabselector.cjs.entry.js +1 -1
  43. package/dist/cjs/ez-text-area.cjs.entry.js +1 -1
  44. package/dist/cjs/ez-text-input.cjs.entry.js +1 -1
  45. package/dist/cjs/ez-time-input.cjs.entry.js +1 -1
  46. package/dist/cjs/ez-toast.cjs.entry.js +1 -1
  47. package/dist/cjs/{ez-scroller_3.cjs.entry.js → ez-tree.cjs.entry.js} +1 -216
  48. package/dist/cjs/ez-upload.cjs.entry.js +1 -1
  49. package/dist/cjs/ez-view-stack.cjs.entry.js +1 -1
  50. package/dist/cjs/ezui.cjs.js +2 -2
  51. package/dist/cjs/filter-column.cjs.entry.js +1 -1
  52. package/dist/cjs/{index-a7b0c73d.js → index-9e5554cb.js} +13 -2
  53. package/dist/cjs/loader.cjs.js +2 -2
  54. package/dist/collection/collection-manifest.json +1 -0
  55. package/dist/collection/components/ez-chart/ez-chart.js +1 -1
  56. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +3 -2
  57. package/dist/collection/components/ez-grid/controller/ag-grid/GridEditionManager.js +4 -0
  58. package/dist/collection/components/ez-search/ez-search.js +29 -31
  59. package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.css +6 -2
  60. package/dist/collection/components/ez-sidebar-button/ez-sidebar-button.js +1 -1
  61. package/dist/collection/components/ez-sidebar-navigator/ez-sidebar-navigator.css +180 -0
  62. package/dist/collection/components/ez-sidebar-navigator/ez-sidebar-navigator.js +293 -0
  63. package/dist/collection/components/ez-sidebar-navigator/interfaces/ModeMenuEnum.js +5 -0
  64. package/dist/collection/components/ez-sidebar-navigator/interfaces/SizeMenuEnum.js +6 -0
  65. package/dist/collection/components/ez-sidebar-navigator/interfaces/TypeMenuEnum.js +6 -0
  66. package/dist/collection/components/ez-sidebar-navigator/interfaces/index.js +3 -0
  67. package/dist/collection/components/ez-sidebar-navigator/messages/constants.js +5 -0
  68. package/dist/custom-elements/index.d.ts +6 -0
  69. package/dist/custom-elements/index.js +127 -37
  70. package/dist/esm/ez-actions-button.entry.js +1 -1
  71. package/dist/esm/ez-alert-list.entry.js +1 -1
  72. package/dist/esm/ez-alert.entry.js +1 -1
  73. package/dist/esm/ez-application.entry.js +1 -1
  74. package/dist/esm/ez-badge.entry.js +1 -1
  75. package/dist/esm/ez-breadcrumb.entry.js +1 -1
  76. package/dist/esm/ez-button.entry.js +1 -1
  77. package/dist/esm/ez-calendar.entry.js +1 -1
  78. package/dist/esm/ez-card-item_3.entry.js +1 -1
  79. package/dist/esm/ez-chart.entry.js +2 -2
  80. package/dist/esm/ez-check.entry.js +1 -1
  81. package/dist/esm/ez-chip.entry.js +1 -1
  82. package/dist/esm/ez-collapsible-box.entry.js +1 -1
  83. package/dist/esm/ez-combo-box.entry.js +1 -1
  84. package/dist/esm/ez-custom-form-input_2.entry.js +2 -2
  85. package/dist/esm/ez-date-input.entry.js +1 -1
  86. package/dist/esm/ez-date-time-input.entry.js +1 -1
  87. package/dist/esm/ez-dialog.entry.js +1 -1
  88. package/dist/esm/ez-dropdown.entry.js +1 -1
  89. package/dist/esm/ez-file-item.entry.js +1 -1
  90. package/dist/esm/ez-form-view.entry.js +1 -1
  91. package/dist/esm/ez-form.entry.js +1 -1
  92. package/dist/esm/ez-grid.entry.js +8 -3
  93. package/dist/esm/ez-guide-navigator.entry.js +1 -1
  94. package/dist/esm/ez-icon.entry.js +1 -1
  95. package/dist/esm/ez-list.entry.js +1 -1
  96. package/dist/esm/ez-loading-bar.entry.js +1 -1
  97. package/dist/esm/ez-modal-container.entry.js +1 -1
  98. package/dist/esm/ez-modal.entry.js +1 -1
  99. package/dist/esm/ez-multi-selection-list.entry.js +1 -1
  100. package/dist/esm/ez-number-input.entry.js +1 -1
  101. package/dist/esm/ez-popover.entry.js +1 -1
  102. package/dist/esm/ez-popup.entry.js +1 -1
  103. package/dist/esm/ez-radio-button.entry.js +1 -1
  104. package/dist/esm/ez-scroller_2.entry.js +217 -0
  105. package/dist/esm/ez-search.entry.js +30 -32
  106. package/dist/esm/ez-sidebar-navigator.entry.js +88 -0
  107. package/dist/esm/ez-skeleton.entry.js +1 -1
  108. package/dist/esm/ez-split-button.entry.js +1 -1
  109. package/dist/esm/ez-split-item.entry.js +1 -1
  110. package/dist/esm/ez-split-panel.entry.js +1 -1
  111. package/dist/esm/ez-tabselector.entry.js +1 -1
  112. package/dist/esm/ez-text-area.entry.js +1 -1
  113. package/dist/esm/ez-text-input.entry.js +1 -1
  114. package/dist/esm/ez-time-input.entry.js +1 -1
  115. package/dist/esm/ez-toast.entry.js +1 -1
  116. package/dist/esm/{ez-scroller_3.entry.js → ez-tree.entry.js} +3 -216
  117. package/dist/esm/ez-upload.entry.js +1 -1
  118. package/dist/esm/ez-view-stack.entry.js +1 -1
  119. package/dist/esm/ezui.js +3 -3
  120. package/dist/esm/filter-column.entry.js +1 -1
  121. package/dist/esm/{index-baa5e267.js → index-5a720e56.js} +13 -3
  122. package/dist/esm/loader.js +3 -3
  123. package/dist/ezui/ezui.esm.js +1 -1
  124. package/dist/ezui/p-034e21ca.entry.js +1 -0
  125. package/dist/ezui/{p-44caad9a.entry.js → p-0378416a.entry.js} +1 -1
  126. package/dist/ezui/{p-5b205c80.entry.js → p-044d46d5.entry.js} +1 -1
  127. package/dist/ezui/{p-1285c902.entry.js → p-11b09aa1.entry.js} +1 -1
  128. package/dist/ezui/{p-77a4bd35.entry.js → p-11bfeca3.entry.js} +1 -1
  129. package/dist/ezui/p-1b08bf3c.entry.js +1 -0
  130. package/dist/ezui/{p-af95cd16.entry.js → p-24ca32a3.entry.js} +1 -1
  131. package/dist/ezui/{p-7922142b.entry.js → p-2af4e2de.entry.js} +1 -1
  132. package/dist/ezui/{p-baf80b13.entry.js → p-30951bd7.entry.js} +1 -1
  133. package/dist/ezui/{p-922ac38b.entry.js → p-31674f8e.entry.js} +1 -1
  134. package/dist/ezui/{p-bf79aaa1.entry.js → p-33792b2b.entry.js} +1 -1
  135. package/dist/ezui/{p-e85c48d7.entry.js → p-36180f4d.entry.js} +1 -1
  136. package/dist/ezui/{p-7bc07c31.entry.js → p-3f8c33e0.entry.js} +1 -1
  137. package/dist/ezui/{p-5056284a.entry.js → p-439fbc78.entry.js} +1 -1
  138. package/dist/ezui/p-5fefcdc9.entry.js +1 -0
  139. package/dist/ezui/{p-1f50fa05.entry.js → p-6b51c9cc.entry.js} +1 -1
  140. package/dist/ezui/p-6ec40dec.entry.js +1 -0
  141. package/dist/ezui/{p-5ed81457.entry.js → p-6fc26622.entry.js} +1 -1
  142. package/dist/ezui/p-752c4069.entry.js +1 -0
  143. package/dist/ezui/{p-555c9018.entry.js → p-7567ccdd.entry.js} +1 -1
  144. package/dist/ezui/{p-1e7a8633.entry.js → p-81461d2f.entry.js} +1 -1
  145. package/dist/ezui/{p-3b4eeeb6.entry.js → p-81cffa53.entry.js} +1 -1
  146. package/dist/ezui/p-81f99ace.entry.js +1 -0
  147. package/dist/ezui/{p-072e6347.entry.js → p-82ac8b06.entry.js} +1 -1
  148. package/dist/ezui/{p-8df1ca33.entry.js → p-82fa4b09.entry.js} +1 -1
  149. package/dist/ezui/{p-bcb53f27.entry.js → p-868b56f7.entry.js} +1 -1
  150. package/dist/ezui/{p-85c8baae.entry.js → p-8eef0f70.entry.js} +1 -1
  151. package/dist/ezui/{p-09de35a2.entry.js → p-91ccae0c.entry.js} +1 -1
  152. package/dist/ezui/{p-3faa2b46.entry.js → p-9634631d.entry.js} +1 -1
  153. package/dist/ezui/{p-f3c526cc.entry.js → p-9a11e223.entry.js} +1 -1
  154. package/dist/ezui/{p-7af81663.entry.js → p-9a23d513.entry.js} +1 -1
  155. package/dist/ezui/{p-84e439b9.entry.js → p-9aa27e69.entry.js} +1 -1
  156. package/dist/ezui/{p-784fe207.entry.js → p-9c2e2d68.entry.js} +1 -1
  157. package/dist/ezui/{p-9ab22a07.entry.js → p-a35b41e6.entry.js} +1 -1
  158. package/dist/ezui/{p-9050d2cd.entry.js → p-b0e71d23.entry.js} +1 -1
  159. package/dist/ezui/{p-17be134a.entry.js → p-b2f6bc0a.entry.js} +1 -1
  160. package/dist/ezui/{p-e252a728.entry.js → p-b8bb2054.entry.js} +2 -2
  161. package/dist/ezui/{p-9f5fa3f9.entry.js → p-c2b20f78.entry.js} +1 -1
  162. package/dist/ezui/{p-5bd5e68f.entry.js → p-c3b7a23e.entry.js} +1 -1
  163. package/dist/ezui/{p-2dcb50d4.entry.js → p-c5a80844.entry.js} +1 -1
  164. package/dist/ezui/{p-d9401ea0.entry.js → p-cd1a2e6b.entry.js} +1 -1
  165. package/dist/ezui/{p-bae4e180.entry.js → p-dbeee5aa.entry.js} +1 -1
  166. package/dist/ezui/{p-2097d0cf.entry.js → p-de870657.entry.js} +1 -1
  167. package/dist/ezui/{p-a80b1287.entry.js → p-dfca5946.entry.js} +1 -1
  168. package/dist/ezui/{p-30775e7f.entry.js → p-e151e795.entry.js} +1 -1
  169. package/dist/ezui/{p-23a36bb6.js → p-e4c7eb39.js} +2 -2
  170. package/dist/ezui/{p-0306dff7.entry.js → p-e6b38ade.entry.js} +1 -1
  171. package/dist/ezui/{p-650e4b6d.entry.js → p-f1c2c19e.entry.js} +1 -1
  172. package/dist/ezui/{p-13d2fe2d.entry.js → p-f1c3f85d.entry.js} +1 -1
  173. package/dist/ezui/{p-49456b34.entry.js → p-f291db18.entry.js} +1 -1
  174. package/dist/ezui/{p-6e429cff.entry.js → p-fc194825.entry.js} +1 -1
  175. package/dist/types/components/ez-search/ez-search.d.ts +2 -1
  176. package/dist/types/components/ez-sidebar-navigator/ez-sidebar-navigator.d.ts +57 -0
  177. package/dist/types/components/ez-sidebar-navigator/interfaces/ModeMenuEnum.d.ts +4 -0
  178. package/dist/types/components/ez-sidebar-navigator/interfaces/SizeMenuEnum.d.ts +5 -0
  179. package/dist/types/components/ez-sidebar-navigator/interfaces/TypeMenuEnum.d.ts +5 -0
  180. package/dist/types/components/ez-sidebar-navigator/interfaces/index.d.ts +3 -0
  181. package/dist/types/components/ez-sidebar-navigator/messages/constants.d.ts +5 -0
  182. package/dist/types/components.d.ts +90 -0
  183. package/package.json +1 -1
  184. package/react/components.d.ts +1 -0
  185. package/react/components.js +1 -0
  186. package/react/components.js.map +1 -1
  187. package/dist/ezui/p-1c462106.entry.js +0 -1
  188. package/dist/ezui/p-4d5235f1.entry.js +0 -1
  189. package/dist/ezui/p-91f626d3.entry.js +0 -1
  190. package/dist/ezui/p-bc2f844e.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
  }
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
+ }
49
52
  async observeValue(newValue, oldValue) {
50
- if (this._textInput && newValue != oldValue) {
51
- try {
52
- if (typeof newValue === "string") {
53
- await this.handleValueAsString(newValue);
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();
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) {
@@ -143,7 +136,9 @@ export class EzSearch {
143
136
  return;
144
137
  }
145
138
  await this.loadDescriptionValue(value);
139
+ this.setInputValue();
146
140
  this.ezChange.emit(this.value);
141
+ this._currentValue = this.value;
147
142
  }
148
143
  updateListPosition() {
149
144
  let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
@@ -200,7 +195,7 @@ export class EzSearch {
200
195
  return text;
201
196
  }
202
197
  getText() {
203
- const currentValue = this.getSelectedOption(this.value);
198
+ const currentValue = this.getSelectedOption(this._currentValue);
204
199
  const text = this.getFormattedText(currentValue);
205
200
  if (text == undefined) {
206
201
  return;
@@ -375,6 +370,7 @@ export class EzSearch {
375
370
  || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
376
371
  const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
377
372
  this.value = adjustedOpt;
373
+ this._currentValue = adjustedOpt;
378
374
  }
379
375
  else {
380
376
  this.setInputValue();
@@ -395,7 +391,7 @@ export class EzSearch {
395
391
  }
396
392
  }
397
393
  cancelPreselection() {
398
- if (!this._textInput.value && this.value) {
394
+ if (!this._textInput.value && this._currentValue) {
399
395
  this.selectOption(undefined);
400
396
  }
401
397
  else {
@@ -416,6 +412,7 @@ export class EzSearch {
416
412
  }
417
413
  clearSearch() {
418
414
  this.value = null;
415
+ this._currentValue = null;
419
416
  }
420
417
  controlListWithOnlyOne() {
421
418
  var _a, _b;
@@ -445,11 +442,11 @@ export class EzSearch {
445
442
  if (StringUtils.isEmpty(this.value)) {
446
443
  return;
447
444
  }
448
- let value = this.value;
449
- if (typeof value === "object") {
445
+ if (!this.validateNewValue(this.value, this._currentValue)) {
450
446
  return;
451
447
  }
452
- if (StringUtils.isEmpty(value)) {
448
+ let value = this.value;
449
+ if (typeof value === "object") {
453
450
  return;
454
451
  }
455
452
  this.loadDescriptionValue(value);
@@ -486,8 +483,8 @@ export class EzSearch {
486
483
  this.showNoResultMessage();
487
484
  return;
488
485
  }
489
- this._lookupMode = true;
490
- 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;
491
488
  }
492
489
  loadOptionValue(argument) {
493
490
  var _a;
@@ -546,6 +543,7 @@ export class EzSearch {
546
543
  this.validateDescriptionValue();
547
544
  }
548
545
  componentDidLoad() {
546
+ this._currentValue = this.value;
549
547
  CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
550
548
  this.setInputValue(false);
551
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
+ };