Merge pull request #10149 from IgniteUI/dTsvetkov/add-drag-drop-shadow-dom-dev-sample

chore(dev-demos): Add drag and drop sample overlapping shadow dom

Author: zdrawku

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { ChipsSampleComponent } from './chips/chips.sample';
 import { DatePickerSampleComponent } from './date-picker/date-picker.sample';
 import { DialogSampleComponent } from './dialog/dialog.sample';
 import { DragDropSampleComponent } from './drag-drop/drag-drop.sample';
+import { ShadowGridSampleComponent } from './drag-drop/shadow-dom-grid/shadow-grid-sample';
 import { MaskSampleComponent, DisplayFormatPipe, InputFormatPipe } from './mask/mask.sample';
 import { IconSampleComponent } from './icon/icon.sample';
 import { InputSampleComponent } from './input/input.sample';
@@ -176,6 +177,7 @@ const components = [
     DisplayDensityDropDownComponent,
     DropDownVirtualComponent,
     DragDropSampleComponent,
+    ShadowGridSampleComponent,
     ComboSampleComponent,
     IconSampleComponent,
     InputSampleComponent,

src/app/drag-drop/drag-drop.sample.html

@@ -173,3 +173,50 @@ <h4>Drag a suspect inside or outside the cage:</h4>
         </div>
     </article>
 </section>
+
+
+<section class="sample-content">
+    <article class="sample-column">
+        <h4>Drag and drop elements overlapping grid in shadow dom:</h4>
+
+        <button #buttonElement igxButton="raised" (click)="openOverlappingDialog()">Show Dialog</button>
+
+        <div igxToggle #toggleForm1="toggle" class="igx-dialog" [style.width.px]="320" igxDrag [ghost]="false"
+            [dragTolerance]="0" [dragChannel]="'dialog'">
+            <div class="igx-dialog__window">
+                <div class="igx-dialog__window-content">
+                    <div class="dialogHeader">
+                        <span [style.margin.px]="10">Draggable Dialog</span>
+                        <igx-icon igxDragHandle class="dialogHandle">control_camera</igx-icon>
+                    </div>
+                    <p>Drop Area 1</p>
+                    <div igxDrop (dropped)="onItemDropped($event)" style="border-style:solid;height:150px;">
+                        <igx-input-group igxDrag>
+                            <igx-prefix>
+                                <igx-icon>person</igx-icon>
+                            </igx-prefix>
+                            <input type="text" igxInput />
+                            <label igxLabel>Username</label>
+                        </igx-input-group>
+                        <igx-input-group igxDrag>
+                            <igx-prefix>
+                                <igx-icon>lock</igx-icon>
+                            </igx-prefix>
+                            <label igxLabel>Password</label>
+                            <input type="password" igxInput />
+                        </igx-input-group>
+                    </div>
+                </div>
+                <div class="igx-dialog__window-actions">
+                    <button igxButton="flat" type="button" igxRipple (click)="toggleForm1.close()"> Cancel </button>
+                </div>
+                <div class="igx-dialog__window-content">
+                    <p>Drop Area 2</p>
+                    <div igxDrop id="droppable" style="border-style:solid;height:150px;"
+                        (dropped)="onItemDropped($event)"></div>
+                </div>
+            </div>
+        </div>
+        <app-shadow-grid-sample></app-shadow-grid-sample>
+    </article>
+</section>

src/app/drag-drop/drag-drop.sample.ts

@@ -8,7 +8,8 @@ import {
     IgxInsertDropStrategy,
     IDragBaseEventArgs,
     IgxDragLocation,
-    DragDirection
+    DragDirection,
+    IDropDroppedEventArgs
 } from 'igniteui-angular';
 
 @Component({
@@ -50,6 +51,12 @@ export class DragDropSampleComponent {
     @ViewChild('toggleForm', { read: IgxDragDirective, static: true })
     public toggleFormDrag: IgxDragDirective;
 
+    @ViewChild('toggleForm1', { static: true })
+    public toggleForm1: IgxToggleDirective;
+
+    @ViewChild('toggleForm', { read: IgxDragDirective, static: true })
+    public toggleFormDrag1: IgxDragDirective;
+
     @ViewChildren('listItem', { read: IgxDragDirective })
     public listNotesDirs: QueryList<IgxDragDirective>;
 
@@ -168,6 +175,22 @@ export class DragDropSampleComponent {
         this.toggleFormDrag.setLocation(new IgxDragLocation(this.toggleStartPageX, this.toggleStartPageY));
     }
 
+    public openOverlappingDialog() {
+        const overlaySettings: OverlaySettings = {
+            positionStrategy: new GlobalPositionStrategy(),
+            scrollStrategy: new NoOpScrollStrategy(),
+            modal: false,
+            closeOnOutsideClick: false
+        };
+        this.toggleForm1.open(overlaySettings);
+
+        if (!this.toggleStartPageX && !this.toggleStartPageY) {
+            this.toggleStartPageX = this.toggleFormDrag.pageX;
+            this.toggleStartPageY = this.toggleFormDrag.pageY;
+        }
+        this.toggleFormDrag.setLocation(new IgxDragLocation(this.toggleStartPageX, this.toggleStartPageY));
+    }
+
     public toOriginNoGhost() {
         const startX = this.startX.nativeElement.value;
         const startY = this.startY.nativeElement.value;
@@ -375,4 +398,18 @@ export class DragDropSampleComponent {
     public dragClick() {
         console.log('click');
     }
+
+    public onDragMove(e) {
+        const deltaX = e.nextPageX - e.pageX;
+        const deltaY = e.nextPageY - e.pageY;
+        e.cancel = true;
+        this.toggleForm.setOffset(deltaX, deltaY);
+      }
+
+    public onItemDropped(event: IDropDroppedEventArgs) {
+      const dropDivArea: HTMLElement = event.owner.element.nativeElement;
+      const draggedEl = event.drag.element.nativeElement;
+      dropDivArea.appendChild(draggedEl);
+      event.cancel = true;
+    }
 }

src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.html

@@ -0,0 +1,2 @@
+<igx-grid #grid1 [data]="localData" [autoGenerate]="true" (columnInit)="initColumns($event)" (selected)="selectCell($event)">
+</igx-grid>

src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.scss

@@ -0,0 +1,2 @@
+@import '../../../../projects/igniteui-angular/src/lib/core/styles/themes/index';
+@import '../../../styles/demo-theme';

src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { IgxColumnComponent } from 'igniteui-angular';
+
+@Component({
+  selector: 'app-shadow-grid-sample',
+  templateUrl: './shadow-grid-sample.html',
+  styleUrls: ['./shadow-grid-sample.scss'],
+  encapsulation: ViewEncapsulation.ShadowDom
+})
+export class ShadowGridSampleComponent implements OnInit {
+  public localData: any[];
+  public selectedCell;
+
+  public ngOnInit(): void {
+    this.localData = [
+      { ID: 1, Name: 'A' },
+      { ID: 2, Name: 'B' },
+      { ID: 3, Name: 'C' },
+      { ID: 4, Name: 'D' },
+      { ID: 5, Name: 'E' }
+    ];
+  }
+
+  public initColumns(event: IgxColumnComponent) {
+    const column: IgxColumnComponent = event;
+    column.movable = true;
+    if (column.field === 'Name') {
+      column.filterable = true;
+      column.sortable = true;
+      column.editable = true;
+    }
+  }
+
+  public selectCell(event) {
+    this.selectedCell = event;
+  }
+}