From 0bb9b72f8f999fad2ac3a4ca16f48cac8f638294 Mon Sep 17 00:00:00 2001 From: xidedix Date: Thu, 13 Jul 2023 17:37:39 +0200 Subject: [PATCH 1/4] refactor: @Input() transform option of @angular/core@16.1 instead of @angular/cdk coerce functions (partial) --- .../src/lib/chartjs.component.ts | 40 ++------- .../accordion-item.component.ts | 32 +++---- .../src/lib/button/button-close.directive.ts | 15 +--- .../src/lib/button/button.directive.ts | 36 +++----- .../dropdown-menu/dropdown-menu.directive.ts | 18 ++-- .../form/form-check/form-check.component.ts | 46 ++-------- .../form-control/form-control.directive.ts | 21 ++--- .../form-feedback/form-feedback.component.ts | 16 ++-- .../form-floating/form-floating.directive.ts | 18 +--- .../src/lib/form/form/form.directive.ts | 18 +--- .../src/lib/grid/container.component.ts | 22 ++--- .../src/lib/grid/container.type.ts | 2 +- .../src/lib/image/img.directive.ts | 39 ++------- .../list-group/list-group-item.directive.ts | 21 ++--- .../lib/list-group/list-group.directive.ts | 21 ++--- .../src/lib/nav/nav-link.directive.ts | 28 ++---- .../navbar/navbar-nav/navbar-nav.component.ts | 14 +-- .../placeholder-animation.directive.ts | 10 +-- .../lib/placeholder/placeholder.directive.ts | 2 +- .../lib/progress/progress-bar.component.ts | 42 ++++----- .../src/lib/progress/progress.component.ts | 34 +------- .../src/lib/table/table-active.directive.ts | 20 +---- .../src/lib/table/table.directive.ts | 85 +++---------------- .../widget-stat-b/widget-stat-b.component.ts | 16 +--- .../widget-stat-c/widget-stat-c.component.ts | 24 +++--- .../widget-stat-f/widget-stat-f.component.ts | 31 +++---- .../src/lib/icon/icon.component.spec.ts | 2 +- .../src/lib/icon/icon.component.ts | 18 +--- .../src/lib/icon/icon.directive.ts | 23 ++--- .../src/lib/icon/icon.utils.ts | 5 ++ .../src/lib/icon/public_api.ts | 1 + 31 files changed, 181 insertions(+), 539 deletions(-) create mode 100644 projects/coreui-icons-angular/src/lib/icon/icon.utils.ts diff --git a/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts b/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts index f22b4d4f..a2981c39 100644 --- a/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts +++ b/projects/coreui-angular-chartjs/src/lib/chartjs.component.ts @@ -1,5 +1,6 @@ import { AfterViewInit, + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -8,6 +9,7 @@ import { HostBinding, Input, NgZone, + numberAttribute, OnChanges, OnDestroy, Output, @@ -15,7 +17,6 @@ import { SimpleChanges, ViewChild } from '@angular/core'; -import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, NumberInput } from '@angular/cdk/coercion'; import merge from 'lodash-es/merge'; @@ -36,53 +37,22 @@ let nextId = 0; }) export class ChartjsComponent, TLabel = unknown> implements AfterViewInit, OnDestroy, OnChanges { - static ngAcceptInputType_height: NumberInput; - static ngAcceptInputType_width: NumberInput; - static ngAcceptInputType_redraw: BooleanInput; - @Input() customTooltips = true; @Input() data?: ChartConfiguration['data']; @HostBinding('style.height.px') - @Input() - set height(value: number | undefined) { - this._height = coerceNumberProperty(value); - } - - get height() { - return this._height; - } - - private _height: number | undefined; + @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) height?: string | number; @Input() id = `c-chartjs-${nextId++}`; @Input() options?: ChartConfiguration['options']; @Input() plugins: ChartConfiguration['plugins'] = []; - @Input() - set redraw(value: boolean) { - this._redraw = coerceBooleanProperty(value); - } - - get redraw(): boolean { - return this._redraw; - } - - private _redraw = false; + @Input({ transform: booleanAttribute }) redraw: string | boolean = false; @Input() type: ChartConfiguration['type'] = 'bar' as TType; @HostBinding('style.width.px') - @Input() - set width(value: number | undefined) { - this._width = coerceNumberProperty(value); - } - - get width() { - return this._width; - } - - private _width: number | undefined; + @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) width?: string | number; @Input() wrapper = true; diff --git a/projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts b/projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts index bf63ee4f..09059cda 100644 --- a/projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts +++ b/projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts @@ -1,5 +1,6 @@ import { AfterContentInit, + booleanAttribute, Component, ContentChildren, HostBinding, @@ -9,7 +10,6 @@ import { QueryList } from '@angular/core'; import { NgTemplateOutlet } from '@angular/common'; -import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; import { CollapseDirective } from '../../collapse'; import { TemplateIdDirective } from '../../shared'; @@ -32,31 +32,12 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn private accordionService: AccordionService ) { } - static ngAcceptInputType_visible: BooleanInput; - contentId = `accordion-item-${nextId++}`; - itemContext = { $implicit: this.visible }; - templates: any = {}; - @ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList; - - private _visible: boolean = false; - - get visible() { - return this._visible; - } - /** * Toggle an accordion item programmatically * @type boolean * @default false */ - @Input() - set visible(value: boolean) { - this._visible = coerceBooleanProperty(value); - } - - get open() { - return this.visible; - } + @Input({ transform: booleanAttribute }) visible: string | boolean = false; @Input() set open(value: boolean) { @@ -64,6 +45,10 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn this.visible = value || this.visible; } + get open() { + return this.visible; + } + @HostBinding('class') get hostClasses(): any { return { @@ -71,6 +56,11 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn }; } + contentId = `accordion-item-${nextId++}`; + itemContext = { $implicit: this.visible }; + templates: any = {}; + @ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList; + ngOnInit(): void { this.accordionService.addItem(this); } diff --git a/projects/coreui-angular/src/lib/button/button-close.directive.ts b/projects/coreui-angular/src/lib/button/button-close.directive.ts index 1d095c09..fcd4d9a4 100644 --- a/projects/coreui-angular/src/lib/button/button-close.directive.ts +++ b/projects/coreui-angular/src/lib/button/button-close.directive.ts @@ -1,5 +1,4 @@ -import { Directive, HostBinding, Input } from '@angular/core'; -import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'; +import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core'; import { ButtonDirective } from './button.directive'; @Directive({ @@ -8,19 +7,11 @@ import { ButtonDirective } from './button.directive'; }) export class ButtonCloseDirective extends ButtonDirective { - static ngAcceptInputType_white: BooleanInput; - private _white = false; /** * Change the default color to white. * @type boolean */ - @Input() - get white(): boolean { - return this._white; - } - set white(value: boolean) { - this._white = coerceBooleanProperty(value); - } + @Input({ transform: booleanAttribute }) white: string | boolean = false; @HostBinding('class') override get hostClasses(): any { @@ -30,7 +21,7 @@ export class ButtonCloseDirective extends ButtonDirective { 'btn-close-white': this.white, [`btn-${this.size}`]: !!this.size, disabled: this.disabled, - active: this.active, + active: this.active }; } } diff --git a/projects/coreui-angular/src/lib/button/button.directive.ts b/projects/coreui-angular/src/lib/button/button.directive.ts index e7257478..7e18f17c 100644 --- a/projects/coreui-angular/src/lib/button/button.directive.ts +++ b/projects/coreui-angular/src/lib/button/button.directive.ts @@ -1,5 +1,4 @@ -import { Directive, HostBinding, Input } from '@angular/core'; -import { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion'; +import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core'; import { ButtonType, Colors, Shapes } from '../coreui.types'; @@ -10,24 +9,11 @@ import { ButtonType, Colors, Shapes } from '../coreui.types'; }) export class ButtonDirective { - constructor() {} - - static ngAcceptInputType_active: BooleanInput; - private _active = false; - static ngAcceptInputType_disabled: BooleanInput; - private _disabled = false; - /** * Toggle the active state for the component. [docs] * @type boolean */ - @Input() - get active(): boolean { - return this._active; - } - set active(value: boolean) { - this._active = coerceBooleanProperty(value); - } + @Input({ transform: booleanAttribute }) active: string | boolean = false; /** * Sets the color context of the component to one of CoreUI’s themed colors. [docs] @@ -38,29 +24,27 @@ export class ButtonDirective { * Toggle the disabled state for the component. * @type boolean */ - @Input() - get disabled(): boolean { - return this._disabled; - } - set disabled(value: boolean) { - this._disabled = coerceBooleanProperty(value); - } + @Input({ transform: booleanAttribute }) disabled: string | boolean = false; + /** * Select the shape of the component. * @type { 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string } */ @Input() shape?: Shapes; + /** * Size the component small or large. * @type {'sm' | 'lg'} */ @Input() size?: 'sm' | 'lg' | '' = ''; + /** * Specifies the type of button. Always specify the type attribute for the `