From b0f7ba6c81867338fc4db02e3ab7b1930ec3ad80 Mon Sep 17 00:00:00 2001 From: Kevin Buhmann Date: Wed, 7 Dec 2022 11:51:17 -0600 Subject: [PATCH] feat: remove `ClrDragAndDropModule` in favor of `@angular/cdk` BREAKING CHANGE: The `ClrDragAndDropModule` has been removed. Please use the `DragDropModule` module from `@angular/cdk` instead. --- projects/angular/clarity.api.md | 208 +------ projects/angular/src/clr-angular.module.ts | 2 - .../angular/src/color/_properties.color.scss | 2 +- .../src/utils/_components.clarity.scss | 3 - .../src/utils/_overwrites.clarity.scss | 2 +- .../drag-and-drop/_drag-and-drop.clarity.scss | 44 -- .../src/utils/drag-and-drop/all.spec.ts | 48 -- .../drag-and-drop-integrated.spec.ts | 284 --------- .../drag-and-drop/drag-and-drop.module.ts | 29 - .../src/utils/drag-and-drop/drag-event.ts | 23 - .../utils/drag-and-drop/drag-handle.spec.ts | 70 --- .../src/utils/drag-and-drop/drag-handle.ts | 28 - .../drag-and-drop/draggable-ghost.spec.ts | 161 ----- .../utils/drag-and-drop/draggable-ghost.ts | 143 ----- .../custom-ghost-integration.spec.ts | 75 --- .../draggable/drag-handle-integration.spec.ts | 47 -- .../drag-and-drop/draggable/draggable.spec.ts | 174 ------ .../drag-and-drop/draggable/draggable.ts | 138 ----- .../ghost-and-handle-integration.spec.ts | 87 --- .../drag-and-drop/droppable/droppable.spec.ts | 559 ------------------ .../drag-and-drop/droppable/droppable.ts | 225 ------- .../src/utils/drag-and-drop/helpers.spec.ts | 44 -- .../utils/drag-and-drop/if-dragged.spec.ts | 73 --- .../src/utils/drag-and-drop/if-dragged.ts | 48 -- .../angular/src/utils/drag-and-drop/index.ts | 14 - .../interfaces/drag-event.interface.ts | 32 - .../interfaces/drop-tolerance.interface.ts | 12 - .../drag-and-drop-event-bus.service.mock.ts | 41 -- .../drag-and-drop-event-bus.service.spec.ts | 80 --- .../drag-and-drop-event-bus.service.ts | 53 -- .../drag-event-listener.service.mock.ts | 46 -- .../drag-event-listener.service.spec.ts | 361 ----------- .../providers/drag-event-listener.service.ts | 235 -------- .../drag-handle-registrar.service.mock.ts | 28 - .../drag-handle-registrar.service.spec.ts | 118 ---- .../drag-handle-registrar.service.ts | 64 -- .../draggable-snapshot.service.spec.ts | 53 -- .../providers/draggable-snapshot.service.ts | 38 -- .../global-drag-mode.service.spec.ts | 40 -- .../providers/global-drag-mode.service.ts | 22 - projects/angular/src/utils/index.ts | 1 - .../utils/variables/_properties.color.scss | 2 +- .../src/utils/variables/_variables.color.scss | 2 +- .../utils/variables/_variables.global.scss | 2 - projects/demo/src/app/app.routing.ts | 4 - .../drag-and-drop/basic-draggable.demo.html | 97 --- .../app/drag-and-drop/basic-draggable.demo.ts | 26 - .../drag-and-drop/basic-droppable.demo.html | 174 ------ .../app/drag-and-drop/basic-droppable.demo.ts | 39 -- .../custom-ghost-and-handle.demo.html | 59 -- .../custom-ghost-and-handle.demo.ts | 14 - .../app/drag-and-drop/custom-ghost.demo.html | 22 - .../app/drag-and-drop/custom-ghost.demo.ts | 14 - .../app/drag-and-drop/drag-and-drop.demo.html | 17 - .../drag-and-drop.demo.module.ts | 45 -- .../drag-and-drop.demo.routing.ts | 36 -- .../app/drag-and-drop/drag-and-drop.demo.scss | 32 - .../app/drag-and-drop/drag-and-drop.demo.ts | 14 - .../drag-and-drop/draggable-handle.demo.html | 56 -- .../drag-and-drop/draggable-handle.demo.ts | 14 - .../drag-and-drop/drop-tolerance.demo.html | 145 ----- .../app/drag-and-drop/drop-tolerance.demo.ts | 48 -- .../src/app/drag-and-drop/grouping.demo.html | 85 --- .../src/app/drag-and-drop/grouping.demo.ts | 61 -- 64 files changed, 30 insertions(+), 4733 deletions(-) delete mode 100644 projects/angular/src/utils/drag-and-drop/_drag-and-drop.clarity.scss delete mode 100644 projects/angular/src/utils/drag-and-drop/all.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/drag-and-drop-integrated.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/drag-and-drop.module.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/drag-event.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/drag-handle.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/drag-handle.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/draggable-ghost.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/draggable-ghost.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/draggable/custom-ghost-integration.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/draggable/drag-handle-integration.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/draggable/draggable.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/draggable/draggable.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/draggable/ghost-and-handle-integration.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/droppable/droppable.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/droppable/droppable.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/helpers.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/if-dragged.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/if-dragged.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/index.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/interfaces/drag-event.interface.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/interfaces/drop-tolerance.interface.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.mock.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.mock.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.mock.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/draggable-snapshot.service.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/draggable-snapshot.service.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/global-drag-mode.service.spec.ts delete mode 100644 projects/angular/src/utils/drag-and-drop/providers/global-drag-mode.service.ts delete mode 100644 projects/demo/src/app/drag-and-drop/basic-draggable.demo.html delete mode 100644 projects/demo/src/app/drag-and-drop/basic-draggable.demo.ts delete mode 100644 projects/demo/src/app/drag-and-drop/basic-droppable.demo.html delete mode 100644 projects/demo/src/app/drag-and-drop/basic-droppable.demo.ts delete mode 100644 projects/demo/src/app/drag-and-drop/custom-ghost-and-handle.demo.html delete mode 100644 projects/demo/src/app/drag-and-drop/custom-ghost-and-handle.demo.ts delete mode 100644 projects/demo/src/app/drag-and-drop/custom-ghost.demo.html delete mode 100644 projects/demo/src/app/drag-and-drop/custom-ghost.demo.ts delete mode 100644 projects/demo/src/app/drag-and-drop/drag-and-drop.demo.html delete mode 100644 projects/demo/src/app/drag-and-drop/drag-and-drop.demo.module.ts delete mode 100644 projects/demo/src/app/drag-and-drop/drag-and-drop.demo.routing.ts delete mode 100644 projects/demo/src/app/drag-and-drop/drag-and-drop.demo.scss delete mode 100644 projects/demo/src/app/drag-and-drop/drag-and-drop.demo.ts delete mode 100644 projects/demo/src/app/drag-and-drop/draggable-handle.demo.html delete mode 100644 projects/demo/src/app/drag-and-drop/draggable-handle.demo.ts delete mode 100644 projects/demo/src/app/drag-and-drop/drop-tolerance.demo.html delete mode 100644 projects/demo/src/app/drag-and-drop/drop-tolerance.demo.ts delete mode 100644 projects/demo/src/app/drag-and-drop/grouping.demo.html delete mode 100644 projects/demo/src/app/drag-and-drop/grouping.demo.ts diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md index b4cbd29dc8..0664691b18 100644 --- a/projects/angular/clarity.api.md +++ b/projects/angular/clarity.api.md @@ -87,10 +87,9 @@ export class ClarityModule { // Warning: (ae-forgotten-export) The symbol "i17_2" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i18_2" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i19_2" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i20_2" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -105,9 +104,6 @@ export const CLR_DATAGRID_DIRECTIVES: Type[]; // @public (undocumented) export const CLR_DATEPICKER_DIRECTIVES: Type[]; -// @public (undocumented) -export const CLR_DRAG_AND_DROP_DIRECTIVES: Type[]; - // @public (undocumented) export const CLR_DROPDOWN_DIRECTIVES: Type[]; @@ -259,16 +255,16 @@ export class ClrAccordionModule { static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; - // Warning: (ae-forgotten-export) The symbol "i1_47" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i2_36" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_28" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i4_19" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i5_16" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i1_46" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i2_35" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_27" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i4_18" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i5_15" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i6_10" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i7_9" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -587,7 +583,7 @@ export class ClrButtonGroupModule { // Warning: (ae-forgotten-export) The symbol "i2_25" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -842,7 +838,7 @@ export class ClrComboboxModule { // Warning: (ae-forgotten-export) The symbol "i48" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -1597,7 +1593,7 @@ export class ClrDatagridModule { // Warning: (ae-forgotten-export) The symbol "i45" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -2025,7 +2021,7 @@ export class ClrDatepickerModule { // Warning: (ae-forgotten-export) The symbol "i9_3" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -2091,101 +2087,6 @@ export class ClrDestroyService extends Subject implements OnDestroy { static ɵprov: i0.ɵɵInjectableDeclaration; } -// @public (undocumented) -export class ClrDragAndDropModule { - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration; - // (undocumented) - static ɵinj: i0.ɵɵInjectorDeclaration; - // Warning: (ae-forgotten-export) The symbol "i1_45" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i2_34" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_26" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i4_17" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i5_14" needs to be exported by the entry point index.d.ts - // - // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; -} - -// @public (undocumented) -export class ClrDragEvent { - // Warning: (ae-forgotten-export) The symbol "DragEventInterface" needs to be exported by the entry point index.d.ts - constructor(dragEvent: DragEventInterface); - // (undocumented) - dragDataTransfer: T; - // Warning: (ae-forgotten-export) The symbol "DragPointPosition" needs to be exported by the entry point index.d.ts - // - // (undocumented) - dragPosition: DragPointPosition; - // (undocumented) - dropPointPosition: DragPointPosition; - // (undocumented) - group: string | string[]; -} - -// @public (undocumented) -export class ClrDraggable implements AfterContentInit, OnDestroy { - // Warning: (ae-forgotten-export) The symbol "DragEventListenerService" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "DragHandleRegistrarService" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "DraggableSnapshotService" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "GlobalDragModeService" needs to be exported by the entry point index.d.ts - constructor(el: ElementRef, dragEventListener: DragEventListenerService, dragHandleRegistrar: DragHandleRegistrarService, viewContainerRef: ViewContainerRef, cfr: ComponentFactoryResolver, injector: Injector, draggableSnapshot: DraggableSnapshotService, globalDragMode: GlobalDragModeService); - // (undocumented) - customGhost: ClrIfDragged; - // (undocumented) - set dataTransfer(value: T); - // (undocumented) - dragEndEmitter: EventEmitter>; - // (undocumented) - dragMoveEmitter: EventEmitter>; - // (undocumented) - dragOn: boolean; - // (undocumented) - set dragStartDelay(value: number); - // (undocumented) - dragStartEmitter: EventEmitter>; - // (undocumented) - set group(value: string | string[]); - // (undocumented) - ngAfterContentInit(): void; - // (undocumented) - ngOnDestroy(): void; - // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration, "[clrDraggable]", never, { "dataTransfer": "clrDraggable"; "group": "clrGroup"; "dragStartDelay": "clrDragStartDelay"; }, { "dragStartEmitter": "clrDragStart"; "dragMoveEmitter": "clrDragMove"; "dragEndEmitter": "clrDragEnd"; }, ["customGhost"], never, false, never>; - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; -} - -// @public (undocumented) -export class ClrDraggableGhost implements OnDestroy { - constructor(el: ElementRef, dragEventListener: DragEventListenerService, draggableSnapshot: DraggableSnapshotService, renderer: Renderer2, ngZone: NgZone); - // (undocumented) - leaveAnimConfig: { - value: number; - params: { - top: string; - left: string; - }; - }; - // (undocumented) - ngOnDestroy(): void; - // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "clr-draggable-ghost", never, {}, {}, never, ["*"], false, never>; - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, [null, { optional: true; }, { optional: true; }, null, null]>; -} - -// @public (undocumented) -export class ClrDragHandle implements OnDestroy { - constructor(el: ElementRef, dragHandleRegistrar: DragHandleRegistrarService); - // (undocumented) - ngOnDestroy(): void; - // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration, "[clrDragHandle]", never, {}, {}, never, never, false, never>; - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, [null, { optional: true; }]>; -} - // @public (undocumented) export class ClrDropdown implements OnDestroy { // Warning: (ae-forgotten-export) The symbol "RootDropdownService" needs to be exported by the entry point index.d.ts @@ -2275,53 +2176,6 @@ export class ClrDropdownTrigger { static ɵfac: i0.ɵɵFactoryDeclaration; } -// @public (undocumented) -export class ClrDroppable implements OnInit, OnDestroy { - // Warning: (ae-forgotten-export) The symbol "DragAndDropEventBusService" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "DomAdapter" needs to be exported by the entry point index.d.ts - constructor(el: ElementRef, eventBus: DragAndDropEventBusService, domAdapter: DomAdapter, renderer: Renderer2); - // (undocumented) - dragEndEmitter: EventEmitter>; - // (undocumented) - dragEnterEmitter: EventEmitter>; - // (undocumented) - dragLeaveEmitter: EventEmitter>; - // (undocumented) - dragMoveEmitter: EventEmitter>; - // (undocumented) - dragStartEmitter: EventEmitter>; - // (undocumented) - dropEmitter: EventEmitter>; - // (undocumented) - set dropTolerance(value: number | string | ClrDropToleranceInterface); - // (undocumented) - set group(value: string | string[]); - // (undocumented) - isDraggableMatch: boolean; - // (undocumented) - set isDraggableOver(value: boolean); - // (undocumented) - ngOnDestroy(): void; - // (undocumented) - ngOnInit(): void; - // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration, "[clrDroppable]", never, { "group": "clrGroup"; "dropTolerance": "clrDropTolerance"; }, { "dragStartEmitter": "clrDragStart"; "dragMoveEmitter": "clrDragMove"; "dragEndEmitter": "clrDragEnd"; "dragLeaveEmitter": "clrDragLeave"; "dragEnterEmitter": "clrDragEnter"; "dropEmitter": "clrDrop"; }, never, never, false, never>; - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; -} - -// @public (undocumented) -export interface ClrDropToleranceInterface { - // (undocumented) - bottom?: number; - // (undocumented) - left?: number; - // (undocumented) - right?: number; - // (undocumented) - top?: number; -} - // @public (undocumented) export class ClrEmphasisModule { // (undocumented) @@ -2336,6 +2190,7 @@ export class ClrEmphasisModule { // @public (undocumented) export class ClrExpandableAnimation { + // Warning: (ae-forgotten-export) The symbol "DomAdapter" needs to be exported by the entry point index.d.ts constructor(element: ElementRef, domAdapter: DomAdapter); // (undocumented) animationDone(): void; @@ -2553,17 +2408,6 @@ export class ClrIfDetail implements OnInit, OnDestroy { static ɵfac: i0.ɵɵFactoryDeclaration; } -// @public (undocumented) -export class ClrIfDragged implements OnDestroy { - constructor(template: TemplateRef, container: ViewContainerRef, dragEventListener: DragEventListenerService); - // (undocumented) - ngOnDestroy(): void; - // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration, "[clrIfDragged]", never, {}, {}, never, never, false, never>; - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, [null, { optional: true; skipSelf: true; }, { optional: true; }]>; -} - // Warning: (ae-forgotten-export) The symbol "AbstractIfState" needs to be exported by the entry point index.d.ts // // @public (undocumented) @@ -3320,10 +3164,10 @@ export class ClrProgressBarModule { static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; - // Warning: (ae-forgotten-export) The symbol "i1_48" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i1_47" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -3807,15 +3651,15 @@ export class ClrStepperModule { static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; - // Warning: (ae-forgotten-export) The symbol "i1_46" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i2_35" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_27" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i4_18" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i5_15" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i1_45" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i2_34" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_26" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i4_17" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i5_14" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "i8_8" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) @@ -4070,14 +3914,14 @@ export class ClrTimelineModule { static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; - // Warning: (ae-forgotten-export) The symbol "i1_49" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i2_37" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i3_29" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i4_20" needs to be exported by the entry point index.d.ts - // Warning: (ae-forgotten-export) The symbol "i5_17" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i1_48" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i2_36" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i3_28" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i4_19" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i5_16" needs to be exported by the entry point index.d.ts // // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public (undocumented) diff --git a/projects/angular/src/clr-angular.module.ts b/projects/angular/src/clr-angular.module.ts index fa0cc6460a..f7b42bd131 100644 --- a/projects/angular/src/clr-angular.module.ts +++ b/projects/angular/src/clr-angular.module.ts @@ -19,7 +19,6 @@ import { ClrProgressBarModule } from './progress/progress-bars/progress-bar.modu import { ClrSpinnerModule } from './progress/spinner/spinner.module'; import { ClrTimelineModule } from './timeline/timeline.module'; import { ClrConditionalModule } from './utils/conditional/conditional.module'; -import { ClrDragAndDropModule } from './utils/drag-and-drop/drag-and-drop.module'; import { ClrFocusTrapModule } from './utils/focus-trap/focus-trap.module'; import { ClrFocusOnViewInitModule } from './utils/focus/focus-on-view-init/focus-on-view-init.module'; import { ClrForTypeAheadModule } from './utils/for-type-ahead/for-type-ahead.module'; @@ -46,7 +45,6 @@ import '@cds/core/icon/register'; ClrLayoutModule, ClrPopoverModule, ClrWizardModule, - ClrDragAndDropModule, ClrStepperModule, ClrSpinnerModule, ClrProgressBarModule, diff --git a/projects/angular/src/color/_properties.color.scss b/projects/angular/src/color/_properties.color.scss index fe3b103619..8de288a9a1 100644 --- a/projects/angular/src/color/_properties.color.scss +++ b/projects/angular/src/color/_properties.color.scss @@ -69,7 +69,7 @@ --clr-color-on-action-900: #{$clr-color-on-action-900}; --clr-color-on-action-1000: #{$clr-color-on-action-1000}; - // Secondary Action palette -- actions but off-the-beaten-path actions, like drag-and-drop + // Secondary Action palette -- actions but off-the-beaten-path actions --clr-color-secondary-action-50: #{$clr-color-secondary-action-50}; --clr-color-secondary-action-100: #{$clr-color-secondary-action-100}; diff --git a/projects/angular/src/utils/_components.clarity.scss b/projects/angular/src/utils/_components.clarity.scss index 6ba07736f5..b2c914a5b0 100644 --- a/projects/angular/src/utils/_components.clarity.scss +++ b/projects/angular/src/utils/_components.clarity.scss @@ -141,9 +141,6 @@ // Signposts @import '../popover/signpost/signposts.clarity'; -// Drag and Drop -@import '../utils/drag-and-drop/drag-and-drop.clarity'; - // Stepper @import '../accordion/accordion.clarity'; diff --git a/projects/angular/src/utils/_overwrites.clarity.scss b/projects/angular/src/utils/_overwrites.clarity.scss index 7c4e7718f4..e2f645e7b0 100644 --- a/projects/angular/src/utils/_overwrites.clarity.scss +++ b/projects/angular/src/utils/_overwrites.clarity.scss @@ -159,7 +159,7 @@ $clr-color-on-action-800: null; // #fff $clr-color-on-action-900: null; // #fff $clr-color-on-action-1000: null; // #fff -// Secondary Action palette (purple) -- actions but off-the-beaten-path actions, like drag-and-drop +// Secondary Action palette (purple) -- actions but off-the-beaten-path actions $clr-color-secondary-action-50: null; // #f3e6ff $clr-color-secondary-action-100: null; // #e1c9f1 $clr-color-secondary-action-200: null; // #d0ace4 diff --git a/projects/angular/src/utils/drag-and-drop/_drag-and-drop.clarity.scss b/projects/angular/src/utils/drag-and-drop/_drag-and-drop.clarity.scss deleted file mode 100644 index b0217786de..0000000000 --- a/projects/angular/src/utils/drag-and-drop/_drag-and-drop.clarity.scss +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ -@include exports('drag-and-drop.clarity') { - .drag-handle { - cursor: grab; - } - .in-drag { - cursor: grabbing; - user-select: none; - * { - pointer-events: none; - } - .draggable.being-dragged { - opacity: 0.6; - } - } - .draggable-ghost { - position: fixed; - display: block; - visibility: hidden; - z-index: map-get($clr-layers, draggable-ghost); - pointer-events: none; - will-change: left, top; - // default ghost contains the cloned .draggable - & > .draggable { - margin: 0; - opacity: 1; - } - &.dropped { - opacity: 0; - } - } - .droppable { - &.draggable-match { - border: $clr_baselineRem_1px dashed $clr-color-secondary-action-300; - } - &.draggable-over { - border: $clr_baselineRem_1px dashed $clr-color-secondary-action-800; - } - } -} diff --git a/projects/angular/src/utils/drag-and-drop/all.spec.ts b/projects/angular/src/utils/drag-and-drop/all.spec.ts deleted file mode 100644 index 452b6bf5ef..0000000000 --- a/projects/angular/src/utils/drag-and-drop/all.spec.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import ClrDragAndDropIntegratedSpecs from './drag-and-drop-integrated.spec'; -import ClrDragHandleSpecs from './drag-handle.spec'; -import ClrDraggableGhostSpecs from './draggable-ghost.spec'; -import ClrDraggableWithCustomGhostSpecs from './draggable/custom-ghost-integration.spec'; -import ClrDraggableWithDragHandleSpecs from './draggable/drag-handle-integration.spec'; -import ClrDraggableSpecs from './draggable/draggable.spec'; -import ClrDraggableWithGhostAndHandleSpecs from './draggable/ghost-and-handle-integration.spec'; -import ClrDroppableSpecs from './droppable/droppable.spec'; -import ClrIfDraggedSpecs from './if-dragged.spec'; -import ClrDragAndDropEventBusSpecs from './providers/drag-and-drop-event-bus.service.spec'; -import ClrDragEventListenerSpecs from './providers/drag-event-listener.service.spec'; -import ClrDragHandleRegistrarSpecs from './providers/drag-handle-registrar.service.spec'; -import ClrDraggableSnapshotSpecs from './providers/draggable-snapshot.service.spec'; -import ClrGlobalDragModeSpecs from './providers/global-drag-mode.service.spec'; - -describe('Drag And Drop', function () { - describe('Providers', function () { - ClrDragAndDropEventBusSpecs(); - ClrDragEventListenerSpecs(); - ClrDragHandleRegistrarSpecs(); - ClrDraggableSnapshotSpecs(); - ClrGlobalDragModeSpecs(); - }); - - describe('Components And Directives', function () { - ClrIfDraggedSpecs(); - ClrDragHandleSpecs(); - ClrDraggableGhostSpecs(); - ClrDragAndDropIntegratedSpecs(); - - describe('ClrDraggable', function () { - ClrDraggableSpecs(); - ClrDraggableWithCustomGhostSpecs(); - ClrDraggableWithDragHandleSpecs(); - ClrDraggableWithGhostAndHandleSpecs(); - }); - - describe('ClrDroppable', function () { - ClrDroppableSpecs(); - }); - }); -}); diff --git a/projects/angular/src/utils/drag-and-drop/drag-and-drop-integrated.spec.ts b/projects/angular/src/utils/drag-and-drop/drag-and-drop-integrated.spec.ts deleted file mode 100644 index 19ba168861..0000000000 --- a/projects/angular/src/utils/drag-and-drop/drag-and-drop-integrated.spec.ts +++ /dev/null @@ -1,284 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component, ElementRef } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; - -import { ClrDragAndDropModule } from './drag-and-drop.module'; -import { ClrDraggable } from './draggable/draggable'; -import { emulateDragEvent } from './helpers.spec'; - -// Here, we test drag and drop directives and components altogether in an integrated way. -// Unlike other .spec test files, we use actual events in the following tests. - -const MOCK_DATA_PAYLOAD = { - data: 'test_drag_data_transfer', -}; - -export default function (): void { - describe('With ClrDraggable', function () { - let fixture: ComponentFixture; - let testComponent: WithDraggableTest; - let testElement: HTMLElement; - let draggable: ElementRef; - - beforeEach(function () { - TestBed.configureTestingModule({ - imports: [ClrDragAndDropModule, NoopAnimationsModule], - declarations: [WithDraggableTest], - }); - - fixture = TestBed.createComponent(WithDraggableTest); - testComponent = fixture.componentInstance; - testElement = fixture.nativeElement; - - draggable = fixture.debugElement.queryAll(By.directive(ClrDraggable))[1]; - fixture.detectChanges(); - }); - - afterEach(function () { - fixture.destroy(); - }); - - describe('Template API', function () { - const checkStaticProps = function (dragEvent: any) { - // the following properties don't change accross different drag events - // and expected to stay the same in all of them. - expect(dragEvent.group).toBe('draggable-1'); - expect(dragEvent.dragDataTransfer).toEqual(MOCK_DATA_PAYLOAD); - }; - - it('should emit event with proper properties on dragStart', fakeAsync(function () { - emulateDragEvent('mousedown', 10, 20, draggable.nativeElement); - tick(); - checkStaticProps(testComponent.dragStartEvent); - expect(testComponent.dragStartEvent.dragPosition).toEqual({ pageX: 10, pageY: 20, moveX: 0, moveY: 0 }); - expect(testComponent.dragStartEvent.dropPointPosition).toBeUndefined(); - })); - - it('should emit event with proper properties on dragMove', fakeAsync(function () { - emulateDragEvent('mousedown', 10, 20, draggable.nativeElement); - tick(); - emulateDragEvent('mousemove', 100, 200); - checkStaticProps(testComponent.dragMoveEvent); - expect(testComponent.dragMoveEvent.dragPosition).toEqual({ pageX: 100, pageY: 200, moveX: 90, moveY: 180 }); - - // offsetX = dragStart.pageX - draggable.pageX - // offsetY = dragStart.pageY - draggable.pageY - // dropPointPosition.pageX = dragMove.pageX + draggable.width/2 - offsetX - // dropPointPosition.pageY = dragMove.pageY + draggable.height/2 - offsetY - expect(testComponent.dragMoveEvent.dropPointPosition).toEqual({ pageX: 140, pageY: 205 }); - })); - - it('should emit event with proper properties on dragEnter', fakeAsync(function () { - emulateDragEvent('mousedown', 10, 20, draggable.nativeElement); - tick(); - emulateDragEvent('mousemove', 500, 300); - checkStaticProps(testComponent.dragEnterEvent); - expect(testComponent.dragEnterEvent.dragPosition).toEqual({ pageX: 500, pageY: 300, moveX: 490, moveY: 280 }); - expect(testComponent.dragEnterEvent.dropPointPosition).toEqual({ pageX: 540, pageY: 305 }); - })); - - it('should emit event with proper properties on dragLeave', fakeAsync(function () { - emulateDragEvent('mousedown', 10, 20, draggable.nativeElement); - tick(); - emulateDragEvent('mousemove', 500, 300); - emulateDragEvent('mousemove', 100, 200); - checkStaticProps(testComponent.dragLeaveEvent); - expect(testComponent.dragLeaveEvent.dragPosition).toEqual({ pageX: 100, pageY: 200, moveX: 90, moveY: 180 }); - expect(testComponent.dragLeaveEvent.dropPointPosition).toEqual({ pageX: 140, pageY: 205 }); - })); - - it('should emit event with proper properties on dragEnd', fakeAsync(function () { - emulateDragEvent('mousedown', 10, 20, draggable.nativeElement); - tick(); - emulateDragEvent('mousemove', 500, 300); - emulateDragEvent('mousemove', 100, 200); - emulateDragEvent('mouseup', 100, 200); - checkStaticProps(testComponent.dragEndEvent); - expect(testComponent.dragEndEvent.dragPosition).toEqual({ pageX: 100, pageY: 200, moveX: 90, moveY: 180 }); - expect(testComponent.dragEndEvent.dropPointPosition).toEqual({ pageX: 140, pageY: 205 }); - })); - - it('should emit event with proper properties on drop', fakeAsync(function () { - emulateDragEvent('mousedown', 10, 20, draggable.nativeElement); - tick(); - emulateDragEvent('mousemove', 500, 300); - emulateDragEvent('mouseup', 500, 300); - checkStaticProps(testComponent.dropEvent); - expect(testComponent.dropEvent.dragPosition).toEqual({ pageX: 500, pageY: 300, moveX: 490, moveY: 280 }); - expect(testComponent.dropEvent.dropPointPosition).toEqual({ pageX: 540, pageY: 305 }); - })); - - it('should delay dragStart event if clrDragStartDelay is provided', fakeAsync(function () { - testComponent.dragStartDelay = 1000; - fixture.detectChanges(); - emulateDragEvent('mousedown', 10, 20, draggable.nativeElement); - tick(500); - expect(testComponent.dragStartEvent).toBeUndefined(); - tick(500); - expect(testComponent.dragStartEvent).not.toBeUndefined(); - checkStaticProps(testComponent.dragStartEvent); - })); - - it('should cancel the entire drag process if mousemove during clrDragStartDelay', fakeAsync(function () { - testComponent.dragStartDelay = 1000; - fixture.detectChanges(); - emulateDragEvent('mousedown', 10, 20, draggable.nativeElement); - tick(500); - emulateDragEvent('mousemove', 20, 30); - tick(500); - expect(testComponent.dragStartEvent).toBeUndefined(); - })); - }); - - describe('View', function () { - it('should have proper number of draggables and droppables', function () { - expect(testElement.querySelectorAll('.draggable').length).toBe(2); - expect(testElement.querySelectorAll('.droppable').length).toBe(3); - expect(testElement.querySelectorAll('clr-draggable-ghost').length).toBe(0); - }); - - it('should add being-dragged class to draggable being dragged', fakeAsync(function () { - emulateDragEvent('mousedown', 0, 0, draggable.nativeElement); - tick(); - fixture.detectChanges(); - const draggableQueries = testElement.querySelectorAll('.being-dragged'); - expect(draggableQueries.length).toBe(1, `Only one draggable should have the "being-dragged" class at a time.`); - expect(draggableQueries[0]).toBe(draggable.nativeElement); - })); - - it('should show ghost next to proper draggable on dragStart', fakeAsync(function () { - emulateDragEvent('mousedown', 0, 0, draggable.nativeElement); - tick(); - fixture.detectChanges(); - const draggableQueries = testElement.querySelectorAll('.being-dragged'); - expect(draggableQueries[0].nextElementSibling.tagName).toBe('CLR-DRAGGABLE-GHOST'); - expect(draggableQueries[0].nextElementSibling.classList.contains('draggable-ghost')).toBeTruthy(); - })); - - it('should add draggable-match to all droppables with matching group', fakeAsync(function () { - emulateDragEvent('mousedown', 0, 0, draggable.nativeElement); - tick(); - fixture.detectChanges(); - const matchingDroppablesQueries = testElement.querySelectorAll('.draggable-match'); - expect(matchingDroppablesQueries.length).toBe(2); - - const overDroppablesQueries = testElement.querySelectorAll('.draggable-over'); - expect(overDroppablesQueries.length).toBe(0); - })); - - it('should add draggable-over to proper droppable on dragEnter', fakeAsync(function () { - emulateDragEvent('mousedown', 0, 0, draggable.nativeElement); - tick(); - emulateDragEvent('mousemove', 500, 300); - fixture.detectChanges(); - - const matchingDroppablesQueries = testElement.querySelectorAll('.draggable-match'); - expect(matchingDroppablesQueries.length).toBe(2); - - const overDroppablesQueries = testElement.querySelectorAll('.draggable-over'); - expect(overDroppablesQueries.length).toBe(1); - })); - - it('should remove draggable-over to on dragLeave', fakeAsync(function () { - emulateDragEvent('mousedown', 0, 0, draggable.nativeElement); - tick(); - emulateDragEvent('mousemove', 500, 300); - emulateDragEvent('mousemove', 100, 200); - fixture.detectChanges(); - - const matchingDroppablesQueries = testElement.querySelectorAll('.draggable-match'); - expect(matchingDroppablesQueries.length).toBe(2); - - const overDroppablesQueries = testElement.querySelectorAll('.draggable-over'); - expect(overDroppablesQueries.length).toBe(0); - })); - - it('should have no droppables with draggable-over and draggable-match class on dragEnd', fakeAsync(function () { - emulateDragEvent('mousedown', 0, 0, draggable.nativeElement); - tick(); - emulateDragEvent('mousemove', 500, 300); - emulateDragEvent('mousemove', 100, 200); - emulateDragEvent('mouseup', 100, 200); - fixture.detectChanges(); - - const matchingDroppablesQueries = testElement.querySelectorAll('.draggable-match'); - expect(matchingDroppablesQueries.length).toBe(0); - - const overDroppablesQueries = testElement.querySelectorAll('.draggable-over'); - expect(overDroppablesQueries.length).toBe(0); - })); - - it('should add dropped class to ghost on successful drop event', fakeAsync(function () { - emulateDragEvent('mousedown', 0, 0, draggable.nativeElement); - tick(); - const ghost = testElement.querySelector('.draggable-ghost'); - emulateDragEvent('mousemove', 500, 300); - expect(ghost.classList.contains('dropped')).toBeFalsy(); - emulateDragEvent('mouseup', 500, 300); - expect(ghost.classList.contains('dropped')).toBeTruthy(); - })); - }); - }); -} - -@Component({ - styles: [ - ` - .droppable-test-state { - position: absolute; - left: 400px; - top: 200px; - width: 200px; - height: 400px; - } - .draggable-test-state { - position: absolute; - left: 0px; - top: 0px; - width: 100px; - height: 50px; - } - `, - ], - template: ` - -
- draggable div -
-
-
-
- `, -}) -class WithDraggableTest { - mockDataPayload = MOCK_DATA_PAYLOAD; - dragStartDelay: number; - dragStartEvent: any; - dragMoveEvent: any; - dragEndEvent: any; - dragLeaveEvent: any; - dragEnterEvent: any; - dropEvent: any; -} diff --git a/projects/angular/src/utils/drag-and-drop/drag-and-drop.module.ts b/projects/angular/src/utils/drag-and-drop/drag-and-drop.module.ts deleted file mode 100644 index d6e6733a3c..0000000000 --- a/projects/angular/src/utils/drag-and-drop/drag-and-drop.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule, Type } from '@angular/core'; - -import { ClrDragHandle } from './drag-handle'; -import { ClrDraggableGhost } from './draggable-ghost'; -import { ClrDraggable } from './draggable/draggable'; -import { ClrDroppable } from './droppable/droppable'; -import { ClrIfDragged } from './if-dragged'; - -export const CLR_DRAG_AND_DROP_DIRECTIVES: Type[] = [ - ClrDraggable, - ClrDroppable, - ClrIfDragged, - ClrDragHandle, - ClrDraggableGhost, -]; - -@NgModule({ - imports: [CommonModule], - declarations: [CLR_DRAG_AND_DROP_DIRECTIVES], - exports: [CLR_DRAG_AND_DROP_DIRECTIVES], -}) -export class ClrDragAndDropModule {} diff --git a/projects/angular/src/utils/drag-and-drop/drag-event.ts b/projects/angular/src/utils/drag-and-drop/drag-event.ts deleted file mode 100644 index 399ee66e99..0000000000 --- a/projects/angular/src/utils/drag-and-drop/drag-event.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { DragEventInterface, DragPointPosition } from './interfaces/drag-event.interface'; - -// This class is used to convert an internal event -// to an external event to be emitted. -export class ClrDragEvent { - dragPosition: DragPointPosition; - group: string | string[]; - dragDataTransfer: T; - dropPointPosition: DragPointPosition; - - constructor(dragEvent: DragEventInterface) { - this.dragPosition = dragEvent.dragPosition; - this.group = dragEvent.group; - this.dragDataTransfer = dragEvent.dragDataTransfer; - this.dropPointPosition = dragEvent.dropPointPosition; - } -} diff --git a/projects/angular/src/utils/drag-and-drop/drag-handle.spec.ts b/projects/angular/src/utils/drag-and-drop/drag-handle.spec.ts deleted file mode 100644 index 71d52195b1..0000000000 --- a/projects/angular/src/utils/drag-and-drop/drag-handle.spec.ts +++ /dev/null @@ -1,70 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { ClrDragHandle } from './drag-handle'; -import { DragHandleRegistrarService } from './providers/drag-handle-registrar.service'; -import { MOCK_DRAG_HANDLE_REGISTRAR_PROVIDER } from './providers/drag-handle-registrar.service.mock'; - -export default function (): void { - describe('ClrDragHandle', function () { - describe('Without ClrDragHandleRegistrar', function () { - it('should throw an error with a message', function () { - TestBed.configureTestingModule({ declarations: [NoDragHandleRegistrar, ClrDragHandle] }); - - expect(function () { - this.fixture = TestBed.createComponent(NoDragHandleRegistrar); - }).toThrowError('The clrDragHandle directive can only be used inside of a clrDraggable directive.'); - }); - }); - - describe('With ClrDragHandleRegistrar', function () { - beforeEach(function () { - TestBed.configureTestingModule({ - declarations: [ClrDragHandle, DragHandleTest], - providers: [MOCK_DRAG_HANDLE_REGISTRAR_PROVIDER], - }); - - this.fixture = TestBed.createComponent(DragHandleTest); - this.testComponent = this.fixture.componentInstance; - this.fixture.detectChanges(); - - this.dragHandleRegistrar = TestBed.get(DragHandleRegistrarService); - this.testElement = this.fixture.nativeElement; - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should register its element as a custom drag handle', function () { - const dragHandleEl = this.fixture.debugElement.query(By.directive(ClrDragHandle)).nativeElement; - expect(this.dragHandleRegistrar.customHandle).toBe(dragHandleEl); - }); - - it('should unregister its element if it gets removed', function () { - this.testComponent.display = false; - this.fixture.detectChanges(); - expect(this.dragHandleRegistrar.customHandle).toBeUndefined(); - }); - }); - }); -} - -@Component({ - template: `
Test
`, -}) -class DragHandleTest { - display = true; -} - -@Component({ - template: `
Test
`, -}) -class NoDragHandleRegistrar {} diff --git a/projects/angular/src/utils/drag-and-drop/drag-handle.ts b/projects/angular/src/utils/drag-and-drop/drag-handle.ts deleted file mode 100644 index 291d9f7ea7..0000000000 --- a/projects/angular/src/utils/drag-and-drop/drag-handle.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Directive, ElementRef, OnDestroy, Optional } from '@angular/core'; - -import { DragHandleRegistrarService } from './providers/drag-handle-registrar.service'; - -@Directive({ - selector: '[clrDragHandle]', - host: { '[class.drag-handle]': 'true' }, -}) -export class ClrDragHandle implements OnDestroy { - constructor(private el: ElementRef, @Optional() private dragHandleRegistrar: DragHandleRegistrarService) { - if (!this.dragHandleRegistrar) { - // ClrDragHandleRegistrar is provided in ClrDraggable so we expect it to be present here - // as clrDragHandle is required to be used only inside of a clrDraggable directive. - throw new Error('The clrDragHandle directive can only be used inside of a clrDraggable directive.'); - } - this.dragHandleRegistrar.registerCustomHandle(this.el.nativeElement); - } - - ngOnDestroy() { - this.dragHandleRegistrar.unregisterCustomHandle(); - } -} diff --git a/projects/angular/src/utils/drag-and-drop/draggable-ghost.spec.ts b/projects/angular/src/utils/drag-and-drop/draggable-ghost.spec.ts deleted file mode 100644 index 51ee3ee1ac..0000000000 --- a/projects/angular/src/utils/drag-and-drop/draggable-ghost.spec.ts +++ /dev/null @@ -1,161 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; - -import { DomAdapter } from '../dom-adapter/dom-adapter'; -import { ClrDragAndDropModule } from './drag-and-drop.module'; -import { ClrDraggableGhost } from './draggable-ghost'; -import { DragEventListenerService } from './providers/drag-event-listener.service'; -import { MOCK_DRAG_EVENT_LISTENER_PROVIDER } from './providers/drag-event-listener.service.mock'; -import { DraggableSnapshotService } from './providers/draggable-snapshot.service'; - -export default function (): void { - describe('ClrDraggableGhost', function () { - describe('Without Wrapping ClrDraggable', function () { - it('should throw an error with a message', function () { - TestBed.configureTestingModule({ - declarations: [WithNoWrappingDraggable, ClrDraggableGhost], - providers: [DomAdapter], - }); - - expect(function () { - TestBed.createComponent(WithNoWrappingDraggable); - }).toThrowError('The clr-draggable-ghost component can only be used inside of a clrDraggable directive.'); - }); - }); - - describe('With Wrapping ClrDraggable', function () { - beforeEach(function () { - TestBed.configureTestingModule({ - imports: [ClrDragAndDropModule, NoopAnimationsModule], - declarations: [WithWrappingDraggable], - providers: [MOCK_DRAG_EVENT_LISTENER_PROVIDER, DomAdapter, DraggableSnapshotService], - }); - - this.fixture = TestBed.createComponent(WithWrappingDraggable); - this.fixture.detectChanges(); - - this.testComponent = this.fixture.componentInstance; - this.draggableGhostDebugElement = this.fixture.debugElement.query(By.directive(ClrDraggableGhost)); - this.ghostElement = this.draggableGhostDebugElement.nativeElement; - this.dragEventListener = TestBed.get(DragEventListenerService); - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should have draggable-ghost class', function () { - expect(this.ghostElement.classList.contains('draggable-ghost')).toBeTruthy(); - }); - - it('should appear on the first drag move event', function () { - this.dragEventListener.dragStartPosition = { pageX: 0, pageY: 0 }; - const mockDragMoveEvent = { dragPosition: { pageX: 33, pageY: 44 } }; - - this.dragEventListener.dragMoved.next(mockDragMoveEvent); - - expect(this.ghostElement.style.left).toBe(`${mockDragMoveEvent.dragPosition.pageX}px`); - expect(this.ghostElement.style.top).toBe(`${mockDragMoveEvent.dragPosition.pageY}px`); - expect(this.ghostElement.style.visibility).toBe('visible'); - }); - - it('should be dragged from mouse position on page', function () { - this.dragEventListener.dragStartPosition = { pageX: 0, pageY: 0 }; - const mockDragMoveEvent1 = { dragPosition: { pageX: 120, pageY: 60 } }; - const mockDragMoveEvent2 = { dragPosition: { pageX: 180, pageY: 120 } }; - - this.dragEventListener.dragMoved.next(mockDragMoveEvent1); - expect(this.ghostElement.style.left).toBe(`${mockDragMoveEvent1.dragPosition.pageX}px`); - expect(this.ghostElement.style.top).toBe(`${mockDragMoveEvent1.dragPosition.pageY}px`); - - this.dragEventListener.dragMoved.next(mockDragMoveEvent2); - expect(this.ghostElement.style.left).toBe(`${mockDragMoveEvent2.dragPosition.pageX}px`); - expect(this.ghostElement.style.top).toBe(`${mockDragMoveEvent2.dragPosition.pageY}px`); - }); - }); - - describe('With Wrapping ClrDraggable And Draggable Snapshot', function () { - const mockDraggable = document.createElement('div'); - document.body.appendChild(mockDraggable); - - mockDraggable.style.position = 'absolute'; - mockDraggable.style.width = '100px'; - mockDraggable.style.height = '50px'; - mockDraggable.style.left = '90px'; - mockDraggable.style.top = '45px'; - - const mockDragStartEvent = { dragPosition: { pageX: 110, pageY: 55 } }; - - beforeEach(function () { - TestBed.configureTestingModule({ - imports: [ClrDragAndDropModule, NoopAnimationsModule], - declarations: [WithWrappingDraggable], - providers: [MOCK_DRAG_EVENT_LISTENER_PROVIDER, DomAdapter, DraggableSnapshotService], - }); - - this.draggableSnapshot = TestBed.get(DraggableSnapshotService); - this.draggableSnapshot.capture(mockDraggable, mockDragStartEvent); - - this.fixture = TestBed.createComponent(WithWrappingDraggable); - this.fixture.detectChanges(); - - this.draggableGhostDebugElement = this.fixture.debugElement.query(By.directive(ClrDraggableGhost)); - this.ghostElement = this.draggableGhostDebugElement.nativeElement; - this.dragEventListener = TestBed.get(DragEventListenerService); - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should appear on the first drag move event', function () { - const mockDragMoveEvent = { dragPosition: { pageX: 33, pageY: 44 } }; - this.dragEventListener.dragMoved.next(mockDragMoveEvent); - - const offsetLeft = mockDragStartEvent.dragPosition.pageX - this.draggableSnapshot.clientRect.left; - const offsetTop = mockDragStartEvent.dragPosition.pageY - this.draggableSnapshot.clientRect.top; - - expect(this.ghostElement.style.left).toBe(`${mockDragMoveEvent.dragPosition.pageX - offsetLeft}px`); - expect(this.ghostElement.style.top).toBe(`${mockDragMoveEvent.dragPosition.pageY - offsetTop}px`); - expect(this.ghostElement.style.visibility).toBe('visible'); - }); - - it('should be dragged from its first drag position on the draggable if draggable state is registered', function () { - const mockDragMoveEvent1 = { dragPosition: { pageX: 120, pageY: 60 } }; - - const offsetLeft = mockDragStartEvent.dragPosition.pageX - this.draggableSnapshot.clientRect.left; - const offsetTop = mockDragStartEvent.dragPosition.pageY - this.draggableSnapshot.clientRect.top; - - const mockDragMoveEvent2 = { dragPosition: { pageX: 180, pageY: 120 } }; - - this.dragEventListener.dragMoved.next(mockDragMoveEvent1); - expect(this.ghostElement.style.left).toBe(`${mockDragMoveEvent1.dragPosition.pageX - offsetLeft}px`); - expect(this.ghostElement.style.top).toBe(`${mockDragMoveEvent1.dragPosition.pageY - offsetTop}px`); - - this.dragEventListener.dragMoved.next(mockDragMoveEvent2); - expect(this.ghostElement.style.left).toBe(`${mockDragMoveEvent2.dragPosition.pageX - offsetLeft}px`); - expect(this.ghostElement.style.top).toBe(`${mockDragMoveEvent2.dragPosition.pageY - offsetTop}px`); - }); - }); - }); -} - -@Component({ - template: ``, -}) -class WithNoWrappingDraggable {} - -@Component({ - template: ``, -}) -class WithWrappingDraggable { - display = true; -} diff --git a/projects/angular/src/utils/drag-and-drop/draggable-ghost.ts b/projects/angular/src/utils/drag-and-drop/draggable-ghost.ts deleted file mode 100644 index e47b838fc8..0000000000 --- a/projects/angular/src/utils/drag-and-drop/draggable-ghost.ts +++ /dev/null @@ -1,143 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { animate, style, transition, trigger } from '@angular/animations'; -import { Component, ElementRef, HostBinding, NgZone, OnDestroy, Optional, Renderer2 } from '@angular/core'; -import { Subscription } from 'rxjs'; - -import { DragEventInterface } from './interfaces/drag-event.interface'; -import { DragEventListenerService } from './providers/drag-event-listener.service'; -import { DraggableSnapshotService } from './providers/draggable-snapshot.service'; - -type PagePosition = { - pageX: number; - pageY: number; -}; -type OffsetPosition = { - top: number; - left: number; -}; - -@Component({ - selector: 'clr-draggable-ghost', - template: ``, - animations: [ - trigger('leaveAnimation', [ - transition(':leave', [ - style({ left: '*', top: '*' }), - animate('0.2s ease-in-out', style({ top: '{{top}}', left: '{{left}}' })), - ]), - ]), - ], -}) -export class ClrDraggableGhost implements OnDestroy { - private draggableGhostEl: any; - - private subscriptions: Subscription[] = []; - - @HostBinding('@leaveAnimation') leaveAnimConfig = { value: 0, params: { top: '0px', left: '0px' } }; - - constructor( - private el: ElementRef, - @Optional() private dragEventListener: DragEventListenerService, - @Optional() private draggableSnapshot: DraggableSnapshotService, - private renderer: Renderer2, - private ngZone: NgZone - ) { - if (!this.dragEventListener || !this.draggableSnapshot) { - throw new Error('The clr-draggable-ghost component can only be used inside of a clrDraggable directive.'); - } - - this.draggableGhostEl = this.el.nativeElement; - - // Need to use Renderer2 as it runs outside of NgZone - this.renderer.addClass(this.draggableGhostEl, 'draggable-ghost'); - - // Register the ghost element in DragEventListener to pass in a ClrDragEvent. - this.dragEventListener.ghostElement = this.draggableGhostEl; - - // Default ghost size gets the size of ClrDraggable element. - this.setDefaultGhostSize(this.draggableGhostEl); - - const offset: OffsetPosition = { - top: this.draggableSnapshot.hasDraggableState - ? this.draggableSnapshot.dragEvent.dragPosition.pageY - this.draggableSnapshot.clientRect.top - : 0, - left: this.draggableSnapshot.hasDraggableState - ? this.draggableSnapshot.dragEvent.dragPosition.pageX - this.draggableSnapshot.clientRect.left - : 0, - }; - - let isAnimationConfigured = false; - - this.subscriptions.push( - this.dragEventListener.dragMoved.subscribe((event: DragEventInterface) => { - // On the first drag move event, we configure the animation as it's dependent on the first drag event. - if (!isAnimationConfigured) { - if (this.draggableSnapshot.hasDraggableState) { - this.animateToOnLeave( - `${this.draggableSnapshot.clientRect.top}px`, - `${this.draggableSnapshot.clientRect.left}px` - ); - } else { - this.animateToOnLeave( - `${this.dragEventListener.dragStartPosition.pageY}px`, - `${this.dragEventListener.dragStartPosition.pageY}px` - ); - } - isAnimationConfigured = true; - } - - // Position the draggable ghost. - const topLeftPosition: PagePosition = this.findTopLeftPosition(event.dragPosition, offset); - this.setPositionStyle(this.draggableGhostEl, topLeftPosition.pageX, topLeftPosition.pageY); - this.dragEventListener.dropPointPosition = this.findDropPointPosition(topLeftPosition); - }) - ); - } - - private setDefaultGhostSize(el: Node): void { - if (this.draggableSnapshot.hasDraggableState) { - this.setSizeStyle(el, this.draggableSnapshot.clientRect.width, this.draggableSnapshot.clientRect.height); - } - } - - private animateToOnLeave(top: string, left: string): void { - this.ngZone.run(() => { - this.leaveAnimConfig = { value: 0, params: { top: top, left: left } }; - }); - } - - private findTopLeftPosition(dragPosition: PagePosition, offset: OffsetPosition): PagePosition { - return { pageX: dragPosition.pageX - offset.left, pageY: dragPosition.pageY - offset.top }; - } - - private findDropPointPosition(topLeftPosition: PagePosition): PagePosition { - if (this.draggableSnapshot.hasDraggableState) { - return { - pageX: topLeftPosition.pageX + this.draggableSnapshot.clientRect.width / 2, - pageY: topLeftPosition.pageY + this.draggableSnapshot.clientRect.height / 2, - }; - } else { - return topLeftPosition; - } - } - - private setSizeStyle(el: Node, width: number, height: number): void { - this.renderer.setStyle(el, 'width', `${width}px`); - this.renderer.setStyle(el, 'height', `${height}px`); - } - - private setPositionStyle(el: Node, left: number, top: number): void { - this.renderer.setStyle(el, 'left', `${left}px`); - this.renderer.setStyle(el, 'top', `${top}px`); - this.renderer.setStyle(el, 'visibility', 'visible'); - } - - ngOnDestroy() { - this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe()); - } -} diff --git a/projects/angular/src/utils/drag-and-drop/draggable/custom-ghost-integration.spec.ts b/projects/angular/src/utils/drag-and-drop/draggable/custom-ghost-integration.spec.ts deleted file mode 100644 index 70e4701ca8..0000000000 --- a/projects/angular/src/utils/drag-and-drop/draggable/custom-ghost-integration.spec.ts +++ /dev/null @@ -1,75 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; - -import { ClrIconModule } from '../../../icon/icon.module'; -import { DomAdapter } from '../../dom-adapter/dom-adapter'; -import { ClrDragAndDropModule } from '../drag-and-drop.module'; -import { generateDragPosition } from '../helpers.spec'; -import { DragEventInterface, DragEventType } from '../interfaces/drag-event.interface'; -import { DragEventListenerService } from '../providers/drag-event-listener.service'; -import { MOCK_DRAG_EVENT_LISTENER_PROVIDER } from '../providers/drag-event-listener.service.mock'; -import { DragHandleRegistrarService } from '../providers/drag-handle-registrar.service'; -import { DraggableSnapshotService } from '../providers/draggable-snapshot.service'; -import { GlobalDragModeService } from '../providers/global-drag-mode.service'; -import { ClrDraggable } from './draggable'; - -export default function (): void { - describe('With Custom Draggable Ghost', function () { - let mockDragStartEventInt: DragEventInterface; - - beforeEach(function () { - mockDragStartEventInt = { type: DragEventType.DRAG_START, dragPosition: generateDragPosition([5, 10], [6, 11]) }; - - TestBed.configureTestingModule({ - imports: [ClrDragAndDropModule, ClrIconModule, NoopAnimationsModule], - declarations: [CustomGhostTest], - }); - TestBed.overrideDirective(ClrDraggable, { - set: { - providers: [ - DomAdapter, - DragHandleRegistrarService, - DraggableSnapshotService, - GlobalDragModeService, - MOCK_DRAG_EVENT_LISTENER_PROVIDER, - ], - }, - }); - - this.fixture = TestBed.createComponent(CustomGhostTest); - this.draggable = this.fixture.debugElement.query(By.directive(ClrDraggable)); - this.dragEventListener = this.draggable.injector.get(DragEventListenerService); - this.fixture.detectChanges(); - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should project custom ghost on drag start', function () { - this.dragEventListener.dragStarted.next(mockDragStartEventInt); - const draggableGhosts = this.fixture.nativeElement.querySelectorAll('clr-draggable-ghost'); - expect(draggableGhosts.length).toBe(1); - expect(draggableGhosts[0].querySelectorAll('cds-icon').length).toBe(1); - }); - }); -} -@Component({ - template: ` -
- Test - - - -
- `, -}) -class CustomGhostTest {} diff --git a/projects/angular/src/utils/drag-and-drop/draggable/drag-handle-integration.spec.ts b/projects/angular/src/utils/drag-and-drop/draggable/drag-handle-integration.spec.ts deleted file mode 100644 index 7d5661d462..0000000000 --- a/projects/angular/src/utils/drag-and-drop/draggable/drag-handle-integration.spec.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { ClrDragAndDropModule } from '../drag-and-drop.module'; -import { ClrDragHandle } from '../drag-handle'; -import { DragEventListenerService } from '../providers/drag-event-listener.service'; -import { DragHandleRegistrarService } from '../providers/drag-handle-registrar.service'; -import { ClrDraggable } from './draggable'; - -export default function (): void { - describe('With ClrDragHandle', function () { - beforeEach(function () { - TestBed.configureTestingModule({ imports: [ClrDragAndDropModule], declarations: [CustomHandleTest] }); - - this.fixture = TestBed.createComponent(CustomHandleTest); - this.testComponent = this.fixture.componentInstance; - this.draggable = this.fixture.debugElement.query(By.directive(ClrDraggable)); - this.dragEventListener = this.draggable.injector.get(DragEventListenerService); - this.dragHandleRegistrar = this.draggable.injector.get(DragHandleRegistrarService); - this.fixture.detectChanges(); - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should have its nested handle as drag handle if it is present', function () { - this.dragHandle = this.fixture.debugElement.query(By.directive(ClrDragHandle)); - expect(this.draggable.nativeElement.classList.contains('drag-handle')).toBeFalsy(); - expect(this.dragHandle.nativeElement.classList.contains('drag-handle')).toBeTruthy(); - expect(this.dragEventListener.draggableEl).toBe(this.dragHandle.nativeElement); - expect(this.dragHandleRegistrar.customHandleEl).toBe(this.dragHandle.nativeElement); - }); - }); -} - -@Component({ - template: `
`, -}) -class CustomHandleTest {} diff --git a/projects/angular/src/utils/drag-and-drop/draggable/draggable.spec.ts b/projects/angular/src/utils/drag-and-drop/draggable/draggable.spec.ts deleted file mode 100644 index f4b6b57ecc..0000000000 --- a/projects/angular/src/utils/drag-and-drop/draggable/draggable.spec.ts +++ /dev/null @@ -1,174 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; - -import { DomAdapter } from '../../dom-adapter/dom-adapter'; -import { ClrDragAndDropModule } from '../drag-and-drop.module'; -import { ClrDragEvent } from '../drag-event'; -import { generateDragPosition } from '../helpers.spec'; -import { DragEventInterface, DragEventType } from '../interfaces/drag-event.interface'; -import { DragEventListenerService } from '../providers/drag-event-listener.service'; -import { MOCK_DRAG_EVENT_LISTENER_PROVIDER } from '../providers/drag-event-listener.service.mock'; -import { DragHandleRegistrarService } from '../providers/drag-handle-registrar.service'; -import { DraggableSnapshotService } from '../providers/draggable-snapshot.service'; -import { GlobalDragModeService } from '../providers/global-drag-mode.service'; -import { ClrDraggable } from './draggable'; - -export default function (): void { - describe('Basic Draggable', function () { - let mockDragStartEventInt: DragEventInterface; - let mockDragMoveEventInt: DragEventInterface; - let mockDragEndEventInt: DragEventInterface; - - let mockDragStartEventExt: ClrDragEvent; - let mockDragMoveEventExt: ClrDragEvent; - let mockDragEndEventExt: ClrDragEvent; - - beforeEach(function () { - mockDragStartEventInt = { type: DragEventType.DRAG_START, dragPosition: generateDragPosition([5, 10], [11, 22]) }; - mockDragMoveEventInt = { type: DragEventType.DRAG_MOVE, dragPosition: generateDragPosition([5, 10], [33, 44]) }; - mockDragEndEventInt = { type: DragEventType.DRAG_END, dragPosition: generateDragPosition([5, 10], [77, 88]) }; - - mockDragStartEventExt = new ClrDragEvent(mockDragStartEventInt); - mockDragMoveEventExt = new ClrDragEvent(mockDragMoveEventInt); - mockDragEndEventExt = new ClrDragEvent(mockDragEndEventInt); - - TestBed.configureTestingModule({ - imports: [ClrDragAndDropModule, NoopAnimationsModule], - declarations: [BasicDraggableTest], - }); - TestBed.overrideDirective(ClrDraggable, { - set: { - providers: [ - DomAdapter, - DragHandleRegistrarService, - DraggableSnapshotService, - GlobalDragModeService, - MOCK_DRAG_EVENT_LISTENER_PROVIDER, - ], - }, - }); - this.fixture = TestBed.createComponent(BasicDraggableTest); - this.testComponent = this.fixture.componentInstance; - this.draggable = this.fixture.debugElement.query(By.directive(ClrDraggable)); - this.dragEventListener = this.draggable.injector.get(DragEventListenerService); - this.dragHandleRegistrar = this.draggable.injector.get(DragHandleRegistrarService); - this.globalDragMode = this.draggable.injector.get(GlobalDragModeService); - this.fixture.detectChanges(); - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should have draggable class', function () { - expect(this.draggable.nativeElement.classList.contains('draggable')).toBeTruthy(); - }); - - it('should pass drag start delay to dragListener', function () { - this.testComponent.dragStartDelay = 123; - this.fixture.detectChanges(); - expect(this.dragEventListener.dragStartDelay).toBe(123); - }); - - it('should emit event on drag start', function () { - this.dragEventListener.dragStarted.next(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - expect(this.testComponent.dragMoveEvent).toBeUndefined(); - expect(this.testComponent.dragEndEvent).toBeUndefined(); - }); - - it('should add being-dragged class on drag start', function () { - this.dragEventListener.dragStarted.next(mockDragStartEventInt); - this.fixture.detectChanges(); - expect(this.draggable.nativeElement.classList.contains('being-dragged')).toBeTruthy(); - }); - - it('should call GlobalDragMode.enter() on drag start', function () { - spyOn(this.globalDragMode, 'enter'); - this.dragEventListener.dragStarted.next(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - expect(this.globalDragMode.enter).toHaveBeenCalled(); - }); - - it('should emit event on drag move', function () { - this.dragEventListener.dragMoved.next(mockDragMoveEventInt); - expect(this.testComponent.dragStartEvent).toBeUndefined(); - expect(this.testComponent.dragMoveEvent).toEqual(mockDragMoveEventExt); - expect(this.testComponent.dragEndEvent).toBeUndefined(); - }); - - it('should emit event on drag end', function () { - this.dragEventListener.dragEnded.next(mockDragEndEventExt); - expect(this.testComponent.dragStartEvent).toBeUndefined(); - expect(this.testComponent.dragMoveEvent).toBeUndefined(); - expect(this.testComponent.dragEndEvent).toEqual(mockDragEndEventExt); - }); - - it('should remove being-dragged class on drag end', function () { - this.dragEventListener.dragEnded.next(mockDragEndEventExt); - this.fixture.detectChanges(); - expect(this.draggable.nativeElement.classList.contains('being-dragged')).toBeFalsy(); - }); - - it('should call GlobalDragMode.exit() on drag end', function () { - spyOn(this.globalDragMode, 'exit'); - this.dragEventListener.dragEnded.next(mockDragEndEventExt); - expect(this.globalDragMode.exit).toHaveBeenCalled(); - }); - - it('should have its own element as default drag handle when there is no nested drag handle', function () { - expect(this.draggable.nativeElement.classList.contains('drag-handle')).toBeTruthy(); - expect(this.dragEventListener.draggableEl).toBe(this.draggable.nativeElement); - expect(this.dragHandleRegistrar.defaultHandleEl).toBe(this.draggable.nativeElement); - expect(this.dragHandleRegistrar.customHandleEl).toBeUndefined(); - }); - - it('should instantiate cloned version of draggable as ghost on drag start', function () { - this.dragEventListener.dragStarted.next(mockDragStartEventInt); - const draggableGhost = this.fixture.nativeElement.querySelectorAll('clr-draggable-ghost'); - expect(draggableGhost.length).toBe(1); - expect(this.draggable.nativeElement.nextSibling).toBe( - draggableGhost[0], - `The default ghost appears next to the draggable element.` - ); - expect(draggableGhost[0].querySelectorAll('.draggable').length).toBe(1); - expect(draggableGhost[0].querySelector('.draggable').textContent.trim()).toBe('Test'); - }); - - it('should create ghost as sibling', function () { - this.dragEventListener.dragStarted.next(mockDragStartEventInt); - const draggable = this.fixture.nativeElement.querySelector('.draggable'); - const draggableGhost = this.fixture.nativeElement.querySelector('clr-draggable-ghost'); - expect(draggable.nextSibling).toBe(draggableGhost); - }); - }); -} - -@Component({ - template: ` -
- Test -
- `, -}) -class BasicDraggableTest { - dragStartEvent: ClrDragEvent; - dragMoveEvent: ClrDragEvent; - dragEndEvent: ClrDragEvent; - - dragStartDelay: number; -} diff --git a/projects/angular/src/utils/drag-and-drop/draggable/draggable.ts b/projects/angular/src/utils/drag-and-drop/draggable/draggable.ts deleted file mode 100644 index 02d7216740..0000000000 --- a/projects/angular/src/utils/drag-and-drop/draggable/draggable.ts +++ /dev/null @@ -1,138 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { - AfterContentInit, - ComponentFactory, - ComponentFactoryResolver, - ContentChild, - Directive, - ElementRef, - EventEmitter, - Injector, - OnDestroy, - Output, - ViewContainerRef, -} from '@angular/core'; -import { Input } from '@angular/core'; -import { Subscription } from 'rxjs'; - -import { DomAdapter } from '../../dom-adapter/dom-adapter'; -import { ClrDragEvent } from '../drag-event'; -import { ClrDraggableGhost } from '../draggable-ghost'; -import { ClrIfDragged } from '../if-dragged'; -import { DragEventInterface } from '../interfaces/drag-event.interface'; -import { DragEventListenerService } from '../providers/drag-event-listener.service'; -import { DragHandleRegistrarService } from '../providers/drag-handle-registrar.service'; -import { DraggableSnapshotService } from '../providers/draggable-snapshot.service'; -import { GlobalDragModeService } from '../providers/global-drag-mode.service'; - -@Directive({ - selector: '[clrDraggable]', - providers: [ - DragEventListenerService, - DragHandleRegistrarService, - DraggableSnapshotService, - GlobalDragModeService, - DomAdapter, - ], - host: { '[class.draggable]': 'true', '[class.being-dragged]': 'dragOn' }, -}) -export class ClrDraggable implements AfterContentInit, OnDestroy { - private draggableEl: any; - private subscriptions: Subscription[] = []; - private componentFactory: ComponentFactory>; - dragOn = false; - - constructor( - private el: ElementRef, - private dragEventListener: DragEventListenerService, - private dragHandleRegistrar: DragHandleRegistrarService, - private viewContainerRef: ViewContainerRef, - private cfr: ComponentFactoryResolver, - private injector: Injector, - private draggableSnapshot: DraggableSnapshotService, - private globalDragMode: GlobalDragModeService - ) { - this.draggableEl = this.el.nativeElement; - this.componentFactory = this.cfr.resolveComponentFactory>(ClrDraggableGhost); - } - - @ContentChild(ClrIfDragged) customGhost: ClrIfDragged; - - @Input('clrDraggable') - set dataTransfer(value: T) { - this.dragEventListener.dragDataTransfer = value; - } - - @Input('clrGroup') - set group(value: string | string[]) { - this.dragEventListener.group = value; - } - - @Input('clrDragStartDelay') - set dragStartDelay(value: number) { - if (typeof value === 'number') { - this.dragEventListener.dragStartDelay = value; - } else if (typeof value === 'string') { - this.dragEventListener.dragStartDelay = parseInt(value, 10) || 0; - } - } - - private createDefaultGhost(event: DragEventInterface) { - this.draggableSnapshot.capture(this.draggableEl, event); - // NOTE: The default ghost element will appear - // next to the clrDraggable in the DOM as a sibling element. - this.viewContainerRef.createComponent(this.componentFactory, 0, this.injector, [ - [this.draggableEl.cloneNode(true)], - ]); - } - - private destroyDefaultGhost() { - this.viewContainerRef.clear(); - this.draggableSnapshot.discard(); - } - - @Output('clrDragStart') dragStartEmitter: EventEmitter> = new EventEmitter(); - @Output('clrDragMove') dragMoveEmitter: EventEmitter> = new EventEmitter(); - @Output('clrDragEnd') dragEndEmitter: EventEmitter> = new EventEmitter(); - - ngAfterContentInit() { - this.dragHandleRegistrar.defaultHandleEl = this.draggableEl; - - this.subscriptions.push( - this.dragEventListener.dragStarted.subscribe((event: DragEventInterface) => { - this.globalDragMode.enter(); - this.dragOn = true; - if (!this.customGhost) { - this.createDefaultGhost(event); - } - - this.dragStartEmitter.emit(new ClrDragEvent(event)); - }) - ); - this.subscriptions.push( - this.dragEventListener.dragMoved.subscribe((event: DragEventInterface) => { - this.dragMoveEmitter.emit(new ClrDragEvent(event)); - }) - ); - this.subscriptions.push( - this.dragEventListener.dragEnded.subscribe((event: DragEventInterface) => { - this.globalDragMode.exit(); - this.dragOn = false; - if (!this.customGhost) { - this.destroyDefaultGhost(); - } - this.dragEndEmitter.emit(new ClrDragEvent(event)); - }) - ); - } - - ngOnDestroy() { - this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe()); - this.dragEventListener.detachDragListeners(); - } -} diff --git a/projects/angular/src/utils/drag-and-drop/draggable/ghost-and-handle-integration.spec.ts b/projects/angular/src/utils/drag-and-drop/draggable/ghost-and-handle-integration.spec.ts deleted file mode 100644 index 7373b30a9a..0000000000 --- a/projects/angular/src/utils/drag-and-drop/draggable/ghost-and-handle-integration.spec.ts +++ /dev/null @@ -1,87 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; - -import { ClrIconModule } from '../../../icon/icon.module'; -import { DomAdapter } from '../../dom-adapter/dom-adapter'; -import { ClrDragAndDropModule } from '../drag-and-drop.module'; -import { ClrDragHandle } from '../drag-handle'; -import { generateDragPosition } from '../helpers.spec'; -import { DragEventInterface, DragEventType } from '../interfaces/drag-event.interface'; -import { DragEventListenerService } from '../providers/drag-event-listener.service'; -import { MOCK_DRAG_EVENT_LISTENER_PROVIDER } from '../providers/drag-event-listener.service.mock'; -import { DragHandleRegistrarService } from '../providers/drag-handle-registrar.service'; -import { DraggableSnapshotService } from '../providers/draggable-snapshot.service'; -import { GlobalDragModeService } from '../providers/global-drag-mode.service'; -import { ClrDraggable } from './draggable'; - -export default function (): void { - describe('With Custom Draggable Ghost and Handle', function () { - let mockDragStartEventInt: DragEventInterface; - - beforeEach(function () { - mockDragStartEventInt = { type: DragEventType.DRAG_START, dragPosition: generateDragPosition([5, 10], [11, 22]) }; - - TestBed.configureTestingModule({ - imports: [ClrDragAndDropModule, ClrIconModule, NoopAnimationsModule], - declarations: [CustomGhostAndHandleTest], - }); - TestBed.overrideDirective(ClrDraggable, { - set: { - providers: [ - DomAdapter, - DragHandleRegistrarService, - DraggableSnapshotService, - GlobalDragModeService, - MOCK_DRAG_EVENT_LISTENER_PROVIDER, - ], - }, - }); - - this.fixture = TestBed.createComponent(CustomGhostAndHandleTest); - this.draggable = this.fixture.debugElement.query(By.directive(ClrDraggable)); - this.dragEventListener = this.draggable.injector.get(DragEventListenerService); - this.dragHandleRegistrar = this.draggable.injector.get(DragHandleRegistrarService); - this.fixture.detectChanges(); - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should have its nested handle as drag handle if it is present', function () { - this.dragHandle = this.fixture.debugElement.query(By.directive(ClrDragHandle)); - expect(this.draggable.nativeElement.classList.contains('drag-handle')).toBeFalsy(); - expect(this.dragHandle.nativeElement.classList.contains('drag-handle')).toBeTruthy(); - expect(this.dragEventListener.draggableEl).toBe(this.dragHandle.nativeElement); - expect(this.dragHandleRegistrar.customHandleEl).toBe(this.dragHandle.nativeElement); - }); - - it('should project custom ghost on drag start', function () { - this.dragEventListener.dragStarted.next(mockDragStartEventInt); - expect(this.fixture.nativeElement.querySelectorAll('clr-draggable-ghost').length).toBe(1); - const draggableGhost = this.fixture.nativeElement.querySelector('clr-draggable-ghost'); - expect(draggableGhost.querySelectorAll('cds-icon').length).toBe(1); - }); - }); -} - -@Component({ - template: ` -
- Test - - - - -
- `, -}) -class CustomGhostAndHandleTest {} diff --git a/projects/angular/src/utils/drag-and-drop/droppable/droppable.spec.ts b/projects/angular/src/utils/drag-and-drop/droppable/droppable.spec.ts deleted file mode 100644 index 85a14b52ed..0000000000 --- a/projects/angular/src/utils/drag-and-drop/droppable/droppable.spec.ts +++ /dev/null @@ -1,559 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { ClrDragEvent } from '../drag-event'; -import { generateDragPosition } from '../helpers.spec'; -import { DragEventInterface, DragEventType, DragPointPosition } from '../interfaces/drag-event.interface'; -import { ClrDropToleranceInterface } from '../interfaces/drop-tolerance.interface'; -import { DragAndDropEventBusService } from '../providers/drag-and-drop-event-bus.service'; -import { MOCK_DRAG_DROP_EVENT_BUS } from '../providers/drag-and-drop-event-bus.service.mock'; -import { ClrDroppable } from './droppable'; - -export default function (): void { - let mockDragStartEventInt: DragEventInterface; - let mockDragMoveEventInt: DragEventInterface; - let mockDragEndEventInt: DragEventInterface; - - let mockDragStartEventExt: ClrDragEvent; - let mockDragMoveEventExt: ClrDragEvent; - let mockDragEndEventExt: ClrDragEvent; - - beforeEach(function () { - mockDragStartEventInt = { type: DragEventType.DRAG_START, dragPosition: generateDragPosition([5, 10], [11, 22]) }; - mockDragMoveEventInt = { type: DragEventType.DRAG_MOVE, dragPosition: generateDragPosition([5, 10], [33, 44]) }; - mockDragEndEventInt = { type: DragEventType.DRAG_END, dragPosition: generateDragPosition([5, 10], [77, 88]) }; - - mockDragStartEventExt = new ClrDragEvent(mockDragStartEventInt); - mockDragMoveEventExt = new ClrDragEvent(mockDragMoveEventInt); - mockDragEndEventExt = new ClrDragEvent(mockDragEndEventInt); - }); - - const decorateEventWithDropPosition = (event, dropPointPosition: DragPointPosition) => { - event.dropPointPosition = dropPointPosition; - }; - - const decorateEventWithGroup = (event, group: string | string[]) => { - event.group = group; - }; - - describe('Basic Droppable', function () { - beforeEach(function () { - TestBed.configureTestingModule({ - declarations: [BasicDroppable, ClrDroppable], - providers: [MOCK_DRAG_DROP_EVENT_BUS], - }); - - this.fixture = TestBed.createComponent(BasicDroppable); - this.testComponent = this.fixture.componentInstance; - this.testElement = this.fixture.nativeElement; - this.droppable = this.fixture.debugElement.query(By.directive(ClrDroppable)); - this.eventBus = TestBed.get(DragAndDropEventBusService); - this.fixture.detectChanges(); - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should have droppable class', function () { - expect(this.droppable.nativeElement.classList.contains('droppable')).toBeTruthy(); - }); - - it('should emit on dragStart', function () { - this.eventBus.broadcast(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - }); - - it('should have draggable-match class on dragStart', function () { - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeTruthy(); - }); - - it("should not emit on dragMove if dragStart hasn't been registered", function () { - this.eventBus.broadcast(mockDragMoveEventInt); - expect(this.testComponent.dragMoveEvent).toBeUndefined(); - }); - - it('should emit on dragMove', function () { - this.eventBus.broadcast(mockDragStartEventInt); - this.eventBus.broadcast(mockDragMoveEventInt); - - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - expect(this.testComponent.dragMoveEvent).toEqual(mockDragMoveEventExt); - }); - - it("should not emit on dragEnd if dragStart hasn't been registered", function () { - this.eventBus.broadcast(mockDragEndEventInt); - expect(this.testComponent.dragEndEvent).toBeUndefined(); - }); - - it('should emit on dragEnd', function () { - this.eventBus.broadcast(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - this.eventBus.broadcast(mockDragEndEventInt); - expect(this.testComponent.dragEndEvent).toEqual(mockDragEndEventExt); - }); - - it('should remove draggable-match class on dragEnd', function () { - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeTruthy(); - this.eventBus.broadcast(mockDragEndEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeFalsy(); - }); - - it('should emit on dragEnter', function () { - this.eventBus.broadcast(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - decorateEventWithDropPosition(mockDragMoveEventInt, { pageX: 500, pageY: 300 }); - decorateEventWithDropPosition(mockDragMoveEventExt, { pageX: 500, pageY: 300 }); - this.eventBus.broadcast(mockDragMoveEventInt); - expect(this.testComponent.dragMoveEvent).toEqual(mockDragMoveEventExt); - const enterEventExt = new ClrDragEvent({ ...mockDragMoveEventInt, type: DragEventType.DRAG_ENTER }); - expect(this.testComponent.dragEnterEvent).toEqual(enterEventExt); - expect(this.testComponent.dragLeaveEvent).toBeUndefined(); - }); - - it('should have draggable-over on dragEnter', function () { - this.eventBus.broadcast(mockDragStartEventInt); - decorateEventWithDropPosition(mockDragMoveEventInt, { pageX: 500, pageY: 300 }); - this.eventBus.broadcast(mockDragMoveEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-over')).toBeTruthy(); - }); - - it("should not emit on dragLeave if dragEnter hasn't been registered", function () { - this.eventBus.broadcast(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - this.eventBus.broadcast(mockDragMoveEventInt); - expect(this.testComponent.dragMoveEvent).toEqual(mockDragMoveEventExt); - expect(this.testComponent.dragEnterEvent).not.toEqual(mockDragMoveEventExt); - expect(this.testComponent.dragLeaveEvent).toBeUndefined(); - }); - - it('should emit on dragLeave', function () { - this.eventBus.broadcast(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - - decorateEventWithDropPosition(mockDragMoveEventInt, { pageX: 500, pageY: 300 }); - decorateEventWithDropPosition(mockDragMoveEventExt, { pageX: 500, pageY: 300 }); - this.eventBus.broadcast(mockDragMoveEventInt); - - expect(this.testComponent.dragMoveEvent).toEqual(mockDragMoveEventExt); - const enterEventExt = new ClrDragEvent({ ...mockDragMoveEventInt, type: DragEventType.DRAG_ENTER }); - expect(this.testComponent.dragEnterEvent).toEqual(enterEventExt); - decorateEventWithDropPosition(mockDragMoveEventInt, { pageX: 0, pageY: 0 }); - this.eventBus.broadcast(mockDragMoveEventInt); - const leaveEventExt = new ClrDragEvent({ ...mockDragMoveEventInt, type: DragEventType.DRAG_LEAVE }); - expect(this.testComponent.dragLeaveEvent).toEqual(leaveEventExt); - }); - - it('should remove draggable-over class on dragLeave', function () { - this.eventBus.broadcast(mockDragStartEventInt); - decorateEventWithDropPosition(mockDragMoveEventInt, { pageX: 500, pageY: 300 }); - this.eventBus.broadcast(mockDragMoveEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-over')).toBeTruthy(); - decorateEventWithDropPosition(mockDragMoveEventInt, { pageX: 0, pageY: 0 }); - this.eventBus.broadcast(mockDragMoveEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-over')).toBeFalsy(); - }); - - it("should not emit on drop if dragEnter hasn't been registered", function () { - this.eventBus.broadcast(mockDragStartEventInt); - decorateEventWithDropPosition(mockDragStartEventInt, { pageX: 0, pageY: 0 }); - this.eventBus.broadcast(mockDragMoveEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - expect(this.testComponent.dragMoveEvent).toEqual(mockDragMoveEventExt); - expect(this.testComponent.dragEnterEvent).not.toEqual(mockDragMoveEventExt); - this.eventBus.broadcast(mockDragEndEventInt); - expect(this.testComponent.dropEvent).toBeUndefined(); - }); - - it('should emit on drop if dragEnter has been registered', function () { - this.eventBus.broadcast(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - decorateEventWithDropPosition(mockDragMoveEventInt, { pageX: 500, pageY: 300 }); - decorateEventWithDropPosition(mockDragMoveEventExt, { pageX: 500, pageY: 300 }); - this.eventBus.broadcast(mockDragMoveEventInt); - expect(this.testComponent.dragMoveEvent).toEqual(mockDragMoveEventExt); - const enterEventExt = new ClrDragEvent({ ...mockDragMoveEventInt, type: DragEventType.DRAG_ENTER }); - expect(this.testComponent.dragEnterEvent).toEqual(enterEventExt); - this.eventBus.broadcast(mockDragEndEventInt); - const dropEventExt = new ClrDragEvent({ ...mockDragEndEventInt, type: DragEventType.DROP }); - expect(this.testComponent.dropEvent).toEqual(dropEventExt); - }); - - it('should remove both draggable-match and draggable-over classes on drop', function () { - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeTruthy(); - decorateEventWithDropPosition(mockDragMoveEventInt, { pageX: 500, pageY: 300 }); - this.eventBus.broadcast(mockDragMoveEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-over')).toBeTruthy(); - this.eventBus.broadcast(mockDragEndEventInt); - this.fixture.detectChanges(); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeFalsy(); - expect(this.droppable.nativeElement.classList.contains('draggable-over')).toBeFalsy(); - }); - }); - - describe('Droppable With clrGroup', function () { - beforeEach(function () { - TestBed.configureTestingModule({ - declarations: [DroppableWithGroup, ClrDroppable], - providers: [MOCK_DRAG_DROP_EVENT_BUS], - }); - - this.fixture = TestBed.createComponent(DroppableWithGroup); - this.testComponent = this.fixture.componentInstance; - this.testElement = this.fixture.nativeElement; - this.droppable = this.fixture.debugElement.query(By.directive(ClrDroppable)); - this.eventBus = TestBed.get(DragAndDropEventBusService); - this.fixture.detectChanges(); - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should match if droppable without group keys registers dragStart event that has no group keys', function () { - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeTruthy(); - }); - - it('should not match if droppable with no group keys registers dragStart event with defined group', function () { - decorateEventWithGroup(mockDragStartEventInt, 'draggable-1'); - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - expect(this.testComponent.dragStartEvent).not.toEqual( - mockDragStartEventExt, - `shouldn't emit dragStart if groups don't match.` - ); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeFalsy(); - }); - - it("should match if droppable's group key match with dragStart event's group key", function () { - this.testComponent.droppableGroup = 'draggable-1'; - this.fixture.detectChanges(); - decorateEventWithGroup(mockDragStartEventInt, 'draggable-1'); - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - decorateEventWithGroup(mockDragStartEventExt, 'draggable-1'); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeTruthy(); - }); - - it("should match if droppable's group key match with one of dragStart event's group keys", function () { - this.testComponent.droppableGroup = 'draggable-1'; - this.fixture.detectChanges(); - decorateEventWithGroup(mockDragStartEventInt, ['draggable-1', 'draggable-2', 'draggable-3']); - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - decorateEventWithGroup(mockDragStartEventExt, ['draggable-1', 'draggable-2', 'draggable-3']); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeTruthy(); - }); - - it("should not match if none of droppable's group keys match with any of dragStart event's group keys", function () { - this.testComponent.droppableGroup = ['draggable-1', 'draggable-2']; - this.fixture.detectChanges(); - decorateEventWithGroup(mockDragStartEventInt, ['draggable-3', 'draggable-4', 'draggable-5']); - decorateEventWithGroup(mockDragStartEventExt, ['draggable-3', 'draggable-4', 'draggable-5']); - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - expect(this.testComponent.dragStartEvent).not.toEqual( - mockDragStartEventExt, - `shouldn't emit dragStart if groups don't match.` - ); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeFalsy(); - }); - - it("should match if one of droppable's group keys match with one of dragStart event's group keys", function () { - this.testComponent.droppableGroup = ['draggable-1', 'draggable-2', 'draggable-3']; - this.fixture.detectChanges(); - decorateEventWithGroup(mockDragStartEventInt, ['draggable-3', 'draggable-4', 'draggable-5']); - this.eventBus.broadcast(mockDragStartEventInt); - this.fixture.detectChanges(); - decorateEventWithGroup(mockDragStartEventExt, ['draggable-3', 'draggable-4', 'draggable-5']); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - expect(this.droppable.nativeElement.classList.contains('draggable-match')).toBeTruthy(); - }); - }); - - describe('Droppable With clrDropTolerance', function () { - beforeEach(function () { - TestBed.configureTestingModule({ - declarations: [DroppableWithTolerance, ClrDroppable], - providers: [MOCK_DRAG_DROP_EVENT_BUS], - }); - - this.fixture = TestBed.createComponent(DroppableWithTolerance); - this.testComponent = this.fixture.componentInstance; - this.testElement = this.fixture.nativeElement; - this.droppable = this.fixture.debugElement.query(By.directive(ClrDroppable)); - this.eventBus = TestBed.get(DragAndDropEventBusService); - this.fixture.detectChanges(); - - this.broadcastEnterLeaveEventAt = function (_pageX: number, _pageY: number) { - if (!this.testComponent.dragStartEvent) { - throw new Error('A drag start event should be broadcasted and registered first.'); - } - delete this.testComponent.dragEnterEvent; - delete this.testComponent.dragLeaveEvent; - - const dragEvent = { type: DragEventType.DRAG_MOVE, dropPointPosition: { pageX: _pageX, pageY: _pageY } }; - this.eventBus.broadcast(dragEvent); - return dragEvent; - }; - - this.detectEnterOrLeaveAt = function (tolerance: ClrDropToleranceInterface) { - expect( - new ClrDragEvent({ - ...this.broadcastEnterLeaveEventAt(400 - tolerance.left, 200 - tolerance.top), - type: DragEventType.DRAG_ENTER, - }) - ).toEqual(this.testComponent.dragEnterEvent); - expect( - new ClrDragEvent({ - ...this.broadcastEnterLeaveEventAt(399 - tolerance.left, 199 - tolerance.top), - type: DragEventType.DRAG_LEAVE, - }) - ).toEqual(this.testComponent.dragLeaveEvent); - expect( - new ClrDragEvent({ - ...this.broadcastEnterLeaveEventAt(600 + tolerance.right, 200 - tolerance.top), - type: DragEventType.DRAG_ENTER, - }) - ).toEqual(this.testComponent.dragEnterEvent); - expect( - new ClrDragEvent({ - ...this.broadcastEnterLeaveEventAt(601 + tolerance.right, 199 - tolerance.top), - type: DragEventType.DRAG_LEAVE, - }) - ).toEqual(this.testComponent.dragLeaveEvent); - expect( - new ClrDragEvent({ - ...this.broadcastEnterLeaveEventAt(600 + tolerance.right, 600 + tolerance.bottom), - type: DragEventType.DRAG_ENTER, - }) - ).toEqual(this.testComponent.dragEnterEvent); - expect( - new ClrDragEvent({ - ...this.broadcastEnterLeaveEventAt(601 + tolerance.right, 601 + tolerance.bottom), - type: DragEventType.DRAG_LEAVE, - }) - ).toEqual(this.testComponent.dragLeaveEvent); - expect( - new ClrDragEvent({ - ...this.broadcastEnterLeaveEventAt(400 - tolerance.left, 600 + tolerance.bottom), - type: DragEventType.DRAG_ENTER, - }) - ).toEqual(this.testComponent.dragEnterEvent); - expect( - new ClrDragEvent({ - ...this.broadcastEnterLeaveEventAt(399 - tolerance.left, 601 + tolerance.bottom), - type: DragEventType.DRAG_LEAVE, - }) - ).toEqual(this.testComponent.dragLeaveEvent); - }; - - this.expectDropToleranceInput = function (userInput: number | string | ClrDropToleranceInterface) { - this.testComponent.tolerance = userInput; - this.fixture.detectChanges(); - this.eventBus.broadcast(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - - return { - toBeCheckedAs: function (expectedResult: ClrDropToleranceInterface) { - this.detectEnterOrLeaveAt(expectedResult); - }.bind(this), - }; - }; - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('can register dragEnter only if dropPointPosition is over dropppable when drop tolerance is not defined', function () { - this.eventBus.broadcast(mockDragStartEventInt); - expect(this.testComponent.dragStartEvent).toEqual(mockDragStartEventExt); - this.detectEnterOrLeaveAt({ top: 0, right: 0, bottom: 0, left: 0 }); - }); - - it('can register dragEnter if dropPointPosition is within drop tolerance added as number', function () { - const tolerance = 20; - this.expectDropToleranceInput(tolerance).toBeCheckedAs({ - top: tolerance, - right: tolerance, - bottom: tolerance, - left: tolerance, - }); - }); - - it('can register dragEnter if dropPointPosition is within drop tolerance added as object', function () { - const tolerance: ClrDropToleranceInterface = { top: 20, right: 40, bottom: 60, left: 80 }; - this.testComponent.tolerance = tolerance; - this.expectDropToleranceInput(tolerance).toBeCheckedAs(tolerance); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '20'", function () { - this.expectDropToleranceInput('20').toBeCheckedAs({ top: 20, right: 20, bottom: 20, left: 20 }); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '20 40'", function () { - const tolerance = { top: 20, right: 40, bottom: 20, left: 40 }; - this.expectDropToleranceInput('20 40').toBeCheckedAs({ - top: tolerance.top, - right: tolerance.right, - bottom: tolerance.bottom, - left: tolerance.left, - }); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '20 0'", function () { - const tolerance = { top: 20, right: 0, bottom: 20, left: 0 }; - this.expectDropToleranceInput('20 0').toBeCheckedAs({ - top: tolerance.top, - right: tolerance.right, - bottom: tolerance.bottom, - left: tolerance.left, - }); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '20 0 0'", function () { - const tolerance = { top: 20, right: 0, bottom: 0, left: 0 }; - this.testComponent.tolerance = '20 0'; - this.expectDropToleranceInput(tolerance).toBeCheckedAs({ - top: tolerance.top, - right: tolerance.right, - bottom: tolerance.bottom, - left: tolerance.left, - }); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '0 20'", function () { - const tolerance = { top: 0, right: 20, bottom: 0, left: 20 }; - this.expectDropToleranceInput('0 20').toBeCheckedAs({ - top: tolerance.top, - right: tolerance.right, - bottom: tolerance.bottom, - left: tolerance.left, - }); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '0 0 20'", function () { - const tolerance = { top: 0, right: 0, bottom: 20, left: 0 }; - this.expectDropToleranceInput('0 0 20').toBeCheckedAs({ - top: tolerance.top, - right: tolerance.right, - bottom: tolerance.bottom, - left: tolerance.left, - }); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '0 0 0 0'", function () { - const tolerance = { top: 0, right: 0, bottom: 0, left: 0 }; - this.expectDropToleranceInput('0 0 0 0').toBeCheckedAs({ - top: tolerance.top, - right: tolerance.right, - bottom: tolerance.bottom, - left: tolerance.left, - }); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '20 40 10'", function () { - const tolerance = { top: 20, right: 40, bottom: 10, left: 40 }; - this.expectDropToleranceInput('20 40 10').toBeCheckedAs({ - top: tolerance.top, - right: tolerance.right, - bottom: tolerance.bottom, - left: tolerance.left, - }); - }); - - it("can register dragEnter if dropPointPosition is within drop tolerance added as string of '20 40 10 30'", function () { - const tolerance = { top: 20, right: 40, bottom: 10, left: 30 }; - this.expectDropToleranceInput('20 40 10 30').toBeCheckedAs({ - top: tolerance.top, - right: tolerance.right, - bottom: tolerance.bottom, - left: tolerance.left, - }); - }); - }); -} - -@Component({ - styles: ['.basic-droppable { position: absolute; left: 400px; top: 200px; width: 200px; height: 400px; }'], - template: ` -
- Test -
- `, -}) -class BasicDroppable { - dragStartEvent: any; - dragMoveEvent: any; - dragEndEvent: any; - dragLeaveEvent: any; - dragEnterEvent: any; - dropEvent: any; -} - -@Component({ - template: ` -
- Test -
- `, -}) -class DroppableWithGroup { - droppableGroup: string | string[]; - dragStartEvent: any; -} - -@Component({ - styles: ['.droppable-with-tolerance { position: absolute; left: 400px; top: 200px; width: 200px; height: 400px; }'], - template: ` -
- Test -
- `, -}) -class DroppableWithTolerance { - tolerance: number | ClrDropToleranceInterface; - dragStartEvent: any; - dragLeaveEvent: any; - dragEnterEvent: any; -} diff --git a/projects/angular/src/utils/drag-and-drop/droppable/droppable.ts b/projects/angular/src/utils/drag-and-drop/droppable/droppable.ts deleted file mode 100644 index d74892f2ab..0000000000 --- a/projects/angular/src/utils/drag-and-drop/droppable/droppable.ts +++ /dev/null @@ -1,225 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, Renderer2 } from '@angular/core'; -import { Subscription } from 'rxjs'; - -import { DomAdapter } from '../../dom-adapter/dom-adapter'; -import { ClrDragEvent } from '../drag-event'; -import { DragEventInterface, DragEventType, DragPointPosition } from '../interfaces/drag-event.interface'; -import { ClrDropToleranceInterface } from '../interfaces/drop-tolerance.interface'; -import { DragAndDropEventBusService } from '../providers/drag-and-drop-event-bus.service'; - -@Directive({ - selector: '[clrDroppable]', - providers: [DomAdapter], - host: { '[class.droppable]': 'true', '[class.draggable-match]': 'isDraggableMatch' }, -}) -export class ClrDroppable implements OnInit, OnDestroy { - private dragStartSubscription: Subscription; - private dragMoveSubscription: Subscription; - private dragEndSubscription: Subscription; - - private droppableEl: any; - private clientRect: ClientRect; - - constructor( - private el: ElementRef, - private eventBus: DragAndDropEventBusService, - private domAdapter: DomAdapter, - private renderer: Renderer2 - ) { - this.droppableEl = this.el.nativeElement; - } - - isDraggableMatch = false; - private _isDraggableOver = false; - - set isDraggableOver(value: boolean) { - // We need to add/remove this draggable-over class via Renderer2 - // because isDraggableOver is set outside of NgZone. - if (value) { - this.renderer.addClass(this.droppableEl, 'draggable-over'); - } else { - this.renderer.removeClass(this.droppableEl, 'draggable-over'); - } - this._isDraggableOver = value; - } - - private _group: string | string[]; - - @Input('clrGroup') - set group(value: string | string[]) { - this._group = value; - } - - private _dropTolerance: ClrDropToleranceInterface = { top: 0, right: 0, bottom: 0, left: 0 }; - - private dropToleranceGenerator(top = 0, right = top, bottom = top, left = right): ClrDropToleranceInterface { - return { top, right, bottom, left }; - } - - @Input('clrDropTolerance') - set dropTolerance(value: number | string | ClrDropToleranceInterface) { - // If user provides an object here and wants to manipulate/update properties individually, - // the object must be immutable as we generate new object based user's given object. - if (typeof value === 'number') { - this._dropTolerance = this.dropToleranceGenerator(value); - } else if (typeof value === 'string') { - const toleranceValues = value - .trim() - .split(/\s+/) - .map(tolerance => parseInt(tolerance, 10)); - this._dropTolerance = this.dropToleranceGenerator(...toleranceValues); - } else if (value) { - // The value could be passed in as {left: 20, top: 30 } - // In this case, the rest of the direction properties should be 0. - // That's why we initialize properties with 0 first, then override with user's given value. - this._dropTolerance = { ...this.dropToleranceGenerator(0), ...value }; - } - } - - @Output('clrDragStart') dragStartEmitter: EventEmitter> = new EventEmitter(); - @Output('clrDragMove') dragMoveEmitter: EventEmitter> = new EventEmitter(); - @Output('clrDragEnd') dragEndEmitter: EventEmitter> = new EventEmitter(); - @Output('clrDragLeave') dragLeaveEmitter: EventEmitter> = new EventEmitter(); - @Output('clrDragEnter') dragEnterEmitter: EventEmitter> = new EventEmitter(); - @Output('clrDrop') dropEmitter: EventEmitter> = new EventEmitter(); - - private unsubscribeFrom(subscription: Subscription): void { - if (subscription) { - subscription.unsubscribe(); - } - } - - private checkGroupMatch(draggableGroup: string | string[]): boolean { - // Both Draggable and Droppable have clrGroup input. - // The clrGroup input can be both a string key or array of string keys in Draggable and Droppable. - - // It's not match if Draggable has no defined value assigned to clrGroup, but Droppable has a defined clrGroup. - if (!draggableGroup && this._group) { - return false; - } - // The same is true the other way round. - if (!this._group && draggableGroup) { - return false; - } - - // It's match if both Draggable and Droppable have no assigned value for clrGroup. - if (!this._group && !draggableGroup) { - return true; - } - - // It's match if both Draggable and Droppable have simple string keys that are matching. - // It's match if Draggable's simple clrGroup key is matching with one of the clrGroup keys of Droppable. The - // same is true the other way round. - // it's match if one of the clrGroup keys of Droppable is matching with one of the clrGroup keys of Draggable. - if (typeof draggableGroup === 'string') { - if (typeof this._group === 'string') { - return this._group === draggableGroup; - } else { - return this._group.indexOf(draggableGroup) > -1; - } - } else { - if (typeof this._group === 'string') { - return draggableGroup.indexOf(this._group) > -1; - } else { - return (this._group as string[]).some(groupKey => draggableGroup.indexOf(groupKey) > -1); - } - } - } - - private isInDropArea(point: DragPointPosition): boolean { - if (!point) { - return false; - } - - if (!this.clientRect) { - this.clientRect = this.domAdapter.clientRect(this.droppableEl); - } - - if ( - point.pageX >= this.clientRect.left - this._dropTolerance.left && - point.pageX <= this.clientRect.right + this._dropTolerance.right && - point.pageY >= this.clientRect.top - this._dropTolerance.top && - point.pageY <= this.clientRect.bottom + this._dropTolerance.bottom - ) { - return true; - } else { - return false; - } - } - - private onDragStart(dragStartEvent: DragEventInterface): void { - // Check draggable and droppable have a matching group key. - this.isDraggableMatch = this.checkGroupMatch(dragStartEvent.group); - - // Subscribe to dragMoved and dragEnded only if draggable and droppable have a matching group key. - if (this.isDraggableMatch) { - this.dragStartEmitter.emit(new ClrDragEvent(dragStartEvent)); - this.dragMoveSubscription = this.eventBus.dragMoved.subscribe((dragMoveEvent: DragEventInterface) => { - this.onDragMove(dragMoveEvent); - }); - this.dragEndSubscription = this.eventBus.dragEnded.subscribe((dragEndEvent: DragEventInterface) => { - this.onDragEnd(dragEndEvent); - }); - } - } - - private onDragMove(dragMoveEvent: DragEventInterface): void { - const isInDropArea = this.isInDropArea(dragMoveEvent.dropPointPosition); - if (!this._isDraggableOver && isInDropArea) { - this.isDraggableOver = true; - const dragEnterEvent = { ...dragMoveEvent, type: DragEventType.DRAG_ENTER }; - this.eventBus.broadcast(dragEnterEvent); - this.dragEnterEmitter.emit(new ClrDragEvent(dragEnterEvent)); - } else if (this._isDraggableOver && !isInDropArea) { - this.isDraggableOver = false; - const dragLeaveEvent = { ...dragMoveEvent, type: DragEventType.DRAG_LEAVE }; - this.eventBus.broadcast(dragLeaveEvent); - this.dragLeaveEmitter.emit(new ClrDragEvent(dragLeaveEvent)); - } - - this.dragMoveEmitter.emit(new ClrDragEvent(dragMoveEvent)); - } - - private onDragEnd(dragEndEvent: DragEventInterface): void { - if (this._isDraggableOver) { - if (dragEndEvent.ghostElement) { - // By this point, the draggable ghost component is destroyed, - // but the element would be active until its animation completes. - // As such, once the ghost is dropped over, we will give it "dropped" class. - - // This process cannot be done in the ghost component - // because any subscription to the drop event is ineffective or invalid - // as the component had been already destroyed. - this.renderer.addClass(dragEndEvent.ghostElement, 'dropped'); - } - - const dropEvent = { ...dragEndEvent, type: DragEventType.DROP }; - this.eventBus.broadcast(dropEvent); - this.dropEmitter.emit(new ClrDragEvent(dropEvent)); - this.isDraggableOver = false; - } - this.dragEndEmitter.emit(new ClrDragEvent(dragEndEvent)); - this.unsubscribeFrom(this.dragMoveSubscription); - this.unsubscribeFrom(this.dragEndSubscription); - this.isDraggableMatch = false; - delete this.clientRect; - } - - ngOnInit() { - this.dragStartSubscription = this.eventBus.dragStarted.subscribe((dragStartEvent: DragEventInterface) => { - this.onDragStart(dragStartEvent); - }); - } - - ngOnDestroy() { - this.unsubscribeFrom(this.dragStartSubscription); - this.unsubscribeFrom(this.dragMoveSubscription); - this.unsubscribeFrom(this.dragEndSubscription); - } -} diff --git a/projects/angular/src/utils/drag-and-drop/helpers.spec.ts b/projects/angular/src/utils/drag-and-drop/helpers.spec.ts deleted file mode 100644 index cdd8c6f61c..0000000000 --- a/projects/angular/src/utils/drag-and-drop/helpers.spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { DragPointPosition } from './interfaces/drag-event.interface'; - -export const generateDragPosition = ( - startPosition: [number, number], - movePosition?: [number, number] -): DragPointPosition => { - if (!movePosition) { - return { - pageX: startPosition[0], - pageY: startPosition[1], - moveX: 0, - moveY: 0, - }; - } - return { - pageX: movePosition[0], - pageY: movePosition[1], - moveX: movePosition[0] - startPosition[0], - moveY: movePosition[1] - startPosition[1], - }; -}; - -export const emulateDragEvent = ( - eventName: string, - pageX = 0, - pageY = 0, - element: Document | Node = document.body -): void => { - const emulatedEvent: any = new CustomEvent(eventName, { bubbles: true }); - if (eventName.startsWith('touch')) { - emulatedEvent.changedTouches = [{ pageX: pageX, pageY: pageY }]; - } else { - emulatedEvent.pageX = pageX; - emulatedEvent.pageY = pageY; - } - - element.dispatchEvent(emulatedEvent); -}; diff --git a/projects/angular/src/utils/drag-and-drop/if-dragged.spec.ts b/projects/angular/src/utils/drag-and-drop/if-dragged.spec.ts deleted file mode 100644 index 831323e219..0000000000 --- a/projects/angular/src/utils/drag-and-drop/if-dragged.spec.ts +++ /dev/null @@ -1,73 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component, Directive } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; - -import { ClrIfDragged } from './if-dragged'; -import { DragEventListenerService } from './providers/drag-event-listener.service'; -import { MOCK_DRAG_EVENT_LISTENER_PROVIDER } from './providers/drag-event-listener.service.mock'; - -export default function (): void { - describe('ClrIfDragged', function () { - describe('Without ClrDragEventListener', function () { - it('should throw an error with a message', function () { - TestBed.configureTestingModule({ declarations: [NoDragEventListener, ClrIfDragged] }); - - expect(function () { - this.fixture = TestBed.createComponent(NoDragEventListener); - }).toThrowError('The *clrIfDragged directive can only be used inside of a clrDraggable directive.'); - }); - }); - - describe('With ClrDragEventListener', function () { - beforeEach(function () { - TestBed.configureTestingModule({ - declarations: [IfDraggedTest, ClrIfDragged, MockVCRProvider], - providers: [MOCK_DRAG_EVENT_LISTENER_PROVIDER], - }); - - this.fixture = TestBed.createComponent(IfDraggedTest); - this.fixture.detectChanges(); - - this.dragEventListener = TestBed.get(DragEventListenerService); - this.testElement = this.fixture.nativeElement; - }); - - afterEach(function () { - this.fixture.destroy(); - }); - - it('should not display anything on normal state', function () { - expect(this.testElement.textContent.trim()).toBe(''); - }); - - it('should instantiate its template only during dragging', function () { - // on dragstart event - this.dragEventListener.dragStarted.next(); - expect(this.testElement.textContent.trim()).toBe('Test'); - - // on dragend event - this.dragEventListener.dragEnded.next(); - expect(this.testElement.textContent.trim()).toBe(''); - }); - }); - }); -} - -@Directive({ - selector: '[mockVCRProvider]', -}) -class MockVCRProvider {} -@Component({ - template: `
Test
`, -}) -class IfDraggedTest {} - -@Component({ - template: `
Test
`, -}) -class NoDragEventListener {} diff --git a/projects/angular/src/utils/drag-and-drop/if-dragged.ts b/projects/angular/src/utils/drag-and-drop/if-dragged.ts deleted file mode 100644 index 89b9ade3c2..0000000000 --- a/projects/angular/src/utils/drag-and-drop/if-dragged.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Directive, OnDestroy, Optional, SkipSelf, TemplateRef, ViewContainerRef } from '@angular/core'; -import { Subscription } from 'rxjs'; - -import { DragEventListenerService } from './providers/drag-event-listener.service'; - -// This structural directive will be used mainly together with `clr-draggable-ghost` directive inside of clrDraggable -// directive. The directive is responsible for instantiating `clr-draggable-ghost` directive only during dragging so -// that Angular Change Detection is prevented from running if a component or directive is placed inside of the -// `clr-draggable-ghost` directive. - -@Directive({ - selector: '[clrIfDragged]', -}) -export class ClrIfDragged implements OnDestroy { - private subscriptions: Subscription[] = []; - constructor( - private template: TemplateRef, - @Optional() - @SkipSelf() - private container: ViewContainerRef, - @Optional() private dragEventListener: DragEventListenerService - ) { - if (!this.dragEventListener || !this.container) { - throw new Error('The *clrIfDragged directive can only be used inside of a clrDraggable directive.'); - } - - this.subscriptions.push( - this.dragEventListener.dragStarted.subscribe(() => { - this.container.createEmbeddedView(this.template); - }) - ); - this.subscriptions.push( - this.dragEventListener.dragEnded.subscribe(() => { - this.container.clear(); - }) - ); - } - - ngOnDestroy() { - this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe()); - } -} diff --git a/projects/angular/src/utils/drag-and-drop/index.ts b/projects/angular/src/utils/drag-and-drop/index.ts deleted file mode 100644 index a5f3884e8a..0000000000 --- a/projects/angular/src/utils/drag-and-drop/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -export * from './draggable/draggable'; -export * from './droppable/droppable'; -export * from './if-dragged'; -export * from './drag-handle'; -export * from './draggable-ghost'; -export * from './drag-event'; -export * from './interfaces/drop-tolerance.interface'; -export * from './drag-and-drop.module'; diff --git a/projects/angular/src/utils/drag-and-drop/interfaces/drag-event.interface.ts b/projects/angular/src/utils/drag-and-drop/interfaces/drag-event.interface.ts deleted file mode 100644 index 7dfa57ba75..0000000000 --- a/projects/angular/src/utils/drag-and-drop/interfaces/drag-event.interface.ts +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -export enum DragEventType { - DRAG_START, - DRAG_MOVE, - DRAG_END, - DRAG_ENTER, - DRAG_LEAVE, - DROP, -} - -export interface DragPointPosition { - pageX: number; - pageY: number; - moveX?: number; - moveY?: number; -} - -export interface DragEventInterface { - type: DragEventType; - group?: string | string[]; - ghostElement?: any; - dragPosition: DragPointPosition; - dragDataTransfer?: T; - // For default ghosts, this dropPointPosition denotes the center point of the ghost element. - // This center point is used to determine whether the ghost is over droppable elements or not. - dropPointPosition?: DragPointPosition; -} diff --git a/projects/angular/src/utils/drag-and-drop/interfaces/drop-tolerance.interface.ts b/projects/angular/src/utils/drag-and-drop/interfaces/drop-tolerance.interface.ts deleted file mode 100644 index 49b7513be3..0000000000 --- a/projects/angular/src/utils/drag-and-drop/interfaces/drop-tolerance.interface.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -export interface ClrDropToleranceInterface { - top?: number; - right?: number; - bottom?: number; - left?: number; -} diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.mock.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.mock.ts deleted file mode 100644 index 1f30c08b84..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.mock.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Subject } from 'rxjs'; - -import { DragEventType } from '../interfaces/drag-event.interface'; -import { DragAndDropEventBusService } from './drag-and-drop-event-bus.service'; - -export class MockDragAndDropEventBus { - dragStarted: Subject = new Subject(); - dragMoved: Subject = new Subject(); - dragEnded: Subject = new Subject(); - dropped: Subject = new Subject(); - - broadcast(event: any): void { - switch (event.type) { - case DragEventType.DRAG_START: - this.dragStarted.next(event); - break; - case DragEventType.DRAG_MOVE: - this.dragMoved.next(event); - break; - case DragEventType.DRAG_END: - this.dragEnded.next(event); - break; - case DragEventType.DROP: - this.dropped.next(event); - break; - default: - break; - } - } -} - -export const MOCK_DRAG_DROP_EVENT_BUS = { - provide: DragAndDropEventBusService, - useClass: MockDragAndDropEventBus, -}; diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.spec.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.spec.ts deleted file mode 100644 index f84be71c6e..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.spec.ts +++ /dev/null @@ -1,80 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Observable } from 'rxjs'; - -import { generateDragPosition } from '../helpers.spec'; -import { DragEventInterface, DragEventType } from '../interfaces/drag-event.interface'; -import { DragAndDropEventBusService } from './drag-and-drop-event-bus.service'; - -type DragTransfer = { - data: any; -}; - -export default function (): void { - describe('Drag And Drop Event Bus Provider', function () { - const dndEventBus = new DragAndDropEventBusService(); - const dragEventMockObj = ( - dragEventType: DragEventType, - dragDataTransfer?: DragTransfer - ): DragEventInterface => { - return { - type: dragEventType, - dragPosition: generateDragPosition([5, 10], [11, 22]), - dragDataTransfer: dragDataTransfer, - }; - }; - let isEmitted: boolean; - - beforeEach(function () { - isEmitted = false; - }); - - it('should broadcast from correct Observable on drag start event type', function () { - (dndEventBus.dragStarted as Observable>).subscribe( - (event: DragEventInterface) => { - isEmitted = true; - expect(event.type).toBe(DragEventType.DRAG_START); - } - ); - dndEventBus.broadcast(dragEventMockObj(DragEventType.DRAG_START)); - expect(isEmitted).toBeTruthy(); - }); - - it('should broadcast from correct Observable on drag move event type', function () { - (dndEventBus.dragMoved as Observable>).subscribe( - (event: DragEventInterface) => { - isEmitted = true; - expect(event.type).toBe(DragEventType.DRAG_MOVE); - } - ); - dndEventBus.broadcast(dragEventMockObj(DragEventType.DRAG_MOVE)); - expect(isEmitted).toBeTruthy(); - }); - - it('should broadcast from correct Observable on drag end event type', function () { - (dndEventBus.dragEnded as Observable>).subscribe( - (event: DragEventInterface) => { - isEmitted = true; - expect(event.type).toBe(DragEventType.DRAG_END); - } - ); - dndEventBus.broadcast(dragEventMockObj(DragEventType.DRAG_END)); - expect(isEmitted).toBeTruthy(); - }); - - it('should broadcast from correct Observable on drop event type', function () { - (dndEventBus.dropped as Observable>).subscribe( - (event: DragEventInterface) => { - isEmitted = true; - expect(event.type).toBe(DragEventType.DROP); - } - ); - dndEventBus.broadcast(dragEventMockObj(DragEventType.DROP)); - expect(isEmitted).toBeTruthy(); - }); - }); -} diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.ts deleted file mode 100644 index ac1570c658..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-and-drop-event-bus.service.ts +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Injectable } from '@angular/core'; -import { Observable, Subject } from 'rxjs'; - -import { DragEventInterface, DragEventType } from '../interfaces/drag-event.interface'; - -@Injectable({ providedIn: 'root' }) -export class DragAndDropEventBusService { - private dragStart: Subject> = new Subject>(); - private dragMove: Subject> = new Subject>(); - private dragEnd: Subject> = new Subject>(); - private drop: Subject> = new Subject>(); - - get dragStarted(): Observable> { - return this.dragStart.asObservable(); - } - - get dragMoved(): Observable> { - return this.dragMove.asObservable(); - } - - get dragEnded(): Observable> { - return this.dragEnd.asObservable(); - } - - get dropped(): Observable> { - return this.drop.asObservable(); - } - - broadcast(event: DragEventInterface): void { - switch (event.type) { - case DragEventType.DRAG_START: - this.dragStart.next(event); - break; - case DragEventType.DRAG_MOVE: - this.dragMove.next(event); - break; - case DragEventType.DRAG_END: - this.dragEnd.next(event); - break; - case DragEventType.DROP: - this.drop.next(event); - break; - default: - break; - } - } -} diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.mock.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.mock.ts deleted file mode 100644 index 7f4eafb001..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.mock.ts +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; - -import { DragPointPosition } from '../interfaces/drag-event.interface'; -import { DragEventListenerService } from './drag-event-listener.service'; - -// This mock service is necessary because the real service uses Renderer2 and attaches complex event listeners. -// This class mocks that as setting ".hasListener" to true -// when attachDragListener() is called and removes it when detachDragListener() is called. -@Injectable() -export class MockDragEventListener { - private listeners: (() => void)[]; - draggableEl: any; - dragStarted: Subject = new Subject(); - dragMoved: Subject = new Subject(); - dragEnded: Subject = new Subject(); - dragStartPosition: DragPointPosition; - - attachDragListeners(draggableEl: any) { - this.draggableEl = draggableEl; - this.draggableEl.hasListener = true; - this.draggableEl.setAttribute('hasListener', 'true'); - this.listeners = [ - () => { - this.draggableEl.removeAttribute('hasListener'); - }, - ]; - } - - detachDragListeners() { - if (this.listeners) { - this.listeners.map(event => event()); - } - } -} - -export const MOCK_DRAG_EVENT_LISTENER_PROVIDER = { - provide: DragEventListenerService, - useClass: MockDragEventListener, -}; diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.spec.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.spec.ts deleted file mode 100644 index 7826d32fe8..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.spec.ts +++ /dev/null @@ -1,361 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { Subscription } from 'rxjs'; - -import { emulateDragEvent, generateDragPosition } from '../helpers.spec'; -import { DragEventInterface, DragPointPosition } from '../interfaces/drag-event.interface'; -import { DragAndDropEventBusService } from './drag-and-drop-event-bus.service'; -import { DragEventListenerService } from './drag-event-listener.service'; - -type DragTransfer = { - data: any; -}; - -const expectEventPropValues = (event: DragEventInterface) => { - return { - toBe: (_element: Node, dragPosition: DragPointPosition, dragTransfer?: T, group?: string | string[]) => { - expect(event.dragPosition).toEqual(dragPosition); - - if (group) { - expect(event.group).toEqual(group); - } else { - expect(event.group).toBeUndefined(); - } - - if (dragTransfer) { - expect(event.dragDataTransfer).toEqual(dragTransfer); - } else { - expect(event.dragDataTransfer).toBeUndefined(); - } - }, - }; -}; - -export default function (): void { - describe('Drag Event Listener', function () { - let dragEventListenerService: DragEventListenerService; - - let fixture: ComponentFixture; - let testComponent: TestComponent; - - let draggableButton: any; - - // the position for the mousedown/touchstart event - const startPosition: [number, number] = [5, 10]; - - // the first move event that creates a dragstart event - const firstMovePosition: [number, number] = [6, 11]; - - // the position when the mouseup/touchend event gets registered - // right after the mousedown/touchstart event with no prior registered mousemove/touchmove events - const prematureEndPosition: [number, number] = startPosition; - - // the position for the mousemove/touchmove event after the dragstart event gets registered - const movePosition: [number, number] = [44, 55]; - - // the positions for the consecutive mousemove/touchmove events that consequently create dragmove events - let movePositions: [number, number][]; - - // the position for the mouseup/touchend event that creates dragend event - const endPosition: [number, number] = [22, 33]; - - beforeEach(function () { - movePositions = [ - [11, 22], - [33, 44], - [55, 66], - [77, 88], - [99, 0], - ]; - - TestBed.configureTestingModule({ declarations: [TestComponent], providers: [DragAndDropEventBusService] }); - - fixture = TestBed.createComponent(TestComponent); - testComponent = fixture.componentInstance; - fixture.detectChanges(); - - dragEventListenerService = fixture.debugElement.injector.get(DragEventListenerService); - - draggableButton = testComponent.draggableButtonRef.nativeElement; - fixture.detectChanges(); - }); - - afterEach(() => { - fixture.destroy(); - draggableButton = null; - }); - - function testCases(startEvent: string, moveEvent: string, endEvent: string) { - it(`should broadcast dragstart on ${startEvent}`, fakeAsync(function () { - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - - expect(testComponent.dragStartFired).toBeTruthy(); - expectEventPropValues(testComponent.dragEvent).toBe(draggableButton, generateDragPosition(startPosition), null); - - expect(testComponent.dragMoveFired).toBeFalsy(); - expect(testComponent.dragEndFired).toBeFalsy(); - })); - - it(`should broadcast consecutive dragmove events on ${moveEvent} after dragstart`, fakeAsync(function () { - const nbDragMoveFired = movePositions.length; - // dragstart - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - - expect(testComponent.dragStartFired).toBeTruthy(); - - // consecutive dragmove events - while (movePositions.length > 0) { - const testPosition: [number, number] = movePositions.pop(); - emulateDragEvent(moveEvent, ...testPosition); - expectEventPropValues(testComponent.dragEvent).toBe( - draggableButton, - generateDragPosition(startPosition, testPosition), - null - ); - } - - expect(testComponent.nbDragMoveFired).toBe(nbDragMoveFired); - expect(testComponent.dragEndFired).toBeFalsy(); - })); - - it(`shouldn't broadcast any dragmove events on ${moveEvent} after ${startEvent} and ${endEvent}`, function () { - // mousedown+mouseup means it just ended prematurely before firing dragstart - emulateDragEvent(startEvent, ...startPosition, draggableButton); - emulateDragEvent(endEvent, ...firstMovePosition); - - emulateDragEvent(moveEvent, ...startPosition); - - expect(testComponent.dragStartFired).toBeFalsy(); - expect(testComponent.dragMoveFired).toBeFalsy(); - expect(testComponent.dragEndFired).toBeFalsy(); - }); - - it(`can broadcast proper drag events after ${startEvent} and ${endEvent}`, fakeAsync(function () { - const nbDragMoveFired = movePositions.length; - - // mousedown+mouseup means it just ended prematurely - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - emulateDragEvent(endEvent, ...prematureEndPosition); - - // mousedown+mousemove should fire dragstart - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - - expect(testComponent.nbDragMoveFired).toBe(0); - - expect(testComponent.dragStartFired).toBeTruthy(); - - while (movePositions.length > 0) { - const testPosition: [number, number] = movePositions.pop(); - emulateDragEvent(moveEvent, testPosition[0], testPosition[1]); - expectEventPropValues(testComponent.dragEvent).toBe( - draggableButton, - generateDragPosition(startPosition, testPosition), - null - ); - } - expect(testComponent.nbDragMoveFired).toBe(nbDragMoveFired); - - emulateDragEvent(endEvent, ...endPosition); - expect(testComponent.dragEndFired).toBeTruthy(); - })); - - it( - 'can broadcast dragend event on ' + endEvent + ' after dragstart registered', - fakeAsync(function () { - // dragstart - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - - // dragend - emulateDragEvent(endEvent, ...endPosition); - - expect(testComponent.dragStartFired).toBeTruthy(); - expect(testComponent.dragMoveFired).toBeFalsy(); - expect(testComponent.dragEndFired).toBeTruthy(); - }) - ); - - it( - 'can broadcast dragend event on ' + endEvent + ' after dragstart and dragmove registered', - fakeAsync(function () { - // dragstart - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - - // dragmove - emulateDragEvent(moveEvent, ...movePosition); - - // dragend - emulateDragEvent(endEvent, ...endPosition); - - expect(testComponent.dragStartFired).toBeTruthy(); - expect(testComponent.dragMoveFired).toBeTruthy(); - expect(testComponent.dragEndFired).toBeTruthy(); - }) - ); - - it('can transfer data on each drag events', fakeAsync(function () { - const dataOnDragStart = { data: { test: 'dataOnDragStart' } }; - const dataOnDragMove = { data: { test: 'dataOnDragMove' } }; - const dataOnDragEnd = { data: { test: 'dataOnDragEnd' } }; - - const groupOnDragStart = 'one'; - const groupOnDragMove = ['one', 'two']; - const groupOnDragEnd = ['one', 'two', 'three']; - - dragEventListenerService.dragDataTransfer = dataOnDragStart; - dragEventListenerService.group = groupOnDragStart; - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - - expectEventPropValues(testComponent.dragEvent).toBe( - draggableButton, - generateDragPosition(startPosition), - dataOnDragStart, - groupOnDragStart - ); - - dragEventListenerService.dragDataTransfer = dataOnDragMove; - dragEventListenerService.group = groupOnDragMove; - emulateDragEvent(moveEvent, ...movePosition); - - expectEventPropValues(testComponent.dragEvent).toBe( - draggableButton, - generateDragPosition(startPosition, movePosition), - dataOnDragMove, - groupOnDragMove - ); - - dragEventListenerService.dragDataTransfer = dataOnDragEnd; - dragEventListenerService.group = groupOnDragEnd; - emulateDragEvent(endEvent, ...endPosition); - expectEventPropValues(testComponent.dragEvent).toBe( - draggableButton, - generateDragPosition(startPosition, endPosition), - dataOnDragEnd, - groupOnDragEnd - ); - })); - - it('should dispatch to Event Bus on each drag events', fakeAsync(function () { - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - emulateDragEvent(moveEvent, ...movePosition); - emulateDragEvent(endEvent, ...endPosition); - - expect(testComponent.dragStartDispatched).toBeTruthy(); - expect(testComponent.dragMoveDispatched).toBeTruthy(); - expect(testComponent.dragEndDispatched).toBeTruthy(); - })); - - it('should detach native event handlers if detachDragListeners is called', fakeAsync(function () { - dragEventListenerService.detachDragListeners(); - - // dragstart shouldn't fire - emulateDragEvent(startEvent, ...startPosition, draggableButton); - tick(); - - // dragmove shouldn't fire - emulateDragEvent(moveEvent, ...movePosition); - - // dragend shouldn't fire - emulateDragEvent(endEvent, ...endPosition); - - expect(testComponent.dragStartFired).toBeFalsy(); - expect(testComponent.dragMoveFired).toBeFalsy(); - expect(testComponent.dragEndFired).toBeFalsy(); - })); - } - - describe('from mouse events', function () { - testCases('mousedown', 'mousemove', 'mouseup'); - }); - - describe('from touch events', function () { - testCases('touchstart', 'touchmove', 'touchend'); - }); - }); -} - -@Component({ - providers: [DragEventListenerService], - template: ``, -}) -class TestComponent implements OnInit, OnDestroy { - dragStartDispatched = false; - dragMoveDispatched = false; - dragEndDispatched = false; - - dragStartFired = false; - dragMoveFired = false; - dragEndFired = false; - - dragEvent: DragEventInterface; - - nbDragMoveFired = 0; - - constructor( - private dragEventListener: DragEventListenerService, - private eventBus: DragAndDropEventBusService - ) {} - - @ViewChild('draggableButton', { static: true }) - draggableButtonRef: ElementRef; - - private subscriptions: Subscription[] = []; - - ngOnInit() { - this.dragEventListener.attachDragListeners(this.draggableButtonRef.nativeElement); - - this.subscriptions.push( - this.dragEventListener.dragStarted.subscribe((event: DragEventInterface) => { - this.dragEvent = event; - this.dragStartFired = true; - }) - ); - this.subscriptions.push( - this.dragEventListener.dragMoved.subscribe((event: DragEventInterface) => { - this.dragEvent = event; - this.dragMoveFired = true; - this.nbDragMoveFired++; - }) - ); - this.subscriptions.push( - this.dragEventListener.dragEnded.subscribe((event: DragEventInterface) => { - this.dragEvent = event; - this.dragEndFired = true; - }) - ); - - this.subscriptions.push( - this.eventBus.dragStarted.subscribe(() => { - this.dragStartDispatched = true; - }) - ); - this.subscriptions.push( - this.eventBus.dragMoved.subscribe(() => { - this.dragMoveDispatched = true; - }) - ); - this.subscriptions.push( - this.eventBus.dragEnded.subscribe(() => { - this.dragEndDispatched = true; - }) - ); - } - - ngOnDestroy() { - this.dragEventListener.detachDragListeners(); - this.subscriptions.forEach((sub: Subscription) => sub.unsubscribe()); - } -} diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.ts deleted file mode 100644 index 46010baefd..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-event-listener.service.ts +++ /dev/null @@ -1,235 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Injectable, NgZone, Renderer2 } from '@angular/core'; -import { Observable, Subject } from 'rxjs'; - -import { DragEventInterface, DragEventType, DragPointPosition } from '../interfaces/drag-event.interface'; -import { DragAndDropEventBusService } from './drag-and-drop-event-bus.service'; - -@Injectable() -export class DragEventListenerService { - private draggableEl: any; - - // contains listeners for the starting events such as mousedown and touchstart - private listeners: (() => void)[] = []; - // contains listeners for nested events that happens after/inside the starting events - // such as selectstart, mousemove/touchmove, mouseup/touchend - private nestedListeners: (() => void)[]; - - // contains listener for mousemove/touchmove before delay - private checkDragStartBoundaryListener: () => void; - - private dragStart: Subject> = new Subject>(); - private dragMove: Subject> = new Subject>(); - private dragEnd: Subject> = new Subject>(); - - private hasDragStarted = false; - - private dragStartDelayTimeout: ReturnType; - - get dragStarted(): Observable> { - return this.dragStart.asObservable(); - } - - get dragMoved(): Observable> { - return this.dragMove.asObservable(); - } - - get dragEnded(): Observable> { - return this.dragEnd.asObservable(); - } - - get dragStartPosition(): DragPointPosition { - return this.initialPosition; - } - - constructor(private ngZone: NgZone, private renderer: Renderer2, private eventBus: DragAndDropEventBusService) {} - - private initialPosition: DragPointPosition; - - // Draggable component sets these properties: - dragDataTransfer?: T; - group?: string | string[]; - dragStartDelay = 0; - - // DraggableGhost component sets these properties: - ghostElement?: any; - dropPointPosition?: DragPointPosition; - - attachDragListeners(draggableEl: Node) { - this.draggableEl = draggableEl; - this.listeners.push(this.customDragEvent(this.draggableEl, 'mousedown', 'mousemove', 'mouseup')); - this.listeners.push(this.customDragEvent(this.draggableEl, 'touchstart', 'touchmove', 'touchend')); - } - - detachDragListeners() { - if (this.listeners) { - this.listeners.map(event => event()); - } - - // In most cases, once users start dragging with mousedown/touchstart events, - // they will end dragging at one point with mouseup/touchend. - // However, there might be a few cases where mousedown/touchstart events get registered, - // but the draggable element gets removed before user ends dragging. - // In that case, we need to remove the attached listeners that happened during the mousedown/touchstart events. - if (this.nestedListeners) { - this.nestedListeners.map(event => event()); - } - - if (this.checkDragStartBoundaryListener) { - this.checkDragStartBoundaryListener(); - } - } - - private getNativeEventObject(event: MouseEvent | TouchEvent): any { - if (Object.prototype.hasOwnProperty.call(event, 'changedTouches')) { - return (event as TouchEvent).changedTouches[0]; - } else { - return event; - } - } - - private customDragEvent(element: Node, startOnEvent: string, moveOnEvent: string, endOnEvent: string): () => void { - return this.renderer.listen(element, startOnEvent, (startEvent: MouseEvent | TouchEvent) => { - // save the initial point to initialPosition - // this will be used to calculate how far the draggable has been dragged from its initial position - this.initialPosition = { - pageX: this.getNativeEventObject(startEvent).pageX, - pageY: this.getNativeEventObject(startEvent).pageY, - }; - - // Initialize nested listeners' property with a new empty array; - this.nestedListeners = []; - - // Listen to selectstart/mousemove/touchmove events outside of angular zone. - this.ngZone.runOutsideAngular(() => { - // This is needed to disable selection during dragging (especially in EDGE/IE11). - this.nestedListeners.push( - this.renderer.listen('document', 'selectstart', (selectEvent: Event) => { - selectEvent.preventDefault(); - selectEvent.stopImmediatePropagation(); - }) - ); - - // During the drag start delay, pointer should stay within the boundary. - this.checkDragStartBoundary(moveOnEvent); - - this.dragStartDelayTimeout = setTimeout(() => { - if (this.checkDragStartBoundaryListener) { - this.checkDragStartBoundaryListener(); - } - - this.hasDragStarted = true; - // Fire "dragstart" - this.broadcast(startEvent, DragEventType.DRAG_START); - - this.nestedListeners.push( - this.renderer.listen('document', moveOnEvent, (moveEvent: MouseEvent | TouchEvent) => { - // Event.stopImmediatePropagation() is needed here to prevent nested draggables from getting dragged - // altogether. We shouldn't use Event.stopPropagation() here as we are listening to the events - // on the global element level. - - // With Event.stopImmediatePropagation(), it registers the events sent from the inner most draggable - // first. Then immediately after that, it stops listening to the same type of events on the same - // element. So this will help us to not register the same events that would come from the parent - // level draggables eventually. - - moveEvent.stopImmediatePropagation(); - - if (this.hasDragStarted) { - // Fire "dragmove" - this.broadcast(moveEvent, DragEventType.DRAG_MOVE); - } - }) - ); - }, this.dragStartDelay); - }); - - // Listen to mouseup/touchend events. - this.nestedListeners.push( - this.renderer.listen('document', endOnEvent, (endEvent: MouseEvent | TouchEvent) => { - if (this.hasDragStarted) { - // Fire "dragend" only if dragstart is registered - this.hasDragStarted = false; - this.broadcast(endEvent, DragEventType.DRAG_END); - } - - clearTimeout(this.dragStartDelayTimeout); - - // We must remove the the nested listeners every time drag completes. - this.nestedListeners.map(event => event()); - - // We must remove the event listener from checkDragStartBoundary - if (this.checkDragStartBoundaryListener) { - this.checkDragStartBoundaryListener(); - } - }) - ); - }); - } - - private checkDragStartBoundary(eventType: string): void { - this.checkDragStartBoundaryListener = this.renderer.listen( - 'document', - eventType, - (moveEvent: MouseEvent | TouchEvent) => { - const deltaX = Math.abs(this.getNativeEventObject(moveEvent).pageX - this.initialPosition.pageX); - const deltaY = Math.abs(this.getNativeEventObject(moveEvent).pageY - this.initialPosition.pageY); - - // If pointer move delta exceeds horizontal or vertical threshold, - // we should cancel drag initiation. - if (deltaX > 1 || deltaY > 1) { - clearTimeout(this.dragStartDelayTimeout); - if (this.checkDragStartBoundaryListener) { - this.checkDragStartBoundaryListener(); - } - } - } - ); - } - - private broadcast(event: MouseEvent | TouchEvent, eventType: DragEventType): void { - const dragEvent: DragEventInterface = this.generateDragEvent(event, eventType); - - switch (dragEvent.type) { - case DragEventType.DRAG_START: - this.dragStart.next(dragEvent); - break; - case DragEventType.DRAG_MOVE: - this.dragMove.next(dragEvent); - break; - case DragEventType.DRAG_END: - this.dragEnd.next(dragEvent); - break; - default: - break; - } - - // The following properties are set after they are broadcasted to the DraggableGhost component. - dragEvent.ghostElement = this.ghostElement; - dragEvent.dropPointPosition = this.dropPointPosition; - - this.eventBus.broadcast(dragEvent); - } - - private generateDragEvent(event: MouseEvent | TouchEvent, eventType: DragEventType): DragEventInterface { - const nativeEvent: any = this.getNativeEventObject(event); - - return { - type: eventType, - dragPosition: { - pageX: nativeEvent.pageX, - pageY: nativeEvent.pageY, - moveX: nativeEvent.pageX - this.initialPosition.pageX, - moveY: nativeEvent.pageY - this.initialPosition.pageY, - }, - group: this.group, - dragDataTransfer: this.dragDataTransfer, - ghostElement: this.ghostElement, - }; - } -} diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.mock.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.mock.ts deleted file mode 100644 index dd338a4a69..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.mock.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { DragHandleRegistrarService } from './drag-handle-registrar.service'; - -export class MockDragHandleRegistrar { - private _customHandleEl: any; - - get customHandle() { - return this._customHandleEl; - } - - registerCustomHandle(handleElement: Node) { - this._customHandleEl = handleElement; - } - - unregisterCustomHandle() { - delete this._customHandleEl; - } -} - -export const MOCK_DRAG_HANDLE_REGISTRAR_PROVIDER = { - provide: DragHandleRegistrarService, - useClass: MockDragHandleRegistrar, -}; diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.spec.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.spec.ts deleted file mode 100644 index 92f6381297..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.spec.ts +++ /dev/null @@ -1,118 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DragAndDropEventBusService } from './drag-and-drop-event-bus.service'; -import { DragEventListenerService } from './drag-event-listener.service'; -import { MOCK_DRAG_EVENT_LISTENER_PROVIDER } from './drag-event-listener.service.mock'; -import { DragHandleRegistrarService } from './drag-handle-registrar.service'; - -export default function (): void { - describe('Drag Handle Registrar', function () { - let fixture: ComponentFixture; - - const draggableEl = document.createElement('div') as HTMLDivElement; - const customHandleEl = document.createElement('button') as HTMLButtonElement; - - // Providers - let dragHandleRegistrar: any; - let dragEventListener: any; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [DragHandleTestComponent], - providers: [DragAndDropEventBusService], - }); - fixture = TestBed.createComponent(DragHandleTestComponent); - dragHandleRegistrar = fixture.debugElement.injector.get(DragHandleRegistrarService); - dragEventListener = fixture.debugElement.injector.get(DragEventListenerService); - }); - - afterEach(() => { - fixture.destroy(); - }); - - it('registers element as default handle on assignment', function () { - dragHandleRegistrar.defaultHandleEl = draggableEl; - expect(dragEventListener.draggableEl).toBe(draggableEl); - expect(draggableEl.getAttribute('hasListener')).toBeTruthy(); - expect(draggableEl.classList.contains('drag-handle')).toBeTruthy(); - }); - - it('registers custom element as handle', function () { - dragHandleRegistrar.registerCustomHandle(customHandleEl); - - expect(dragHandleRegistrar.customHandleEl).toBe(customHandleEl); - expect(dragEventListener.draggableEl).toBe(customHandleEl); - - expect(customHandleEl.getAttribute('hasListener')).toBeTruthy(); - expect(customHandleEl.classList.contains('drag-handle')).toBeTruthy(); - }); - - it('registers custom element as drag handle after default handle is set', function () { - dragHandleRegistrar.defaultHandleEl = draggableEl; - dragHandleRegistrar.registerCustomHandle(customHandleEl); - // Once custom handle gets registered, listeners and drag styles should be removed from default element. - expect(draggableEl.getAttribute('hasListener')).toBeFalsy(); - expect(draggableEl.classList.contains('drag-handle')).toBeFalsy(); - - expect(dragHandleRegistrar.customHandleEl).toBe(customHandleEl); - expect(dragEventListener.draggableEl).toBe(customHandleEl); - - expect(customHandleEl.getAttribute('hasListener')).toBeTruthy(); - expect(customHandleEl.classList.contains('drag-handle')).toBeTruthy(); - }); - - it('unregisters custom handle', function () { - dragHandleRegistrar.registerCustomHandle(customHandleEl); - expect(dragHandleRegistrar.customHandleEl).toBe(customHandleEl); - expect(customHandleEl.getAttribute('hasListener')).toBeTruthy(); - expect(customHandleEl.classList.contains('drag-handle')).toBeTruthy(); - dragHandleRegistrar.unregisterCustomHandle(); - - expect(dragHandleRegistrar.customHandleEl).toBeUndefined(); - expect(customHandleEl.getAttribute('hasListener')).toBeFalsy(); - expect(customHandleEl.classList.contains('drag-handle')).toBeFalsy(); - }); - - it('unregisters custom handle and fall back to default handle if default handle is set before custom handle', function () { - dragHandleRegistrar.defaultHandleEl = draggableEl; - dragHandleRegistrar.registerCustomHandle(customHandleEl); - dragHandleRegistrar.unregisterCustomHandle(); - expect(dragHandleRegistrar.customHandleEl).toBeUndefined(); - expect(dragEventListener.draggableEl).toBe(draggableEl); - expect(draggableEl.getAttribute('hasListener')).toBeTruthy(); - expect(draggableEl.classList.contains('drag-handle')).toBeTruthy(); - }); - - it('keeps custom element as drag handle even after default handle is set', function () { - dragHandleRegistrar.registerCustomHandle(customHandleEl); - dragHandleRegistrar.defaultHandleEl = draggableEl; - - expect(dragHandleRegistrar.customHandleEl).toBe(customHandleEl); - expect(customHandleEl.getAttribute('hasListener')).toBeTruthy(); - expect(customHandleEl.classList.contains('drag-handle')).toBeTruthy(); - }); - - it('unregisters custom handle and fall back to default handle if default handle is set after custom handle', function () { - dragHandleRegistrar.registerCustomHandle(customHandleEl); - dragHandleRegistrar.defaultHandleEl = draggableEl; - dragHandleRegistrar.unregisterCustomHandle(); - expect(dragHandleRegistrar.customHandleEl).toBeUndefined(); - expect(dragEventListener.draggableEl).toBe(draggableEl); - expect(draggableEl.getAttribute('hasListener')).toBeTruthy(); - expect(draggableEl.classList.contains('drag-handle')).toBeTruthy(); - }); - }); -} - -@Component({ - providers: [MOCK_DRAG_EVENT_LISTENER_PROVIDER, DragHandleRegistrarService], - template: '
Test
', -}) -class DragHandleTestComponent {} diff --git a/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.ts b/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.ts deleted file mode 100644 index 14a65065aa..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/drag-handle-registrar.service.ts +++ /dev/null @@ -1,64 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Injectable, Renderer2 } from '@angular/core'; - -import { DragEventListenerService } from './drag-event-listener.service'; - -// This provider registers the drag handle element. -// When it registers a element as a drag handle, it attaches that element to the listeners from ClrDragEventListener. -// Also, it adds the "drag-handle" css class to the registered element through Renderer. -@Injectable() -export class DragHandleRegistrarService { - private _customHandleEl: any; - private _defaultHandleEl: any; - - get defaultHandleEl() { - return this._defaultHandleEl; - } - - set defaultHandleEl(el: Node) { - this._defaultHandleEl = el; // defaultHandleEl will be usually the clrDraggable element. - - // If the customHandleEl has been registered, - // don't make the defaultHandleEl the drag handle yet until the customHandleEl is unregistered. - if (!this._customHandleEl) { - this.makeElementHandle(this._defaultHandleEl); - } - } - - constructor(private dragEventListener: DragEventListenerService, private renderer: Renderer2) {} - - private makeElementHandle(el: Node) { - if (this._defaultHandleEl && this._defaultHandleEl !== el) { - // Before making an element the custom handle element, - // we should remove the existing drag-handle class from the draggable element. - this.renderer.removeClass(this._defaultHandleEl, 'drag-handle'); - } - this.dragEventListener.attachDragListeners(el); - this.renderer.addClass(el, 'drag-handle'); - } - - get customHandleEl() { - return this._customHandleEl; - } - - registerCustomHandle(el: Node) { - this.dragEventListener.detachDragListeners(); // removes the existing listeners - this._customHandleEl = el; - this.makeElementHandle(this._customHandleEl); - } - - unregisterCustomHandle() { - this.dragEventListener.detachDragListeners(); // removes the existing listeners - this.renderer.removeClass(this._customHandleEl, 'drag-handle'); - delete this._customHandleEl; - // if default handle is set, make that handle - if (this._defaultHandleEl) { - this.makeElementHandle(this._defaultHandleEl); - } - } -} diff --git a/projects/angular/src/utils/drag-and-drop/providers/draggable-snapshot.service.spec.ts b/projects/angular/src/utils/drag-and-drop/providers/draggable-snapshot.service.spec.ts deleted file mode 100644 index 206ba53c7b..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/draggable-snapshot.service.spec.ts +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { DomAdapter } from '../../dom-adapter/dom-adapter'; -import { DragEventType } from '../interfaces/drag-event.interface'; -import { DraggableSnapshotService } from './draggable-snapshot.service'; - -export default function (): void { - describe('Draggable Snapshot', function () { - const mockDraggable = document.createElement('div'); - const mockDragMoveEvent = { - dragPosition: { pageX: 11, pageY: 22 }, - draggableElement: mockDraggable, - type: DragEventType.DRAG_START, - }; - document.body.appendChild(mockDraggable); - - mockDraggable.style.position = 'absolute'; - mockDraggable.style.width = '100px'; - mockDraggable.style.height = '50px'; - mockDraggable.style.left = '90px'; - mockDraggable.style.top = '45px'; - - const domAdapter = new DomAdapter(); - let draggableSnapshot; - - beforeEach(function () { - draggableSnapshot = new DraggableSnapshotService(domAdapter); - }); - - it('registers element and sets clientRect and computedStyle', function () { - expect(draggableSnapshot.clientRect).toBeUndefined(); - expect(draggableSnapshot.dragEvent).toBeUndefined(); - expect(draggableSnapshot.hasDraggableState).toBeFalsy(); - - draggableSnapshot.capture(mockDraggable, mockDragMoveEvent); - expect(draggableSnapshot.hasDraggableState).toBeTruthy(); - expect(draggableSnapshot.clientRect).toEqual(domAdapter.clientRect(mockDraggable)); - expect(draggableSnapshot.dragEvent).toEqual(mockDragMoveEvent); - }); - - it('unregisters element and deletes clientRect and computedStyle', function () { - draggableSnapshot.capture(mockDraggable, mockDragMoveEvent); - draggableSnapshot.discard(); - expect(draggableSnapshot.hasDraggableState).toBeFalsy(); - expect(draggableSnapshot.clientRect).toBeUndefined(); - expect(draggableSnapshot.dragEvent).toBeUndefined(); - }); - }); -} diff --git a/projects/angular/src/utils/drag-and-drop/providers/draggable-snapshot.service.ts b/projects/angular/src/utils/drag-and-drop/providers/draggable-snapshot.service.ts deleted file mode 100644 index 2107fe5c00..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/draggable-snapshot.service.ts +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Injectable } from '@angular/core'; - -import { DomAdapter } from '../../dom-adapter/dom-adapter'; -import { DragEventInterface } from '../interfaces/drag-event.interface'; - -// This service is used to capture the state of clrDraggable element -// at a certain event and passes it to clrDraggableGhost component. -@Injectable() -export class DraggableSnapshotService { - constructor(private domAdapter: DomAdapter) {} - - private draggableElClientRect: ClientRect; - private snapshotDragEvent: DragEventInterface; - - capture(el: Node, event: DragEventInterface): void { - this.draggableElClientRect = this.domAdapter.clientRect(el); - this.snapshotDragEvent = event; - } - discard(): void { - delete this.draggableElClientRect; - delete this.snapshotDragEvent; - } - get hasDraggableState(): boolean { - return !!this.snapshotDragEvent && !!this.draggableElClientRect; - } - get clientRect(): ClientRect { - return this.draggableElClientRect; - } - get dragEvent(): DragEventInterface { - return this.snapshotDragEvent; - } -} diff --git a/projects/angular/src/utils/drag-and-drop/providers/global-drag-mode.service.spec.ts b/projects/angular/src/utils/drag-and-drop/providers/global-drag-mode.service.spec.ts deleted file mode 100644 index 3e0f51ad42..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/global-drag-mode.service.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; - -import { GlobalDragModeService } from './global-drag-mode.service'; - -export default function (): void { - describe('Global Drag Mode Service', function () { - beforeEach(function () { - TestBed.configureTestingModule({ declarations: [TestComponent] }); - - this.fixture = TestBed.createComponent(TestComponent); - this.fixture.detectChanges(); - this.globalDragMode = this.fixture.debugElement.injector.get(GlobalDragModeService); - }); - - it('should give in-drag class to document when enter method is called', function () { - this.globalDragMode.enter(); - this.fixture.detectChanges(); - expect(document.body.classList.contains('in-drag')).toBeTruthy(); - }); - - it('should remove in-drag class from document when exit method is called', function () { - this.globalDragMode.exit(); - this.fixture.detectChanges(); - expect(document.body.classList.contains('in-drag')).toBeFalsy(); - }); - }); -} - -@Component({ - providers: [GlobalDragModeService], - template: `
test
`, -}) -class TestComponent {} diff --git a/projects/angular/src/utils/drag-and-drop/providers/global-drag-mode.service.ts b/projects/angular/src/utils/drag-and-drop/providers/global-drag-mode.service.ts deleted file mode 100644 index d8bee0001c..0000000000 --- a/projects/angular/src/utils/drag-and-drop/providers/global-drag-mode.service.ts +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Injectable, Renderer2 } from '@angular/core'; - -// This service class adds and removes the "in-drag" class to the document body element -// through its public enter() and exit() methods. -@Injectable() -export class GlobalDragModeService { - constructor(private renderer: Renderer2) {} - - enter(): void { - this.renderer.addClass(document.body, 'in-drag'); - } - - exit(): void { - this.renderer.removeClass(document.body, 'in-drag'); - } -} diff --git a/projects/angular/src/utils/index.ts b/projects/angular/src/utils/index.ts index aa702df0ff..2b6ec077d8 100644 --- a/projects/angular/src/utils/index.ts +++ b/projects/angular/src/utils/index.ts @@ -8,7 +8,6 @@ export * from './animations/index'; export * from './loading/index'; export * from './conditional/index'; export * from './i18n/index'; -export * from './drag-and-drop/index'; export * from './popover/index'; export * from './focus/focus-on-view-init/index'; export * from './focus-trap/index'; diff --git a/projects/angular/src/utils/variables/_properties.color.scss b/projects/angular/src/utils/variables/_properties.color.scss index 8604affe49..3250f5ace9 100644 --- a/projects/angular/src/utils/variables/_properties.color.scss +++ b/projects/angular/src/utils/variables/_properties.color.scss @@ -69,7 +69,7 @@ --clr-color-on-action-900: #{$clr-color-on-action-900}; --clr-color-on-action-1000: #{$clr-color-on-action-1000}; - // Secondary Action palette -- actions but off-the-beaten-path actions, like drag-and-drop + // Secondary Action palette -- actions but off-the-beaten-path actions --clr-color-secondary-action-50: #{$clr-color-secondary-action-50}; --clr-color-secondary-action-100: #{$clr-color-secondary-action-100}; diff --git a/projects/angular/src/utils/variables/_variables.color.scss b/projects/angular/src/utils/variables/_variables.color.scss index 444331c7e0..b1357678dd 100644 --- a/projects/angular/src/utils/variables/_variables.color.scss +++ b/projects/angular/src/utils/variables/_variables.color.scss @@ -63,7 +63,7 @@ $clr-color-on-action-800: $clr-color-neutral-0 !default; $clr-color-on-action-900: $clr-color-neutral-0 !default; $clr-color-on-action-1000: $clr-color-neutral-0 !default; -// Secondary Action palette -- actions but off-the-beaten-path actions, like drag-and-drop +// Secondary Action palette -- actions but off-the-beaten-path actions // 282 is the correct temperature $clr-secondary-action-hue: 282; diff --git a/projects/angular/src/utils/variables/_variables.global.scss b/projects/angular/src/utils/variables/_variables.global.scss index 3a5a5d3ec5..5e56abd4ac 100644 --- a/projects/angular/src/utils/variables/_variables.global.scss +++ b/projects/angular/src/utils/variables/_variables.global.scss @@ -260,7 +260,6 @@ $clr-close-color--hover-opacity: 0.5 !default; $clr-popover-box-shadow-color: rgba(140, 140, 140, 0.25) !default; // All z-indexes should come from here, to have a centralized file to reorganize them if needed -// draggable-ghost is maximum possible value for z-index across all browsers $clr-layers: ( content: 0, select-box: 2, @@ -278,5 +277,4 @@ $clr-layers: ( column-switch: 1050, tooltips: 1050, smart-popover: 1050, - draggable-ghost: 2147483647, ) !default; diff --git a/projects/demo/src/app/app.routing.ts b/projects/demo/src/app/app.routing.ts index 2e4da57b05..f24fc2ef30 100644 --- a/projects/demo/src/app/app.routing.ts +++ b/projects/demo/src/app/app.routing.ts @@ -44,10 +44,6 @@ export const APP_ROUTES: Routes = [ path: 'datalist', loadChildren: () => import('./datalist/datalist.demo.module').then(m => m.DatalistDemoModule), }, - { - path: 'drag-and-drop', - loadChildren: () => import('./drag-and-drop/drag-and-drop.demo.module').then(m => m.DragAndDropDemoModule), - }, { path: 'datepicker', loadChildren: () => import('./datepicker/datepicker.demo.module').then(m => m.DatepickerDemoModule), diff --git a/projects/demo/src/app/drag-and-drop/basic-draggable.demo.html b/projects/demo/src/app/drag-and-drop/basic-draggable.demo.html deleted file mode 100644 index 51086ef902..0000000000 --- a/projects/demo/src/app/drag-and-drop/basic-draggable.demo.html +++ /dev/null @@ -1,97 +0,0 @@ - - -

Draggable button

- -
- -
- -

Delayed Drag Start

- -

Hold your pointer down for at least 500ms to trigger drag start

- -
- -
- -

Draggable cards

- -
-
-
-
-
-

Draggable Card 1

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eum distinctio fuga sapiente enim tenetur et - saepe veniam eligendi! Doloribus ipsa vel eveniet rerum incidunt voluptates dolor? Non, porro modi! -

-
-
- Action 1 -
-
-
-
-
-
-

Draggable Card 2

-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aspernatur incidunt maxime doloribus, - temporibus tempore iure reiciendis, facilis nihil atque corrupti neque! Doloribus, quod praesentium ratione - accusamus sapiente omnis neque! -

-
-
- Action 2 -
-
-
-
-
- -
-

Nested draggables

- -
-
-
-
-
-

Draggable Card

-

- -

-
-
- Action 1 -
-
-
-
-
-
- -

Datagrid with draggable rows

- -
- - User ID - Name - Creation date - Favorite color - - - {{user.id}} - {{user.name}} - {{user.creation | date}} - {{user.color}} - - - {{users.length}} users - -
diff --git a/projects/demo/src/app/drag-and-drop/basic-draggable.demo.ts b/projects/demo/src/app/drag-and-drop/basic-draggable.demo.ts deleted file mode 100644 index 4e2164afce..0000000000 --- a/projects/demo/src/app/drag-and-drop/basic-draggable.demo.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; - -import { Inventory } from '../datagrid/inventory/inventory'; -import { User } from '../datagrid/inventory/user'; - -@Component({ - selector: 'basic-draggable-demo', - providers: [Inventory], - styleUrls: ['./drag-and-drop.demo.scss'], - templateUrl: './basic-draggable.demo.html', -}) -export class BasicDraggableDemo { - users: User[]; - - constructor(inventory: Inventory) { - inventory.size = 10; - inventory.reset(); - this.users = inventory.all; - } -} diff --git a/projects/demo/src/app/drag-and-drop/basic-droppable.demo.html b/projects/demo/src/app/drag-and-drop/basic-droppable.demo.html deleted file mode 100644 index e4294fc418..0000000000 --- a/projects/demo/src/app/drag-and-drop/basic-droppable.demo.html +++ /dev/null @@ -1,174 +0,0 @@ - - -

Basic Droppable

- -
- - - - - - - - - - - - - - - -
- -
-
-
- - - - - - - - - - - - - - -
Files:
Nothing to drag here...
{{file.name}}
-
-
- - - - - - - - - - - - - - -
Drop here to upload:
Nothing to upload here...
{{file.name}}
-
-
-
- -
- - - Dragging a file will show an image icon as a custom ghost. - - -
-
- - - - - - - - - - - - - - -
Files:
Nothing to drag here...
- - {{file.name}} - - - - -
-
-
- - - - - - - - - - - - - - -
Drop here to upload:
Nothing to upload here...
- - {{file.name}} - - - - -
-
-
-
- -
- - - Drag each file by its icon. - - -
-
- - - - - - - - - - - - - - -
Files:
Nothing to drag here...
- - {{file.name}} - -
-
-
- - - - - - - - - - - - - - -
Drop here to upload:
Nothing to upload here...
- - {{file.name}} - -
-
-
-
diff --git a/projects/demo/src/app/drag-and-drop/basic-droppable.demo.ts b/projects/demo/src/app/drag-and-drop/basic-droppable.demo.ts deleted file mode 100644 index eec5364c15..0000000000 --- a/projects/demo/src/app/drag-and-drop/basic-droppable.demo.ts +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { ClrDragEvent } from '@clr/angular'; - -@Component({ - selector: 'basic-droppable-demo', - styleUrls: ['./drag-and-drop.demo.scss'], - templateUrl: './basic-droppable.demo.html', -}) -export class BasicDroppableDemo { - files: any[] = [{ name: 'img_001.jpg' }, { name: 'img_002.jpg' }, { name: 'img_003.jpg' }]; - activeDemoVariant = 'basic-draggable'; - droppedFiles: any[] = []; - - private moveItem(item: any, from: any[], to: any[]) { - const indexInFiles = from.indexOf(item); - if (indexInFiles > -1) { - from.splice(indexInFiles, 1); - } - if (to.indexOf(item) === -1) { - to.push(item); - } - } - - onDropToUpload(dragEvent: ClrDragEvent) { - console.log('dropped to upload'); - this.moveItem(dragEvent.dragDataTransfer, this.files, this.droppedFiles); - } - - onDropBack(dragEvent: ClrDragEvent) { - console.log('dropped back'); - this.moveItem(dragEvent.dragDataTransfer, this.droppedFiles, this.files); - } -} diff --git a/projects/demo/src/app/drag-and-drop/custom-ghost-and-handle.demo.html b/projects/demo/src/app/drag-and-drop/custom-ghost-and-handle.demo.html deleted file mode 100644 index ca5a45291e..0000000000 --- a/projects/demo/src/app/drag-and-drop/custom-ghost-and-handle.demo.html +++ /dev/null @@ -1,59 +0,0 @@ - - -

Draggable cards with a custom ghost and handle

- -
-
-
-
- - - -
-

Custom ghost and handle card

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eum distinctio fuga sapiente enim tenetur et - saepe veniam eligendi! Doloribus ipsa vel eveniet rerum incidunt voluptates dolor? Non, porro modi! -

-
-
- Drag Handle -
-
-
-
-
- - - -
-

Custom ghost and handle card

-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aspernatur incidunt maxime doloribus, - temporibus tempore iure reiciendis, facilis nihil atque corrupti neque! Doloribus, quod praesentium ratione - accusamus sapiente omnis neque! -

-
-
- Drag Handle -
-
-
-
-
diff --git a/projects/demo/src/app/drag-and-drop/custom-ghost-and-handle.demo.ts b/projects/demo/src/app/drag-and-drop/custom-ghost-and-handle.demo.ts deleted file mode 100644 index 1666f50589..0000000000 --- a/projects/demo/src/app/drag-and-drop/custom-ghost-and-handle.demo.ts +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; - -@Component({ - selector: 'custom-ghost-and-handle', - styleUrls: ['./drag-and-drop.demo.scss'], - templateUrl: './custom-ghost-and-handle.demo.html', -}) -export class CustomGhostAndHandleDemo {} diff --git a/projects/demo/src/app/drag-and-drop/custom-ghost.demo.html b/projects/demo/src/app/drag-and-drop/custom-ghost.demo.html deleted file mode 100644 index ccff8a8b4a..0000000000 --- a/projects/demo/src/app/drag-and-drop/custom-ghost.demo.html +++ /dev/null @@ -1,22 +0,0 @@ - - -

Draggable button with a custom ghost

- -
- -
diff --git a/projects/demo/src/app/drag-and-drop/custom-ghost.demo.ts b/projects/demo/src/app/drag-and-drop/custom-ghost.demo.ts deleted file mode 100644 index f9fdf7ad1c..0000000000 --- a/projects/demo/src/app/drag-and-drop/custom-ghost.demo.ts +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; - -@Component({ - selector: 'custom-ghost-demo', - styleUrls: ['./drag-and-drop.demo.scss'], - templateUrl: './custom-ghost.demo.html', -}) -export class CustomGhostDemo {} diff --git a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.html b/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.html deleted file mode 100644 index 460139362c..0000000000 --- a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.html +++ /dev/null @@ -1,17 +0,0 @@ - - -

Drag and Drop - Draggable

- - diff --git a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.module.ts b/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.module.ts deleted file mode 100644 index 7e5b39d12a..0000000000 --- a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { ClarityModule } from '@clr/angular'; - -import { BasicDraggableDemo } from './basic-draggable.demo'; -import { BasicDroppableDemo } from './basic-droppable.demo'; -import { CustomGhostAndHandleDemo } from './custom-ghost-and-handle.demo'; -import { CustomGhostDemo } from './custom-ghost.demo'; -import { DragAndDropDemo } from './drag-and-drop.demo'; -import { ROUTING } from './drag-and-drop.demo.routing'; -import { DraggableHandleDemo } from './draggable-handle.demo'; -import { DropToleranceDemo } from './drop-tolerance.demo'; -import { GroupingDemo } from './grouping.demo'; - -@NgModule({ - imports: [CommonModule, ClarityModule, FormsModule, ROUTING], - declarations: [ - DragAndDropDemo, - DraggableHandleDemo, - BasicDraggableDemo, - CustomGhostDemo, - CustomGhostAndHandleDemo, - BasicDroppableDemo, - DropToleranceDemo, - GroupingDemo, - ], - exports: [ - DragAndDropDemo, - DraggableHandleDemo, - BasicDraggableDemo, - CustomGhostDemo, - CustomGhostAndHandleDemo, - BasicDroppableDemo, - DropToleranceDemo, - GroupingDemo, - ], -}) -export class DragAndDropDemoModule {} diff --git a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.routing.ts b/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.routing.ts deleted file mode 100644 index 2dd03597f7..0000000000 --- a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.routing.ts +++ /dev/null @@ -1,36 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { ModuleWithProviders } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { BasicDraggableDemo } from './basic-draggable.demo'; -import { BasicDroppableDemo } from './basic-droppable.demo'; -import { CustomGhostAndHandleDemo } from './custom-ghost-and-handle.demo'; -import { CustomGhostDemo } from './custom-ghost.demo'; -import { DragAndDropDemo } from './drag-and-drop.demo'; -import { DraggableHandleDemo } from './draggable-handle.demo'; -import { DropToleranceDemo } from './drop-tolerance.demo'; -import { GroupingDemo } from './grouping.demo'; - -const ROUTES: Routes = [ - { - path: '', - component: DragAndDropDemo, - children: [ - { path: '', redirectTo: 'draggable', pathMatch: 'full' }, - { path: 'draggable', component: BasicDraggableDemo }, - { path: 'draggable-handle', component: DraggableHandleDemo }, - { path: 'custom-ghost', component: CustomGhostDemo }, - { path: 'custom-ghost-and-handle', component: CustomGhostAndHandleDemo }, - { path: 'droppable', component: BasicDroppableDemo }, - { path: 'drop-tolerance', component: DropToleranceDemo }, - { path: 'grouping', component: GroupingDemo }, - ], - }, -]; - -export const ROUTING: ModuleWithProviders = RouterModule.forChild(ROUTES); diff --git a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.scss b/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.scss deleted file mode 100644 index 9babf00f03..0000000000 --- a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.scss +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -@import '../../../../angular/src/utils/variables/variables.color'; -@import '../../../../angular/src/utils/variables/variables.global'; - -.droppable-demo { - padding: $clr_baselineRem_0_25 0; -} -.droppable-feature-variant { - & > label { - padding-right: $clr_baselineRem_0_25; - } - .radio-inline { - display: inline-block; - padding-right: $clr_baselineRem_0_25; - &:last-child { - padding-right: $clr_baselineRem_0_5; - } - } -} - -.droppable-tolerance-fields { - padding: $clr_baselineRem_0_25 0; -} - -span.label cds-icon { - margin-right: $clr_baselineRem_0_125; -} diff --git a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.ts b/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.ts deleted file mode 100644 index 8980bfacfc..0000000000 --- a/projects/demo/src/app/drag-and-drop/drag-and-drop.demo.ts +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; - -@Component({ - selector: 'drag-and-drop-demo', - styleUrls: ['./drag-and-drop.demo.scss'], - templateUrl: './drag-and-drop.demo.html', -}) -export class DragAndDropDemo {} diff --git a/projects/demo/src/app/drag-and-drop/draggable-handle.demo.html b/projects/demo/src/app/drag-and-drop/draggable-handle.demo.html deleted file mode 100644 index 8bf716bddd..0000000000 --- a/projects/demo/src/app/drag-and-drop/draggable-handle.demo.html +++ /dev/null @@ -1,56 +0,0 @@ - - -

Draggable cards with a handle

- -

- It's recommended to use a handle if your draggable contains native interactive elements so that we can prevent their - default interactive behaviors from getting mixed with the draggable's interactivity. -

- -
-
-
-
-
-

Draggable Card 1

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui eum distinctio fuga sapiente enim tenetur et - saepe veniam eligendi! Doloribus ipsa vel eveniet rerum incidunt voluptates dolor? Non, porro modi! - - - - - -

-
-
- Drag Handle -
-
-
-
-
-
-

Draggable Card 2

-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aspernatur incidunt maxime doloribus, - temporibus tempore iure reiciendis, facilis nihil atque corrupti neque! Doloribus, quod praesentium ratione - accusamus sapiente omnis neque! - - - - - -

-
-
- Drag Handle -
-
-
-
-
diff --git a/projects/demo/src/app/drag-and-drop/draggable-handle.demo.ts b/projects/demo/src/app/drag-and-drop/draggable-handle.demo.ts deleted file mode 100644 index 6c1a1869e3..0000000000 --- a/projects/demo/src/app/drag-and-drop/draggable-handle.demo.ts +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; - -@Component({ - selector: 'draggable-handle-demo', - styleUrls: ['./drag-and-drop.demo.scss'], - templateUrl: './draggable-handle.demo.html', -}) -export class DraggableHandleDemo {} diff --git a/projects/demo/src/app/drag-and-drop/drop-tolerance.demo.html b/projects/demo/src/app/drag-and-drop/drop-tolerance.demo.html deleted file mode 100644 index 6958f4b45e..0000000000 --- a/projects/demo/src/app/drag-and-drop/drop-tolerance.demo.html +++ /dev/null @@ -1,145 +0,0 @@ - - -

Drop Tolerance

- -
- -
- - - - -
-
- -
- -
- - - - -
-
-
-
-
-
A.
- - - - - - - - - - - - - - -
Files:
Nothing to drag here...
- - {{file.name}} - - - - -
-
-
-
B.
- - - - - - - - - - - - - - -
Drop here to upload:
Nothing to upload here...
- - {{file.name}} - - - - -
-
-
-
diff --git a/projects/demo/src/app/drag-and-drop/drop-tolerance.demo.ts b/projects/demo/src/app/drag-and-drop/drop-tolerance.demo.ts deleted file mode 100644 index 3de308a4c8..0000000000 --- a/projects/demo/src/app/drag-and-drop/drop-tolerance.demo.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { ClrDragEvent } from '@clr/angular'; - -@Component({ - selector: 'basic-droppable-demo', - styleUrls: ['./drag-and-drop.demo.scss'], - templateUrl: './drop-tolerance.demo.html', -}) -export class DropToleranceDemo { - files: any[] = [{ name: 'img_001.jpg' }, { name: 'img_002.jpg' }, { name: 'img_003.jpg' }]; - - droppedFiles: any[] = []; - - private moveItem(item: any, from: any[], to: any[]) { - const indexInFiles = from.indexOf(item); - if (indexInFiles > -1) { - from.splice(indexInFiles, 1); - } - if (to.indexOf(item) === -1) { - to.push(item); - } - } - - onDropToUpload(dragEvent: ClrDragEvent) { - this.moveItem(dragEvent.dragDataTransfer, this.files, this.droppedFiles); - } - - onDropBack(dragEvent: ClrDragEvent) { - this.moveItem(dragEvent.dragDataTransfer, this.droppedFiles, this.files); - } - - tableADropTolerance: any = {}; - tableBDropTolerance: any = {}; - - updateTableAField(updatedField: any): void { - this.tableADropTolerance = { ...this.tableADropTolerance, ...updatedField }; - } - - updateTableBField(updatedField: any): void { - this.tableBDropTolerance = { ...this.tableBDropTolerance, ...updatedField }; - } -} diff --git a/projects/demo/src/app/drag-and-drop/grouping.demo.html b/projects/demo/src/app/drag-and-drop/grouping.demo.html deleted file mode 100644 index d1d9056602..0000000000 --- a/projects/demo/src/app/drag-and-drop/grouping.demo.html +++ /dev/null @@ -1,85 +0,0 @@ - - -

Grouping Draggables with Droppables

- -
-
-
- - - - - - - - - - - - - - -
Files:
Nothing to drag here...
{{file.name}}
-
-
- - - - - - - - - - - - - - -
Drop audio files here:
Only audios will be accepted here.
{{file.name}}
-
-
- - - - - - - - - - - - - - -
Drop image files here:
Only images will be accepted here.
{{file.name}}
-
-
- - - - - - - - - - - - - - -
Drop movie files here:
Only videos will be accpeted here.
{{file.name}}
-
-
-
diff --git a/projects/demo/src/app/drag-and-drop/grouping.demo.ts b/projects/demo/src/app/drag-and-drop/grouping.demo.ts deleted file mode 100644 index dc6fb769c1..0000000000 --- a/projects/demo/src/app/drag-and-drop/grouping.demo.ts +++ /dev/null @@ -1,61 +0,0 @@ -/* - * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. - * This software is released under MIT license. - * The full license information can be found in LICENSE in the root directory of this project. - */ - -import { Component } from '@angular/core'; -import { ClrDragEvent } from '@clr/angular'; - -const FILES = [ - { name: 'img_001.jpg', group: 'image-file' }, - { name: 'mov_001.mov', group: 'movie-file' }, - { name: 'aud_001.mp4', group: 'audio-file' }, -]; - -@Component({ - selector: 'basic-droppable-demo', - styleUrls: ['./drag-and-drop.demo.scss'], - templateUrl: './grouping.demo.html', -}) -export class GroupingDemo { - files: any[]; - - droppedImages: any[] = []; - droppedMovies: any[] = []; - droppedAudios: any[] = []; - - constructor() { - this.files = FILES; - } - - private moveItem(item: any, to: any[], from: any[]) { - const indexInFiles = from.indexOf(item); - if (indexInFiles > -1) { - from.splice(indexInFiles, 1); - } - if (to.indexOf(item) === -1) { - to.push(item); - } - } - - onDropImage(dragEvent: ClrDragEvent) { - this.moveItem(dragEvent.dragDataTransfer, this.droppedImages, this.files); - } - onDropMovie(dragEvent: ClrDragEvent) { - this.moveItem(dragEvent.dragDataTransfer, this.droppedMovies, this.files); - } - onDropAudio(dragEvent: ClrDragEvent) { - this.moveItem(dragEvent.dragDataTransfer, this.droppedAudios, this.files); - } - - onDropBack(dragEvent: ClrDragEvent) { - if (this.droppedAudios.indexOf(dragEvent.dragDataTransfer) > -1) { - this.moveItem(dragEvent.dragDataTransfer, this.files, this.droppedAudios); - } else if (this.droppedMovies.indexOf(dragEvent.dragDataTransfer) > -1) { - this.moveItem(dragEvent.dragDataTransfer, this.files, this.droppedMovies); - } else if (this.droppedImages.indexOf(dragEvent.dragDataTransfer) > -1) { - this.moveItem(dragEvent.dragDataTransfer, this.files, this.droppedImages); - } - } -}