@leanix/components 0.2.83 → 0.2.87
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +17 -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 +1 -1
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js +17 -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 +17 -2
- package/fesm2015/leanix-components.js.map +1 -1
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +14 -3
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@ export class DragAndDropListItemComponent {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
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: "<ng-container *ngIf=\"!actions; else itemWithActions\">\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n <i *ngIf=\"draggable\" class=\"far fa-bars\"></i>\n</ng-container>\n<ng-template #itemWithActions>\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=\"action-buttons-wrapper\">\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 mode=\"ghost\"\n size=\"auto\"\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</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{padding:8px;
|
|
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: "<ng-container *ngIf=\"!actions; else itemWithActions\">\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n <i *ngIf=\"draggable\" class=\"far fa-bars\"></i>\n</ng-container>\n<ng-template #itemWithActions>\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=\"action-buttons-wrapper\">\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 mode=\"ghost\"\n size=\"auto\"\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</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{padding: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{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}.action-button{width:20px}"], components: [{ type: i1.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { moveItemInArray } from '@angular/cdk/drag-drop';
|
|
2
|
-
import { Component, ContentChildren, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import { Component, ContentChild, ContentChildren, EventEmitter, 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";
|
|
@@ -20,6 +20,11 @@ export class DragAndDropListComponent {
|
|
|
20
20
|
this.moveToIndex = new EventEmitter();
|
|
21
21
|
this.moveItem = new EventEmitter();
|
|
22
22
|
}
|
|
23
|
+
ngOnInit() {
|
|
24
|
+
if (this.items && !this.itemIdProperty) {
|
|
25
|
+
throw new Error('Cannot pass drag and drop items without defining the id property');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
23
28
|
ngAfterContentInit() {
|
|
24
29
|
this.items$ = this._items.changes.pipe(startWith(this._items), map((items) => items.toArray()));
|
|
25
30
|
}
|
|
@@ -41,9 +46,12 @@ export class DragAndDropListComponent {
|
|
|
41
46
|
this.moveToIndex.emit(event.currentIndex);
|
|
42
47
|
this.moveItem.emit({ item: event.item.data, index: event.currentIndex });
|
|
43
48
|
}
|
|
49
|
+
trackById(_index, item) {
|
|
50
|
+
return item[this.itemIdProperty];
|
|
51
|
+
}
|
|
44
52
|
}
|
|
45
53
|
DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
46
|
-
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" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, queries: [{ 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 <li\n *ngFor=\"let itemComponent of items$ | async\"\n
|
|
54
|
+
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: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}@-webkit-keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@-webkit-keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@-webkit-keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}:host{display:block}.list{list-style-type:none;width:100%;border:1px solid #99a5bb;display:block;border-radius:3px;padding:0;color:#526179;background:#fff}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{cursor:move;border-bottom:1px solid #99a5bb}.item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.item:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:0}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px rgba(116,116,116,.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}"], 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: 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 } });
|
|
47
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
|
48
56
|
type: Component,
|
|
49
57
|
args: [{
|
|
@@ -55,6 +63,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
55
63
|
type: Input
|
|
56
64
|
}], labelFontWeight: [{
|
|
57
65
|
type: Input
|
|
66
|
+
}], items: [{
|
|
67
|
+
type: Input
|
|
68
|
+
}], itemIdProperty: [{
|
|
69
|
+
type: Input
|
|
58
70
|
}], moveToIndex: [{
|
|
59
71
|
type: Output
|
|
60
72
|
}], moveItem: [{
|
|
@@ -62,5 +74,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
62
74
|
}], _items: [{
|
|
63
75
|
type: ContentChildren,
|
|
64
76
|
args: [DragAndDropListItemComponent]
|
|
77
|
+
}], itemTemplateRef: [{
|
|
78
|
+
type: ContentChild,
|
|
79
|
+
args: ['itemTemplate']
|
|
65
80
|
}] } });
|
|
66
81
|
//# 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":"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;QAUxC;;;WAGG;QACO,gBAAW,GAAG,IAAI,YAAY,EAAU,CAAC;QACzC,aAAQ,GAAG,IAAI,YAAY,EAA4B,CAAC;KAwCnE;IAnCC,QAAQ;QACN,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;YACtC,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;SACrF;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CACpC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EACtB,GAAG,CAAC,CAAC,KAA8C,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CACzE,CAAC;IACJ,CAAC;IAED,sBAAsB,CAAC,MAAkC;;QACvD,MAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,0CAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/F,CAAC;IAED;;;;;;;;OAQG;IACH,IAAI,CAAC,KAA4B;QAC/B,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;QAC/E,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC;IAC3E,CAAC;IAED,SAAS,CAAC,MAAc,EAAE,IAAS;QACjC,OAAO,IAAI,CAAC,IAAI,CAAC,cAAe,CAAC,CAAC;IACpC,CAAC;;qHAlEU,wBAAwB;yGAAxB,wBAAwB,uWA6BlB,4BAA4B,6BCxD/C,mrCAgCA;2FDLa,wBAAwB;kBALpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,WAAW,EAAE,mCAAmC;oBAChD,SAAS,EAAE,CAAC,mCAAmC,CAAC;iBACjD;8BASU,KAAK;sBAAb,KAAK;gBAIG,eAAe;sBAAvB,KAAK;gBAOG,KAAK;sBAAb,KAAK;gBACG,cAAc;sBAAtB,KAAK;gBAMI,WAAW;sBAApB,MAAM;gBACG,QAAQ;sBAAjB,MAAM;gBAEgD,MAAM;sBAA5D,eAAe;uBAAC,4BAA4B;gBACf,eAAe;sBAA5C,YAAY;uBAAC,cAAc"}
|
|
@@ -2989,7 +2989,7 @@ class DragAndDropListItemComponent {
|
|
|
2989
2989
|
}
|
|
2990
2990
|
}
|
|
2991
2991
|
DragAndDropListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2992
|
-
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: "<ng-container *ngIf=\"!actions; else itemWithActions\">\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n <i *ngIf=\"draggable\" class=\"far fa-bars\"></i>\n</ng-container>\n<ng-template #itemWithActions>\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=\"action-buttons-wrapper\">\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 mode=\"ghost\"\n size=\"auto\"\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</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{padding:8px;
|
|
2992
|
+
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: "<ng-container *ngIf=\"!actions; else itemWithActions\">\n <span [attr.title]=\"item\" class=\"itemWrapperForTruncation truncate\">{{ item }}</span>\n <i *ngIf=\"draggable\" class=\"far fa-bars\"></i>\n</ng-container>\n<ng-template #itemWithActions>\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=\"action-buttons-wrapper\">\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 mode=\"ghost\"\n size=\"auto\"\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</ng-template>\n", styles: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}:host{padding: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{display:flex;flex-direction:row;flex-wrap:nowrap}.show-on-hover-button{opacity:0}.show-on-hover-button:focus{opacity:1}.action-button{width:20px}"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2993
2993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListItemComponent, decorators: [{
|
|
2994
2994
|
type: Component,
|
|
2995
2995
|
args: [{
|
|
@@ -3025,6 +3025,11 @@ class DragAndDropListComponent {
|
|
|
3025
3025
|
this.moveToIndex = new EventEmitter();
|
|
3026
3026
|
this.moveItem = new EventEmitter();
|
|
3027
3027
|
}
|
|
3028
|
+
ngOnInit() {
|
|
3029
|
+
if (this.items && !this.itemIdProperty) {
|
|
3030
|
+
throw new Error('Cannot pass drag and drop items without defining the id property');
|
|
3031
|
+
}
|
|
3032
|
+
}
|
|
3028
3033
|
ngAfterContentInit() {
|
|
3029
3034
|
this.items$ = this._items.changes.pipe(startWith(this._items), map((items) => items.toArray()));
|
|
3030
3035
|
}
|
|
@@ -3046,9 +3051,12 @@ class DragAndDropListComponent {
|
|
|
3046
3051
|
this.moveToIndex.emit(event.currentIndex);
|
|
3047
3052
|
this.moveItem.emit({ item: event.item.data, index: event.currentIndex });
|
|
3048
3053
|
}
|
|
3054
|
+
trackById(_index, item) {
|
|
3055
|
+
return item[this.itemIdProperty];
|
|
3056
|
+
}
|
|
3049
3057
|
}
|
|
3050
3058
|
DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3051
|
-
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" }, outputs: { moveToIndex: "moveToIndex", moveItem: "moveItem" }, queries: [{ 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 <li\n *ngFor=\"let itemComponent of items$ | async\"\n
|
|
3059
|
+
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: [":root{--lx-color-danger:#f96464;--lx-color-grey80:#c2c9d6;--lx-color-grey90:#e1e5eb}@-webkit-keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@keyframes spinOnceFadeInKeyFrames{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(-180deg)}}@-webkit-keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@keyframes spinOnceFadeOutKeyFrames{0%{opacity:1;transform:rotate(-180deg)}to{opacity:0;transform:rotate(0deg)}}@-webkit-keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpKeyFrames{0%{transform:translateY(10px);opacity:0}20%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}:host{display:block}.list{list-style-type:none;width:100%;border:1px solid #99a5bb;display:block;border-radius:3px;padding:0;color:#526179;background:#fff}.item.cdk-drag-disabled{background:#eaedf1;cursor:default}.item{cursor:move;border-bottom:1px solid #99a5bb}.item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.item:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:0}.cdk-drag-preview{box-sizing:border-box;border-radius:3px;list-style:none;border:1px solid #99a5bb!important;box-shadow:0 3px 4px rgba(116,116,116,.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}"], components: [{ type: 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$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 } });
|
|
3052
3060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
|
3053
3061
|
type: Component,
|
|
3054
3062
|
args: [{
|
|
@@ -3060,6 +3068,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
3060
3068
|
type: Input
|
|
3061
3069
|
}], labelFontWeight: [{
|
|
3062
3070
|
type: Input
|
|
3071
|
+
}], items: [{
|
|
3072
|
+
type: Input
|
|
3073
|
+
}], itemIdProperty: [{
|
|
3074
|
+
type: Input
|
|
3063
3075
|
}], moveToIndex: [{
|
|
3064
3076
|
type: Output
|
|
3065
3077
|
}], moveItem: [{
|
|
@@ -3067,6 +3079,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
3067
3079
|
}], _items: [{
|
|
3068
3080
|
type: ContentChildren,
|
|
3069
3081
|
args: [DragAndDropListItemComponent]
|
|
3082
|
+
}], itemTemplateRef: [{
|
|
3083
|
+
type: ContentChild,
|
|
3084
|
+
args: ['itemTemplate']
|
|
3070
3085
|
}] } });
|
|
3071
3086
|
|
|
3072
3087
|
class FormErrorComponent {
|