refactor(grid-lite): add booleanAttribute for input coercion

Author: damyanpetev

projects/igniteui-angular/grids/lite/src/grid-lite-column.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, contentChild, CUSTOM_ELEMENTS_SCHEMA, Directive, effect, EmbeddedViewRef, inject, input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, contentChild, CUSTOM_ELEMENTS_SCHEMA, Directive, effect, EmbeddedViewRef, inject, input, TemplateRef, ViewContainerRef } from '@angular/core';
 import { ColumnConfiguration, ColumnSortConfiguration, IgcCellContext, IgcHeaderContext, Keys, DataType } from 'igniteui-grid-lite';
 
 /** Configuration object for grid columns. */
@@ -88,25 +88,25 @@ export class IgxGridLiteColumnComponent<T extends object = any> {
     public readonly width = input<string>();
 
     /** Indicates whether the column is hidden. */
-    public readonly hidden = input<boolean>(false);
+    public readonly hidden = input(false, { transform: booleanAttribute });
 
     /** Indicates whether the column is resizable. */
-    public readonly resizable = input<boolean>(false);
+    public readonly resizable = input(false, { transform: booleanAttribute });
 
     /** Indicates whether the column is sortable. */
-    public readonly sortable = input<boolean>(false);
+    public readonly sortable = input(false, { transform: booleanAttribute });
 
     /** Whether sort operations will be case sensitive. */
-    public readonly sortingCaseSensitive = input<boolean>(false);
+    public readonly sortingCaseSensitive = input(false, { transform: booleanAttribute });
 
     /** Sort configuration for the column (e.g., custom comparer). */
     public readonly sortConfiguration = input<IgxGridLiteColumnSortConfiguration<T>>();
 
     /** Indicates whether the column is filterable. */
-    public readonly filterable = input<boolean>(false);
+    public readonly filterable = input(false, { transform: booleanAttribute });
 
     /** Whether filter operations will be case sensitive. */
-    public readonly filteringCaseSensitive = input<boolean>(false);
+    public readonly filteringCaseSensitive = input(false, { transform: booleanAttribute });
 
     /** Custom header template for the column. */
     public readonly headerTemplate = input<TemplateRef<IgxGridLiteHeaderTemplateContext<T>>>();

projects/igniteui-angular/grids/lite/src/grid-lite.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, input, OnInit, output, signal, viewChild } from '@angular/core';
+import { booleanAttribute, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, input, OnInit, output, signal, viewChild } from '@angular/core';
 import { DataPipelineConfiguration, FilterExpression, GridLiteSortingOptions, IgcGridLite, Keys, SortingExpression } from 'igniteui-grid-lite';
 import { IgxGridLiteColumnConfiguration } from './grid-lite-column.component';
 
@@ -39,7 +39,7 @@ export class IgxGridLiteComponent<T extends object = any> implements OnInit {
      * @remarks
      * This property is ignored if any existing column configuration already exists in the grid.
      */
-    public readonly autoGenerate = input<boolean>(false);
+    public readonly autoGenerate = input(false, { transform: booleanAttribute });;
 
     /** Sort configuration property for the grid. */
     public readonly sortingOptions = input<IgxGridLiteSortingOptions>({
@@ -164,7 +164,7 @@ export class IgxGridLiteComponent<T extends object = any> implements OnInit {
     //#endregion
 
     /**
-     * @internal
+     * @hidden @internal
      */
     public ngOnInit(): void {
         IgcGridLite.register();

src/app/grid-lite/grid-lite.sample.html

@@ -9,11 +9,11 @@
     field="firstName"
     dataType="string"
     header="First Name"
-    [width]="'250px'"
-    [sortable]="true"
-    [sortingCaseSensitive]="true"
-    [filterable]="true"
-    [filteringCaseSensitive]="false"
+    width="250px"
+    sortable
+    sortingCaseSensitive
+    filterable
+    filteringCaseSensitive
     [headerTemplate]="headerTemplate"
   >
   </igx-grid-lite-column>
@@ -22,7 +22,7 @@
     dataType="string"
     header="Last Name"
     [cellTemplate]="cellTemplate"
-    [sortable]="true"
+    sortable
   >
     <ng-template igxGridLiteHeader let-column let-parent="parent">
       <div>{{column.header}} Templated inline</div>
@@ -33,9 +33,9 @@
     field="age"
     dataType="number"
     header="Age"
-    [filterable]="true"
-    [resizable]="true"
-    [sortable]="true"
+    filterable
+    resizable
+    sortable
   ></igx-grid-lite-column>
   <igx-grid-lite-column field="active" dataType="boolean" header="Active">
     <ng-template