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

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

@@ -0,0 +1,164 @@
+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';
+import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
+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 {
+    constructor() {
+        this.title = '';
+        this.disabled = false;
+        //
+    }
+    ngOnInit() {
+        //
+    }
+}
+DraggableItemComponent.decorators = [
+    { type: Component, args: [{
+                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)}"]
+            },] }
+];
+DraggableItemComponent.ctorParameters = () => [];
+DraggableItemComponent.propDecorators = {
+    title: [{ type: Input }],
+    data: [{ type: Input }],
+    disabled: [{ type: Input }]
+};
+
+class DraggableItemsComponent {
+    constructor() {
+        this.showSearch = false;
+        this.title = '';
+        this.titleType = 'regular';
+        this.allowMultiple = '';
+        this.itemPlaceholderType = 'none';
+        this.dropAreaIds = [];
+        this._items = [];
+        this.itemDragStarted = new EventEmitter();
+        this.itemDragEnded = new EventEmitter();
+        this.searchControl = new FormControl();
+        this.numberItemsToShowSearch = 3;
+        //
+        this._destroyed = new Subject();
+    }
+    set items(value) {
+        var _a;
+        this._items = value;
+        if (((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.searchControl.enable();
+        }
+        else {
+            this.searchControl.disable();
+        }
+    }
+    get items() {
+        return this._items;
+    }
+    filterItems(value) {
+        const filterValue = value.toLowerCase();
+        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);
+    }
+    ngOnInit() {
+        // If there is no item disable the search.
+        if (this.items.length === 0) {
+            this.searchControl.disable();
+        }
+        // Filter the draggableItems by the search control.
+        this.filteredItems$ = this.searchControl.valueChanges.pipe(this.getDestroyer(), startWith(''), map((option) => typeof option === 'string' ? option : option && option.value), map((value) => (value ? this.filterItems(value) : this.items)));
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        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 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 = {
+    showSearch: [{ type: Input }],
+    title: [{ type: Input }],
+    titleType: [{ type: Input }],
+    allowMultiple: [{ 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: [{
+                declarations: [
+                    DraggableItemsComponent,
+                    DraggableItemComponent
+                ],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    PepNgxLibModule,
+                    PepButtonModule,
+                    PepIconModule,
+                    PepSearchModule,
+                    DragDropModule
+                ],
+                exports: [
+                    DraggableItemsComponent,
+                    DraggableItemComponent
+                ],
+            },] }
+];
+PepDraggableItemsModule.ctorParameters = () => [
+    { type: PepIconRegistry }
+];
+
+/*
+ * Public API Surface of ngx-lib/draggable-items
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DraggableItemComponent, DraggableItemsComponent, PepDraggableItemsModule };
+//# sourceMappingURL=pepperi-addons-ngx-lib-draggable-items.js.map

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

@@ -0,0 +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    @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":"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"}

package/fesm2015/pepperi-addons-ngx-lib-list.js

@@ -1897,16 +1897,17 @@ class PepListComponent {
     }
     getSelectedItemsData(isForEdit = false) {
         const res = new PepSelectionData();
+        let selectionType = 1;
+        const items = [];
+        const itemTypes = [];
         if (this.selectionTypeForActions === 'single') {
-            const tmp = this.selectedItemId.split(this.SEPARATOR);
-            res.selectionType = 1;
-            res.rows = [tmp[0]];
-            res.rowTypes = [tmp[1]];
+            if (this.selectedItemId.length > 0) {
+                const tmp = this.selectedItemId.split(this.SEPARATOR);
+                items.push(tmp[0]);
+                itemTypes.push(tmp[1]);
+            }
         }
         else if (this.selectionTypeForActions === 'multi') {
-            const items = [];
-            const itemTypes = [];
-            let selectionType = 1;
             let currentList = [];
             // For edit - only the selected items.
             if (isForEdit) {
@@ -1937,10 +1938,10 @@ class PepListComponent {
                     itemTypes.push(tmp[1]);
                 }
             });
-            res.selectionType = selectionType;
-            res.rows = items;
-            res.rowTypes = itemTypes;
         }
+        res.selectionType = selectionType;
+        res.rows = items;
+        res.rowTypes = itemTypes;
         return res;
     }
     getIsItemEditable(uid) {