chore: fix merge conflicts

tiaguinho · Mar 8, 2018 · 3b6a7be · 3b6a7be
2 parents 57f2d48 + 7016b26
commit 3b6a7be
Show file tree

Hide file tree

Showing 8 changed files with 708 additions and 1,042 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "material-community-components",
-  "version": "1.2.3",
+  "version": "2.4.3",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -14,45 +14,46 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.4",
-    "@angular/cdk": "^5.2.0",
-    "@angular/common": "^5.2.4",
-    "@angular/compiler": "^5.2.4",
-    "@angular/core": "^5.2.4",
-    "@angular/forms": "^5.2.4",
-    "@angular/material": "^5.2.0",
-    "@angular/platform-browser": "^5.2.4",
-    "@angular/platform-browser-dynamic": "^5.2.4",
+    "@angular/animations": "^5.2.6",
+    "@angular/cdk": "^5.2.2",
+    "@angular/common": "^5.2.6",
+    "@angular/compiler": "^5.2.6",
+    "@angular/core": "^5.2.6",
+    "@angular/forms": "^5.2.6",
+    "@angular/material": "^5.2.2",
+    "@angular/platform-browser": "^5.2.6",
+    "@angular/platform-browser-dynamic": "^5.2.6",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.20"
   },
   "devDependencies": {
     "@angular/router": "^5.2.4",
     "@angular-devkit/core": "0.3.1",
-    "@angular/cli": "1.6.8",
-    "@angular/compiler-cli": "^5.2.4",
-    "@angular/language-service": "^5.2.4",
-    "@types/jasmine": "~2.5.53",
+    "@angular/cli": "1.7.1",
+    "@angular/compiler-cli": "^5.2.6",
+    "@angular/language-service": "^5.2.6",
+    "@types/jasmine": "~2.6.0",
     "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
+    "@types/node": "^8.0.31",
     "codelyzer": "^4.0.1",
     "conventional-changelog": "^1.1.7",
     "cz-conventional-changelog": "^2.1.0",
     "husky": "^0.14.3",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
+    "jasmine-core": "~2.8.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~1.7.1",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "ng-packagr": "^1.6.0",
     "protractor": "~5.1.2",
-    "ts-node": "~3.2.0",
+    "ts-node": "~3.3.0",
     "tslint": "~5.9.1",
     "typescript": "~2.6.2",
+    "uglify-es": "3.3.8",
     "validate-commit-msg": "^2.14.0"
   },
   "config": {
@@ -80,4 +81,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}
diff --git a/src/demo-app/app/color-picker/color-picker.component.html b/src/demo-app/app/color-picker/color-picker.component.html
@@ -5,6 +5,23 @@ <h1 class="page-title">
 <p class="page-subtitle">Some examples of how to use the
   <span>mcc-color-picker</span> component</p>
 
+<!-- WITHOUT OVERLAY -->
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      <span [style.color]="selectedColor">Component without overlay</span>
+    </mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mcc-color-picker [overlay]="false" [usedColorLabel]="'My Colors'" (selected)="selectedColor = $event">
+
+      <mcc-color-picker-collection [colors]="colors"></mcc-color-picker-collection>
+
+    </mcc-color-picker>
+  </mat-card-content>
+</mat-card>
+
 <!-- CHANGE USED COLOR LABEL -->
 <mat-card>
   <mat-card-header>

diff --git a/src/lib/color-picker/color-picker.component.html b/src/lib/color-picker/color-picker.component.html
@@ -1,18 +1,31 @@
-<button type="button" class="btn-picker" cdkOverlayOrigin #trigger="cdkOverlayOrigin" [ngClass]="{ 'empty': selectedColor === 'none' }"
-    [style.background]="selectedColor" (click)="toggle()">
-    <div class="transparent" *ngIf="selectedColor === 'none'"></div>
-</button>
+<!-- color picker overlay -->
+<ng-container *ngIf="overlay">
+    <button type="button" class="btn-picker" cdkOverlayOrigin #trigger="cdkOverlayOrigin" [ngClass]="{ 'empty': selectedColor === 'none' }"
+        [style.background]="selectedColor" (click)="toggle()">
+        <div class="transparent" *ngIf="selectedColor === 'none'"></div>
+    </button>
 
-<ng-template cdkConnectedOverlay hasBackdrop cdkConnectedOverlayBackdropClass="mcc-color-picker-backdrop" [cdkConnectedOverlayOrigin]="trigger"
-    [cdkConnectedOverlayOpen]="isOpen" (backdropClick)="backdropClick()">
+    <ng-template cdkConnectedOverlay hasBackdrop cdkConnectedOverlayBackdropClass="mcc-color-picker-backdrop" [cdkConnectedOverlayOrigin]="trigger"
+        [cdkConnectedOverlayOpen]="isOpen" (backdropClick)="backdropClick()">
+
+        <ng-template [cdkPortalOutlet]="overlayPanel"></ng-template>
+
+    </ng-template>
+</ng-container>
+
+<!-- color picker flat -->
+<ng-template *ngIf="!overlay" [cdkPortalOutlet]="overlayPanel"></ng-template>
+
+<!-- color picker component content -->
+<ng-template cdkPortal #overlayPanel="cdkPortal">
 
     <div class="mcc-color-picker-overlay mat-elevation-z6" role="dialog" aria-label="Color picker">
 
         <mcc-color-picker-selector [selectedColor]="tmpSelectedColor$ | async" (changeSelectedColor)="updateTmpSelectedColor($event)">
         </mcc-color-picker-selector>
 
-        <mcc-color-picker-collection [label]="usedColorLabel" [size]="usedSizeColors" [transparent]="true" [hideEmpty]="hideEmpty"
-            [colors]="usedColors$ | async" (changeColor)="updateTmpSelectedColor($event)">
+        <mcc-color-picker-collection *ngIf="!hideUsedColors" [label]="usedColorLabel" [size]="usedSizeColors" [transparent]="true"
+            [hideEmpty]="hideEmpty" [colors]="usedColors$ | async" (changeColor)="updateTmpSelectedColor($event)">
         </mcc-color-picker-collection>
 
         <ng-content></ng-content>

diff --git a/src/lib/color-picker/color-picker.component.scss b/src/lib/color-picker/color-picker.component.scss
@@ -16,6 +16,7 @@
   display: flex;
   width: 260px;
   min-height: 80px;
+  position: relative;
   flex-direction: column;
   padding: 0;
   background: #ffffff;

diff --git a/src/lib/color-picker/color-picker.component.ts b/src/lib/color-picker/color-picker.component.ts
@@ -70,6 +70,18 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest
   }
   private _hideEmpty: boolean = false;
 
+  /**
+   * Hide UsedColors collection
+   */
+  @Input('hideUsedColors')
+  get hideUsedColors(): boolean {
+    return this._hideUsedColors;
+  }
+  set hideUsedColors(value: boolean) {
+    this._hideUsedColors = coerceBooleanProperty(value);
+  }
+  private _hideUsedColors: boolean = false;
+
   /**
    * Start with a color selected
    */
@@ -98,6 +110,18 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest
   }
   private _isOpen: boolean = false;
 
+  /**
+   * Define if the panel will show in overlay or not
+   */
+  @Input()
+  get overlay(): boolean {
+    return this._overlay;
+  }
+  set overlay(value: boolean) {
+    this._overlay = coerceBooleanProperty(value);
+  }
+  private _overlay: boolean = true;
+
   /**
    * Hide the action buttons (cancel/confirm)
    */
@@ -162,7 +186,7 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest
     private elementRef: ElementRef,
     private changeDetectorRef: ChangeDetectorRef,
     private colorPickerService: MccColorPickerService
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.usedColors$ = this.colorPickerService.getColors();
@@ -201,7 +225,7 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest
    * Update selected color and emit the change
    */
   private _updateSelectedColor() {
-    if (this._isOpen) {
+    if (this._isOpen || !this.overlay) {
       const tmpSelectedColor = this._tmpSelectedColor.getValue();
       if (this._selectedColor !== tmpSelectedColor) {
         this._selectedColor = tmpSelectedColor;

diff --git a/src/lib/color-picker/color-picker.module.ts b/src/lib/color-picker/color-picker.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { PortalModule } from '@angular/cdk/portal';
 import { MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
 
 import { MccColorPickerService } from './color-picker.service';
@@ -18,6 +19,7 @@ import {
 @NgModule({
   imports: [
     CommonModule,
+    PortalModule,
     OverlayModule,
     ReactiveFormsModule,
     MatButtonModule,
@@ -40,4 +42,4 @@ import {
   ],
   providers: [MccColorPickerService],
 })
-export class MccColorPickerModule {}
+export class MccColorPickerModule { }
diff --git a/src/lib/package.json b/src/lib/package.json
@@ -1,7 +1,7 @@
 {
     "$schema": "../node_modules/ng-packagr/package.schema.json",
     "name": "material-community-components",
-    "version": "1.2.3",
+    "version": "2.4.3",
     "ngPackage": {
         "lib": {
             "entryFile": "src/index.ts"
@@ -23,9 +23,13 @@
         "material",
         "color-picker",
         "color",
+        "timer-picker",
+        "timer",
         "ng",
         "ng-color-picker",
         "ngx-color-picker",
+        "ng-timer-picker",
+        "ngx-timer-picker",
         "material-community-components"
     ],
     "dependencies": {