From f04263a206859c9819939678e64568f60ec0b6ba Mon Sep 17 00:00:00 2001 From: Markus Mohoritsch Date: Wed, 30 Sep 2020 18:27:40 +0200 Subject: [PATCH] fix: Component-@Inputs do work with "strictTemplates" set in angularCompilerOptions --- .../speed-dial-examples.component.ts | 13 +-- .../color-picker-collection.component.ts | 13 ++- .../color-picker-origin.directive.ts | 2 +- .../color-picker-selector.component.html | 10 +- .../color-picker-selector.component.ts | 21 ++-- .../color-picker/color-picker.component.ts | 109 +++++++++--------- .../speed-dial/animations.ts | 27 +++-- .../speed-dial/directions.ts | 3 +- .../speed-dial-actions.component.ts | 10 +- .../speed-dial/speed-dial.component.ts | 23 ++-- .../timer-picker/timer-picker.component.ts | 7 +- tsconfig.base.json | 4 +- 12 files changed, 129 insertions(+), 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 index e7ae0d84..7c54687e 100644 --- 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 index a046c6bb..e0783488 100644 --- 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 index 48b076d8..a4d02293 100644 --- 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 index 2b22b44d..47d76316 100644 --- 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 @@ -
-
- +
+
+
@@ -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;" > 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 index e403af5f..a3b3f73b 100644 --- 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); } diff --git a/projects/material-community-components/color-picker/color-picker.component.ts b/projects/material-community-components/color-picker/color-picker.component.ts index b1049923..c8a1bb49 100644 --- a/projects/material-community-components/color-picker/color-picker.component.ts +++ b/projects/material-community-components/color-picker/color-picker.component.ts @@ -47,15 +47,14 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest * Disable color-picker of showing up */ @Input() - get disabled(): boolean { - return this._disabled; - } - set disabled(disabled: boolean) { this._disabled = coerceBooleanProperty(disabled); } - + get disabled(): boolean { + return this._disabled; + } private _disabled: boolean = false; + static ngAcceptInputType_disabled: boolean | string; /** * Change label of the collection UsedColors @@ -90,78 +89,75 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest set reverseUsedColors(reverse: boolean) { this._reverseUsedColor = coerceBooleanProperty(reverse); } - + get reverseUsedColors(): boolean { + return this._reverseUsedColor; + } private _reverseUsedColor: boolean = false; + static ngAcceptInputType_reverseUsedColors: boolean | string; /** * Set position of used colors collection */ @Input() - get usedColorsPosition(): MccColorPickerUsedColorPosition { - return this._usedColorsPosition; - } - set usedColorsPosition(position: MccColorPickerUsedColorPosition) { this._usedColorsPosition = position; } - + get usedColorsPosition(): MccColorPickerUsedColorPosition { + return this._usedColorsPosition; + } private _usedColorsPosition: MccColorPickerUsedColorPosition = 'top'; /** * Hide the hexadecimal color forms. */ - @Input('hideHexForms') - get hideHexForms(): boolean { - return this._hideHexForms; - } - + @Input() set hideHexForms(value: boolean) { this._hideHexForms = coerceBooleanProperty(value); } - + get hideHexForms(): boolean { + return this._hideHexForms; + } private _hideHexForms: boolean = false; + static ngAcceptInputType_hideHexForms: boolean | string; /** * Hide empty slots from the collection UsedColors */ @Input('hideEmptyUsedColors') - get hideEmpty(): boolean { - return this._hideEmpty; - } - set hideEmpty(value: boolean) { this._hideEmpty = coerceBooleanProperty(value); } - + get hideEmpty(): boolean { + return this._hideEmpty; + } private _hideEmpty: boolean = false; + static ngAcceptInputType_hideEmpty: boolean | string; /** * Hide transparent option of UsedColors */ @Input('hideTransparentUsedColors') - get hideTransparent(): boolean { - return this._hideTransparent; - } - set hideTransparent(value: boolean) { this._hideTransparent = coerceBooleanProperty(value); } - + get hideTransparent(): boolean { + return this._hideTransparent; + } private _hideTransparent: boolean = false; + static ngAcceptInputType_hideTransparent: boolean | string; /** * Hide UsedColors collection */ @Input('hideUsedColors') - get hideUsedColors(): boolean { - return this._hideUsedColors; - } - set hideUsedColors(value: boolean) { this._hideUsedColors = coerceBooleanProperty(value); } - + get hideUsedColors(): boolean { + return this._hideUsedColors; + } private _hideUsedColors: boolean = false; + static ngAcceptInputType_hideUsedColors: boolean | string; /** * Start with a color selected @@ -191,77 +187,74 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest * Define if the panel will be initiated open */ @Input() - get isOpen(): boolean { - return this._isOpen; - } - set isOpen(value: boolean) { this._isOpen = coerceBooleanProperty(value); this.changeDetectorRef.detectChanges(); } - + get isOpen(): boolean { + return this._isOpen; + } private _isOpen: boolean = false; + static ngAcceptInputType_isOpen: boolean | string; /** * 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); } - + get overlay(): boolean { + return this._overlay; + } private _overlay: boolean = true; + static ngAcceptInputType_overlay: boolean | string; /** * Hide the action buttons (cancel/confirm) */ @Input() - get hideButtons(): boolean { - return this._hideButtons; - } - set hideButtons(value: boolean) { this._hideButtons = coerceBooleanProperty(value); } - + get hideButtons(): boolean { + return this._hideButtons; + } private _hideButtons: boolean = false; + static ngAcceptInputType_hideButtons: boolean | string; /** * Define new height for the selector */ @Input() - get colorPickerSelectorHeight(): number { - return this._colorPickerSelectorHeight; - } - set colorPickerSelectorHeight(height: number) { this._colorPickerSelectorHeight = height; } - + get colorPickerSelectorHeight(): number { + return this._colorPickerSelectorHeight; + } private _colorPickerSelectorHeight: number = 170; + static ngAcceptInputType_colorPickerSelectorHeight: number | string; /** * Hide the color picker selector */ @Input() - get hideColorPickerSelector(): boolean { - return this._hideColorPickerSelector; - } - set hideColorPickerSelector(value: boolean) { this._hideColorPickerSelector = coerceBooleanProperty(value); } + get hideColorPickerSelector(): boolean { + return this._hideColorPickerSelector; + } private _hideColorPickerSelector: boolean = false; + static ngAcceptInputType_hideColorPickerSelector: boolean | string; /** * Set the size of the used colors */ @Input() usedSizeColors: number = 30; + static ngAcceptInputType_usedSizeColors: number | string; /** * Change btnCancel label @@ -276,13 +269,15 @@ export class MccColorPickerComponent implements AfterContentInit, OnInit, OnDest /** * Show alpha selector */ - @Input('alpha') set alpha(value: boolean) { + @Input() + set alpha(value: boolean) { this._alpha = coerceBooleanProperty(value); } get alpha(): boolean { return this._alpha; } private _alpha: boolean = false; + static ngAcceptInputType_alpha: boolean | string; /** * Choose color string format diff --git a/projects/material-community-components/speed-dial/animations.ts b/projects/material-community-components/speed-dial/animations.ts index 95880f4c..648f1db2 100644 --- a/projects/material-community-components/speed-dial/animations.ts +++ b/projects/material-community-components/speed-dial/animations.ts @@ -3,10 +3,11 @@ import { animate, state, style, transition, trigger } from '@angular/animations' /** * Types of animation to be executed by speed-dial-actions */ -export type ANIMATION = 'fling' | 'scale'; +export type MccSpeedDialAnimation = 'fling' | 'scale'; +export type ANIMATION = MccSpeedDialAnimation; // kept type for backwards-compatibility /** - * Default value of action button z-index + * Default value of action button z-index */ export const Z_INDEX = 23; @@ -14,12 +15,18 @@ export const Z_INDEX = 23; * SPIN animation used on speed-dial */ export const SPIN_ANIMATION = trigger('spin', [ - state('open', style({ - transform: 'rotate(360deg)', - })), - state('closed', style({ - transform: 'rotate(0deg)', - })), + state( + 'open', + style({ + transform: 'rotate(360deg)' + }) + ), + state( + 'closed', + style({ + transform: 'rotate(0deg)' + }) + ), transition('open => closed', [animate('.3s')]), - transition('closed => open', [animate('.3s')]), -]); \ No newline at end of file + transition('closed => open', [animate('.3s')]) +]); diff --git a/projects/material-community-components/speed-dial/directions.ts b/projects/material-community-components/speed-dial/directions.ts index 56a71bb3..1174db8f 100644 --- a/projects/material-community-components/speed-dial/directions.ts +++ b/projects/material-community-components/speed-dial/directions.ts @@ -1,4 +1,5 @@ /** * Possible direction to speed dial animation */ -export type DIRECTION = 'up' | 'down' | 'left' | 'right'; +export type MccSpeedDialDirection = 'up' | 'down' | 'left' | 'right'; +export type DIRECTION = MccSpeedDialDirection; // kept type for backwards-compatibility diff --git a/projects/material-community-components/speed-dial/speed-dial-actions.component.ts b/projects/material-community-components/speed-dial/speed-dial-actions.component.ts index a23cd03a..a8c356c4 100644 --- a/projects/material-community-components/speed-dial/speed-dial-actions.component.ts +++ b/projects/material-community-components/speed-dial/speed-dial-actions.component.ts @@ -1,7 +1,7 @@ import { AfterContentInit, Component, ContentChildren, Input, QueryList, Renderer2, ViewEncapsulation } from '@angular/core'; import { MatButton } from '@angular/material/button'; import { BehaviorSubject } from 'rxjs'; -import { ANIMATION, Z_INDEX } from './animations'; +import { ANIMATION, MccSpeedDialAnimation, Z_INDEX } from './animations'; import { DIRECTION } from './directions'; @Component({ @@ -20,10 +20,10 @@ export class MccSpeedDialActionsComponent implements AfterContentInit { * Set type of animation will be executed on open/close * Type available are: scale | fling */ - @Input() set animation(animation: ANIMATION) { + @Input() set animation(animation: MccSpeedDialAnimation) { this._animation.next(animation); } - private _animation: BehaviorSubject = new BehaviorSubject('scale'); + private _animation: BehaviorSubject = new BehaviorSubject('scale'); /** * Last animation the was used @@ -59,7 +59,7 @@ export class MccSpeedDialActionsComponent implements AfterContentInit { /** * Responsible for change the state of the action buttons to visible - * + * * @param direction DIRECTION */ show(direction: DIRECTION) { @@ -90,7 +90,7 @@ export class MccSpeedDialActionsComponent implements AfterContentInit { /** * Hide all the buttons action - * + * * @param direction DIRECTION */ hide(direction: DIRECTION) { diff --git a/projects/material-community-components/speed-dial/speed-dial.component.ts b/projects/material-community-components/speed-dial/speed-dial.component.ts index 989cb06f..c5377139 100644 --- a/projects/material-community-components/speed-dial/speed-dial.component.ts +++ b/projects/material-community-components/speed-dial/speed-dial.component.ts @@ -1,14 +1,14 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { AfterViewInit, Component, ContentChild, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { SPIN_ANIMATION } from './animations'; -import { DIRECTION } from './directions'; +import { DIRECTION, MccSpeedDialDirection } from './directions'; import { MccSpeedDialActionsComponent } from './speed-dial-actions.component'; @Component({ selector: 'mcc-speed-dial', templateUrl: './speed-dial.component.html', styleUrls: ['./speed-dial.component.scss'], - animations: [SPIN_ANIMATION], + animations: [SPIN_ANIMATION] }) export class MccSpeedDialComponent implements AfterViewInit, OnChanges { /** @@ -26,44 +26,49 @@ export class MccSpeedDialComponent implements AfterViewInit, OnChanges { return this._isOpen; } private _isOpen: boolean = false; + static ngAcceptInputType_isOpen: boolean | string; /** * When enabled, handle open/close state on mouse hover */ - @Input('mouseHover') set hover(hover: boolean) { + @Input('mouseHover') + set hover(hover: boolean) { this._hover = coerceBooleanProperty(hover); } private _hover: boolean = false; + static ngAcceptInputType_hover: boolean | string; /** * Enable/disable spin animation when button is clicked or hovered */ @Input() set spin(spin: boolean) { - this._spin = spin; + this._spin = coerceBooleanProperty(spin); } get spin() { return this._spin; } private _spin: boolean = true; + static ngAcceptInputType_spin: boolean | string; /** * Define the direction of the actions button * Directions available are: up | down | left | right */ - @Input() set direction(direction: DIRECTION) { + @Input() + set direction(direction: MccSpeedDialDirection) { this._direction = direction; } - get direction(): DIRECTION { + get direction(): MccSpeedDialDirection { return this._direction; } - private _direction: DIRECTION = 'up'; + private _direction: MccSpeedDialDirection = 'up'; /** * Event emitted when open state change */ @Output() openStateChange: EventEmitter = new EventEmitter(); - constructor() { } + constructor() {} /** * Call fab speed dial actions functions to change the @@ -85,7 +90,7 @@ export class MccSpeedDialComponent implements AfterViewInit, OnChanges { } /** - * + * */ ngOnChanges(changes: SimpleChanges) { if ('isOpen' in changes && changes['isOpen'].previousValue !== undefined) { diff --git a/projects/material-community-components/timer-picker/timer-picker.component.ts b/projects/material-community-components/timer-picker/timer-picker.component.ts index d03b0ba2..8a37bebb 100644 --- a/projects/material-community-components/timer-picker/timer-picker.component.ts +++ b/projects/material-community-components/timer-picker/timer-picker.component.ts @@ -114,13 +114,14 @@ export class MccTimerPickerComponent { * Hide Confirm and Cancel buttons */ @Input() - get hideButtons(): boolean { - return this._hideButtons; - } set hideButtons(value: boolean) { this._hideButtons = coerceBooleanProperty(value); } + get hideButtons(): boolean { + return this._hideButtons; + } private _hideButtons: boolean = false; + static ngAcceptInputType_hideButtons: boolean | string; /** * Format of the hour to be emited on confirm diff --git a/tsconfig.base.json b/tsconfig.base.json index 6033744e..09378f2c 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -36,6 +36,8 @@ } }, "angularCompilerOptions": { - "fullTemplateTypeCheck": true + "fullTemplateTypeCheck": true, + "strictInjectionParameters": true, + "strictTemplates": true } }