@leanix/components 0.2.220 → 0.2.223
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +31 -2
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.js +19 -2
- 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 +19 -2
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js.map +1 -1
- package/fesm2015/leanix-components.js +31 -2
- package/fesm2015/leanix-components.js.map +1 -1
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list-item/drag-and-drop-list-item.component.d.ts +5 -1
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, 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 "
|
|
4
|
+
import * as i2 from "../../cdk-options-dropdown/cdk-options-dropdown.component";
|
|
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";
|
|
5
10
|
export class DragAndDropListItemComponent {
|
|
6
11
|
constructor() {
|
|
7
12
|
this.NAME = 'DragAndDropListItemComponent';
|
|
8
13
|
this.draggable = true;
|
|
9
14
|
this.action = new EventEmitter();
|
|
15
|
+
this.moveToTop = new EventEmitter();
|
|
16
|
+
this.moveUp = new EventEmitter();
|
|
17
|
+
this.moveToBottom = new EventEmitter();
|
|
18
|
+
this.moveDown = new EventEmitter();
|
|
10
19
|
}
|
|
11
20
|
get draggingDisabled() {
|
|
12
21
|
return !this.draggable;
|
|
@@ -16,7 +25,7 @@ export class DragAndDropListItemComponent {
|
|
|
16
25
|
}
|
|
17
26
|
}
|
|
18
27
|
DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
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" } }, ngImport: i0, template: "<
|
|
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", moveToTop: "moveToTop", moveUp: "moveUp", moveToBottom: "moveToBottom", moveDown: "moveDown" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled" } }, ngImport: i0, template: "<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\n <lx-cdk-options-dropdown *ngIf=\"draggable\">\n <button lx-button [square]=\"true\" mode=\"ghost\" size=\"small\" lxKeyboardActionSource class=\"moreButton far fa-ellipsis-v\"></button>\n <lx-option-group>\n <lx-option [hasSelectedState]=\"false\" (select)=\"moveToTop.emit()\">\n <i class=\"far fa-fw fa-arrow-to-top\"></i>{{ NAME + '.moveToTop' | translate }}\n </lx-option>\n <lx-option [hasSelectedState]=\"false\" (select)=\"moveUp.emit()\">\n <i class=\"far fa-fw fa-arrow-up\"></i>{{ NAME + '.moveUp' | translate }}\n </lx-option>\n <lx-option [hasSelectedState]=\"false\" (select)=\"moveDown.emit()\">\n <i class=\"far fa-fw fa-arrow-down\"></i>{{ NAME + '.moveDown' | translate }}\n </lx-option>\n <lx-option [hasSelectedState]=\"false\" (select)=\"moveToBottom.emit()\">\n <i class=\"far fa-fw fa-arrow-down\"></i>{{ NAME + '.moveToBottom' | translate }}\n </lx-option>\n </lx-option-group>\n </lx-cdk-options-dropdown>\n</div>\n", styles: [":host{padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host.draggingDisabled{background:#eaedf1}:host:hover .show-on-hover-button{opacity:1}.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"] }, { type: i2.CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { type: i3.OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: i4.OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
|
|
21
30
|
type: Component,
|
|
22
31
|
args: [{
|
|
@@ -33,6 +42,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
33
42
|
type: Input
|
|
34
43
|
}], action: [{
|
|
35
44
|
type: Output
|
|
45
|
+
}], moveToTop: [{
|
|
46
|
+
type: Output
|
|
47
|
+
}], moveUp: [{
|
|
48
|
+
type: Output
|
|
49
|
+
}], moveToBottom: [{
|
|
50
|
+
type: Output
|
|
51
|
+
}], moveDown: [{
|
|
52
|
+
type: Output
|
|
36
53
|
}], draggingDisabled: [{
|
|
37
54
|
type: HostBinding,
|
|
38
55
|
args: ['class.draggingDisabled']
|
|
@@ -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,EAAE,uBAAuB,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC
|
|
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,EAAE,uBAAuB,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;;;;;;;AAoB7G,MAAM,OAAO,4BAA4B;IANzC;QAOW,SAAI,GAAG,8BAA8B,CAAC;QAGtC,cAAS,GAAY,IAAI,CAAC;QAMzB,WAAM,GAAG,IAAI,YAAY,EAA8B,CAAC;QACxD,cAAS,GAAG,IAAI,YAAY,EAAE,CAAC;QAC/B,WAAM,GAAG,IAAI,YAAY,EAAE,CAAC;QAC5B,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QAClC,aAAQ,GAAG,IAAI,YAAY,EAAE,CAAC;KASzC;IAPC,IAA2C,gBAAgB;QACzD,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;IACzB,CAAC;IAED,aAAa,CAAC,MAAc,EAAE,MAA6B;QACzD,OAAO,MAAM,CAAC,EAAE,CAAC;IACnB,CAAC;;yHAtBU,4BAA4B;6GAA5B,4BAA4B,kVCpBzC,4vDAuCA;2FDnBa,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;8BAIU,IAAI;sBAAZ,KAAK;gBACG,SAAS;sBAAjB,KAAK;gBAKG,OAAO;sBAAf,KAAK;gBACI,MAAM;sBAAf,MAAM;gBACG,SAAS;sBAAlB,MAAM;gBACG,MAAM;sBAAf,MAAM;gBACG,YAAY;sBAArB,MAAM;gBACG,QAAQ;sBAAjB,MAAM;gBAEoC,gBAAgB;sBAA1D,WAAW;uBAAC,wBAAwB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { moveItemInArray } from '@angular/cdk/drag-drop';
|
|
2
|
-
import { Component, ContentChild, ContentChildren, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import { Component, ContentChild, ContentChildren, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
3
3
|
import { map, startWith } from 'rxjs/operators';
|
|
4
4
|
import { DragAndDropListItemComponent } from './drag-and-drop-list-item/drag-and-drop-list-item.component';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
@@ -13,6 +13,8 @@ export class DragAndDropListComponent {
|
|
|
13
13
|
* Override the global label font weight of 700
|
|
14
14
|
*/
|
|
15
15
|
this.labelFontWeight = 700;
|
|
16
|
+
this.color = 'default';
|
|
17
|
+
this.fontSize = 'normal';
|
|
16
18
|
/**
|
|
17
19
|
* Use the moveToIndex Output in favor of moveItem,
|
|
18
20
|
* when moving is restricted to one item through this.draggableItem.
|
|
@@ -47,12 +49,17 @@ export class DragAndDropListComponent {
|
|
|
47
49
|
this.moveToIndex.emit(event.currentIndex);
|
|
48
50
|
this.moveItem.emit({ item: event.item.data, index: event.currentIndex });
|
|
49
51
|
}
|
|
52
|
+
dropToIndex(item, previousIndex, currentIndex) {
|
|
53
|
+
moveItemInArray(this._items.toArray(), previousIndex, currentIndex);
|
|
54
|
+
this.moveToIndex.emit(currentIndex);
|
|
55
|
+
this.moveItem.emit({ item, index: currentIndex });
|
|
56
|
+
}
|
|
50
57
|
trackById(_index, item) {
|
|
51
58
|
return item[this.itemIdProperty];
|
|
52
59
|
}
|
|
53
60
|
}
|
|
54
61
|
DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
55
|
-
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", items: "items", itemIdProperty: "itemIdProperty" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngIf=\"items; else contentChildList\">\n <li\n *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"item[itemIdProperty!]\"\n >\n <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n </li>\n </ng-container>\n <ng-template #contentChildList>\n <li\n *ngFor=\"let itemComponent of items$ | async\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\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 ></lx-drag-and-drop-list-item>\n </li>\n </ng-template>\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%;
|
|
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", items: "items", itemIdProperty: "itemIdProperty", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngIf=\"items; else contentChildList\">\n <li\n *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"item[itemIdProperty!]\"\n >\n <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n </li>\n </ng-container>\n <ng-template #contentChildList>\n <li\n *ngFor=\"let itemComponent of items$ | async; let i = index; let length = count\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\n [class.gray]=\"color === 'gray'\"\n [class.big]=\"fontSize === 'big'\"\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 (moveToTop)=\"dropToIndex(itemComponent.item, i, 0)\"\n (moveUp)=\"dropToIndex(itemComponent.item, i, i - 1)\"\n (moveDown)=\"dropToIndex(itemComponent.item, i, i + 1)\"\n (moveToBottom)=\"dropToIndex(itemComponent.item, i, length)\"\n ></lx-drag-and-drop-list-item>\n </li>\n </ng-template>\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{cursor:move;border:1px solid #99a5bb;margin-bottom:4px;border-radius:3px}.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=gray] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=gray] .item,:host[color=gray] .list{border:0}:host[color=gray] .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.gray{border:0!important}.cdk-drag-preview.gray lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}"], components: [{ type: i1.DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action", "moveToTop", "moveUp", "moveToBottom", "moveDown"] }], 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: 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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
|
|
56
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
|
57
64
|
type: Component,
|
|
58
65
|
args: [{
|
|
@@ -68,6 +75,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
68
75
|
type: Input
|
|
69
76
|
}], itemIdProperty: [{
|
|
70
77
|
type: Input
|
|
78
|
+
}], color: [{
|
|
79
|
+
type: Input
|
|
80
|
+
}, {
|
|
81
|
+
type: HostBinding,
|
|
82
|
+
args: ['attr.color']
|
|
83
|
+
}], fontSize: [{
|
|
84
|
+
type: Input
|
|
85
|
+
}, {
|
|
86
|
+
type: HostBinding,
|
|
87
|
+
args: ['attr.fontSize']
|
|
71
88
|
}], moveToIndex: [{
|
|
72
89
|
type: Output
|
|
73
90
|
}], moveItem: [{
|
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,EAEL,SAAS,EACT,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,KAAK,EAEL,MAAM,EAGP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAA8B,4BAA4B,EAAE,MAAM,6DAA6D,CAAC;;;;;AAYvI,MAAM,OAAO,wBAAwB;IALrC;QAMW,SAAI,GAAG,0BAA0B,CAAC;QAQ3C;;WAEG;QACM,oBAAe,GAAY,GAAG,CAAC;
|
|
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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"}
|
|
@@ -2981,6 +2981,10 @@ class DragAndDropListItemComponent {
|
|
|
2981
2981
|
this.NAME = 'DragAndDropListItemComponent';
|
|
2982
2982
|
this.draggable = true;
|
|
2983
2983
|
this.action = new EventEmitter();
|
|
2984
|
+
this.moveToTop = new EventEmitter();
|
|
2985
|
+
this.moveUp = new EventEmitter();
|
|
2986
|
+
this.moveToBottom = new EventEmitter();
|
|
2987
|
+
this.moveDown = new EventEmitter();
|
|
2984
2988
|
}
|
|
2985
2989
|
get draggingDisabled() {
|
|
2986
2990
|
return !this.draggable;
|
|
@@ -2990,7 +2994,7 @@ class DragAndDropListItemComponent {
|
|
|
2990
2994
|
}
|
|
2991
2995
|
}
|
|
2992
2996
|
DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2993
|
-
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" } }, ngImport: i0, template: "<
|
|
2997
|
+
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", moveToTop: "moveToTop", moveUp: "moveUp", moveToBottom: "moveToBottom", moveDown: "moveDown" }, host: { properties: { "class.draggingDisabled": "this.draggingDisabled" } }, ngImport: i0, template: "<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\n <lx-cdk-options-dropdown *ngIf=\"draggable\">\n <button lx-button [square]=\"true\" mode=\"ghost\" size=\"small\" lxKeyboardActionSource class=\"moreButton far fa-ellipsis-v\"></button>\n <lx-option-group>\n <lx-option [hasSelectedState]=\"false\" (select)=\"moveToTop.emit()\">\n <i class=\"far fa-fw fa-arrow-to-top\"></i>{{ NAME + '.moveToTop' | translate }}\n </lx-option>\n <lx-option [hasSelectedState]=\"false\" (select)=\"moveUp.emit()\">\n <i class=\"far fa-fw fa-arrow-up\"></i>{{ NAME + '.moveUp' | translate }}\n </lx-option>\n <lx-option [hasSelectedState]=\"false\" (select)=\"moveDown.emit()\">\n <i class=\"far fa-fw fa-arrow-down\"></i>{{ NAME + '.moveDown' | translate }}\n </lx-option>\n <lx-option [hasSelectedState]=\"false\" (select)=\"moveToBottom.emit()\">\n <i class=\"far fa-fw fa-arrow-down\"></i>{{ NAME + '.moveToBottom' | translate }}\n </lx-option>\n </lx-option-group>\n </lx-cdk-options-dropdown>\n</div>\n", styles: [":host{padding:6px 8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff}:host.draggingDisabled{background:#eaedf1}:host:hover .show-on-hover-button{opacity:1}.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: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }, { type: CdkOptionsDropdownComponent, selector: "lx-cdk-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight"] }, { type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }], pipes: { "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2994
2998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
|
|
2995
2999
|
type: Component,
|
|
2996
3000
|
args: [{
|
|
@@ -3007,6 +3011,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
3007
3011
|
type: Input
|
|
3008
3012
|
}], action: [{
|
|
3009
3013
|
type: Output
|
|
3014
|
+
}], moveToTop: [{
|
|
3015
|
+
type: Output
|
|
3016
|
+
}], moveUp: [{
|
|
3017
|
+
type: Output
|
|
3018
|
+
}], moveToBottom: [{
|
|
3019
|
+
type: Output
|
|
3020
|
+
}], moveDown: [{
|
|
3021
|
+
type: Output
|
|
3010
3022
|
}], draggingDisabled: [{
|
|
3011
3023
|
type: HostBinding,
|
|
3012
3024
|
args: ['class.draggingDisabled']
|
|
@@ -3019,6 +3031,8 @@ class DragAndDropListComponent {
|
|
|
3019
3031
|
* Override the global label font weight of 700
|
|
3020
3032
|
*/
|
|
3021
3033
|
this.labelFontWeight = 700;
|
|
3034
|
+
this.color = 'default';
|
|
3035
|
+
this.fontSize = 'normal';
|
|
3022
3036
|
/**
|
|
3023
3037
|
* Use the moveToIndex Output in favor of moveItem,
|
|
3024
3038
|
* when moving is restricted to one item through this.draggableItem.
|
|
@@ -3053,12 +3067,17 @@ class DragAndDropListComponent {
|
|
|
3053
3067
|
this.moveToIndex.emit(event.currentIndex);
|
|
3054
3068
|
this.moveItem.emit({ item: event.item.data, index: event.currentIndex });
|
|
3055
3069
|
}
|
|
3070
|
+
dropToIndex(item, previousIndex, currentIndex) {
|
|
3071
|
+
moveItemInArray(this._items.toArray(), previousIndex, currentIndex);
|
|
3072
|
+
this.moveToIndex.emit(currentIndex);
|
|
3073
|
+
this.moveItem.emit({ item, index: currentIndex });
|
|
3074
|
+
}
|
|
3056
3075
|
trackById(_index, item) {
|
|
3057
3076
|
return item[this.itemIdProperty];
|
|
3058
3077
|
}
|
|
3059
3078
|
}
|
|
3060
3079
|
DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3061
|
-
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", items: "items", itemIdProperty: "itemIdProperty" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngIf=\"items; else contentChildList\">\n <li\n *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"item[itemIdProperty!]\"\n >\n <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n </li>\n </ng-container>\n <ng-template #contentChildList>\n <li\n *ngFor=\"let itemComponent of items$ | async\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\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 ></lx-drag-and-drop-list-item>\n </li>\n </ng-template>\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%;
|
|
3080
|
+
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", items: "items", itemIdProperty: "itemIdProperty", color: "color", fontSize: "fontSize" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, host: { properties: { "attr.color": "this.color", "attr.fontSize": "this.fontSize" } }, queries: [{ propertyName: "itemTemplateRef", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "_items", predicate: DragAndDropListItemComponent }], ngImport: i0, template: "<label *ngIf=\"label\" [style.font-weight]=\"labelFontWeight\">{{ label }}</label>\n<ul cdkDropList class=\"list\" [cdkDropListData]=\"items$ | async\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngIf=\"items; else contentChildList\">\n <li\n *ngFor=\"let item of items; let index = index; trackBy: trackById\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"item[itemIdProperty!]\"\n >\n <ng-container *ngTemplateOutlet=\"itemTemplateRef; context: { $implicit: item, index: index }\"></ng-container>\n </li>\n </ng-container>\n <ng-template #contentChildList>\n <li\n *ngFor=\"let itemComponent of items$ | async; let i = index; let length = count\"\n class=\"item\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n [cdkDragData]=\"itemComponent.item\"\n [cdkDragDisabled]=\"!itemComponent.draggable\"\n [class.gray]=\"color === 'gray'\"\n [class.big]=\"fontSize === 'big'\"\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 (moveToTop)=\"dropToIndex(itemComponent.item, i, 0)\"\n (moveUp)=\"dropToIndex(itemComponent.item, i, i - 1)\"\n (moveDown)=\"dropToIndex(itemComponent.item, i, i + 1)\"\n (moveToBottom)=\"dropToIndex(itemComponent.item, i, length)\"\n ></lx-drag-and-drop-list-item>\n </li>\n </ng-template>\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{cursor:move;border:1px solid #99a5bb;margin-bottom:4px;border-radius:3px}.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=gray] lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}:host[color=gray] .item,:host[color=gray] .list{border:0}:host[color=gray] .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.gray{border:0!important}.cdk-drag-preview.gray lx-drag-and-drop-list-item{background-color:#f0f2f5;color:#526179;border-radius:3px}.cdk-drag-preview.big{text-transform:uppercase;font-weight:700}"], components: [{ type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action", "moveToTop", "moveUp", "moveToBottom", "moveDown"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$2.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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe } });
|
|
3062
3081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
|
3063
3082
|
type: Component,
|
|
3064
3083
|
args: [{
|
|
@@ -3074,6 +3093,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
3074
3093
|
type: Input
|
|
3075
3094
|
}], itemIdProperty: [{
|
|
3076
3095
|
type: Input
|
|
3096
|
+
}], color: [{
|
|
3097
|
+
type: Input
|
|
3098
|
+
}, {
|
|
3099
|
+
type: HostBinding,
|
|
3100
|
+
args: ['attr.color']
|
|
3101
|
+
}], fontSize: [{
|
|
3102
|
+
type: Input
|
|
3103
|
+
}, {
|
|
3104
|
+
type: HostBinding,
|
|
3105
|
+
args: ['attr.fontSize']
|
|
3077
3106
|
}], moveToIndex: [{
|
|
3078
3107
|
type: Output
|
|
3079
3108
|
}], moveItem: [{
|