@pepperi-addons/ngx-lib 0.3.9-beta.3 → 0.3.9-beta.4

package/bundles/pepperi-addons-ngx-lib-draggable-items.umd.js

@@ -1,21 +1,11 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/button'), require('@pepperi-addons/ngx-lib/search'), require('@angular/cdk/drag-drop'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/draggable-items', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/button', '@pepperi-addons/ngx-lib/search', '@angular/cdk/drag-drop', 'rxjs', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['draggable-items'] = {}), global.ng.core, global.ng.common, global.ng.forms, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].button, global['pepperi-addons']['ngx-lib'].search, global.ng.cdk.dragDrop, global.rxjs, global.rxjs.operators));
-}(this, (function (exports, core, common, forms, ngxLib, button, search, dragDrop, rxjs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/button'), require('@pepperi-addons/ngx-lib/search'), require('@angular/cdk/drag-drop'), require('rxjs'), require('rxjs/operators'), require('@pepperi-addons/ngx-lib/icon')) :
+    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/draggable-items', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/button', '@pepperi-addons/ngx-lib/search', '@angular/cdk/drag-drop', 'rxjs', 'rxjs/operators', '@pepperi-addons/ngx-lib/icon'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['draggable-items'] = {}), global.ng.core, global.ng.common, global.ng.forms, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].button, global['pepperi-addons']['ngx-lib'].search, global.ng.cdk.dragDrop, global.rxjs, global.rxjs.operators, global['pepperi-addons']['ngx-lib'].icon));
+}(this, (function (exports, core, common, forms, ngxLib, button, search, dragDrop, rxjs, operators, icon) { 'use strict';
 
     var DraggableItemComponent = /** @class */ (function () {
-        // private _isDraggable = false;
-        // @Input()
-        // set isDraggable(value: boolean) {
-        //     this._isDraggable = value;
-        //     this._cursor = value ? 'move' : 'inherit'
-        // }
-        // get isDraggable(): boolean {
-        //     return this._isDraggable;
-        // }
         function DraggableItemComponent() {
-            this._cursor = 'move';
             this.title = '';
             this.disabled = false;
             //
@@ -28,13 +18,12 @@
     DraggableItemComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-draggable-item',
-                    template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>",
-                    styles: [":host{display:block;cursor:-webkit-grab;cursor:grab}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]
+                    template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>",
+                    styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]
                 },] }
     ];
     DraggableItemComponent.ctorParameters = function () { return []; };
     DraggableItemComponent.propDecorators = {
-        _cursor: [{ type: core.HostBinding, args: ['style.cursor',] }],
         title: [{ type: core.Input }],
         data: [{ type: core.Input }],
         disabled: [{ type: core.Input }]
@@ -42,16 +31,17 @@
 
     var DraggableItemsComponent = /** @class */ (function () {
         function DraggableItemsComponent() {
-            this.showTitle = false;
             this.showSearch = false;
             this.title = '';
+            this.titleType = 'regular';
             this.allowMultiple = '';
-            this.listConnectedTo = [];
+            this.itemPlaceholderType = 'none';
+            this.dropAreaIds = [];
             this._items = [];
             this.itemDragStarted = new core.EventEmitter();
             this.itemDragEnded = new core.EventEmitter();
             this.searchControl = new forms.FormControl();
-            this.numberItemsToShowSearch = 10;
+            this.numberItemsToShowSearch = 3;
             //
             this._destroyed = new rxjs.Subject();
         }
@@ -77,6 +67,14 @@
             return this.items.filter(function (opt) { return opt.title &&
                 opt.title.toLowerCase().includes(filterValue.toLowerCase()); });
         };
+        DraggableItemsComponent.prototype.changeCursorOnDragStart = function () {
+            document.body.classList.add('inheritCursors');
+            document.body.style.cursor = 'grabbing';
+        };
+        DraggableItemsComponent.prototype.changeCursorOnDragEnd = function () {
+            document.body.classList.remove('inheritCursors');
+            document.body.style.cursor = 'unset';
+        };
         DraggableItemsComponent.prototype.getDestroyer = function () {
             return operators.takeUntil(this._destroyed);
         };
@@ -94,9 +92,11 @@
             this._destroyed.complete();
         };
         DraggableItemsComponent.prototype.onDragStart = function (event) {
+            this.changeCursorOnDragStart();
             this.itemDragStarted.emit(event);
         };
         DraggableItemsComponent.prototype.onDragEnd = function (event) {
+            this.changeCursorOnDragEnd();
             this.itemDragEnded.emit(event);
         };
         return DraggableItemsComponent;
@@ -104,24 +104,29 @@
     DraggableItemsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-draggable-items',
-                    template: "<div class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"items\"\r\n    [cdkDropListConnectedTo]=\"listConnectedTo\">\r\n\r\n    <div *ngIf=\"showTitle\">\r\n        Title {{ title }}\r\n\r\n        <div *ngIf=\"showSearch\" [ngClass]=\"{ 'pep-spacing-element': showSearch }\">\r\n            <pep-search *ngIf=\"items?.length > numberItemsToShowSearch\" [searchControl]=\"searchControl\"\r\n                [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\r\n        </div>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" cdkDrag style=\"cursor: grab;\" [cdkDragData]=\"item.data\"\r\n        (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n    </pep-draggable-item>\r\n</div>",
-                    styles: [""]
+                    template: "<div id=\"test\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"body-xl bold ellipsis\">{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" sizeType=\"sm\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\" [shrinkInSmallScreen]=\"true\"></pep-search>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n        [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n\r\n        <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n            <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n        </ng-container>\r\n    </pep-draggable-item>\r\n</div>",
+                    styles: [".draggble-item{margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem);cursor:-webkit-grab;cursor:grab}.draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:2.5rem;display:flex;flex-flow:row;justify-content:space-between}.title-container.pep-border-bottom{margin-bottom:1rem;margin-bottom:var(--pep-spacing-lg,1rem)}.placeholder-item{height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:100%;margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem)}.placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
                 },] }
     ];
     DraggableItemsComponent.ctorParameters = function () { return []; };
     DraggableItemsComponent.propDecorators = {
-        showTitle: [{ type: core.Input }],
         showSearch: [{ type: core.Input }],
         title: [{ type: core.Input }],
+        titleType: [{ type: core.Input }],
         allowMultiple: [{ type: core.Input }],
-        listConnectedTo: [{ type: core.Input }],
+        itemPlaceholderType: [{ type: core.Input }],
+        dropAreaIds: [{ type: core.Input }],
         items: [{ type: core.Input }],
         itemDragStarted: [{ type: core.Output }],
         itemDragEnded: [{ type: core.Output }]
     };
 
     var PepDraggableItemsModule = /** @class */ (function () {
-        function PepDraggableItemsModule() {
+        function PepDraggableItemsModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconSystemMove,
+            ]);
         }
         return PepDraggableItemsModule;
     }());
@@ -136,6 +141,7 @@
                         forms.ReactiveFormsModule,
                         ngxLib.PepNgxLibModule,
                         button.PepButtonModule,
+                        icon.PepIconModule,
                         search.PepSearchModule,
                         dragDrop.DragDropModule
                     ],
@@ -144,7 +150,10 @@
                         DraggableItemComponent
                     ],
                 },] }
-    ];
+    ];
+    PepDraggableItemsModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
+    ]; };
 
     /*
      * Public API Surface of ngx-lib/draggable-items

package/bundles/pepperi-addons-ngx-lib-draggable-items.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.umd.js","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n    selector: 'pep-draggable-item',\n    templateUrl: './draggable-item.component.html',\n    styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n\n    @HostBinding('style.cursor') _cursor = 'move';\n\n    @Input() title = '';\n    @Input() data: any;\n    @Input() disabled = false;\n\n    // private _isDraggable = false;\n    // @Input()\n    // set isDraggable(value: boolean) {\n    //     this._isDraggable = value;\n\n    //     this._cursor = value ? 'move' : 'inherit'\n    // }\n    // get isDraggable(): boolean {\n    //     return this._isDraggable;\n    // }\n\n    constructor() {\n        //\n    }\n\n    ngOnInit(): void {\n        //\n    }\n}\n","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem } from './draggable-items.model';\n\n@Component({\n    selector: 'pep-draggable-items',\n    templateUrl: './draggable-items.component.html',\n    styleUrls: ['./draggable-items.component.scss']\n})\nexport class DraggableItemsComponent implements OnInit, OnDestroy {\n\n    @Input() showTitle = false;\n    @Input() showSearch = false;\n    @Input() title = '';\n    @Input() allowMultiple = '';\n\n    @Input() listConnectedTo = [];\n\n    private _items: Array<IPepDraggableItem> = [];\n    @Input()\n    set items(value: Array<IPepDraggableItem>) {\n        this._items = value;\n\n        if (this.items?.length > 0) {\n            this.searchControl.enable();\n        } else {\n            this.searchControl.disable();\n        }\n    }\n    get items(): Array<IPepDraggableItem> {\n        return this._items;\n    }\n\n    @Output() itemDragStarted: EventEmitter<CdkDragStart> = new EventEmitter<CdkDragStart>();\n    @Output() itemDragEnded: EventEmitter<CdkDragStart> = new EventEmitter<CdkDragStart>();\n\n    filteredItems$: Observable<any>;\n    searchControl = new FormControl();\n    numberItemsToShowSearch = 10;\n    private readonly _destroyed: Subject<void>;\n\n    constructor() {\n        //\n        this._destroyed = new Subject();\n    }\n\n    private filterItems(value: string): any[] {\n        const filterValue = value.toLowerCase();\n        return this.items.filter(\n            (opt) =>\n                opt.title &&\n                opt.title.toLowerCase().includes(filterValue.toLowerCase())\n        );\n    }\n\n    protected getDestroyer() {\n        return takeUntil(this._destroyed);\n    }\n\n    ngOnInit(): void {\n        // If there is no item disable the search.\n        if (this.items.length === 0) {\n            this.searchControl.disable();\n        }\n\n        // Filter the draggableItems by the search control.\n        this.filteredItems$ = this.searchControl.valueChanges.pipe(\n            this.getDestroyer(),\n            startWith<any>(''),\n            map((option) =>\n                typeof option === 'string' ? option : option && option.value\n            ),\n            map((value) => (value ? this.filterItems(value) : this.items))\n        );\n    }\n\n    ngOnDestroy(): void {\n        this._destroyed.next();\n        this._destroyed.complete();\n    }\n\n    onDragStart(event: CdkDragStart) {\n        this.itemDragStarted.emit(event);\n    }\n\n    onDragEnd(event: CdkDragEnd) {\n        this.itemDragEnded.emit(event);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { DraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\n\n@NgModule({\n    declarations: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        PepNgxLibModule,\n        PepButtonModule,\n        PepSearchModule,\n        DragDropModule\n    ],\n    exports: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n})\nexport class PepDraggableItemsModule { }\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["Component","HostBinding","Input","EventEmitter","FormControl","Subject","takeUntil","startWith","map","Output","NgModule","CommonModule","ReactiveFormsModule","PepNgxLibModule","PepButtonModule","PepSearchModule","DragDropModule"],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.umd.js","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n    selector: 'pep-draggable-item',\n    templateUrl: './draggable-item.component.html',\n    styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n    @Input() title = '';\n    @Input() data: any;\n    @Input() disabled = false;\n\n    constructor() {\n        //\n    }\n\n    ngOnInit(): void {\n        //\n    }\n}\n","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\n\n@Component({\n    selector: 'pep-draggable-items',\n    templateUrl: './draggable-items.component.html',\n    styleUrls: ['./draggable-items.component.scss']\n})\nexport class DraggableItemsComponent implements OnInit, OnDestroy {\n\n    @Input() showSearch = false;\n    @Input() title = '';\n    @Input() titleType: PepDraggableItemsTitleType = 'regular';\n    @Input() allowMultiple = '';\n\n    @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'none';\n\n    @Input() dropAreaIds = [];\n\n    private _items: Array<IPepDraggableItem> = [];\n    @Input()\n    set items(value: Array<IPepDraggableItem>) {\n        this._items = value;\n\n        if (this.items?.length > 0) {\n            this.searchControl.enable();\n        } else {\n            this.searchControl.disable();\n        }\n    }\n    get items(): Array<IPepDraggableItem> {\n        return this._items;\n    }\n\n    @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n    @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n    filteredItems$: Observable<any>;\n    searchControl = new FormControl();\n    numberItemsToShowSearch = 3;\n    private readonly _destroyed: Subject<void>;\n\n    constructor() {\n        //\n        this._destroyed = new Subject();\n    }\n\n    private filterItems(value: string): any[] {\n        const filterValue = value.toLowerCase();\n        return this.items.filter(\n            (opt) =>\n                opt.title &&\n                opt.title.toLowerCase().includes(filterValue.toLowerCase())\n        );\n    }\n\n    private changeCursorOnDragStart() {\n        document.body.classList.add('inheritCursors');\n        document.body.style.cursor = 'grabbing';\n    }\n\n    private changeCursorOnDragEnd() {\n        document.body.classList.remove('inheritCursors');\n        document.body.style.cursor = 'unset';\n    }\n\n    protected getDestroyer() {\n        return takeUntil(this._destroyed);\n    }\n\n    ngOnInit(): void {\n        // If there is no item disable the search.\n        if (this.items.length === 0) {\n            this.searchControl.disable();\n        }\n\n        // Filter the draggableItems by the search control.\n        this.filteredItems$ = this.searchControl.valueChanges.pipe(\n            this.getDestroyer(),\n            startWith<any>(''),\n            map((option) =>\n                typeof option === 'string' ? option : option && option.value\n            ),\n            map((value) => (value ? this.filterItems(value) : this.items))\n        );\n    }\n\n    ngOnDestroy(): void {\n        this._destroyed.next();\n        this._destroyed.complete();\n    }\n\n    onDragStart(event: CdkDragStart) {\n        this.changeCursorOnDragStart();\n        this.itemDragStarted.emit(event);\n    }\n\n    onDragEnd(event: CdkDragEnd) {\n        this.changeCursorOnDragEnd();\n        this.itemDragEnded.emit(event);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { DraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n    declarations: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        PepNgxLibModule,\n        PepButtonModule,\n        PepIconModule,\n        PepSearchModule,\n        DragDropModule\n    ],\n    exports: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n})\nexport class PepDraggableItemsModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemMove,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["Component","Input","EventEmitter","FormControl","Subject","takeUntil","startWith","map","Output","pepIconSystemMove","NgModule","CommonModule","ReactiveFormsModule","PepNgxLibModule","PepButtonModule","PepIconModule","PepSearchModule","DragDropModule","PepIconRegistry"],"mappings":"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"}

package/draggable-items/draggable-item/draggable-item.component.d.ts

@@ -1,6 +1,5 @@
 import { OnInit } from '@angular/core';
 export declare class DraggableItemComponent implements OnInit {
-    _cursor: string;
     title: string;
     data: any;
     disabled: boolean;

package/draggable-items/draggable-items.component.d.ts

@@ -2,24 +2,27 @@ import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
 import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
-import { IPepDraggableItem } from './draggable-items.model';
+import { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';
 export declare class DraggableItemsComponent implements OnInit, OnDestroy {
-    showTitle: boolean;
     showSearch: boolean;
     title: string;
+    titleType: PepDraggableItemsTitleType;
     allowMultiple: string;
-    listConnectedTo: any[];
+    itemPlaceholderType: PepDraggableItemPlaceholderType;
+    dropAreaIds: any[];
     private _items;
     set items(value: Array<IPepDraggableItem>);
     get items(): Array<IPepDraggableItem>;
-    itemDragStarted: EventEmitter<CdkDragStart>;
-    itemDragEnded: EventEmitter<CdkDragStart>;
+    itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>>;
+    itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>>;
     filteredItems$: Observable<any>;
     searchControl: FormControl;
     numberItemsToShowSearch: number;
     private readonly _destroyed;
     constructor();
     private filterItems;
+    private changeCursorOnDragStart;
+    private changeCursorOnDragEnd;
     protected getDestroyer(): import("rxjs").MonoTypeOperatorFunction<unknown>;
     ngOnInit(): void;
     ngOnDestroy(): void;

package/draggable-items/draggable-items.model.d.ts

@@ -1,5 +1,7 @@
+export declare type PepDraggableItemsTitleType = 'none' | 'regular' | 'with-bottom-border';
+export declare type PepDraggableItemPlaceholderType = 'none' | 'regular' | 'weak';
 export interface IPepDraggableItem {
     title: string;
-    disabled: boolean;
     data: any;
+    disabled?: boolean;
 }

package/draggable-items/draggable-items.module.d.ts

@@ -1,2 +1,5 @@
+import { PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 export declare class PepDraggableItemsModule {
+    private pepIconRegistry;
+    constructor(pepIconRegistry: PepIconRegistry);
 }

package/draggable-items/pepperi-addons-ngx-lib-draggable-items.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"DraggableItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"pep-draggable-item","template":"<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>","styles":[":host{display:block;cursor:-webkit-grab;cursor:grab}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]}]}],"members":{"_cursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":9,"character":5},"arguments":["style.cursor"]}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"PepDraggableItemsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DraggableItemsComponent"},{"__symbolic":"reference","name":"DraggableItemComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":20,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":21,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/button","name":"PepButtonModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":24,"character":8}],"exports":[{"__symbolic":"reference","name":"DraggableItemsComponent"},{"__symbolic":"reference","name":"DraggableItemComponent"}]}]}],"members":{}},"DraggableItemsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"pep-draggable-items","template":"<div class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"items\"\r\n    [cdkDropListConnectedTo]=\"listConnectedTo\">\r\n\r\n    <div *ngIf=\"showTitle\">\r\n        Title {{ title }}\r\n\r\n        <div *ngIf=\"showSearch\" [ngClass]=\"{ 'pep-spacing-element': showSearch }\">\r\n            <pep-search *ngIf=\"items?.length > numberItemsToShowSearch\" [searchControl]=\"searchControl\"\r\n                [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\r\n        </div>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" cdkDrag style=\"cursor: grab;\" [cdkDragData]=\"item.data\"\r\n        (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n    </pep-draggable-item>\r\n</div>","styles":[""]}]}],"members":{"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"showSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"allowMultiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"listConnectedTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"itemDragStarted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":5}}]}],"itemDragEnded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"filterItems":[{"__symbolic":"method"}],"getDestroyer":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}]}}},"origins":{"DraggableItemComponent":"./draggable-item/draggable-item.component","PepDraggableItemsModule":"./draggable-items.module","DraggableItemsComponent":"./draggable-items.component"},"importAs":"@pepperi-addons/ngx-lib/draggable-items"}
+{"__symbolic":"module","version":4,"metadata":{"DraggableItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"pep-draggable-item","template":"<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>","styles":[":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"PepDraggableItemsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":18,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DraggableItemsComponent"},{"__symbolic":"reference","name":"DraggableItemComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":25,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":26,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/button","name":"PepButtonModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"DraggableItemsComponent"},{"__symbolic":"reference","name":"DraggableItemComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":38,"character":41}]}]}},"DraggableItemsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"pep-draggable-items","template":"<div id=\"test\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"body-xl bold ellipsis\">{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" sizeType=\"sm\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\" [shrinkInSmallScreen]=\"true\"></pep-search>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n        [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n\r\n        <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n            <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n        </ng-container>\r\n    </pep-draggable-item>\r\n</div>","styles":[".draggble-item{margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem);cursor:-webkit-grab;cursor:grab}.draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:2.5rem;display:flex;flex-flow:row;justify-content:space-between}.title-container.pep-border-bottom{margin-bottom:1rem;margin-bottom:var(--pep-spacing-lg,1rem)}.placeholder-item{height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:100%;margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem)}.placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]}]}],"members":{"showSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"titleType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"allowMultiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"itemPlaceholderType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"dropAreaIds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"itemDragStarted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":5}}]}],"itemDragEnded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"filterItems":[{"__symbolic":"method"}],"changeCursorOnDragStart":[{"__symbolic":"method"}],"changeCursorOnDragEnd":[{"__symbolic":"method"}],"getDestroyer":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method"}]}}},"origins":{"DraggableItemComponent":"./draggable-item/draggable-item.component","PepDraggableItemsModule":"./draggable-items.module","DraggableItemsComponent":"./draggable-items.component"},"importAs":"@pepperi-addons/ngx-lib/draggable-items"}

package/esm2015/draggable-items/draggable-item/draggable-item.component.js

@@ -1,16 +1,6 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 export class DraggableItemComponent {
-    // private _isDraggable = false;
-    // @Input()
-    // set isDraggable(value: boolean) {
-    //     this._isDraggable = value;
-    //     this._cursor = value ? 'move' : 'inherit'
-    // }
-    // get isDraggable(): boolean {
-    //     return this._isDraggable;
-    // }
     constructor() {
-        this._cursor = 'move';
         this.title = '';
         this.disabled = false;
         //
@@ -22,15 +12,14 @@ export class DraggableItemComponent {
 DraggableItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-draggable-item',
-                template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>",
-                styles: [":host{display:block;cursor:-webkit-grab;cursor:grab}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]
+                template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>",
+                styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]
             },] }
 ];
 DraggableItemComponent.ctorParameters = () => [];
 DraggableItemComponent.propDecorators = {
-    _cursor: [{ type: HostBinding, args: ['style.cursor',] }],
     title: [{ type: Input }],
     data: [{ type: Input }],
     disabled: [{ type: Input }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWdCLFdBQVcsRUFBRSxLQUFLLEVBQWtCLE1BQU0sZUFBZSxDQUFDO0FBTzVGLE1BQU0sT0FBTyxzQkFBc0I7SUFRL0IsZ0NBQWdDO0lBQ2hDLFdBQVc7SUFDWCxvQ0FBb0M7SUFDcEMsaUNBQWlDO0lBRWpDLGdEQUFnRDtJQUNoRCxJQUFJO0lBQ0osK0JBQStCO0lBQy9CLGdDQUFnQztJQUNoQyxJQUFJO0lBRUo7UUFqQjZCLFlBQU8sR0FBRyxNQUFNLENBQUM7UUFFckMsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUVYLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFjdEIsRUFBRTtJQUNOLENBQUM7SUFFRCxRQUFRO1FBQ0osRUFBRTtJQUNOLENBQUM7OztZQTlCSixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLG9CQUFvQjtnQkFDOUIsdWZBQThDOzthQUVqRDs7OztzQkFHSSxXQUFXLFNBQUMsY0FBYztvQkFFMUIsS0FBSzttQkFDTCxLQUFLO3VCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1kcmFnZ2FibGUtaXRlbScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyYWdnYWJsZS1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERyYWdnYWJsZUl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gICAgQEhvc3RCaW5kaW5nKCdzdHlsZS5jdXJzb3InKSBfY3Vyc29yID0gJ21vdmUnO1xuXG4gICAgQElucHV0KCkgdGl0bGUgPSAnJztcbiAgICBASW5wdXQoKSBkYXRhOiBhbnk7XG4gICAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICAgIC8vIHByaXZhdGUgX2lzRHJhZ2dhYmxlID0gZmFsc2U7XG4gICAgLy8gQElucHV0KClcbiAgICAvLyBzZXQgaXNEcmFnZ2FibGUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICAvLyAgICAgdGhpcy5faXNEcmFnZ2FibGUgPSB2YWx1ZTtcblxuICAgIC8vICAgICB0aGlzLl9jdXJzb3IgPSB2YWx1ZSA/ICdtb3ZlJyA6ICdpbmhlcml0J1xuICAgIC8vIH1cbiAgICAvLyBnZXQgaXNEcmFnZ2FibGUoKTogYm9vbGVhbiB7XG4gICAgLy8gICAgIHJldHVybiB0aGlzLl9pc0RyYWdnYWJsZTtcbiAgICAvLyB9XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgLy9cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgLy9cbiAgICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQTZCLEtBQUssRUFBa0IsTUFBTSxlQUFlLENBQUM7QUFPNUYsTUFBTSxPQUFPLHNCQUFzQjtJQUsvQjtRQUpTLFVBQUssR0FBRyxFQUFFLENBQUM7UUFFWCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR3RCLEVBQUU7SUFDTixDQUFDO0lBRUQsUUFBUTtRQUNKLEVBQUU7SUFDTixDQUFDOzs7WUFoQkosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxvQkFBb0I7Z0JBQzlCLHNmQUE4Qzs7YUFFakQ7Ozs7b0JBRUksS0FBSzttQkFDTCxLQUFLO3VCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1kcmFnZ2FibGUtaXRlbScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyYWdnYWJsZS1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERyYWdnYWJsZUl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIHRpdGxlID0gJyc7XG4gICAgQElucHV0KCkgZGF0YTogYW55O1xuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgLy9cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgLy9cbiAgICB9XG59XG4iXX0=

package/esm2015/draggable-items/draggable-items.component.js

@@ -4,16 +4,17 @@ import { Subject } from 'rxjs';
 import { map, startWith, takeUntil } from 'rxjs/operators';
 export class DraggableItemsComponent {
     constructor() {
-        this.showTitle = false;
         this.showSearch = false;
         this.title = '';
+        this.titleType = 'regular';
         this.allowMultiple = '';
-        this.listConnectedTo = [];
+        this.itemPlaceholderType = 'none';
+        this.dropAreaIds = [];
         this._items = [];
         this.itemDragStarted = new EventEmitter();
         this.itemDragEnded = new EventEmitter();
         this.searchControl = new FormControl();
-        this.numberItemsToShowSearch = 10;
+        this.numberItemsToShowSearch = 3;
         //
         this._destroyed = new Subject();
     }
@@ -35,6 +36,14 @@ export class DraggableItemsComponent {
         return this.items.filter((opt) => opt.title &&
             opt.title.toLowerCase().includes(filterValue.toLowerCase()));
     }
+    changeCursorOnDragStart() {
+        document.body.classList.add('inheritCursors');
+        document.body.style.cursor = 'grabbing';
+    }
+    changeCursorOnDragEnd() {
+        document.body.classList.remove('inheritCursors');
+        document.body.style.cursor = 'unset';
+    }
     getDestroyer() {
         return takeUntil(this._destroyed);
     }
@@ -51,28 +60,31 @@ export class DraggableItemsComponent {
         this._destroyed.complete();
     }
     onDragStart(event) {
+        this.changeCursorOnDragStart();
         this.itemDragStarted.emit(event);
     }
     onDragEnd(event) {
+        this.changeCursorOnDragEnd();
         this.itemDragEnded.emit(event);
     }
 }
 DraggableItemsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-draggable-items',
-                template: "<div class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"items\"\r\n    [cdkDropListConnectedTo]=\"listConnectedTo\">\r\n\r\n    <div *ngIf=\"showTitle\">\r\n        Title {{ title }}\r\n\r\n        <div *ngIf=\"showSearch\" [ngClass]=\"{ 'pep-spacing-element': showSearch }\">\r\n            <pep-search *ngIf=\"items?.length > numberItemsToShowSearch\" [searchControl]=\"searchControl\"\r\n                [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\r\n        </div>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" cdkDrag style=\"cursor: grab;\" [cdkDragData]=\"item.data\"\r\n        (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n    </pep-draggable-item>\r\n</div>",
-                styles: [""]
+                template: "<div id=\"test\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"body-xl bold ellipsis\">{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" sizeType=\"sm\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\" [shrinkInSmallScreen]=\"true\"></pep-search>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n        [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n\r\n        <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n            <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n        </ng-container>\r\n    </pep-draggable-item>\r\n</div>",
+                styles: [".draggble-item{margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem);cursor:-webkit-grab;cursor:grab}.draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:2.5rem;display:flex;flex-flow:row;justify-content:space-between}.title-container.pep-border-bottom{margin-bottom:1rem;margin-bottom:var(--pep-spacing-lg,1rem)}.placeholder-item{height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:100%;margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem)}.placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
             },] }
 ];
 DraggableItemsComponent.ctorParameters = () => [];
 DraggableItemsComponent.propDecorators = {
-    showTitle: [{ type: Input }],
     showSearch: [{ type: Input }],
     title: [{ type: Input }],
+    titleType: [{ type: Input }],
     allowMultiple: [{ type: Input }],
-    listConnectedTo: [{ type: Input }],
+    itemPlaceholderType: [{ type: Input }],
+    dropAreaIds: [{ type: Input }],
     items: [{ type: Input }],
     itemDragStarted: [{ type: Output }],
     itemDragEnded: [{ type: Output }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL2RyYWdnYWJsZS1pdGVtcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWUsS0FBSyxFQUFxQixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkcsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDM0MsT0FBTyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFRM0QsTUFBTSxPQUFPLHVCQUF1QjtJQWdDaEM7UUE5QlMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxrQkFBYSxHQUFHLEVBQUUsQ0FBQztRQUVuQixvQkFBZSxHQUFHLEVBQUUsQ0FBQztRQUV0QixXQUFNLEdBQTZCLEVBQUUsQ0FBQztRQWVwQyxvQkFBZSxHQUErQixJQUFJLFlBQVksRUFBZ0IsQ0FBQztRQUMvRSxrQkFBYSxHQUErQixJQUFJLFlBQVksRUFBZ0IsQ0FBQztRQUd2RixrQkFBYSxHQUFHLElBQUksV0FBVyxFQUFFLENBQUM7UUFDbEMsNEJBQXVCLEdBQUcsRUFBRSxDQUFDO1FBSXpCLEVBQUU7UUFDRixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksT0FBTyxFQUFFLENBQUM7SUFDcEMsQ0FBQztJQXpCRCxJQUNJLEtBQUssQ0FBQyxLQUErQjs7UUFDckMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFFcEIsSUFBSSxDQUFBLE1BQUEsSUFBSSxDQUFDLEtBQUssMENBQUUsTUFBTSxJQUFHLENBQUMsRUFBRTtZQUN4QixJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sRUFBRSxDQUFDO1NBQy9CO2FBQU07WUFDSCxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQ2hDO0lBQ0wsQ0FBQztJQUNELElBQUksS0FBSztRQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUN2QixDQUFDO0lBZU8sV0FBVyxDQUFDLEtBQWE7UUFDN0IsTUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3hDLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQ3BCLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FDSixHQUFHLENBQUMsS0FBSztZQUNULEdBQUcsQ0FBQyxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUNsRSxDQUFDO0lBQ04sQ0FBQztJQUVTLFlBQVk7UUFDbEIsT0FBTyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3RDLENBQUM7SUFFRCxRQUFRO1FBQ0osMENBQTBDO1FBQzFDLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO1lBQ3pCLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDaEM7UUFFRCxtREFBbUQ7UUFDbkQsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQ3RELElBQUksQ0FBQyxZQUFZLEVBQUUsRUFDbkIsU0FBUyxDQUFNLEVBQUUsQ0FBQyxFQUNsQixHQUFHLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUNYLE9BQU8sTUFBTSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLElBQUksTUFBTSxDQUFDLEtBQUssQ0FDL0QsRUFDRCxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FDakUsQ0FBQztJQUNOLENBQUM7SUFFRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBbUI7UUFDM0IsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFpQjtRQUN2QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDOzs7WUFuRkosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLGkzQkFBK0M7O2FBRWxEOzs7O3dCQUdJLEtBQUs7eUJBQ0wsS0FBSztvQkFDTCxLQUFLOzRCQUNMLEtBQUs7OEJBRUwsS0FBSztvQkFHTCxLQUFLOzhCQWNMLE1BQU07NEJBQ04sTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENka0RyYWdFbmQsIENka0RyYWdTdGFydCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kcmFnLWRyb3AnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybUNvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAsIHN0YXJ0V2l0aCwgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgSVBlcERyYWdnYWJsZUl0ZW0gfSBmcm9tICcuL2RyYWdnYWJsZS1pdGVtcy5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAncGVwLWRyYWdnYWJsZS1pdGVtcycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyYWdnYWJsZS1pdGVtcy5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vZHJhZ2dhYmxlLWl0ZW1zLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRHJhZ2dhYmxlSXRlbXNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG5cbiAgICBASW5wdXQoKSBzaG93VGl0bGUgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBzaG93U2VhcmNoID0gZmFsc2U7XG4gICAgQElucHV0KCkgdGl0bGUgPSAnJztcbiAgICBASW5wdXQoKSBhbGxvd011bHRpcGxlID0gJyc7XG5cbiAgICBASW5wdXQoKSBsaXN0Q29ubmVjdGVkVG8gPSBbXTtcblxuICAgIHByaXZhdGUgX2l0ZW1zOiBBcnJheTxJUGVwRHJhZ2dhYmxlSXRlbT4gPSBbXTtcbiAgICBASW5wdXQoKVxuICAgIHNldCBpdGVtcyh2YWx1ZTogQXJyYXk8SVBlcERyYWdnYWJsZUl0ZW0+KSB7XG4gICAgICAgIHRoaXMuX2l0ZW1zID0gdmFsdWU7XG5cbiAgICAgICAgaWYgKHRoaXMuaXRlbXM/Lmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgIHRoaXMuc2VhcmNoQ29udHJvbC5lbmFibGUoKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMuc2VhcmNoQ29udHJvbC5kaXNhYmxlKCk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgZ2V0IGl0ZW1zKCk6IEFycmF5PElQZXBEcmFnZ2FibGVJdGVtPiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9pdGVtcztcbiAgICB9XG5cbiAgICBAT3V0cHV0KCkgaXRlbURyYWdTdGFydGVkOiBFdmVudEVtaXR0ZXI8Q2RrRHJhZ1N0YXJ0PiA9IG5ldyBFdmVudEVtaXR0ZXI8Q2RrRHJhZ1N0YXJ0PigpO1xuICAgIEBPdXRwdXQoKSBpdGVtRHJhZ0VuZGVkOiBFdmVudEVtaXR0ZXI8Q2RrRHJhZ1N0YXJ0PiA9IG5ldyBFdmVudEVtaXR0ZXI8Q2RrRHJhZ1N0YXJ0PigpO1xuXG4gICAgZmlsdGVyZWRJdGVtcyQ6IE9ic2VydmFibGU8YW55PjtcbiAgICBzZWFyY2hDb250cm9sID0gbmV3IEZvcm1Db250cm9sKCk7XG4gICAgbnVtYmVySXRlbXNUb1Nob3dTZWFyY2ggPSAxMDtcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9kZXN0cm95ZWQ6IFN1YmplY3Q8dm9pZD47XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgLy9cbiAgICAgICAgdGhpcy5fZGVzdHJveWVkID0gbmV3IFN1YmplY3QoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGZpbHRlckl0ZW1zKHZhbHVlOiBzdHJpbmcpOiBhbnlbXSB7XG4gICAgICAgIGNvbnN0IGZpbHRlclZhbHVlID0gdmFsdWUudG9Mb3dlckNhc2UoKTtcbiAgICAgICAgcmV0dXJuIHRoaXMuaXRlbXMuZmlsdGVyKFxuICAgICAgICAgICAgKG9wdCkgPT5cbiAgICAgICAgICAgICAgICBvcHQudGl0bGUgJiZcbiAgICAgICAgICAgICAgICBvcHQudGl0bGUudG9Mb3dlckNhc2UoKS5pbmNsdWRlcyhmaWx0ZXJWYWx1ZS50b0xvd2VyQ2FzZSgpKVxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXREZXN0cm95ZXIoKSB7XG4gICAgICAgIHJldHVybiB0YWtlVW50aWwodGhpcy5fZGVzdHJveWVkKTtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgLy8gSWYgdGhlcmUgaXMgbm8gaXRlbSBkaXNhYmxlIHRoZSBzZWFyY2guXG4gICAgICAgIGlmICh0aGlzLml0ZW1zLmxlbmd0aCA9PT0gMCkge1xuICAgICAgICAgICAgdGhpcy5zZWFyY2hDb250cm9sLmRpc2FibGUoKTtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIEZpbHRlciB0aGUgZHJhZ2dhYmxlSXRlbXMgYnkgdGhlIHNlYXJjaCBjb250cm9sLlxuICAgICAgICB0aGlzLmZpbHRlcmVkSXRlbXMkID0gdGhpcy5zZWFyY2hDb250cm9sLnZhbHVlQ2hhbmdlcy5waXBlKFxuICAgICAgICAgICAgdGhpcy5nZXREZXN0cm95ZXIoKSxcbiAgICAgICAgICAgIHN0YXJ0V2l0aDxhbnk+KCcnKSxcbiAgICAgICAgICAgIG1hcCgob3B0aW9uKSA9PlxuICAgICAgICAgICAgICAgIHR5cGVvZiBvcHRpb24gPT09ICdzdHJpbmcnID8gb3B0aW9uIDogb3B0aW9uICYmIG9wdGlvbi52YWx1ZVxuICAgICAgICAgICAgKSxcbiAgICAgICAgICAgIG1hcCgodmFsdWUpID0+ICh2YWx1ZSA/IHRoaXMuZmlsdGVySXRlbXModmFsdWUpIDogdGhpcy5pdGVtcykpXG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX2Rlc3Ryb3llZC5uZXh0KCk7XG4gICAgICAgIHRoaXMuX2Rlc3Ryb3llZC5jb21wbGV0ZSgpO1xuICAgIH1cblxuICAgIG9uRHJhZ1N0YXJ0KGV2ZW50OiBDZGtEcmFnU3RhcnQpIHtcbiAgICAgICAgdGhpcy5pdGVtRHJhZ1N0YXJ0ZWQuZW1pdChldmVudCk7XG4gICAgfVxuXG4gICAgb25EcmFnRW5kKGV2ZW50OiBDZGtEcmFnRW5kKSB7XG4gICAgICAgIHRoaXMuaXRlbURyYWdFbmRlZC5lbWl0KGV2ZW50KTtcbiAgICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL2RyYWdnYWJsZS1pdGVtcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWUsS0FBSyxFQUFxQixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkcsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDM0MsT0FBTyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFRM0QsTUFBTSxPQUFPLHVCQUF1QjtJQWtDaEM7UUFoQ1MsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUNuQixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsY0FBUyxHQUErQixTQUFTLENBQUM7UUFDbEQsa0JBQWEsR0FBRyxFQUFFLENBQUM7UUFFbkIsd0JBQW1CLEdBQW9DLE1BQU0sQ0FBQztRQUU5RCxnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQUVsQixXQUFNLEdBQTZCLEVBQUUsQ0FBQztRQWVwQyxvQkFBZSxHQUFrRCxJQUFJLFlBQVksRUFBbUMsQ0FBQztRQUNySCxrQkFBYSxHQUFnRCxJQUFJLFlBQVksRUFBaUMsQ0FBQztRQUd6SCxrQkFBYSxHQUFHLElBQUksV0FBVyxFQUFFLENBQUM7UUFDbEMsNEJBQXVCLEdBQUcsQ0FBQyxDQUFDO1FBSXhCLEVBQUU7UUFDRixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksT0FBTyxFQUFFLENBQUM7SUFDcEMsQ0FBQztJQXpCRCxJQUNJLEtBQUssQ0FBQyxLQUErQjs7UUFDckMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFFcEIsSUFBSSxD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QUs7b0JBR0wsS0FBSzs4QkFjTCxNQUFNOzRCQUNOLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDZGtEcmFnRW5kLCBDZGtEcmFnU3RhcnQgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgbWFwLCBzdGFydFdpdGgsIHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IElQZXBEcmFnZ2FibGVJdGVtLCBQZXBEcmFnZ2FibGVJdGVtUGxhY2Vob2xkZXJUeXBlLCBQZXBEcmFnZ2FibGVJdGVtc1RpdGxlVHlwZSB9IGZyb20gJy4vZHJhZ2dhYmxlLWl0ZW1zLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdwZXAtZHJhZ2dhYmxlLWl0ZW1zJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZHJhZ2dhYmxlLWl0ZW1zLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kcmFnZ2FibGUtaXRlbXMuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEcmFnZ2FibGVJdGVtc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIEBJbnB1dCgpIHNob3dTZWFyY2ggPSBmYWxzZTtcbiAgICBASW5wdXQoKSB0aXRsZSA9ICcnO1xuICAgIEBJbnB1dCgpIHRpdGxlVHlwZTogUGVwRHJhZ2dhYmxlSXRlbXNUaXRsZVR5cGUgPSAncmVndWxhcic7XG4gICAgQElucHV0KCkgYWxsb3dNdWx0aXBsZSA9ICcnO1xuXG4gICAgQElucHV0KCkgaXRlbVBsYWNlaG9sZGVyVHlwZTogUGVwRHJhZ2dhYmxlSXRlbVBsYWNlaG9sZGVyVHlwZSA9ICdub25lJztcblxuICAgIEBJbnB1dCgpIGRyb3BBcmVhSWRzID0gW107XG5cbiAgICBwcml2YXRlIF9pdGVtczogQXJyYXk8SVBlcERyYWdnYWJsZUl0ZW0+ID0gW107XG4gICAgQElucHV0KClcbiAgICBzZXQgaXRlbXModmFsdWU6IEFycmF5PElQZXBEcmFnZ2FibGVJdGVtPikge1xuICAgICAgICB0aGlzLl9pdGVtcyA9IHZhbHVlO1xuXG4gICAgICAgIGlmICh0aGlzLml0ZW1zPy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICB0aGlzLnNlYXJjaENvbnRyb2wuZW5hYmxlKCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLnNlYXJjaENvbnRyb2wuZGlzYWJsZSgpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGdldCBpdGVtcygpOiBBcnJheTxJUGVwRHJhZ2dhYmxlSXRlbT4ge1xuICAgICAgICByZXR1cm4gdGhpcy5faXRlbXM7XG4gICAgfVxuXG4gICAgQE91dHB1dCgpIGl0ZW1EcmFnU3RhcnRlZDogRXZlbnRFbWl0dGVyPENka0RyYWdTdGFydDxJUGVwRHJhZ2dhYmxlSXRlbT4+ID0gbmV3IEV2ZW50RW1pdHRlcjxDZGtEcmFnU3RhcnQ8SVBlcERyYWdnYWJsZUl0ZW0+PigpO1xuICAgIEBPdXRwdXQoKSBpdGVtRHJhZ0VuZGVkOiBFdmVudEVtaXR0ZXI8Q2RrRHJhZ0VuZDxJUGVwRHJhZ2dhYmxlSXRlbT4+ID0gbmV3IEV2ZW50RW1pdHRlcjxDZGtEcmFnRW5kPElQZXBEcmFnZ2FibGVJdGVtPj4oKTtcblxuICAgIGZpbHRlcmVkSXRlbXMkOiBPYnNlcnZhYmxlPGFueT47XG4gICAgc2VhcmNoQ29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuICAgIG51bWJlckl0ZW1zVG9TaG93U2VhcmNoID0gMztcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9kZXN0cm95ZWQ6IFN1YmplY3Q8dm9pZD47XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgLy9cbiAgICAgICAgdGhpcy5fZGVzdHJveWVkID0gbmV3IFN1YmplY3QoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGZpbHRlckl0ZW1zKHZhbHVlOiBzdHJpbmcpOiBhbnlbXSB7XG4gICAgICAgIGNvbnN0IGZpbHRlclZhbHVlID0gdmFsdWUudG9Mb3dlckNhc2UoKTtcbiAgICAgICAgcmV0dXJuIHRoaXMuaXRlbXMuZmlsdGVyKFxuICAgICAgICAgICAgKG9wdCkgPT5cbiAgICAgICAgICAgICAgICBvcHQudGl0bGUgJiZcbiAgICAgICAgICAgICAgICBvcHQudGl0bGUudG9Mb3dlckNhc2UoKS5pbmNsdWRlcyhmaWx0ZXJWYWx1ZS50b0xvd2VyQ2FzZSgpKVxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByaXZhdGUgY2hhbmdlQ3Vyc29yT25EcmFnU3RhcnQoKSB7XG4gICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZCgnaW5oZXJpdEN1cnNvcnMnKTtcbiAgICAgICAgZG9jdW1lbnQuYm9keS5zdHlsZS5jdXJzb3IgPSAnZ3JhYmJpbmcnO1xuICAgIH1cblxuICAgIHByaXZhdGUgY2hhbmdlQ3Vyc29yT25EcmFnRW5kKCkge1xuICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoJ2luaGVyaXRDdXJzb3JzJyk7XG4gICAgICAgIGRvY3VtZW50LmJvZHkuc3R5bGUuY3Vyc29yID0gJ3Vuc2V0JztcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0RGVzdHJveWVyKCkge1xuICAgICAgICByZXR1cm4gdGFrZVVudGlsKHRoaXMuX2Rlc3Ryb3llZCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIC8vIElmIHRoZXJlIGlzIG5vIGl0ZW0gZGlzYWJsZSB0aGUgc2VhcmNoLlxuICAgICAgICBpZiAodGhpcy5pdGVtcy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIHRoaXMuc2VhcmNoQ29udHJvbC5kaXNhYmxlKCk7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBGaWx0ZXIgdGhlIGRyYWdnYWJsZUl0ZW1zIGJ5IHRoZSBzZWFyY2ggY29udHJvbC5cbiAgICAgICAgdGhpcy5maWx0ZXJlZEl0ZW1zJCA9IHRoaXMuc2VhcmNoQ29udHJvbC52YWx1ZUNoYW5nZXMucGlwZShcbiAgICAgICAgICAgIHRoaXMuZ2V0RGVzdHJveWVyKCksXG4gICAgICAgICAgICBzdGFydFdpdGg8YW55PignJyksXG4gICAgICAgICAgICBtYXAoKG9wdGlvbikgPT5cbiAgICAgICAgICAgICAgICB0eXBlb2Ygb3B0aW9uID09PSAnc3RyaW5nJyA/IG9wdGlvbiA6IG9wdGlvbiAmJiBvcHRpb24udmFsdWVcbiAgICAgICAgICAgICksXG4gICAgICAgICAgICBtYXAoKHZhbHVlKSA9PiAodmFsdWUgPyB0aGlzLmZpbHRlckl0ZW1zKHZhbHVlKSA6IHRoaXMuaXRlbXMpKVxuICAgICAgICApO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9kZXN0cm95ZWQubmV4dCgpO1xuICAgICAgICB0aGlzLl9kZXN0cm95ZWQuY29tcGxldGUoKTtcbiAgICB9XG5cbiAgICBvbkRyYWdTdGFydChldmVudDogQ2RrRHJhZ1N0YXJ0KSB7XG4gICAgICAgIHRoaXMuY2hhbmdlQ3Vyc29yT25EcmFnU3RhcnQoKTtcbiAgICAgICAgdGhpcy5pdGVtRHJhZ1N0YXJ0ZWQuZW1pdChldmVudCk7XG4gICAgfVxuXG4gICAgb25EcmFnRW5kKGV2ZW50OiBDZGtEcmFnRW5kKSB7XG4gICAgICAgIHRoaXMuY2hhbmdlQ3Vyc29yT25EcmFnRW5kKCk7XG4gICAgICAgIHRoaXMuaXRlbURyYWdFbmRlZC5lbWl0KGV2ZW50KTtcbiAgICB9XG59XG4iXX0=

package/esm2015/draggable-items/draggable-items.model.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW1zLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIElQZXBEcmFnZ2FibGVJdGVtIHtcclxuICAgIHRpdGxlOiBzdHJpbmc7XHJcbiAgICBkaXNhYmxlZDogYm9vbGVhbjtcclxuICAgIGRhdGE6IGFueVxyXG59Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW1zLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBQZXBEcmFnZ2FibGVJdGVtc1RpdGxlVHlwZSA9ICdub25lJyB8ICdyZWd1bGFyJyB8ICd3aXRoLWJvdHRvbS1ib3JkZXInO1xyXG5cclxuZXhwb3J0IHR5cGUgUGVwRHJhZ2dhYmxlSXRlbVBsYWNlaG9sZGVyVHlwZSA9ICdub25lJyB8ICdyZWd1bGFyJyB8ICd3ZWFrJztcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgSVBlcERyYWdnYWJsZUl0ZW0ge1xyXG4gICAgdGl0bGU6IHN0cmluZztcclxuICAgIGRhdGE6IGFueVxyXG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xyXG59Il19

package/esm2015/draggable-items/draggable-items.module.js

@@ -7,7 +7,14 @@ import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { DraggableItemsComponent } from './draggable-items.component';
 import { DraggableItemComponent } from './draggable-item/draggable-item.component';
+import { PepIconModule, PepIconRegistry, pepIconSystemMove, } from '@pepperi-addons/ngx-lib/icon';
 export class PepDraggableItemsModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemMove,
+        ]);
+    }
 }
 PepDraggableItemsModule.decorators = [
     { type: NgModule, args: [{
@@ -20,6 +27,7 @@ PepDraggableItemsModule.decorators = [
                     ReactiveFormsModule,
                     PepNgxLibModule,
                     PepButtonModule,
+                    PepIconModule,
                     PepSearchModule,
                     DragDropModule
                 ],
@@ -29,4 +37,7 @@ PepDraggableItemsModule.decorators = [
                 ],
             },] }
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL2RyYWdnYWJsZS1pdGVtcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzFELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFakUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRXhELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBb0JuRixNQUFNLE9BQU8sdUJBQXVCOzs7WUFsQm5DLFFBQVEsU0FBQztnQkFDTixZQUFZLEVBQUU7b0JBQ1YsdUJBQXVCO29CQUN2QixzQkFBc0I7aUJBQ3pCO2dCQUNELE9BQU8sRUFBRTtvQkFDTCxZQUFZO29CQUNaLG1CQUFtQjtvQkFDbkIsZUFBZTtvQkFDZixlQUFlO29CQUNmLGVBQWU7b0JBQ2YsY0FBYztpQkFDakI7Z0JBQ0QsT0FBTyxFQUFFO29CQUNMLHVCQUF1QjtvQkFDdkIsc0JBQXNCO2lCQUN6QjthQUNKIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQgeyBQZXBOZ3hMaWJNb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5pbXBvcnQgeyBQZXBCdXR0b25Nb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9idXR0b24nO1xuaW1wb3J0IHsgUGVwU2VhcmNoTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvc2VhcmNoJztcblxuaW1wb3J0IHsgRHJhZ0Ryb3BNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcblxuaW1wb3J0IHsgRHJhZ2dhYmxlSXRlbXNDb21wb25lbnQgfSBmcm9tICcuL2RyYWdnYWJsZS1pdGVtcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHJhZ2dhYmxlSXRlbUNvbXBvbmVudCB9IGZyb20gJy4vZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgICBkZWNsYXJhdGlvbnM6IFtcbiAgICAgICAgRHJhZ2dhYmxlSXRlbXNDb21wb25lbnQsXG4gICAgICAgIERyYWdnYWJsZUl0ZW1Db21wb25lbnRcbiAgICBdLFxuICAgIGltcG9ydHM6IFtcbiAgICAgICAgQ29tbW9uTW9kdWxlLFxuICAgICAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxuICAgICAgICBQZXBOZ3hMaWJNb2R1bGUsXG4gICAgICAgIFBlcEJ1dHRvbk1vZHVsZSxcbiAgICAgICAgUGVwU2VhcmNoTW9kdWxlLFxuICAgICAgICBEcmFnRHJvcE1vZHVsZVxuICAgIF0sXG4gICAgZXhwb3J0czogW1xuICAgICAgICBEcmFnZ2FibGVJdGVtc0NvbXBvbmVudCxcbiAgICAgICAgRHJhZ2dhYmxlSXRlbUNvbXBvbmVudFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIFBlcERyYWdnYWJsZUl0ZW1zTW9kdWxlIHsgfVxuIl19
+PepDraggableItemsModule.ctorParameters = () => [
+    { type: PepIconRegistry }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL2RyYWdnYWJsZS1pdGVtcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzFELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFakUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRXhELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQ25GLE9BQU8sRUFDSCxhQUFhLEVBQ2IsZUFBZSxFQUNmLGlCQUFpQixHQUNwQixNQUFNLDhCQUE4QixDQUFDO0FBcUJ0QyxNQUFNLE9BQU8sdUJBQXVCO0lBQ2hDLFlBQW9CLGVBQWdDO1FBQWhDLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtRQUNoRCxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQztZQUMvQixpQkFBaUI7U0FDcEIsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs7O1lBeEJKLFFBQVEsU0FBQztnQkFDTixZQUFZLEVBQUU7b0JBQ1YsdUJBQXVCO29CQUN2QixzQkFBc0I7aUJBQ3pCO2dCQUNELE9BQU8sRUFBRTtvQkFDTCxZQUFZO29CQUNaLG1CQUFtQjtvQkFDbkIsZUFBZTtvQkFDZixlQUFlO29CQUNmLGFBQWE7b0JBQ2IsZUFBZTtvQkFDZixjQUFjO2lCQUNqQjtnQkFDRCxPQUFPLEVBQUU7b0JBQ0wsdUJBQXVCO29CQUN2QixzQkFBc0I7aUJBQ3pCO2FBQ0o7OztZQXRCRyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQgeyBQZXBOZ3hMaWJNb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5pbXBvcnQgeyBQZXBCdXR0b25Nb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9idXR0b24nO1xuaW1wb3J0IHsgUGVwU2VhcmNoTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvc2VhcmNoJztcblxuaW1wb3J0IHsgRHJhZ0Ryb3BNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcblxuaW1wb3J0IHsgRHJhZ2dhYmxlSXRlbXNDb21wb25lbnQgfSBmcm9tICcuL2RyYWdnYWJsZS1pdGVtcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHJhZ2dhYmxlSXRlbUNvbXBvbmVudCB9IGZyb20gJy4vZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50JztcbmltcG9ydCB7XG4gICAgUGVwSWNvbk1vZHVsZSxcbiAgICBQZXBJY29uUmVnaXN0cnksXG4gICAgcGVwSWNvblN5c3RlbU1vdmUsXG59IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2ljb24nO1xuXG5ATmdNb2R1bGUoe1xuICAgIGRlY2xhcmF0aW9uczogW1xuICAgICAgICBEcmFnZ2FibGVJdGVtc0NvbXBvbmVudCxcbiAgICAgICAgRHJhZ2dhYmxlSXRlbUNvbXBvbmVudFxuICAgIF0sXG4gICAgaW1wb3J0czogW1xuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgICAgIFBlcE5neExpYk1vZHVsZSxcbiAgICAgICAgUGVwQnV0dG9uTW9kdWxlLFxuICAgICAgICBQZXBJY29uTW9kdWxlLFxuICAgICAgICBQZXBTZWFyY2hNb2R1bGUsXG4gICAgICAgIERyYWdEcm9wTW9kdWxlXG4gICAgXSxcbiAgICBleHBvcnRzOiBbXG4gICAgICAgIERyYWdnYWJsZUl0ZW1zQ29tcG9uZW50LFxuICAgICAgICBEcmFnZ2FibGVJdGVtQ29tcG9uZW50XG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgUGVwRHJhZ2dhYmxlSXRlbXNNb2R1bGUge1xuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcGVwSWNvblJlZ2lzdHJ5OiBQZXBJY29uUmVnaXN0cnkpIHtcbiAgICAgICAgdGhpcy5wZXBJY29uUmVnaXN0cnkucmVnaXN0ZXJJY29ucyhbXG4gICAgICAgICAgICBwZXBJY29uU3lzdGVtTW92ZSxcbiAgICAgICAgXSk7XG4gICAgfVxufVxuIl19

package/fesm2015/pepperi-addons-ngx-lib-draggable-items.js

@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input, EventEmitter, Output, NgModule } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
@@ -7,19 +7,10 @@ import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { Subject } from 'rxjs';
 import { takeUntil, startWith, map } from 'rxjs/operators';
+import { pepIconSystemMove, PepIconModule, PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 
 class DraggableItemComponent {
-    // private _isDraggable = false;
-    // @Input()
-    // set isDraggable(value: boolean) {
-    //     this._isDraggable = value;
-    //     this._cursor = value ? 'move' : 'inherit'
-    // }
-    // get isDraggable(): boolean {
-    //     return this._isDraggable;
-    // }
     constructor() {
-        this._cursor = 'move';
         this.title = '';
         this.disabled = false;
         //
@@ -31,13 +22,12 @@ class DraggableItemComponent {
 DraggableItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-draggable-item',
-                template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>",
-                styles: [":host{display:block;cursor:-webkit-grab;cursor:grab}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]
+                template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>",
+                styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding-inline:.5rem;padding-inline:var(--pep-spacing-sm,.5rem);background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:.5rem;margin-inline:var(--pep-spacing-sm,.5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;grid-gap:.25rem;gap:.25rem;grid-gap:var(--pep-spacing-xs,.25rem);gap:var(--pep-spacing-xs,.25rem)}"]
             },] }
 ];
 DraggableItemComponent.ctorParameters = () => [];
 DraggableItemComponent.propDecorators = {
-    _cursor: [{ type: HostBinding, args: ['style.cursor',] }],
     title: [{ type: Input }],
     data: [{ type: Input }],
     disabled: [{ type: Input }]
@@ -45,16 +35,17 @@ DraggableItemComponent.propDecorators = {
 
 class DraggableItemsComponent {
     constructor() {
-        this.showTitle = false;
         this.showSearch = false;
         this.title = '';
+        this.titleType = 'regular';
         this.allowMultiple = '';
-        this.listConnectedTo = [];
+        this.itemPlaceholderType = 'none';
+        this.dropAreaIds = [];
         this._items = [];
         this.itemDragStarted = new EventEmitter();
         this.itemDragEnded = new EventEmitter();
         this.searchControl = new FormControl();
-        this.numberItemsToShowSearch = 10;
+        this.numberItemsToShowSearch = 3;
         //
         this._destroyed = new Subject();
     }
@@ -76,6 +67,14 @@ class DraggableItemsComponent {
         return this.items.filter((opt) => opt.title &&
             opt.title.toLowerCase().includes(filterValue.toLowerCase()));
     }
+    changeCursorOnDragStart() {
+        document.body.classList.add('inheritCursors');
+        document.body.style.cursor = 'grabbing';
+    }
+    changeCursorOnDragEnd() {
+        document.body.classList.remove('inheritCursors');
+        document.body.style.cursor = 'unset';
+    }
     getDestroyer() {
         return takeUntil(this._destroyed);
     }
@@ -92,32 +91,41 @@ class DraggableItemsComponent {
         this._destroyed.complete();
     }
     onDragStart(event) {
+        this.changeCursorOnDragStart();
         this.itemDragStarted.emit(event);
     }
     onDragEnd(event) {
+        this.changeCursorOnDragEnd();
         this.itemDragEnded.emit(event);
     }
 }
 DraggableItemsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'pep-draggable-items',
-                template: "<div class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"items\"\r\n    [cdkDropListConnectedTo]=\"listConnectedTo\">\r\n\r\n    <div *ngIf=\"showTitle\">\r\n        Title {{ title }}\r\n\r\n        <div *ngIf=\"showSearch\" [ngClass]=\"{ 'pep-spacing-element': showSearch }\">\r\n            <pep-search *ngIf=\"items?.length > numberItemsToShowSearch\" [searchControl]=\"searchControl\"\r\n                [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\r\n        </div>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" cdkDrag style=\"cursor: grab;\" [cdkDragData]=\"item.data\"\r\n        (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n    </pep-draggable-item>\r\n</div>",
-                styles: [""]
+                template: "<div id=\"test\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"body-xl bold ellipsis\">{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" sizeType=\"sm\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\" [shrinkInSmallScreen]=\"true\"></pep-search>\r\n    </div>\r\n\r\n    <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n        [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n        [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n\r\n        <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n            <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n        </ng-container>\r\n    </pep-draggable-item>\r\n</div>",
+                styles: [".draggble-item{margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem);cursor:-webkit-grab;cursor:grab}.draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:2.5rem;display:flex;flex-flow:row;justify-content:space-between}.title-container.pep-border-bottom{margin-bottom:1rem;margin-bottom:var(--pep-spacing-lg,1rem)}.placeholder-item{height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:100%;margin-bottom:.5rem;margin-bottom:var(--pep-spacing-sm,.5rem)}.placeholder-item.none{opacity:0}.placeholder-item.weak{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]
             },] }
 ];
 DraggableItemsComponent.ctorParameters = () => [];
 DraggableItemsComponent.propDecorators = {
-    showTitle: [{ type: Input }],
     showSearch: [{ type: Input }],
     title: [{ type: Input }],
+    titleType: [{ type: Input }],
     allowMultiple: [{ type: Input }],
-    listConnectedTo: [{ type: Input }],
+    itemPlaceholderType: [{ type: Input }],
+    dropAreaIds: [{ type: Input }],
     items: [{ type: Input }],
     itemDragStarted: [{ type: Output }],
     itemDragEnded: [{ type: Output }]
 };
 
 class PepDraggableItemsModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemMove,
+        ]);
+    }
 }
 PepDraggableItemsModule.decorators = [
     { type: NgModule, args: [{
@@ -130,6 +138,7 @@ PepDraggableItemsModule.decorators = [
                     ReactiveFormsModule,
                     PepNgxLibModule,
                     PepButtonModule,
+                    PepIconModule,
                     PepSearchModule,
                     DragDropModule
                 ],
@@ -138,6 +147,9 @@ PepDraggableItemsModule.decorators = [
                     DraggableItemComponent
                 ],
             },] }
+];
+PepDraggableItemsModule.ctorParameters = () => [
+    { type: PepIconRegistry }
 ];
 
 /*

package/fesm2015/pepperi-addons-ngx-lib-draggable-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.js","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n    selector: 'pep-draggable-item',\n    templateUrl: './draggable-item.component.html',\n    styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n\n    @HostBinding('style.cursor') _cursor = 'move';\n\n    @Input() title = '';\n    @Input() data: any;\n    @Input() disabled = false;\n\n    // private _isDraggable = false;\n    // @Input()\n    // set isDraggable(value: boolean) {\n    //     this._isDraggable = value;\n\n    //     this._cursor = value ? 'move' : 'inherit'\n    // }\n    // get isDraggable(): boolean {\n    //     return this._isDraggable;\n    // }\n\n    constructor() {\n        //\n    }\n\n    ngOnInit(): void {\n        //\n    }\n}\n","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem } from './draggable-items.model';\n\n@Component({\n    selector: 'pep-draggable-items',\n    templateUrl: './draggable-items.component.html',\n    styleUrls: ['./draggable-items.component.scss']\n})\nexport class DraggableItemsComponent implements OnInit, OnDestroy {\n\n    @Input() showTitle = false;\n    @Input() showSearch = false;\n    @Input() title = '';\n    @Input() allowMultiple = '';\n\n    @Input() listConnectedTo = [];\n\n    private _items: Array<IPepDraggableItem> = [];\n    @Input()\n    set items(value: Array<IPepDraggableItem>) {\n        this._items = value;\n\n        if (this.items?.length > 0) {\n            this.searchControl.enable();\n        } else {\n            this.searchControl.disable();\n        }\n    }\n    get items(): Array<IPepDraggableItem> {\n        return this._items;\n    }\n\n    @Output() itemDragStarted: EventEmitter<CdkDragStart> = new EventEmitter<CdkDragStart>();\n    @Output() itemDragEnded: EventEmitter<CdkDragStart> = new EventEmitter<CdkDragStart>();\n\n    filteredItems$: Observable<any>;\n    searchControl = new FormControl();\n    numberItemsToShowSearch = 10;\n    private readonly _destroyed: Subject<void>;\n\n    constructor() {\n        //\n        this._destroyed = new Subject();\n    }\n\n    private filterItems(value: string): any[] {\n        const filterValue = value.toLowerCase();\n        return this.items.filter(\n            (opt) =>\n                opt.title &&\n                opt.title.toLowerCase().includes(filterValue.toLowerCase())\n        );\n    }\n\n    protected getDestroyer() {\n        return takeUntil(this._destroyed);\n    }\n\n    ngOnInit(): void {\n        // If there is no item disable the search.\n        if (this.items.length === 0) {\n            this.searchControl.disable();\n        }\n\n        // Filter the draggableItems by the search control.\n        this.filteredItems$ = this.searchControl.valueChanges.pipe(\n            this.getDestroyer(),\n            startWith<any>(''),\n            map((option) =>\n                typeof option === 'string' ? option : option && option.value\n            ),\n            map((value) => (value ? this.filterItems(value) : this.items))\n        );\n    }\n\n    ngOnDestroy(): void {\n        this._destroyed.next();\n        this._destroyed.complete();\n    }\n\n    onDragStart(event: CdkDragStart) {\n        this.itemDragStarted.emit(event);\n    }\n\n    onDragEnd(event: CdkDragEnd) {\n        this.itemDragEnded.emit(event);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { DraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\n\n@NgModule({\n    declarations: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        PepNgxLibModule,\n        PepButtonModule,\n        PepSearchModule,\n        DragDropModule\n    ],\n    exports: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n})\nexport class PepDraggableItemsModule { }\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.js","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n    selector: 'pep-draggable-item',\n    templateUrl: './draggable-item.component.html',\n    styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n    @Input() title = '';\n    @Input() data: any;\n    @Input() disabled = false;\n\n    constructor() {\n        //\n    }\n\n    ngOnInit(): void {\n        //\n    }\n}\n","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\n\n@Component({\n    selector: 'pep-draggable-items',\n    templateUrl: './draggable-items.component.html',\n    styleUrls: ['./draggable-items.component.scss']\n})\nexport class DraggableItemsComponent implements OnInit, OnDestroy {\n\n    @Input() showSearch = false;\n    @Input() title = '';\n    @Input() titleType: PepDraggableItemsTitleType = 'regular';\n    @Input() allowMultiple = '';\n\n    @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'none';\n\n    @Input() dropAreaIds = [];\n\n    private _items: Array<IPepDraggableItem> = [];\n    @Input()\n    set items(value: Array<IPepDraggableItem>) {\n        this._items = value;\n\n        if (this.items?.length > 0) {\n            this.searchControl.enable();\n        } else {\n            this.searchControl.disable();\n        }\n    }\n    get items(): Array<IPepDraggableItem> {\n        return this._items;\n    }\n\n    @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n    @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n    filteredItems$: Observable<any>;\n    searchControl = new FormControl();\n    numberItemsToShowSearch = 3;\n    private readonly _destroyed: Subject<void>;\n\n    constructor() {\n        //\n        this._destroyed = new Subject();\n    }\n\n    private filterItems(value: string): any[] {\n        const filterValue = value.toLowerCase();\n        return this.items.filter(\n            (opt) =>\n                opt.title &&\n                opt.title.toLowerCase().includes(filterValue.toLowerCase())\n        );\n    }\n\n    private changeCursorOnDragStart() {\n        document.body.classList.add('inheritCursors');\n        document.body.style.cursor = 'grabbing';\n    }\n\n    private changeCursorOnDragEnd() {\n        document.body.classList.remove('inheritCursors');\n        document.body.style.cursor = 'unset';\n    }\n\n    protected getDestroyer() {\n        return takeUntil(this._destroyed);\n    }\n\n    ngOnInit(): void {\n        // If there is no item disable the search.\n        if (this.items.length === 0) {\n            this.searchControl.disable();\n        }\n\n        // Filter the draggableItems by the search control.\n        this.filteredItems$ = this.searchControl.valueChanges.pipe(\n            this.getDestroyer(),\n            startWith<any>(''),\n            map((option) =>\n                typeof option === 'string' ? option : option && option.value\n            ),\n            map((value) => (value ? this.filterItems(value) : this.items))\n        );\n    }\n\n    ngOnDestroy(): void {\n        this._destroyed.next();\n        this._destroyed.complete();\n    }\n\n    onDragStart(event: CdkDragStart) {\n        this.changeCursorOnDragStart();\n        this.itemDragStarted.emit(event);\n    }\n\n    onDragEnd(event: CdkDragEnd) {\n        this.changeCursorOnDragEnd();\n        this.itemDragEnded.emit(event);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { DraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n    declarations: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        PepNgxLibModule,\n        PepButtonModule,\n        PepIconModule,\n        PepSearchModule,\n        DragDropModule\n    ],\n    exports: [\n        DraggableItemsComponent,\n        DraggableItemComponent\n    ],\n})\nexport class PepDraggableItemsModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemMove,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAOa,sBAAsB;IAK/B;QAJS,UAAK,GAAG,EAAE,CAAC;QAEX,aAAQ,GAAG,KAAK,CAAC;;KAIzB;IAED,QAAQ;;KAEP;;;YAhBJ,SAAS,SAAC;gBACP,QAAQ,EAAE,oBAAoB;gBAC9B,sfAA8C;;aAEjD;;;;oBAEI,KAAK;mBACL,KAAK;uBACL,KAAK;;;MCEG,uBAAuB;IAkChC;QAhCS,eAAU,GAAG,KAAK,CAAC;QACnB,UAAK,GAAG,EAAE,CAAC;QACX,cAAS,GAA+B,SAAS,CAAC;QAClD,kBAAa,GAAG,EAAE,CAAC;QAEnB,wBAAmB,GAAoC,MAAM,CAAC;QAE9D,gBAAW,GAAG,EAAE,CAAC;QAElB,WAAM,GAA6B,EAAE,CAAC;QAepC,oBAAe,GAAkD,IAAI,YAAY,EAAmC,CAAC;QACrH,kBAAa,GAAgD,IAAI,YAAY,EAAiC,CAAC;QAGzH,kBAAa,GAAG,IAAI,WAAW,EAAE,CAAC;QAClC,4BAAuB,GAAG,CAAC,CAAC;;QAKxB,IAAI,CAAC,UAAU,GAAG,IAAI,OAAO,EAAE,CAAC;KACnC;IAzBD,IACI,KAAK,CAAC,KAA+B;;QACrC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAEpB,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,CAAC,EAAE;YACxB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;SAC/B;aAAM;YACH,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;SAChC;KACJ;IACD,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;IAeO,WAAW,CAAC,KAAa;QAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;QACxC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CACpB,CAAC,GAAG,KACA,GAAG,CAAC,KAAK;YACT,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAClE,CAAC;KACL;IAEO,uBAAuB;QAC3B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAC9C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC;KAC3C;IAEO,qBAAqB;QACzB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QACjD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;KACxC;IAES,YAAY;QAClB,OAAO,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACrC;IAED,QAAQ;;QAEJ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACzB,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;SAChC;;QAGD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CACtD,IAAI,CAAC,YAAY,EAAE,EACnB,SAAS,CAAM,EAAE,CAAC,EAClB,GAAG,CAAC,CAAC,MAAM,KACP,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,CAAC,KAAK,CAC/D,EACD,GAAG,CAAC,CAAC,KAAK,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CACjE,CAAC;KACL;IAED,WAAW;QACP,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;KAC9B;IAED,WAAW,CAAC,KAAmB;QAC3B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpC;IAED,SAAS,CAAC,KAAiB;QACvB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;;;YAjGJ,SAAS,SAAC;gBACP,QAAQ,EAAE,qBAAqB;gBAC/B,2uCAA+C;;aAElD;;;;yBAGI,KAAK;oBACL,KAAK;wBACL,KAAK;4BACL,KAAK;kCAEL,KAAK;0BAEL,KAAK;oBAGL,KAAK;8BAcL,MAAM;4BACN,MAAM;;;MCFE,uBAAuB;IAChC,YAAoB,eAAgC;QAAhC,oBAAe,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;YAC/B,iBAAiB;SACpB,CAAC,CAAC;KACN;;;YAxBJ,QAAQ,SAAC;gBACN,YAAY,EAAE;oBACV,uBAAuB;oBACvB,sBAAsB;iBACzB;gBACD,OAAO,EAAE;oBACL,YAAY;oBACZ,mBAAmB;oBACnB,eAAe;oBACf,eAAe;oBACf,aAAa;oBACb,eAAe;oBACf,cAAc;iBACjB;gBACD,OAAO,EAAE;oBACL,uBAAuB;oBACvB,sBAAsB;iBACzB;aACJ;;;YAtBG,eAAe;;;ACdnB;;;;ACAA;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib",
-  "version": "0.3.9-beta.3",
+  "version": "0.3.9-beta.4",
   "peerDependencies": {
     "@angular/animations": ">= 12.0.0",
     "@angular/cdk": ">= 12.0.0",

package/src/core/style/vendors/normalize.scss

@@ -25,6 +25,12 @@ html {
     -webkit-text-size-adjust: 100%; /* 3 */
 }
 
+html {
+    body.inheritCursors * {
+        cursor: inherit !important;
+    }
+}
+
 /* Sections
    ========================================================================== */