fix: Component-@inputs do work with "strictTemplates" set in angularC…

…ompilerOptions
tiaguinho · Oct 6, 2020 · f04263a · f04263a
1 parent 1eae022
commit f04263a
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 113 deletions.
diff --git a/projects/demo/src/app/speed-dial/components/speed-dial-examples.component.ts b/projects/demo/src/app/speed-dial/components/speed-dial-examples.component.ts
@@ -1,22 +1,23 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { DIRECTION, MccSpeedDialDirection } from '../../../../../material-community-components/speed-dial/directions';
+import { ANIMATION, MccSpeedDialAnimation } from '../../../../../material-community-components/speed-dial/animations';
 
 @Component({
   selector: 'app-speed-dial-examples',
   templateUrl: './speed-dial-examples.component.html',
   styleUrls: ['./speed-dial-examples.component.scss'],
   preserveWhitespaces: false,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SpeedDialExamplesComponent implements OnInit {
-
   directions: string[] = ['up', 'down', 'left', 'right'];
 
   animations: string[] = ['scale', 'fling'];
 
   form: FormGroup;
 
-  get direction(): string {
+  get direction(): MccSpeedDialDirection {
     return this.form.get('direction').value;
   }
 
@@ -32,11 +33,11 @@ export class SpeedDialExamplesComponent implements OnInit {
     return this.form.get('mouse_hover').value;
   }
 
-  get animation(): string {
+  get animation(): MccSpeedDialAnimation {
     return this.form.get('animation').value;
   }
 
-  constructor(private fb: FormBuilder) { }
+  constructor(private fb: FormBuilder) {}
 
   ngOnInit() {
     this.form = this.fb.group({
@@ -47,6 +48,4 @@ export class SpeedDialExamplesComponent implements OnInit {
       animation: ['scale']
     });
   }
-
 }
-
diff --git a/projects/material-community-components/color-picker/color-picker-collection.component.ts b/projects/material-community-components/color-picker/color-picker-collection.component.ts
@@ -30,8 +30,8 @@ export class MccColorPickerCollectionComponent implements OnInit, AfterContentCh
   set hideEmpty(value: boolean) {
     this._hideEmpty = coerceBooleanProperty(value);
   }
-
   private _hideEmpty: boolean = false;
+  static ngAcceptInputType_hideEmpty: boolean | string;
 
   /**
    * Name of the collection
@@ -81,11 +81,20 @@ export class MccColorPickerCollectionComponent implements OnInit, AfterContentCh
    * Size limit of the collection
    */
   @Input() size: number = 30;
+  static ngAcceptInputType_size: number | string;
 
   /**
    * Show transparent option
    */
-  @Input() transparent: boolean = false;
+  @Input()
+  set transparent(value: boolean) {
+    this._transparent = coerceBooleanProperty(value);
+  }
+  get transparent(): boolean {
+    return this._transparent;
+  }
+  private _transparent: boolean = false;
+  static ngAcceptInputType_transparent: boolean | string;
 
   /**
    * Emit selected color value

diff --git a/projects/material-community-components/color-picker/color-picker-origin.directive.ts b/projects/material-community-components/color-picker/color-picker-origin.directive.ts
@@ -37,7 +37,7 @@ export class MccColorPickerOriginDirective implements ControlValueAccessor {
   /**
    * Controls if focus of the input opens the color picker dialog
    */
-  @Input('mccColorPickerOrigin') openMode: 'openOnFocus' | 'default' = 'default';
+  @Input('mccColorPickerOrigin') openMode: 'openOnFocus' | 'default' | '' = 'default';
 
   constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(EMPTY_COLOR) private emptyColor: string) {}
 

diff --git a/projects/material-community-components/color-picker/color-picker-selector.component.html b/projects/material-community-components/color-picker/color-picker-selector.component.html
@@ -1,12 +1,12 @@
-<div class="mcc-color-picker-selector" [ngStyle]="{ 'height.px': selectorHeight }">
-  <div #block class="mcc-picker-selector" [style.height.px]="selectorHeight" [style.width.px]="selectorWidth"></div>
-  <canvas #blockCanvas [height]="selectorHeight" [width]="selectorWidth" id="picker"></canvas>
+<div class="mcc-color-picker-selector" [ngStyle]="{ 'height.px': height }">
+  <div #block class="mcc-picker-selector" [style.height.px]="height" [style.width.px]="selectorWidth"></div>
+  <canvas #blockCanvas [height]="height" [width]="selectorWidth" id="picker"></canvas>
   <div #blockPointer class="mcc-picker-position" style="top: 0; left: 0;"></div>
 
   <div
     #hueContainer
     class="mcc-colors-position"
-    [style.height.px]="selectorHeight"
+    [style.height.px]="height"
     [ngClass]="{ 'alpha-enabled': colorPickerCollectionService.alpha }"
     style="background-position-y: 0;"
   >
@@ -17,7 +17,7 @@
     *ngIf="colorPickerCollectionService.alpha"
     #alphaContainer
     class="mcc-alpha-position"
-    [style.height.px]="selectorHeight"
+    [style.height.px]="height"
     style="background-position-y: 0;"
   >
     <canvas #alpha [height]="stripHeight" [width]="stripWidth" id="alpha" class="mcc-alpha-background"></canvas>

diff --git a/projects/material-community-components/color-picker/color-picker-selector.component.ts b/projects/material-community-components/color-picker/color-picker-selector.component.ts
@@ -87,21 +87,20 @@ export class MccColorPickerSelectorComponent implements AfterViewInit, OnInit, O
   /**
    * Change height base of the selector
    */
-  @Input('height')
+  @Input()
   set height(value: number) {
     this._height = value;
   }
-
-  get selectorHeight(): number {
+  get height(): number {
     return this._height;
   }
+  private _height: number = 170;
+  static ngAcceptInputType_height: number | string;
 
   get stripHeight(): number {
     return this._height - 10;
   }
 
-  private _height: number = 170;
-
   /**
    * Receive selected color from the component
    */
@@ -125,15 +124,13 @@ export class MccColorPickerSelectorComponent implements AfterViewInit, OnInit, O
   /**
    * Hide the hexadecimal color forms.
    */
-  @Input('hideHexForms')
-  get hideHexForms(): boolean {
-    return this._hideHexForms;
-  }
-
+  @Input()
   set hideHexForms(value: boolean) {
     this._hideHexForms = value;
   }
-
+  get hideHexForms(): boolean {
+    return this._hideHexForms;
+  }
   private _hideHexForms: boolean = false;
 
   /**
@@ -292,7 +289,7 @@ export class MccColorPickerSelectorComponent implements AfterViewInit, OnInit, O
         this._updateHexForm(color);
         this._updateRGBAForm(color);
         this.setSelectorPositions(color);
-          this._drawBlockSelector(color);
+        this._drawBlockSelector(color);
         if (this.colorPickerCollectionService.alpha) {
           this._drawAlphaSelector(color);
         }