@leanix/components 0.2.83 → 0.2.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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
|
@@ -3508,7 +3508,7 @@
|
|
|
3508
3508
|
return DragAndDropListItemComponent;
|
|
3509
3509
|
}());
|
|
3510
3510
|
DragAndDropListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3511
|
-
DragAndDropListItemComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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;
|
|
3511
|
+
DragAndDropListItemComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
|
|
3512
3512
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListItemComponent, decorators: [{
|
|
3513
3513
|
type: i0.Component,
|
|
3514
3514
|
args: [{
|
|
@@ -3544,6 +3544,11 @@
|
|
|
3544
3544
|
this.moveToIndex = new i0.EventEmitter();
|
|
3545
3545
|
this.moveItem = new i0.EventEmitter();
|
|
3546
3546
|
}
|
|
3547
|
+
DragAndDropListComponent.prototype.ngOnInit = function () {
|
|
3548
|
+
if (this.items && !this.itemIdProperty) {
|
|
3549
|
+
throw new Error('Cannot pass drag and drop items without defining the id property');
|
|
3550
|
+
}
|
|
3551
|
+
};
|
|
3547
3552
|
DragAndDropListComponent.prototype.ngAfterContentInit = function () {
|
|
3548
3553
|
this.items$ = this._items.changes.pipe(operators.startWith(this._items), operators.map(function (items) { return items.toArray(); }));
|
|
3549
3554
|
};
|
|
@@ -3565,10 +3570,13 @@
|
|
|
3565
3570
|
this.moveToIndex.emit(event.currentIndex);
|
|
3566
3571
|
this.moveItem.emit({ item: event.item.data, index: event.currentIndex });
|
|
3567
3572
|
};
|
|
3573
|
+
DragAndDropListComponent.prototype.trackById = function (_index, item) {
|
|
3574
|
+
return item[this.itemIdProperty];
|
|
3575
|
+
};
|
|
3568
3576
|
return DragAndDropListComponent;
|
|
3569
3577
|
}());
|
|
3570
3578
|
DragAndDropListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3571
|
-
DragAndDropListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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
|
|
3579
|
+
DragAndDropListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$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__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace.AsyncPipe } });
|
|
3572
3580
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, decorators: [{
|
|
3573
3581
|
type: i0.Component,
|
|
3574
3582
|
args: [{
|
|
@@ -3580,6 +3588,10 @@
|
|
|
3580
3588
|
type: i0.Input
|
|
3581
3589
|
}], labelFontWeight: [{
|
|
3582
3590
|
type: i0.Input
|
|
3591
|
+
}], items: [{
|
|
3592
|
+
type: i0.Input
|
|
3593
|
+
}], itemIdProperty: [{
|
|
3594
|
+
type: i0.Input
|
|
3583
3595
|
}], moveToIndex: [{
|
|
3584
3596
|
type: i0.Output
|
|
3585
3597
|
}], moveItem: [{
|
|
@@ -3587,6 +3599,9 @@
|
|
|
3587
3599
|
}], _items: [{
|
|
3588
3600
|
type: i0.ContentChildren,
|
|
3589
3601
|
args: [DragAndDropListItemComponent]
|
|
3602
|
+
}], itemTemplateRef: [{
|
|
3603
|
+
type: i0.ContentChild,
|
|
3604
|
+
args: ['itemTemplate']
|
|
3590
3605
|
}] } });
|
|
3591
3606
|
|
|
3592
3607
|
var FormErrorComponent = /** @class */ (function () {
|