From 0b328fb0039edadcc6a83441f83dde2078eb1006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Basi=C5=84ski?=
 <74178853+mateuszbasinski@users.noreply.github.com>
Date: Sun, 26 Feb 2023 17:59:31 +0100
Subject: [PATCH] fix: avoid to display popup out of the screen on mobile
 (#329)

---
 projects/lib/src/lib/color-picker.component.html |  2 +-
 projects/lib/src/lib/color-picker.component.ts   | 14 ++++++++++++++
 projects/lib/src/lib/color-picker.directive.ts   |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/projects/lib/src/lib/color-picker.component.html b/projects/lib/src/lib/color-picker.component.html
index 6d61852..f40bb3a 100644
--- a/projects/lib/src/lib/color-picker.component.html
+++ b/projects/lib/src/lib/color-picker.component.html
@@ -1,5 +1,5 @@
 <div #dialogPopup class="color-picker" [class.open]="show" [style.display]="!show ? 'none' : 'block'" [style.visibility]="hidden ? 'hidden' : 'visible'" [style.top.px]="top" [style.left.px]="left" [style.position]="position" [style.height.px]="cpHeight" [style.width.px]="cpWidth" (click)="$event.stopPropagation()">
-  <div *ngIf="cpDialogDisplay === 'popup'" class="arrow arrow-{{cpUsePosition}}" [style.top.px]="arrowTop"></div>
+  <div *ngIf="cpDialogDisplay === 'popup'" [style.left]="cpArrowPosition" class="arrow arrow-{{cpUsePosition}}" [style.top.px]="arrowTop"></div>
 
   <div *ngIf="(cpColorMode || 1) === 1" class="saturation-lightness" [slider] [rgX]="1" [rgY]="1" [style.background-color]="hueSliderColor" (newValue)="onColorChange($event)" (dragStart)="onDragStart('saturation-lightness')" (dragEnd)="onDragEnd('saturation-lightness')">
     <div class="cursor" [style.top.px]="slider?.v" [style.left.px]="slider?.s"></div>
diff --git a/projects/lib/src/lib/color-picker.component.ts b/projects/lib/src/lib/color-picker.component.ts
index 9bcc621..824dcd4 100644
--- a/projects/lib/src/lib/color-picker.component.ts
+++ b/projects/lib/src/lib/color-picker.component.ts
@@ -137,6 +137,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
   public cpAddColorButtonText: string;
   public cpAddColorButtonClass: string;
   public cpRemoveColorButtonClass: string;
+  public cpArrowPosition: number;
 
   public cpTriggerElement: ElementRef;
 
@@ -1045,6 +1046,19 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
 
       if (this.cpPosition === 'auto') {
         const dialogBounds = this.dialogElement.nativeElement.getBoundingClientRect();
+        const windowInnerHeight = window.innerHeight;
+        const windowInnerWidth = window.innerWidth;
+        const elRefClientRect = this.elRef.nativeElement.getBoundingClientRect();
+        const bottom = this.top + dialogBounds.height;
+        if (bottom > windowInnerHeight) {
+          this.top = windowInnerHeight - dialogBounds.height;
+          this.cpArrowPosition = elRefClientRect.x / 2 - 20;
+        }
+        const right = this.left + dialogBounds.width;
+        if (right > windowInnerWidth) {
+          this.left = windowInnerWidth - dialogBounds.width;
+          this.cpArrowPosition = elRefClientRect.x / 2 - 20;
+        }
         const triggerBounds = this.cpTriggerElement.nativeElement.getBoundingClientRect();
         usePosition = calculateAutoPositioning(dialogBounds, triggerBounds);
       }
diff --git a/projects/lib/src/lib/color-picker.directive.ts b/projects/lib/src/lib/color-picker.directive.ts
index 3b8e9c2..59d737b 100644
--- a/projects/lib/src/lib/color-picker.directive.ts
+++ b/projects/lib/src/lib/color-picker.directive.ts
@@ -82,6 +82,7 @@ export class ColorPickerDirective implements OnChanges, OnDestroy {
   @Input() cpAddColorButtonClass: string = 'cp-add-color-button-class';
 
   @Input() cpRemoveColorButtonClass: string = 'cp-remove-color-button-class';
+  @Input() cpArrowPosition: number = 0;
 
   @Input() cpExtraTemplate: TemplateRef<any>;