@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-77126.0 → 0.0.0-bugfix-dev-KB-77074.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 (149) hide show
  1. package/dist/cjs/RecordValidationProcessor-10846595.js +108 -0
  2. package/dist/cjs/ez-card-item_3.cjs.entry.js +19 -12
  3. package/dist/cjs/ez-chart.cjs.entry.js +1 -1
  4. package/dist/cjs/ez-combo-box.cjs.entry.js +10 -46
  5. package/dist/cjs/ez-date-input.cjs.entry.js +2 -8
  6. package/dist/cjs/ez-date-time-input.cjs.entry.js +2 -8
  7. package/dist/cjs/ez-dialog.cjs.entry.js +2 -10
  8. package/dist/cjs/ez-form-view.cjs.entry.js +2 -2
  9. package/dist/cjs/ez-form.cjs.entry.js +324 -4
  10. package/dist/cjs/ez-grid.cjs.entry.js +70542 -14645
  11. package/dist/cjs/ez-list.cjs.entry.js +100 -151
  12. package/dist/cjs/ez-number-input.cjs.entry.js +0 -7
  13. package/dist/cjs/ez-popover.cjs.entry.js +1 -1
  14. package/dist/cjs/ez-popup.cjs.entry.js +1 -1
  15. package/dist/cjs/ez-search.cjs.entry.js +12 -28
  16. package/dist/cjs/ez-text-area.cjs.entry.js +4 -66
  17. package/dist/cjs/ez-text-input.cjs.entry.js +7 -49
  18. package/dist/cjs/ez-time-input.cjs.entry.js +0 -6
  19. package/dist/cjs/ezui.cjs.js +1 -1
  20. package/dist/cjs/loader.cjs.js +1 -1
  21. package/dist/collection/collection-manifest.json +1 -1
  22. package/dist/collection/components/ez-card-item/ez-card-item.css +5 -14
  23. package/dist/collection/components/ez-combo-box/ez-combo-box.js +14 -75
  24. package/dist/collection/components/ez-date-input/ez-date-input.js +4 -35
  25. package/dist/collection/components/ez-date-time-input/ez-date-time-input.js +4 -35
  26. package/dist/collection/components/ez-dialog/ez-dialog.css +3 -3
  27. package/dist/collection/components/ez-dialog/ez-dialog.js +1 -9
  28. package/dist/collection/components/ez-filter-input/ez-filter-input.css +11 -0
  29. package/dist/collection/components/ez-filter-input/ez-filter-input.js +52 -22
  30. package/dist/collection/components/ez-form/ez-form.js +0 -1
  31. package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js +2 -2
  32. package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js +25 -80
  33. package/dist/collection/components/ez-grid/controller/ag-grid/DataSource.js +0 -8
  34. package/dist/collection/components/ez-grid/controller/ag-grid/GridEditionManager.js +46 -167
  35. package/dist/collection/components/ez-grid/controller/ag-grid/components/EzGridCustomCellEditor.js +0 -7
  36. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/ComboBox.tpl.js +0 -1
  37. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/DateInput.tpl.js +0 -1
  38. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/NumberInput.tpl.js +0 -1
  39. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/Search.tpl.js +0 -1
  40. package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/TextInput.tpl.js +1 -4
  41. package/dist/collection/components/ez-grid/ez-grid.js +3 -90
  42. package/dist/collection/components/ez-list/ez-list.css +5 -5
  43. package/dist/collection/components/ez-list/ez-list.js +170 -152
  44. package/dist/collection/components/ez-number-input/ez-number-input.js +0 -25
  45. package/dist/collection/components/ez-popover/ez-popover.css +10 -3
  46. package/dist/collection/components/ez-popup/ez-popup.js +1 -1
  47. package/dist/collection/components/ez-search/ez-search.css +1 -1
  48. package/dist/collection/components/ez-search/ez-search.js +14 -55
  49. package/dist/collection/components/ez-text-area/ez-text-area.css +0 -49
  50. package/dist/collection/components/ez-text-area/ez-text-area.js +2 -102
  51. package/dist/collection/components/ez-text-input/ez-text-input.css +53 -27
  52. package/dist/collection/components/ez-text-input/ez-text-input.js +6 -84
  53. package/dist/collection/components/ez-time-input/ez-time-input.js +0 -24
  54. package/dist/collection/utils/form/DataBinder.js +3 -18
  55. package/dist/collection/utils/interfaces/AbstractFieldMetadata.js +1 -1
  56. package/dist/custom-elements/index.js +70890 -15272
  57. package/dist/esm/RecordValidationProcessor-9c6cc267.js +105 -0
  58. package/dist/esm/ez-card-item_3.entry.js +19 -12
  59. package/dist/esm/ez-chart.entry.js +1 -1
  60. package/dist/esm/ez-combo-box.entry.js +11 -47
  61. package/dist/esm/ez-date-input.entry.js +2 -8
  62. package/dist/esm/ez-date-time-input.entry.js +2 -8
  63. package/dist/esm/ez-dialog.entry.js +2 -10
  64. package/dist/esm/ez-form-view.entry.js +2 -2
  65. package/dist/esm/ez-form.entry.js +323 -3
  66. package/dist/esm/ez-grid.entry.js +70542 -14645
  67. package/dist/esm/ez-list.entry.js +101 -152
  68. package/dist/esm/ez-number-input.entry.js +0 -7
  69. package/dist/esm/ez-popover.entry.js +1 -1
  70. package/dist/esm/ez-popup.entry.js +1 -1
  71. package/dist/esm/ez-search.entry.js +12 -28
  72. package/dist/esm/ez-text-area.entry.js +4 -66
  73. package/dist/esm/ez-text-input.entry.js +7 -49
  74. package/dist/esm/ez-time-input.entry.js +0 -6
  75. package/dist/esm/ezui.js +1 -1
  76. package/dist/esm/loader.js +1 -1
  77. package/dist/ezui/ezui.esm.js +1 -1
  78. package/dist/ezui/p-188f1c4c.entry.js +1 -0
  79. package/dist/ezui/p-49456b34.entry.js +1 -0
  80. package/dist/ezui/p-5a90d7d1.entry.js +1 -0
  81. package/dist/ezui/p-5b205c80.entry.js +1 -0
  82. package/dist/ezui/p-62732269.entry.js +1 -0
  83. package/dist/ezui/p-86b6aa01.entry.js +1 -0
  84. package/dist/ezui/p-b3b94f72.entry.js +1 -0
  85. package/dist/ezui/p-b95632e8.entry.js +1 -0
  86. package/dist/ezui/p-bcd47eda.entry.js +1 -0
  87. package/dist/ezui/p-c3c3d640.entry.js +304 -0
  88. package/dist/ezui/p-cdc472cc.entry.js +1 -0
  89. package/dist/ezui/p-d2c06f38.entry.js +1 -0
  90. package/dist/ezui/p-d8f64bb7.entry.js +1 -0
  91. package/dist/ezui/p-dc4ada32.entry.js +1 -0
  92. package/dist/ezui/p-e85c48d7.entry.js +1 -0
  93. package/dist/ezui/p-f299c608.entry.js +1 -0
  94. package/dist/ezui/p-f42855b9.js +1 -0
  95. package/dist/ezui/p-f80ac647.entry.js +1 -0
  96. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +1 -7
  97. package/dist/types/components/ez-date-input/ez-date-input.d.ts +1 -6
  98. package/dist/types/components/ez-date-time-input/ez-date-time-input.d.ts +1 -6
  99. package/dist/types/components/ez-dialog/ez-dialog.d.ts +0 -2
  100. package/dist/types/components/ez-filter-input/ez-filter-input.d.ts +11 -4
  101. package/dist/types/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.d.ts +1 -1
  102. package/dist/types/components/ez-grid/controller/EzGridController.d.ts +0 -12
  103. package/dist/types/components/ez-grid/controller/ag-grid/AgGridController.d.ts +2 -7
  104. package/dist/types/components/ez-grid/controller/ag-grid/DataSource.d.ts +1 -2
  105. package/dist/types/components/ez-grid/controller/ag-grid/GridEditionManager.d.ts +7 -19
  106. package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomCellEditor.d.ts +1 -3
  107. package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomCellRender.d.ts +1 -1
  108. package/dist/types/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.d.ts +1 -1
  109. package/dist/types/components/ez-grid/controller/ag-grid/components/cellRendererStatus.d.ts +1 -1
  110. package/dist/types/components/ez-grid/controller/ag-grid/components/selectionHeader.d.ts +1 -1
  111. package/dist/types/components/ez-grid/controller/ag-grid/editor/EzCellEditor.d.ts +1 -1
  112. package/dist/types/components/ez-grid/controller/ag-grid/editor/EzCellRender.d.ts +1 -1
  113. package/dist/types/components/ez-grid/controller/ag-grid/editor/IUICellEditor.d.ts +0 -1
  114. package/dist/types/components/ez-grid/controller/ag-grid/mock/Server.d.ts +1 -1
  115. package/dist/types/components/ez-grid/ez-grid.d.ts +1 -11
  116. package/dist/types/components/ez-list/ez-list.d.ts +26 -3
  117. package/dist/types/components/ez-number-input/ez-number-input.d.ts +0 -4
  118. package/dist/types/components/ez-search/ez-search.d.ts +1 -6
  119. package/dist/types/components/ez-text-area/ez-text-area.d.ts +0 -17
  120. package/dist/types/components/ez-text-input/ez-text-input.d.ts +0 -9
  121. package/dist/types/components/ez-time-input/ez-time-input.d.ts +0 -4
  122. package/dist/types/components.d.ts +42 -107
  123. package/dist/types/utils/form/DataBinder.d.ts +0 -3
  124. package/package.json +4 -11
  125. package/dist/cjs/DataBinder-3b083480.js +0 -445
  126. package/dist/cjs/FocusResolver-885f2173.js +0 -35
  127. package/dist/collection/utils/FocusResolver.js +0 -31
  128. package/dist/esm/DataBinder-02fa9bb9.js +0 -441
  129. package/dist/esm/FocusResolver-1ccbf850.js +0 -33
  130. package/dist/ezui/p-0a75bb05.entry.js +0 -1
  131. package/dist/ezui/p-0db68715.entry.js +0 -1
  132. package/dist/ezui/p-19098a3f.entry.js +0 -1
  133. package/dist/ezui/p-1f830a2f.entry.js +0 -1
  134. package/dist/ezui/p-2aa8e4b2.entry.js +0 -1
  135. package/dist/ezui/p-3dd919b7.entry.js +0 -1
  136. package/dist/ezui/p-455e737c.js +0 -1
  137. package/dist/ezui/p-8d0f02c7.entry.js +0 -309
  138. package/dist/ezui/p-91266ddd.entry.js +0 -1
  139. package/dist/ezui/p-97af4b13.entry.js +0 -1
  140. package/dist/ezui/p-a5b91a77.entry.js +0 -1
  141. package/dist/ezui/p-a80b1287.entry.js +0 -1
  142. package/dist/ezui/p-b54e17d2.entry.js +0 -1
  143. package/dist/ezui/p-bfad39eb.entry.js +0 -1
  144. package/dist/ezui/p-c27b2e17.entry.js +0 -1
  145. package/dist/ezui/p-cd2e78f0.entry.js +0 -1
  146. package/dist/ezui/p-d0ca26fe.entry.js +0 -1
  147. package/dist/ezui/p-dc628ed3.js +0 -1
  148. package/dist/ezui/p-ffd246f5.entry.js +0 -1
  149. package/dist/types/utils/FocusResolver.d.ts +0 -5
@@ -1,18 +1,20 @@
1
1
  import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-baa5e267.js';
2
- import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
2
+ import { StringUtils, ElementIDUtils, KeyboardManager } from '@sankhyalabs/core';
3
3
 
4
- const ezListCss = ".sc-ez-list-h {\n \n --ez-list__host--z-index: var(--visible, 1);\n\n \n --ez-list__host--border-radius: var(--border--radius-medium, 12px);\n\n \n --ez-list__host--padding: var(--space--medium, 12px);\n\n \n --ez-list__icon--padding: var(--space--small, 6px);\n\n \n --ez-list__icon--color: #AFB6C0;\n\n \n --ez-list__item--margin: 0 var(--space--small, 6px);\n\n \n --ez-list__item--color: var(--title--primary, #2b3a54);\n\n \n --ez-list__item--border-bottom;\n\n \n --ez-list__item--border-bottom-color;\n\n \n --ez-list__item--font-family: var(--font-pattern, \"Roboto\");\n\n \n --ez-list__item--font-size: var(--text--medium, 14px);\n \n \n --ez-list__item--white-space: var(--ez-list__item--white-space, nowrap);\n\n \n --ez-list__selectable--padding-right: var(--space--small, 6px);\n \n \n --ez-list__selectable--padding-left: var(--space--small, 6px);\n\n \n --ez-list__selected-item--border-radius: var(--border--radius-small, 6px);\n \n \n --ez-list__selected-item--background-color: var(--color--primary-300, #E2F4EF);\n\n \n --ez-list__group--font-family: var(--font-pattern, \"Roboto\");\n \n \n --ez-list__group--font-size: var(--text--medium, 14px);\n \n \n --ez-list__group--font-weight: var(--text-weight--large, 600);\n \n \n --ez-list__group--padding-bottom: var(--space-small, 6px);\n\n \n --ez-list__group-overlay--font-family: var(--font-pattern, \"Roboto\");\n\n \n --ez-list__group-overlay--font-size: var(--text--medium, 14px);\n \n \n --ez-list__over--border--color: var(--color--primary, #008561);\n\n \n --ez-list__last-droppable-space--height: var(--space--small, 6px);\n \n \n --ez-list__draggable-list--padding-bottom: var(--space--small, 6px);\n\n \n --ez-list__draggable-icon--image: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');\n\n \n \n --ez-list__scrollbar--color-default: var(--scrollbar--default, #626e82);\n \n --ez-list__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);\n \n --ez-list__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);\n \n --ez-list__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);\n \n --ez-list__scrollbar--border-radius: var(--border--radius-small, 6px);\n \n --ez-list__scrollbar--width: var(--space--medium, 12px);\n\n max-height: 100%;\n width: 100%;\n background-color: #fff;\n display: flex;\n\n \n z-index: var(--ez-list__host--z-index);\n}\n\np.sc-ez-list {\n margin: 0;\n}\n\n.draggable.sc-ez-list {\n \n width: 100%;\n display: grid;\n grid-template-columns: minmax(0px, auto) minmax(0px, auto);\n place-items: center;\n border-top: 1px dashed #fff;\n justify-content: space-between;\n\n \n font-family: var(--ez-list__item--font-family);\n font-size: var(--ez-list__item--font-size);\n}\n\n.dragging.sc-ez-list {\n background: #FFFFFF;\n \n\n border: 1px solid #008561;\n box-sizing: border-box;\n box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);\n border-radius: 6px;\n}\n\n.selectable.sc-ez-list {\n cursor: pointer;\n\n \n padding-right: var(--ez-list__selectable--padding-right);\n padding-left: var(--ez-list__selectable--padding-left);\n}\n\n.selectable-container.sc-ez-list {\n margin: 0px !important;\n}\n\n.hover-feedback.sc-ez-list:hover {\n background-color: var(--background--medium);\n border-radius: var(--border--radius-regular);\n}\n\n.item-content.sc-ez-list {\n display: flex;\n align-items: center;\n overflow: hidden;\n justify-content: flex-start;\n width: 100%;\n}\n\n.draggable-list.sc-ez-list {\n padding: 0;\n margin: 0;\n width: 100%;\n max-height: 100%;\n scrollbar-width: thin;\n \n \n color: var(--text-color);\n scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.draggable-list.sc-ez-list li.sc-ez-list {\n display: flex;\n \n \n font-family: var(--ez-list__item--font-family);\n font-size: var(--ez-list__item--font-size);\n color: var(--ez-list__item--color);\n border-bottom: var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color);\n}\n\n.draggable-list.sc-ez-list li.sc-ez-list > div.sc-ez-list {\n \n padding: var(--space--3xs, 4px) var(--space--3xs, 4px);\n margin: var(--ez-list__item--margin);\n}\n\n.over.sc-ez-list {\n \n border-top: 1px dashed var(--ez-list__over--border--color);\n}\n\n.last-droppable-space.sc-ez-list {\n \n height: var(--ez-list__last-droppable-space--height);\n}\n\n.draggable-selected.sc-ez-list {\n \n background-color: var(--background--strong) !important;\n}\n\n.draggable-selected.sc-ez-list div.sc-ez-list:hover {\n \n background-color: var(--background--strong) !important;\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar {\n \n background-color: var(--ez-list__scrollbar--color-background);\n width: var(--ez-list__scrollbar--width);\n max-width: var(--ez-list__scrollbar--width);\n min-width: var(--ez-list__scrollbar--width);\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar-track {\n \n background-color: var(--ez-list__scrollbar--color-background);\n border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar-thumb {\n \n background-color: var(--ez-list__scrollbar--color-default);\n border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover, .draggable-list.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover {\n \n background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.draggable-list.sc-ez-list::-webkit-scrollbar-thumb:vertical:active, .draggable-list.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active {\n \n background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.draggable-icon.sc-ez-list {\n align-items: flex-start;\n display: flex;\n outline: none;\n border: none;\n background-color: unset;\n}\n\n.draggable-icon.sc-ez-list::after {\n content: '';\n display: flex;\n width: 18px;\n height: 18px;\n\n \n background-color: var(--ez-list__icon--color);\n -webkit-mask-image: var(--ez-list__draggable-icon--image);\n mask-image: var(--ez-list__draggable-icon--image);\n}\n\n*.sc-ez-list {\n box-sizing: border-box;\n}\n\n.checkbox.sc-ez-list {\n width: fit-content;\n}\n\n.text--ellipsis.sc-ez-list {\n overflow: hidden;\n text-overflow: ellipsis;\n \n \n white-space: var(--ez-list__item--white-space);\n}\n\n.group-container.sc-ez-list {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n overflow-y: auto;\n outline: none;\n width: 100%;\n scrollbar-width: thin;\n\n \n scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-name.sc-ez-list {\n -webkit-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n user-select: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n \n color: var(--title--primary);\n font-family: var(--ez-list__group--font-family);\n font-size: var(--ez-list__group--font-size);\n font-weight: var(--ez-list__group--font-weight);\n padding-bottom: var(--ez-list__group--padding-bottom);\n}\n\n.group.sc-ez-list {\n display: flex;\n flex-direction: column;\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar {\n \n background-color: var(--ez-list__scrollbar--color-background);\n width: var(--ez-list__scrollbar--width);\n max-width: var(--ez-list__scrollbar--width);\n min-width: var(--ez-list__scrollbar--width);\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar-track {\n \n background-color: var(--ez-list__scrollbar--color-background);\n border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar-thumb {\n \n background-color: var(--ez-list__scrollbar--color-default);\n border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover, .group-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover {\n \n background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.group-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:active, .group-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active {\n \n background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.section-container.sc-ez-list {\n display: flex;\n position: relative;\n height: 100%;\n}\n\n.items-container.sc-ez-list {\n width: 100%;\n max-height: 100%;\n outline: none;\n scrollbar-width: thin;\n\n \n scrollbar-color: var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background);\n}\n\n.group-items-container.sc-ez-list {\n width: 100%;\n max-height: 100%;\n height: 100%;\n outline: none;\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar {\n \n background-color: var(--ez-list__scrollbar--color-background);\n width: var(--ez-list__scrollbar--width);\n max-width: var(--ez-list__scrollbar--width);\n min-width: var(--ez-list__scrollbar--width);\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar-track {\n \n background-color: var(--ez-list__scrollbar--color-background);\n border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar-thumb {\n \n background-color: var(--ez-list__scrollbar--color-default);\n border-radius: var(--ez-list__scrollbar--border-radius);\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover, .items-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover {\n \n background-color: var(--ez-list__scrollbar--color-hover);\n}\n\n.items-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:active, .items-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active {\n \n background-color: var(--ez-list__scrollbar--color-clicked);\n}\n\n.group-overlay.sc-ez-list {\n background: rgba(226, 244, 239, 0.8);\n border: 1px solid #008561;\n border-radius: 8px;\n position: absolute;\n display: none;\n place-items: center;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 2;\n margin: 0;\n cursor: pointer;\n\n \n font-family: var(--ez-list__group-overlay--font-family);\n font-size: var(--ez-list__group-overlay--font-size);\n}\n\n.presetedHeight.sc-ez-list {\n min-height: 100px;\n}\n\n.overlay-text.sc-ez-list {\n position: absolute;\n top: 50%;\n left: 50%;\n font-size: 50px;\n color: white;\n transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n}\n\n.selected-item.sc-ez-list {\n \n background: var(--ez-list__selected-item--background-color);\n border-radius: var(--ez-list__selected-item--border-radius);\n}\n\n.slot-item.sc-ez-list {\n align-items: flex-end;\n}\n\n.overGroup.sc-ez-list {\n background: rgba(226, 244, 239, 0.8);\n border: 1px solid #008561;\n box-sizing: border-box;\n border-radius: 8px;\n padding-top: 6px;\n}";
4
+ const ezListCss = ".sc-ez-list-h{--ez-list__host--z-index:var(--visible, 1);--ez-list__host--border-radius:var(--border--radius-medium, 12px);--ez-list__host--padding:var(--space--medium, 12px);--ez-list__icon--padding:var(--space--small, 6px);--ez-list__icon--color:#AFB6C0;--ez-list__item--margin:0 var(--space--small, 6px);--ez-list__item--color:var(--title--primary, #2b3a54);--ez-list__item--border-bottom:none;--ez-list__item--border-bottom-color:none;--ez-list__item--font-family:var(--font-pattern, \"Roboto\");--ez-list__item--font-size:var(--text--medium, 14px);--ez-list__item--white-space:var(--ez-list__item--white-space, nowrap);--ez-list__selectable--padding-right:var(--space--small, 6px);--ez-list__selectable--padding-left:var(--space--small, 6px);--ez-list__selected-item--border-radius:var(--border--radius-small, 6px);--ez-list__selected-item--background-color:var(--color--primary-300, #E2F4EF);--ez-list__group--font-family:var(--font-pattern, \"Roboto\");--ez-list__group--font-size:var(--text--medium, 14px);--ez-list__group--font-weight:var(--text-weight--large, 600);--ez-list__group--padding-bottom:var(--space-small, 6px);--ez-list__group-overlay--font-family:var(--font-pattern, \"Roboto\");--ez-list__group-overlay--font-size:var(--text--medium, 14px);--ez-list__over--border--color:var(--color--primary, #008561);--ez-list__last-droppable-space--height:var(--space--small, 6px);--ez-list__draggable-list--padding-bottom:var(--space--small, 6px);--ez-list__draggable-icon--image:url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z\"/></svg>');--ez-list__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-list__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-list__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-list__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-list__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-list__scrollbar--width:var(--space--medium, 12px);max-height:100%;width:100%;background-color:#fff;display:flex;z-index:var(--ez-list__host--z-index)}p.sc-ez-list{margin:0}.draggable.sc-ez-list{width:100%;display:grid;grid-template-columns:minmax(0px, auto) minmax(0px, auto);place-items:center;border-top:1px solid #fff;justify-content:space-between;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size)}.dragging.sc-ez-list{background:#FFFFFF;border:1px solid #008561;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0, 38, 111, 0.122);border-radius:6px}.selectable.sc-ez-list{cursor:pointer;padding-right:var(--ez-list__selectable--padding-right);padding-left:var(--ez-list__selectable--padding-left)}.selectable-container.sc-ez-list{margin:0px !important}.hover-feedback.sc-ez-list:hover{background-color:var(--background--medium);border-radius:var(--border--radius-regular)}.item-content.sc-ez-list{display:flex;align-items:center;overflow:hidden;justify-content:flex-start;width:100%}.draggable-list.sc-ez-list{padding:0;margin:0;width:100%;max-height:100%;scrollbar-width:thin;color:var(--text-color);scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.draggable-list.sc-ez-list li.sc-ez-list{display:flex;font-family:var(--ez-list__item--font-family);font-size:var(--ez-list__item--font-size);color:var(--ez-list__item--color);border-bottom:var(--ez-list__item--border-bottom, none) var(--ez-list__item--border-bottom-color)}.draggable-list.sc-ez-list li.sc-ez-list>div.sc-ez-list{padding:var(--space--2xs, 8px) var(--space--3xs, 4px);margin:var(--ez-list__item--margin)}.over.sc-ez-list{border-top:1px dashed var(--ez-list__over--border--color)}.last-droppable-space.sc-ez-list{height:var(--ez-list__last-droppable-space--height)}.draggable-selected.sc-ez-list{background-color:var(--background--strong) !important}.draggable-selected.sc-ez-list div.sc-ez-list:hover{background-color:var(--background--strong) !important}.draggable-list.sc-ez-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.draggable-list.sc-ez-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list.sc-ez-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.draggable-list.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover,.draggable-list.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.draggable-list.sc-ez-list::-webkit-scrollbar-thumb:vertical:active,.draggable-list.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.draggable-icon.sc-ez-list{align-items:flex-start;display:flex;outline:none;border:none;background-color:unset}.draggable-icon.sc-ez-list::after{content:'';display:flex;width:18px;height:18px;background-color:var(--ez-list__icon--color);-webkit-mask-image:var(--ez-list__draggable-icon--image);mask-image:var(--ez-list__draggable-icon--image)}*.sc-ez-list{box-sizing:border-box}.checkbox.sc-ez-list{width:fit-content}.text--ellipsis.sc-ez-list{overflow:hidden;text-overflow:ellipsis;white-space:var(--ez-list__item--white-space)}.group-container.sc-ez-list{display:flex;flex-direction:column;max-height:100%;overflow-y:auto;outline:none;width:100%;scrollbar-width:thin;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-name.sc-ez-list{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title--primary);font-family:var(--ez-list__group--font-family);font-size:var(--ez-list__group--font-size);font-weight:var(--ez-list__group--font-weight);padding-bottom:var(--ez-list__group--padding-bottom)}.group.sc-ez-list{display:flex;flex-direction:column}.group-container.sc-ez-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.group-container.sc-ez-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container.sc-ez-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.group-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover,.group-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.group-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:active,.group-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.section-container.sc-ez-list{display:flex;position:relative;height:100%}.items-container.sc-ez-list{width:100%;max-height:100%;outline:none;scrollbar-width:thin;overflow:auto;scrollbar-color:var(--ez-list__scrollbar--color-clicked) var(--ez-list__scrollbar--color-background)}.group-items-container.sc-ez-list{width:100%;max-height:100%;height:100%;outline:none}.items-container.sc-ez-list::-webkit-scrollbar{background-color:var(--ez-list__scrollbar--color-background);width:var(--ez-list__scrollbar--width);max-width:var(--ez-list__scrollbar--width);min-width:var(--ez-list__scrollbar--width)}.items-container.sc-ez-list::-webkit-scrollbar-track{background-color:var(--ez-list__scrollbar--color-background);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container.sc-ez-list::-webkit-scrollbar-thumb{background-color:var(--ez-list__scrollbar--color-default);border-radius:var(--ez-list__scrollbar--border-radius)}.items-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:hover,.items-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-list__scrollbar--color-hover)}.items-container.sc-ez-list::-webkit-scrollbar-thumb:vertical:active,.items-container.sc-ez-list::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-list__scrollbar--color-clicked)}.group-overlay.sc-ez-list{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;border-radius:8px;position:absolute;display:none;place-items:center;top:0;bottom:0;left:0;right:0;z-index:2;margin:0;cursor:pointer;font-family:var(--ez-list__group-overlay--font-family);font-size:var(--ez-list__group-overlay--font-size)}.presetedHeight.sc-ez-list{min-height:100px}.overlay-text.sc-ez-list{position:absolute;top:50%;left:50%;font-size:50px;color:white;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%)}.selected-item.sc-ez-list{background:var(--ez-list__selected-item--background-color);border-radius:var(--ez-list__selected-item--border-radius)}.slot-item.sc-ez-list{align-items:flex-end}.overGroup.sc-ez-list{background:rgba(226, 244, 239, 0.8);border:1px solid #008561;box-sizing:border-box;border-radius:8px;padding-top:6px}";
5
5
 
6
6
  const EzList = class {
7
7
  constructor(hostRef) {
8
8
  registerInstance(this, hostRef);
9
9
  this.ezChange = createEvent(this, "ezChange", 7);
10
10
  this.ezSelectItem = createEvent(this, "ezSelectItem", 7);
11
+ this.ezClickItem = createEvent(this, "ezClickItem", 7);
11
12
  this.ezCheckChange = createEvent(this, "ezCheckChange", 7);
12
13
  this.ezDoubleClick = createEvent(this, "ezDoubleClick", 7);
13
14
  this._listItemsHistory = [];
14
15
  this._listItems = [];
15
16
  this._listGroupItems = [];
17
+ this._selectedItem = undefined;
16
18
  this.dataSource = [];
17
19
  this.listMode = 'regular';
18
20
  this.useGroups = false;
@@ -21,6 +23,19 @@ const EzList = class {
21
23
  this.itemSlotBuilder = undefined;
22
24
  this.itemLeftSlotBuilder = undefined;
23
25
  this.hoverFeedback = false;
26
+ this.disableShortcuts = false;
27
+ }
28
+ /**
29
+ * Seleciona o próximo item.
30
+ */
31
+ async selectNextItem() {
32
+ this.nextOption();
33
+ }
34
+ /**
35
+ * Seleciona o item anterior.
36
+ */
37
+ async selectPreviousItem() {
38
+ this.previousOption();
24
39
  }
25
40
  /**
26
41
  * Limpa o histórico da lista.
@@ -44,23 +59,8 @@ const EzList = class {
44
59
  */
45
60
  async setSelection(selectedItem, scrollToOption) {
46
61
  if (selectedItem && this.ezSelectable) {
62
+ this._selectedItem = Object.assign({}, selectedItem);
47
63
  this.ezSelectItem.emit(selectedItem);
48
- if (this.useGroups) {
49
- let newList = [...this._listGroupItems];
50
- newList.forEach(groupItem => {
51
- groupItem.items.forEach(item => {
52
- item.selected = item.id === selectedItem.id;
53
- });
54
- });
55
- this._listGroupItems = newList;
56
- }
57
- else {
58
- let newList = [...this._listItems];
59
- newList.forEach(item => {
60
- item.selected = item.id === selectedItem.id;
61
- });
62
- this._listItems = newList;
63
- }
64
64
  if (scrollToOption) {
65
65
  let liElem = this.useGroups
66
66
  ? this._groupContainer.querySelector('li#item_' + selectedItem.id)
@@ -78,21 +78,7 @@ const EzList = class {
78
78
  * Obtém o item selecionado.
79
79
  */
80
80
  async getSelection() {
81
- let selectedItem;
82
- if (this.useGroups) {
83
- this._listGroupItems.every(group => {
84
- let item = group.items.find(item => item.selected == true);
85
- if (item) {
86
- selectedItem = item;
87
- return false;
88
- }
89
- return true;
90
- });
91
- }
92
- else {
93
- selectedItem = this._listItems.find(item => item.selected == true);
94
- }
95
- return selectedItem;
81
+ return this._selectedItem;
96
82
  }
97
83
  /**
98
84
  * Obtém a lista de items ou grupos.
@@ -107,22 +93,7 @@ const EzList = class {
107
93
  * Limpa a seleção atual
108
94
  */
109
95
  async removeSelection() {
110
- if (this.useGroups) {
111
- let newList = [...this._listGroupItems];
112
- newList.forEach(groupItem => {
113
- groupItem.items.forEach(item => {
114
- item.selected = false;
115
- });
116
- });
117
- this._listGroupItems = newList;
118
- }
119
- else {
120
- let newList = [...this._listItems];
121
- newList.forEach(item => {
122
- item.selected = false;
123
- });
124
- this._listItems = newList;
125
- }
96
+ this._selectedItem = undefined;
126
97
  }
127
98
  applyUUID(item) {
128
99
  if (!item.id) {
@@ -182,6 +153,10 @@ const EzList = class {
182
153
  }
183
154
  componentDidLoad() {
184
155
  ElementIDUtils.addIDInfo(this._element);
156
+ this.bindKeyboardManager();
157
+ }
158
+ disconnectCallback() {
159
+ this.unbindKeyboardManager();
185
160
  }
186
161
  onDrop(ev, dragEndItem) {
187
162
  this.removeOverClass();
@@ -374,92 +349,58 @@ const EzList = class {
374
349
  if (this.useGroups) {
375
350
  this.setSelection(this._listGroupItems[0].items[0]);
376
351
  }
377
- {
352
+ else {
378
353
  this.setSelection(this._listItems[0]);
379
354
  }
380
355
  }
381
- nextOption(selectedItem) {
382
- let nextItem = undefined;
356
+ getFlatedItems() {
383
357
  if (this.useGroups) {
384
- this._listGroupItems.every((group, groupIndex, listGroupItems) => {
385
- let item = undefined;
386
- let itemIndex = group.items.findIndex(item => item.id == selectedItem.id);
387
- if (itemIndex != undefined && itemIndex != -1) {
388
- if (itemIndex === group.items.length - 1) {
389
- if (groupIndex + 1 <= listGroupItems.length - 1) {
390
- item = { label: listGroupItems[groupIndex + 1].items[0].label };
391
- }
392
- }
393
- else {
394
- item = { label: group.items[itemIndex + 1].label };
395
- }
396
- }
397
- if (item != undefined) {
398
- nextItem = item;
399
- return false;
400
- }
401
- return true;
402
- });
358
+ const itemsGroups = this._listGroupItems.map(({ items }) => items).flat();
359
+ return itemsGroups;
403
360
  }
404
- else {
405
- let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
406
- if (itemIndex >= 0 && itemIndex < this._listItems.length) {
407
- nextItem = this._listItems[itemIndex + 1];
408
- }
409
- }
410
- this.setSelection(nextItem, true);
361
+ return this._listItems;
411
362
  }
412
- previousOption(selectedItem) {
413
- let previousItem = undefined;
414
- if (this.useGroups) {
415
- this._listGroupItems.every((group, groupIndex, listGroupItems) => {
416
- let item = undefined;
417
- let itemIndex = group.items.findIndex(item => item.id === selectedItem.id);
418
- if (itemIndex != undefined && itemIndex != -1) {
419
- if (itemIndex === 0) {
420
- if (groupIndex - 1 >= 0) {
421
- item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
422
- }
423
- }
424
- else {
425
- item = { label: group.items[itemIndex - 1].label };
426
- }
427
- }
428
- if (item != undefined) {
429
- previousItem = item;
430
- return false;
431
- }
432
- return true;
433
- });
363
+ getSelectedIndex(items) {
364
+ const itemIndex = items.findIndex(item => { var _a; return item.id === ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.id); });
365
+ return itemIndex;
366
+ }
367
+ nextOption() {
368
+ if (!this._selectedItem) {
369
+ this.selectFirstItem();
370
+ return;
434
371
  }
435
- else {
436
- let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
437
- if (itemIndex > 0 && itemIndex < this._listItems.length) {
438
- previousItem = this._listItems[itemIndex - 1];
439
- }
372
+ const items = this.getFlatedItems();
373
+ const itemIndex = this.getSelectedIndex(items);
374
+ if (itemIndex < (items.length - 1)) {
375
+ const nextItem = items[itemIndex + 1];
376
+ this.setSelection(nextItem, true);
440
377
  }
441
- this.setSelection(previousItem, true);
442
378
  }
443
- keyDownHandler(event) {
444
- if (!event.ctrlKey) {
445
- event.preventDefault();
379
+ previousOption() {
380
+ const items = this.getFlatedItems();
381
+ const itemIndex = this.getSelectedIndex(items);
382
+ if (itemIndex > 0) {
383
+ const previousItem = items[itemIndex - 1];
384
+ this.setSelection(previousItem, true);
446
385
  }
447
- this.getSelection().then(selectedItem => {
448
- if (selectedItem) {
449
- switch (event.key) {
450
- case 'ArrowDown':
451
- this.nextOption(selectedItem);
452
- break;
453
- case 'ArrowUp':
454
- this.previousOption(selectedItem);
455
- break;
456
- }
457
- }
458
- else {
459
- this.selectFirstItem();
460
- }
461
- });
462
- event.stopPropagation();
386
+ }
387
+ bindKeyboardManager() {
388
+ this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
389
+ if (this.disableShortcuts) {
390
+ return;
391
+ }
392
+ this._keyboardManager
393
+ .bind("ArrowDown", () => this.nextOption())
394
+ .bind("ArrowUp", () => this.previousOption())
395
+ .bind("shift+Tab", () => this.previousOption())
396
+ .bind("Tab", () => this.nextOption());
397
+ }
398
+ unbindKeyboardManager() {
399
+ this._keyboardManager
400
+ .unbind("ArrowDown")
401
+ .unbind("ArrowUp")
402
+ .unbind("shift+Tab")
403
+ .unbind("Tab");
463
404
  }
464
405
  getDivGroupId(groupName) {
465
406
  if (groupName) {
@@ -524,38 +465,46 @@ const EzList = class {
524
465
  doubleClickItem(item) {
525
466
  this.ezDoubleClick.emit(item);
526
467
  }
468
+ onClickItem(item) {
469
+ this.setSelection(item);
470
+ this.ezClickItem.emit(item);
471
+ }
527
472
  render() {
528
- return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? (h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => {
529
- this.keyDownHandler(event);
530
- } }, this._listGroupItems.map(group => {
531
- return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
473
+ return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? (h("div", { class: "group-container", ref: el => (this._groupContainer = el), tabIndex: 0 }, this._listGroupItems.map(group => {
474
+ return (h("div", { id: this.getDivGroupId(group.group), class: "group", key: group.group + group.items.length, onDrop: () => this.onDropGroup(group) }, h("label", { draggable: false, class: "group-name", title: group.group }, group.group), h("section", { class: "section-container", onDragOver: ev => ev.preventDefault() }, h("div", { class: "group-items-container" }, h("div", { class: "draggable-list" }, group.items.map((item, index) => {
475
+ var _a;
476
+ return (h("li", Object.assign({ id: 'item_' + item.id, class: {
477
+ 'selectable-container': this.ezSelectable,
478
+ 'hover-feedback': this.hoverFeedback,
479
+ }, key: 'item_' + item.id }, {
480
+ [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
481
+ }), h("div", { class: 'draggable' + (((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.id) === item.id ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => {
482
+ this.doubleClickItem(item);
483
+ }, onClick: () => {
484
+ this.onClickItem(item);
485
+ }, onDragLeave: () => {
486
+ group.sort ? undefined : this.removeOverClass();
487
+ }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => {
488
+ group.sort ? undefined : this.onDragOverItem(event);
489
+ }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item'))));
490
+ })), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
491
+ this.onDragOverLastIndex(event);
492
+ }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
493
+ }))) : (h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0 }, h("ul", { class: "draggable-list" }, this._listItems.map((item, index) => {
494
+ var _a, _b;
495
+ return (h("li", Object.assign({ id: 'item_' + item.id, class: {
532
496
  'selectable-container': this.ezSelectable,
533
- 'hover-feedback': this.hoverFeedback,
534
- }, key: 'item_' + item.id }, {
535
- [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`),
536
- }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => {
497
+ 'selected-item': ((_a = this._selectedItem) === null || _a === void 0 ? void 0 : _a.id) === item.id,
498
+ 'hover-feedback': this.hoverFeedback && ((_b = this._selectedItem) === null || _b === void 0 ? void 0 : _b.id) !== item.id,
499
+ }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onDblClick: () => {
537
500
  this.doubleClickItem(item);
538
501
  }, onClick: () => {
539
- this.setSelection(item);
540
- }, onDragLeave: () => {
541
- group.sort ? undefined : this.removeOverClass();
542
- }, onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => {
543
- group.sort ? undefined : this.onDragOverItem(event);
544
- }, onDrop: event => this.onDrop(event, { groupName: group.group, item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, this.listMode === 'regular' ? (h(Fragment, null, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item, group), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
502
+ this.onClickItem(item);
503
+ }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))));
504
+ }), this.ezDraggable &&
505
+ h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
545
506
  this.onDragOverLastIndex(event);
546
- }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event, group) })), group.sort ? (h("div", { id: this.getGroupOverlayId(group.group), class: "group-overlay" }, "Mover para ", group.group)) : undefined)));
547
- }))) : (h("div", { class: "items-container", ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
548
- this.keyDownHandler(event);
549
- } }, h("div", { class: "draggable-list" }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
550
- 'selectable-container': this.ezSelectable,
551
- 'hover-feedback': this.hoverFeedback,
552
- }, key: 'item_' + item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezListItem__${StringUtils.replaceAccentuatedChars(item.label)}`) }), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDragStart: () => this.onDragStart({ item: item, index: index }), onDblClick: () => {
553
- this.doubleClickItem(item);
554
- }, onClick: () => {
555
- this.setSelection(item);
556
- }, onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverItem(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDrop(event, { item: item, index: index }), draggable: this.ezDraggable }, h("div", { class: "item-content" }, this.listMode === 'regular' ? (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, !!this.itemLeftSlotBuilder && this.getContainerItemBuilder('left', item), h("p", { title: item.label, class: "person-name text--ellipsis" }, item.label))) : (h(Fragment, null, this.ezDraggable ? h("span", { class: "draggable-icon" }) : undefined, h("ez-check", { label: item.label, value: item.check, onEzChange: evt => this.ezCheckChange.emit({ id: item.id, label: item.label, check: evt.detail }) })))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item))))), h("div", { class: "last-droppable-space", onDragLeave: () => this.removeOverClass(), onDragOver: event => {
557
- this.onDragOverLastIndex(event);
558
- }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
507
+ }, onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) }))))));
559
508
  }
560
509
  };
561
510
  EzList.style = ezListCss;
@@ -23,7 +23,6 @@ const EzNumberInput = class {
23
23
  this.precision = undefined;
24
24
  this.prettyPrecision = undefined;
25
25
  this.mode = "regular";
26
- this.autoFocus = false;
27
26
  }
28
27
  /**
29
28
  * Aplica o foco no campo.
@@ -164,17 +163,11 @@ const EzNumberInput = class {
164
163
  const textValue = this.getTextValue(this.value) || '';
165
164
  if ((this._value || '') !== textValue) {
166
165
  this._value = textValue;
167
- this._textInput.value = this._value;
168
166
  }
169
167
  }
170
168
  componentDidLoad() {
171
169
  CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
172
170
  this.setInputValue();
173
- if (this.autoFocus) {
174
- requestAnimationFrame(() => {
175
- this.setFocus({ selectText: true });
176
- });
177
- }
178
171
  }
179
172
  render() {
180
173
  ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
2
2
  import { FloatingManager } from '@sankhyalabs/core';
3
3
 
4
- const ezPopoverCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--most-visible, 3);position:relative;display:flex;user-select:none}.popover__box{z-index:var(--ez-popover__box--z-index);display:flex;flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:100%}";
4
+ const ezPopoverCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--most-visible, 3);--ez-popover__height:fit-content;--ez-popover__max-height:fit-content;--ez-popover__margin:0;position:relative;display:flex;user-select:none}.popover__box{z-index:var(--ez-popover__box--z-index);display:flex;flex-direction:column;height:var(--ez-popover__height);max-height:var(--ez-popover__max-height);background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow);margin:var(--ez-popover__margin)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:100%}";
5
5
 
6
6
  const EzPopover = class {
7
7
  constructor(hostRef) {
@@ -31,7 +31,7 @@ const EzPopup = class {
31
31
  this._popupRef.focus();
32
32
  }
33
33
  new KeyboardManager({ propagate: false, element: this._element })
34
- .bind("Enter", this.ezPopupAction.emit.bind("OK"))
34
+ .bind("Enter", () => this.ezPopupAction.emit("OK"))
35
35
  .bind("Escape", () => this.closePopup())
36
36
  .bind("Esc", () => this.closePopup());
37
37
  }
@@ -47,7 +47,6 @@ const EzSearch = class {
47
47
  this.suppressSearch = false;
48
48
  this.ensureClearButtonVisible = false;
49
49
  this.suppressPreLoad = false;
50
- this.autoFocus = false;
51
50
  }
52
51
  observeErrorMessage() {
53
52
  var _a;
@@ -106,9 +105,9 @@ const EzSearch = class {
106
105
  /**
107
106
  * Aplica o foco no campo.
108
107
  */
109
- async setFocus(options) {
108
+ async setFocus() {
110
109
  if (this._textInput) {
111
- this._textInput.setFocus(options);
110
+ this._textInput.setFocus();
112
111
  }
113
112
  }
114
113
  /**
@@ -381,16 +380,15 @@ const EzSearch = class {
381
380
  replaceHighlight(value) {
382
381
  const startHighlight = new RegExp(this._startHighlightTag, 'g');
383
382
  const endHighlight = new RegExp(this._endHighlightTag, 'g');
384
- return String(value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
383
+ return (value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
385
384
  }
386
- selectOption(newOption, focusOnInput = true) {
385
+ selectOption(newOption) {
387
386
  var _a, _b;
388
387
  const currentValue = this.getSelectedOption(this.value);
389
388
  const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
390
- const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: this.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: this.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
391
- if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) === null || _b === void 0 ? void 0 : _b.toString()))
392
- || (currentValue == undefined && newOptionsFormatted != undefined && "value" in newOptionsFormatted)) {
393
- const adjustedOpt = !(newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) ? undefined : newOptionsFormatted;
389
+ if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) === null || _b === void 0 ? void 0 : _b.toString()))
390
+ || (currentValue == undefined && newOptionsReplaced != undefined && "value" in newOptionsReplaced)) {
391
+ const adjustedOpt = !(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value) ? undefined : newOptionsReplaced;
394
392
  this.value = adjustedOpt;
395
393
  this._currentValue = adjustedOpt;
396
394
  }
@@ -400,11 +398,6 @@ const EzSearch = class {
400
398
  }
401
399
  this._visibleOptions = [];
402
400
  this.clearSource();
403
- if (focusOnInput) {
404
- setTimeout(() => {
405
- this.setFocus();
406
- }, 0);
407
- }
408
401
  }
409
402
  loadOptions(mode, argument = "") {
410
403
  this._criteria = argument;
@@ -441,7 +434,7 @@ const EzSearch = class {
441
434
  this.value = null;
442
435
  this._currentValue = null;
443
436
  }
444
- controlListWithOnlyOne(focusOnInput = true) {
437
+ controlListWithOnlyOne() {
445
438
  var _a, _b;
446
439
  const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
447
440
  if ((source === null || source === void 0 ? void 0 : source.length) > 0) {
@@ -452,7 +445,7 @@ const EzSearch = class {
452
445
  value: (_b = source[0].value) === null || _b === void 0 ? void 0 : _b.replace(startHighlight, '').replace(endHighlight, ''),
453
446
  label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
454
447
  };
455
- this.selectOption(option, focusOnInput);
448
+ this.selectOption(option);
456
449
  }
457
450
  }
458
451
  controlEmptySearch() {
@@ -578,11 +571,6 @@ const EzSearch = class {
578
571
  }
579
572
  });
580
573
  });
581
- if (this.autoFocus) {
582
- requestAnimationFrame(() => {
583
- this.setFocus({ selectText: true });
584
- });
585
- }
586
574
  }
587
575
  //---------------------------------------------
588
576
  // Event handlers
@@ -652,16 +640,12 @@ const EzSearch = class {
652
640
  }
653
641
  switch (event.key) {
654
642
  case "ArrowDown":
655
- event.stopPropagation();
656
- if (this.canShowListOptions())
657
- event.preventDefault();
658
643
  this.nextOption();
644
+ event.stopPropagation();
659
645
  break;
660
646
  case "ArrowUp":
661
- event.stopPropagation();
662
- if (this.canShowListOptions())
663
- event.preventDefault();
664
647
  this.previousOption();
648
+ event.stopPropagation();
665
649
  break;
666
650
  case "Enter":
667
651
  this.handleEventPropagation(event);
@@ -672,7 +656,7 @@ const EzSearch = class {
672
656
  break;
673
657
  case "Tab":
674
658
  this._tabPressed = true;
675
- this.controlListWithOnlyOne(false);
659
+ this.controlListWithOnlyOne();
676
660
  break;
677
661
  }
678
662
  //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.