feat(color-picker, time-picker): round corners, @HostListeners, openOnFocus for mccColorPickerOrigin, examples, time picker fixes

package.json

@@ -19,28 +19,28 @@
     "core-js": "^3.6.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.5",
-    "@angular-devkit/core": "^10.0.5",
-    "@angular/animations": "^10.0.8",
-    "@angular/cdk": "^10.1.2",
-    "@angular/cli": "^10.0.5",
-    "@angular/common": "^10.0.8",
-    "@angular/compiler": "^10.0.8",
-    "@angular/compiler-cli": "^10.0.8",
-    "@angular/core": "^10.0.8",
-    "@angular/forms": "^10.0.8",
-    "@angular/language-service": "^10.0.8",
-    "@angular/material": "^10.1.2",
-    "@angular/platform-browser": "^10.0.8",
-    "@angular/platform-browser-dynamic": "^10.0.8",
-    "@angular/router": "^10.0.8",
+    "@angular-devkit/build-angular": "~0.1000.6",
+    "@angular-devkit/core": "^10.0.6",
+    "@angular/animations": "^10.0.9",
+    "@angular/cdk": "^10.1.3",
+    "@angular/cli": "^10.0.6",
+    "@angular/common": "^10.0.9",
+    "@angular/compiler": "^10.0.9",
+    "@angular/compiler-cli": "^10.0.9",
+    "@angular/core": "^10.0.9",
+    "@angular/forms": "^10.0.9",
+    "@angular/language-service": "^10.0.9",
+    "@angular/material": "^10.1.3",
+    "@angular/platform-browser": "^10.0.9",
+    "@angular/platform-browser-dynamic": "^10.0.9",
+    "@angular/router": "^10.0.9",
     "@types/jasmine": "^3.5.12",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^14.0.27",
     "@types/tinycolor2": "^1.4.2",
     "angular-cli-ghpages": "^0.6.2",
     "codelyzer": "^6.0.0",
-    "conventional-changelog": "^3.1.21",
+    "conventional-changelog": "^3.1.23",
     "core-js": "^3.6.4",
     "coveralls": "^3.1.0",
     "cz-conventional-changelog": "^3.2.0",
@@ -50,9 +50,9 @@
     "karma": "~5.1.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~3.3.1",
+    "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
-    "ng-packagr": "^10.0.3",
+    "ng-packagr": "^10.0.4",
     "protractor": "~7.0.0",
     "rxjs": "^6.6.2",
     "ts-node": "~8.10.2",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "scss-bundle": "^3.1.2",
-    "tslib": "^2.0.0",
+    "tslib": "^2.0.1",
     "@thebespokepixel/es-tinycolor": "^2.1.1"
   },
   "husky": {

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,
@@ -28,7 +29,8 @@ import { MccColorPickerModule } from '../../../lib/color-picker/public_api';
     MatInputModule,
     MatTabsModule,
     MccColorPickerModule.forRoot({
-      used_colors: ['#000000', '#123456', '#777666']
+      used_colors: ['#000000', '#123456', '#777666'],
+      empty_color: ''
     })
   ],
   declarations: [ColorPickerComponent, ColorPickerApiComponent, ColorPickerExamplesComponent]

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)]="color7" />
+    </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)]="color8" />
+      <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,16 @@ export class ColorPickerExamplesComponent implements OnInit {
   rgbForm: FormGroup;
   hslForm: FormGroup;
   rgbaForm: FormGroup;
+  rgbaRequiredForm: FormGroup;
+
+  color5: string = null;
+  color6: string = '#F4F';
+  color7: string = 'blue';
+  color8: string = 'rgba(200,40,30,0.9)';
 
   disabled = false;
 
+
   // last line will not be show in used colors because they are invalid values
   usedStart: string[] = [
     '#FF3380',
@@ -117,6 +124,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 +137,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-collection.component.scss

@@ -3,9 +3,8 @@
   padding: 10px 18px;
 
   h3 {
-    color: #100214;
+    color: rgba(0,0,0,0.87);
     text-transform: uppercase;
-    font-family: 'Open Sans', sans-serif;
     font-size: 12px;
     font-weight: 700;
     margin: 0 0 10px 0;
@@ -33,8 +32,8 @@ button {
 
   mat-icon {
     &.black {
-      color: #100214 !important;
-      fill: #100214 !important;
+      color: rgba(0,0,0,0.87) !important;
+      fill: rgba(0,0,0,0.87) !important;
     }
     &.white {
       color: #ffffff !important;
@@ -43,9 +42,9 @@ button {
   }
 
   &.black {
-    color: #100214 !important;
+    color:  rgba(0,0,0,0.87)  !important;
    mat-icon {
-      color: #100214 !important;
+      color:  rgba(0,0,0,0.87)  !important;
     }
   }
   &.white {

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.hasFocus.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));