@pepperi-addons/ngx-lib 0.4.2-beta.260 → 0.4.2-beta.261

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 (10) hide show
  1. package/draggable-items/draggable-item/draggable-item.component.d.ts +6 -7
  2. package/draggable-items/draggable-items.module.d.ts +7 -7
  3. package/esm2020/draggable-items/draggable-item/draggable-item.component.mjs +10 -13
  4. package/esm2020/draggable-items/draggable-items.component.mjs +3 -3
  5. package/esm2020/draggable-items/draggable-items.module.mjs +11 -11
  6. package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs +22 -25
  7. package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs.map +1 -1
  8. package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs +22 -25
  9. package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs.map +1 -1
  10. package/package.json +1 -1
package/draggable-items/draggable-item/draggable-item.component.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- import { EventEmitter, OnInit } from '@angular/core';
1
+ import { EventEmitter } from '@angular/core';
2
2
  import { PepStyleType } from '@pepperi-addons/ngx-lib';
3
3
  import { IPepMenuItemClickEvent, PepMenuItem } from '@pepperi-addons/ngx-lib/menu';
4
4
  import * as i0 from "@angular/core";
5
- export declare class DraggableItemComponent implements OnInit {
5
+ export declare class PepDraggableItemComponent {
6
6
  title: string;
7
- titlePrefix: string;
8
- titleClassNames: string;
9
7
  data: any;
10
8
  disabled: boolean;
9
+ titlePrefix: string;
10
+ titleClassNames: string;
11
11
  shadow: boolean;
12
12
  styleType: PepStyleType;
13
13
  toggleContent: boolean;
@@ -17,9 +17,8 @@ export declare class DraggableItemComponent implements OnInit {
17
17
  contentToggle: EventEmitter<boolean>;
18
18
  actionsMenuItemClick: EventEmitter<IPepMenuItemClickEvent>;
19
19
  constructor();
20
- ngOnInit(): void;
21
20
  onToggleContent(): void;
22
21
  onActionsMenuItemClick(item: IPepMenuItemClickEvent): void;
23
- static ɵfac: i0.ɵɵFactoryDeclaration<DraggableItemComponent, never>;
24
- static ɵcmp: i0.ɵɵComponentDeclaration<DraggableItemComponent, "pep-draggable-item", never, { "title": "title"; "titlePrefix": "titlePrefix"; "titleClassNames": "titleClassNames"; "data": "data"; "disabled": "disabled"; "shadow": "shadow"; "styleType": "styleType"; "toggleContent": "toggleContent"; "isToggleContentOpen": "isToggleContentOpen"; "actionsMenu": "actionsMenu"; "menuStyleType": "menuStyleType"; }, { "contentToggle": "contentToggle"; "actionsMenuItemClick": "actionsMenuItemClick"; }, never, ["[pep-actions]", "[pep-toggle-content]"], false>;
22
+ static ɵfac: i0.ɵɵFactoryDeclaration<PepDraggableItemComponent, never>;
23
+ static ɵcmp: i0.ɵɵComponentDeclaration<PepDraggableItemComponent, "pep-draggable-item", never, { "title": "title"; "data": "data"; "disabled": "disabled"; "titlePrefix": "titlePrefix"; "titleClassNames": "titleClassNames"; "shadow": "shadow"; "styleType": "styleType"; "toggleContent": "toggleContent"; "isToggleContentOpen": "isToggleContentOpen"; "actionsMenu": "actionsMenu"; "menuStyleType": "menuStyleType"; }, { "contentToggle": "contentToggle"; "actionsMenuItemClick": "actionsMenuItemClick"; }, never, ["[pep-actions]", "[pep-toggle-content]"], false>;
25
24
  }
package/draggable-items/draggable-items.module.d.ts CHANGED
@@ -4,16 +4,16 @@ import * as i1 from "./draggable-items.component";
4
4
  import * as i2 from "./draggable-item/draggable-item.component";
5
5
  import * as i3 from "@angular/common";
6
6
  import * as i4 from "@angular/forms";
7
- import * as i5 from "@pepperi-addons/ngx-lib";
8
- import * as i6 from "@pepperi-addons/ngx-lib/button";
9
- import * as i7 from "@pepperi-addons/ngx-lib/icon";
10
- import * as i8 from "@pepperi-addons/ngx-lib/menu";
11
- import * as i9 from "@pepperi-addons/ngx-lib/search";
12
- import * as i10 from "@angular/cdk/drag-drop";
7
+ import * as i5 from "@angular/cdk/drag-drop";
8
+ import * as i6 from "@pepperi-addons/ngx-lib";
9
+ import * as i7 from "@pepperi-addons/ngx-lib/button";
10
+ import * as i8 from "@pepperi-addons/ngx-lib/icon";
11
+ import * as i9 from "@pepperi-addons/ngx-lib/menu";
12
+ import * as i10 from "@pepperi-addons/ngx-lib/search";
13
13
  export declare class PepDraggableItemsModule {
14
14
  private pepIconRegistry;
15
15
  constructor(pepIconRegistry: PepIconRegistry);
16
16
  static ɵfac: i0.ɵɵFactoryDeclaration<PepDraggableItemsModule, never>;
17
- static ɵmod: i0.ɵɵNgModuleDeclaration<PepDraggableItemsModule, [typeof i1.PepDraggableItemsComponent, typeof i2.DraggableItemComponent], [typeof i3.CommonModule, typeof i4.ReactiveFormsModule, typeof i5.PepNgxLibModule, typeof i6.PepButtonModule, typeof i7.PepIconModule, typeof i8.PepMenuModule, typeof i9.PepSearchModule, typeof i10.DragDropModule], [typeof i1.PepDraggableItemsComponent, typeof i2.DraggableItemComponent]>;
17
+ static ɵmod: i0.ɵɵNgModuleDeclaration<PepDraggableItemsModule, [typeof i1.PepDraggableItemsComponent, typeof i2.PepDraggableItemComponent], [typeof i3.CommonModule, typeof i4.ReactiveFormsModule, typeof i5.DragDropModule, typeof i6.PepNgxLibModule, typeof i7.PepButtonModule, typeof i8.PepIconModule, typeof i9.PepMenuModule, typeof i10.PepSearchModule], [typeof i1.PepDraggableItemsComponent, typeof i2.PepDraggableItemComponent]>;
18
18
  static ɵinj: i0.ɵɵInjectorDeclaration<PepDraggableItemsModule>;
19
19
  }
package/esm2020/draggable-items/draggable-item/draggable-item.component.mjs CHANGED
@@ -3,12 +3,12 @@ import * as i0 from "@angular/core";
3
3
  import * as i1 from "@angular/common";
4
4
  import * as i2 from "@pepperi-addons/ngx-lib/button";
5
5
  import * as i3 from "@pepperi-addons/ngx-lib/menu";
6
- export class DraggableItemComponent {
6
+ export class PepDraggableItemComponent {
7
7
  constructor() {
8
8
  this.title = '';
9
+ this.disabled = false;
9
10
  this.titlePrefix = '';
10
11
  this.titleClassNames = '';
11
- this.disabled = false;
12
12
  this.shadow = true;
13
13
  this.styleType = 'regular';
14
14
  this.toggleContent = false;
@@ -19,9 +19,6 @@ export class DraggableItemComponent {
19
19
  this.actionsMenuItemClick = new EventEmitter();
20
20
  //
21
21
  }
22
- ngOnInit() {
23
- //
24
- }
25
22
  onToggleContent() {
26
23
  if (this.toggleContent) {
27
24
  this.isToggleContentOpen = !this.isToggleContentOpen;
@@ -32,21 +29,21 @@ export class DraggableItemComponent {
32
29
  this.actionsMenuItemClick.emit(item);
33
30
  }
34
31
  }
35
- DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
36
- DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", titlePrefix: "titlePrefix", titleClassNames: "titleClassNames", data: "data", disabled: "disabled", shadow: "shadow", styleType: "styleType", toggleContent: "toggleContent", isToggleContentOpen: "isToggleContentOpen", actionsMenu: "actionsMenu", menuStyleType: "menuStyleType" }, outputs: { contentToggle: "contentToggle", actionsMenuItemClick: "actionsMenuItemClick" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
37
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, decorators: [{
32
+ PepDraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
33
+ PepDraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled", titlePrefix: "titlePrefix", titleClassNames: "titleClassNames", shadow: "shadow", styleType: "styleType", toggleContent: "toggleContent", isToggleContentOpen: "isToggleContentOpen", actionsMenu: "actionsMenu", menuStyleType: "menuStyleType" }, outputs: { contentToggle: "contentToggle", actionsMenuItemClick: "actionsMenuItemClick" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
34
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemComponent, decorators: [{
38
35
  type: Component,
39
36
  args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"] }]
40
37
  }], ctorParameters: function () { return []; }, propDecorators: { title: [{
41
38
  type: Input
42
- }], titlePrefix: [{
43
- type: Input
44
- }], titleClassNames: [{
45
- type: Input
46
39
  }], data: [{
47
40
  type: Input
48
41
  }], disabled: [{
49
42
  type: Input
43
+ }], titlePrefix: [{
44
+ type: Input
45
+ }], titleClassNames: [{
46
+ type: Input
50
47
  }], shadow: [{
51
48
  type: Input
52
49
  }], styleType: [{
@@ -64,4 +61,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
64
61
  }], actionsMenuItemClick: [{
65
62
  type: Output
66
63
  }] } });
67
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQWUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFTNUYsTUFBTSxPQUFPLHNCQUFzQjtJQWlCL0I7UUFoQlMsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUNYLGdCQUFXLEdBQUcsRUFBRSxDQUFDO1FBQ2pCLG9CQUFlLEdBQUcsRUFBRSxDQUFDO1FBRXJCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsV0FBTSxHQUFHLElBQUksQ0FBQztRQUNkLGNBQVMsR0FBaUIsU0FBUyxDQUFDO1FBQ3BDLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLHdCQUFtQixHQUFHLEtBQUssQ0FBQztRQUU1QixnQkFBVyxHQUF1QixJQUFJLENBQUM7UUFDdkMsa0JBQWEsR0FBaUIsU0FBUyxDQUFDO1FBRXZDLGtCQUFhLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDMUQseUJBQW9CLEdBQXlDLElBQUksWUFBWSxFQUEwQixDQUFDO1FBRzlHLEVBQUU7SUFDTixDQUFDO0lBRUQsUUFBUTtRQUNKLEVBQUU7SUFDTixDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUNwQixJQUFJLENBQUMsbUJBQW1CLEdBQUcsQ0FBQyxJQUFJLENBQUMsbUJBQW1CLENBQUM7WUFDckQsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUM7U0FDckQ7SUFDTCxDQUFDO0lBRUQsc0JBQXNCLENBQUMsSUFBNEI7UUFDL0MsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QyxDQUFDOzttSEFsQ1Esc0JBQXNCO3VHQUF0QixzQkFBc0IsdWNDVG5DLG1xQ0FpQk07MkZEUk8sc0JBQXNCO2tCQUxsQyxTQUFTOytCQUNJLG9CQUFvQjswRUFLckIsS0FBSztzQkFBYixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLG1CQUFtQjtzQkFBM0IsS0FBSztnQkFFRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBRUksYUFBYTtzQkFBdEIsTUFBTTtnQkFDRyxvQkFBb0I7c0JBQTdCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUGVwU3R5bGVUeXBlIH0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWInO1xuaW1wb3J0IHsgSVBlcE1lbnVJdGVtQ2xpY2tFdmVudCwgUGVwTWVudUl0ZW0gfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9tZW51JztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdwZXAtZHJhZ2dhYmxlLWl0ZW0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEcmFnZ2FibGVJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBASW5wdXQoKSB0aXRsZSA9ICcnO1xuICAgIEBJbnB1dCgpIHRpdGxlUHJlZml4ID0gJyc7XG4gICAgQElucHV0KCkgdGl0bGVDbGFzc05hbWVzID0gJyc7XG4gICAgQElucHV0KCkgZGF0YTogYW55O1xuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gICAgQElucHV0KCkgc2hhZG93ID0gdHJ1ZTtcbiAgICBASW5wdXQoKSBzdHlsZVR5cGU6IFBlcFN0eWxlVHlwZSA9ICdyZWd1bGFyJztcbiAgICBASW5wdXQoKSB0b2dnbGVDb250ZW50ID0gZmFsc2U7XG4gICAgQElucHV0KCkgaXNUb2dnbGVDb250ZW50T3BlbiA9IGZhbHNlO1xuXG4gICAgQElucHV0KCkgYWN0aW9uc01lbnU6IEFycmF5PFBlcE1lbnVJdGVtPiA9IG51bGw7XG4gICAgQElucHV0KCkgbWVudVN0eWxlVHlwZTogUGVwU3R5bGVUeXBlID0gJ3JlZ3VsYXInO1xuXG4gICAgQE91dHB1dCgpIGNvbnRlbnRUb2dnbGU6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgICBAT3V0cHV0KCkgYWN0aW9uc01lbnVJdGVtQ2xpY2s6IEV2ZW50RW1pdHRlcjxJUGVwTWVudUl0ZW1DbGlja0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8SVBlcE1lbnVJdGVtQ2xpY2tFdmVudD4oKTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICAvL1xuICAgIH1cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICAvL1xuICAgIH1cblxuICAgIG9uVG9nZ2xlQ29udGVudCgpIHtcbiAgICAgICAgaWYgKHRoaXMudG9nZ2xlQ29udGVudCkge1xuICAgICAgICAgICAgdGhpcy5pc1RvZ2dsZUNvbnRlbnRPcGVuID0gIXRoaXMuaXNUb2dnbGVDb250ZW50T3BlbjtcbiAgICAgICAgICAgIHRoaXMuY29udGVudFRvZ2dsZS5lbWl0KHRoaXMuaXNUb2dnbGVDb250ZW50T3Blbik7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBvbkFjdGlvbnNNZW51SXRlbUNsaWNrKGl0ZW06IElQZXBNZW51SXRlbUNsaWNrRXZlbnQpe1xuICAgICAgICB0aGlzLmFjdGlvbnNNZW51SXRlbUNsaWNrLmVtaXQoaXRlbSk7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInBlcC1kcmFnZ2FibGUtaXRlbS1jb250YWluZXJcIiBjbGFzcz1cInt7IHN0eWxlVHlwZSB9fVwiIFxuICAgIFtuZ0NsYXNzXT1cInsgJ3NoYWRvdyc6IHNoYWRvdywgJ2Rpc2FibGUnOiBkaXNhYmxlZCwgJ3RvZ2dsZS1jb250ZW50JzogdG9nZ2xlQ29udGVudCwgJ3RvZ2dsZS1jb250ZW50LW9wZW4nOiBpc1RvZ2dsZUNvbnRlbnRPcGVuIH1cIlxuICAgID5cbiAgICA8ZGl2IGNsYXNzPVwiXCI+XG4gICAgICAgIDxwZXAtYnV0dG9uIGNsYXNzTmFtZXM9XCJsb2NrLWV2ZW50c1wiIHNpemVUeXBlPVwieHNcIiBpY29uTmFtZT1cInN5c3RlbV9tb3ZlXCI+PC9wZXAtYnV0dG9uPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJpdGVtLXRpdGxlLWNvbnRhaW5lclwiIFtuZ0NsYXNzXT1cInsgJ3NoYWRvdyc6IHNoYWRvdyB9XCIgKGNsaWNrKT1cIm9uVG9nZ2xlQ29udGVudCgpO1wiPlxuICAgICAgICA8c3BhbiAqbmdJZj1cInRpdGxlUHJlZml4ICE9PSAnJ1wiIGNsYXNzPVwiYm9keS1zbSBlbGxpcHNpcyBpdGVtLXRpdGxlXCI+e3t0aXRsZVByZWZpeH19PC9zcGFuPlxuICAgICAgICA8c3BhbiAqbmdJZj1cInRpdGxlICE9PSAnJ1wiIGNsYXNzPVwiYm9keS1zbSBib2xkIGVsbGlwc2lzIGl0ZW0tdGl0bGUge3t0aXRsZUNsYXNzTmFtZXN9fVwiIHRpdGxlPVwie3t0aXRsZX19XCI+e3t0aXRsZX19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJhY3Rpb25zXCI+XG4gICAgICAgIDxwZXAtbWVudSAqbmdJZj1cImFjdGlvbnNNZW51XCIgc2l6ZVR5cGU9XCJ4c1wiIFtzdHlsZVR5cGVdPVwibWVudVN0eWxlVHlwZVwiIFtpdGVtc109XCJhY3Rpb25zTWVudVwiIChtZW51SXRlbUNsaWNrKT1cIm9uQWN0aW9uc01lbnVJdGVtQ2xpY2soJGV2ZW50KVwiPjwvcGVwLW1lbnU+XG4gICAgICAgIDxuZy1jb250ZW50ICpuZ0lmPVwiIWFjdGlvbnNNZW51XCIgc2VsZWN0PVwiW3BlcC1hY3Rpb25zXVwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ0lmPVwidG9nZ2xlQ29udGVudCAmJiBpc1RvZ2dsZUNvbnRlbnRPcGVuXCIgY2xhc3M9XCJ0b2dnbGUtY29udGFpbmVyXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltwZXAtdG9nZ2xlLWNvbnRlbnRdXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuPC9kaXY+Il19
64
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFTdkUsTUFBTSxPQUFPLHlCQUF5QjtJQWdCbEM7UUFmUyxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBRVgsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQUNqQixvQkFBZSxHQUFHLEVBQUUsQ0FBQztRQUNyQixXQUFNLEdBQUcsSUFBSSxDQUFDO1FBQ2QsY0FBUyxHQUFpQixTQUFTLENBQUM7UUFDcEMsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFDdEIsd0JBQW1CLEdBQUcsS0FBSyxDQUFDO1FBQzVCLGdCQUFXLEdBQXVCLElBQUksQ0FBQztRQUN2QyxrQkFBYSxHQUFpQixTQUFTLENBQUM7UUFFdkMsa0JBQWEsR0FBMEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMxRCx5QkFBb0IsR0FBeUMsSUFBSSxZQUFZLEVBQTBCLENBQUM7UUFHOUcsRUFBRTtJQUNOLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQ3BCLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQztZQUNyRCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQztTQUNyRDtJQUNMLENBQUM7SUFFRCxzQkFBc0IsQ0FBQyxJQUE0QjtRQUMvQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pDLENBQUM7O3NIQTdCUSx5QkFBeUI7MEdBQXpCLHlCQUF5Qix1Y0NUdEMsbXFDQWlCTTsyRkRSTyx5QkFBeUI7a0JBTHJDLFNBQVM7K0JBQ0ksb0JBQW9COzBFQUtyQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csbUJBQW1CO3NCQUEzQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFFSSxhQUFhO3NCQUF0QixNQUFNO2dCQUNHLG9CQUFvQjtzQkFBN0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQZXBTdHlsZVR5cGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5pbXBvcnQgeyBJUGVwTWVudUl0ZW1DbGlja0V2ZW50LCBQZXBNZW51SXRlbSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL21lbnUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1kcmFnZ2FibGUtaXRlbScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyYWdnYWJsZS1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFBlcERyYWdnYWJsZUl0ZW1Db21wb25lbnQge1xuICAgIEBJbnB1dCgpIHRpdGxlID0gJyc7XG4gICAgQElucHV0KCkgZGF0YTogYW55O1xuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gICAgQElucHV0KCkgdGl0bGVQcmVmaXggPSAnJztcbiAgICBASW5wdXQoKSB0aXRsZUNsYXNzTmFtZXMgPSAnJztcbiAgICBASW5wdXQoKSBzaGFkb3cgPSB0cnVlO1xuICAgIEBJbnB1dCgpIHN0eWxlVHlwZTogUGVwU3R5bGVUeXBlID0gJ3JlZ3VsYXInO1xuICAgIEBJbnB1dCgpIHRvZ2dsZUNvbnRlbnQgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBpc1RvZ2dsZUNvbnRlbnRPcGVuID0gZmFsc2U7XG4gICAgQElucHV0KCkgYWN0aW9uc01lbnU6IEFycmF5PFBlcE1lbnVJdGVtPiA9IG51bGw7XG4gICAgQElucHV0KCkgbWVudVN0eWxlVHlwZTogUGVwU3R5bGVUeXBlID0gJ3JlZ3VsYXInO1xuXG4gICAgQE91dHB1dCgpIGNvbnRlbnRUb2dnbGU6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgICBAT3V0cHV0KCkgYWN0aW9uc01lbnVJdGVtQ2xpY2s6IEV2ZW50RW1pdHRlcjxJUGVwTWVudUl0ZW1DbGlja0V2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8SVBlcE1lbnVJdGVtQ2xpY2tFdmVudD4oKTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICAvL1xuICAgIH1cblxuICAgIG9uVG9nZ2xlQ29udGVudCgpIHtcbiAgICAgICAgaWYgKHRoaXMudG9nZ2xlQ29udGVudCkge1xuICAgICAgICAgICAgdGhpcy5pc1RvZ2dsZUNvbnRlbnRPcGVuID0gIXRoaXMuaXNUb2dnbGVDb250ZW50T3BlbjtcbiAgICAgICAgICAgIHRoaXMuY29udGVudFRvZ2dsZS5lbWl0KHRoaXMuaXNUb2dnbGVDb250ZW50T3Blbik7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBvbkFjdGlvbnNNZW51SXRlbUNsaWNrKGl0ZW06IElQZXBNZW51SXRlbUNsaWNrRXZlbnQpIHtcbiAgICAgICAgdGhpcy5hY3Rpb25zTWVudUl0ZW1DbGljay5lbWl0KGl0ZW0pO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJwZXAtZHJhZ2dhYmxlLWl0ZW0tY29udGFpbmVyXCIgY2xhc3M9XCJ7eyBzdHlsZVR5cGUgfX1cIiBcbiAgICBbbmdDbGFzc109XCJ7ICdzaGFkb3cnOiBzaGFkb3csICdkaXNhYmxlJzogZGlzYWJsZWQsICd0b2dnbGUtY29udGVudCc6IHRvZ2dsZUNvbnRlbnQsICd0b2dnbGUtY29udGVudC1vcGVuJzogaXNUb2dnbGVDb250ZW50T3BlbiB9XCJcbiAgICA+XG4gICAgPGRpdiBjbGFzcz1cIlwiPlxuICAgICAgICA8cGVwLWJ1dHRvbiBjbGFzc05hbWVzPVwibG9jay1ldmVudHNcIiBzaXplVHlwZT1cInhzXCIgaWNvbk5hbWU9XCJzeXN0ZW1fbW92ZVwiPjwvcGVwLWJ1dHRvbj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiaXRlbS10aXRsZS1jb250YWluZXJcIiBbbmdDbGFzc109XCJ7ICdzaGFkb3cnOiBzaGFkb3cgfVwiIChjbGljayk9XCJvblRvZ2dsZUNvbnRlbnQoKTtcIj5cbiAgICAgICAgPHNwYW4gKm5nSWY9XCJ0aXRsZVByZWZpeCAhPT0gJydcIiBjbGFzcz1cImJvZHktc20gZWxsaXBzaXMgaXRlbS10aXRsZVwiPnt7dGl0bGVQcmVmaXh9fTwvc3Bhbj5cbiAgICAgICAgPHNwYW4gKm5nSWY9XCJ0aXRsZSAhPT0gJydcIiBjbGFzcz1cImJvZHktc20gYm9sZCBlbGxpcHNpcyBpdGVtLXRpdGxlIHt7dGl0bGVDbGFzc05hbWVzfX1cIiB0aXRsZT1cInt7dGl0bGV9fVwiPnt7dGl0bGV9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uc1wiPlxuICAgICAgICA8cGVwLW1lbnUgKm5nSWY9XCJhY3Rpb25zTWVudVwiIHNpemVUeXBlPVwieHNcIiBbc3R5bGVUeXBlXT1cIm1lbnVTdHlsZVR5cGVcIiBbaXRlbXNdPVwiYWN0aW9uc01lbnVcIiAobWVudUl0ZW1DbGljayk9XCJvbkFjdGlvbnNNZW51SXRlbUNsaWNrKCRldmVudClcIj48L3BlcC1tZW51PlxuICAgICAgICA8bmctY29udGVudCAqbmdJZj1cIiFhY3Rpb25zTWVudVwiIHNlbGVjdD1cIltwZXAtYWN0aW9uc11cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cInRvZ2dsZUNvbnRlbnQgJiYgaXNUb2dnbGVDb250ZW50T3BlblwiIGNsYXNzPVwidG9nZ2xlLWNvbnRhaW5lclwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbcGVwLXRvZ2dsZS1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==
package/esm2020/draggable-items/draggable-items.component.mjs CHANGED
@@ -4,8 +4,8 @@ import { map, startWith } from 'rxjs/operators';
4
4
  import { BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';
5
5
  import * as i0 from "@angular/core";
6
6
  import * as i1 from "@angular/common";
7
- import * as i2 from "@pepperi-addons/ngx-lib/search";
8
- import * as i3 from "@angular/cdk/drag-drop";
7
+ import * as i2 from "@angular/cdk/drag-drop";
8
+ import * as i3 from "@pepperi-addons/ngx-lib/search";
9
9
  import * as i4 from "./draggable-item/draggable-item.component";
10
10
  export class PepDraggableItemsComponent extends BaseDestroyerDirective {
11
11
  constructor() {
@@ -66,7 +66,7 @@ export class PepDraggableItemsComponent extends BaseDestroyerDirective {
66
66
  }
67
67
  }
68
68
  PepDraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
69
- 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" }, usesInheritance: true, 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%),.08)}\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.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: i4.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
69
+ 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" }, usesInheritance: true, 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%),.08)}\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: "directive", type: i2.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: i2.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: i2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i3.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "component", type: i4.PepDraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled", "titlePrefix", "titleClassNames", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
70
70
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, decorators: [{
71
71
  type: Component,
72
72
  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%),.08)}\n"] }]
package/esm2020/draggable-items/draggable-items.module.mjs CHANGED
@@ -7,7 +7,7 @@ import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
7
7
  import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
8
8
  import { DragDropModule } from '@angular/cdk/drag-drop';
9
9
  import { PepDraggableItemsComponent } from './draggable-items.component';
10
- import { DraggableItemComponent } from './draggable-item/draggable-item.component';
10
+ import { PepDraggableItemComponent } from './draggable-item/draggable-item.component';
11
11
  import { PepIconModule, pepIconSystemMove, } from '@pepperi-addons/ngx-lib/icon';
12
12
  import * as i0 from "@angular/core";
13
13
  import * as i1 from "@pepperi-addons/ngx-lib/icon";
@@ -21,44 +21,44 @@ export class PepDraggableItemsModule {
21
21
  }
22
22
  PepDraggableItemsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
23
23
  PepDraggableItemsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, declarations: [PepDraggableItemsComponent,
24
- DraggableItemComponent], imports: [CommonModule,
24
+ PepDraggableItemComponent], imports: [CommonModule,
25
25
  ReactiveFormsModule,
26
+ DragDropModule,
26
27
  PepNgxLibModule,
27
28
  PepButtonModule,
28
29
  PepIconModule,
29
30
  PepMenuModule,
30
- PepSearchModule,
31
- DragDropModule], exports: [PepDraggableItemsComponent,
32
- DraggableItemComponent] });
31
+ PepSearchModule], exports: [PepDraggableItemsComponent,
32
+ PepDraggableItemComponent] });
33
33
  PepDraggableItemsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, imports: [CommonModule,
34
34
  ReactiveFormsModule,
35
+ DragDropModule,
35
36
  PepNgxLibModule,
36
37
  PepButtonModule,
37
38
  PepIconModule,
38
39
  PepMenuModule,
39
- PepSearchModule,
40
- DragDropModule] });
40
+ PepSearchModule] });
41
41
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, decorators: [{
42
42
  type: NgModule,
43
43
  args: [{
44
44
  declarations: [
45
45
  PepDraggableItemsComponent,
46
- DraggableItemComponent
46
+ PepDraggableItemComponent
47
47
  ],
48
48
  imports: [
49
49
  CommonModule,
50
50
  ReactiveFormsModule,
51
+ DragDropModule,
51
52
  PepNgxLibModule,
52
53
  PepButtonModule,
53
54
  PepIconModule,
54
55
  PepMenuModule,
55
56
  PepSearchModule,
56
- DragDropModule
57
57
  ],
58
58
  exports: [
59
59
  PepDraggableItemsComponent,
60
- DraggableItemComponent
60
+ PepDraggableItemComponent
61
61
  ],
62
62
  }]
63
63
  }], ctorParameters: function () { return [{ type: i1.PepIconRegistry }]; } });
64
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL2RyYWdnYWJsZS1pdGVtcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzFELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBRTdELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUV4RCxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN6RSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUNuRixPQUFPLEVBQ0gsYUFBYSxFQUViLGlCQUFpQixHQUNwQixNQUFNLDhCQUE4QixDQUFDOzs7QUFzQnRDLE1BQU0sT0FBTyx1QkFBdUI7SUFDaEMsWUFBb0IsZUFBZ0M7UUFBaEMsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQ2hELElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDO1lBQy9CLGlCQUFpQjtTQUNwQixDQUFDLENBQUM7SUFDUCxDQUFDOztvSEFMUSx1QkFBdUI7cUhBQXZCLHVCQUF1QixpQkFsQjVCLDBCQUEwQjtRQUMxQixzQkFBc0IsYUFHdEIsWUFBWTtRQUNaLG1CQUFtQjtRQUNuQixlQUFlO1FBQ2YsZUFBZTtRQUNmLGFBQWE7UUFDYixhQUFhO1FBQ2IsZUFBZTtRQUNmLGNBQWMsYUFHZCwwQkFBMEI7UUFDMUIsc0JBQXNCO3FIQUdqQix1QkFBdUIsWUFkNUIsWUFBWTtRQUNaLG1CQUFtQjtRQUNuQixlQUFlO1FBQ2YsZUFBZTtRQUNmLGFBQWE7UUFDYixhQUFhO1FBQ2IsZUFBZTtRQUNmLGNBQWM7MkZBT1QsdUJBQXVCO2tCQXBCbkMsUUFBUTttQkFBQztvQkFDTixZQUFZLEVBQUU7d0JBQ1YsMEJBQTBCO3dCQUMxQixzQkFBc0I7cUJBQ3pCO29CQUNELE9BQU8sRUFBRTt3QkFDTCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsZUFBZTt3QkFDZixlQUFlO3dCQUNmLGFBQWE7d0JBQ2IsYUFBYTt3QkFDYixlQUFlO3dCQUNmLGNBQWM7cUJBQ2pCO29CQUNELE9BQU8sRUFBRTt3QkFDTCwwQkFBMEI7d0JBQzFCLHNCQUFzQjtxQkFDekI7aUJBQ0oiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmltcG9ydCB7IFBlcE5neExpYk1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliJztcbmltcG9ydCB7IFBlcEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2J1dHRvbic7XG5pbXBvcnQgeyBQZXBTZWFyY2hNb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9zZWFyY2gnO1xuaW1wb3J0IHsgUGVwTWVudU1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL21lbnUnO1xuXG5pbXBvcnQgeyBEcmFnRHJvcE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kcmFnLWRyb3AnO1xuXG5pbXBvcnQgeyBQZXBEcmFnZ2FibGVJdGVtc0NvbXBvbmVudCB9IGZyb20gJy4vZHJhZ2dhYmxlLWl0ZW1zLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEcmFnZ2FibGVJdGVtQ29tcG9uZW50IH0gZnJvbSAnLi9kcmFnZ2FibGUtaXRlbS9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQnO1xuaW1wb3J0IHtcbiAgICBQZXBJY29uTW9kdWxlLFxuICAgIFBlcEljb25SZWdpc3RyeSxcbiAgICBwZXBJY29uU3lzdGVtTW92ZSxcbn0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvaWNvbic7XG5cbkBOZ01vZHVsZSh7XG4gICAgZGVjbGFyYXRpb25zOiBbXG4gICAgICAgIFBlcERyYWdnYWJsZUl0ZW1zQ29tcG9uZW50LFxuICAgICAgICBEcmFnZ2FibGVJdGVtQ29tcG9uZW50XG4gICAgXSxcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIENvbW1vbk1vZHVsZSxcbiAgICAgICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICAgICAgUGVwTmd4TGliTW9kdWxlLFxuICAgICAgICBQZXBCdXR0b25Nb2R1bGUsXG4gICAgICAgIFBlcEljb25Nb2R1bGUsXG4gICAgICAgIFBlcE1lbnVNb2R1bGUsXG4gICAgICAgIFBlcFNlYXJjaE1vZHVsZSxcbiAgICAgICAgRHJhZ0Ryb3BNb2R1bGVcbiAgICBdLFxuICAgIGV4cG9ydHM6IFtcbiAgICAgICAgUGVwRHJhZ2dhYmxlSXRlbXNDb21wb25lbnQsXG4gICAgICAgIERyYWdnYWJsZUl0ZW1Db21wb25lbnRcbiAgICBdLFxufSlcbmV4cG9ydCBjbGFzcyBQZXBEcmFnZ2FibGVJdGVtc01vZHVsZSB7XG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBwZXBJY29uUmVnaXN0cnk6IFBlcEljb25SZWdpc3RyeSkge1xuICAgICAgICB0aGlzLnBlcEljb25SZWdpc3RyeS5yZWdpc3Rlckljb25zKFtcbiAgICAgICAgICAgIHBlcEljb25TeXN0ZW1Nb3ZlLFxuICAgICAgICBdKTtcbiAgICB9XG59XG4iXX0=
64
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW1zLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvZHJhZ2dhYmxlLWl0ZW1zL2RyYWdnYWJsZS1pdGVtcy5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQzFELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBRTdELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUV4RCxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN6RSxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUN0RixPQUFPLEVBQ0gsYUFBYSxFQUViLGlCQUFpQixHQUNwQixNQUFNLDhCQUE4QixDQUFDOzs7QUFzQnRDLE1BQU0sT0FBTyx1QkFBdUI7SUFDaEMsWUFBb0IsZUFBZ0M7UUFBaEMsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQ2hELElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDO1lBQy9CLGlCQUFpQjtTQUNwQixDQUFDLENBQUM7SUFDUCxDQUFDOztvSEFMUSx1QkFBdUI7cUhBQXZCLHVCQUF1QixpQkFsQjVCLDBCQUEwQjtRQUMxQix5QkFBeUIsYUFHekIsWUFBWTtRQUNaLG1CQUFtQjtRQUNuQixjQUFjO1FBQ2QsZUFBZTtRQUNmLGVBQWU7UUFDZixhQUFhO1FBQ2IsYUFBYTtRQUNiLGVBQWUsYUFHZiwwQkFBMEI7UUFDMUIseUJBQXlCO3FIQUdwQix1QkFBdUIsWUFkNUIsWUFBWTtRQUNaLG1CQUFtQjtRQUNuQixjQUFjO1FBQ2QsZUFBZTtRQUNmLGVBQWU7UUFDZixhQUFhO1FBQ2IsYUFBYTtRQUNiLGVBQWU7MkZBT1YsdUJBQXVCO2tCQXBCbkMsUUFBUTttQkFBQztvQkFDTixZQUFZLEVBQUU7d0JBQ1YsMEJBQTBCO3dCQUMxQix5QkFBeUI7cUJBQzVCO29CQUNELE9BQU8sRUFBRTt3QkFDTCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsY0FBYzt3QkFDZCxlQUFlO3dCQUNmLGVBQWU7d0JBQ2YsYUFBYTt3QkFDYixhQUFhO3dCQUNiLGVBQWU7cUJBQ2xCO29CQUNELE9BQU8sRUFBRTt3QkFDTCwwQkFBMEI7d0JBQzFCLHlCQUF5QjtxQkFDNUI7aUJBQ0oiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmltcG9ydCB7IFBlcE5neExpYk1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliJztcbmltcG9ydCB7IFBlcEJ1dHRvbk1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL2J1dHRvbic7XG5pbXBvcnQgeyBQZXBTZWFyY2hNb2R1bGUgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYi9zZWFyY2gnO1xuaW1wb3J0IHsgUGVwTWVudU1vZHVsZSB9IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliL21lbnUnO1xuXG5pbXBvcnQgeyBEcmFnRHJvcE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kcmFnLWRyb3AnO1xuXG5pbXBvcnQgeyBQZXBEcmFnZ2FibGVJdGVtc0NvbXBvbmVudCB9IGZyb20gJy4vZHJhZ2dhYmxlLWl0ZW1zLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBQZXBEcmFnZ2FibGVJdGVtQ29tcG9uZW50IH0gZnJvbSAnLi9kcmFnZ2FibGUtaXRlbS9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQnO1xuaW1wb3J0IHtcbiAgICBQZXBJY29uTW9kdWxlLFxuICAgIFBlcEljb25SZWdpc3RyeSxcbiAgICBwZXBJY29uU3lzdGVtTW92ZSxcbn0gZnJvbSAnQHBlcHBlcmktYWRkb25zL25neC1saWIvaWNvbic7XG5cbkBOZ01vZHVsZSh7XG4gICAgZGVjbGFyYXRpb25zOiBbXG4gICAgICAgIFBlcERyYWdnYWJsZUl0ZW1zQ29tcG9uZW50LFxuICAgICAgICBQZXBEcmFnZ2FibGVJdGVtQ29tcG9uZW50XG4gICAgXSxcbiAgICBpbXBvcnRzOiBbXG4gICAgICAgIENvbW1vbk1vZHVsZSxcbiAgICAgICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICAgICAgRHJhZ0Ryb3BNb2R1bGUsXG4gICAgICAgIFBlcE5neExpYk1vZHVsZSxcbiAgICAgICAgUGVwQnV0dG9uTW9kdWxlLFxuICAgICAgICBQZXBJY29uTW9kdWxlLFxuICAgICAgICBQZXBNZW51TW9kdWxlLFxuICAgICAgICBQZXBTZWFyY2hNb2R1bGUsXG4gICAgXSxcbiAgICBleHBvcnRzOiBbXG4gICAgICAgIFBlcERyYWdnYWJsZUl0ZW1zQ29tcG9uZW50LFxuICAgICAgICBQZXBEcmFnZ2FibGVJdGVtQ29tcG9uZW50XG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgUGVwRHJhZ2dhYmxlSXRlbXNNb2R1bGUge1xuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgcGVwSWNvblJlZ2lzdHJ5OiBQZXBJY29uUmVnaXN0cnkpIHtcbiAgICAgICAgdGhpcy5wZXBJY29uUmVnaXN0cnkucmVnaXN0ZXJJY29ucyhbXG4gICAgICAgICAgICBwZXBJY29uU3lzdGVtTW92ZSxcbiAgICAgICAgXSk7XG4gICAgfVxufVxuIl19
package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs CHANGED
@@ -8,20 +8,20 @@ import * as i3 from '@pepperi-addons/ngx-lib/menu';
8
8
  import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
9
9
  import { FormControl, ReactiveFormsModule } from '@angular/forms';
10
10
  import { BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
11
- import * as i2$1 from '@pepperi-addons/ngx-lib/search';
11
+ import * as i3$1 from '@pepperi-addons/ngx-lib/search';
12
12
  import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
13
- import * as i3$1 from '@angular/cdk/drag-drop';
13
+ import * as i2$1 from '@angular/cdk/drag-drop';
14
14
  import { DragDropModule } from '@angular/cdk/drag-drop';
15
15
  import { startWith, map } from 'rxjs/operators';
16
16
  import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
17
17
  import { pepIconSystemMove, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
18
18
 
19
- class DraggableItemComponent {
19
+ class PepDraggableItemComponent {
20
20
  constructor() {
21
21
  this.title = '';
22
+ this.disabled = false;
22
23
  this.titlePrefix = '';
23
24
  this.titleClassNames = '';
24
- this.disabled = false;
25
25
  this.shadow = true;
26
26
  this.styleType = 'regular';
27
27
  this.toggleContent = false;
@@ -32,9 +32,6 @@ class DraggableItemComponent {
32
32
  this.actionsMenuItemClick = new EventEmitter();
33
33
  //
34
34
  }
35
- ngOnInit() {
36
- //
37
- }
38
35
  onToggleContent() {
39
36
  if (this.toggleContent) {
40
37
  this.isToggleContentOpen = !this.isToggleContentOpen;
@@ -45,21 +42,21 @@ class DraggableItemComponent {
45
42
  this.actionsMenuItemClick.emit(item);
46
43
  }
47
44
  }
48
- DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
49
- DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", titlePrefix: "titlePrefix", titleClassNames: "titleClassNames", data: "data", disabled: "disabled", shadow: "shadow", styleType: "styleType", toggleContent: "toggleContent", isToggleContentOpen: "isToggleContentOpen", actionsMenu: "actionsMenu", menuStyleType: "menuStyleType" }, outputs: { contentToggle: "contentToggle", actionsMenuItemClick: "actionsMenuItemClick" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
50
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, decorators: [{
45
+ PepDraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
46
+ PepDraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled", titlePrefix: "titlePrefix", titleClassNames: "titleClassNames", shadow: "shadow", styleType: "styleType", toggleContent: "toggleContent", isToggleContentOpen: "isToggleContentOpen", actionsMenu: "actionsMenu", menuStyleType: "menuStyleType" }, outputs: { contentToggle: "contentToggle", actionsMenuItemClick: "actionsMenuItemClick" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
47
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemComponent, decorators: [{
51
48
  type: Component,
52
49
  args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"] }]
53
50
  }], ctorParameters: function () { return []; }, propDecorators: { title: [{
54
51
  type: Input
55
- }], titlePrefix: [{
56
- type: Input
57
- }], titleClassNames: [{
58
- type: Input
59
52
  }], data: [{
60
53
  type: Input
61
54
  }], disabled: [{
62
55
  type: Input
56
+ }], titlePrefix: [{
57
+ type: Input
58
+ }], titleClassNames: [{
59
+ type: Input
63
60
  }], shadow: [{
64
61
  type: Input
65
62
  }], styleType: [{
@@ -138,7 +135,7 @@ class PepDraggableItemsComponent extends BaseDestroyerDirective {
138
135
  }
139
136
  }
140
137
  PepDraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
141
- 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" }, usesInheritance: true, 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%),.08)}\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$1.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$1.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$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
138
+ 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" }, usesInheritance: true, 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%),.08)}\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: "directive", type: i2$1.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: i2$1.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: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i3$1.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "component", type: PepDraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled", "titlePrefix", "titleClassNames", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
142
139
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, decorators: [{
143
140
  type: Component,
144
141
  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%),.08)}\n"] }]
@@ -174,43 +171,43 @@ class PepDraggableItemsModule {
174
171
  }
175
172
  PepDraggableItemsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
176
173
  PepDraggableItemsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, declarations: [PepDraggableItemsComponent,
177
- DraggableItemComponent], imports: [CommonModule,
174
+ PepDraggableItemComponent], imports: [CommonModule,
178
175
  ReactiveFormsModule,
176
+ DragDropModule,
179
177
  PepNgxLibModule,
180
178
  PepButtonModule,
181
179
  PepIconModule,
182
180
  PepMenuModule,
183
- PepSearchModule,
184
- DragDropModule], exports: [PepDraggableItemsComponent,
185
- DraggableItemComponent] });
181
+ PepSearchModule], exports: [PepDraggableItemsComponent,
182
+ PepDraggableItemComponent] });
186
183
  PepDraggableItemsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, imports: [CommonModule,
187
184
  ReactiveFormsModule,
185
+ DragDropModule,
188
186
  PepNgxLibModule,
189
187
  PepButtonModule,
190
188
  PepIconModule,
191
189
  PepMenuModule,
192
- PepSearchModule,
193
- DragDropModule] });
190
+ PepSearchModule] });
194
191
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, decorators: [{
195
192
  type: NgModule,
196
193
  args: [{
197
194
  declarations: [
198
195
  PepDraggableItemsComponent,
199
- DraggableItemComponent
196
+ PepDraggableItemComponent
200
197
  ],
201
198
  imports: [
202
199
  CommonModule,
203
200
  ReactiveFormsModule,
201
+ DragDropModule,
204
202
  PepNgxLibModule,
205
203
  PepButtonModule,
206
204
  PepIconModule,
207
205
  PepMenuModule,
208
206
  PepSearchModule,
209
- DragDropModule
210
207
  ],
211
208
  exports: [
212
209
  PepDraggableItemsComponent,
213
- DraggableItemComponent
210
+ PepDraggableItemComponent
214
211
  ],
215
212
  }]
216
213
  }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
@@ -223,5 +220,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
223
220
  * Generated bundle index. Do not edit.
224
221
  */
225
222
 
226
- export { DraggableItemComponent, PepDraggableItemsComponent, PepDraggableItemsModule };
223
+ export { PepDraggableItemComponent, PepDraggableItemsComponent, PepDraggableItemsModule };
227
224
  //# sourceMappingURL=pepperi-addons-ngx-lib-draggable-items.mjs.map
package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs.map CHANGED
@@ -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';\nimport { PepStyleType } from '@pepperi-addons/ngx-lib';\nimport { IPepMenuItemClickEvent, PepMenuItem } from '@pepperi-addons/ngx-lib/menu';\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() titlePrefix = '';\n @Input() titleClassNames = '';\n @Input() data: any;\n @Input() disabled = false;\n @Input() shadow = true;\n @Input() styleType: PepStyleType = 'regular';\n @Input() toggleContent = false;\n @Input() isToggleContentOpen = false;\n\n @Input() actionsMenu: Array<PepMenuItem> = null;\n @Input() menuStyleType: PepStyleType = 'regular';\n\n @Output() contentToggle: EventEmitter<boolean> = new EventEmitter();\n @Output() actionsMenuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n\n constructor() {\n //\n }\n\n ngOnInit(): void {\n //\n }\n\n onToggleContent() {\n if (this.toggleContent) {\n this.isToggleContentOpen = !this.isToggleContentOpen;\n this.contentToggle.emit(this.isToggleContentOpen);\n }\n }\n\n onActionsMenuItemClick(item: IPepMenuItemClickEvent){\n this.actionsMenuItemClick.emit(item);\n }\n}\n","<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></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 } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType, BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';\n\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 extends BaseDestroyerDirective implements OnInit {\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 \n constructor() {\n super();\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 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 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';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\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 PepMenuModule,\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","i3","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, Input, Output } from '@angular/core';\nimport { PepStyleType } from '@pepperi-addons/ngx-lib';\nimport { IPepMenuItemClickEvent, PepMenuItem } from '@pepperi-addons/ngx-lib/menu';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class PepDraggableItemComponent {\n @Input() title = '';\n @Input() data: any;\n @Input() disabled = false;\n @Input() titlePrefix = '';\n @Input() titleClassNames = '';\n @Input() shadow = true;\n @Input() styleType: PepStyleType = 'regular';\n @Input() toggleContent = false;\n @Input() isToggleContentOpen = false;\n @Input() actionsMenu: Array<PepMenuItem> = null;\n @Input() menuStyleType: PepStyleType = 'regular';\n\n @Output() contentToggle: EventEmitter<boolean> = new EventEmitter();\n @Output() actionsMenuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n\n constructor() {\n //\n }\n\n onToggleContent() {\n if (this.toggleContent) {\n this.isToggleContentOpen = !this.isToggleContentOpen;\n this.contentToggle.emit(this.isToggleContentOpen);\n }\n }\n\n onActionsMenuItemClick(item: IPepMenuItemClickEvent) {\n this.actionsMenuItemClick.emit(item);\n }\n}\n","<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></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 } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType, BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';\n\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 extends BaseDestroyerDirective implements OnInit {\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 \n constructor() {\n super();\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 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 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';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { PepDraggableItemsComponent } from './draggable-items.component';\nimport { PepDraggableItemComponent } 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 PepDraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n DragDropModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepMenuModule,\n PepSearchModule,\n ],\n exports: [\n PepDraggableItemsComponent,\n PepDraggableItemComponent\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","i3","i4.PepDraggableItemComponent","i1"],"mappings":"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"}
package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs CHANGED
@@ -8,20 +8,20 @@ import * as i3 from '@pepperi-addons/ngx-lib/menu';
8
8
  import { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';
9
9
  import { FormControl, ReactiveFormsModule } from '@angular/forms';
10
10
  import { BaseDestroyerDirective, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
11
- import * as i2$1 from '@pepperi-addons/ngx-lib/search';
11
+ import * as i3$1 from '@pepperi-addons/ngx-lib/search';
12
12
  import { PepSearchModule } from '@pepperi-addons/ngx-lib/search';
13
- import * as i3$1 from '@angular/cdk/drag-drop';
13
+ import * as i2$1 from '@angular/cdk/drag-drop';
14
14
  import { DragDropModule } from '@angular/cdk/drag-drop';
15
15
  import { startWith, map } from 'rxjs/operators';
16
16
  import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
17
17
  import { pepIconSystemMove, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
18
18
 
19
- class DraggableItemComponent {
19
+ class PepDraggableItemComponent {
20
20
  constructor() {
21
21
  this.title = '';
22
+ this.disabled = false;
22
23
  this.titlePrefix = '';
23
24
  this.titleClassNames = '';
24
- this.disabled = false;
25
25
  this.shadow = true;
26
26
  this.styleType = 'regular';
27
27
  this.toggleContent = false;
@@ -32,9 +32,6 @@ class DraggableItemComponent {
32
32
  this.actionsMenuItemClick = new EventEmitter();
33
33
  //
34
34
  }
35
- ngOnInit() {
36
- //
37
- }
38
35
  onToggleContent() {
39
36
  if (this.toggleContent) {
40
37
  this.isToggleContentOpen = !this.isToggleContentOpen;
@@ -45,21 +42,21 @@ class DraggableItemComponent {
45
42
  this.actionsMenuItemClick.emit(item);
46
43
  }
47
44
  }
48
- DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
49
- DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", titlePrefix: "titlePrefix", titleClassNames: "titleClassNames", data: "data", disabled: "disabled", shadow: "shadow", styleType: "styleType", toggleContent: "toggleContent", isToggleContentOpen: "isToggleContentOpen", actionsMenu: "actionsMenu", menuStyleType: "menuStyleType" }, outputs: { contentToggle: "contentToggle", actionsMenuItemClick: "actionsMenuItemClick" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
50
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, decorators: [{
45
+ PepDraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
46
+ PepDraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled", titlePrefix: "titlePrefix", titleClassNames: "titleClassNames", shadow: "shadow", styleType: "styleType", toggleContent: "toggleContent", isToggleContentOpen: "isToggleContentOpen", actionsMenu: "actionsMenu", menuStyleType: "menuStyleType" }, outputs: { contentToggle: "contentToggle", actionsMenuItemClick: "actionsMenuItemClick" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i3.PepMenuComponent, selector: "pep-menu", inputs: ["text", "iconName", "iconPosition", "type", "styleType", "sizeType", "classNames", "xPosition", "hideOnEmptyItems", "items", "selectedItem", "disabled"], outputs: ["stateChange", "menuItemClick", "menuClick"] }] });
47
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemComponent, decorators: [{
51
48
  type: Component,
52
49
  args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{min-height:2.5rem;height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.shadow{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.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-draggable-item-container.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container.toggle-content .item-title-container:hover{cursor:s-resize}.pep-draggable-item-container.toggle-content.toggle-content-open{height:unset;padding-top:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container.toggle-content.toggle-content-open .item-title-container:hover{cursor:n-resize}.pep-draggable-item-container .item-title-container{height:100%;display:flex;align-items:center;overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .item-title-container .item-title{display:block}.pep-draggable-item-container .actions{z-index:1;display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}.pep-draggable-item-container .toggle-container{padding:var(--pep-spacing-md, .75rem) 0;grid-column:1/-1;display:grid;gap:var(--pep-spacing-lg, 1rem)}\n"] }]
53
50
  }], ctorParameters: function () { return []; }, propDecorators: { title: [{
54
51
  type: Input
55
- }], titlePrefix: [{
56
- type: Input
57
- }], titleClassNames: [{
58
- type: Input
59
52
  }], data: [{
60
53
  type: Input
61
54
  }], disabled: [{
62
55
  type: Input
56
+ }], titlePrefix: [{
57
+ type: Input
58
+ }], titleClassNames: [{
59
+ type: Input
63
60
  }], shadow: [{
64
61
  type: Input
65
62
  }], styleType: [{
@@ -137,7 +134,7 @@ class PepDraggableItemsComponent extends BaseDestroyerDirective {
137
134
  }
138
135
  }
139
136
  PepDraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
140
- 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" }, usesInheritance: true, 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%),.08)}\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$1.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$1.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$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "titlePrefix", "titleClassNames", "data", "disabled", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
137
+ 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" }, usesInheritance: true, 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%),.08)}\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: "directive", type: i2$1.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: i2$1.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: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i3$1.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "component", type: PepDraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled", "titlePrefix", "titleClassNames", "shadow", "styleType", "toggleContent", "isToggleContentOpen", "actionsMenu", "menuStyleType"], outputs: ["contentToggle", "actionsMenuItemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
141
138
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsComponent, decorators: [{
142
139
  type: Component,
143
140
  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%),.08)}\n"] }]
@@ -173,43 +170,43 @@ class PepDraggableItemsModule {
173
170
  }
174
171
  PepDraggableItemsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
175
172
  PepDraggableItemsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, declarations: [PepDraggableItemsComponent,
176
- DraggableItemComponent], imports: [CommonModule,
173
+ PepDraggableItemComponent], imports: [CommonModule,
177
174
  ReactiveFormsModule,
175
+ DragDropModule,
178
176
  PepNgxLibModule,
179
177
  PepButtonModule,
180
178
  PepIconModule,
181
179
  PepMenuModule,
182
- PepSearchModule,
183
- DragDropModule], exports: [PepDraggableItemsComponent,
184
- DraggableItemComponent] });
180
+ PepSearchModule], exports: [PepDraggableItemsComponent,
181
+ PepDraggableItemComponent] });
185
182
  PepDraggableItemsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, imports: [CommonModule,
186
183
  ReactiveFormsModule,
184
+ DragDropModule,
187
185
  PepNgxLibModule,
188
186
  PepButtonModule,
189
187
  PepIconModule,
190
188
  PepMenuModule,
191
- PepSearchModule,
192
- DragDropModule] });
189
+ PepSearchModule] });
193
190
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, decorators: [{
194
191
  type: NgModule,
195
192
  args: [{
196
193
  declarations: [
197
194
  PepDraggableItemsComponent,
198
- DraggableItemComponent
195
+ PepDraggableItemComponent
199
196
  ],
200
197
  imports: [
201
198
  CommonModule,
202
199
  ReactiveFormsModule,
200
+ DragDropModule,
203
201
  PepNgxLibModule,
204
202
  PepButtonModule,
205
203
  PepIconModule,
206
204
  PepMenuModule,
207
205
  PepSearchModule,
208
- DragDropModule
209
206
  ],
210
207
  exports: [
211
208
  PepDraggableItemsComponent,
212
- DraggableItemComponent
209
+ PepDraggableItemComponent
213
210
  ],
214
211
  }]
215
212
  }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
@@ -222,5 +219,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
222
219
  * Generated bundle index. Do not edit.
223
220
  */
224
221
 
225
- export { DraggableItemComponent, PepDraggableItemsComponent, PepDraggableItemsModule };
222
+ export { PepDraggableItemComponent, PepDraggableItemsComponent, PepDraggableItemsModule };
226
223
  //# sourceMappingURL=pepperi-addons-ngx-lib-draggable-items.mjs.map
package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs.map CHANGED
@@ -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';\nimport { PepStyleType } from '@pepperi-addons/ngx-lib';\nimport { IPepMenuItemClickEvent, PepMenuItem } from '@pepperi-addons/ngx-lib/menu';\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() titlePrefix = '';\n @Input() titleClassNames = '';\n @Input() data: any;\n @Input() disabled = false;\n @Input() shadow = true;\n @Input() styleType: PepStyleType = 'regular';\n @Input() toggleContent = false;\n @Input() isToggleContentOpen = false;\n\n @Input() actionsMenu: Array<PepMenuItem> = null;\n @Input() menuStyleType: PepStyleType = 'regular';\n\n @Output() contentToggle: EventEmitter<boolean> = new EventEmitter();\n @Output() actionsMenuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n\n constructor() {\n //\n }\n\n ngOnInit(): void {\n //\n }\n\n onToggleContent() {\n if (this.toggleContent) {\n this.isToggleContentOpen = !this.isToggleContentOpen;\n this.contentToggle.emit(this.isToggleContentOpen);\n }\n }\n\n onActionsMenuItemClick(item: IPepMenuItemClickEvent){\n this.actionsMenuItemClick.emit(item);\n }\n}\n","<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></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 } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType, BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';\n\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 extends BaseDestroyerDirective implements OnInit {\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 \n constructor() {\n super();\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 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 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';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\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 PepMenuModule,\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","i3","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, Input, Output } from '@angular/core';\nimport { PepStyleType } from '@pepperi-addons/ngx-lib';\nimport { IPepMenuItemClickEvent, PepMenuItem } from '@pepperi-addons/ngx-lib/menu';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class PepDraggableItemComponent {\n @Input() title = '';\n @Input() data: any;\n @Input() disabled = false;\n @Input() titlePrefix = '';\n @Input() titleClassNames = '';\n @Input() shadow = true;\n @Input() styleType: PepStyleType = 'regular';\n @Input() toggleContent = false;\n @Input() isToggleContentOpen = false;\n @Input() actionsMenu: Array<PepMenuItem> = null;\n @Input() menuStyleType: PepStyleType = 'regular';\n\n @Output() contentToggle: EventEmitter<boolean> = new EventEmitter();\n @Output() actionsMenuItemClick: EventEmitter<IPepMenuItemClickEvent> = new EventEmitter<IPepMenuItemClickEvent>();\n\n constructor() {\n //\n }\n\n onToggleContent() {\n if (this.toggleContent) {\n this.isToggleContentOpen = !this.isToggleContentOpen;\n this.contentToggle.emit(this.isToggleContentOpen);\n }\n }\n\n onActionsMenuItemClick(item: IPepMenuItemClickEvent) {\n this.actionsMenuItemClick.emit(item);\n }\n}\n","<div class=\"pep-draggable-item-container\" class=\"{{ styleType }}\" \n [ngClass]=\"{ 'shadow': shadow, 'disable': disabled, 'toggle-content': toggleContent, 'toggle-content-open': isToggleContentOpen }\"\n >\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div class=\"item-title-container\" [ngClass]=\"{ 'shadow': shadow }\" (click)=\"onToggleContent();\">\n <span *ngIf=\"titlePrefix !== ''\" class=\"body-sm ellipsis item-title\">{{titlePrefix}}</span>\n <span *ngIf=\"title !== ''\" class=\"body-sm bold ellipsis item-title {{titleClassNames}}\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <pep-menu *ngIf=\"actionsMenu\" sizeType=\"xs\" [styleType]=\"menuStyleType\" [items]=\"actionsMenu\" (menuItemClick)=\"onActionsMenuItemClick($event)\"></pep-menu>\n <ng-content *ngIf=\"!actionsMenu\" select=\"[pep-actions]\"></ng-content>\n </div>\n <div *ngIf=\"toggleContent && isToggleContentOpen\" class=\"toggle-container\">\n <ng-content select=\"[pep-toggle-content]\"></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 } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType, BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';\n\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 extends BaseDestroyerDirective implements OnInit {\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 \n constructor() {\n super();\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 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 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';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { PepDraggableItemsComponent } from './draggable-items.component';\nimport { PepDraggableItemComponent } 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 PepDraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n DragDropModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepMenuModule,\n PepSearchModule,\n ],\n exports: [\n PepDraggableItemsComponent,\n PepDraggableItemComponent\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","i3","i4.PepDraggableItemComponent","i1"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pepperi-addons/ngx-lib",
3
- "version": "0.4.2-beta.260",
3
+ "version": "0.4.2-beta.261",
4
4
  "peerDependencies": {
5
5
  "@angular/animations": ">= 14.0.2",
6
6
  "@angular/cdk": ">= 14.0.2",