@leanix/components 0.2.227 → 0.2.228
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +273 -83
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/index.js +2 -0
- package/esm2015/index.js.map +1 -1
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/constants.js +5 -0
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/constants.js.map +1 -0
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.js +20 -23
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.js.map +1 -1
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js +33 -25
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js.map +1 -1
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.module.js +25 -0
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.module.js.map +1 -0
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-item/keyboard-sortable-item.directive.js +133 -0
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-item/keyboard-sortable-item.directive.js.map +1 -0
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.js +37 -0
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.js.map +1 -0
- package/esm2015/lib/forms-ui/forms-ui.module.js +12 -20
- package/esm2015/lib/forms-ui/forms-ui.module.js.map +1 -1
- package/fesm2015/leanix-components.js +248 -74
- package/fesm2015/leanix-components.js.map +1 -1
- package/index.d.ts +1 -0
- package/lib/forms-ui/components/drag-and-drop-list/constants.d.ts +4 -0
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.d.ts +7 -6
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +23 -17
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.module.d.ts +14 -0
- package/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-item/keyboard-sortable-item.directive.d.ts +36 -0
- package/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.d.ts +14 -0
- package/lib/forms-ui/forms-ui.module.d.ts +41 -43
- package/package.json +1 -1
package/esm2015/index.js
CHANGED
|
@@ -97,6 +97,8 @@ export * from './lib/forms-ui/pipes/filter-term.pipe';
|
|
|
97
97
|
export * from './lib/forms-ui/pipes/format-number.pipe';
|
|
98
98
|
// Validators
|
|
99
99
|
export * from './lib/forms-ui/validators/date-in-foreseeable-future.validator';
|
|
100
|
+
// Modules
|
|
101
|
+
export { LxDragAndDropListModule } from './lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.module';
|
|
100
102
|
/*----------------- modal-ui -----------------*/
|
|
101
103
|
export * from './lib/modal-ui/modal.module';
|
|
102
104
|
export * from './lib/modal-ui/modal.constants';
|
package/esm2015/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Used in the DragAndDropListComponent and KeyboardSortableListDirective
|
|
3
|
+
*/
|
|
4
|
+
export const DRAG_AND_DROP_LIST_TRANSLATION_NAME = 'DragAndDropListComponent';
|
|
5
|
+
//# sourceMappingURL=../../../../../../../../libs/components/src/lib/forms-ui/components/drag-and-drop-list/constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG,0BAA0B,CAAC"}
|
|
@@ -1,31 +1,30 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "../../../../core-ui/components/button/button.component";
|
|
4
|
-
import * as i2 from "
|
|
5
|
-
import * as i3 from "../../option-group/option-group.component";
|
|
6
|
-
import * as i4 from "../../option/option.component";
|
|
7
|
-
import * as i5 from "@angular/common";
|
|
8
|
-
import * as i6 from "../../../directives/keyboard-action-source.directive";
|
|
9
|
-
import * as i7 from "@ngx-translate/core";
|
|
4
|
+
import * as i2 from "@angular/common";
|
|
10
5
|
export class DragAndDropListItemComponent {
|
|
11
|
-
constructor() {
|
|
6
|
+
constructor(element) {
|
|
7
|
+
this.element = element;
|
|
12
8
|
this.NAME = 'DragAndDropListItemComponent';
|
|
13
9
|
this.draggable = true;
|
|
14
10
|
this.action = new EventEmitter();
|
|
15
|
-
this.
|
|
16
|
-
this.moveUp = new EventEmitter();
|
|
17
|
-
this.moveToBottom = new EventEmitter();
|
|
18
|
-
this.moveDown = new EventEmitter();
|
|
11
|
+
this.customTemplateRef = null;
|
|
19
12
|
}
|
|
20
13
|
get draggingDisabled() {
|
|
21
14
|
return !this.draggable;
|
|
22
15
|
}
|
|
16
|
+
get hasCustomTemplate() {
|
|
17
|
+
return !!this.customTemplateRef;
|
|
18
|
+
}
|
|
23
19
|
trackByAction(_index, action) {
|
|
24
20
|
return action.id;
|
|
25
21
|
}
|
|
22
|
+
focus() {
|
|
23
|
+
this.element.nativeElement.focus();
|
|
24
|
+
}
|
|
26
25
|
}
|
|
27
|
-
DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
28
|
-
DragAndDropListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action",
|
|
26
|
+
DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
+
DragAndDropListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: { item: "item", draggable: "draggable", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled", "class.customTemplate": "this.hasCustomTemplate" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: ["customTemplate"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"customTemplateRef; else defaultTemplate\">\n <ng-container *ngTemplateOutlet=\"customTemplateRef\"></ng-container>\n</ng-container>\n<ng-template #defaultTemplate>\n <div class=\"drag-item-wrappper\">\n <i *ngIf=\"draggable\" class=\"far fa-bars drag-handle\"></i>\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n </div>\n <div class=\"left-button-container\" align=\"left\">\n <div class=\"action-buttons-wrapper\" *ngIf=\"!!actions\">\n <button\n lx-button\n *ngFor=\"let act of actions; trackBy: trackByAction\"\n (click)=\"action.emit({ actionId: act.id, item: item })\"\n [title]=\"act.label\"\n [square]=\"true\"\n mode=\"ghost\"\n size=\"small\"\n class=\"action-button\"\n [class.show-on-hover-button]=\"act.showOnlyOnHover ? true : false\"\n >\n <i class=\"far {{ act.icon }} actionIcon\"></i>\n </button>\n </div>\n </div>\n</ng-template>\n", styles: [":host:not(.customTemplate){padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;border-radius:3px}:host:not(.customTemplate):hover .show-on-hover-button{opacity:1}:host.draggingDisabled{background:#eaedf1}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drag-handle{padding-right:4px}.actionIcon{padding:0 2px}.drag-item-wrappper{display:flex;min-width:0;align-items:baseline}.action-buttons-wrapper,.left-button-container{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}lx-option i{margin-right:8px}"], components: [{ type: i1.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
|
|
30
29
|
type: Component,
|
|
31
30
|
args: [{
|
|
@@ -34,7 +33,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
34
33
|
styleUrls: ['drag-and-drop-list-item.component.scss'],
|
|
35
34
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
36
35
|
}]
|
|
37
|
-
}], propDecorators: { item: [{
|
|
36
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { item: [{
|
|
38
37
|
type: Input
|
|
39
38
|
}], draggable: [{
|
|
40
39
|
type: Input
|
|
@@ -42,16 +41,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
42
41
|
type: Input
|
|
43
42
|
}], action: [{
|
|
44
43
|
type: Output
|
|
45
|
-
}], moveToTop: [{
|
|
46
|
-
type: Output
|
|
47
|
-
}], moveUp: [{
|
|
48
|
-
type: Output
|
|
49
|
-
}], moveToBottom: [{
|
|
50
|
-
type: Output
|
|
51
|
-
}], moveDown: [{
|
|
52
|
-
type: Output
|
|
53
44
|
}], draggingDisabled: [{
|
|
54
45
|
type: HostBinding,
|
|
55
46
|
args: ['class.draggingDisabled']
|
|
47
|
+
}], hasCustomTemplate: [{
|
|
48
|
+
type: HostBinding,
|
|
49
|
+
args: ['class.customTemplate']
|
|
50
|
+
}], customTemplateRef: [{
|
|
51
|
+
type: ContentChild,
|
|
52
|
+
args: ['customTemplate']
|
|
56
53
|
}] } });
|
|
57
54
|
//# sourceMappingURL=../../../../../../../../../libs/components/src/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-and-drop-list-item.component.js","sourceRoot":"","sources":["drag-and-drop-list-item.component.ts","drag-and-drop-list-item.component.html"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"drag-and-drop-list-item.component.js","sourceRoot":"","sources":["drag-and-drop-list-item.component.ts","drag-and-drop-list-item.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,YAAY,EAEZ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,MAAM,EAEP,MAAM,eAAe,CAAC;;;;AAoBvB,MAAM,OAAO,4BAA4B;IAsBvC,YAAoB,OAAmB;QAAnB,YAAO,GAAP,OAAO,CAAY;QArB9B,SAAI,GAAG,8BAA8B,CAAC;QAGtC,cAAS,GAAY,IAAI,CAAC;QAMzB,WAAM,GAAG,IAAI,YAAY,EAA8B,CAAC;QAUlC,sBAAiB,GAA4B,IAAI,CAAC;IAExC,CAAC;IAV3C,IAA2C,gBAAgB;QACzD,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;IACzB,CAAC;IAED,IAAyC,iBAAiB;QACxD,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;IAClC,CAAC;IAMD,aAAa,CAAC,MAAc,EAAE,MAA6B;QACzD,OAAO,MAAM,CAAC,EAAE,CAAC;IACnB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IACrC,CAAC;;yHA9BU,4BAA4B;6GAA5B,4BAA4B,uZC9BzC,6/BA0BA;2FDIa,4BAA4B;kBANxC,SAAS;mBAAC;oBACT,QAAQ,EAAE,4BAA4B;oBACtC,WAAW,EAAE,wCAAwC;oBACrD,SAAS,EAAE,CAAC,wCAAwC,CAAC;oBACrD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;iGAIU,IAAI;sBAAZ,KAAK;gBACG,SAAS;sBAAjB,KAAK;gBAKG,OAAO;sBAAf,KAAK;gBACI,MAAM;sBAAf,MAAM;gBAEoC,gBAAgB;sBAA1D,WAAW;uBAAC,wBAAwB;gBAII,iBAAiB;sBAAzD,WAAW;uBAAC,sBAAsB;gBAIH,iBAAiB;sBAAhD,YAAY;uBAAC,gBAAgB"}
|
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
import { moveItemInArray } from '@angular/cdk/drag-drop';
|
|
2
|
-
import { Component,
|
|
2
|
+
import { Component, ContentChildren, EventEmitter, HostBinding, Input, Output, ViewChildren } from '@angular/core';
|
|
3
3
|
import { map, startWith } from 'rxjs/operators';
|
|
4
|
+
import { DRAG_AND_DROP_LIST_TRANSLATION_NAME } from './constants';
|
|
4
5
|
import { DragAndDropListItemComponent } from './drag-and-drop-list-item/drag-and-drop-list-item.component';
|
|
6
|
+
import { KeyboardSortableItemDirective } from './keyboard-sortable-item/keyboard-sortable-item.directive';
|
|
5
7
|
import * as i0 from "@angular/core";
|
|
6
8
|
import * as i1 from "./drag-and-drop-list-item/drag-and-drop-list-item.component";
|
|
7
9
|
import * as i2 from "@angular/common";
|
|
8
10
|
import * as i3 from "@angular/cdk/drag-drop";
|
|
11
|
+
import * as i4 from "./keyboard-sortable-list/keyboard-sortable-list.directive";
|
|
12
|
+
import * as i5 from "./keyboard-sortable-item/keyboard-sortable-item.directive";
|
|
13
|
+
import * as i6 from "@ngx-translate/core";
|
|
9
14
|
export class DragAndDropListComponent {
|
|
10
15
|
constructor() {
|
|
11
|
-
this.NAME =
|
|
16
|
+
this.NAME = DRAG_AND_DROP_LIST_TRANSLATION_NAME;
|
|
12
17
|
/**
|
|
13
18
|
* Override the global label font weight of 700
|
|
14
19
|
*/
|
|
15
20
|
this.labelFontWeight = 700;
|
|
16
|
-
this.color = '
|
|
21
|
+
this.color = 'light';
|
|
17
22
|
this.fontSize = 'normal';
|
|
18
23
|
/**
|
|
19
24
|
* Use the moveToIndex Output in favor of moveItem,
|
|
@@ -21,15 +26,19 @@ export class DragAndDropListComponent {
|
|
|
21
26
|
*/
|
|
22
27
|
this.moveToIndex = new EventEmitter();
|
|
23
28
|
this.moveItem = new EventEmitter();
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
/**
|
|
30
|
+
* TODO: extract state about keyboard sorting into KeyboardSortableListDirective
|
|
31
|
+
*/
|
|
32
|
+
this.isSortingByKeyboard = false;
|
|
33
|
+
this.keyboardItemBeingSorted = undefined;
|
|
34
|
+
this.allItemsData = [];
|
|
30
35
|
}
|
|
31
36
|
ngAfterContentInit() {
|
|
32
37
|
this.items$ = this._items.changes.pipe(startWith(this._items), map((items) => items.toArray()));
|
|
38
|
+
this.allItemsData$ = this.items$.pipe(map((itemComponents) => itemComponents.map((itemComponent) => itemComponent.item)));
|
|
39
|
+
}
|
|
40
|
+
ngAfterViewInit() {
|
|
41
|
+
this.keyboardSortableItems$ = this._keyboardSortableItems.changes.pipe(startWith(this._keyboardSortableItems), map((items) => items.toArray()));
|
|
33
42
|
}
|
|
34
43
|
emitContentChildAction(action) {
|
|
35
44
|
var _a;
|
|
@@ -45,21 +54,24 @@ export class DragAndDropListComponent {
|
|
|
45
54
|
* You're supposed to update the data in the parent and pass the new items as input.
|
|
46
55
|
*/
|
|
47
56
|
drop(event) {
|
|
48
|
-
|
|
49
|
-
this.moveToIndex.emit(event.currentIndex);
|
|
50
|
-
this.moveItem.emit({ item: event.item.data, index: event.currentIndex });
|
|
57
|
+
this.sortItems(event.container.data, event.item.data, event.previousIndex, event.currentIndex);
|
|
51
58
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
59
|
+
dropToIndexAfterArrowKey(item, previousIndex, currentIndex) {
|
|
60
|
+
if (this.isSortingByKeyboard) {
|
|
61
|
+
this.sortItems(this._items, item, previousIndex, currentIndex);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
sortItems(items, item, previousIndex, currentIndex) {
|
|
65
|
+
moveItemInArray(items, previousIndex, currentIndex);
|
|
66
|
+
this.moveToIndex.emit({ index: currentIndex, previous: previousIndex });
|
|
55
67
|
this.moveItem.emit({ item, index: currentIndex });
|
|
56
68
|
}
|
|
57
|
-
|
|
58
|
-
return item
|
|
69
|
+
trackByItem(_index, item) {
|
|
70
|
+
return item.item;
|
|
59
71
|
}
|
|
60
72
|
}
|
|
61
73
|
DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
-
DragAndDropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight",
|
|
74
|
+
DragAndDropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.4", type: DragAndDropListComponent, selector: "lx-drag-and-drop-list", inputs: { label: "label", labelFontWeight: "labelFontWeight", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "_items", predicate: DragAndDropListItemComponent }], viewQueries: [{ propertyName: "_keyboardSortableItems", predicate: KeyboardSortableItemDirective, descendants: true }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<p class=\"sr-only\">{{ NAME + '.helpTooltip' | translate }}</p>\n<ul\n cdkDropList\n class=\"list\"\n role=\"listbox\"\n lxKeyboardSortableList\n [keyboardSortableItems]=\"keyboardSortableItems$ | async\"\n [cdkDropListData]=\"items$ | async\"\n (cdkDropListDropped)=\"drop($event)\"\n>\n <li\n *ngFor=\"let itemComponent of items$ | async; trackBy: trackByItem\"\n #listItemParent\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\n [class.dark]=\"color === 'dark'\"\n [class.big]=\"fontSize === 'big'\"\n [tabIndex]=\"itemComponent.draggable === false ? -1 : 0\"\n [lxKeyboardSortableItem]=\"allItemsData$ | async\"\n [lxKeyboardItemData]=\"itemComponent.item\"\n [(isSortingByKeyboard)]=\"isSortingByKeyboard\"\n [(lxKeyboardItemBeingSorted)]=\"keyboardItemBeingSorted\"\n (sortItemsWithKeyboard)=\"dropToIndexAfterArrowKey(itemComponent.item, $event.previousIndex, $event.currentIndex)\"\n >\n <lx-drag-and-drop-list-item\n class=\"dragAndDropItem\"\n [item]=\"itemComponent.item\"\n [draggable]=\"itemComponent.draggable\"\n [actions]=\"itemComponent.actions\"\n (action)=\"emitContentChildAction($event)\"\n >\n <ng-template *ngIf=\"itemComponent.customTemplateRef\" #customTemplate>\n <ng-container *ngTemplateOutlet=\"itemComponent.customTemplateRef\"></ng-container>\n </ng-template>\n </lx-drag-and-drop-list-item>\n </li>\n</ul>\n", styles: ["@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}:host{display:block}.list{list-style-type:none;width:100%;display:block;padding:0;color:#526179}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{position:relative;cursor:move;border:1px solid #99a5bb;margin-bottom:4px;border-radius:3px}.item:focus{outline:1px auto #1666ee}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px hsla(0,0%,45%,.3)}.cdk-drag-placeholder{opacity:.5}.cdk-drag-placeholder i{opacity:0}.cdk-drag-animating,.list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .18s;transition-delay:0s;transition-timing-function:ease}:host[color=dark] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=dark] .item,:host[color=dark] .list{border:0}:host[color=dark] .item.cdk-drag-disabled lx-drag-and-drop-list-item{background:#fff;color:#99a5bb;border:1px solid #99a5bb}:host[fontSize=big] .item{text-transform:uppercase;font-weight:700}.cdk-drag-preview.dark{border:0!important}.cdk-drag-preview.dark lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}.isBeingSortedByKeyboard{box-shadow:0 6px 24px 0 #b2bccc;z-index:1}"], components: [{ type: i1.DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4.KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: ["keyboardSortableItems"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i5.KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: ["lxKeyboardSortableItem", "lxKeyboardItemData", "isSortingByKeyboard", "lxKeyboardItemBeingSorted"], outputs: ["isSortingByKeyboardChange", "lxKeyboardItemBeingSortedChange", "sortItemsWithKeyboard", "focusWithKeyboard"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6.TranslatePipe, "async": i2.AsyncPipe } });
|
|
63
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
|
64
76
|
type: Component,
|
|
65
77
|
args: [{
|
|
@@ -71,10 +83,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
71
83
|
type: Input
|
|
72
84
|
}], labelFontWeight: [{
|
|
73
85
|
type: Input
|
|
74
|
-
}], items: [{
|
|
75
|
-
type: Input
|
|
76
|
-
}], itemIdProperty: [{
|
|
77
|
-
type: Input
|
|
78
86
|
}], color: [{
|
|
79
87
|
type: Input
|
|
80
88
|
}, {
|
|
@@ -92,8 +100,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
92
100
|
}], _items: [{
|
|
93
101
|
type: ContentChildren,
|
|
94
102
|
args: [DragAndDropListItemComponent]
|
|
95
|
-
}],
|
|
96
|
-
type:
|
|
97
|
-
args: [
|
|
103
|
+
}], _keyboardSortableItems: [{
|
|
104
|
+
type: ViewChildren,
|
|
105
|
+
args: [KeyboardSortableItemDirective]
|
|
98
106
|
}] } });
|
|
99
107
|
//# sourceMappingURL=../../../../../../../../libs/components/src/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js.map
|
package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-and-drop-list.component.js","sourceRoot":"","sources":["drag-and-drop-list.component.ts","drag-and-drop-list.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,
|
|
1
|
+
{"version":3,"file":"drag-and-drop-list.component.js","sourceRoot":"","sources":["drag-and-drop-list.component.ts","drag-and-drop-list.component.html"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import { NgModule } from '@angular/core';
|
|
4
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
5
|
+
import { LxCoreUiModule } from '../../../core-ui/core-ui.module';
|
|
6
|
+
import { DragAndDropListItemComponent } from './drag-and-drop-list-item/drag-and-drop-list-item.component';
|
|
7
|
+
import { DragAndDropListComponent } from './drag-and-drop-list.component';
|
|
8
|
+
import { KeyboardSortableItemDirective } from './keyboard-sortable-item/keyboard-sortable-item.directive';
|
|
9
|
+
import { KeyboardSortableListDirective } from './keyboard-sortable-list/keyboard-sortable-list.directive';
|
|
10
|
+
import * as i0 from "@angular/core";
|
|
11
|
+
import * as i1 from "@ngx-translate/core";
|
|
12
|
+
export class LxDragAndDropListModule {
|
|
13
|
+
}
|
|
14
|
+
LxDragAndDropListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxDragAndDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
15
|
+
LxDragAndDropListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxDragAndDropListModule, declarations: [KeyboardSortableItemDirective, KeyboardSortableListDirective, DragAndDropListComponent, DragAndDropListItemComponent], imports: [CommonModule, DragDropModule, LxCoreUiModule, i1.TranslateModule], exports: [DragAndDropListComponent, DragAndDropListItemComponent] });
|
|
16
|
+
LxDragAndDropListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxDragAndDropListModule, imports: [[CommonModule, DragDropModule, LxCoreUiModule, TranslateModule.forChild()]] });
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: LxDragAndDropListModule, decorators: [{
|
|
18
|
+
type: NgModule,
|
|
19
|
+
args: [{
|
|
20
|
+
declarations: [KeyboardSortableItemDirective, KeyboardSortableListDirective, DragAndDropListComponent, DragAndDropListItemComponent],
|
|
21
|
+
imports: [CommonModule, DragDropModule, LxCoreUiModule, TranslateModule.forChild()],
|
|
22
|
+
exports: [DragAndDropListComponent, DragAndDropListItemComponent]
|
|
23
|
+
}]
|
|
24
|
+
}] });
|
|
25
|
+
//# sourceMappingURL=../../../../../../../../libs/components/src/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drag-and-drop-list.module.js","sourceRoot":"","sources":["drag-and-drop-list.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,4BAA4B,EAAE,MAAM,6DAA6D,CAAC;AAC3G,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,6BAA6B,EAAE,MAAM,2DAA2D,CAAC;AAC1G,OAAO,EAAE,6BAA6B,EAAE,MAAM,2DAA2D,CAAC;;;AAO1G,MAAM,OAAO,uBAAuB;;oHAAvB,uBAAuB;qHAAvB,uBAAuB,iBAJnB,6BAA6B,EAAE,6BAA6B,EAAE,wBAAwB,EAAE,4BAA4B,aACzH,YAAY,EAAE,cAAc,EAAE,cAAc,iCAC5C,wBAAwB,EAAE,4BAA4B;qHAErD,uBAAuB,YAHzB,CAAC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,CAAC,QAAQ,EAAE,CAAC;2FAGxE,uBAAuB;kBALnC,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,6BAA6B,EAAE,6BAA6B,EAAE,wBAAwB,EAAE,4BAA4B,CAAC;oBACpI,OAAO,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,CAAC,QAAQ,EAAE,CAAC;oBACnF,OAAO,EAAE,CAAC,wBAAwB,EAAE,4BAA4B,CAAC;iBAClE"}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
|
|
2
|
+
import { ReplaySubject } from 'rxjs';
|
|
3
|
+
import { TooltipDirective } from '../../../../core-ui/tooltip/tooltip.directive';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/cdk/drag-drop";
|
|
6
|
+
import * as i2 from "@angular/cdk/overlay";
|
|
7
|
+
export class KeyboardSortableItemDirective {
|
|
8
|
+
constructor(draggableItem, overlayPositionBuilder, element, overlay) {
|
|
9
|
+
this.draggableItem = draggableItem;
|
|
10
|
+
this.overlayPositionBuilder = overlayPositionBuilder;
|
|
11
|
+
this.element = element;
|
|
12
|
+
this.overlay = overlay;
|
|
13
|
+
this.isSortingByKeyboardChange = new EventEmitter();
|
|
14
|
+
this.itemBeingSortedChange = new EventEmitter();
|
|
15
|
+
this.sortItemsWithKeyboard = new EventEmitter();
|
|
16
|
+
this.tooltipDirective = new TooltipDirective(this.overlayPositionBuilder, this.element, this.overlay);
|
|
17
|
+
this.isBeingSorted = false;
|
|
18
|
+
this.preventBlur = false;
|
|
19
|
+
this.focusWithKeyboardReplaySubject$ = new ReplaySubject(1);
|
|
20
|
+
/**
|
|
21
|
+
* Using a ReplaySubject here so that the KeyboardSortableListDirective will also know
|
|
22
|
+
* about a focusWithKeyboard event when its copy of the KeyboardSortableItemDirective ContentChildren
|
|
23
|
+
* was just initialised after the event fired.
|
|
24
|
+
*/
|
|
25
|
+
this.focusWithKeyboard = this.focusWithKeyboardReplaySubject$.asObservable();
|
|
26
|
+
}
|
|
27
|
+
get isSortable() {
|
|
28
|
+
return !this.draggableItem.disabled;
|
|
29
|
+
}
|
|
30
|
+
ngOnChanges() {
|
|
31
|
+
this.isBeingSorted = this.itemData === this.itemBeingSorted;
|
|
32
|
+
if (this.isBeingSorted) {
|
|
33
|
+
// focus always the pressed element
|
|
34
|
+
this.element.nativeElement.focus();
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
focusViaKeyboard() {
|
|
38
|
+
this.focusWithKeyboardReplaySubject$.next(this);
|
|
39
|
+
}
|
|
40
|
+
enterSortingModeEnabledByKeyboard($event) {
|
|
41
|
+
if ($event.target === this.element.nativeElement) {
|
|
42
|
+
if ($event.code === 'Enter' || $event.code === 'Space') {
|
|
43
|
+
$event.preventDefault();
|
|
44
|
+
this.tooltipDirective.hide();
|
|
45
|
+
this.itemBeingSortedChange.emit(!this.isSortingByKeyboard ? this.itemData : undefined);
|
|
46
|
+
this.isSortingByKeyboardChange.emit(!this.isSortingByKeyboard);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
leaveSortingModeEnabledByKeyboard($event) {
|
|
51
|
+
if ($event.target === this.element.nativeElement) {
|
|
52
|
+
this.tooltipDirective.hide();
|
|
53
|
+
if (!this.preventBlur) {
|
|
54
|
+
this.isSortingByKeyboardChange.emit(false);
|
|
55
|
+
this.itemBeingSortedChange.emit(undefined);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
sort($event) {
|
|
60
|
+
if ($event.target === this.element.nativeElement) {
|
|
61
|
+
this.tooltipDirective.hide();
|
|
62
|
+
if (this.isSortingByKeyboard) {
|
|
63
|
+
$event.preventDefault();
|
|
64
|
+
const previousIndex = this.allItemsData.findIndex((item) => item === this.itemData);
|
|
65
|
+
const currentIndex = $event.code === 'ArrowUp' ? previousIndex - 1 : previousIndex + 1;
|
|
66
|
+
if (currentIndex >= 0 && currentIndex <= this.allItemsData.length - 1) {
|
|
67
|
+
this.sortItemsWithKeyboard.emit({ previousIndex, currentIndex });
|
|
68
|
+
// When triggering a keyboard event, the DOM would "removeChildren" on the HTML element
|
|
69
|
+
// which specially for "ArrowUp" events would trigger a "blur" event since the element
|
|
70
|
+
// has been moved aboved the DOM tree and loses the focus state.
|
|
71
|
+
this.preventBlur = true;
|
|
72
|
+
setTimeout(() => (this.preventBlur = false), 0);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
KeyboardSortableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardSortableItemDirective, deps: [{ token: i1.CdkDrag }, { token: i2.OverlayPositionBuilder }, { token: i0.ElementRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Directive });
|
|
79
|
+
KeyboardSortableItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardSortableItemDirective, selector: "[lxKeyboardSortableItem]", inputs: { allItemsData: ["lxKeyboardSortableItem", "allItemsData"], itemData: ["lxKeyboardItemData", "itemData"], isSortingByKeyboard: "isSortingByKeyboard", itemBeingSorted: ["lxKeyboardItemBeingSorted", "itemBeingSorted"] }, outputs: { isSortingByKeyboardChange: "isSortingByKeyboardChange", itemBeingSortedChange: "lxKeyboardItemBeingSortedChange", sortItemsWithKeyboard: "sortItemsWithKeyboard", focusWithKeyboard: "focusWithKeyboard" }, host: { listeners: { "keyup.tab": "focusViaKeyboard()", "keydown.enter": "enterSortingModeEnabledByKeyboard($event)", "keydown.space": "enterSortingModeEnabledByKeyboard($event)", "blur": "leaveSortingModeEnabledByKeyboard($event)", "keydown.esc": "leaveSortingModeEnabledByKeyboard($event)", "keydown.arrowUp": "sort($event)", "keydown.arrowDown": "sort($event)" }, properties: { "attr.lxTooltip": "this.tooltipDirective", "class.isBeingSortedByKeyboard": "this.isBeingSorted" } }, usesOnChanges: true, ngImport: i0 });
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardSortableItemDirective, decorators: [{
|
|
81
|
+
type: Directive,
|
|
82
|
+
args: [{
|
|
83
|
+
selector: '[lxKeyboardSortableItem]'
|
|
84
|
+
}]
|
|
85
|
+
}], ctorParameters: function () { return [{ type: i1.CdkDrag }, { type: i2.OverlayPositionBuilder }, { type: i0.ElementRef }, { type: i2.Overlay }]; }, propDecorators: { allItemsData: [{
|
|
86
|
+
type: Input,
|
|
87
|
+
args: ['lxKeyboardSortableItem']
|
|
88
|
+
}], itemData: [{
|
|
89
|
+
type: Input,
|
|
90
|
+
args: ['lxKeyboardItemData']
|
|
91
|
+
}], isSortingByKeyboard: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}], itemBeingSorted: [{
|
|
94
|
+
type: Input,
|
|
95
|
+
args: ['lxKeyboardItemBeingSorted']
|
|
96
|
+
}], isSortingByKeyboardChange: [{
|
|
97
|
+
type: Output
|
|
98
|
+
}], itemBeingSortedChange: [{
|
|
99
|
+
type: Output,
|
|
100
|
+
args: ['lxKeyboardItemBeingSortedChange']
|
|
101
|
+
}], sortItemsWithKeyboard: [{
|
|
102
|
+
type: Output
|
|
103
|
+
}], focusWithKeyboard: [{
|
|
104
|
+
type: Output
|
|
105
|
+
}], tooltipDirective: [{
|
|
106
|
+
type: HostBinding,
|
|
107
|
+
args: ['attr.lxTooltip']
|
|
108
|
+
}], isBeingSorted: [{
|
|
109
|
+
type: HostBinding,
|
|
110
|
+
args: ['class.isBeingSortedByKeyboard']
|
|
111
|
+
}], focusViaKeyboard: [{
|
|
112
|
+
type: HostListener,
|
|
113
|
+
args: ['keyup.tab']
|
|
114
|
+
}], enterSortingModeEnabledByKeyboard: [{
|
|
115
|
+
type: HostListener,
|
|
116
|
+
args: ['keydown.enter', ['$event']]
|
|
117
|
+
}, {
|
|
118
|
+
type: HostListener,
|
|
119
|
+
args: ['keydown.space', ['$event']]
|
|
120
|
+
}], leaveSortingModeEnabledByKeyboard: [{
|
|
121
|
+
type: HostListener,
|
|
122
|
+
args: ['blur', ['$event']]
|
|
123
|
+
}, {
|
|
124
|
+
type: HostListener,
|
|
125
|
+
args: ['keydown.esc', ['$event']]
|
|
126
|
+
}], sort: [{
|
|
127
|
+
type: HostListener,
|
|
128
|
+
args: ['keydown.arrowUp', ['$event']]
|
|
129
|
+
}, {
|
|
130
|
+
type: HostListener,
|
|
131
|
+
args: ['keydown.arrowDown', ['$event']]
|
|
132
|
+
}] } });
|
|
133
|
+
//# sourceMappingURL=../../../../../../../../../libs/components/src/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-item/keyboard-sortable-item.directive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"keyboard-sortable-item.directive.js","sourceRoot":"","sources":["keyboard-sortable-item.directive.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { Directive, Input } from '@angular/core';
|
|
3
|
+
import { merge } from 'rxjs';
|
|
4
|
+
import { filter, switchMap, take } from 'rxjs/operators';
|
|
5
|
+
import { Observe } from '../../../../shared/observe';
|
|
6
|
+
import { DRAG_AND_DROP_LIST_TRANSLATION_NAME } from '../constants';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "@ngx-translate/core";
|
|
9
|
+
export class KeyboardSortableListDirective {
|
|
10
|
+
constructor(translateService) {
|
|
11
|
+
this.translateService = translateService;
|
|
12
|
+
}
|
|
13
|
+
ngAfterViewInit() {
|
|
14
|
+
this.setupControlsTooltipToBeShownOnFirstFocusedItem();
|
|
15
|
+
}
|
|
16
|
+
setupControlsTooltipToBeShownOnFirstFocusedItem() {
|
|
17
|
+
const firstFocusEventOnADraggableItem$ = this.keyboardSortableItems$.pipe(filter((items) => items && items.length > 0), switchMap((items) => merge(...items.filter((item) => item.isSortable).map((item) => item.focusWithKeyboard))), take(1));
|
|
18
|
+
firstFocusEventOnADraggableItem$.subscribe((item) => {
|
|
19
|
+
item.tooltipDirective.content = this.translateService.instant(`${DRAG_AND_DROP_LIST_TRANSLATION_NAME}.helpTooltip`);
|
|
20
|
+
item.tooltipDirective.show();
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
KeyboardSortableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardSortableListDirective, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
25
|
+
KeyboardSortableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.4", type: KeyboardSortableListDirective, selector: "[lxKeyboardSortableList]", inputs: { keyboardSortableItems: "keyboardSortableItems" }, ngImport: i0 });
|
|
26
|
+
__decorate([
|
|
27
|
+
Observe('keyboardSortableItems')
|
|
28
|
+
], KeyboardSortableListDirective.prototype, "keyboardSortableItems$", void 0);
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: KeyboardSortableListDirective, decorators: [{
|
|
30
|
+
type: Directive,
|
|
31
|
+
args: [{
|
|
32
|
+
selector: '[lxKeyboardSortableList]'
|
|
33
|
+
}]
|
|
34
|
+
}], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { keyboardSortableItems$: [], keyboardSortableItems: [{
|
|
35
|
+
type: Input
|
|
36
|
+
}] } });
|
|
37
|
+
//# sourceMappingURL=../../../../../../../../../libs/components/src/lib/forms-ui/components/drag-and-drop-list/keyboard-sortable-list/keyboard-sortable-list.directive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"keyboard-sortable-list.directive.js","sourceRoot":"","sources":["keyboard-sortable-list.directive.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAc,MAAM,MAAM,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,mCAAmC,EAAE,MAAM,cAAc,CAAC;;;AAMnE,MAAM,OAAO,6BAA6B;IAIxC,YAAoB,gBAAkC;QAAlC,qBAAgB,GAAhB,gBAAgB,CAAkB;IAAG,CAAC;IAE1D,eAAe;QACb,IAAI,CAAC,+CAA+C,EAAE,CAAC;IACzD,CAAC;IAEO,+CAA+C;QACrD,MAAM,gCAAgC,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CACvE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAC5C,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAC7G,IAAI,CAAC,CAAC,CAAC,CACR,CAAC;QAEF,gCAAgC,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE;YAClD,IAAI,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,GAAG,mCAAmC,cAAc,CAAC,CAAC;YACpH,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;;0HArBU,6BAA6B;8GAA7B,6BAA6B;AACN;IAAjC,OAAO,CAAC,uBAAuB,CAAC;6EAA8E;2FADpG,6BAA6B;kBAHzC,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;iBACrC;uGAE2C,sBAAsB,MACvD,qBAAqB;sBAA7B,KAAK"}
|