@sankhyalabs/ezui 5.22.0-dev.64 → 5.22.0-dev.65
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.
- package/dist/cjs/ez-actions-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-alert-list.cjs.entry.js +1 -1
- package/dist/cjs/ez-alert.cjs.entry.js +1 -1
- package/dist/cjs/ez-application.cjs.entry.js +1 -1
- package/dist/cjs/ez-badge.cjs.entry.js +1 -1
- package/dist/cjs/ez-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/ez-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-calendar.cjs.entry.js +1 -1
- package/dist/cjs/{ez-card-item_3.cjs.entry.js → ez-card-item_2.cjs.entry.js} +1 -124
- package/dist/cjs/ez-chart.cjs.entry.js +1 -1
- package/dist/cjs/ez-check.cjs.entry.js +1 -1
- package/dist/cjs/ez-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-collapsible-box.cjs.entry.js +1 -1
- package/dist/cjs/ez-combo-box.cjs.entry.js +1 -1
- package/dist/cjs/ez-custom-form-input_2.cjs.entry.js +2 -2
- package/dist/cjs/ez-date-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-date-time-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ez-double-list.cjs.entry.js +285 -0
- package/dist/cjs/ez-dropdown_2.cjs.entry.js +1 -1
- package/dist/cjs/ez-file-item.cjs.entry.js +1 -1
- package/dist/cjs/ez-filter-input.cjs.entry.js +130 -0
- package/dist/cjs/ez-form-view.cjs.entry.js +1 -1
- package/dist/cjs/ez-form.cjs.entry.js +1 -1
- package/dist/cjs/ez-grid.cjs.entry.js +1 -1
- package/dist/cjs/ez-guide-navigator.cjs.entry.js +1 -1
- package/dist/cjs/ez-icon.cjs.entry.js +1 -1
- package/dist/cjs/ez-list.cjs.entry.js +247 -206
- package/dist/cjs/ez-loading-bar.cjs.entry.js +1 -1
- package/dist/cjs/ez-modal-container.cjs.entry.js +1 -1
- package/dist/cjs/ez-modal.cjs.entry.js +1 -1
- package/dist/cjs/ez-multi-selection-list.cjs.entry.js +1 -1
- package/dist/cjs/ez-number-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-popover.cjs.entry.js +1 -1
- package/dist/cjs/ez-popup.cjs.entry.js +5 -2
- package/dist/cjs/ez-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-scroller_2.cjs.entry.js +1 -1
- package/dist/cjs/ez-search.cjs.entry.js +1 -1
- package/dist/cjs/ez-sidebar-navigator.cjs.entry.js +1 -1
- package/dist/cjs/ez-split-button.cjs.entry.js +1 -1
- package/dist/cjs/ez-split-item.cjs.entry.js +1 -1
- package/dist/cjs/ez-split-panel.cjs.entry.js +1 -1
- package/dist/cjs/ez-tabselector.cjs.entry.js +1 -1
- package/dist/cjs/ez-text-area.cjs.entry.js +1 -1
- package/dist/cjs/ez-text-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-time-input.cjs.entry.js +1 -1
- package/dist/cjs/ez-toast.cjs.entry.js +1 -1
- package/dist/cjs/ez-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/ez-tree.cjs.entry.js +1 -1
- package/dist/cjs/ez-upload.cjs.entry.js +1 -1
- package/dist/cjs/ez-view-stack.cjs.entry.js +1 -1
- package/dist/cjs/ezListHelper-0d3970b4.js +90 -0
- package/dist/cjs/ezui.cjs.js +2 -2
- package/dist/cjs/filter-column.cjs.entry.js +1 -1
- package/dist/cjs/{index-9e5554cb.js → index-a7b0c73d.js} +10 -5
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/ez-double-list/doubleListHelper.js +82 -0
- package/dist/collection/components/ez-double-list/ez-double-list.css +62 -0
- package/dist/collection/components/ez-double-list/ez-double-list.js +418 -0
- package/dist/collection/components/ez-list/ez-list.js +273 -208
- package/dist/collection/components/ez-list/ezListHelper.js +85 -0
- package/dist/collection/components/ez-popup/ez-popup.css +1 -0
- package/dist/collection/components/ez-popup/ez-popup.js +5 -2
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +623 -216
- package/dist/esm/ez-actions-button.entry.js +1 -1
- package/dist/esm/ez-alert-list.entry.js +1 -1
- package/dist/esm/ez-alert.entry.js +1 -1
- package/dist/esm/ez-application.entry.js +1 -1
- package/dist/esm/ez-badge.entry.js +1 -1
- package/dist/esm/ez-breadcrumb.entry.js +1 -1
- package/dist/esm/ez-button.entry.js +1 -1
- package/dist/esm/ez-calendar.entry.js +1 -1
- package/dist/esm/{ez-card-item_3.entry.js → ez-card-item_2.entry.js} +2 -124
- package/dist/esm/ez-chart.entry.js +1 -1
- package/dist/esm/ez-check.entry.js +1 -1
- package/dist/esm/ez-chip.entry.js +1 -1
- package/dist/esm/ez-collapsible-box.entry.js +1 -1
- package/dist/esm/ez-combo-box.entry.js +1 -1
- package/dist/esm/ez-custom-form-input_2.entry.js +2 -2
- package/dist/esm/ez-date-input.entry.js +1 -1
- package/dist/esm/ez-date-time-input.entry.js +1 -1
- package/dist/esm/ez-dialog.entry.js +1 -1
- package/dist/esm/ez-double-list.entry.js +281 -0
- package/dist/esm/ez-dropdown_2.entry.js +1 -1
- package/dist/esm/ez-file-item.entry.js +1 -1
- package/dist/esm/ez-filter-input.entry.js +126 -0
- package/dist/esm/ez-form-view.entry.js +1 -1
- package/dist/esm/ez-form.entry.js +1 -1
- package/dist/esm/ez-grid.entry.js +1 -1
- package/dist/esm/ez-guide-navigator.entry.js +1 -1
- package/dist/esm/ez-icon.entry.js +1 -1
- package/dist/esm/ez-list.entry.js +247 -206
- package/dist/esm/ez-loading-bar.entry.js +1 -1
- package/dist/esm/ez-modal-container.entry.js +1 -1
- package/dist/esm/ez-modal.entry.js +1 -1
- package/dist/esm/ez-multi-selection-list.entry.js +1 -1
- package/dist/esm/ez-number-input.entry.js +1 -1
- package/dist/esm/ez-popover.entry.js +1 -1
- package/dist/esm/ez-popup.entry.js +5 -2
- package/dist/esm/ez-radio-button.entry.js +1 -1
- package/dist/esm/ez-scroller_2.entry.js +1 -1
- package/dist/esm/ez-search.entry.js +1 -1
- package/dist/esm/ez-sidebar-navigator.entry.js +1 -1
- package/dist/esm/ez-split-button.entry.js +1 -1
- package/dist/esm/ez-split-item.entry.js +1 -1
- package/dist/esm/ez-split-panel.entry.js +1 -1
- package/dist/esm/ez-tabselector.entry.js +1 -1
- package/dist/esm/ez-text-area.entry.js +1 -1
- package/dist/esm/ez-text-input.entry.js +1 -1
- package/dist/esm/ez-time-input.entry.js +1 -1
- package/dist/esm/ez-toast.entry.js +1 -1
- package/dist/esm/ez-tooltip.entry.js +1 -1
- package/dist/esm/ez-tree.entry.js +1 -1
- package/dist/esm/ez-upload.entry.js +1 -1
- package/dist/esm/ez-view-stack.entry.js +1 -1
- package/dist/esm/ezListHelper-00fb9b8d.js +87 -0
- package/dist/esm/ezui.js +3 -3
- package/dist/esm/filter-column.entry.js +1 -1
- package/dist/esm/{index-5a720e56.js → index-baa5e267.js} +11 -5
- package/dist/esm/loader.js +3 -3
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/{p-e6b38ade.entry.js → p-0306dff7.entry.js} +1 -1
- package/dist/ezui/{p-91ccae0c.entry.js → p-09de35a2.entry.js} +1 -1
- package/dist/ezui/p-13165bb1.entry.js +1 -0
- package/dist/ezui/{p-c7d1333c.entry.js → p-14b769d7.entry.js} +1 -1
- package/dist/ezui/{p-b2f6bc0a.entry.js → p-17be134a.entry.js} +1 -1
- package/dist/ezui/p-17eabf46.entry.js +1 -0
- package/dist/ezui/{p-319d36b7.entry.js → p-181b5ae8.entry.js} +1 -1
- package/dist/ezui/{p-81461d2f.entry.js → p-1e7a8633.entry.js} +1 -1
- package/dist/ezui/{p-6b51c9cc.entry.js → p-1f50fa05.entry.js} +1 -1
- package/dist/ezui/{p-e4c7eb39.js → p-23a36bb6.js} +2 -2
- package/dist/ezui/p-2475fd6e.entry.js +1 -0
- package/dist/ezui/{p-3c10cd94.entry.js → p-2b46b37b.entry.js} +1 -1
- package/dist/ezui/{p-6d31c43c.entry.js → p-2bb2a0c4.entry.js} +1 -1
- package/dist/ezui/{p-efbe0b73.entry.js → p-3175fe8c.entry.js} +1 -1
- package/dist/ezui/p-31d1fab6.entry.js +1 -0
- package/dist/ezui/{p-fad4f1dd.entry.js → p-35d467a8.entry.js} +1 -1
- package/dist/ezui/{p-5d01d189.entry.js → p-3f2dd525.entry.js} +1 -1
- package/dist/ezui/{p-0378416a.entry.js → p-44caad9a.entry.js} +1 -1
- package/dist/ezui/{p-aa543378.entry.js → p-50d83a46.entry.js} +1 -1
- package/dist/ezui/{p-7567ccdd.entry.js → p-555c9018.entry.js} +1 -1
- package/dist/ezui/{p-044d46d5.entry.js → p-5b205c80.entry.js} +1 -1
- package/dist/ezui/{p-6fc26622.entry.js → p-5ed81457.entry.js} +1 -1
- package/dist/ezui/{p-f1c2c19e.entry.js → p-650e4b6d.entry.js} +1 -1
- package/dist/ezui/{p-aee8d615.entry.js → p-654b3f99.entry.js} +1 -1
- package/dist/ezui/p-65f471bc.entry.js +1 -0
- package/dist/ezui/{p-6d8b3298.entry.js → p-6cdd3e0a.entry.js} +1 -1
- package/dist/ezui/{p-554522db.entry.js → p-6d79930d.entry.js} +1 -1
- package/dist/ezui/{p-fc194825.entry.js → p-6e429cff.entry.js} +1 -1
- package/dist/ezui/{p-def75121.entry.js → p-6f22a385.entry.js} +1 -1
- package/dist/ezui/{p-2f53435e.entry.js → p-7409eeaa.entry.js} +1 -1
- package/dist/ezui/{p-11bfeca3.entry.js → p-77a4bd35.entry.js} +1 -1
- package/dist/ezui/{p-397e3026.entry.js → p-7ed30844.entry.js} +1 -1
- package/dist/ezui/{p-e18d9e6a.entry.js → p-7fdd479f.entry.js} +1 -1
- package/dist/ezui/p-80dfc50b.js +1 -0
- package/dist/ezui/{p-1b08bf3c.entry.js → p-8888d9ed.entry.js} +1 -1
- package/dist/ezui/{p-82fa4b09.entry.js → p-8df1ca33.entry.js} +1 -1
- package/dist/ezui/{p-e7395eae.entry.js → p-90bcd2ba.entry.js} +1 -1
- package/dist/ezui/{p-a921e3e7.entry.js → p-990b4318.entry.js} +1 -1
- package/dist/ezui/{p-c2b20f78.entry.js → p-9f5fa3f9.entry.js} +1 -1
- package/dist/ezui/{p-b6241ea3.entry.js → p-a6fe527a.entry.js} +1 -1
- package/dist/ezui/{p-dfca5946.entry.js → p-a80b1287.entry.js} +1 -1
- package/dist/ezui/{p-18a2a28a.entry.js → p-b6a4e6de.entry.js} +1 -1
- package/dist/ezui/p-bc2f844e.entry.js +1 -0
- package/dist/ezui/{p-92748142.entry.js → p-c0d9c4f8.entry.js} +1 -1
- package/dist/ezui/{p-b858fc6e.entry.js → p-c3045972.entry.js} +1 -1
- package/dist/ezui/{p-a563df31.entry.js → p-c4320a39.entry.js} +1 -1
- package/dist/ezui/{p-ec5f987d.entry.js → p-ca6340a9.entry.js} +1 -1
- package/dist/ezui/{p-16e21a40.entry.js → p-d0ca26fe.entry.js} +1 -1
- package/dist/ezui/{p-cce6c015.entry.js → p-d520839d.entry.js} +1 -1
- package/dist/ezui/p-dc8b36c3.entry.js +1 -0
- package/dist/ezui/{p-bef7daac.entry.js → p-e347df9c.entry.js} +1 -1
- package/dist/ezui/{p-35d0b2fb.entry.js → p-e3e3fd7a.entry.js} +1 -1
- package/dist/ezui/{p-469b2619.entry.js → p-e82d122c.entry.js} +1 -1
- package/dist/ezui/{p-6bda82d1.entry.js → p-fec696ab.entry.js} +1 -1
- package/dist/types/components/ez-double-list/doubleListHelper.d.ts +10 -0
- package/dist/types/components/ez-double-list/ez-double-list.d.ts +86 -0
- package/dist/types/components/ez-list/ez-list.d.ts +19 -3
- package/dist/types/components/ez-list/ezListHelper.d.ts +20 -0
- package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
- package/dist/types/components.d.ts +97 -6
- package/package.json +1 -1
- package/react/components.d.ts +1 -0
- package/react/components.js +1 -0
- package/react/components.js.map +1 -1
- package/dist/ezui/p-3af64edd.entry.js +0 -1
- package/dist/ezui/p-46a46507.entry.js +0 -1
- package/dist/ezui/p-6ec40dec.entry.js +0 -1
- package/dist/ezui/p-7f5afb1f.entry.js +0 -1
- package/dist/ezui/p-a1c0eadf.entry.js +0 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-baa5e267.js';
|
|
2
2
|
import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
|
|
3
|
+
import { p as processListOnDrop } from './ezListHelper-00fb9b8d.js';
|
|
3
4
|
|
|
4
5
|
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}";
|
|
5
6
|
|
|
@@ -21,6 +22,7 @@ const EzList = class {
|
|
|
21
22
|
this.itemSlotBuilder = undefined;
|
|
22
23
|
this.itemLeftSlotBuilder = undefined;
|
|
23
24
|
this.hoverFeedback = false;
|
|
25
|
+
this.enableMultipleSelection = false;
|
|
24
26
|
}
|
|
25
27
|
/**
|
|
26
28
|
* Limpa o histórico da lista.
|
|
@@ -42,56 +44,93 @@ const EzList = class {
|
|
|
42
44
|
/**
|
|
43
45
|
* Aplica seleção nas linhas da lista.
|
|
44
46
|
*/
|
|
45
|
-
async setSelection(selectedItem, scrollToOption) {
|
|
46
|
-
if (selectedItem
|
|
47
|
-
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
|
-
if (scrollToOption) {
|
|
65
|
-
let liElem = this.useGroups
|
|
66
|
-
? this._groupContainer.querySelector('li#item_' + selectedItem.id)
|
|
67
|
-
: this._itemContainer.querySelector('li#item_' + selectedItem.id);
|
|
68
|
-
if (liElem) {
|
|
69
|
-
liElem.scrollIntoView();
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
47
|
+
async setSelection(selectedItem, scrollToOption, shitkey, ctrlKey) {
|
|
48
|
+
if (!selectedItem || !this.ezSelectable) {
|
|
74
49
|
await this.removeSelection();
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if (this.useGroups) {
|
|
53
|
+
this.setSelectionWithGroups(selectedItem, scrollToOption);
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (this.enableMultipleSelection && ctrlKey) {
|
|
57
|
+
this.setSelectionMultiple(selectedItem);
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
if (this.enableMultipleSelection && shitkey) {
|
|
61
|
+
this.setSelectionRange(selectedItem);
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
this.setSelectionSingleItem(selectedItem, scrollToOption);
|
|
65
|
+
this.ezSelectItem.emit(selectedItem);
|
|
66
|
+
}
|
|
67
|
+
setSelectionRange(selectedItem) {
|
|
68
|
+
const lastSelectedIndex = this._listItems.findIndex(item => item.selected);
|
|
69
|
+
const seletedItemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
|
|
70
|
+
if (lastSelectedIndex < 0 || lastSelectedIndex === seletedItemIndex) {
|
|
71
|
+
this.setSelectionSingleItem(selectedItem);
|
|
72
|
+
return;
|
|
75
73
|
}
|
|
74
|
+
const minorIndex = Math.min(lastSelectedIndex, seletedItemIndex);
|
|
75
|
+
const majorIndex = Math.max(lastSelectedIndex, seletedItemIndex);
|
|
76
|
+
let newList = [...this._listItems];
|
|
77
|
+
newList.forEach((item, index) => {
|
|
78
|
+
item.selected = (index >= minorIndex && index <= majorIndex);
|
|
79
|
+
});
|
|
80
|
+
this._listItems = [...newList];
|
|
81
|
+
this.ezSelectItem.emit(this._listItems.filter(item => item.selected));
|
|
82
|
+
}
|
|
83
|
+
setSelectionMultiple(selectedItem) {
|
|
84
|
+
let newList = [...this._listItems];
|
|
85
|
+
newList.forEach(item => {
|
|
86
|
+
item.selected = (item.id === selectedItem.id) ? !item.selected : item.selected;
|
|
87
|
+
});
|
|
88
|
+
this._listItems = [...newList];
|
|
89
|
+
this.ezSelectItem.emit(this._listItems.filter(item => item.selected));
|
|
90
|
+
}
|
|
91
|
+
setSelectionSingleItem(selectedItem, scrollToOption) {
|
|
92
|
+
this.ezSelectItem.emit(selectedItem);
|
|
93
|
+
let newList = [...this._listItems];
|
|
94
|
+
newList.forEach(item => {
|
|
95
|
+
item.selected = item.id === selectedItem.id;
|
|
96
|
+
});
|
|
97
|
+
this._listItems = newList;
|
|
98
|
+
if (!scrollToOption)
|
|
99
|
+
return;
|
|
100
|
+
let liElem = this._itemContainer.querySelector('li#item_' + selectedItem.id);
|
|
101
|
+
if (liElem)
|
|
102
|
+
liElem.scrollIntoView();
|
|
103
|
+
}
|
|
104
|
+
setSelectionWithGroups(selectedItem, scrollToOption) {
|
|
105
|
+
this.ezSelectItem.emit(selectedItem);
|
|
106
|
+
let newList = [...this._listGroupItems];
|
|
107
|
+
newList.forEach(groupItem => {
|
|
108
|
+
groupItem.items.forEach(item => {
|
|
109
|
+
item.selected = item.id === selectedItem.id;
|
|
110
|
+
});
|
|
111
|
+
});
|
|
112
|
+
this._listGroupItems = newList;
|
|
113
|
+
if (!scrollToOption)
|
|
114
|
+
return;
|
|
115
|
+
let liElem = this._groupContainer.querySelector('li#item_' + selectedItem.id);
|
|
116
|
+
if (liElem)
|
|
117
|
+
liElem.scrollIntoView();
|
|
76
118
|
}
|
|
77
119
|
/**
|
|
78
120
|
* Obtém o item selecionado.
|
|
79
121
|
*/
|
|
80
122
|
async getSelection() {
|
|
123
|
+
if (!this.useGroups)
|
|
124
|
+
return this._listItems.find(item => item.selected == true);
|
|
81
125
|
let selectedItem;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
selectedItem = this._listItems.find(item => item.selected == true);
|
|
94
|
-
}
|
|
126
|
+
this._listGroupItems.every(group => {
|
|
127
|
+
let item = group.items.find(item => item.selected == true);
|
|
128
|
+
if (item) {
|
|
129
|
+
selectedItem = item;
|
|
130
|
+
return false;
|
|
131
|
+
}
|
|
132
|
+
return true;
|
|
133
|
+
});
|
|
95
134
|
return selectedItem;
|
|
96
135
|
}
|
|
97
136
|
/**
|
|
@@ -115,14 +154,11 @@ const EzList = class {
|
|
|
115
154
|
});
|
|
116
155
|
});
|
|
117
156
|
this._listGroupItems = newList;
|
|
157
|
+
return;
|
|
118
158
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
item.selected = false;
|
|
123
|
-
});
|
|
124
|
-
this._listItems = newList;
|
|
125
|
-
}
|
|
159
|
+
let newList = [...this._listItems];
|
|
160
|
+
newList.forEach(item => item.selected = false);
|
|
161
|
+
this._listItems = newList;
|
|
126
162
|
}
|
|
127
163
|
applyUUID(item) {
|
|
128
164
|
if (!item.id) {
|
|
@@ -184,78 +220,88 @@ const EzList = class {
|
|
|
184
220
|
ElementIDUtils.addIDInfo(this._element);
|
|
185
221
|
}
|
|
186
222
|
onDrop(ev, dragEndItem) {
|
|
223
|
+
ev.stopPropagation();
|
|
187
224
|
this.removeOverClass();
|
|
225
|
+
if (!this._dragStartItem)
|
|
226
|
+
return;
|
|
227
|
+
if (this.useGroups) {
|
|
228
|
+
this.onDropWithGroups(dragEndItem);
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
this._listItems = [...processListOnDrop(this.buildDragHandlerConfig(dragEndItem.index, false))];
|
|
232
|
+
this._listItemsHistory = [...this._listItems];
|
|
233
|
+
this.ezChange.emit(this._listItems);
|
|
234
|
+
}
|
|
235
|
+
buildDragHandlerConfig(targetIndex, moveToFinal) {
|
|
236
|
+
return {
|
|
237
|
+
listItems: this._listItems,
|
|
238
|
+
dragItem: this._dragStartItem,
|
|
239
|
+
enableMultipleSelection: this.enableMultipleSelection,
|
|
240
|
+
targetIndex,
|
|
241
|
+
moveToFinal,
|
|
242
|
+
clearSelection: () => this.setSelection(undefined)
|
|
243
|
+
};
|
|
244
|
+
}
|
|
245
|
+
;
|
|
246
|
+
onDropWithGroups(dragEndItem) {
|
|
188
247
|
this.setSelection(undefined);
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
if (groupEnd.sort === 'DSC') {
|
|
204
|
-
newList.find(group => group.group == dragEndItem.groupName).items.reverse();
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
else {
|
|
208
|
-
let indexForAdd = dragEndItem.index > this._dragStartItem.index ? dragEndItem.index - 1 : dragEndItem.index;
|
|
209
|
-
newList.find(group => group.group == dragEndItem.groupName).items.splice(indexForAdd, 0, this._dragStartItem.item);
|
|
210
|
-
}
|
|
211
|
-
this._listGroupItems = newList;
|
|
212
|
-
this.ezChange.emit(this._listGroupItems);
|
|
213
|
-
}
|
|
214
|
-
else {
|
|
215
|
-
let newList = [...this._listItems];
|
|
216
|
-
newList.splice(this._dragStartItem.index, 1);
|
|
217
|
-
newList.splice(dragEndItem.index, 0, this._dragStartItem.item);
|
|
218
|
-
this._listItems = newList;
|
|
219
|
-
this._listItemsHistory = newList;
|
|
220
|
-
this.ezChange.emit(this._listItems);
|
|
248
|
+
let newList = [...this._listGroupItems];
|
|
249
|
+
let groupEnd = this._listGroupItems.find(group => dragEndItem.groupName == group.group);
|
|
250
|
+
//Remove item arrastado
|
|
251
|
+
newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
|
|
252
|
+
//Adiciona item arrastado
|
|
253
|
+
if (groupEnd.sort) {
|
|
254
|
+
newList.find(group => group.group == dragEndItem.groupName).items.push(this._dragStartItem.item);
|
|
255
|
+
newList
|
|
256
|
+
.find(group => group.group == dragEndItem.groupName)
|
|
257
|
+
.items.sort(function (a, b) {
|
|
258
|
+
return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
|
|
259
|
+
});
|
|
260
|
+
if (groupEnd.sort === 'DSC') {
|
|
261
|
+
newList.find(group => group.group == dragEndItem.groupName).items.reverse();
|
|
221
262
|
}
|
|
222
263
|
}
|
|
223
|
-
|
|
264
|
+
else {
|
|
265
|
+
let indexForAdd = dragEndItem.index > this._dragStartItem.index ? dragEndItem.index - 1 : dragEndItem.index;
|
|
266
|
+
newList.find(group => group.group == dragEndItem.groupName).items.splice(indexForAdd, 0, this._dragStartItem.item);
|
|
267
|
+
}
|
|
268
|
+
this._listGroupItems = newList;
|
|
269
|
+
this.ezChange.emit(this._listGroupItems);
|
|
224
270
|
}
|
|
225
271
|
onDropLastIndex(ev, groupDropped) {
|
|
272
|
+
ev.stopPropagation();
|
|
226
273
|
this.removeOverClass();
|
|
274
|
+
if (!this._dragStartItem)
|
|
275
|
+
return;
|
|
276
|
+
if (this.useGroups) {
|
|
277
|
+
this.onDropLastItemWithGroups(groupDropped);
|
|
278
|
+
return;
|
|
279
|
+
}
|
|
280
|
+
const lastIndex = this._listItems.length - 1;
|
|
281
|
+
this._listItems = [...processListOnDrop(this.buildDragHandlerConfig(lastIndex, true))];
|
|
282
|
+
this._listItemsHistory = [...this._listItems];
|
|
283
|
+
this.ezChange.emit(this._listItems);
|
|
284
|
+
}
|
|
285
|
+
onDropLastItemWithGroups(groupDropped) {
|
|
227
286
|
this.setSelection(undefined);
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
if (groupEnd.sort === 'DSC') {
|
|
243
|
-
newList.find(group => group.group == groupDropped.group).items.reverse();
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
this._listGroupItems = newList;
|
|
247
|
-
this.ezChange.emit(this._listGroupItems);
|
|
248
|
-
}
|
|
249
|
-
else {
|
|
250
|
-
let newList = [...this._listItems];
|
|
251
|
-
newList.splice(this._dragStartItem.index, 1);
|
|
252
|
-
newList.push(this._dragStartItem.item);
|
|
253
|
-
this._listItems = newList;
|
|
254
|
-
this._listItemsHistory = newList;
|
|
255
|
-
this.ezChange.emit(this._listItems);
|
|
287
|
+
let newList = [...this._listGroupItems];
|
|
288
|
+
let groupEnd = this._listGroupItems.find(group => groupDropped.group == group.group);
|
|
289
|
+
//Remove item arrastado
|
|
290
|
+
newList.find(group => group.group == this._dragStartItem.groupName).items.splice(this._dragStartItem.index, 1);
|
|
291
|
+
//Adiciona item arrastado
|
|
292
|
+
newList.find(group => group.group == groupDropped.group).items.push(this._dragStartItem.item);
|
|
293
|
+
if (groupEnd.sort) {
|
|
294
|
+
newList
|
|
295
|
+
.find(group => group.group == groupDropped.group)
|
|
296
|
+
.items.sort(function (a, b) {
|
|
297
|
+
return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
|
|
298
|
+
});
|
|
299
|
+
if (groupEnd.sort === 'DSC') {
|
|
300
|
+
newList.find(group => group.group == groupDropped.group).items.reverse();
|
|
256
301
|
}
|
|
257
302
|
}
|
|
258
|
-
|
|
303
|
+
this._listGroupItems = newList;
|
|
304
|
+
this.ezChange.emit(this._listGroupItems);
|
|
259
305
|
}
|
|
260
306
|
onDropGroup(groupSelected) {
|
|
261
307
|
var _a;
|
|
@@ -293,19 +339,13 @@ const EzList = class {
|
|
|
293
339
|
if (this.useGroups) {
|
|
294
340
|
this.hideOverlays();
|
|
295
341
|
}
|
|
296
|
-
if (this._draggingElement) {
|
|
297
|
-
try {
|
|
298
|
-
this._element.removeChild(this._draggingElement);
|
|
299
|
-
}
|
|
300
|
-
catch (err) { }
|
|
301
|
-
this._draggingElement = undefined;
|
|
302
|
-
}
|
|
303
342
|
}
|
|
304
343
|
addOverClass(element) {
|
|
305
344
|
if ((element === null || element === void 0 ? void 0 : element.__proto__) == HTMLDivElement.prototype && element.classList.contains('draggable')) {
|
|
306
345
|
element.classList.add('over');
|
|
346
|
+
return;
|
|
307
347
|
}
|
|
308
|
-
|
|
348
|
+
if ((element === null || element === void 0 ? void 0 : element.parentElement) && !element.parentElement.classList.contains('draggable-list')) {
|
|
309
349
|
this.addOverClass(element.parentElement);
|
|
310
350
|
}
|
|
311
351
|
}
|
|
@@ -361,84 +401,94 @@ const EzList = class {
|
|
|
361
401
|
window.clearTimeout(this._changeDeboucingTimeout);
|
|
362
402
|
}
|
|
363
403
|
if (this.useGroups) {
|
|
364
|
-
this.
|
|
365
|
-
|
|
366
|
-
this.showOverlays(group);
|
|
367
|
-
}, 10);
|
|
368
|
-
}
|
|
369
|
-
else {
|
|
370
|
-
this._dragStartItem = { item: item.item, index: item.index };
|
|
404
|
+
this.onDragStartWithGroups(group, item, index);
|
|
405
|
+
return;
|
|
371
406
|
}
|
|
407
|
+
this._dragStartItem = { item: item.item, index: item.index };
|
|
408
|
+
}
|
|
409
|
+
onDragStartWithGroups(group, item, index) {
|
|
410
|
+
this._dragStartItem = { groupName: group.group, item: item, index: index };
|
|
411
|
+
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
412
|
+
this.showOverlays(group);
|
|
413
|
+
}, 10);
|
|
372
414
|
}
|
|
373
415
|
selectFirstItem() {
|
|
374
416
|
if (this.useGroups) {
|
|
375
417
|
this.setSelection(this._listGroupItems[0].items[0]);
|
|
376
418
|
}
|
|
377
|
-
{
|
|
419
|
+
else {
|
|
378
420
|
this.setSelection(this._listItems[0]);
|
|
379
421
|
}
|
|
380
422
|
}
|
|
381
423
|
nextOption(selectedItem) {
|
|
382
|
-
let nextItem = undefined;
|
|
383
424
|
if (this.useGroups) {
|
|
384
|
-
this.
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
425
|
+
this.setSelection(this.nextOptionWithGroups(selectedItem), true);
|
|
426
|
+
return;
|
|
427
|
+
}
|
|
428
|
+
let nextItem = undefined;
|
|
429
|
+
let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
|
|
430
|
+
if (itemIndex >= 0 && itemIndex < this._listItems.length) {
|
|
431
|
+
nextItem = this._listItems[itemIndex + 1];
|
|
432
|
+
}
|
|
433
|
+
this.setSelection(nextItem, true);
|
|
434
|
+
}
|
|
435
|
+
nextOptionWithGroups(selectedItem) {
|
|
436
|
+
let nextItem = undefined;
|
|
437
|
+
this._listGroupItems.every((group, groupIndex, listGroupItems) => {
|
|
438
|
+
let item = undefined;
|
|
439
|
+
let itemIndex = group.items.findIndex(item => item.id == selectedItem.id);
|
|
440
|
+
if (itemIndex != undefined && itemIndex != -1) {
|
|
441
|
+
if (itemIndex === group.items.length - 1) {
|
|
442
|
+
if (groupIndex + 1 <= listGroupItems.length - 1) {
|
|
443
|
+
item = { label: listGroupItems[groupIndex + 1].items[0].label };
|
|
395
444
|
}
|
|
396
445
|
}
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
return false;
|
|
446
|
+
else {
|
|
447
|
+
item = { label: group.items[itemIndex + 1].label };
|
|
400
448
|
}
|
|
401
|
-
return true;
|
|
402
|
-
});
|
|
403
|
-
}
|
|
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
449
|
}
|
|
409
|
-
|
|
410
|
-
|
|
450
|
+
if (item != undefined) {
|
|
451
|
+
nextItem = item;
|
|
452
|
+
return false;
|
|
453
|
+
}
|
|
454
|
+
return true;
|
|
455
|
+
});
|
|
456
|
+
return nextItem;
|
|
411
457
|
}
|
|
412
458
|
previousOption(selectedItem) {
|
|
413
|
-
let previousItem = undefined;
|
|
414
459
|
if (this.useGroups) {
|
|
415
|
-
this.
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
460
|
+
this.setSelection(this.previousOptionWithGroups(selectedItem), true);
|
|
461
|
+
return;
|
|
462
|
+
}
|
|
463
|
+
let previousItem = undefined;
|
|
464
|
+
let itemIndex = this._listItems.findIndex(item => item.id === selectedItem.id);
|
|
465
|
+
if (itemIndex > 0 && itemIndex < this._listItems.length) {
|
|
466
|
+
previousItem = this._listItems[itemIndex - 1];
|
|
467
|
+
}
|
|
468
|
+
this.setSelection(previousItem, true);
|
|
469
|
+
}
|
|
470
|
+
previousOptionWithGroups(selectedItem) {
|
|
471
|
+
let previousItem = undefined;
|
|
472
|
+
this._listGroupItems.every((group, groupIndex, listGroupItems) => {
|
|
473
|
+
let item = undefined;
|
|
474
|
+
let itemIndex = group.items.findIndex(item => item.id === selectedItem.id);
|
|
475
|
+
if (itemIndex != undefined && itemIndex != -1) {
|
|
476
|
+
if (itemIndex === 0) {
|
|
477
|
+
if (groupIndex - 1 >= 0) {
|
|
478
|
+
item = { label: listGroupItems[groupIndex - 1].items[listGroupItems[groupIndex - 1].items.length - 1].label };
|
|
426
479
|
}
|
|
427
480
|
}
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
return false;
|
|
481
|
+
else {
|
|
482
|
+
item = { label: group.items[itemIndex - 1].label };
|
|
431
483
|
}
|
|
432
|
-
return true;
|
|
433
|
-
});
|
|
434
|
-
}
|
|
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
484
|
}
|
|
440
|
-
|
|
441
|
-
|
|
485
|
+
if (item != undefined) {
|
|
486
|
+
previousItem = item;
|
|
487
|
+
return false;
|
|
488
|
+
}
|
|
489
|
+
return true;
|
|
490
|
+
});
|
|
491
|
+
return previousItem;
|
|
442
492
|
}
|
|
443
493
|
keyDownHandler(event) {
|
|
444
494
|
if (!event.ctrlKey) {
|
|
@@ -480,11 +530,11 @@ const EzList = class {
|
|
|
480
530
|
}
|
|
481
531
|
}
|
|
482
532
|
onDragOverItem(event) {
|
|
483
|
-
if (this._dragStartItem)
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
533
|
+
if (!this._dragStartItem)
|
|
534
|
+
return;
|
|
535
|
+
event.preventDefault();
|
|
536
|
+
this.addOverClass(event.target);
|
|
537
|
+
event.stopPropagation();
|
|
488
538
|
}
|
|
489
539
|
onDragOverLastIndex(ev) {
|
|
490
540
|
ev.preventDefault();
|
|
@@ -524,38 +574,29 @@ const EzList = class {
|
|
|
524
574
|
doubleClickItem(item) {
|
|
525
575
|
this.ezDoubleClick.emit(item);
|
|
526
576
|
}
|
|
527
|
-
|
|
528
|
-
return
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
577
|
+
buildItem(item, evt) {
|
|
578
|
+
return { id: item.id, label: item.label, check: evt.detail };
|
|
579
|
+
}
|
|
580
|
+
renderListWithGroups() {
|
|
581
|
+
return h("div", { class: 'group-container', ref: el => (this._groupContainer = el), tabIndex: 0, onKeyDown: event => this.keyDownHandler(event) }, this._listGroupItems.map(group => {
|
|
582
|
+
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: {
|
|
532
583
|
'selectable-container': this.ezSelectable,
|
|
533
584
|
'hover-feedback': this.hoverFeedback,
|
|
534
585
|
}, key: 'item_' + item.id }, {
|
|
535
586
|
[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: () => {
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
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 => {
|
|
545
|
-
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 => {
|
|
587
|
+
}), h("div", { class: 'draggable' + (item.selected == true ? ' selected-item ' : '') + (this.ezSelectable == true ? ' selectable ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: () => this.setSelection(item), onDragLeave: () => group.sort ? undefined : this.removeOverClass(), onDragEnd: () => this.onDragEnd(), onDragStart: () => this.onDragStart(item, group, index), onDragOver: event => group.sort ? undefined : this.onDragOverItem(event), 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(this.buildItem(item, evt)) }))), !!this.itemSlotBuilder && this.getContainerItemBuilder('right', item, group, 'slot-item')))))), h("div", { class: 'last-droppable-space', onDragLeave: () => this.removeOverClass(), onDragOver: event => this.onDragOverLastIndex(event), 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)));
|
|
588
|
+
}));
|
|
589
|
+
}
|
|
590
|
+
renderList() {
|
|
591
|
+
return h("div", { class: 'items-container', ref: el => (this._itemContainer = el), tabIndex: 0, onKeyDown: event => {
|
|
548
592
|
this.keyDownHandler(event);
|
|
549
|
-
} }, h("div", { class:
|
|
593
|
+
} }, h("div", { class: 'draggable-list' }, this._listItems.map((item, index) => (h("li", Object.assign({ id: 'item_' + item.id, class: {
|
|
550
594
|
'selectable-container': this.ezSelectable,
|
|
551
595
|
'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 }),
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
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) }))))));
|
|
596
|
+
}, 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 ' : ''), onDblClick: () => this.doubleClickItem(item), onClick: (event) => this.setSelection(item, false, event.shiftKey, (event.altKey || event.metaKey)), onDragStart: () => this.onDragStart({ item: item, index: index }), onDragOver: event => this.onDragOverItem(event), onDragLeave: () => this.removeOverClass(), 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 => this.onDragOverLastIndex(event), onDragEnd: () => this.onDragEnd(), onDrop: event => this.onDropLastIndex(event) })));
|
|
597
|
+
}
|
|
598
|
+
render() {
|
|
599
|
+
return (h(Host, { ref: el => (this._element = el) }, this.useGroups ? this.renderListWithGroups() : this.renderList()));
|
|
559
600
|
}
|
|
560
601
|
};
|
|
561
602
|
EzList.style = ezListCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-baa5e267.js';
|
|
2
2
|
|
|
3
3
|
const ezLoadingBarCss = ":host{position:fixed;top:0px;width:100%}.loading-bar{width:100%;margin:0 auto;position:absolute;background-color:var(--color--primary-300, #e2f4ef);height:5px}.loading-bar:before{content:'';position:absolute}.loading-bar__container{position:absolute;top:0;right:100%;bottom:0;left:0;background-color:var(--color--primary, #008561);width:0;animation:loading 2s linear infinite}@keyframes loading{0%{left:0%;right:100%;width:0%}25%{left:0%;right:75%;width:25%}50%{left:0%;right:50%;width:90%}70%{right:0%;left:75%;width:25%}100%{left:100%;right:0%;width:0%}}@-webkit-keyframes loading{0%{left:0%;right:100%;width:0%}25%{left:0%;right:75%;width:25%}50%{left:0%;right:50%;width:90%}70%{right:0%;left:75%;width:25%}100%{left:100%;right:0%;width:0%}}";
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
|
|
2
2
|
import { KeyboardManager } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
4
|
var ModalAction;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
|
|
2
2
|
import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
4
|
const ezModalCss = ":host{--ez-modal-z-index:var(--elevation--22, 22);--ez-modal-vertical-padding:var(--space--large, 24px);--ez-modal-content-padding:24px;display:block}.modal{position:fixed;display:flex;top:0px;z-index:var(--ez-modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh}.modal__screen-light{background:rgba(0, 4, 12, 0.1)}.modal__screen-none{background:none}.modal__screen-medium{backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}.modal__vertical-padding{padding:var(--ez-modal-vertical-padding) 0}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;box-sizing:border-box;max-height:100%;height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:var(--ez-modal-content-padding);box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-baa5e267.js';
|
|
2
2
|
import { ArrayUtils } from '@sankhyalabs/core';
|
|
3
3
|
|
|
4
4
|
const ezMultiSelectionListCss = ".sc-ez-multi-selection-list-h{--ez-check--outter-gap:0px;--ez-multi-selection-default-height:322px;display:block;width:304px;height:var(--ez-multi-selection-default-height);max-height:calc(100vh - 350px)}.multi-selection__input.sc-ez-multi-selection-list{margin-bottom:var(--space--2xs, 8px)}.multi-selection__content-options.sc-ez-multi-selection-list{position:relative;left:-4px}.multi-selection__select-all.sc-ez-multi-selection-list{height:var(--space--xl);margin:0 var(--space--small, 6px)}.multi-selection__list.sc-ez-multi-selection-list{max-height:calc(100vh - 435px);overflow-y:auto;overflow-x:clip}.multi-selection__list.sc-ez-multi-selection-list::-webkit-scrollbar{width:var(--space--small);min-width:var(--space--small);max-width:var(--space--small)}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
|
|
2
2
|
import { NumberUtils, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
|
|
3
3
|
import { C as CSSVarsUtils } from './CSSVarsUtils-71ce76be.js';
|
|
4
4
|
|