@libs-ui/components-drag-drop 0.1.1-1

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 (23) hide show
  1. package/README.md +451 -0
  2. package/defines/css.define.d.ts +4 -0
  3. package/demo/demo.component.d.ts +56 -0
  4. package/drag-drop.directive.d.ts +39 -0
  5. package/drag-drop.service.d.ts +45 -0
  6. package/drag-item-in-container-virtual-scroll.directive.d.ts +25 -0
  7. package/drag-item.directive.d.ts +30 -0
  8. package/drag-scroll.directive.d.ts +24 -0
  9. package/esm2022/defines/css.define.mjs +104 -0
  10. package/esm2022/demo/demo.component.mjs +833 -0
  11. package/esm2022/drag-drop.directive.mjs +482 -0
  12. package/esm2022/drag-drop.service.mjs +96 -0
  13. package/esm2022/drag-item-in-container-virtual-scroll.directive.mjs +134 -0
  14. package/esm2022/drag-item.directive.mjs +267 -0
  15. package/esm2022/drag-scroll.directive.mjs +144 -0
  16. package/esm2022/index.mjs +7 -0
  17. package/esm2022/interfaces/event.interface.mjs +2 -0
  18. package/esm2022/libs-ui-components-drag-drop.mjs +5 -0
  19. package/fesm2022/libs-ui-components-drag-drop.mjs +2043 -0
  20. package/fesm2022/libs-ui-components-drag-drop.mjs.map +1 -0
  21. package/index.d.ts +6 -0
  22. package/interfaces/event.interface.d.ts +60 -0
  23. package/package.json +28 -0
package/esm2022/defines/css.define.mjs ADDED
@@ -0,0 +1,104 @@
1
+ export const styleContainer = (config, viewEncapsulation, groupID) => {
2
+ const defaultConfig = [
3
+ {
4
+ className: 'libs-ui-drag-drop-container',
5
+ styles: `display:block;`,
6
+ },
7
+ {
8
+ className: 'libs-ui-drag-drop-item',
9
+ styles: `
10
+ cursor:move;`,
11
+ },
12
+ {
13
+ className: 'libs-ui-drag-drop-item-placeholder',
14
+ styles: `visibility: hidden;`,
15
+ },
16
+ {
17
+ className: 'libs-ui-drag-drop-item-origin-placeholder',
18
+ styles: `visibility: hidden;`,
19
+ },
20
+ {
21
+ className: 'libs-ui-drag-drop-item-drop-placeholder',
22
+ styles: `visibility: hidden;`,
23
+ },
24
+ {
25
+ className: 'libs-ui-drag-drop-item-dragging',
26
+ styles: `cursor:move; user-select: none; `,
27
+ },
28
+ {
29
+ className: 'libs-ui-drag-drop-item-disable',
30
+ styles: ` cursor:not-allowed;`,
31
+ },
32
+ {
33
+ className: 'libs-ui-drag-drop-item-translate-bottom',
34
+ styles: `position:relative;animation: translateBottom 0.35s 1 ease;`,
35
+ },
36
+ {
37
+ className: 'libs-ui-drag-drop-item-translate-top',
38
+ styles: `position:relative;animation: translateTop 0.35s 1 ease;`,
39
+ },
40
+ {
41
+ className: 'libs-ui-drag-drop-item-translate-left',
42
+ styles: `position:relative;animation: translateLeft 0.35s 1 ease;`,
43
+ },
44
+ {
45
+ className: 'libs-ui-drag-drop-item-translate-right',
46
+ styles: `position:relative;animation: translateRight 0.35s 1 ease;`,
47
+ },
48
+ ];
49
+ config.forEach((item) => {
50
+ const itemExits = defaultConfig.find((defaultItem) => defaultItem.className === item.className);
51
+ if (itemExits) {
52
+ itemExits.styles = item.styles;
53
+ return;
54
+ }
55
+ defaultConfig.push(item);
56
+ });
57
+ const groupAttr = viewEncapsulation ? `[groupID~="${groupID}"]` : '';
58
+ let styles = '';
59
+ defaultConfig.forEach((item) => {
60
+ const style = `${groupAttr}.${item.className}{${item.styles}}`;
61
+ styles = `${styles}${style}\n`;
62
+ });
63
+ styles = ` @keyframes translateTop {
64
+ 0% {
65
+ transform: translateY(30px);
66
+ }
67
+
68
+ 100% {
69
+ transform: translateX(0);
70
+ }
71
+ }
72
+
73
+ @keyframes translateBottom {
74
+ 0% {
75
+ transform: translateY(-30px);
76
+ }
77
+
78
+ 100% {
79
+ transform: translateX(0px);
80
+ }
81
+ }
82
+ @keyframes translateLeft {
83
+ 0% {
84
+ transform: translateX(30px);
85
+ }
86
+
87
+ 100% {
88
+ transform: translateX(0);
89
+ }
90
+ }
91
+
92
+ @keyframes translateRight {
93
+ 0% {
94
+ transform: translateX(-30px);
95
+ }
96
+
97
+ 100% {
98
+ transform: translateX(0px);
99
+ }
100
+ }
101
+ ${styles}`.replace(/\n+/g, '');
102
+ return styles;
103
+ };
104
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3NzLmRlZmluZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9kcmFnLWRyb3Avc3JjL2RlZmluZXMvY3NzLmRlZmluZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsQ0FBQyxNQUFvRCxFQUFFLGlCQUFzQyxFQUFFLE9BQWUsRUFBVSxFQUFFO0lBQ3RKLE1BQU0sYUFBYSxHQUFHO1FBQ3BCO1lBQ0UsU0FBUyxFQUFFLDZCQUE2QjtZQUN4QyxNQUFNLEVBQUUsZ0JBQWdCO1NBQ3pCO1FBQ0Q7WUFDRSxTQUFTLEVBQUUsd0JBQXdCO1lBQ25DLE1BQU0sRUFBRTtpQkFDRztTQUNaO1FBQ0Q7WUFDRSxTQUFTLEVBQUUsb0NBQW9DO1lBQy9DLE1BQU0sRUFBRSxxQkFBcUI7U0FDOUI7UUFDRDtZQUNFLFNBQVMsRUFBRSwyQ0FBMkM7WUFDdEQsTUFBTSxFQUFFLHFCQUFxQjtTQUM5QjtRQUNEO1lBQ0UsU0FBUyxFQUFFLHlDQUF5QztZQUNwRCxNQUFNLEVBQUUscUJBQXFCO1NBQzlCO1FBQ0Q7WUFDRSxTQUFTLEVBQUUsaUNBQWlDO1lBQzVDLE1BQU0sRUFBRSxtQ0FBbUM7U0FDNUM7UUFDRDtZQUNFLFNBQVMsRUFBRSxnQ0FBZ0M7WUFDM0MsTUFBTSxFQUFFLHNCQUFzQjtTQUMvQjtRQUNEO1lBQ0UsU0FBUyxFQUFFLHlDQUF5QztZQUNwRCxNQUFNLEVBQUUsNERBQTREO1NBQ3JFO1FBQ0Q7WUFDRSxTQUFTLEVBQUUsc0NBQXNDO1lBQ2pELE1BQU0sRUFBRSx5REFBeUQ7U0FDbEU7UUFDRDtZQUNFLFNBQVMsRUFBRSx1Q0FBdUM7WUFDbEQsTUFBTSxFQUFFLDBEQUEwRDtTQUNuRTtRQUNEO1lBQ0UsU0FBUyxFQUFFLHdDQUF3QztZQUNuRCxNQUFNLEVBQUUsMkRBQTJEO1NBQ3BFO0tBQ0YsQ0FBQztJQUVGLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtRQUN0QixNQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsSUFBSSxDQUFDLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQyxXQUFXLENBQUMsU0FBUyxLQUFLLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUVoRyxJQUFJLFNBQVMsRUFBRSxDQUFDO1lBQ2QsU0FBUyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1lBRS9CLE9BQU87UUFDVCxDQUFDO1FBQ0QsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMzQixDQUFDLENBQUMsQ0FBQztJQUNILE1BQU0sU0FBUyxHQUFHLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxjQUFjLE9BQU8sSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDckUsSUFBSSxNQUFNLEdBQUcsRUFBRSxDQUFDO0lBRWhCLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRTtRQUM3QixNQUFNLEtBQUssR0FBRyxHQUFHLFNBQVMsSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQztRQUUvRCxNQUFNLEdBQUcsR0FBRyxNQUFNLEdBQUcsS0FBSyxJQUFJLENBQUM7SUFDakMsQ0FBQyxDQUFDLENBQUM7SUFFSCxNQUFNLEdBQUc7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lBc0NQLE1BQU0sRUFBRSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFFL0IsT0FBTyxNQUFNLENBQUM7QUFDaEIsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IHN0eWxlQ29udGFpbmVyID0gKGNvbmZpZzogQXJyYXk8eyBjbGFzc05hbWU6IHN0cmluZzsgc3R5bGVzOiBzdHJpbmcgfT4sIHZpZXdFbmNhcHN1bGF0aW9uOiAnZW11bGF0ZWQnIHwgJ25vbmUnLCBncm91cElEOiBzdHJpbmcpOiBzdHJpbmcgPT4ge1xuICBjb25zdCBkZWZhdWx0Q29uZmlnID0gW1xuICAgIHtcbiAgICAgIGNsYXNzTmFtZTogJ2xpYnMtdWktZHJhZy1kcm9wLWNvbnRhaW5lcicsXG4gICAgICBzdHlsZXM6IGBkaXNwbGF5OmJsb2NrO2AsXG4gICAgfSxcbiAgICB7XG4gICAgICBjbGFzc05hbWU6ICdsaWJzLXVpLWRyYWctZHJvcC1pdGVtJyxcbiAgICAgIHN0eWxlczogYFxuICAgIGN1cnNvcjptb3ZlO2AsXG4gICAgfSxcbiAgICB7XG4gICAgICBjbGFzc05hbWU6ICdsaWJzLXVpLWRyYWctZHJvcC1pdGVtLXBsYWNlaG9sZGVyJyxcbiAgICAgIHN0eWxlczogYHZpc2liaWxpdHk6IGhpZGRlbjtgLFxuICAgIH0sXG4gICAge1xuICAgICAgY2xhc3NOYW1lOiAnbGlicy11aS1kcmFnLWRyb3AtaXRlbS1vcmlnaW4tcGxhY2Vob2xkZXInLFxuICAgICAgc3R5bGVzOiBgdmlzaWJpbGl0eTogaGlkZGVuO2AsXG4gICAgfSxcbiAgICB7XG4gICAgICBjbGFzc05hbWU6ICdsaWJzLXVpLWRyYWctZHJvcC1pdGVtLWRyb3AtcGxhY2Vob2xkZXInLFxuICAgICAgc3R5bGVzOiBgdmlzaWJpbGl0eTogaGlkZGVuO2AsXG4gICAgfSxcbiAgICB7XG4gICAgICBjbGFzc05hbWU6ICdsaWJzLXVpLWRyYWctZHJvcC1pdGVtLWRyYWdnaW5nJyxcbiAgICAgIHN0eWxlczogYGN1cnNvcjptb3ZlOyAgdXNlci1zZWxlY3Q6IG5vbmU7IGAsXG4gICAgfSxcbiAgICB7XG4gICAgICBjbGFzc05hbWU6ICdsaWJzLXVpLWRyYWctZHJvcC1pdGVtLWRpc2FibGUnLFxuICAgICAgc3R5bGVzOiBgIGN1cnNvcjpub3QtYWxsb3dlZDtgLFxuICAgIH0sXG4gICAge1xuICAgICAgY2xhc3NOYW1lOiAnbGlicy11aS1kcmFnLWRyb3AtaXRlbS10cmFuc2xhdGUtYm90dG9tJyxcbiAgICAgIHN0eWxlczogYHBvc2l0aW9uOnJlbGF0aXZlO2FuaW1hdGlvbjogdHJhbnNsYXRlQm90dG9tIDAuMzVzIDEgZWFzZTtgLFxuICAgIH0sXG4gICAge1xuICAgICAgY2xhc3NOYW1lOiAnbGlicy11aS1kcmFnLWRyb3AtaXRlbS10cmFuc2xhdGUtdG9wJyxcbiAgICAgIHN0eWxlczogYHBvc2l0aW9uOnJlbGF0aXZlO2FuaW1hdGlvbjogdHJhbnNsYXRlVG9wIDAuMzVzIDEgZWFzZTtgLFxuICAgIH0sXG4gICAge1xuICAgICAgY2xhc3NOYW1lOiAnbGlicy11aS1kcmFnLWRyb3AtaXRlbS10cmFuc2xhdGUtbGVmdCcsXG4gICAgICBzdHlsZXM6IGBwb3NpdGlvbjpyZWxhdGl2ZTthbmltYXRpb246IHRyYW5zbGF0ZUxlZnQgMC4zNXMgMSBlYXNlO2AsXG4gICAgfSxcbiAgICB7XG4gICAgICBjbGFzc05hbWU6ICdsaWJzLXVpLWRyYWctZHJvcC1pdGVtLXRyYW5zbGF0ZS1yaWdodCcsXG4gICAgICBzdHlsZXM6IGBwb3NpdGlvbjpyZWxhdGl2ZTthbmltYXRpb246IHRyYW5zbGF0ZVJpZ2h0IDAuMzVzIDEgZWFzZTtgLFxuICAgIH0sXG4gIF07XG5cbiAgY29uZmlnLmZvckVhY2goKGl0ZW0pID0+IHtcbiAgICBjb25zdCBpdGVtRXhpdHMgPSBkZWZhdWx0Q29uZmlnLmZpbmQoKGRlZmF1bHRJdGVtKSA9PiBkZWZhdWx0SXRlbS5jbGFzc05hbWUgPT09IGl0ZW0uY2xhc3NOYW1lKTtcblxuICAgIGlmIChpdGVtRXhpdHMpIHtcbiAgICAgIGl0ZW1FeGl0cy5zdHlsZXMgPSBpdGVtLnN0eWxlcztcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBkZWZhdWx0Q29uZmlnLnB1c2goaXRlbSk7XG4gIH0pO1xuICBjb25zdCBncm91cEF0dHIgPSB2aWV3RW5jYXBzdWxhdGlvbiA/IGBbZ3JvdXBJRH49XCIke2dyb3VwSUR9XCJdYCA6ICcnO1xuICBsZXQgc3R5bGVzID0gJyc7XG5cbiAgZGVmYXVsdENvbmZpZy5mb3JFYWNoKChpdGVtKSA9PiB7XG4gICAgY29uc3Qgc3R5bGUgPSBgJHtncm91cEF0dHJ9LiR7aXRlbS5jbGFzc05hbWV9eyR7aXRlbS5zdHlsZXN9fWA7XG5cbiAgICBzdHlsZXMgPSBgJHtzdHlsZXN9JHtzdHlsZX1cXG5gO1xuICB9KTtcblxuICBzdHlsZXMgPSBgIEBrZXlmcmFtZXMgdHJhbnNsYXRlVG9wIHtcbiAgICAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMzBweCk7XG4gICAgfVxuICBcbiAgICAxMDAlIHtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTtcbiAgICB9XG4gIH1cbiAgXG4gIEBrZXlmcmFtZXMgdHJhbnNsYXRlQm90dG9tIHtcbiAgICAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTMwcHgpO1xuICAgIH1cbiAgXG4gICAgMTAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMHB4KTtcbiAgICB9XG4gIH1cbiAgQGtleWZyYW1lcyB0cmFuc2xhdGVMZWZ0IHtcbiAgICAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMzBweCk7XG4gICAgfVxuICBcbiAgICAxMDAlIHtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTtcbiAgICB9XG4gIH1cbiAgXG4gIEBrZXlmcmFtZXMgdHJhbnNsYXRlUmlnaHQge1xuICAgIDAlIHtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMzBweCk7XG4gICAgfVxuICBcbiAgICAxMDAlIHtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwcHgpO1xuICAgIH1cbiAgfVxuICAke3N0eWxlc31gLnJlcGxhY2UoL1xcbisvZywgJycpO1xuXG4gIHJldHVybiBzdHlsZXM7XG59O1xuIl19