From 995a0bf0816934583a4f6027cb117f29de999a39 Mon Sep 17 00:00:00 2001 From: xidedix Date: Fri, 16 Aug 2024 16:32:53 +0200 Subject: [PATCH 1/4] chore(dependencies): update to Angular 18.2 --- package.json | 42 ++++++++++---------- projects/coreui-angular-chartjs/package.json | 2 +- projects/coreui-angular/package.json | 14 +++---- projects/coreui-icons-angular/package.json | 6 +-- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 1f5f8df0..92ae08c4 100644 --- a/package.json +++ b/package.json @@ -39,16 +39,16 @@ }, "private": true, "dependencies": { - "@angular/animations": "^18.1.4", - "@angular/cdk": "^18.1.4", - "@angular/common": "^18.1.4", - "@angular/compiler": "^18.1.4", - "@angular/core": "^18.1.4", - "@angular/forms": "^18.1.4", - "@angular/localize": "^18.1.4", - "@angular/platform-browser": "^18.1.4", - "@angular/platform-browser-dynamic": "^18.1.4", - "@angular/router": "^18.1.4", + "@angular/animations": "^18.2.0", + "@angular/cdk": "^18.2.0", + "@angular/common": "^18.2.0", + "@angular/compiler": "^18.2.0", + "@angular/core": "^18.2.0", + "@angular/forms": "^18.2.0", + "@angular/localize": "^18.2.0", + "@angular/platform-browser": "^18.2.0", + "@angular/platform-browser-dynamic": "^18.2.0", + "@angular/router": "^18.2.0", "@coreui/chartjs": "^4.0.0", "@coreui/icons": "^3.0.1", "@popperjs/core": "~2.11.8", @@ -59,27 +59,27 @@ "zone.js": "~0.14.10" }, "devDependencies": { - "@angular-devkit/build-angular": "^18.1.4", - "@angular-devkit/schematics": "^18.1.4", - "@angular/cli": "^18.1.4", - "@angular/compiler-cli": "^18.1.4", - "@angular/language-service": "^18.1.4", + "@angular-devkit/build-angular": "^18.2.0", + "@angular-devkit/schematics": "^18.2.0", + "@angular/cli": "^18.2.0", + "@angular/compiler-cli": "^18.2.0", + "@angular/language-service": "^18.2.0", "@types/jasmine": "^5.1.4", "@types/lodash-es": "^4.17.12", - "@types/node": "^20.14.14", - "angular-eslint": "~18.2.0", + "@types/node": "^20.14.15", + "angular-eslint": "~18.3.0", "copyfiles": "^2.4.1", - "eslint": "^9.8.0", + "eslint": "^9.9.0", "jasmine-core": "^5.2.0", "karma": "^6.4.4", "karma-chrome-launcher": "^3.2.0", "karma-coverage": "^2.2.1", "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.1.0", - "ng-packagr": "^18.1.0", + "ng-packagr": "^18.2.0", "prettier": "^3.3.3", - "typescript": "~5.4.5", - "typescript-eslint": "~8.0.1" + "typescript": "~5.5.4", + "typescript-eslint": "~8.1.0" }, "keywords": [ "angular", diff --git a/projects/coreui-angular-chartjs/package.json b/projects/coreui-angular-chartjs/package.json index ea59a8da..1b964374 100644 --- a/projects/coreui-angular-chartjs/package.json +++ b/projects/coreui-angular-chartjs/package.json @@ -25,7 +25,7 @@ "url": "https://github.com/coreui/coreui-angular/issues" }, "peerDependencies": { - "@angular/core": "^18.1.0", + "@angular/core": "^18.2.0", "@coreui/chartjs": "^4.0.0", "chart.js": "^4.4.3" }, diff --git a/projects/coreui-angular/package.json b/projects/coreui-angular/package.json index 55f35a3b..784e9657 100644 --- a/projects/coreui-angular/package.json +++ b/projects/coreui-angular/package.json @@ -23,13 +23,13 @@ }, "sideEffects": false, "peerDependencies": { - "@angular/animations": "^18.1.0", - "@angular/cdk": "^18.1.0", - "@angular/common": "^18.1.0", - "@angular/core": "^18.1.0", - "@angular/router": "^18.1.0", - "@coreui/coreui": "^5.1.0", - "@coreui/icons-angular": "~5.2.11", + "@angular/animations": "^18.2.0", + "@angular/cdk": "^18.2.0", + "@angular/common": "^18.2.0", + "@angular/core": "^18.2.0", + "@angular/router": "^18.2.0", + "@coreui/coreui": "^5.1.1", + "@coreui/icons-angular": "~5.2.14", "rxjs": "^7.8.1" }, "repository": { diff --git a/projects/coreui-icons-angular/package.json b/projects/coreui-icons-angular/package.json index b65645af..dc725a68 100644 --- a/projects/coreui-icons-angular/package.json +++ b/projects/coreui-icons-angular/package.json @@ -25,9 +25,9 @@ "url": "https://github.com/coreui/coreui-angular/issues" }, "peerDependencies": { - "@angular/common": "^18.1.0", - "@angular/core": "^18.1.0", - "@angular/platform-browser": "^18.1.0" + "@angular/common": "^18.2.0", + "@angular/core": "^18.2.0", + "@angular/platform-browser": "^18.2.0" }, "dependencies": { "tslib": "^2.3.0" From 9ebc54b23c66505ffdab8f601b30128a242f0fd6 Mon Sep 17 00:00:00 2001 From: xidedix Date: Fri, 16 Aug 2024 18:14:43 +0200 Subject: [PATCH 2/4] refactor(button): input signals --- .../button-group/button-group.component.ts | 29 ++++---- .../button-toolbar.component.ts | 10 ++- .../lib/button/button-close.directive.spec.ts | 7 +- .../src/lib/button/button-close.directive.ts | 21 +++--- .../src/lib/button/button.directive.spec.ts | 8 +-- .../src/lib/button/button.directive.ts | 72 ++++++++++--------- 6 files changed, 76 insertions(+), 71 deletions(-) diff --git a/projects/coreui-angular/src/lib/button-group/button-group/button-group.component.ts b/projects/coreui-angular/src/lib/button-group/button-group/button-group.component.ts index 567bb72d..ada0f52e 100644 --- a/projects/coreui-angular/src/lib/button-group/button-group/button-group.component.ts +++ b/projects/coreui-angular/src/lib/button-group/button-group/button-group.component.ts @@ -1,37 +1,36 @@ -import { Component, HostBinding, Input } from '@angular/core'; +import { booleanAttribute, Component, computed, input, InputSignal, InputSignalWithTransform } from '@angular/core'; @Component({ selector: 'c-button-group', template: '', - standalone: true + standalone: true, + host: { '[attr.role]': 'role()', '[class]': 'hostClasses()' } }) export class ButtonGroupComponent { - /** * Size the component small or large. * @type { 'sm' | 'lg' } */ - @Input() size?: 'sm' | 'lg'; + size: InputSignal<'sm' | 'lg' | undefined> = input(); + /** * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. * @type boolean */ - @Input() vertical?: boolean; + vertical: InputSignalWithTransform = input(false, { transform: booleanAttribute }); + /** * Default role attr for ButtonGroup. [docs] - * @type string + * @type InputSignal * @default 'group' */ - @HostBinding('attr.role') - @Input() role = 'group'; + role: InputSignal = input('group'); - @HostBinding('class') - get hostClasses(): any { + hostClasses = computed(() => { return { - 'btn-group': !this.vertical, - 'btn-group-vertical': this.vertical, - [`btn-group-${this.size}`]: !!this.size + 'btn-group': !this.vertical(), + 'btn-group-vertical': this.vertical(), + [`btn-group-${this.size()}`]: !!this.size() }; - } - + }); } diff --git a/projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.ts b/projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.ts index c915ce4a..da519027 100644 --- a/projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.ts +++ b/projects/coreui-angular/src/lib/button-group/button-toolbar/button-toolbar.component.ts @@ -1,18 +1,16 @@ -import { Component, HostBinding, Input } from '@angular/core'; +import { Component, input, InputSignal } from '@angular/core'; @Component({ selector: 'c-button-toolbar', template: '', standalone: true, - host: { class: 'btn-toolbar' } + host: { class: 'btn-toolbar', '[attr.role]': 'role()' } }) export class ButtonToolbarComponent { /** * Default role attr for ButtonToolbar. [docs] - * @type string + * @type InputSignal * @default 'toolbar' */ - @HostBinding('attr.role') - @Input() - role = 'toolbar'; + role: InputSignal = input('toolbar'); } diff --git a/projects/coreui-angular/src/lib/button/button-close.directive.spec.ts b/projects/coreui-angular/src/lib/button/button-close.directive.spec.ts index e7ef9407..b7423c37 100644 --- a/projects/coreui-angular/src/lib/button/button-close.directive.spec.ts +++ b/projects/coreui-angular/src/lib/button/button-close.directive.spec.ts @@ -13,7 +13,6 @@ class MockElementRef extends ElementRef {} class TestComponent {} describe('ButtonCloseDirective', () => { - let component: TestComponent; let fixture: ComponentFixture; let elementRef: DebugElement; @@ -32,8 +31,10 @@ describe('ButtonCloseDirective', () => { }); it('should create an instance', () => { - const directive = new ButtonCloseDirective(); - expect(directive).toBeTruthy(); + TestBed.runInInjectionContext(() => { + const directive = new ButtonCloseDirective(); + expect(directive).toBeTruthy(); + }); }); it('should have css classes', () => { 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 3e5c0781..79e0404d 100644 --- a/projects/coreui-angular/src/lib/button/button-close.directive.ts +++ b/projects/coreui-angular/src/lib/button/button-close.directive.ts @@ -1,4 +1,4 @@ -import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core'; +import { booleanAttribute, computed, Directive, input, InputSignalWithTransform } from '@angular/core'; import { ThemeDirective } from '../shared/theme.directive'; import { ButtonDirective } from './button.directive'; @@ -6,7 +6,7 @@ import { ButtonDirective } from './button.directive'; selector: '[cButtonClose]', standalone: true, hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], - host: { class: 'btn btn-close' } + host: { class: 'btn btn-close', '[class]': 'hostClasses()', '[attr.type]': 'type()' } }) export class ButtonCloseDirective extends ButtonDirective { /** @@ -14,17 +14,16 @@ export class ButtonCloseDirective extends ButtonDirective { * @type boolean * @deprecated 5.0.0. Use `cButtonClose.dark` instead. */ - @Input({ transform: booleanAttribute }) white: string | boolean = false; + white: InputSignalWithTransform = input(false, { transform: booleanAttribute }); - @HostBinding('class') - override get hostClasses(): any { + override hostClasses = computed(() => { return { btn: true, 'btn-close': true, - 'btn-close-white': this.white, - [`btn-${this.size}`]: !!this.size, - disabled: this.disabled, - active: this.active - }; - } + 'btn-close-white': this.white(), + [`btn-${this.size()}`]: !!this.size(), + disabled: this.disabled(), + active: this.active() + } as Record; + }); } diff --git a/projects/coreui-angular/src/lib/button/button.directive.spec.ts b/projects/coreui-angular/src/lib/button/button.directive.spec.ts index e41675e1..e7014eb5 100644 --- a/projects/coreui-angular/src/lib/button/button.directive.spec.ts +++ b/projects/coreui-angular/src/lib/button/button.directive.spec.ts @@ -13,7 +13,6 @@ class MockElementRef extends ElementRef {} class TestComponent {} describe('ButtonDirective', () => { - let component: TestComponent; let fixture: ComponentFixture; let elementRef: DebugElement; @@ -32,8 +31,10 @@ describe('ButtonDirective', () => { }); it('should create an instance', () => { - const directive = new ButtonDirective(); - expect(directive).toBeTruthy(); + TestBed.runInInjectionContext(() => { + const directive = new ButtonDirective(); + expect(directive).toBeTruthy(); + }); }); it('should have css classes', () => { @@ -41,5 +42,4 @@ describe('ButtonDirective', () => { expect(elementRef.nativeElement).toHaveClass('btn-lg'); expect(elementRef.nativeElement).toHaveClass('btn-info'); }); - }); diff --git a/projects/coreui-angular/src/lib/button/button.directive.ts b/projects/coreui-angular/src/lib/button/button.directive.ts index d678946e..e851cf95 100644 --- a/projects/coreui-angular/src/lib/button/button.directive.ts +++ b/projects/coreui-angular/src/lib/button/button.directive.ts @@ -1,4 +1,12 @@ -import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core'; +import { + booleanAttribute, + computed, + Directive, + HostBinding, + input, + InputSignal, + InputSignalWithTransform +} from '@angular/core'; import { ButtonType, Colors, Shapes } from '../coreui.types'; @@ -6,83 +14,83 @@ import { ButtonType, Colors, Shapes } from '../coreui.types'; selector: '[cButton]', exportAs: 'cButton', standalone: true, - host: { class: 'btn' } + host: { class: 'btn', '[class]': 'hostClasses()', '[attr.type]': 'type()' } }) export class ButtonDirective { /** * Toggle the active state for the component. [docs] - * @type boolean + * @type InputSignalWithTransform */ - @Input({ transform: booleanAttribute }) active: string | boolean = false; + active: InputSignalWithTransform = input(false, { transform: booleanAttribute }); /** * Sets the color context of the component to one of CoreUI’s themed colors. [docs] - * @type Colors + * @type InputSignal */ - @Input() color?: Colors = 'primary'; + color: InputSignal = input('primary'); + /** * Toggle the disabled state for the component. - * @type boolean + * @type InputSignalWithTransform */ - @Input({ transform: booleanAttribute }) disabled: string | boolean = false; + disabled: InputSignalWithTransform = input(false, { transform: booleanAttribute }); /** * 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 } + * @type InputSignal */ - @Input() shape?: Shapes; + shape: InputSignal = input(); /** * Size the component small or large. - * @type {'sm' | 'lg'} + * @type InputSignal<'sm' | 'lg' | ''> */ - @Input() size?: 'sm' | 'lg' | '' = ''; + size: InputSignal<'' | 'sm' | 'lg'> = input<'' | 'sm' | 'lg'>(''); /** * Specifies the type of button. Always specify the type attribute for the `