feat(docs/core/platform): strict angularCompilerOptions (#7998)

* fix: address fullTemplateTypeCheck issues

* fix(platform): address strictTemplates rule issues

* feat(core): address strictTemplates rule issues

* feat: additional fixes

* refactor: remove extra angularCompilerOptions from tsconfig of each lib

* fix: tests adjustments, table column fixes

* fix: misc updates according to PR comments

apps/docs/src/app/core/component-docs/combobox/examples/combobox-group-example.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { GroupFunction } from '@fundamental-ngx/core/utils';
+import { GroupFunction } from '@fundamental-ngx/core/combobox';
 
 export type ComboboxItem = { name: string; type: string };
 

apps/docs/src/app/core/component-docs/dynamic-page/dynamic-page-examples/dynamic-page-facets-example/dynamic-page-facets-example.component.html

@@ -78,25 +78,25 @@
             <fd-facet-group ariaLabel="Facet Group">
                 <fd-facet type="form" facetTitle="Technical Data" id="facet1">
                     <fd-facet-content>
-                        <label fd-form-label colon="true" for="form-value-10">Base unit</label>
+                        <label fd-form-label [colon]="true" for="form-value-10">Base unit</label>
                         <fd-text text="Each" id="form-value-10"></fd-text>
                     </fd-facet-content>
                     <fd-facet-content>
-                        <label fd-form-label colon="true" for="form-value-11">Length</label>
+                        <label fd-form-label [colon]="true" for="form-value-11">Length</label>
                         <fd-text text="23.24 Centimeter" id="form-value-11"></fd-text>
                     </fd-facet-content>
                     <fd-facet-content>
-                        <label fd-form-label colon="true" for="form-value-12">Width</label>
+                        <label fd-form-label [colon]="true" for="form-value-12">Width</label>
                         <fd-text text="86.1 Centimeter" id="form-value-12"></fd-text>
                     </fd-facet-content>
                     <fd-facet-content>
-                        <label fd-form-label colon="true" for="form-value-13">Height</label>
+                        <label fd-form-label [colon]="true" for="form-value-13">Height</label>
                         <fd-text text="20.8 Centimeter" id="form-value-13"></fd-text>
                     </fd-facet-content>
                 </fd-facet>
                 <fd-facet type="rating-indicator" facetTitle="Rating Indicator" subtitle="6 reviews" id="facet2">
                     <fd-facet-content>
-                        <fd-rating-indicator size="md" dynamicTextIndicator="of" value="2.51"></fd-rating-indicator>
+                        <fd-rating-indicator size="md" dynamicTextIndicator="of" [value]="2.51"></fd-rating-indicator>
                     </fd-facet-content>
                 </fd-facet>
                 <fd-facet type="image" id="facet3">

apps/docs/src/app/core/component-docs/grid-list/examples/multi-select/grid-list-multi-select-example.component.ts

@@ -1,6 +1,11 @@
 import { ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation } from '@angular/core';
 
-import { GridListComponent, GridListItemOutputEvent, GridListItemType } from '@fundamental-ngx/core/grid-list';
+import {
+    GridListComponent,
+    GridListItemOutputEvent,
+    GridListItemType,
+    GridListSelectionEvent
+} from '@fundamental-ngx/core/grid-list';
 
 interface GridListItem {
     id: number;
@@ -66,7 +71,7 @@ export class GridListMultiSelectExampleComponent {
         }
     ];
 
-    onSelectionChange(event: GridListItemOutputEvent<number>): void {
+    onSelectionChange(event: GridListSelectionEvent<number>): void {
         console.log('Multi-Select: selected items', event);
     }
 

apps/docs/src/app/core/component-docs/grid-list/examples/single-select-left/grid-list-single-select-left-example.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
-import { GridListItemOutputEvent, GridListItemType } from '@fundamental-ngx/core/grid-list';
+import { GridListItemOutputEvent, GridListItemType, GridListSelectionEvent } from '@fundamental-ngx/core/grid-list';
 
 interface GridListItem {
     id: number;
@@ -63,7 +63,7 @@ export class GridListSingleSelectLeftExampleComponent {
         }
     ];
 
-    onSelectionChange(event: GridListItemOutputEvent<number>): void {
+    onSelectionChange(event: GridListSelectionEvent<number>): void {
         console.log('Single Select Left: selected item', event);
     }
 

apps/docs/src/app/core/component-docs/grid-list/examples/single-select-right/grid-list-single-select-right-example.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { GridListItemOutputEvent, GridListItemType } from '@fundamental-ngx/core/grid-list';
+import { GridListItemOutputEvent, GridListItemType, GridListSelectionEvent } from '@fundamental-ngx/core/grid-list';
 
 interface GridListItem {
     id: number;
@@ -62,7 +62,7 @@ export class GridListSingleSelectRightExampleComponent {
         }
     ];
 
-    onSelectionChange(event: GridListItemOutputEvent<number>): void {
+    onSelectionChange(event: GridListSelectionEvent<number>): void {
         console.log('Single Select Right: selected item', event);
     }
 

apps/docs/src/app/core/component-docs/grid-list/examples/single-select/grid-list-single-select-example.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
-import { GridListItemOutputEvent, GridListItemType } from '@fundamental-ngx/core/grid-list';
+import { GridListItemOutputEvent, GridListItemType, GridListSelectionEvent } from '@fundamental-ngx/core/grid-list';
 
 interface GridListItem {
     id: number;
@@ -60,7 +60,7 @@ export class GridListSingleSelectExampleComponent {
         }
     ];
 
-    onSelectionChange(event: GridListItemOutputEvent<number>): void {
+    onSelectionChange(event: GridListSelectionEvent<number>): void {
         console.log('Single Select: selected item', event);
     }
 

apps/docs/src/app/core/component-docs/multi-input/examples/multi-input-async-example/multi-input-async-example.component.ts

@@ -9,7 +9,7 @@ import { delay, switchMap, startWith } from 'rxjs/operators';
 })
 export class MultiInputAsyncExampleComponent {
     readonly searchValue$ = new Subject<string>();
-    readonly dropdownValues$: Observable<ReadonlyArray<OptionItem>>;
+    readonly dropdownValues$: Observable<OptionItem[]>;
     selected = [];
 
     displayFn = (v): string => v.label;
@@ -29,7 +29,7 @@ export class MultiInputAsyncExampleComponent {
     /**
      * Server request emulation
      */
-    private serverRequest(searchQuery: string): Observable<ReadonlyArray<OptionItem>> {
+    private serverRequest(searchQuery: string): Observable<OptionItem[]> {
         const preparedQuery = searchQuery.trim().toLowerCase();
         const result = MOCK_DATA.filter((item) => item.value.toLowerCase().startsWith(preparedQuery)).slice(0, 5);
 

apps/docs/src/app/core/component-docs/table/examples/table-checkboxes-example.component.ts

@@ -90,7 +90,7 @@ export class TableCheckboxesExampleComponent {
         }
     ];
 
-    select(index: number, event: PointerEvent, size: string): void {
+    select(index: number, event: MouseEvent, size: string): void {
         // using rangeSelector utility to be able to select multiple rows while "shift" is pressed
         const checkedToggled = !this._getTable(size)[index].checked;
         this._rangeSelector.onRangeElementToggled(index, event);

apps/docs/src/app/core/component-docs/table/examples/table-semantic-example.component.ts

@@ -76,7 +76,7 @@ export class TableSemanticExampleComponent {
         }
     ];
 
-    select(index: number, event: PointerEvent): void {
+    select(index: number, event: MouseEvent): void {
         // using rangeSelector utility to be able to select multiple rows while "shift" is pressed
         const checkedToggled = !this.tableRows[index].checked;
         this._rangeSelector.onRangeElementToggled(index, event);

apps/docs/src/app/core/component-docs/timeline/examples/timeline-horizontal-double-side-example.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { TIMELINE_EXAMPLE_DATA } from './timeline-basic-example/timeline-example-data';
+import { TimelineAxis, TimelineSidePosition } from '@fundamental-ngx/core/timeline';
 
 @Component({
     selector: 'fd-timeline-horizontal-double-side',
@@ -8,7 +9,7 @@ import { TIMELINE_EXAMPLE_DATA } from './timeline-basic-example/timeline-example
 export class TimelineHorizontalDoubleSideExampleComponent {
     data = TIMELINE_EXAMPLE_DATA;
 
-    axis = 'horizontal';
+    axis: TimelineAxis = 'horizontal';
 
-    layout = 'double';
+    layout: TimelineSidePosition = 'double';
 }

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-complex-example.component.ts

@@ -65,7 +65,7 @@ export class UploadCollectionComplexExampleComponent {
         }
     }
 
-    onCheckboxClick(file: FileItem, index: number, event: PointerEvent): void {
+    onCheckboxClick(file: FileItem, index: number, event: MouseEvent): void {
         // additionally to ngModel tracking clicks on checkboxes in order to be able to select ranges
         // this function will be invoked after ngModel's value is updated, so we can use "file.selected" as current value
         this._rangeSelector.onRangeElementToggled(index, event);

apps/docs/src/app/documentation/core-helpers/sections-toolbar/sections-toolbar.component.html

@@ -29,8 +29,13 @@
                             <button fd-nested-list-expand-icon></button>
                         </div>
                         <ul fd-nested-list>
-                            <ng-container *ngFor="let item of section.content; trackBy: trackBySectionContent">
-                                <ng-container *ngIf="item.subItems; else rootListItem">
+                            <ng-container
+                                *ngFor="
+                                    let item of $asSectionNestedContent(section.content);
+                                    trackBy: trackBySectionContent
+                                "
+                            >
+                                <ng-container *ngIf="item.subItems as itemSubItems; else rootListItem">
                                     <li fd-nested-list-item [expanded]="true">
                                         <div fd-nested-list-content>
                                             <a fd-nested-list-link>
@@ -40,7 +45,7 @@
                                         </div>
                                         <ul fd-nested-list>
                                             <ng-container
-                                                *ngFor="let subItem of item.subItems; trackBy: trackBySectionContent"
+                                                *ngFor="let subItem of itemSubItems; trackBy: trackBySectionContent"
                                                 [ngTemplateOutlet]="listItemTpl"
                                                 [ngTemplateOutletContext]="{ $implicit: subItem }"
                                             >

apps/docs/src/app/documentation/core-helpers/sections-toolbar/sections-toolbar.component.ts

@@ -30,7 +30,9 @@ export class SectionsToolbarComponent implements OnInit, OnChanges {
         return window.innerWidth < SMALL_SCREEN_BREAKPOINT;
     }
 
-    constructor() {}
+    /** @hidden type enforcing */
+    $asSectionNestedContent = (sectionContent: SectionInterfaceContent[]): SectionInterfaceContentNested[] =>
+        <any>sectionContent;
 
     ngOnInit(): void {
         this.onActivate();

apps/docs/src/app/platform/component-docs/platform-combobox/examples/combobox-states/combobox-states-example.component.html

@@ -14,7 +14,7 @@
             name="combobox-state"
             placeholder="Type some text..."
             contentDensity="compact"
-            [state]="selectedState?.toLowerCase()"
+            [state]="selectedState"
             [stateMessage]="selectedState + ' state message'"
             [dataSource]="dataSource"
         >

apps/docs/src/app/platform/component-docs/platform-combobox/examples/combobox-states/combobox-states-example.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { DATA_PROVIDERS } from '@fundamental-ngx/platform/shared';
 import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform/form';
+import { FormStates } from '@fundamental-ngx/core/shared';
 
 @Component({
     selector: 'fdp-combobox-states-example',
@@ -12,7 +13,7 @@ import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform/form';
 export class ComboboxStateComponent {
     dataSource = ['Apple', 'Banana', 'Pineapple', 'Strawberry', 'Broccoli', 'Carrot', 'Jalapeño', 'Spinach'];
 
-    states = ['Default', 'Success', 'Error', 'Warning', 'Information'];
+    states: FormStates[] = ['default', 'success', 'error', 'warning', 'information'];
     selectedState = this.states[0];
 
     onSelectState(item: ComboboxSelectionChangeEvent): void {

apps/docs/src/app/platform/component-docs/platform-file-uploader/platform-file-uploader-examples/platform-file-uploader-reactive-example.component.html

@@ -19,9 +19,7 @@
                 buttonLabel="Browse"
                 buttonAriaLabel="browse file"
                 accept=".png,.jpg"
-                value="files"
                 [multiple]="true"
-                minFileSize="200KB"
                 (selectionChange)="handleFileSelection($event)"
             ></fdp-file-uploader>
         </fdp-form-field>
@@ -35,6 +33,6 @@
 
 Files Selected:
 <br />
-<span *ngFor="let file of this.files">
+<span *ngFor="let file of files">
     <span class="green">{{ file.name }} </span><br
 /></span>

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-tristate-checkbox.component.html

@@ -175,12 +175,7 @@ <h3>TriState Checkbox Used with Multiple checkboxes</h3>
         </fdp-form-field>
     </fdp-form-group>
     <div style="padding-left: 2rem; border: black solid">
-        <fdp-form-group
-            class="padding-top:0%;"
-            #checkboxes
-            [formGroup]="registrationForm.get('agreements')"
-            [object]="choices"
-        >
+        <fdp-form-group class="padding-top:0%;" #checkboxes [formGroup]="agreementsFormGroup" [object]="choices">
             <fdp-form-field #ffr2 id="termsAndConditions" label="I accept Terms and Conditions" [rank]="3">
                 <fdp-checkbox name="termsAndConditions-cb" [formControl]="ffr2.formControl"> </fdp-checkbox>
             </fdp-form-field>

apps/docs/src/app/platform/component-docs/platform-forms/checkbox/platform-checkbox-examples/platform-tristate-checkbox.component.ts

@@ -19,8 +19,10 @@ export class PlatformChekboxTristateComponent implements AfterViewInit {
     public cities = new FormGroup({});
     public citiesData = new SomeObject(false, 'Yes', null, false, true, null, null, false);
 
+    public agreementsFormGroup = new FormGroup({});
+
     public registrationForm = new FormGroup({
-        agreements: new FormGroup({})
+        agreements: this.agreementsFormGroup
     });
 
     public choices: Record<string, any> = { termsAndConditions: true, marketing: true, newsletter: false };

apps/docs/src/app/platform/component-docs/platform-forms/multi-input/platform-multi-input-example/platform-multi-input-grouped-example.component.html

@@ -16,7 +16,7 @@
                 name="fdp-name"
                 [dataSource]="list_elements"
                 displayKey="name"
-                group="true"
+                [group]="true"
                 groupKey="type"
             >
             </fdp-multi-input>

apps/docs/src/app/platform/component-docs/platform-forms/platform-datetime-picker/platform-datetime-picker-examples/platform-datetime-picker-update-on-blur-example.component.ts

@@ -18,7 +18,7 @@ import {
             [processInputOnBlur]="true"
         ></fdp-datetime-picker>
         <br />
-        <div>Selected Date: {{ date | date: 'MM/dd/YYYY, hh:mm aa' }}</div> `,
+        <div>Selected Date: {{ date.toDate() | date: 'MM/dd/YYYY, hh:mm aa' }}</div> `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         // Note that this is usually provided in the root of your application.

apps/docs/src/app/platform/component-docs/platform-forms/step-input/platform-step-input-examples/platform-number-step-input-example.component.html

@@ -75,7 +75,7 @@
         <fdp-number-step-input
             [id]="'alignmentLeft'"
             name="alignment"
-            align="left"
+            [align]="stepInputAlign.Left"
             [value]="100"
         ></fdp-number-step-input>
     </div>
@@ -84,7 +84,7 @@
         <fdp-number-step-input
             [id]="'alignmentCenter'"
             name="alignment"
-            align="center"
+            [align]="stepInputAlign.Center"
             [value]="100"
         ></fdp-number-step-input>
     </div>
@@ -93,7 +93,7 @@
         <fdp-number-step-input
             [id]="'alignmentRight'"
             name="alignment"
-            align="right"
+            [align]="stepInputAlign.Right"
             [value]="100"
         ></fdp-number-step-input>
     </div>

apps/docs/src/app/platform/component-docs/platform-forms/step-input/platform-step-input-examples/platform-number-step-input-example.component.ts

@@ -1,16 +1,18 @@
 import { Component } from '@angular/core';
 
-import { NumberStepInputChangeEvent } from '@fundamental-ngx/platform/form';
+import { StepInputChangeEvent, StepInputAlign } from '@fundamental-ngx/platform/form';
 
 @Component({
     selector: 'fdp-platform-number-step-input-example',
     templateUrl: './platform-number-step-input-example.component.html',
     styleUrls: ['./platform-number-step-input-example.component.scss']
 })
 export class PlatformNumberStepInputExampleComponent {
+    readonly stepInputAlign = StepInputAlign;
+
     value = 100;
 
-    onValueChange(event: NumberStepInputChangeEvent): void {
+    onValueChange(event: StepInputChangeEvent): void {
         this.value = event.payload;
     }
 }

apps/docs/src/app/platform/component-docs/platform-forms/step-input/platform-step-input-examples/platform-number-step-input-state-example.component.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
+import { FormStates } from '@fundamental-ngx/core/shared';
 
 @Component({
     selector: 'fdp-platform-number-step-input-state-example',
     templateUrl: './platform-number-step-input-state-example.component.html',
     styleUrls: ['./platform-number-step-input-state-example.component.scss']
 })
 export class PlatformNumberStepInputStateExampleComponent {
-    states = [
+    states: StateOption[] = [
         {
             name: 'default',
             message: 'Default state message'
@@ -29,3 +30,8 @@ export class PlatformNumberStepInputStateExampleComponent {
         }
     ];
 }
+
+interface StateOption {
+    name: FormStates;
+    message: string;
+}