From d199e04eae00610f04e31146a0cb15c0e7d0ee6c Mon Sep 17 00:00:00 2001
From: Tiago Temporin <tiaguinhocab@gmail.com>
Date: Wed, 22 Jul 2020 15:50:11 -0300
Subject: [PATCH] feat(color-picker): implement position for used colors

Closes #90
---
 .../color-picker/color-picker.component.html  | 19 ++++++++++++++++---
 .../color-picker/color-picker.component.ts    | 15 ++++++++++++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/lib/color-picker/color-picker.component.html b/src/lib/color-picker/color-picker.component.html
index 452ae49e..97a50888 100644
--- a/src/lib/color-picker/color-picker.component.html
+++ b/src/lib/color-picker/color-picker.component.html
@@ -28,12 +28,25 @@
             [height]="colorPickerSelectorHeight" (changeSelectedColor)="updateTmpSelectedColor($event)">
         </mcc-color-picker-selector>
 
-        <mcc-color-picker-collection *ngIf="!hideUsedColors" [label]="usedColorLabel" [size]="usedSizeColors" [transparent]="!hideTransparent"
-            [hideEmpty]="hideEmpty" [colors]="usedColors$ | async" (changeColor)="updateTmpSelectedColor($event)">
-        </mcc-color-picker-collection>
+        <!-- show used colors on top -->
+        <ng-container *ngIf="!hideUsedColors && usedColorsPosition == 'top'">
+          <mcc-color-picker-collection [label]="usedColorLabel" [size]="usedSizeColors"
+                                       [transparent]="!hideTransparent" [hideEmpty]="hideEmpty"
+                                       [colors]="usedColors$ | async" (changeColor)="updateTmpSelectedColor($event)">
+          </mcc-color-picker-collection>
+        </ng-container>
 
+        <!-- render user collections -->
         <ng-content></ng-content>
 
+        <!-- show used colors on bottom -->
+        <ng-container *ngIf="!hideUsedColors && usedColorsPosition == 'bottom'">
+          <mcc-color-picker-collection [label]="usedColorLabel" [size]="usedSizeColors"
+                                       [transparent]="!hideTransparent" [hideEmpty]="hideEmpty" [colors]="usedColors$
+                                        | async" (changeColor)="updateTmpSelectedColor($event)">
+          </mcc-color-picker-collection>
+        </ng-container>
+
         <div *ngIf="!hideButtons" class="mcc-color-picker-actions">
 
             <button mat-button role="button" aria-label="Cancel" (click)="cancelSelection()">
diff --git a/src/lib/color-picker/color-picker.component.ts b/src/lib/color-picker/color-picker.component.ts
index 75ad67d4..7541ec28 100644
--- a/src/lib/color-picker/color-picker.component.ts
+++ b/src/lib/color-picker/color-picker.component.ts
@@ -16,7 +16,7 @@ import {
 } from '@angular/core';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { EMPTY_COLOR, ENABLE_ALPHA_SELECTOR, coerceHexaColor } from './color-picker';
+import { EMPTY_COLOR, ENABLE_ALPHA_SELECTOR, MccColorPickerUsedColorPosition, coerceHexaColor } from './color-picker';
 import { MccColorPickerCollectionComponent } from './color-picker-collection.component';
 import { MccColorPickerService } from './color-picker.service';
 
@@ -79,6 +79,19 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest
   }
   private _reverseUsedColor: boolean = false;
 
+
+  /**
+   * Set position of used colors collection
+   */
+  @Input()
+  get usedColorsPosition(): MccColorPickerUsedColorPosition {
+    return this._usedColorsPosition;
+  }
+  set usedColorsPosition(position: MccColorPickerUsedColorPosition) {
+    this._usedColorsPosition = position;
+  }
+  private _usedColorsPosition: MccColorPickerUsedColorPosition = 'top';
+
   /**
    * Hide the hexadecimal color forms.
    */