Renamed prefixes in angular.json

projects/common/src/fm/components/side-panel/side-panel.component.html

@@ -0,0 +1,14 @@
+<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing }" [ngStyle]="{'top':top}">
+  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
+    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+  </div>
+  <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
+    <div></div>
+     <span class="rounded"></span>
+  </div>
+  <div class="content">
+    <ng-content>
+
+    </ng-content>
+  </div>
+</div>

projects/common/src/fm/components/side-panel/side-panel.component.scss

@@ -0,0 +1,100 @@
+.side-panel {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  left: 0px;
+  top:50%;
+  transition: left 0.3s, top 0.3s;
+  background-color: white;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.side-panel.resizing {
+  transition: left 0s, top 0s;
+}
+
+.side-panel.collapsed {
+  left:-22rem;
+}
+
+.arrow {
+  position: absolute;
+  top: 1rem;
+  left: 100%;  
+  background-color: inherit;
+  cursor:pointer;
+}
+
+.arrow i {
+  transition: transform 0.3s;
+}
+
+.collapsed .arrow i {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.side-panel.hidden {
+  top:100%;
+}
+
+.content {
+  height:100% ;
+  width:100%;
+  overflow:hidden;
+  overflow-y:auto;
+  position: relative;
+  z-index: 1;
+  background-color: rgb(255,255,255);
+}
+
+.resizegrip {
+  height:2rem;
+  line-height: 1rem;
+  display: none;
+  text-align: center;
+  position: relative;
+  z-index: 2; 
+}
+div.resizegrip > div {
+  position: absolute;
+  top:0px;
+  height: 1rem;
+  width: 100%;
+  background-color: rgb(255,255,255);
+}
+
+div.resizegrip > span {
+  position: relative;
+  display: inline-block;
+  height:0.3rem;
+  width:4rem;
+  background-color:rgba(0, 0, 0, 0.3);
+  top:-0.3rem;
+}
+
+.resizeable .resizegrip {
+  display:block;
+  
+}
+
+.resizeable .content {
+  height:calc(100% - 1rem);
+  top:-1rem;
+}
+
+@media screen and (min-width:44rem) {
+  .side-panel {
+    top:0px;
+    width: 22rem;
+    height:100%;
+    left:0px;
+  }
+
+  .side-panel.hidden {
+    width: 22rem;
+    left:-24rem;
+    height:100%;
+  }
+
+}

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -0,0 +1,85 @@
+import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef  } from '@angular/core';
+
+@Component({
+  selector: 'fm-side-panel',
+  templateUrl: 'side-panel.component.html',
+  styleUrls: ['side-panel.component.scss']
+})
+
+
+export class SidePanelComponent  implements OnChanges {
+  @Input() public visible: boolean;
+  @Input() public collapsed: boolean;
+  @Input() public collapsable: boolean;
+  @Input() public resizeable: boolean = false;
+  @ViewChild("resizeGrip") elementView: ElementRef;
+  public mobile:boolean = true;
+  private parentHeight:number = 0;
+  public top = "100%";
+  private resizeTop:number=50;
+  public resizing:boolean=false;
+
+  constructor(private element: ElementRef,private ref: ChangeDetectorRef) {
+    this.collapsable = false;
+    this.setTop();
+  }
+
+  checkMobile():boolean {
+    let size = parseFloat(getComputedStyle(document.documentElement).width);
+    let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    let threshold = 44 * rem;
+    return !(size>threshold);
+  }
+
+  setTop() {
+    this.mobile = this.checkMobile();
+    this.resizeTop = this.mobile?50:0;
+    this.top =  (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
+  }
+
+  ngAfterViewInit() {
+    this.parentHeight = this.element.nativeElement.offsetParent.clientHeight;
+  }
+
+  handleToggleClick(event) {
+    if (this.collapsable) {
+      this.collapsed = !this.collapsed;     
+    }
+  }
+
+  handleStartGripDrag(event:DragEvent|TouchEvent) {
+    this.resizing=true;
+    if(event instanceof DragEvent) {
+      var crt = new Image();
+      crt.style.display = "none"; 
+      document.body.appendChild(crt);
+      event.dataTransfer.setDragImage(crt,0,0);
+    }   
+  }
+
+  handleEndGripDrag() {
+    this.resizing = false;
+  }
+
+  handleGripDrag(event:DragEvent|TouchEvent) {
+    var clientY = 0;
+    if((event instanceof TouchEvent)) {
+      clientY = (event as TouchEvent).changedTouches[0].clientY;
+    } else {
+      clientY=(event as DragEvent).clientY;
+    }
+    this.resizeTop =  Math.min(98, Math.max(0, clientY / (this.parentHeight  / 100)));
+    this.top =  (this.visible? this.resizeTop:(this.mobile? 100:0)) + "%";
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes.visible) {
+      this.top =  (changes.visible.currentValue?this.resizeTop:(this.mobile? 100:0)) + "%";
+    }    
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.setTop();
+  }
+}