@leanix/components 0.2.222 → 0.2.225

package/bundles/leanix-components.umd.js

@@ -3551,6 +3551,8 @@
              * Override the global label font weight of 700
              */
             this.labelFontWeight = 700;
+            this.color = 'default';
+            this.fontSize = 'normal';
             /**
              * Use the moveToIndex Output in favor of moveItem,
              * when moving is restricted to one item through this.draggableItem.
@@ -3596,7 +3598,7 @@
         return DragAndDropListComponent;
     }());
     DragAndDropListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    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; 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%;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 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}"], components: [{ type: DragAndDropListItemComponent, selector: "lx-drag-and-drop-list-item", inputs: ["item", "draggable", "actions"], outputs: ["action", "moveToTop", "moveUp", "moveToBottom", "moveDown"] }], 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 } });
+    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", 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__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; 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__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 } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.4", ngImport: i0__namespace, type: DragAndDropListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3612,6 +3614,16 @@
                     type: i0.Input
                 }], itemIdProperty: [{
                     type: i0.Input
+                }], color: [{
+                    type: i0.Input
+                }, {
+                    type: i0.HostBinding,
+                    args: ['attr.color']
+                }], fontSize: [{
+                    type: i0.Input
+                }, {
+                    type: i0.HostBinding,
+                    args: ['attr.fontSize']
                 }], moveToIndex: [{
                     type: i0.Output
                 }], moveItem: [{