@leanix/components 0.2.80 → 0.2.84
Sign up to get free protection for your applications and to get access to all the features.
- package/bundles/leanix-components.umd.js +18 -1
- package/bundles/leanix-components.umd.js.map +1 -1
- package/esm2015/lib/core-ui/annotations/required.js +1 -0
- package/esm2015/lib/core-ui/annotations/required.js.map +1 -1
- package/esm2015/lib/core-ui/pipes/lx-translate.pipe.js.map +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/esm2015/lib/shared/observe.js +1 -0
- package/esm2015/lib/shared/observe.js.map +1 -1
- package/fesm2015/leanix-components.js +18 -1
- package/fesm2015/leanix-components.js.map +1 -1
- package/lib/core-ui/pipes/lx-translate.pipe.d.ts +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
|
@@ -1991,6 +1991,7 @@
|
|
|
1991
1991
|
*
|
|
1992
1992
|
* @see https://stackoverflow.com/questions/35528395/make-directive-input-required
|
|
1993
1993
|
*/
|
|
1994
|
+
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
1994
1995
|
function Required(target, propertyKey) {
|
|
1995
1996
|
Object.defineProperty(target, propertyKey, {
|
|
1996
1997
|
get: function () {
|
|
@@ -2888,6 +2889,7 @@
|
|
|
2888
2889
|
* @Observe('foo') foo$: Observable<string>;
|
|
2889
2890
|
*/
|
|
2890
2891
|
function Observe(observedKey) {
|
|
2892
|
+
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
2891
2893
|
return function (target, key) {
|
|
2892
2894
|
var subjects = new WeakMap();
|
|
2893
2895
|
var getSubject = function (instance) {
|
|
@@ -3542,6 +3544,11 @@
|
|
|
3542
3544
|
this.moveToIndex = new i0.EventEmitter();
|
|
3543
3545
|
this.moveItem = new i0.EventEmitter();
|
|
3544
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
|
+
};
|
|
3545
3552
|
DragAndDropListComponent.prototype.ngAfterContentInit = function () {
|
|
3546
3553
|
this.items$ = this._items.changes.pipe(operators.startWith(this._items), operators.map(function (items) { return items.toArray(); }));
|
|
3547
3554
|
};
|
|
@@ -3563,10 +3570,13 @@
|
|
|
3563
3570
|
this.moveToIndex.emit(event.currentIndex);
|
|
3564
3571
|
this.moveItem.emit({ item: event.item.data, index: event.currentIndex });
|
|
3565
3572
|
};
|
|
3573
|
+
DragAndDropListComponent.prototype.trackById = function (_index, item) {
|
|
3574
|
+
return item[this.itemIdProperty];
|
|
3575
|
+
};
|
|
3566
3576
|
return DragAndDropListComponent;
|
|
3567
3577
|
}());
|
|
3568
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 });
|
|
3569
|
-
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:first-child .dragAndDropItem{border-top-left-radius:3px;border-top-right-radius:3px}.item:last-child .dragAndDropItem{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 } });
|
|
3570
3580
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, decorators: [{
|
|
3571
3581
|
type: i0.Component,
|
|
3572
3582
|
args: [{
|
|
@@ -3578,6 +3588,10 @@
|
|
|
3578
3588
|
type: i0.Input
|
|
3579
3589
|
}], labelFontWeight: [{
|
|
3580
3590
|
type: i0.Input
|
|
3591
|
+
}], items: [{
|
|
3592
|
+
type: i0.Input
|
|
3593
|
+
}], itemIdProperty: [{
|
|
3594
|
+
type: i0.Input
|
|
3581
3595
|
}], moveToIndex: [{
|
|
3582
3596
|
type: i0.Output
|
|
3583
3597
|
}], moveItem: [{
|
|
@@ -3585,6 +3599,9 @@
|
|
|
3585
3599
|
}], _items: [{
|
|
3586
3600
|
type: i0.ContentChildren,
|
|
3587
3601
|
args: [DragAndDropListItemComponent]
|
|
3602
|
+
}], itemTemplateRef: [{
|
|
3603
|
+
type: i0.ContentChild,
|
|
3604
|
+
args: ['itemTemplate']
|
|
3588
3605
|
}] } });
|
|
3589
3606
|
|
|
3590
3607
|
var FormErrorComponent = /** @class */ (function () {
|