From 9ebd4e1db9fdcb67fcff8237e75c77537c862360 Mon Sep 17 00:00:00 2001 From: Milan Raj Date: Fri, 6 Oct 2023 11:35:02 -0500 Subject: [PATCH] Revert "Create Angular mixins for fractional-width columns and groupable columns (#1591) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale Turns out the pattern introduced in #1587 for [using TypeScript mixins does not work for Angular directives](https://github.com/angular/angular/issues/42594#issuecomment-868091258) and resulted in [build failures for a built library used outside the workspace](https://dev.azure.com/ni/DevCentral/_build/results?buildId=6361598&view=logs&j=5cb0c4d9-f36d-5fb3-bf2e-85320ef8bd68&t=51824763-f056-5c1e-0120-b664705fb575&l=71). Reading the linked comment it sounds like we are seeing the exact behavior described. `@Input` bindings used in the base class (column-id) are failing to resolve. Even the extra sinister part where it works in the workspace (our tests do [test bindings to base class props like column-id](https://github.com/ni/nimble/blob/main/angular-workspace/projects/ni/nimble-angular/table-column/anchor/tests/nimble-table-column-anchor.directive.spec.ts#L169)) but not in apps using the published library ๐Ÿ˜ต. ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation Revert the refactor ## ๐Ÿงช Testing Rely on CI ## โœ… Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. Nada --- .../nimble-table-column-anchor.directive.ts | 46 +++++++++++++++-- ...nimble-table-column-date-text.directive.ts | 45 +++++++++++++++- ...nimble-table-column-enum-text.directive.ts | 45 +++++++++++++++- .../nimble-table-column-icon.directive.ts | 45 +++++++++++++++- .../mixins/fractional-width-column.ts | 44 ---------------- .../table-column/mixins/groupable-column.ts | 44 ---------------- .../nimble-table-column-base.directive.ts | 10 +--- ...mble-table-column-number-text.directive.ts | 46 +++++++++++++++-- .../nimble-angular/table-column/public-api.ts | 4 +- .../nimble-table-column-text.directive.ts | 51 +++++++++++++++++-- ...-67043ffb-1f5b-43fa-8f67-46599b4f2053.json | 7 +++ 11 files changed, 272 insertions(+), 115 deletions(-) delete mode 100644 angular-workspace/projects/ni/nimble-angular/table-column/mixins/fractional-width-column.ts delete mode 100644 angular-workspace/projects/ni/nimble-angular/table-column/mixins/groupable-column.ts create mode 100644 change/@ni-nimble-angular-67043ffb-1f5b-43fa-8f67-46599b4f2053.json diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts index e3aff4a188..75970b54f1 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/anchor/nimble-table-column-anchor.directive.ts @@ -1,8 +1,8 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; import { type TableColumnAnchor, tableColumnAnchorTag } from '@ni/nimble-components/dist/esm/table-column/anchor'; import { AnchorAppearance } from '@ni/nimble-components/dist/esm/anchor/types'; -import { BooleanValueOrAttribute, toBooleanProperty } from '@ni/nimble-angular/internal-utilities'; -import { NimbleTableColumnBaseDirective, mixinFractionalWidthColumnAPI, mixinGroupableColumnAPI } from '@ni/nimble-angular/table-column'; +import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; +import { NimbleTableColumnBaseDirective } from '@ni/nimble-angular/table-column'; export type { TableColumnAnchor }; export { tableColumnAnchorTag }; @@ -14,7 +14,7 @@ export { AnchorAppearance }; @Directive({ selector: 'nimble-table-column-anchor' }) -export class NimbleTableColumnAnchorDirective extends mixinFractionalWidthColumnAPI(mixinGroupableColumnAPI(NimbleTableColumnBaseDirective)) { +export class NimbleTableColumnAnchorDirective extends NimbleTableColumnBaseDirective { public get labelFieldName(): string | undefined { return this.elementRef.nativeElement.labelFieldName; } @@ -109,6 +109,46 @@ export class NimbleTableColumnAnchorDirective extends mixinFractionalWidthColumn this.renderer.setProperty(this.elementRef.nativeElement, 'download', value); } + public get fractionalWidth(): number | null | undefined { + return this.elementRef.nativeElement.fractionalWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('fractional-width') public set fractionalWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'fractionalWidth', toNullableNumberProperty(value)); + } + + public get minPixelWidth(): number | null | undefined { + return this.elementRef.nativeElement.minPixelWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('min-pixel-width') public set minPixelWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'minPixelWidth', toNullableNumberProperty(value)); + } + + public get groupIndex(): number | null | undefined { + return this.elementRef.nativeElement.groupIndex; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('group-index') public set groupIndex(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupIndex', toNullableNumberProperty(value)); + } + + public get groupingDisabled(): boolean { + return this.elementRef.nativeElement.groupingDisabled; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('grouping-disabled') public set groupingDisabled(value: BooleanValueOrAttribute) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value)); + } + public constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef); } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts index 1afd2abe3a..a8cb23981e 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/date-text/nimble-table-column-date-text.directive.ts @@ -1,6 +1,7 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; import { type TableColumnDateText, tableColumnDateTextTag } from '@ni/nimble-components/dist/esm/table-column/date-text'; -import { NimbleTableColumnBaseDirective, mixinFractionalWidthColumnAPI, mixinGroupableColumnAPI } from '@ni/nimble-angular/table-column'; +import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; +import { NimbleTableColumnBaseDirective } from '@ni/nimble-angular/table-column'; import { DateTextFormat, DateStyle, @@ -45,7 +46,7 @@ export { tableColumnDateTextTag }; @Directive({ selector: 'nimble-table-column-date-text' }) -export class NimbleTableColumnDateTextDirective extends mixinFractionalWidthColumnAPI(mixinGroupableColumnAPI(NimbleTableColumnBaseDirective)) { +export class NimbleTableColumnDateTextDirective extends NimbleTableColumnBaseDirective { public get fieldName(): string | undefined { return this.elementRef.nativeElement.fieldName; } @@ -262,6 +263,46 @@ export class NimbleTableColumnDateTextDirective extends mixinFractionalWidthColu this.renderer.setProperty(this.elementRef.nativeElement, 'customHourCycle', value); } + public get fractionalWidth(): number | null | undefined { + return this.elementRef.nativeElement.fractionalWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('fractional-width') public set fractionalWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'fractionalWidth', toNullableNumberProperty(value)); + } + + public get minPixelWidth(): number | null | undefined { + return this.elementRef.nativeElement.minPixelWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('min-pixel-width') public set minPixelWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'minPixelWidth', toNullableNumberProperty(value)); + } + + public get groupIndex(): number | null | undefined { + return this.elementRef.nativeElement.groupIndex; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('group-index') public set groupIndex(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupIndex', toNullableNumberProperty(value)); + } + + public get groupingDisabled(): boolean { + return this.elementRef.nativeElement.groupingDisabled; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('grouping-disabled') public set groupingDisabled(value: BooleanValueOrAttribute) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value)); + } + public constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef); } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/enum-text/nimble-table-column-enum-text.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/enum-text/nimble-table-column-enum-text.directive.ts index 170d7cd506..b4c09688b9 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/enum-text/nimble-table-column-enum-text.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/enum-text/nimble-table-column-enum-text.directive.ts @@ -1,6 +1,7 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; import { type TableColumnEnumText, tableColumnEnumTextTag } from '@ni/nimble-components/dist/esm/table-column/enum-text'; -import { NimbleTableColumnBaseDirective, mixinFractionalWidthColumnAPI, mixinGroupableColumnAPI } from '@ni/nimble-angular/table-column'; +import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; +import { NimbleTableColumnBaseDirective } from '@ni/nimble-angular/table-column'; import { MappingKeyType } from '@ni/nimble-components/dist/esm/table-column/enum-base/types'; export { MappingKeyType }; @@ -13,7 +14,7 @@ export { tableColumnEnumTextTag }; @Directive({ selector: 'nimble-table-column-enum-text' }) -export class NimbleTableColumnEnumTextDirective extends mixinFractionalWidthColumnAPI(mixinGroupableColumnAPI(NimbleTableColumnBaseDirective)) { +export class NimbleTableColumnEnumTextDirective extends NimbleTableColumnBaseDirective { public get fieldName(): string | undefined { return this.elementRef.nativeElement.fieldName; } @@ -34,6 +35,46 @@ export class NimbleTableColumnEnumTextDirective extends mixinFractionalWidthColu this.renderer.setProperty(this.elementRef.nativeElement, 'keyType', value); } + public get fractionalWidth(): number | null | undefined { + return this.elementRef.nativeElement.fractionalWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('fractional-width') public set fractionalWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'fractionalWidth', toNullableNumberProperty(value)); + } + + public get minPixelWidth(): number | null | undefined { + return this.elementRef.nativeElement.minPixelWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('min-pixel-width') public set minPixelWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'minPixelWidth', toNullableNumberProperty(value)); + } + + public get groupIndex(): number | null | undefined { + return this.elementRef.nativeElement.groupIndex; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('group-index') public set groupIndex(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupIndex', toNullableNumberProperty(value)); + } + + public get groupingDisabled(): boolean { + return this.elementRef.nativeElement.groupingDisabled; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('grouping-disabled') public set groupingDisabled(value: BooleanValueOrAttribute) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value)); + } + public constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef); } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts index 0eb3d90379..e3f969ab36 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts @@ -1,6 +1,7 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; import { type TableColumnIcon, tableColumnIconTag } from '@ni/nimble-components/dist/esm/table-column/icon'; -import { NimbleTableColumnBaseDirective, mixinFractionalWidthColumnAPI, mixinGroupableColumnAPI } from '@ni/nimble-angular/table-column'; +import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; +import { NimbleTableColumnBaseDirective } from '@ni/nimble-angular/table-column'; import type { MappingKeyType } from '@ni/nimble-components/dist/esm/table-column/enum-base/types'; export type { TableColumnIcon }; @@ -12,7 +13,7 @@ export { tableColumnIconTag }; @Directive({ selector: 'nimble-table-column-icon' }) -export class NimbleTableColumnIconDirective extends mixinFractionalWidthColumnAPI(mixinGroupableColumnAPI(NimbleTableColumnBaseDirective)) { +export class NimbleTableColumnIconDirective extends NimbleTableColumnBaseDirective { public get fieldName(): string | undefined { return this.elementRef.nativeElement.fieldName; } @@ -33,6 +34,46 @@ export class NimbleTableColumnIconDirective extends mixinFractionalWidthColumnAP this.renderer.setProperty(this.elementRef.nativeElement, 'keyType', value); } + public get fractionalWidth(): number | null | undefined { + return this.elementRef.nativeElement.fractionalWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('fractional-width') public set fractionalWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'fractionalWidth', toNullableNumberProperty(value)); + } + + public get minPixelWidth(): number | null | undefined { + return this.elementRef.nativeElement.minPixelWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('min-pixel-width') public set minPixelWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'minPixelWidth', toNullableNumberProperty(value)); + } + + public get groupIndex(): number | null | undefined { + return this.elementRef.nativeElement.groupIndex; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('group-index') public set groupIndex(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupIndex', toNullableNumberProperty(value)); + } + + public get groupingDisabled(): boolean { + return this.elementRef.nativeElement.groupingDisabled; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('grouping-disabled') public set groupingDisabled(value: BooleanValueOrAttribute) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value)); + } + public constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef); } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/mixins/fractional-width-column.ts b/angular-workspace/projects/ni/nimble-angular/table-column/mixins/fractional-width-column.ts deleted file mode 100644 index 65ce893a66..0000000000 --- a/angular-workspace/projects/ni/nimble-angular/table-column/mixins/fractional-width-column.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Directive, Input } from '@angular/core'; -import { NumberValueOrAttribute, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; -import type { TableColumn } from '@ni/nimble-components/dist/esm/table-column/base'; -import type { NimbleTableColumnBaseDirective } from '../nimble-table-column-base.directive'; - -type FractionalWidthColumn = TableColumn & { - fractionalWidth?: number | null, - minPixelWidth?: number | null -}; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type FractionalWidthColumnDirectiveConstructor = abstract new (...args: any[]) => NimbleTableColumnBaseDirective; - -// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -export function mixinFractionalWidthColumnAPI>(base: TBase) { - /** - * The Mixin that provides a concrete column directive with the API to support being resized - * proportionally within a Table. - */ - @Directive() - abstract class FractionalWidthColumnDirective extends base { - public get fractionalWidth(): number | null | undefined { - return this.elementRef.nativeElement.fractionalWidth; - } - - // Renaming because property should have camel casing, but attribute should not - // eslint-disable-next-line @angular-eslint/no-input-rename - @Input('fractional-width') public set fractionalWidth(value: NumberValueOrAttribute | null | undefined) { - this.renderer.setProperty(this.elementRef.nativeElement, 'fractionalWidth', toNullableNumberProperty(value)); - } - - public get minPixelWidth(): number | null | undefined { - return this.elementRef.nativeElement.minPixelWidth; - } - - // Renaming because property should have camel casing, but attribute should not - // eslint-disable-next-line @angular-eslint/no-input-rename - @Input('min-pixel-width') public set minPixelWidth(value: NumberValueOrAttribute | null | undefined) { - this.renderer.setProperty(this.elementRef.nativeElement, 'minPixelWidth', toNullableNumberProperty(value)); - } - } - return FractionalWidthColumnDirective; -} \ No newline at end of file diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/mixins/groupable-column.ts b/angular-workspace/projects/ni/nimble-angular/table-column/mixins/groupable-column.ts deleted file mode 100644 index 10faf06386..0000000000 --- a/angular-workspace/projects/ni/nimble-angular/table-column/mixins/groupable-column.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Directive, Input } from '@angular/core'; -import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; -import type { TableColumn } from '@ni/nimble-components/dist/esm/table-column/base'; -import type { NimbleTableColumnBaseDirective } from '../nimble-table-column-base.directive'; - -type GroupableColumn = TableColumn & { - groupingDisabled: boolean, - groupIndex?: number | null -}; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type GroupableColumnDirectiveConstructor = abstract new (...args: any[]) => NimbleTableColumnBaseDirective; - -// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -export function mixinGroupableColumnAPI>(base: TBase) { - /** - * The Mixin that provides a concrete column directive with the API to allow grouping - * by the values in that column. - */ - @Directive() - abstract class GroupableColumnDirective extends base { - public get groupIndex(): number | null | undefined { - return this.elementRef.nativeElement.groupIndex; - } - - // Renaming because property should have camel casing, but attribute should not - // eslint-disable-next-line @angular-eslint/no-input-rename - @Input('group-index') public set groupIndex(value: NumberValueOrAttribute | null | undefined) { - this.renderer.setProperty(this.elementRef.nativeElement, 'groupIndex', toNullableNumberProperty(value)); - } - - public get groupingDisabled(): boolean { - return this.elementRef.nativeElement.groupingDisabled; - } - - // Renaming because property should have camel casing, but attribute should not - // eslint-disable-next-line @angular-eslint/no-input-rename - @Input('grouping-disabled') public set groupingDisabled(value: BooleanValueOrAttribute) { - this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value)); - } - } - return GroupableColumnDirective; -} \ No newline at end of file diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/nimble-table-column-base.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/nimble-table-column-base.directive.ts index a733c0aa42..1e20797476 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/nimble-table-column-base.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/nimble-table-column-base.directive.ts @@ -71,15 +71,7 @@ export class NimbleTableColumnBaseDirective { this.renderer.setProperty(this.elementRef.nativeElement, 'sortIndex', toNullableNumberProperty(value)); } - /** @internal */ - public readonly renderer: Renderer2; - /** @internal */ - public readonly elementRef: ElementRef; - - public constructor(renderer: Renderer2, elementRef: ElementRef) { - this.renderer = renderer; - this.elementRef = elementRef; - } + public constructor(protected readonly renderer: Renderer2, protected readonly elementRef: ElementRef) {} public checkValidity(): boolean { return this.elementRef.nativeElement.checkValidity(); diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts index 9210404904..d2921e854e 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/number-text/nimble-table-column-number-text.directive.ts @@ -1,6 +1,6 @@ import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; -import { NumberValueOrAttribute, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; -import { NimbleTableColumnBaseDirective, mixinFractionalWidthColumnAPI, mixinGroupableColumnAPI } from '@ni/nimble-angular/table-column'; +import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; +import { NimbleTableColumnBaseDirective } from '@ni/nimble-angular/table-column'; import { type TableColumnNumberText, tableColumnNumberTextTag } from '@ni/nimble-components/dist/esm/table-column/number-text'; import { NumberTextAlignment, NumberTextFormat } from '@ni/nimble-components/dist/esm/table-column/number-text/types'; @@ -13,7 +13,7 @@ export { tableColumnNumberTextTag, NumberTextFormat, NumberTextAlignment }; @Directive({ selector: 'nimble-table-column-number-text' }) -export class NimbleTableColumnNumberTextDirective extends mixinFractionalWidthColumnAPI(mixinGroupableColumnAPI(NimbleTableColumnBaseDirective)) { +export class NimbleTableColumnNumberTextDirective extends NimbleTableColumnBaseDirective { public get fieldName(): string | undefined { return this.elementRef.nativeElement.fieldName; } @@ -50,6 +50,46 @@ export class NimbleTableColumnNumberTextDirective extends mixinFractionalWidthCo this.renderer.setProperty(this.elementRef.nativeElement, 'decimalDigits', toNullableNumberProperty(value)); } + public get fractionalWidth(): number | null | undefined { + return this.elementRef.nativeElement.fractionalWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('fractional-width') public set fractionalWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'fractionalWidth', toNullableNumberProperty(value)); + } + + public get minPixelWidth(): number | null | undefined { + return this.elementRef.nativeElement.minPixelWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('min-pixel-width') public set minPixelWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'minPixelWidth', toNullableNumberProperty(value)); + } + + public get groupIndex(): number | null | undefined { + return this.elementRef.nativeElement.groupIndex; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('group-index') public set groupIndex(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupIndex', toNullableNumberProperty(value)); + } + + public get groupingDisabled(): boolean { + return this.elementRef.nativeElement.groupingDisabled; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('grouping-disabled') public set groupingDisabled(value: BooleanValueOrAttribute) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value)); + } + public constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef); } diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/public-api.ts b/angular-workspace/projects/ni/nimble-angular/table-column/public-api.ts index b6cb8d49c5..ec5cec211f 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/public-api.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/public-api.ts @@ -1,3 +1 @@ -export * from './nimble-table-column-base.directive'; -export * from './mixins/groupable-column'; -export * from './mixins/fractional-width-column'; \ No newline at end of file +export * from './nimble-table-column-base.directive'; \ No newline at end of file diff --git a/angular-workspace/projects/ni/nimble-angular/table-column/text/nimble-table-column-text.directive.ts b/angular-workspace/projects/ni/nimble-angular/table-column/text/nimble-table-column-text.directive.ts index 9c78584d57..39b7d92dfd 100644 --- a/angular-workspace/projects/ni/nimble-angular/table-column/text/nimble-table-column-text.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/table-column/text/nimble-table-column-text.directive.ts @@ -1,6 +1,7 @@ -import { Directive, Input } from '@angular/core'; +import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; import { type TableColumnText, tableColumnTextTag } from '@ni/nimble-components/dist/esm/table-column/text'; -import { NimbleTableColumnBaseDirective, mixinGroupableColumnAPI, mixinFractionalWidthColumnAPI } from '@ni/nimble-angular/table-column'; +import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities'; +import { NimbleTableColumnBaseDirective } from '@ni/nimble-angular/table-column'; export type { TableColumnText }; export { tableColumnTextTag }; @@ -11,7 +12,7 @@ export { tableColumnTextTag }; @Directive({ selector: 'nimble-table-column-text' }) -export class NimbleTableColumnTextDirective extends mixinFractionalWidthColumnAPI(mixinGroupableColumnAPI(NimbleTableColumnBaseDirective)) { +export class NimbleTableColumnTextDirective extends NimbleTableColumnBaseDirective { public get fieldName(): string | undefined { return this.elementRef.nativeElement.fieldName; } @@ -21,4 +22,48 @@ export class NimbleTableColumnTextDirective extends mixinFractionalWidthColumnAP @Input('field-name') public set fieldName(value: string | undefined) { this.renderer.setProperty(this.elementRef.nativeElement, 'fieldName', value); } + + public get fractionalWidth(): number | null | undefined { + return this.elementRef.nativeElement.fractionalWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('fractional-width') public set fractionalWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'fractionalWidth', toNullableNumberProperty(value)); + } + + public get minPixelWidth(): number | null | undefined { + return this.elementRef.nativeElement.minPixelWidth; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('min-pixel-width') public set minPixelWidth(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'minPixelWidth', toNullableNumberProperty(value)); + } + + public get groupIndex(): number | null | undefined { + return this.elementRef.nativeElement.groupIndex; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('group-index') public set groupIndex(value: NumberValueOrAttribute | null | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupIndex', toNullableNumberProperty(value)); + } + + public get groupingDisabled(): boolean { + return this.elementRef.nativeElement.groupingDisabled; + } + + // Renaming because property should have camel casing, but attribute should not + // eslint-disable-next-line @angular-eslint/no-input-rename + @Input('grouping-disabled') public set groupingDisabled(value: BooleanValueOrAttribute) { + this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value)); + } + + public constructor(renderer: Renderer2, elementRef: ElementRef) { + super(renderer, elementRef); + } } diff --git a/change/@ni-nimble-angular-67043ffb-1f5b-43fa-8f67-46599b4f2053.json b/change/@ni-nimble-angular-67043ffb-1f5b-43fa-8f67-46599b4f2053.json new file mode 100644 index 0000000000..f405782a70 --- /dev/null +++ b/change/@ni-nimble-angular-67043ffb-1f5b-43fa-8f67-46599b4f2053.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Revert \"Create Angular mixins for fractional-width columns and groupable columns (#1587)\"", + "packageName": "@ni/nimble-angular", + "email": "rajsite@users.noreply.github.com", + "dependentChangeType": "patch" +}