feat(color-picker): round corners, @HostListeners, openOnFocus for mc…

…cColorPickerOrigin, examples

src/demo-app/app/color-picker/color-picker.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -20,6 +20,7 @@ import { MccColorPickerModule } from '../../../lib/color-picker/public_api';
     CommonModule,
     RouterModule.forChild(routes),
     ReactiveFormsModule,
+    FormsModule,
     MatButtonModule,
     MatCardModule,
     MatFormFieldModule,

src/demo-app/app/color-picker/components/color-picker-api.component.html

@@ -20,9 +20,9 @@ <h4>Inputs</h4>
     </tr>
     <tr>
       <td>
-        <code>alpha: boolean, default: false</code>
+        <code>alpha: boolean</code>
       </td>
-      <td class="api-description">Enable alpha selector</td>
+      <td class="api-description">Enable alpha selector, default: false</td>
     </tr>
     <tr>
       <td>
@@ -286,6 +286,24 @@ <h2>Directives</h2>
 <h3>MccColorPickerOrigin</h3>
 <p>This directive goes on the element (input, textarea or select) that will be connected to the color picker.</p>
 
+<h4>Inputs</h4>
+<table class="table-api-documentation">
+  <thead>
+  <tr>
+    <th>Name</th>
+    <th>Description</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>
+      <code>mccColorPickerOrigin: 'openOnFocus' | 'default'</code>
+    </td>
+    <td class="table-api-documentation">Enable opening color picker on focus, default: 'default'</td>
+  </tr>
+  </tbody>
+</table>
+
 <h4>Outputs</h4>
 <table class="table-api-documentation">
   <thead>

src/demo-app/app/color-picker/components/color-picker-examples.component.html

@@ -33,7 +33,9 @@
   <mat-card-content>
     <mcc-color-picker [disabled]="disabled"> </mcc-color-picker>
 
-    <button mat-flat-button (click)="disabled = !disabled" color="primary" style="margin-left: 1rem;">Disable /Enable</button>
+    <button mat-flat-button (click)="disabled = !disabled" color="primary" style="margin-left: 12px;" style="margin-left: 1rem;">
+      Disable /Enable
+    </button>
   </mat-card-content>
 </mat-card>
 
@@ -161,7 +163,7 @@
     <mcc-color-picker>
       <mcc-color-picker-collection [label]="'First Object Collection'"> </mcc-color-picker-collection>
     </mcc-color-picker>
-    <button mat-flat-button color="primary" (click)="reset()">RESET</button>
+    <button mat-flat-button color="primary" style="margin-left: 12px;" (click)="reset()">RESET</button>
   </mat-card-content>
 </mat-card>
 
@@ -260,7 +262,7 @@
         <input matInput mccColorPickerOrigin #trigger="mccColorPickerOrigin" formControlName="color" />
       </mat-form-field>
 
-      <button type="submit" mat-flat-button color="primary">
+      <button type="submit" mat-flat-button color="primary" style="margin-left: 12px;">
         Submit
         <small>(look the console)</small>
       </button>
@@ -282,7 +284,7 @@
         <input matInput mccColorPickerOrigin #trigger2="mccColorPickerOrigin" formControlName="color" />
       </mat-form-field>
 
-      <button type="submit" mat-flat-button color="primary">
+      <button type="submit" mat-flat-button color="primary" style="margin-left: 12px;">
         Submit
         <small>(look the console)</small>
       </button>
@@ -304,7 +306,7 @@
         <input matInput mccColorPickerOrigin #trigger3="mccColorPickerOrigin" formControlName="color" />
       </mat-form-field>
 
-      <button type="submit" mat-flat-button color="primary">
+      <button type="submit" mat-flat-button color="primary" style="margin-left: 12px;">
         Submit
         <small>(look the console)</small>
       </button>
@@ -326,10 +328,71 @@
         <input matInput mccColorPickerOrigin #trigger4="mccColorPickerOrigin" formControlName="color" />
       </mat-form-field>
 
-      <button type="submit" mat-flat-button color="primary">
+      <button type="submit" mat-flat-button color="primary" style="margin-left: 12px;">
         Submit
         <small>(look the console)</small>
       </button>
     </form>
   </mat-card-content>
 </mat-card>
+
+<!-- CONNECT COLOR PICKER WITH AN INPUT - RGBA inside Field (use matPrefix and matSuffix)-->
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Connect color picker with an input - RGB with alpha inside Field (use matPrefix and matSuffix)</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mat-form-field appearance="legacy">
+      <input matInput mccColorPickerOrigin #trigger5="mccColorPickerOrigin" [(ngModel)]="color5" />
+      <mcc-color-picker matSuffix mccConnectedColorPicker [mccConnectedColorPickerOrigin]="trigger5" format="rgb" alpha> </mcc-color-picker>
+    </mat-form-field>
+  </mat-card-content>
+</mat-card>
+
+<!-- CONNECT COLOR PICKER WITH AN INPUT - RGBA inside Field (use matPrefix and matSuffix) - mccColorPickerOrigin="openOnFocus" -->
+<mat-card>
+  <mat-card-header>
+    <mat-card-title
+      >Connect color picker with an input - HEX with alpha inside Field (use matPrefix and matSuffix) - mccColorPickerOrigin="openOnFocus"
+    </mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mat-form-field appearance="outline">
+      <mcc-color-picker matSuffix mccConnectedColorPicker [mccConnectedColorPickerOrigin]="trigger6" format="hex" alpha> </mcc-color-picker>
+      <input matInput mccColorPickerOrigin="openOnFocus" #trigger6="mccColorPickerOrigin" [(ngModel)]="color6" />
+    </mat-form-field>
+  </mat-card-content>
+</mat-card>
+
+<!-- CONNECT COLOR PICKER WITH AN INPUT - RGBA inside Field (use matPrefix and matSuffix) - mccColorPickerOrigin="openOnFocus" with hidden color-button-->
+<mat-card>
+  <mat-card-header>
+    <mat-card-title
+      >Connect color picker with an input - HEX with alpha inside Field (use matPrefix and matSuffix) - mccColorPickerOrigin="openOnFocus" with hidden color-button
+    </mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mat-form-field appearance="outline">
+      <mcc-color-picker matSuffix mccConnectedColorPicker [mccConnectedColorPickerOrigin]="trigger7" format="hex" alpha style="opacity: 0;">
+      </mcc-color-picker>
+      <input matInput mccColorPickerOrigin="openOnFocus" #trigger7="mccColorPickerOrigin" [(ngModel)]="color6" />
+    </mat-form-field>
+  </mat-card-content>
+</mat-card>
+
+<!-- CONNECT COLOR PICKER WITH AN INPUT - RGBA inside Field (use class="mcc-color-picker-form-field" on mat-form-field)-->
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Connect color picker with an input - HSL with alpha inside Field (use matPrefix and matSuffix)</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mat-form-field appearance="fill">
+      <input matInput mccColorPickerOrigin #trigger8="mccColorPickerOrigin" [(ngModel)]="color7" />
+      <mcc-color-picker matPrefix mccConnectedColorPicker [mccConnectedColorPickerOrigin]="trigger8" format="hsl" alpha> </mcc-color-picker>
+    </mat-form-field>
+  </mat-card-content>
+</mat-card>

src/demo-app/app/color-picker/components/color-picker-examples.component.ts

@@ -17,9 +17,15 @@ export class ColorPickerExamplesComponent implements OnInit {
   rgbForm: FormGroup;
   hslForm: FormGroup;
   rgbaForm: FormGroup;
+  rgbaRequiredForm: FormGroup;
+
+  color5: string = null;
+  color6: string = '#F4F';
+  color7: string = 'blue';
 
   disabled = false;
 
+
   // last line will not be show in used colors because they are invalid values
   usedStart: string[] = [
     '#FF3380',
@@ -117,6 +123,10 @@ export class ColorPickerExamplesComponent implements OnInit {
     this.rgbaForm = this.formBuilder.group({
       color: ['rgba(234, 120, 56, 0.45)', Validators.required]
     });
+
+    this.rgbaRequiredForm = this.formBuilder.group({
+      color: ['rgba(67, 200, 40, 1)', Validators.required]
+    });
   }
 
   reset(): void {
@@ -126,4 +136,8 @@ export class ColorPickerExamplesComponent implements OnInit {
   onSubmit({ value, valid }): void {
     console.log(value, valid);
   }
+
+  logValue() {
+    console.log(this.color5);
+  }
 }

src/lib/color-picker/color-picker-connected.directive.ts

@@ -30,6 +30,11 @@ export class MccConnectedColorPickerDirective implements AfterViewInit, OnDestro
    */
   private _originSub: Subscription;
 
+  /**
+   * Focus subscription
+   */
+  private _focusSub: Subscription;
+
   constructor(
     private colorPicker: MccColorPickerComponent,
     public changeDetectorRef: ChangeDetectorRef,
@@ -49,12 +54,15 @@ export class MccConnectedColorPickerDirective implements AfterViewInit, OnDestro
     if (this._originSub && !this._originSub.closed) {
       this._originSub.unsubscribe();
     }
+    if (this._focusSub && !this._focusSub.closed) {
+      this._focusSub.unsubscribe();
+    }
   }
 
   /**
    * Attach color picker and origin
    */
-  private _attachColorPicker(): void {
+  private _attachColorPicker() {
     // subscribe to origin change to update color picker
     this._originSub = this.origin.change.subscribe(value => {
       const color = parseColorString(value);
@@ -68,6 +76,10 @@ export class MccConnectedColorPickerDirective implements AfterViewInit, OnDestro
       }
     });
 
+    this._focusSub = this.origin.focus.subscribe(() => {
+      this.colorPicker.isOpen = true;
+    });
+
     // subscribe to color picker confirmation and set on origin element
     // TODO: changed to on confirm. maybe support on-change mode again?
     this._colorPickerSub = this.colorPicker.selected.subscribe(value => this.origin.writeValueFromColorPicker(value));

src/lib/color-picker/color-picker-origin.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, forwardRef, Inject, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, forwardRef, HostListener, Inject, Input, Renderer2 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { EMPTY_COLOR } from './color-picker.types';
 import { BehaviorSubject } from 'rxjs';
@@ -19,33 +19,45 @@ import { parseColorString } from './color-picker.utils';
   ]
 })
 export class MccColorPickerOriginDirective implements ControlValueAccessor {
+  /**
+   * Emit focus event
+   */
+  focus: EventEmitter<void> = new EventEmitter<void>();
+
   /**
    * Emit changes from the origin
    */
-  change: BehaviorSubject<string> = new BehaviorSubject<string>('');
+  change: BehaviorSubject<string> = new BehaviorSubject<string>(this.elementRef.nativeElement.value);
 
   /**
    * Propagate changes to angular
    */
   propagateChanges: (_: any) => {};
 
   /**
-   * Reference to the element on which the directive is applied.
+   * Controls if focus of the input opens the color picker dialog
    */
-  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(EMPTY_COLOR) private emptyColor: string) {
-    // listen changes onkeyup and update color picker
-    renderer.listen(elementRef.nativeElement, 'keyup', (event: KeyboardEvent) => {
-      const value: string = event.currentTarget['value'];
+  @Input('mccColorPickerOrigin') openMode: 'openOnFocus' | 'default' = 'default';
 
-      if (event.isTrusted && !value) {
-        this.writeValueFromKeyup(this.emptyColor);
-      } else {
-        const color = parseColorString(value);
-        if (event.isTrusted && color) {
-          this.writeValueFromKeyup(value);
-        }
+  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(EMPTY_COLOR) private emptyColor: string) {}
+
+  @HostListener('focus') onFocus() {
+    if (this.openMode === 'openOnFocus') {
+      this.focus.emit();
+    }
+  }
+
+  @HostListener('keyup') onKeyup() {
+    const value: string = this.elementRef.nativeElement.value;
+
+    if (!value) {
+      this.writeValueFromKeyup(this.emptyColor);
+    } else {
+      const color = parseColorString(value);
+      if (color) {
+        this.writeValueFromKeyup(value);
       }
-    });
+    }
   }
 
   /**

src/lib/color-picker/color-picker.component.scss

@@ -5,13 +5,14 @@
   height: 25px;
   cursor: pointer;
   background: none;
+  border-radius: 3px;
   border: 2px solid #dddddd;
 
   &.empty {
     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfAQMAAAAlYIR6AAAABlBMVEX/////EBC8L+WmAAAAJ0lEQVR42mM4wAAED0DEBxBRASJsQIQciOAHEewNQIIZpJCRjgr5AP7LD2UBZrkqAAAAAElFTkSuQmCC') !important;
   }
   &.disabled {
-    opacity: .5;
+    opacity: 0.5;
   }
 }
 
@@ -20,6 +21,7 @@
   width: 270px;
   min-height: 80px;
   position: relative;
+  border-radius: 4px;
   flex-direction: column;
   padding: 0;
   background: #ffffff;
@@ -58,3 +60,12 @@
     flex-grow: 1;
   }
 }
+
+::ng-deep mat-form-field {
+  mcc-color-picker {
+    .btn-picker {
+      margin-right: 4px;
+      margin-left: 4px;
+    }
+  }
+}

src/lib/color-picker/color-picker.component.ts

@@ -197,6 +197,7 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest
 
   set isOpen(value: boolean) {
     this._isOpen = coerceBooleanProperty(value);
+    this.changeDetectorRef.detectChanges();
   }
 
   private _isOpen: boolean = false;