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

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 (30) hide show
  1. package/bundles/pepperi-addons-ngx-lib-draggable-items.umd.js +173 -0
  2. package/bundles/pepperi-addons-ngx-lib-draggable-items.umd.js.map +1 -0
  3. package/bundles/pepperi-addons-ngx-lib-list.umd.js +13 -12
  4. package/bundles/pepperi-addons-ngx-lib-list.umd.js.map +1 -1
  5. package/bundles/pepperi-addons-ngx-lib-top-bar.umd.js +1 -1
  6. package/draggable-items/draggable-item/draggable-item.component.d.ts +8 -0
  7. package/draggable-items/draggable-items.component.d.ts +31 -0
  8. package/draggable-items/draggable-items.model.d.ts +7 -0
  9. package/draggable-items/draggable-items.module.d.ts +5 -0
  10. package/draggable-items/package.json +14 -0
  11. package/draggable-items/pepperi-addons-ngx-lib-draggable-items.d.ts +4 -0
  12. package/draggable-items/pepperi-addons-ngx-lib-draggable-items.metadata.json +1 -0
  13. package/draggable-items/public-api.d.ts +3 -0
  14. package/esm2015/draggable-items/draggable-item/draggable-item.component.js +25 -0
  15. package/esm2015/draggable-items/draggable-items.component.js +90 -0
  16. package/esm2015/draggable-items/draggable-items.model.js +2 -0
  17. package/esm2015/draggable-items/draggable-items.module.js +43 -0
  18. package/esm2015/draggable-items/pepperi-addons-ngx-lib-draggable-items.js +5 -0
  19. package/esm2015/draggable-items/public-api.js +7 -0
  20. package/esm2015/list/list.component.js +12 -11
  21. package/esm2015/top-bar/top-bar.component.js +1 -1
  22. package/fesm2015/pepperi-addons-ngx-lib-draggable-items.js +164 -0
  23. package/fesm2015/pepperi-addons-ngx-lib-draggable-items.js.map +1 -0
  24. package/fesm2015/pepperi-addons-ngx-lib-list.js +11 -10
  25. package/fesm2015/pepperi-addons-ngx-lib-list.js.map +1 -1
  26. package/fesm2015/pepperi-addons-ngx-lib-top-bar.js +1 -1
  27. package/package.json +1 -1
  28. package/src/core/style/abstracts/variables.scss +4 -0
  29. package/src/core/style/vendors/normalize.scss +6 -0
  30. package/top-bar/pepperi-addons-ngx-lib-top-bar.metadata.json +1 -1
@@ -79,7 +79,7 @@
79
79
  { type: core.Component, args: [{
80
80
  selector: 'pep-top-bar',
81
81
  template: "<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\n <div class=\"header-content\">\n <div class=\"main-layout\">\n <div class=\"content pep-border-bottom\">\n <div class=\"left-container pep-spacing-element-negative\">\n <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\n </div>\n <div class=\"pep-spacing-element\"></div>\n <div class=\"right-container pep-spacing-element-negative\">\n <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\n <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\n [style.height.rem]=\"customizationService.footerHeight\">\n <div class=\"content pep-border-top\">\n <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\n <ng-content select=\"[footer-start-content]\"></ng-content>\n </div>\n <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\n <ng-content select=\"[footer-end-content]\"></ng-content>\n </div>\n </div>\n <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\n </ng-container>\n <ng-template #footerBlock>\n {{ customizationService.showFooter() }}\n </ng-template>\n <ng-template #noFooterBlock>\n {{ customizationService.hideFooter() }}\n </ng-template> -->\n </div>\n\n</div>\n\n<!-- Left side templates -->\n<ng-template #listActionsTemplate>\n <div class=\"list-actions-wrapper\">\n <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #titleTemplate>\n <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\n <span [title]=\"title\">{{ title }}</span>\n </div>\n</ng-template>\n\n<ng-template #listChooserTemplate>\n <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\n <ng-content select=\"pep-list-chooser\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #leftContentTemplate>\n <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n <ng-content select=\"[header-start-content]\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #listTotalTemplate>\n <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\n <ng-content select=\"pep-list-total\"></ng-content>\n </div>\n</ng-template>\n\n<!-- Right side templates -->\n<ng-template #searchTemplate>\n <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\n <ng-content select=\"pep-search\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #sortingTemplate>\n <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\n <ng-content select=\"pep-list-sorting\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #viewsTemplate>\n <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\n <ng-content select=\"pep-list-views\"></ng-content>\n </div>\n</ng-template>\n\n<ng-template #rightContentTemplate>\n <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n <ng-content select=\"[header-end-content]\"></ng-content>\n </div>\n</ng-template>",
82
- styles: [".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}", ".pep-top-bar-container{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.pep-top-bar-container .footer{background-color:#fff;background-color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}"]
82
+ styles: [".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}", ".pep-top-bar-container{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.pep-top-bar-container .footer{background-color:#fff;background-color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}"]
83
83
  },] }
84
84
  ];
85
85
  PepTopBarComponent.ctorParameters = function () { return [
@@ -0,0 +1,8 @@
1
+ import { OnInit } from '@angular/core';
2
+ export declare class DraggableItemComponent implements OnInit {
3
+ title: string;
4
+ data: any;
5
+ disabled: boolean;
6
+ constructor();
7
+ ngOnInit(): void;
8
+ }
@@ -0,0 +1,31 @@
1
+ import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
2
+ import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
3
+ import { FormControl } from '@angular/forms';
4
+ import { Observable } from 'rxjs';
5
+ import { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';
6
+ export declare class DraggableItemsComponent implements OnInit, OnDestroy {
7
+ showSearch: boolean;
8
+ title: string;
9
+ titleType: PepDraggableItemsTitleType;
10
+ allowMultiple: string;
11
+ itemPlaceholderType: PepDraggableItemPlaceholderType;
12
+ dropAreaIds: any[];
13
+ private _items;
14
+ set items(value: Array<IPepDraggableItem>);
15
+ get items(): Array<IPepDraggableItem>;
16
+ itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>>;
17
+ itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>>;
18
+ filteredItems$: Observable<any>;
19
+ searchControl: FormControl;
20
+ numberItemsToShowSearch: number;
21
+ private readonly _destroyed;
22
+ constructor();
23
+ private filterItems;
24
+ private changeCursorOnDragStart;
25
+ private changeCursorOnDragEnd;
26
+ protected getDestroyer(): import("rxjs").MonoTypeOperatorFunction<unknown>;
27
+ ngOnInit(): void;
28
+ ngOnDestroy(): void;
29
+ onDragStart(event: CdkDragStart): void;
30
+ onDragEnd(event: CdkDragEnd): void;
31
+ }
@@ -0,0 +1,7 @@
1
+ export declare type PepDraggableItemsTitleType = 'none' | 'regular' | 'with-bottom-border';
2
+ export declare type PepDraggableItemPlaceholderType = 'none' | 'regular' | 'weak';
3
+ export interface IPepDraggableItem {
4
+ title: string;
5
+ data: any;
6
+ disabled?: boolean;
7
+ }
@@ -0,0 +1,5 @@
1
+ import { PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
2
+ export declare class PepDraggableItemsModule {
3
+ private pepIconRegistry;
4
+ constructor(pepIconRegistry: PepIconRegistry);
5
+ }
@@ -0,0 +1,14 @@
1
+ {
2
+ "peerDependencies": {
3
+ "@ngx-translate/core": "^13.0.0"
4
+ },
5
+ "main": "../bundles/pepperi-addons-ngx-lib-draggable-items.umd.js",
6
+ "module": "../fesm2015/pepperi-addons-ngx-lib-draggable-items.js",
7
+ "es2015": "../fesm2015/pepperi-addons-ngx-lib-draggable-items.js",
8
+ "esm2015": "../esm2015/draggable-items/pepperi-addons-ngx-lib-draggable-items.js",
9
+ "fesm2015": "../fesm2015/pepperi-addons-ngx-lib-draggable-items.js",
10
+ "typings": "pepperi-addons-ngx-lib-draggable-items.d.ts",
11
+ "metadata": "pepperi-addons-ngx-lib-draggable-items.metadata.json",
12
+ "sideEffects": false,
13
+ "name": "@pepperi-addons/ngx-lib/draggable-items"
14
+ }
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ export * from './public-api';
@@ -0,0 +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]=\"{ '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"}
@@ -0,0 +1,3 @@
1
+ export * from './draggable-item/draggable-item.component';
2
+ export * from './draggable-items.module';
3
+ export * from './draggable-items.component';
@@ -0,0 +1,25 @@
1
+ import { Component, Input } from '@angular/core';
2
+ export class DraggableItemComponent {
3
+ constructor() {
4
+ this.title = '';
5
+ this.disabled = false;
6
+ //
7
+ }
8
+ ngOnInit() {
9
+ //
10
+ }
11
+ }
12
+ DraggableItemComponent.decorators = [
13
+ { type: Component, args: [{
14
+ selector: 'pep-draggable-item',
15
+ 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>",
16
+ 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)}"]
17
+ },] }
18
+ ];
19
+ DraggableItemComponent.ctorParameters = () => [];
20
+ DraggableItemComponent.propDecorators = {
21
+ title: [{ type: Input }],
22
+ data: [{ type: Input }],
23
+ disabled: [{ type: Input }]
24
+ };
25
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQTZCLEtBQUssRUFBa0IsTUFBTSxlQUFlLENBQUM7QUFPNUYsTUFBTSxPQUFPLHNCQUFzQjtJQUsvQjtRQUpTLFVBQUssR0FBRyxFQUFFLENBQUM7UUFFWCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR3RCLEVBQUU7SUFDTixDQUFDO0lBRUQsUUFBUTtRQUNKLEVBQUU7SUFDTixDQUFDOzs7WUFoQkosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxvQkFBb0I7Z0JBQzlCLHNmQUE4Qzs7YUFFakQ7Ozs7b0JBRUksS0FBSzttQkFDTCxLQUFLO3VCQUNMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1kcmFnZ2FibGUtaXRlbScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyYWdnYWJsZS1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERyYWdnYWJsZUl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIHRpdGxlID0gJyc7XG4gICAgQElucHV0KCkgZGF0YTogYW55O1xuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgLy9cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgLy9cbiAgICB9XG59XG4iXX0=
@@ -0,0 +1,90 @@
1
+ import { Component, EventEmitter, Input, Output } from '@angular/core';
2
+ import { FormControl } from '@angular/forms';
3
+ import { Subject } from 'rxjs';
4
+ import { map, startWith, takeUntil } from 'rxjs/operators';
5
+ export class DraggableItemsComponent {
6
+ constructor() {
7
+ this.showSearch = false;
8
+ this.title = '';
9
+ this.titleType = 'regular';
10
+ this.allowMultiple = '';
11
+ this.itemPlaceholderType = 'none';
12
+ this.dropAreaIds = [];
13
+ this._items = [];
14
+ this.itemDragStarted = new EventEmitter();
15
+ this.itemDragEnded = new EventEmitter();
16
+ this.searchControl = new FormControl();
17
+ this.numberItemsToShowSearch = 3;
18
+ //
19
+ this._destroyed = new Subject();
20
+ }
21
+ set items(value) {
22
+ var _a;
23
+ this._items = value;
24
+ if (((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
25
+ this.searchControl.enable();
26
+ }
27
+ else {
28
+ this.searchControl.disable();
29
+ }
30
+ }
31
+ get items() {
32
+ return this._items;
33
+ }
34
+ filterItems(value) {
35
+ const filterValue = value.toLowerCase();
36
+ return this.items.filter((opt) => opt.title &&
37
+ opt.title.toLowerCase().includes(filterValue.toLowerCase()));
38
+ }
39
+ changeCursorOnDragStart() {
40
+ document.body.classList.add('inheritCursors');
41
+ document.body.style.cursor = 'grabbing';
42
+ }
43
+ changeCursorOnDragEnd() {
44
+ document.body.classList.remove('inheritCursors');
45
+ document.body.style.cursor = 'unset';
46
+ }
47
+ getDestroyer() {
48
+ return takeUntil(this._destroyed);
49
+ }
50
+ ngOnInit() {
51
+ // If there is no item disable the search.
52
+ if (this.items.length === 0) {
53
+ this.searchControl.disable();
54
+ }
55
+ // Filter the draggableItems by the search control.
56
+ 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)));
57
+ }
58
+ ngOnDestroy() {
59
+ this._destroyed.next();
60
+ this._destroyed.complete();
61
+ }
62
+ onDragStart(event) {
63
+ this.changeCursorOnDragStart();
64
+ this.itemDragStarted.emit(event);
65
+ }
66
+ onDragEnd(event) {
67
+ this.changeCursorOnDragEnd();
68
+ this.itemDragEnded.emit(event);
69
+ }
70
+ }
71
+ DraggableItemsComponent.decorators = [
72
+ { type: Component, args: [{
73
+ selector: 'pep-draggable-items',
74
+ 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>",
75
+ 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)}"]
76
+ },] }
77
+ ];
78
+ DraggableItemsComponent.ctorParameters = () => [];
79
+ DraggableItemsComponent.propDecorators = {
80
+ showSearch: [{ type: Input }],
81
+ title: [{ type: Input }],
82
+ titleType: [{ type: Input }],
83
+ allowMultiple: [{ type: Input }],
84
+ itemPlaceholderType: [{ type: Input }],
85
+ dropAreaIds: [{ type: Input }],
86
+ items: [{ type: Input }],
87
+ itemDragStarted: [{ type: Output }],
88
+ itemDragEnded: [{ type: Output }]
89
+ };
90
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL2RyYWdnYWJsZS1pdGVtcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWUsS0FBSyxFQUFxQixNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkcsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDM0MsT0FBTyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFRM0QsTUFBTSxPQUFPLHVCQUF1QjtJQWtDaEM7UUFoQ1MsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUNuQixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsY0FBUyxHQUErQixTQUFTLENBQUM7UUFDbEQsa0JBQWEsR0FBRyxFQUFFLENBQUM7UUFFbkIsd0JBQW1CLEdBQW9DLE1BQU0sQ0FBQztRQUU5RCxnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQUVsQixXQUFNLEdBQTZCLEVBQUUsQ0FBQztRQWVwQyxvQkFBZSxHQUFrRCxJQUFJLFlBQVksRUFBbUMsQ0FBQztRQUNySCxrQkFBYSxHQUFnRCxJQUFJLFlBQVksRUFBaUMsQ0FBQztRQUd6SCxrQkFBYSxHQUFHLElBQUksV0FBVyxFQUFFLENBQUM7UUFDbEMsNEJBQXVCLEdBQUcsQ0FBQyxDQUFDO1FBSXhCLEVBQUU7UUFDRixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksT0FBTyxFQUFFLENBQUM7SUFDcEMsQ0FBQztJQXpCRCxJQUNJLEtBQUssQ0FBQyxLQUErQjs7UUFDckMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFFcEIsSUFBSSxD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QUs7b0JBR0wsS0FBSzs4QkFjTCxNQUFNOzRCQUNOLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDZGtEcmFnRW5kLCBDZGtEcmFnU3RhcnQgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgbWFwLCBzdGFydFdpdGgsIHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IElQZXBEcmFnZ2FibGVJdGVtLCBQZXBEcmFnZ2FibGVJdGVtUGxhY2Vob2xkZXJUeXBlLCBQZXBEcmFnZ2FibGVJdGVtc1RpdGxlVHlwZSB9IGZyb20gJy4vZHJhZ2dhYmxlLWl0ZW1zLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdwZXAtZHJhZ2dhYmxlLWl0ZW1zJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZHJhZ2dhYmxlLWl0ZW1zLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kcmFnZ2FibGUtaXRlbXMuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEcmFnZ2FibGVJdGVtc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIEBJbnB1dCgpIHNob3dTZWFyY2ggPSBmYWxzZTtcbiAgICBASW5wdXQoKSB0aXRsZSA9ICcnO1xuICAgIEBJbnB1dCgpIHRpdGxlVHlwZTogUGVwRHJhZ2dhYmxlSXRlbXNUaXRsZVR5cGUgPSAncmVndWxhcic7XG4gICAgQElucHV0KCkgYWxsb3dNdWx0aXBsZSA9ICcnO1xuXG4gICAgQElucHV0KCkgaXRlbVBsYWNlaG9sZGVyVHlwZTogUGVwRHJhZ2dhYmxlSXRlbVBsYWNlaG9sZGVyVHlwZSA9ICdub25lJztcblxuICAgIEBJbnB1dCgpIGRyb3BBcmVhSWRzID0gW107XG5cbiAgICBwcml2YXRlIF9pdGVtczogQXJyYXk8SVBlcERyYWdnYWJsZUl0ZW0+ID0gW107XG4gICAgQElucHV0KClcbiAgICBzZXQgaXRlbXModmFsdWU6IEFycmF5PElQZXBEcmFnZ2FibGVJdGVtPikge1xuICAgICAgICB0aGlzLl9pdGVtcyA9IHZhbHVlO1xuXG4gICAgICAgIGlmICh0aGlzLml0ZW1zPy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICB0aGlzLnNlYXJjaENvbnRyb2wuZW5hYmxlKCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLnNlYXJjaENvbnRyb2wuZGlzYWJsZSgpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGdldCBpdGVtcygpOiBBcnJheTxJUGVwRHJhZ2dhYmxlSXRlbT4ge1xuICAgICAgICByZXR1cm4gdGhpcy5faXRlbXM7XG4gICAgfVxuXG4gICAgQE91dHB1dCgpIGl0ZW1EcmFnU3RhcnRlZDogRXZlbnRFbWl0dGVyPENka0RyYWdTdGFydDxJUGVwRHJhZ2dhYmxlSXRlbT4+ID0gbmV3IEV2ZW50RW1pdHRlcjxDZGtEcmFnU3RhcnQ8SVBlcERyYWdnYWJsZUl0ZW0+PigpO1xuICAgIEBPdXRwdXQoKSBpdGVtRHJhZ0VuZGVkOiBFdmVudEVtaXR0ZXI8Q2RrRHJhZ0VuZDxJUGVwRHJhZ2dhYmxlSXRlbT4+ID0gbmV3IEV2ZW50RW1pdHRlcjxDZGtEcmFnRW5kPElQZXBEcmFnZ2FibGVJdGVtPj4oKTtcblxuICAgIGZpbHRlcmVkSXRlbXMkOiBPYnNlcnZhYmxlPGFueT47XG4gICAgc2VhcmNoQ29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuICAgIG51bWJlckl0ZW1zVG9TaG93U2VhcmNoID0gMztcbiAgICBwcml2YXRlIHJlYWRvbmx5IF9kZXN0cm95ZWQ6IFN1YmplY3Q8dm9pZD47XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgLy9cbiAgICAgICAgdGhpcy5fZGVzdHJveWVkID0gbmV3IFN1YmplY3QoKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGZpbHRlckl0ZW1zKHZhbHVlOiBzdHJpbmcpOiBhbnlbXSB7XG4gICAgICAgIGNvbnN0IGZpbHRlclZhbHVlID0gdmFsdWUudG9Mb3dlckNhc2UoKTtcbiAgICAgICAgcmV0dXJuIHRoaXMuaXRlbXMuZmlsdGVyKFxuICAgICAgICAgICAgKG9wdCkgPT5cbiAgICAgICAgICAgICAgICBvcHQudGl0bGUgJiZcbiAgICAgICAgICAgICAgICBvcHQudGl0bGUudG9Mb3dlckNhc2UoKS5pbmNsdWRlcyhmaWx0ZXJWYWx1ZS50b0xvd2VyQ2FzZSgpKVxuICAgICAgICApO1xuICAgIH1cblxuICAgIHByaXZhdGUgY2hhbmdlQ3Vyc29yT25EcmFnU3RhcnQoKSB7XG4gICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZCgnaW5oZXJpdEN1cnNvcnMnKTtcbiAgICAgICAgZG9jdW1lbnQuYm9keS5zdHlsZS5jdXJzb3IgPSAnZ3JhYmJpbmcnO1xuICAgIH1cblxuICAgIHByaXZhdGUgY2hhbmdlQ3Vyc29yT25EcmFnRW5kKCkge1xuICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoJ2luaGVyaXRDdXJzb3JzJyk7XG4gICAgICAgIGRvY3VtZW50LmJvZHkuc3R5bGUuY3Vyc29yID0gJ3Vuc2V0JztcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0RGVzdHJveWVyKCkge1xuICAgICAgICByZXR1cm4gdGFrZVVudGlsKHRoaXMuX2Rlc3Ryb3llZCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIC8vIElmIHRoZXJlIGlzIG5vIGl0ZW0gZGlzYWJsZSB0aGUgc2VhcmNoLlxuICAgICAgICBpZiAodGhpcy5pdGVtcy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIHRoaXMuc2VhcmNoQ29udHJvbC5kaXNhYmxlKCk7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBGaWx0ZXIgdGhlIGRyYWdnYWJsZUl0ZW1zIGJ5IHRoZSBzZWFyY2ggY29udHJvbC5cbiAgICAgICAgdGhpcy5maWx0ZXJlZEl0ZW1zJCA9IHRoaXMuc2VhcmNoQ29udHJvbC52YWx1ZUNoYW5nZXMucGlwZShcbiAgICAgICAgICAgIHRoaXMuZ2V0RGVzdHJveWVyKCksXG4gICAgICAgICAgICBzdGFydFdpdGg8YW55PignJyksXG4gICAgICAgICAgICBtYXAoKG9wdGlvbikgPT5cbiAgICAgICAgICAgICAgICB0eXBlb2Ygb3B0aW9uID09PSAnc3RyaW5nJyA/IG9wdGlvbiA6IG9wdGlvbiAmJiBvcHRpb24udmFsdWVcbiAgICAgICAgICAgICksXG4gICAgICAgICAgICBtYXAoKHZhbHVlKSA9PiAodmFsdWUgPyB0aGlzLmZpbHRlckl0ZW1zKHZhbHVlKSA6IHRoaXMuaXRlbXMpKVxuICAgICAgICApO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9kZXN0cm95ZWQubmV4dCgpO1xuICAgICAgICB0aGlzLl9kZXN0cm95ZWQuY29tcGxldGUoKTtcbiAgICB9XG5cbiAgICBvbkRyYWdTdGFydChldmVudDogQ2RrRHJhZ1N0YXJ0KSB7XG4gICAgICAgIHRoaXMuY2hhbmdlQ3Vyc29yT25EcmFnU3RhcnQoKTtcbiAgICAgICAgdGhpcy5pdGVtRHJhZ1N0YXJ0ZWQuZW1pdChldmVudCk7XG4gICAgfVxuXG4gICAgb25EcmFnRW5kKGV2ZW50OiBDZGtEcmFnRW5kKSB7XG4gICAgICAgIHRoaXMuY2hhbmdlQ3Vyc29yT25EcmFnRW5kKCk7XG4gICAgICAgIHRoaXMuaXRlbURyYWdFbmRlZC5lbWl0KGV2ZW50KTtcbiAgICB9XG59XG4iXX0=
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW1zLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBQZXBEcmFnZ2FibGVJdGVtc1RpdGxlVHlwZSA9ICdub25lJyB8ICdyZWd1bGFyJyB8ICd3aXRoLWJvdHRvbS1ib3JkZXInO1xyXG5cclxuZXhwb3J0IHR5cGUgUGVwRHJhZ2dhYmxlSXRlbVBsYWNlaG9sZGVyVHlwZSA9ICdub25lJyB8ICdyZWd1bGFyJyB8ICd3ZWFrJztcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgSVBlcERyYWdnYWJsZUl0ZW0ge1xyXG4gICAgdGl0bGU6IHN0cmluZztcclxuICAgIGRhdGE6IGFueVxyXG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xyXG59Il19
@@ -0,0 +1,43 @@
1
+ import { NgModule } from '@angular/core';
2
+ import { CommonModule } from '@angular/common';
3
+ import { ReactiveFormsModule } from '@angular/forms';
4
+ import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
5
+ import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
6
+ import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
7
+ import { DragDropModule } from '@angular/cdk/drag-drop';
8
+ import { DraggableItemsComponent } from './draggable-items.component';
9
+ import { DraggableItemComponent } from './draggable-item/draggable-item.component';
10
+ import { PepIconModule, PepIconRegistry, pepIconSystemMove, } from '@pepperi-addons/ngx-lib/icon';
11
+ export class PepDraggableItemsModule {
12
+ constructor(pepIconRegistry) {
13
+ this.pepIconRegistry = pepIconRegistry;
14
+ this.pepIconRegistry.registerIcons([
15
+ pepIconSystemMove,
16
+ ]);
17
+ }
18
+ }
19
+ PepDraggableItemsModule.decorators = [
20
+ { type: NgModule, args: [{
21
+ declarations: [
22
+ DraggableItemsComponent,
23
+ DraggableItemComponent
24
+ ],
25
+ imports: [
26
+ CommonModule,
27
+ ReactiveFormsModule,
28
+ PepNgxLibModule,
29
+ PepButtonModule,
30
+ PepIconModule,
31
+ PepSearchModule,
32
+ DragDropModule
33
+ ],
34
+ exports: [
35
+ DraggableItemsComponent,
36
+ DraggableItemComponent
37
+ ],
38
+ },] }
39
+ ];
40
+ PepDraggableItemsModule.ctorParameters = () => [
41
+ { type: PepIconRegistry }
42
+ ];
43
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL2RyYWdnYWJsZS1pdGVtcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzFELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFakUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRXhELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQ25GLE9BQU8sRUFDSCxhQUFhLEVBQ2IsZUFBZSxFQUNmLGlCQUFpQixHQUNwQixNQUFNLDhCQUE4QixDQUFDO0FBcUJ0QyxNQUFNLE9BQU8sdUJBQXVCO0lBQ2hDLFlBQW9CLGVBQWdDO1FBQWhDLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtRQUNoRCxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQztZQUMvQixpQkFBaUI7U0FDcEIsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs7O1lBeEJKLFFBQVEsU0FBQztnQkFDTixZQUFZLEVBQUU7b0JBQ1YsdUJBQXVCO29CQUN2QixzQkFBc0I7aUJBQ3pCO2dCQUNELE9BQU8sRUFBRTtvQkFDTCxZQUFZO29CQUNaLG1CQUFtQjtvQkFDbkIsZUFBZTtvQkFDZixlQUFlO29CQUNmLGFBQWE7b0JBQ2IsZUFBZTtvQkFDZixjQUFjO2lCQUNqQjtnQkFDRCxPQUFPLEVBQUU7b0JBQ0wsdUJBQXVCO29CQUN2QixzQkFBc0I7aUJBQ3pCO2FBQ0o7OztZQXRCRyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5pbXBvcnQgeyBQZXBOZ3hMaWJNb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5pbXBvcnQgeyBQZXBCdXR0b25Nb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9idXR0b24nO1xuaW1wb3J0IHsgUGVwU2VhcmNoTW9kdWxlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvc2VhcmNoJztcblxuaW1wb3J0IHsgRHJhZ0Ryb3BNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcblxuaW1wb3J0IHsgRHJhZ2dhYmxlSXRlbXNDb21wb25lbnQgfSBmcm9tICcuL2RyYWdnYWJsZS1pdGVtcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHJhZ2dhYmxlSXRlbUNvbXBvbmVudCB9IGZyb20gJy4vZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50JztcbmltcG9ydCB7XG4gICAgUGVwSWNvbk1vZHVsZSxcbiAgICBQZXBJY29uUmVnaXN0cnksXG4gICAgcGVwSWNvblN5c3RlbU1vdmUsXG59IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2ljb24nO1xuXG5ATmdNb2R1bGUoe1xuICAgIGRlY2xhcmF0aW9uczogW1xuICAgICAgICBEcmFnZ2FibGVJdGVtc0NvbXBvbmVudCxcbiAgICAgICAgRHJhZ2dhYmxlSXRlbUNvbXBvbmVudFxuICAgIF0sXG4gICAgaW1wb3J0czogW1xuICAgICAgICBDb21tb25Nb2R1bGUsXG4gICAgICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXG4gICAgICAgIFBlcE5neExpYk1vZHVsZSxcbiAgICAgICAgUGVwQnV0dG9uTW9kdWxlLFxuICAgICAgICBQZXBJY29uTW9kdWxlLFxuICAgICAgICBQZXBTZWFyY2hNb2R1bGUsXG4gICAgICAgIERyYWdEcm9wTW9kdWxlXG4gICAgXSxcbiAgICBleHBvcnRzOiBbXG4gICAgICAgIERyYWdnYWJsZUl0ZW1zQ29tcG9uZW50LFxuICAgICAgICBEcmFnZ2FibGVJdGVtQ29tcG9uZW50XG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgUGVwRHJhZ2dhYmxlSXRlbXNNb2R1bGUge1xuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcGVwSWNvblJlZ2lzdHJ5OiBQZXBJY29uUmVnaXN0cnkpIHtcbiAgICAgICAgdGhpcy5wZXBJY29uUmVnaXN0cnkucmVnaXN0ZXJJY29ucyhbXG4gICAgICAgICAgICBwZXBJY29uU3lzdGVtTW92ZSxcbiAgICAgICAgXSk7XG4gICAgfVxufVxuIl19
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ export * from './public-api';
5
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVwcGVyaS1hZGRvbnMtbmd4LWxpYi1kcmFnZ2FibGUtaXRlbXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbGliL2RyYWdnYWJsZS1pdGVtcy9wZXBwZXJpLWFkZG9ucy1uZ3gtbGliLWRyYWdnYWJsZS1pdGVtcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19
@@ -0,0 +1,7 @@
1
+ /*
2
+ * Public API Surface of ngx-lib/draggable-items
3
+ */
4
+ export * from './draggable-item/draggable-item.component';
5
+ export * from './draggable-items.module';
6
+ export * from './draggable-items.component';
7
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxjQUFjLDJDQUEyQyxDQUFDO0FBRTFELGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyw2QkFBNkIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXNcbiAqL1xuZXhwb3J0ICogZnJvbSAnLi9kcmFnZ2FibGUtaXRlbS9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQnO1xuXG5leHBvcnQgKiBmcm9tICcuL2RyYWdnYWJsZS1pdGVtcy5tb2R1bGUnO1xuZXhwb3J0ICogZnJvbSAnLi9kcmFnZ2FibGUtaXRlbXMuY29tcG9uZW50JztcbiJdfQ==