@leanix/components 0.2.222 → 0.2.225
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +13 -1
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.js +14 -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 +13 -1
- package/fesm2015/leanix-components.js.map +1 -1
- package/lib/forms-ui/components/drag-and-drop-list/drag-and-drop-list.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -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.
|
|
@@ -57,7 +59,7 @@ export class DragAndDropListComponent {
|
|
|
57
59
|
}
|
|
58
60
|
}
|
|
59
61
|
DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
60
|
-
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; let i = index; let length = count\"\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 (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%;
|
|
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 } });
|
|
61
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
|
62
64
|
type: Component,
|
|
63
65
|
args: [{
|
|
@@ -73,6 +75,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
73
75
|
type: Input
|
|
74
76
|
}], itemIdProperty: [{
|
|
75
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']
|
|
76
88
|
}], moveToIndex: [{
|
|
77
89
|
type: Output
|
|
78
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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"}
|
|
@@ -3031,6 +3031,8 @@ class DragAndDropListComponent {
|
|
|
3031
3031
|
* Override the global label font weight of 700
|
|
3032
3032
|
*/
|
|
3033
3033
|
this.labelFontWeight = 700;
|
|
3034
|
+
this.color = 'default';
|
|
3035
|
+
this.fontSize = 'normal';
|
|
3034
3036
|
/**
|
|
3035
3037
|
* Use the moveToIndex Output in favor of moveItem,
|
|
3036
3038
|
* when moving is restricted to one item through this.draggableItem.
|
|
@@ -3075,7 +3077,7 @@ class DragAndDropListComponent {
|
|
|
3075
3077
|
}
|
|
3076
3078
|
}
|
|
3077
3079
|
DragAndDropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3078
|
-
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; let i = index; let length = count\"\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 (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%;
|
|
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 } });
|
|
3079
3081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0, type: DragAndDropListComponent, decorators: [{
|
|
3080
3082
|
type: Component,
|
|
3081
3083
|
args: [{
|
|
@@ -3091,6 +3093,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImpor
|
|
|
3091
3093
|
type: Input
|
|
3092
3094
|
}], itemIdProperty: [{
|
|
3093
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']
|
|
3094
3106
|
}], moveToIndex: [{
|
|
3095
3107
|
type: Output
|
|
3096
3108
|
}], moveItem: [{
|