Skip to content

refactor: attr transform for bool grid inputs & replace in Elements #16227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: 20.1.x
Choose a base branch
from
Open

refactor: attr transform for bool grid inputs & replace in Elements #16227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd55104
refactor(column,pivot): attr transform for all bool inputs
damyanpetev Sep 17, 2025
8e262ec
refactor(elements): drop bool transform on inputs with built-in ones
damyanpetev Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions projects/igniteui-angular-elements/src/analyzer/component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as ts from 'typescript';
import type { ComponentMetadata, ContentQuery } from './types';
import { asString, first, getDecoratorName, getDecorators, getProvidedAs, getSelector, getTypeExpressionIdentifier, isMethod, isOverride, isProperty, isPublic, isReadOnly } from './utils';
import { asString, first, getDecoratorName, getDecorators, getProvidedAs, getSelector, getTypeExpressionIdentifier, hasDecoratorTransformValue, isMethod, isOverride, isProperty, isPublic, isReadOnly } from './utils';


const isInput = (dec: ts.Decorator) => getDecoratorName(dec).includes('Input');
Expand Down Expand Up @@ -116,11 +116,16 @@ export class AnalyzerComponent {
}

/**
* Return all boolean `@Input` properties of the underlying component.
* Return boolean `@Input` properties of the underlying component that require transform.
*/
private get booleanProperties() {
return this.inputProperties
.filter(prop => this.checker.getTypeAtLocation(prop.valueDeclaration!).getFlags() & ts.TypeFlags.Boolean);
const res = this.inputProperties
.filter(prop => this.checker.getTypeAtLocation(prop.valueDeclaration!).getFlags() & ts.TypeFlags.Boolean)
.filter(prop => {
const dec = getDecorators(first(prop.declarations as any)).find(isInput);
return !hasDecoratorTransformValue(dec,'booleanAttribute');
});
return res;
}

/**
Expand Down
137 changes: 0 additions & 137 deletions projects/igniteui-angular-elements/src/analyzer/elements.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ export var registerConfig = [
],
additionalProperties: [],
methods: ["show", "hide"],
boolProps: ["hidden"],
provideAs: IgxActionStripToken,
},
{
Expand Down Expand Up @@ -94,25 +93,6 @@ export var registerConfig = [
"filterCellTemplate",
],
numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
boolProps: [
"merge",
"sortable",
"selectable",
"groupable",
"editable",
"filterable",
"resizable",
"autosizeHeader",
"hasSummary",
"hidden",
"disableHiding",
"disablePinning",
"filteringIgnoreCase",
"sortingIgnoreCase",
"searchable",
"pinned",
"visibleWhenCollapsed",
],
},
{
component: IgxColumnGroupComponent,
Expand Down Expand Up @@ -154,26 +134,6 @@ export var registerConfig = [
"filterCellTemplate",
],
numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
boolProps: [
"collapsible",
"expanded",
"searchable",
"hidden",
"merge",
"sortable",
"groupable",
"editable",
"filterable",
"resizable",
"autosizeHeader",
"hasSummary",
"disableHiding",
"disablePinning",
"filteringIgnoreCase",
"sortingIgnoreCase",
"pinned",
"visibleWhenCollapsed",
],
provideAs: IgxColumnComponent,
},
{
Expand Down Expand Up @@ -210,26 +170,6 @@ export var registerConfig = [
"filterCellTemplate",
],
numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
boolProps: [
"hidden",
"collapsible",
"expanded",
"searchable",
"merge",
"sortable",
"groupable",
"editable",
"filterable",
"resizable",
"autosizeHeader",
"hasSummary",
"disableHiding",
"disablePinning",
"filteringIgnoreCase",
"sortingIgnoreCase",
"pinned",
"visibleWhenCollapsed",
],
provideAs: IgxColumnComponent,
},
{
Expand Down Expand Up @@ -387,22 +327,6 @@ export var registerConfig = [
"rowHeight",
"totalRecords",
],
boolProps: [
"groupsExpanded",
"hideGroupedColumns",
"showGroupArea",
"autoGenerate",
"moving",
"hideRowSelectors",
"rowDraggable",
"rowEditable",
"isLoading",
"allowFiltering",
"allowAdvancedFiltering",
"showSummaryOnCollapse",
"batchEditing",
"selectRowOnClick",
],
},
{
component: IgxGridEditingActionsComponent,
Expand All @@ -411,7 +335,6 @@ export var registerConfig = [
contentQueries: [],
additionalProperties: [{ name: "hasChildren" }],
methods: ["startEdit"],
boolProps: ["addRow", "editRow", "deleteRow", "addChild", "asMenuItems"],
provideAs: IgxGridActionsBaseDirective,
},
{
Expand All @@ -421,7 +344,6 @@ export var registerConfig = [
contentQueries: [],
additionalProperties: [],
methods: ["pin", "unpin", "scrollToRow"],
boolProps: ["asMenuItems"],
provideAs: IgxGridActionsBaseDirective,
},
{
Expand Down Expand Up @@ -472,7 +394,6 @@ export var registerConfig = [
],
additionalProperties: [{ name: "nativeElement" }],
methods: [],
boolProps: ["showProgress"],
provideAs: IgxToolbarToken,
},
{
Expand All @@ -482,7 +403,6 @@ export var registerConfig = [
contentQueries: [],
additionalProperties: [],
methods: ["export"],
boolProps: ["exportCSV", "exportExcel"],
},
{
component: IgxGridToolbarHidingComponent,
Expand All @@ -492,7 +412,6 @@ export var registerConfig = [
additionalProperties: [],
methods: ["checkAll", "uncheckAll"],
numericProps: ["indentetion"],
boolProps: ["hideFilter"],
},
{
component: IgxGridToolbarPinningComponent,
Expand All @@ -502,7 +421,6 @@ export var registerConfig = [
additionalProperties: [],
methods: ["checkAll", "uncheckAll"],
numericProps: ["indentetion"],
boolProps: ["hideFilter"],
},
{
component: IgxGridToolbarTitleComponent,
Expand Down Expand Up @@ -673,20 +591,6 @@ export var registerConfig = [
"rowHeight",
"totalRecords",
],
boolProps: [
"expandChildren",
"showExpandAll",
"autoGenerate",
"moving",
"hideRowSelectors",
"rowDraggable",
"rowEditable",
"isLoading",
"allowFiltering",
"allowAdvancedFiltering",
"showSummaryOnCollapse",
"selectRowOnClick",
],
},
{
component: IgxPaginatorComponent,
Expand Down Expand Up @@ -715,12 +619,6 @@ export var registerConfig = [
contentQueries: [],
additionalProperties: [{ name: "animationSettings", writable: true }],
methods: [],
boolProps: [
"columnsExpanded",
"rowsExpanded",
"filtersExpanded",
"valuesExpanded",
],
},
{
component: IgxPivotGridComponent,
Expand Down Expand Up @@ -830,13 +728,6 @@ export var registerConfig = [
"rowSelectorTemplate",
],
numericProps: ["rowHeight"],
boolProps: [
"autoGenerateConfig",
"superCompactMode",
"defaultExpandState",
"isLoading",
"selectRowOnClick",
],
},
{
component: IgxRowIslandComponent,
Expand Down Expand Up @@ -975,20 +866,6 @@ export var registerConfig = [
"rowHeight",
"totalRecords",
],
boolProps: [
"expandChildren",
"showExpandAll",
"autoGenerate",
"moving",
"hideRowSelectors",
"rowDraggable",
"rowEditable",
"isLoading",
"allowFiltering",
"allowAdvancedFiltering",
"showSummaryOnCollapse",
"selectRowOnClick",
],
},
{
component: IgxTreeGridComponent,
Expand Down Expand Up @@ -1137,19 +1014,5 @@ export var registerConfig = [
"rowHeight",
"totalRecords",
],
boolProps: [
"cascadeOnDelete",
"autoGenerate",
"moving",
"hideRowSelectors",
"rowDraggable",
"rowEditable",
"isLoading",
"allowFiltering",
"allowAdvancedFiltering",
"showSummaryOnCollapse",
"batchEditing",
"selectRowOnClick",
],
},
];
23 changes: 21 additions & 2 deletions projects/igniteui-angular-elements/src/analyzer/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,17 @@ export function asString(x?: ts.Symbol) {
/** Get the properties of the `@Component({ ...properties })` decorator object param */
function getDecoratorProps(component: ts.ClassDeclaration): ts.NodeArray<ts.ObjectLiteralElementLike> | null {
const expression = getDecorators(component)?.find(x => getDecoratorName(x) === 'Component')?.expression;
return getCallExpressionProps(expression);
}

/** Get the properties of the `func({ ...properties })` call expression object param */
function getCallExpressionProps(expression?: ts.Expression): ts.NodeArray<ts.ObjectLiteralElementLike> | null {
if (!expression || !ts.isCallExpression(expression))
return null;

const args = [...expression.arguments];

if (!ts.isObjectLiteralExpression(args[0]))
if (!args[0] || !ts.isObjectLiteralExpression(args[0]))
return null;

const literal = args[0];
Expand Down Expand Up @@ -143,7 +147,6 @@ export function getProvidedAs(component: ts.ClassDeclaration, type: ts.Interface
}

return null;

}

/**
Expand Down Expand Up @@ -200,6 +203,22 @@ export function isUseExistingType(obj: ts.ObjectLiteralExpression, type: ts.Inte
return initializer ? initializer.getText() === type.symbol.escapedName : false;
}

/**
* Checks if a provided decorator's prams object transform property has the required value set
*
* @example
* ```ts
* Input({ transform: booleanAttribute })
* ```
*
* @param decorator The decorator node
* @param transform The transform value to check for
*/
export function hasDecoratorTransformValue(decorator: ts.Decorator | undefined, transform: string): boolean {
const props = getCallExpressionProps(decorator?.expression);
return !!props?.some(p => ts.isPropertyAssignment(p) && p.name.getText() === 'transform' && p.initializer.getText() === transform);
}

/**
* Checks if given import declaration contains a given type (by name for now)
* @param importDecl the import declaration to check
Expand Down
8 changes: 4 additions & 4 deletions projects/igniteui-angular/src/lib/grids/columns/column.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,12 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
* ```
*
*/
@Input()
public get merge() {
@Input({ transform: booleanAttribute })
public get merge(): boolean {
return this._merge;
}

public set merge(value) {
public set merge(value: boolean) {
if (this.grid.hasColumnLayouts) {
console.warn('Merging is not supported with multi-row layouts.');
return;
Expand Down Expand Up @@ -192,7 +192,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
* @memberof IgxColumnComponent
*/
@WatchColumnChanges()
@Input()
@Input({ transform: booleanAttribute })
public get selectable(): boolean {
return this._selectable;
}
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
* ```
*/
@HostBinding('class.igx-grid__pivot--super-compact')
@Input()
@Input({ transform: booleanAttribute })
public get superCompactMode() {
return this._superCompactMode;
}
Expand Down
Loading
Loading