fix: support strict template check (#2273)

BREAKING CHANGE:
Generic value type removed from NbSelectComponent

docs/app/blocks/components/components-overview-block/components-overview-block.component.html

@@ -6,8 +6,8 @@ <h2 class="h4 page-heading">Components Overview</h2>
 
 <div class="components-list">
   <ng-container *ngFor="let component of components">
-    <h3 *ngIf="component.group" class="group-title h4">{{ component.name }}</h3>
-    <div *ngIf="!component.group" class="component-card-wrapper">
+    <h3 *ngIf="$any(component).group" class="group-title h4">{{ component.name }}</h3>
+    <div *ngIf="!$any(component).group" class="component-card-wrapper">
       <a class="component-navigate-link" [routerLink]="component.link">
         <nb-card [attr.title]="component.name">
           <nb-card-body>

docs/app/blocks/components/live-example-block/live-example-block.component.html

@@ -3,7 +3,7 @@
   <div class="actions">
 
     <div class="action-selector">
-      <select class="action-item" [(ngModel)]="currentTheme"  (change)="switchTheme($event.target.value)">
+      <select class="action-item" [(ngModel)]="currentTheme"  (change)="switchTheme($any($event.target).value)">
         <option *ngFor="let theme of themes" [value]="theme.value">{{theme.label}}</option>
       </select>
       <nb-icon icon="color-palette-outline"></nb-icon>

docs/app/blocks/components/md-block/md-block.component.ts

@@ -9,9 +9,9 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 @Component({
   selector: 'ngd-md-block',
   template: `
-    <nb-card *ngFor="let section of source;" [ngdFragment]="section.fragment">
+    <nb-card *ngFor="let section of source;" [ngdFragment]="$any(section).fragment">
       <nb-card-body>
-        <div [innerHtml]="section.html"></div>
+        <div [innerHtml]="$any(section).html"></div>
       </nb-card-body>
     </nb-card>
   `,

docs/app/blocks/components/stacked-example-block/stacked-examples.component.ts

@@ -23,14 +23,14 @@ export const pulse = animation(
       <ngd-live-example-block [hidden]="!isLive"
                               [@exampleState]="isLive ? 'live': 'code'"
                               [content]="content"
-                              hasViewSwitch="true"
+                              [hasViewSwitch]="true"
                               (changeView)="changeView($event)">
       </ngd-live-example-block>
 
       <ngd-tabbed-example-block [hidden]="isLive"
                                 [@exampleState]="isLive ? 'live': 'code'"
                                 [content]="content"
-                                hasViewSwitch="true"
+                                [hasViewSwitch]="true"
                                 (changeView)="changeView($event)">
       </ngd-tabbed-example-block>
     </div>

src/app/components-list/components-list.component.ts

@@ -51,6 +51,7 @@ export class ComponentsListComponent implements AfterViewInit {
   get vertical() {
     return this.isVertical;
   }
+  static ngAcceptInputType_vertical: boolean | string | null | undefined;
 
   @ViewChildren(RouterLinkActive) routerLinks: QueryList<RouterLinkActive>;
   @ViewChildren('link', { read: ElementRef }) linkElements: QueryList<ElementRef<HTMLAnchorElement>>;

src/framework/theme/components/accordion/accordion-item.component.ts

@@ -22,7 +22,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NbAccordionComponent } from './accordion.component';
-import { convertToBoolProperty } from '../helpers';
+import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 
 /**
  * Component intended to be used within `<nb-accordion>` component
@@ -52,6 +52,7 @@ export class NbAccordionItemComponent implements OnInit, OnChanges, OnDestroy {
     this.collapsedChange.emit(this.collapsedValue);
     this.invalidate();
   }
+  static ngAcceptInputType_collapsed: NbBooleanInput;
 
   /**
    * Item is expanded (`false` by default)
@@ -65,6 +66,7 @@ export class NbAccordionItemComponent implements OnInit, OnChanges, OnDestroy {
   set expanded(val: boolean) {
     this.collapsedValue = !convertToBoolProperty(val);
   }
+  static ngAcceptInputType_expanded: NbBooleanInput;
 
   /**
    * Item is disabled and cannot be opened.
@@ -79,6 +81,7 @@ export class NbAccordionItemComponent implements OnInit, OnChanges, OnDestroy {
     this.disabledValue = convertToBoolProperty(val);
     this.invalidate();
   }
+  static ngAcceptInputType_disabled: NbBooleanInput;
 
   /**
    * Emits whenever the expanded state of the accordion changes.

src/framework/theme/components/accordion/accordion.component.ts

@@ -6,7 +6,7 @@
 
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { Subject } from 'rxjs';
-import { convertToBoolProperty } from '../helpers';
+import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 
 /**
  * An accordion allows to toggle the display of sections of content
@@ -87,6 +87,7 @@ export class NbAccordionComponent {
   set multi(val: boolean) {
     this.multiValue = convertToBoolProperty(val);
   }
+  static ngAcceptInputType_multi: NbBooleanInput;
 
   private multiValue = false;
 

src/framework/theme/components/actions/actions.component.ts

@@ -6,7 +6,7 @@
 
 import { Component, HostBinding, Input } from '@angular/core';
 
-import { convertToBoolProperty } from '../helpers';
+import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NbComponentSize } from '../component-size';
 import { NbComponentStatus } from '../component-status';
 import { NbBadgePosition } from '../badge/badge.component';
@@ -91,6 +91,7 @@ export class NbActionComponent {
     this._disabled = convertToBoolProperty(value);
   }
   protected _disabled: boolean = false;
+  static ngAcceptInputType_disabled: NbBooleanInput;
 
   /**
    * Badge text to display
@@ -220,6 +221,7 @@ export class NbActionsComponent {
     this._fullWidth = convertToBoolProperty(value);
   }
   protected _fullWidth: boolean = false;
+  static ngAcceptInputType_fullWidth: NbBooleanInput;
 
   @HostBinding('class.size-tiny')
   get tiny(): boolean {

src/framework/theme/components/alert/alert.component.ts

@@ -8,7 +8,7 @@ import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/co
 
 import { NbComponentSize } from '../component-size';
 import { NbComponentStatus } from '../component-status';
-import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
+import { convertToBoolProperty, emptyStatusWarning, NbBooleanInput } from '../helpers';
 
 
 /**
@@ -169,6 +169,7 @@ export class NbAlertComponent {
     this._closable = convertToBoolProperty(value);
   }
   protected _closable: boolean = false;
+  static ngAcceptInputType_closable: NbBooleanInput;
 
   /**
    * Emits when chip is removed

src/framework/theme/components/autocomplete/autocomplete.directive.ts

@@ -202,7 +202,7 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
   }
 
   @HostListener('input')
-  protected handleInput() {
+  handleInput() {
     const currentValue = this.hostRef.nativeElement.value;
     this._onChange(currentValue);
     this.setHostInputValue(this.getDisplayValue(currentValue));
@@ -211,12 +211,12 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
 
   @HostListener('keydown.arrowDown')
   @HostListener('keydown.arrowUp')
-  protected handleKeydown() {
+  handleKeydown() {
     this.show();
   }
 
   @HostListener('blur')
-  protected handleBlur() {
+  handleBlur() {
     this._onTouched();
   }
 

src/framework/theme/components/button/button.component.ts

@@ -20,7 +20,7 @@ import {
 import { NbComponentStatus } from '../component-status';
 import { NbComponentShape } from '../component-shape';
 import { NbComponentSize } from '../component-size';
-import { convertToBoolProperty, firstChildNotComment, lastChildNotComment } from '../helpers';
+import { convertToBoolProperty, firstChildNotComment, lastChildNotComment, NbBooleanInput } from '../helpers';
 
 export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
 
@@ -573,6 +573,7 @@ export class NbButtonComponent implements AfterViewInit {
       this.appearance = 'filled';
     }
   }
+  static ngAcceptInputType_filled: NbBooleanInput;
 
   /**
    * Sets `outline` appearance
@@ -587,6 +588,7 @@ export class NbButtonComponent implements AfterViewInit {
       this.appearance = 'outline';
     }
   }
+  static ngAcceptInputType_outline: NbBooleanInput;
 
   /**
    * Sets `ghost` appearance
@@ -601,6 +603,7 @@ export class NbButtonComponent implements AfterViewInit {
       this.appearance = 'ghost';
     }
   }
+  static ngAcceptInputType_ghost: NbBooleanInput;
 
   /**
    * Sets `hero` appearance
@@ -615,6 +618,7 @@ export class NbButtonComponent implements AfterViewInit {
       this.appearance = 'hero';
     }
   }
+  static ngAcceptInputType_hero: NbBooleanInput;
 
   /**
    * If set element will fill its container
@@ -628,6 +632,7 @@ export class NbButtonComponent implements AfterViewInit {
     this._fullWidth = convertToBoolProperty(value);
   }
   private _fullWidth = false;
+  static ngAcceptInputType_fullWidth: NbBooleanInput;
 
   /**
    * Disables the button
@@ -643,6 +648,7 @@ export class NbButtonComponent implements AfterViewInit {
     this.renderer.setProperty(this.hostElement.nativeElement, 'disabled', this.disabled);
   }
   private _disabled: boolean = false;
+  static ngAcceptInputType_disabled: NbBooleanInput;
 
   // issue #794
   @HostBinding('attr.tabindex')

src/framework/theme/components/calendar-kit/components/calendar-day-picker/calendar-day-cell.component.ts

@@ -14,7 +14,7 @@ import {
   Output,
 } from '@angular/core';
 
-import { NbCalendarCell, NbCalendarSize } from '../../model';
+import { NbCalendarCell, NbCalendarSize, NbCalendarSizeValues } from '../../model';
 import { NbDateService } from '../../services/date.service';
 
 
@@ -42,6 +42,7 @@ export class NbCalendarDayCellComponent<D> implements NbCalendarCell<D, D> {
   @Input() filter: (D) => boolean;
 
   @Input() size: NbCalendarSize = NbCalendarSize.MEDIUM;
+  static ngAcceptInputType_size: NbCalendarSizeValues;
 
   @Output() select: EventEmitter<D> = new EventEmitter(true);
 

src/framework/theme/components/calendar-kit/components/calendar-day-picker/calendar-day-picker.component.ts

@@ -18,8 +18,8 @@ import {
 
 import { NbCalendarMonthModelService } from '../../services/calendar-month-model.service';
 import { NbCalendarDayCellComponent } from './calendar-day-cell.component';
-import { NbCalendarCell, NbCalendarSize } from '../../model';
-import { convertToBoolProperty } from '../../../helpers';
+import { NbCalendarCell, NbCalendarSize, NbCalendarSizeValues } from '../../model';
+import { convertToBoolProperty, NbBooleanInput } from '../../../helpers';
 
 
 /**
@@ -95,6 +95,7 @@ export class NbCalendarDayPickerComponent<D, T> implements OnChanges {
    * Can be 'medium' which is default or 'large'.
    * */
   @Input() size: NbCalendarSize = NbCalendarSize.MEDIUM;
+  static ngAcceptInputType_size: NbCalendarSizeValues;
 
   /**
    * Already selected date.
@@ -113,6 +114,7 @@ export class NbCalendarDayPickerComponent<D, T> implements OnChanges {
     this._showWeekNumber = convertToBoolProperty(value);
   }
   protected _showWeekNumber: boolean = false;
+  static ngAcceptInputType_showWeekNumber: NbBooleanInput;
 
   /**
    * Sets symbol used as a header for week numbers column

src/framework/theme/components/calendar-kit/components/calendar-days-names/calendar-days-names.component.ts

@@ -6,7 +6,7 @@
 
 import { ChangeDetectionStrategy, Component, OnInit, Input, HostBinding } from '@angular/core';
 
-import { NbCalendarDay, NbCalendarSize } from '../../model';
+import { NbCalendarDay, NbCalendarSize, NbCalendarSizeValues } from '../../model';
 import { NbDateService } from '../../services/date.service';
 
 
@@ -23,6 +23,7 @@ export class NbCalendarDaysNamesComponent<D> implements OnInit {
   days: NbCalendarDay[];
 
   @Input() size: NbCalendarSize;
+  static ngAcceptInputType_size: NbCalendarSizeValues;
 
   @HostBinding('class.size-large')
   get isLarge(): boolean {

src/framework/theme/components/calendar-kit/components/calendar-month-picker/calendar-month-cell.component.ts

@@ -13,7 +13,7 @@ import {
   Input,
   Output,
 } from '@angular/core';
-import { NbCalendarCell, NbCalendarSize } from '../../model';
+import { NbCalendarCell, NbCalendarSize, NbCalendarSizeValues } from '../../model';
 import { NbDateService } from '../../services/date.service';
 
 
@@ -36,6 +36,7 @@ export class NbCalendarMonthCellComponent<D> implements NbCalendarCell<D, D> {
   @Input() max: D;
 
   @Input() size: NbCalendarSize = NbCalendarSize.MEDIUM;
+  static ngAcceptInputType_size: NbCalendarSizeValues;
 
   @Output() select: EventEmitter<D> = new EventEmitter(true);
 

src/framework/theme/components/calendar-kit/components/calendar-month-picker/calendar-month-picker.component.ts

@@ -16,7 +16,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { batch } from '../../helpers';
-import { NbCalendarCell, NbCalendarSize } from '../../model';
+import { NbCalendarCell, NbCalendarSize, NbCalendarSizeValues } from '../../model';
 import { NbCalendarMonthCellComponent } from './calendar-month-cell.component';
 import { NbDateService } from '../../services/date.service';
 
@@ -48,6 +48,7 @@ export class NbCalendarMonthPickerComponent<D, T> implements OnChanges {
 
   @Input() filter: (D) => boolean;
   @Input() size: NbCalendarSize = NbCalendarSize.MEDIUM;
+  static ngAcceptInputType_size: NbCalendarSizeValues;
 
   /**
    * Visible month

src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-view-mode.component.ts

@@ -7,7 +7,7 @@
 import { TranslationWidth } from '@angular/common';
 
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { NbCalendarViewMode } from '../../model';
+import { NbCalendarViewMode, NbCalendarViewModeValues } from '../../model';
 import { NbCalendarYearModelService } from '../../services/calendar-year-model.service';
 import { NbDateService } from '../../services/date.service';
 
@@ -25,6 +25,7 @@ import { NbDateService } from '../../services/date.service';
 export class NbCalendarViewModeComponent<D> {
   @Input() date: D;
   @Input() viewMode: NbCalendarViewMode = NbCalendarViewMode.DATE;
+  static ngAcceptInputType_viewMode: NbCalendarViewModeValues;
   @Output() changeMode = new EventEmitter<void>(true);
 
   constructor(

src/framework/theme/components/calendar-kit/components/calendar-picker/calendar-picker-row.component.ts

@@ -18,7 +18,7 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 
-import { NbCalendarCell, NbCalendarSize } from '../../model';
+import { NbCalendarCell, NbCalendarSize, NbCalendarSizeValues } from '../../model';
 
 
 @Component({
@@ -41,6 +41,7 @@ export class NbCalendarPickerRowComponent<D, T> implements OnChanges {
   @Input() max: D;
   @Input() filter: (D) => boolean;
   @Input() size: NbCalendarSize = NbCalendarSize.MEDIUM;
+  static ngAcceptInputType_size: NbCalendarSizeValues;
   @Output() select: EventEmitter<D> = new EventEmitter();
 
   // TODO static must be false as of Angular 9.0.0, issues/1514

src/framework/theme/components/calendar-kit/components/calendar-picker/calendar-picker.component.ts

@@ -6,7 +6,7 @@
 
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, Type, HostBinding } from '@angular/core';
 
-import { NbCalendarCell, NbCalendarSize } from '../../model';
+import { NbCalendarCell, NbCalendarSize, NbCalendarSizeValues } from '../../model';
 
 
 @Component({
@@ -36,6 +36,7 @@ export class NbCalendarPickerComponent<D, T> {
   @Input() max: D;
   @Input() filter: (D) => boolean;
   @Input() size: NbCalendarSize = NbCalendarSize.MEDIUM;
+  static ngAcceptInputType_size: NbCalendarSizeValues;
   @Output() select: EventEmitter<D> = new EventEmitter();
 
   @HostBinding('class.size-large')

src/framework/theme/components/calendar-kit/components/calendar-week-number/calendar-week-number.component.ts

@@ -7,7 +7,7 @@
 import { Component, Input, HostBinding, ChangeDetectionStrategy, OnChanges, SimpleChanges } from '@angular/core';
 
 import { NbDateService } from '../../services/date.service';
-import { NbCalendarSize } from '../../model';
+import { NbCalendarSize, NbCalendarSizeValues } from '../../model';
 
 @Component({
   selector: 'nb-calendar-week-numbers',
@@ -29,6 +29,7 @@ export class NbCalendarWeekNumberComponent<D> implements OnChanges {
 
   @Input()
   size: NbCalendarSize;
+  static ngAcceptInputType_size: NbCalendarSizeValues;
 
   /**
    * Sets symbol used as a header for week numbers column