@pepperi-addons/ngx-lib 0.4.2-beta.166 → 0.4.2-beta.167

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 (7) hide show
  1. package/esm2020/draggable-items/draggable-item/draggable-item.component.mjs +3 -3
  2. package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs +2 -2
  3. package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs.map +1 -1
  4. package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs +2 -2
  5. package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/core/style/abstracts/mixins.scss +6 -6
package/esm2020/draggable-items/draggable-item/draggable-item.component.mjs CHANGED
@@ -13,10 +13,10 @@ export class DraggableItemComponent {
13
13
  }
14
14
  }
15
15
  DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
16
- DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\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"] }] });
16
+ DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"item-title-container\">\n <span class=\"body-sm bold ellipsis item-title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .item-title-container{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{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\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"] }] });
17
17
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, decorators: [{
18
18
  type: Component,
19
- args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"] }]
19
+ args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"item-title-container\">\n <span class=\"body-sm bold ellipsis item-title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .item-title-container{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{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"] }]
20
20
  }], ctorParameters: function () { return []; }, propDecorators: { title: [{
21
21
  type: Input
22
22
  }], data: [{
@@ -24,4 +24,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
24
24
  }], disabled: [{
25
25
  type: Input
26
26
  }] } });
27
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBNkIsS0FBSyxFQUFrQixNQUFNLGVBQWUsQ0FBQzs7OztBQU81RixNQUFNLE9BQU8sc0JBQXNCO0lBSy9CO1FBSlMsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUVYLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHdEIsRUFBRTtJQUNOLENBQUM7SUFFRCxRQUFRO1FBQ0osRUFBRTtJQUNOLENBQUM7O21IQVhRLHNCQUFzQjt1R0FBdEIsc0JBQXNCLDBIQ1BuQyw0ZUFVTTsyRkRITyxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0ksb0JBQW9COzBFQUtyQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1kcmFnZ2FibGUtaXRlbScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyYWdnYWJsZS1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERyYWdnYWJsZUl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIHRpdGxlID0gJyc7XG4gICAgQElucHV0KCkgZGF0YTogYW55O1xuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgLy9cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgLy9cbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicGVwLWRyYWdnYWJsZS1pdGVtLWNvbnRhaW5lclwiIFtuZ0NsYXNzXT1cInsgJ2Rpc2FibGUnOiBkaXNhYmxlZCB9XCI+XG4gICAgPGRpdiBjbGFzcz1cIlwiPlxuICAgICAgICA8cGVwLWJ1dHRvbiBjbGFzc05hbWVzPVwibG9jay1ldmVudHNcIiBzaXplVHlwZT1cInhzXCIgaWNvbk5hbWU9XCJzeXN0ZW1fbW92ZVwiPjwvcGVwLWJ1dHRvbj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ0lmPVwidGl0bGUgIT09ICcnXCIgY2xhc3M9XCJ0aXRsZS1jb250YWluZXJcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJib2R5LXNtIGJvbGQgZWxsaXBzaXMgdGl0bGVcIiB0aXRsZT1cInt7dGl0bGV9fVwiPnt7dGl0bGV9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uc1wiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbcGVwLWFjdGlvbnNdXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuPC9kaXY+Il19
27
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWxpYi9kcmFnZ2FibGUtaXRlbXMvZHJhZ2dhYmxlLWl0ZW0vZHJhZ2dhYmxlLWl0ZW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBNkIsS0FBSyxFQUFrQixNQUFNLGVBQWUsQ0FBQzs7OztBQU81RixNQUFNLE9BQU8sc0JBQXNCO0lBSy9CO1FBSlMsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUVYLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHdEIsRUFBRTtJQUNOLENBQUM7SUFFRCxRQUFRO1FBQ0osRUFBRTtJQUNOLENBQUM7O21IQVhRLHNCQUFzQjt1R0FBdEIsc0JBQXNCLDBIQ1BuQyxzZkFVTTsyRkRITyxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0ksb0JBQW9COzBFQUtyQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3BlcC1kcmFnZ2FibGUtaXRlbScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyYWdnYWJsZS1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9kcmFnZ2FibGUtaXRlbS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERyYWdnYWJsZUl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIHRpdGxlID0gJyc7XG4gICAgQElucHV0KCkgZGF0YTogYW55O1xuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgLy9cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgLy9cbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicGVwLWRyYWdnYWJsZS1pdGVtLWNvbnRhaW5lclwiIFtuZ0NsYXNzXT1cInsgJ2Rpc2FibGUnOiBkaXNhYmxlZCB9XCI+XG4gICAgPGRpdiBjbGFzcz1cIlwiPlxuICAgICAgICA8cGVwLWJ1dHRvbiBjbGFzc05hbWVzPVwibG9jay1ldmVudHNcIiBzaXplVHlwZT1cInhzXCIgaWNvbk5hbWU9XCJzeXN0ZW1fbW92ZVwiPjwvcGVwLWJ1dHRvbj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ0lmPVwidGl0bGUgIT09ICcnXCIgY2xhc3M9XCJpdGVtLXRpdGxlLWNvbnRhaW5lclwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImJvZHktc20gYm9sZCBlbGxpcHNpcyBpdGVtLXRpdGxlXCIgdGl0bGU9XCJ7e3RpdGxlfX1cIj57e3RpdGxlfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImFjdGlvbnNcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3BlcC1hY3Rpb25zXVwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==
package/fesm2015/pepperi-addons-ngx-lib-draggable-items.mjs CHANGED
@@ -26,10 +26,10 @@ class DraggableItemComponent {
26
26
  }
27
27
  }
28
28
  DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
29
- DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\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"] }] });
29
+ DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"item-title-container\">\n <span class=\"body-sm bold ellipsis item-title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .item-title-container{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{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\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"] }] });
30
30
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, decorators: [{
31
31
  type: Component,
32
- args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"] }]
32
+ args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"item-title-container\">\n <span class=\"body-sm bold ellipsis item-title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .item-title-container{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{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"] }]
33
33
  }], ctorParameters: function () { return []; }, propDecorators: { title: [{
34
34
  type: Input
35
35
  }], data: [{
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';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n @Input() title = '';\n @Input() data: any;\n @Input() disabled = false;\n\n constructor() {\n //\n }\n\n ngOnInit(): void {\n //\n }\n}\n","<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\n@Component({\n selector: 'pep-draggable-items',\n templateUrl: './draggable-items.component.html',\n styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class PepDraggableItemsComponent implements OnInit, OnDestroy {\n @Input() containerId = 'draggable-container';\n @Input() showSearch = false;\n @Input() title = '';\n @Input() titleType: PepDraggableItemsTitleType = 'regular';\n @Input() titleSizeType: PepSizeType = 'md';\n @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'weak';\n\n @Input() dropAreaIds = [];\n\n private _items: Array<IPepDraggableItem> = [];\n @Input()\n set items(value: Array<IPepDraggableItem>) {\n this._items = value;\n\n if (this.items?.length > 0) {\n this.searchControl.enable();\n } else {\n this.searchControl.disable();\n }\n }\n get items(): Array<IPepDraggableItem> {\n return this._items;\n }\n\n @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n filteredItems$: Observable<any>;\n searchControl = new FormControl();\n numberItemsToShowSearch = 5;\n private readonly _destroyed: Subject<void>;\n\n constructor() {\n //\n this._destroyed = new Subject();\n }\n\n private filterItems(value: string): any[] {\n const filterValue = value.toLowerCase();\n return this.items.filter(\n (opt) =>\n opt.title &&\n opt.title.toLowerCase().includes(filterValue.toLowerCase())\n );\n }\n\n private changeCursorOnDragStart() {\n document.body.classList.add('inheritCursors');\n document.body.style.cursor = 'grabbing';\n }\n\n private changeCursorOnDragEnd() {\n document.body.classList.remove('inheritCursors');\n document.body.style.cursor = 'unset';\n }\n\n protected getDestroyer() {\n return takeUntil(this._destroyed);\n }\n\n ngOnInit(): void {\n // If there is no item disable the search.\n if (this.items.length === 0) {\n this.searchControl.disable();\n }\n\n // Filter the draggableItems by the search control.\n this.filteredItems$ = this.searchControl.valueChanges.pipe(\n this.getDestroyer(),\n startWith<any>(''),\n map((option) =>\n typeof option === 'string' ? option : option && option.value\n ),\n map((value) => (value ? this.filterItems(value) : this.items))\n );\n }\n\n ngOnDestroy(): void {\n this._destroyed.next();\n this._destroyed.complete();\n }\n\n onDragStart(event: CdkDragStart) {\n this.changeCursorOnDragStart();\n this.itemDragStarted.emit(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.changeCursorOnDragEnd();\n this.itemDragEnded.emit(event);\n }\n}\n","<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n </div>\r\n\r\n <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n <div class=\"draggable-items-wrapper\">\r\n <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n \r\n <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n </ng-container>\r\n </pep-draggable-item>\r\n </div>\r\n </div>\r\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { PepDraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n declarations: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepSearchModule,\n DragDropModule\n ],\n exports: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n})\nexport class PepDraggableItemsModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMove,\n ]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.model';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i4.DraggableItemComponent","i1"],"mappings":";;;;;;;;;;;;;;;;;MAOa,sBAAsB,CAAA;AAK/B,IAAA,WAAA,GAAA;AAJS,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AAEX,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;KAIzB;IAED,QAAQ,GAAA;;KAEP;;mHAXQ,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,0HCPnC,4eAUM,EAAA,MAAA,EAAA,CAAA,koCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,UAAA,EAAA,cAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDHO,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;+BACI,oBAAoB,EAAA,QAAA,EAAA,4eAAA,EAAA,MAAA,EAAA,CAAA,koCAAA,CAAA,EAAA,CAAA;0EAKrB,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;;;MEEG,0BAA0B,CAAA;AAiCnC,IAAA,WAAA,GAAA;AAhCS,QAAA,IAAW,CAAA,WAAA,GAAG,qBAAqB,CAAC;AACpC,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AACnB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AACX,QAAA,IAAS,CAAA,SAAA,GAA+B,SAAS,CAAC;AAClD,QAAA,IAAa,CAAA,aAAA,GAAgB,IAAI,CAAC;AAClC,QAAA,IAAmB,CAAA,mBAAA,GAAoC,MAAM,CAAC;AAE9D,QAAA,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;AAElB,QAAA,IAAM,CAAA,MAAA,GAA6B,EAAE,CAAC;AAepC,QAAA,IAAA,CAAA,eAAe,GAAkD,IAAI,YAAY,EAAmC,CAAC;AACrH,QAAA,IAAA,CAAA,aAAa,GAAgD,IAAI,YAAY,EAAiC,CAAC;AAGzH,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,WAAW,EAAE,CAAC;AAClC,QAAA,IAAuB,CAAA,uBAAA,GAAG,CAAC,CAAC;;AAKxB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,OAAO,EAAE,CAAC;KACnC;IAzBD,IACI,KAAK,CAAC,KAA+B,EAAA;;AACrC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAEpB,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAM,IAAG,CAAC,EAAE;AACxB,YAAA,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;AAC/B,SAAA;AAAM,aAAA;AACH,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAChC,SAAA;KACJ;AACD,IAAA,IAAI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;AAeO,IAAA,WAAW,CAAC,KAAa,EAAA;AAC7B,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;AACxC,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CACpB,CAAC,GAAG,KACA,GAAG,CAAC,KAAK;AACT,YAAA,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAClE,CAAC;KACL;IAEO,uBAAuB,GAAA;QAC3B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAC9C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC;KAC3C;IAEO,qBAAqB,GAAA;QACzB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QACjD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;KACxC;IAES,YAAY,GAAA;AAClB,QAAA,OAAO,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACrC;IAED,QAAQ,GAAA;;AAEJ,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAChC,SAAA;;AAGD,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CACtD,IAAI,CAAC,YAAY,EAAE,EACnB,SAAS,CAAM,EAAE,CAAC,EAClB,GAAG,CAAC,CAAC,MAAM,KACP,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,CAAC,KAAK,CAC/D,EACD,GAAG,CAAC,CAAC,KAAK,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CACjE,CAAC;KACL;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;KAC9B;AAED,IAAA,WAAW,CAAC,KAAmB,EAAA;QAC3B,IAAI,CAAC,uBAAuB,EAAE,CAAC;AAC/B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpC;AAED,IAAA,SAAS,CAAC,KAAiB,EAAA;QACvB,IAAI,CAAC,qBAAqB,EAAE,CAAC;AAC7B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;;uHA3FQ,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,0BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,8WCZvC,ohDAsBM,EAAA,MAAA,EAAA,CAAA,muCAAA,EAAA,qKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,oBAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,4BAAA,EAAA,2BAAA,EAAA,0BAAA,EAAA,+BAAA,EAAA,2BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,oBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,qBAAA,EAAA,yBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,cAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,sBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDVO,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBALtC,SAAS;+BACI,qBAAqB,EAAA,QAAA,EAAA,ohDAAA,EAAA,MAAA,EAAA,CAAA,muCAAA,EAAA,qKAAA,CAAA,EAAA,CAAA;0EAKtB,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,mBAAmB,EAAA,CAAA;sBAA3B,KAAK;gBAEG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAIF,KAAK,EAAA,CAAA;sBADR,KAAK;gBAcI,eAAe,EAAA,CAAA;sBAAxB,MAAM;gBACG,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;MEDE,uBAAuB,CAAA;AAChC,IAAA,WAAA,CAAoB,eAAgC,EAAA;AAAhC,QAAA,IAAe,CAAA,eAAA,GAAf,eAAe,CAAiB;AAChD,QAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;YAC/B,iBAAiB;AACpB,SAAA,CAAC,CAAC;KACN;;oHALQ,uBAAuB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,iBAjB5B,0BAA0B;AAC1B,QAAA,sBAAsB,aAGtB,YAAY;QACZ,mBAAmB;QACnB,eAAe;QACf,eAAe;QACf,aAAa;QACb,eAAe;AACf,QAAA,cAAc,aAGd,0BAA0B;QAC1B,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAGjB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,YAb5B,YAAY;QACZ,mBAAmB;QACnB,eAAe;QACf,eAAe;QACf,aAAa;QACb,eAAe;QACf,cAAc,CAAA,EAAA,CAAA,CAAA;2FAOT,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAnBnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,YAAY,EAAE;wBACV,0BAA0B;wBAC1B,sBAAsB;AACzB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,mBAAmB;wBACnB,eAAe;wBACf,eAAe;wBACf,aAAa;wBACb,eAAe;wBACf,cAAc;AACjB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,0BAA0B;wBAC1B,sBAAsB;AACzB,qBAAA;iBACJ,CAAA;;;ACpCD;;AAEG;;ACFH;;AAEG;;;;"}
1
+ {"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.mjs","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n @Input() title = '';\n @Input() data: any;\n @Input() disabled = false;\n\n constructor() {\n //\n }\n\n ngOnInit(): void {\n //\n }\n}\n","<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"item-title-container\">\n <span class=\"body-sm bold ellipsis item-title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\n@Component({\n selector: 'pep-draggable-items',\n templateUrl: './draggable-items.component.html',\n styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class PepDraggableItemsComponent implements OnInit, OnDestroy {\n @Input() containerId = 'draggable-container';\n @Input() showSearch = false;\n @Input() title = '';\n @Input() titleType: PepDraggableItemsTitleType = 'regular';\n @Input() titleSizeType: PepSizeType = 'md';\n @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'weak';\n\n @Input() dropAreaIds = [];\n\n private _items: Array<IPepDraggableItem> = [];\n @Input()\n set items(value: Array<IPepDraggableItem>) {\n this._items = value;\n\n if (this.items?.length > 0) {\n this.searchControl.enable();\n } else {\n this.searchControl.disable();\n }\n }\n get items(): Array<IPepDraggableItem> {\n return this._items;\n }\n\n @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n filteredItems$: Observable<any>;\n searchControl = new FormControl();\n numberItemsToShowSearch = 5;\n private readonly _destroyed: Subject<void>;\n\n constructor() {\n //\n this._destroyed = new Subject();\n }\n\n private filterItems(value: string): any[] {\n const filterValue = value.toLowerCase();\n return this.items.filter(\n (opt) =>\n opt.title &&\n opt.title.toLowerCase().includes(filterValue.toLowerCase())\n );\n }\n\n private changeCursorOnDragStart() {\n document.body.classList.add('inheritCursors');\n document.body.style.cursor = 'grabbing';\n }\n\n private changeCursorOnDragEnd() {\n document.body.classList.remove('inheritCursors');\n document.body.style.cursor = 'unset';\n }\n\n protected getDestroyer() {\n return takeUntil(this._destroyed);\n }\n\n ngOnInit(): void {\n // If there is no item disable the search.\n if (this.items.length === 0) {\n this.searchControl.disable();\n }\n\n // Filter the draggableItems by the search control.\n this.filteredItems$ = this.searchControl.valueChanges.pipe(\n this.getDestroyer(),\n startWith<any>(''),\n map((option) =>\n typeof option === 'string' ? option : option && option.value\n ),\n map((value) => (value ? this.filterItems(value) : this.items))\n );\n }\n\n ngOnDestroy(): void {\n this._destroyed.next();\n this._destroyed.complete();\n }\n\n onDragStart(event: CdkDragStart) {\n this.changeCursorOnDragStart();\n this.itemDragStarted.emit(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.changeCursorOnDragEnd();\n this.itemDragEnded.emit(event);\n }\n}\n","<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n </div>\r\n\r\n <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n <div class=\"draggable-items-wrapper\">\r\n <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n \r\n <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n </ng-container>\r\n </pep-draggable-item>\r\n </div>\r\n </div>\r\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { PepDraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n declarations: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepSearchModule,\n DragDropModule\n ],\n exports: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n})\nexport class PepDraggableItemsModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMove,\n ]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.model';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i4.DraggableItemComponent","i1"],"mappings":";;;;;;;;;;;;;;;;;MAOa,sBAAsB,CAAA;AAK/B,IAAA,WAAA,GAAA;AAJS,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AAEX,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;KAIzB;IAED,QAAQ,GAAA;;KAEP;;mHAXQ,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,0HCPnC,sfAUM,EAAA,MAAA,EAAA,CAAA,ipCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,UAAA,EAAA,cAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDHO,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;+BACI,oBAAoB,EAAA,QAAA,EAAA,sfAAA,EAAA,MAAA,EAAA,CAAA,ipCAAA,CAAA,EAAA,CAAA;0EAKrB,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;;;MEEG,0BAA0B,CAAA;AAiCnC,IAAA,WAAA,GAAA;AAhCS,QAAA,IAAW,CAAA,WAAA,GAAG,qBAAqB,CAAC;AACpC,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AACnB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AACX,QAAA,IAAS,CAAA,SAAA,GAA+B,SAAS,CAAC;AAClD,QAAA,IAAa,CAAA,aAAA,GAAgB,IAAI,CAAC;AAClC,QAAA,IAAmB,CAAA,mBAAA,GAAoC,MAAM,CAAC;AAE9D,QAAA,IAAW,CAAA,WAAA,GAAG,EAAE,CAAC;AAElB,QAAA,IAAM,CAAA,MAAA,GAA6B,EAAE,CAAC;AAepC,QAAA,IAAA,CAAA,eAAe,GAAkD,IAAI,YAAY,EAAmC,CAAC;AACrH,QAAA,IAAA,CAAA,aAAa,GAAgD,IAAI,YAAY,EAAiC,CAAC;AAGzH,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,WAAW,EAAE,CAAC;AAClC,QAAA,IAAuB,CAAA,uBAAA,GAAG,CAAC,CAAC;;AAKxB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,OAAO,EAAE,CAAC;KACnC;IAzBD,IACI,KAAK,CAAC,KAA+B,EAAA;;AACrC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAEpB,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAM,IAAG,CAAC,EAAE;AACxB,YAAA,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;AAC/B,SAAA;AAAM,aAAA;AACH,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAChC,SAAA;KACJ;AACD,IAAA,IAAI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;KACtB;AAeO,IAAA,WAAW,CAAC,KAAa,EAAA;AAC7B,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;AACxC,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CACpB,CAAC,GAAG,KACA,GAAG,CAAC,KAAK;AACT,YAAA,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAClE,CAAC;KACL;IAEO,uBAAuB,GAAA;QAC3B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QAC9C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC;KAC3C;IAEO,qBAAqB,GAAA;QACzB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QACjD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC;KACxC;IAES,YAAY,GAAA;AAClB,QAAA,OAAO,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACrC;IAED,QAAQ,GAAA;;AAEJ,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;AAChC,SAAA;;AAGD,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CACtD,IAAI,CAAC,YAAY,EAAE,EACnB,SAAS,CAAM,EAAE,CAAC,EAClB,GAAG,CAAC,CAAC,MAAM,KACP,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,CAAC,KAAK,CAC/D,EACD,GAAG,CAAC,CAAC,KAAK,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CACjE,CAAC;KACL;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;KAC9B;AAED,IAAA,WAAW,CAAC,KAAmB,EAAA;QAC3B,IAAI,CAAC,uBAAuB,EAAE,CAAC;AAC/B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpC;AAED,IAAA,SAAS,CAAC,KAAiB,EAAA;QACvB,IAAI,CAAC,qBAAqB,EAAE,CAAC;AAC7B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;;uHA3FQ,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,0BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,8WCZvC,ohDAsBM,EAAA,MAAA,EAAA,CAAA,muCAAA,EAAA,qKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,oBAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,4BAAA,EAAA,2BAAA,EAAA,0BAAA,EAAA,+BAAA,EAAA,2BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,oBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,qBAAA,EAAA,yBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,cAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,sBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDVO,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBALtC,SAAS;+BACI,qBAAqB,EAAA,QAAA,EAAA,ohDAAA,EAAA,MAAA,EAAA,CAAA,muCAAA,EAAA,qKAAA,CAAA,EAAA,CAAA;0EAKtB,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,mBAAmB,EAAA,CAAA;sBAA3B,KAAK;gBAEG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAIF,KAAK,EAAA,CAAA;sBADR,KAAK;gBAcI,eAAe,EAAA,CAAA;sBAAxB,MAAM;gBACG,aAAa,EAAA,CAAA;sBAAtB,MAAM;;;MEDE,uBAAuB,CAAA;AAChC,IAAA,WAAA,CAAoB,eAAgC,EAAA;AAAhC,QAAA,IAAe,CAAA,eAAA,GAAf,eAAe,CAAiB;AAChD,QAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;YAC/B,iBAAiB;AACpB,SAAA,CAAC,CAAC;KACN;;oHALQ,uBAAuB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,iBAjB5B,0BAA0B;AAC1B,QAAA,sBAAsB,aAGtB,YAAY;QACZ,mBAAmB;QACnB,eAAe;QACf,eAAe;QACf,aAAa;QACb,eAAe;AACf,QAAA,cAAc,aAGd,0BAA0B;QAC1B,sBAAsB,CAAA,EAAA,CAAA,CAAA;AAGjB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,YAb5B,YAAY;QACZ,mBAAmB;QACnB,eAAe;QACf,eAAe;QACf,aAAa;QACb,eAAe;QACf,cAAc,CAAA,EAAA,CAAA,CAAA;2FAOT,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAnBnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,YAAY,EAAE;wBACV,0BAA0B;wBAC1B,sBAAsB;AACzB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,mBAAmB;wBACnB,eAAe;wBACf,eAAe;wBACf,aAAa;wBACb,eAAe;wBACf,cAAc;AACjB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,0BAA0B;wBAC1B,sBAAsB;AACzB,qBAAA;iBACJ,CAAA;;;ACpCD;;AAEG;;ACFH;;AAEG;;;;"}
package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs CHANGED
@@ -26,10 +26,10 @@ class DraggableItemComponent {
26
26
  }
27
27
  }
28
28
  DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
29
- DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\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"] }] });
29
+ DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"item-title-container\">\n <span class=\"body-sm bold ellipsis item-title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .item-title-container{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{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\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"] }] });
30
30
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, decorators: [{
31
31
  type: Component,
32
- args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"] }]
32
+ args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"item-title-container\">\n <span class=\"body-sm bold ellipsis item-title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);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%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .item-title-container{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{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"] }]
33
33
  }], ctorParameters: function () { return []; }, propDecorators: { title: [{
34
34
  type: Input
35
35
  }], data: [{
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';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n @Input() title = '';\n @Input() data: any;\n @Input() disabled = false;\n\n constructor() {\n //\n }\n\n ngOnInit(): void {\n //\n }\n}\n","<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"title-container\">\n <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\n@Component({\n selector: 'pep-draggable-items',\n templateUrl: './draggable-items.component.html',\n styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class PepDraggableItemsComponent implements OnInit, OnDestroy {\n @Input() containerId = 'draggable-container';\n @Input() showSearch = false;\n @Input() title = '';\n @Input() titleType: PepDraggableItemsTitleType = 'regular';\n @Input() titleSizeType: PepSizeType = 'md';\n @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'weak';\n\n @Input() dropAreaIds = [];\n\n private _items: Array<IPepDraggableItem> = [];\n @Input()\n set items(value: Array<IPepDraggableItem>) {\n this._items = value;\n\n if (this.items?.length > 0) {\n this.searchControl.enable();\n } else {\n this.searchControl.disable();\n }\n }\n get items(): Array<IPepDraggableItem> {\n return this._items;\n }\n\n @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n filteredItems$: Observable<any>;\n searchControl = new FormControl();\n numberItemsToShowSearch = 5;\n private readonly _destroyed: Subject<void>;\n\n constructor() {\n //\n this._destroyed = new Subject();\n }\n\n private filterItems(value: string): any[] {\n const filterValue = value.toLowerCase();\n return this.items.filter(\n (opt) =>\n opt.title &&\n opt.title.toLowerCase().includes(filterValue.toLowerCase())\n );\n }\n\n private changeCursorOnDragStart() {\n document.body.classList.add('inheritCursors');\n document.body.style.cursor = 'grabbing';\n }\n\n private changeCursorOnDragEnd() {\n document.body.classList.remove('inheritCursors');\n document.body.style.cursor = 'unset';\n }\n\n protected getDestroyer() {\n return takeUntil(this._destroyed);\n }\n\n ngOnInit(): void {\n // If there is no item disable the search.\n if (this.items.length === 0) {\n this.searchControl.disable();\n }\n\n // Filter the draggableItems by the search control.\n this.filteredItems$ = this.searchControl.valueChanges.pipe(\n this.getDestroyer(),\n startWith<any>(''),\n map((option) =>\n typeof option === 'string' ? option : option && option.value\n ),\n map((value) => (value ? this.filterItems(value) : this.items))\n );\n }\n\n ngOnDestroy(): void {\n this._destroyed.next();\n this._destroyed.complete();\n }\n\n onDragStart(event: CdkDragStart) {\n this.changeCursorOnDragStart();\n this.itemDragStarted.emit(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.changeCursorOnDragEnd();\n this.itemDragEnded.emit(event);\n }\n}\n","<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n </div>\r\n\r\n <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n <div class=\"draggable-items-wrapper\">\r\n <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n \r\n <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n </ng-container>\r\n </pep-draggable-item>\r\n </div>\r\n </div>\r\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { PepDraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n declarations: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepSearchModule,\n DragDropModule\n ],\n exports: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n})\nexport class PepDraggableItemsModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMove,\n ]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.model';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i4.DraggableItemComponent","i1"],"mappings":"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"}
1
+ {"version":3,"file":"pepperi-addons-ngx-lib-draggable-items.mjs","sources":["../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.ts","../../../projects/ngx-lib/draggable-items/draggable-item/draggable-item.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.component.ts","../../../projects/ngx-lib/draggable-items/draggable-items.component.html","../../../projects/ngx-lib/draggable-items/draggable-items.module.ts","../../../projects/ngx-lib/draggable-items/public-api.ts","../../../projects/ngx-lib/draggable-items/pepperi-addons-ngx-lib-draggable-items.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'pep-draggable-item',\n templateUrl: './draggable-item.component.html',\n styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n @Input() title = '';\n @Input() data: any;\n @Input() disabled = false;\n\n constructor() {\n //\n }\n\n ngOnInit(): void {\n //\n }\n}\n","<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n <div class=\"\">\n <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n </div>\n <div *ngIf=\"title !== ''\" class=\"item-title-container\">\n <span class=\"body-sm bold ellipsis item-title\" title=\"{{title}}\">{{title}}</span>\n </div>\n <div class=\"actions\">\n <ng-content select=\"[pep-actions]\"></ng-content>\n </div>\n</div>","import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';\nimport { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { Observable, Subject } from 'rxjs';\nimport { map, startWith, takeUntil } from 'rxjs/operators';\nimport { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';\nimport { PepSizeType } from '@pepperi-addons/ngx-lib';\n@Component({\n selector: 'pep-draggable-items',\n templateUrl: './draggable-items.component.html',\n styleUrls: ['./draggable-items.component.scss', './draggable-items.component.theme.scss']\n})\nexport class PepDraggableItemsComponent implements OnInit, OnDestroy {\n @Input() containerId = 'draggable-container';\n @Input() showSearch = false;\n @Input() title = '';\n @Input() titleType: PepDraggableItemsTitleType = 'regular';\n @Input() titleSizeType: PepSizeType = 'md';\n @Input() itemPlaceholderType: PepDraggableItemPlaceholderType = 'weak';\n\n @Input() dropAreaIds = [];\n\n private _items: Array<IPepDraggableItem> = [];\n @Input()\n set items(value: Array<IPepDraggableItem>) {\n this._items = value;\n\n if (this.items?.length > 0) {\n this.searchControl.enable();\n } else {\n this.searchControl.disable();\n }\n }\n get items(): Array<IPepDraggableItem> {\n return this._items;\n }\n\n @Output() itemDragStarted: EventEmitter<CdkDragStart<IPepDraggableItem>> = new EventEmitter<CdkDragStart<IPepDraggableItem>>();\n @Output() itemDragEnded: EventEmitter<CdkDragEnd<IPepDraggableItem>> = new EventEmitter<CdkDragEnd<IPepDraggableItem>>();\n\n filteredItems$: Observable<any>;\n searchControl = new FormControl();\n numberItemsToShowSearch = 5;\n private readonly _destroyed: Subject<void>;\n\n constructor() {\n //\n this._destroyed = new Subject();\n }\n\n private filterItems(value: string): any[] {\n const filterValue = value.toLowerCase();\n return this.items.filter(\n (opt) =>\n opt.title &&\n opt.title.toLowerCase().includes(filterValue.toLowerCase())\n );\n }\n\n private changeCursorOnDragStart() {\n document.body.classList.add('inheritCursors');\n document.body.style.cursor = 'grabbing';\n }\n\n private changeCursorOnDragEnd() {\n document.body.classList.remove('inheritCursors');\n document.body.style.cursor = 'unset';\n }\n\n protected getDestroyer() {\n return takeUntil(this._destroyed);\n }\n\n ngOnInit(): void {\n // If there is no item disable the search.\n if (this.items.length === 0) {\n this.searchControl.disable();\n }\n\n // Filter the draggableItems by the search control.\n this.filteredItems$ = this.searchControl.valueChanges.pipe(\n this.getDestroyer(),\n startWith<any>(''),\n map((option) =>\n typeof option === 'string' ? option : option && option.value\n ),\n map((value) => (value ? this.filterItems(value) : this.items))\n );\n }\n\n ngOnDestroy(): void {\n this._destroyed.next();\n this._destroyed.complete();\n }\n\n onDragStart(event: CdkDragStart) {\n this.changeCursorOnDragStart();\n this.itemDragStarted.emit(event);\n }\n\n onDragEnd(event: CdkDragEnd) {\n this.changeCursorOnDragEnd();\n this.itemDragEnded.emit(event);\n }\n}\n","<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n </div>\r\n\r\n <div class=\"draggable-items-overflow\" [ngClass]=\"{ 'add-padding': titleType === 'with-bottom-border'}\">\r\n <div class=\"draggable-items-wrapper\">\r\n <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n \r\n <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n </ng-container>\r\n </pep-draggable-item>\r\n </div>\r\n </div>\r\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { PepDraggableItemsComponent } from './draggable-items.component';\nimport { DraggableItemComponent } from './draggable-item/draggable-item.component';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMove,\n} from '@pepperi-addons/ngx-lib/icon';\n\n@NgModule({\n declarations: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n PepSearchModule,\n DragDropModule\n ],\n exports: [\n PepDraggableItemsComponent,\n DraggableItemComponent\n ],\n})\nexport class PepDraggableItemsModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemMove,\n ]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/draggable-items\n */\nexport * from './draggable-item/draggable-item.component';\n\nexport * from './draggable-items.module';\nexport * from './draggable-items.model';\nexport * from './draggable-items.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i4.DraggableItemComponent","i1"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pepperi-addons/ngx-lib",
3
- "version": "0.4.2-beta.166",
3
+ "version": "0.4.2-beta.167",
4
4
  "peerDependencies": {
5
5
  "@angular/animations": ">= 14.0.2",
6
6
  "@angular/cdk": ">= 14.0.2",
package/src/core/style/abstracts/mixins.scss CHANGED
@@ -193,17 +193,17 @@
193
193
  }
194
194
  }
195
195
 
196
- @mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md) {
197
- font-family: variables.$font-family-title !important;
198
- font-weight: variables.$font-weight-bold !important;
196
+ @mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md, $font-family: variables.$font-family-title, $font-weight: variables.$font-weight-bold) {
197
+ font-family: $font-family !important;
198
+ font-weight: $font-weight !important;
199
199
 
200
200
  @include font-size($fs);
201
201
  @include line-height($lh);
202
202
  }
203
203
 
204
- @mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm) {
205
- font-family: variables.$font-family-body !important;
206
- font-weight: variables.$font-weight-normal;
204
+ @mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm, $font-family: variables.$font-family-body, $font-weight: variables.$font-weight-normal) {
205
+ font-family: $font-family !important;
206
+ font-weight: $font-weight;
207
207
 
208
208
  @include font-size($fs);
209
209
  @include line-height($lh);