npm - @pepperi-addons/ngx-lib - Versions diffs - 0.4.2-beta.98 → 0.4.2-storybook.1 - Mend

@pepperi-addons/ngx-lib 0.4.2-beta.98 → 0.4.2-storybook.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs CHANGED Viewed

@@ -106,10 +106,10 @@ class PepDraggableItemsComponent {
     }
 }
 PepDraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepDraggableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: { containerId: "containerId", showSearch: "showSearch", title: "title", titleType: "titleType", titleSizeType: "titleSizeType", itemPlaceholderType: "itemPlaceholderType", dropAreaIds: "dropAreaIds", items: "items" }, outputs: { itemDragStarted: "itemDragStarted", itemDragEnded: "itemDragEnded" }, ngImport: i0, template: "<div [id]=\"containerId\" 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=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\">\r\n        <div class=\"draggable-items-wrapper\">\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>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.draggable-items-overflow{overflow:auto;padding:var(--pep-spacing-lg, 1rem) 0}.draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.draggable-items-wrapper .draggble-item{cursor:grab}.draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container .search-button{display:flex;align-self:center}.placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+PepDraggableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDraggableItemsComponent, selector: "pep-draggable-items", inputs: { containerId: "containerId", showSearch: "showSearch", title: "title", titleType: "titleType", titleSizeType: "titleSizeType", itemPlaceholderType: "itemPlaceholderType", dropAreaIds: "dropAreaIds", items: "items" }, outputs: { itemDragStarted: "itemDragStarted", itemDragEnded: "itemDragEnded" }, ngImport: i0, template: "<div [id]=\"containerId\" 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=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n        <div class=\"draggable-items-wrapper\">\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>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.pep-draggable-items-container .title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.pep-draggable-items-container .title-container .title{align-self:center}.pep-draggable-items-container .title-container .search-button{display:flex;align-self:center}.pep-draggable-items-container .draggable-items-overflow{overflow:auto}.pep-draggable-items-container .draggable-items-overflow.add-padding{padding:var(--pep-spacing-lg, 1rem) 0}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item{cursor:grab}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-draggable-items', template: "<div [id]=\"containerId\" 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=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\">\r\n        <div class=\"draggable-items-wrapper\">\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>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.draggable-items-overflow{overflow:auto;padding:var(--pep-spacing-lg, 1rem) 0}.draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.draggable-items-wrapper .draggble-item{cursor:grab}.draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container .search-button{display:flex;align-self:center}.placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
+            args: [{ selector: 'pep-draggable-items', template: "<div [id]=\"containerId\" 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=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n        <div class=\"draggable-items-wrapper\">\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>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.pep-draggable-items-container .title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.pep-draggable-items-container .title-container .title{align-self:center}.pep-draggable-items-container .title-container .search-button{display:flex;align-self:center}.pep-draggable-items-container .draggable-items-overflow{overflow:auto}.pep-draggable-items-container .draggable-items-overflow.add-padding{padding:var(--pep-spacing-lg, 1rem) 0}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item{cursor:grab}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.pep-draggable-items-container .draggable-items-overflow .draggable-items-wrapper .placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { containerId: [{
                 type: Input
             }], showSearch: [{

package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.mjs","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.html","../../../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","<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>","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';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\n@Component({\n selector: 'pep-draggable-items',\n templateUrl: './draggable-items.component.html',\n styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class PepDraggableItemsComponent implements OnInit, OnDestroy {\n @Input() containerId = 'draggable-container';\n @Input() showSearch = false;\n @Input() title = '';\n @Input() titleType: PepDraggableItemsTitleType = 'regular';\n @Input() titleSizeType: PepSizeType = 'md';\n @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'weak';\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 = 5;\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","<div [id]=\"containerId\" 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=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n <pep-search ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n </div>\r\n\r\n <div class=\"draggable-items-overflow\">\r\n <div class=\"draggable-items-wrapper\">\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>\r\n </div>\r\n</div>","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 { PepDraggableItemsComponent } 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 PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepSearchModule,\n DragDropModule\n ],\n exports: [\n PepDraggableItemsComponent,\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.model';\nexport * from './draggable-items.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i2","i4.DraggableItemComponent","i1"],"mappings":"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"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.mjs","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.html","../../../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","<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>","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';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\n@Component({\n selector: 'pep-draggable-items',\n templateUrl: './draggable-items.component.html',\n styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class PepDraggableItemsComponent implements OnInit, OnDestroy {\n @Input() containerId = 'draggable-container';\n @Input() showSearch = false;\n @Input() title = '';\n @Input() titleType: PepDraggableItemsTitleType = 'regular';\n @Input() titleSizeType: PepSizeType = 'md';\n @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'weak';\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 = 5;\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","<div [id]=\"containerId\" 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=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n <pep-search ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n </div>\r\n\r\n <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n <div class=\"draggable-items-wrapper\">\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>\r\n </div>\r\n</div>","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 { PepDraggableItemsComponent } 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 PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepSearchModule,\n DragDropModule\n ],\n exports: [\n PepDraggableItemsComponent,\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.model';\nexport * from './draggable-items.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i2","i4.DraggableItemComponent","i1"],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-lib-form.mjs CHANGED Viewed

@@ -2339,9 +2339,8 @@ class PepInternalPageComponent {
                     // * 16 convert rem to pixel
                     const cardRowsHeight = this.customizationService.calculateCardRowsHeight(maxRow) * 16;
                     // maxRow * 24 + 60 - 24 for each row in card + 60 for the padding of each card.
-                    // const rowSpanToAdd = Math.floor(childrenCount * ((cardRowsHeight + 56) / formRowHeight) + rowsToAdd);
-                    // + 16 is the 1rem margin outside card.
-                    const rowSpanToAdd = (childrenCount * (cardRowsHeight + 16)) /
+                    // const rowSpanToAdd = childrenCount * ((cardRowsHeight + 24) / formRowHeight) + rowsToAdd;
+                    const rowSpanToAdd = (childrenCount * (cardRowsHeight + 24)) /
                         formRowHeight +
                         rowsToAdd;
                     this.field.rowSpan = rowSpanToAdd;