From 0b782fe4cb7d99ecc108d1f61879d0969f232017 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 25 Nov 2025 16:02:43 +0100 Subject: [PATCH 1/3] refactor(modal): visible signal, cleanup --- .../src/lib/modal/modal/modal.component.html | 3 +- .../src/lib/modal/modal/modal.component.ts | 52 ++++++++----------- 2 files changed, 25 insertions(+), 30 deletions(-) diff --git a/projects/coreui-angular/src/lib/modal/modal/modal.component.html b/projects/coreui-angular/src/lib/modal/modal/modal.component.html index c060ce9e..7c05bc41 100644 --- a/projects/coreui-angular/src/lib/modal/modal/modal.component.html +++ b/projects/coreui-angular/src/lib/modal/modal/modal.component.html @@ -4,7 +4,8 @@ [scrollable]="scrollable()" [size]="size()"> -
+ @let isVisible = visible(); +
diff --git a/projects/coreui-angular/src/lib/modal/modal/modal.component.ts b/projects/coreui-angular/src/lib/modal/modal/modal.component.ts index 279c9b7f..f5829c03 100644 --- a/projects/coreui-angular/src/lib/modal/modal/modal.component.ts +++ b/projects/coreui-angular/src/lib/modal/modal/modal.component.ts @@ -1,5 +1,6 @@ import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations'; import { A11yModule, FocusMonitor } from '@angular/cdk/a11y'; +import { BooleanInput } from '@angular/cdk/coercion'; import { AfterViewInit, booleanAttribute, @@ -11,14 +12,14 @@ import { ElementRef, inject, input, + linkedSignal, OnDestroy, OnInit, output, Renderer2, signal, untracked, - viewChild, - WritableSignal + viewChild } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @@ -66,6 +67,10 @@ import { ModalDialogComponent } from '../modal-dialog/modal-dialog.component'; } }) export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { + static ngAcceptInputType_ariaModalInput: BooleanInput; + static ngAcceptInputType_scrollable: BooleanInput; + static ngAcceptInputType_visibleInput: BooleanInput; + readonly #document = inject(DOCUMENT); readonly #renderer = inject(Renderer2); readonly #hostElement = inject(ElementRef); @@ -136,7 +141,7 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { readonly ariaModalInput = input(false, { transform: booleanAttribute, alias: 'ariaModal' }); readonly ariaModal = computed(() => { - return this.visible || this.ariaModalInput() ? true : null; + return this.visible() || this.ariaModalInput() ? true : null; }); /** @@ -153,32 +158,21 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { */ readonly visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' }); + readonly visible = linkedSignal(this.visibleInput); + readonly #visibleInputEffect = effect(() => { - const visible = this.visibleInput(); + const visible = this.visible(); untracked(() => { - this.visible = visible; + this.setBodyStyles(visible); + this.setBackdrop(this.backdrop() !== false && visible); + this.visibleChange?.emit(visible); }); }); - set visible(value: boolean) { - if (this.#visible() !== value) { - this.#visible.set(value); - this.setBodyStyles(value); - this.setBackdrop(this.backdrop() !== false && value); - this.visibleChange?.emit(value); - } - } - - get visible(): boolean { - return this.#visible(); - } - - readonly #visible: WritableSignal = signal(false); - readonly #activeElement = signal(null); readonly #visibleEffect = effect(() => { - const visible = this.#visible(); + const visible = this.visible(); const afterViewInit = this.#afterViewInit(); untracked(() => { if (visible && afterViewInit) { @@ -229,15 +223,15 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { }); get ariaHidden(): boolean | null { - return this.visible ? null : true; + return this.visible() ? null : true; } readonly animateTrigger = computed(() => { - return this.visible ? 'visible' : 'hidden'; + return this.visible() ? 'visible' : 'hidden'; }); get show(): boolean { - return this.visible && this.#show(); + return this.visible() && this.#show(); } set show(value: boolean) { @@ -264,11 +258,11 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { this.#backdropService.resetScrollbar(); } }); - this.show = this.visible; + this.show = this.visible(); } onKeyUpHandler(event: KeyboardEvent): void { - if (event.key === 'Escape' && this.keyboard() && this.visible) { + if (event.key === 'Escape' && this.keyboard() && this.visible()) { if (this.backdrop() === 'static') { this.setStaticBackdrop(); } else { @@ -319,11 +313,11 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit { this.#modalService.modalState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => { if (this === action.modal || this.id === action.id) { if ('show' in action) { - this.visible = action?.show === 'toggle' ? !this.visible : action.show; + this.visible.update((visible) => (action?.show === 'toggle' ? !visible : action.show)); } } else { - if (this.visible) { - this.visible = false; + if (this.visible()) { + this.visible.set(false); } } }); From 59076d40d1c04b638a4a757fe143db2a59b7445d Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 25 Nov 2025 16:09:42 +0100 Subject: [PATCH 2/3] chore(devDependecies): update --- package-lock.json | 68 +++++++++++++++++++++++------------------------ package.json | 6 ++--- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f2655c8..3029a14b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,9 +29,9 @@ "zone.js": "~0.15.1" }, "devDependencies": { - "@angular-devkit/schematics": "^20.3.11", - "@angular/build": "^20.3.11", - "@angular/cli": "^20.3.11", + "@angular-devkit/schematics": "^20.3.12", + "@angular/build": "^20.3.12", + "@angular/cli": "^20.3.12", "@angular/compiler-cli": "^20.3.13", "@angular/language-service": "^20.3.13", "@types/jasmine": "^5.1.13", @@ -279,13 +279,13 @@ } }, "node_modules/@angular-devkit/architect": { - "version": "0.2003.11", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2003.11.tgz", - "integrity": "sha512-/56v/Le9UruIPqQXINoggns0//W2/BIaDd54kvjNK5PjQUyKKj6nmhMA1RgB0yDTBFh7lksLf8IyyGx9ZchGRA==", + "version": "0.2003.12", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2003.12.tgz", + "integrity": "sha512-5H40lAFF4CKY32C4HOp6bTlOF1f4WsGCwe7FjFQp9A+T7yoCBiHpIWt2JKTwV4sBoTKVDZOnuf0GG+UVKjQT4A==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "20.3.11", + "@angular-devkit/core": "20.3.12", "rxjs": "7.8.2" }, "engines": { @@ -295,9 +295,9 @@ } }, "node_modules/@angular-devkit/core": { - "version": "20.3.11", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-20.3.11.tgz", - "integrity": "sha512-KZDhMemUci42D9CNziM+GxQK5wEMP+TDL9ssUHIkvrr1lsFViHIO+pfzs7QfyM8n6hr7at4gQN9IZRV4rRKyQQ==", + "version": "20.3.12", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-20.3.12.tgz", + "integrity": "sha512-ReFxd/UOoVDr3+kIUjmYILQZF89qg62POdY7a7OqBH7plmInFlYVSEDouJvGqj3LVCPiqTk2ZOSChbhS/eLxXA==", "dev": true, "license": "MIT", "dependencies": { @@ -323,13 +323,13 @@ } }, "node_modules/@angular-devkit/schematics": { - "version": "20.3.11", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-20.3.11.tgz", - "integrity": "sha512-ePbARvd3xaN2a+ozFWaoYQHz1pzyzzu247rxRoS4hSOr5jqCsogMqPoGxdBCx6nFlDlP/CYenFR7cFx5OBT4tg==", + "version": "20.3.12", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-20.3.12.tgz", + "integrity": "sha512-JqJ1u59y+Ud51k/8MHYzSP+aQOeC2PJBaDmMnvqfWVaIt6n3x4gc/VtuhqhpJ0SKulbFuOWgAfI6QbPFrgUYQQ==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "20.3.11", + "@angular-devkit/core": "20.3.12", "jsonc-parser": "3.3.1", "magic-string": "0.30.17", "ora": "8.2.0", @@ -475,14 +475,14 @@ } }, "node_modules/@angular/build": { - "version": "20.3.11", - "resolved": "https://registry.npmjs.org/@angular/build/-/build-20.3.11.tgz", - "integrity": "sha512-0YJGRSXZeH3ncpyCZANN0jDdWaRhIOzKQ54+YcuA1uwLzTAUrla3CsJHSVk6ljItIRWymPuUMDRHjxWE/W6WbA==", + "version": "20.3.12", + "resolved": "https://registry.npmjs.org/@angular/build/-/build-20.3.12.tgz", + "integrity": "sha512-iAZve4VPviC8y6RFctyh3qFXSlP5mth9K46/0zasB4LV4pcmu8BrzIHERxIn/jCDNdVdPh973kxo1ksO4WpyuA==", "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.2003.11", + "@angular-devkit/architect": "0.2003.12", "@babel/core": "7.28.3", "@babel/helper-annotate-as-pure": "7.27.3", "@babel/helper-split-export-declaration": "7.24.7", @@ -524,7 +524,7 @@ "@angular/platform-browser": "^20.0.0", "@angular/platform-server": "^20.0.0", "@angular/service-worker": "^20.0.0", - "@angular/ssr": "^20.3.11", + "@angular/ssr": "^20.3.12", "karma": "^6.4.0", "less": "^4.2.0", "ng-packagr": "^20.0.0", @@ -589,19 +589,19 @@ } }, "node_modules/@angular/cli": { - "version": "20.3.11", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.11.tgz", - "integrity": "sha512-FmTvBWo32MAhY2rdXbPjCfC71o0tIzYBuzrjE42SU0+brwwWSvWUmRxS6xM+hH87QrF+gzmi26hOql891OfbIg==", + "version": "20.3.12", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.12.tgz", + "integrity": "sha512-vqVyVjbFPCRMjA5evL7tV2JeR6Anuzb9WcXTMB17fr7uzKNNAvo7KyRaOJjp+TU4JDARTNyGPy0aywfPx7R60A==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/architect": "0.2003.11", - "@angular-devkit/core": "20.3.11", - "@angular-devkit/schematics": "20.3.11", + "@angular-devkit/architect": "0.2003.12", + "@angular-devkit/core": "20.3.12", + "@angular-devkit/schematics": "20.3.12", "@inquirer/prompts": "7.8.2", "@listr2/prompt-adapter-inquirer": "3.0.1", "@modelcontextprotocol/sdk": "1.17.3", - "@schematics/angular": "20.3.11", + "@schematics/angular": "20.3.12", "@yarnpkg/lockfile": "1.1.0", "algoliasearch": "5.35.0", "ini": "5.0.0", @@ -3921,14 +3921,14 @@ } }, "node_modules/@schematics/angular": { - "version": "20.3.11", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-20.3.11.tgz", - "integrity": "sha512-9mU8nEsty96LT1t+lShDdcfEhJDVfc2sNHEIQsFY8gUVXspkT7lj570odHLqC5aumDYtWc3B/kRSzPxh8SPWFg==", + "version": "20.3.12", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-20.3.12.tgz", + "integrity": "sha512-ikl+nkWUab/Z4eSkBHgq9FLIUH8qh4OcYKeBQ0fyWqIUFHyjjK0JOfwmH1g/3zAmuUMtkthHCehAtyKzCTQjVA==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "20.3.11", - "@angular-devkit/schematics": "20.3.11", + "@angular-devkit/core": "20.3.12", + "@angular-devkit/schematics": "20.3.12", "jsonc-parser": "3.3.1" }, "engines": { @@ -5756,9 +5756,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.259", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.259.tgz", - "integrity": "sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==", + "version": "1.5.260", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.260.tgz", + "integrity": "sha512-ov8rBoOBhVawpzdre+Cmz4FB+y66Eqrk6Gwqd8NGxuhv99GQ8XqMAr351KEkOt7gukXWDg6gJWEMKgL2RLMPtA==", "license": "ISC" }, "node_modules/emoji-regex": { diff --git a/package.json b/package.json index 804286fa..8bd1971c 100644 --- a/package.json +++ b/package.json @@ -60,9 +60,9 @@ "zone.js": "~0.15.1" }, "devDependencies": { - "@angular-devkit/schematics": "^20.3.11", - "@angular/build": "^20.3.11", - "@angular/cli": "^20.3.11", + "@angular-devkit/schematics": "^20.3.12", + "@angular/build": "^20.3.12", + "@angular/cli": "^20.3.12", "@angular/compiler-cli": "^20.3.13", "@angular/language-service": "^20.3.13", "@types/jasmine": "^5.1.13", From 9268edd9ec3b333600d4f265ae9713701f233c74 Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 25 Nov 2025 16:11:05 +0100 Subject: [PATCH 3/3] chore(release): ship v5.5.24 --- CHANGELOG.md | 10 ++++++++++ package-lock.json | 4 ++-- package.json | 2 +- projects/coreui-angular-chartjs/package.json | 2 +- projects/coreui-angular/package.json | 4 ++-- projects/coreui-icons-angular/package.json | 2 +- 6 files changed, 17 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 835d46d8..e90b844f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,16 @@ --- +#### `5.5.24` + +- refactor(modal): visible signal, cleanup +- chore(devDependencies): update + - `@angular-devkit/schematics` @ "20.3.12" (was "20.3.11") + - `@angular/build` @ "20.3.12" (was "20.3.11") + - `@angular/cli` @ "20.3.12" (was "20.3.11") + +--- + #### `5.5.23` - chore(dependencies): update to `Angular 20.3.13` diff --git a/package-lock.json b/package-lock.json index 3029a14b..53361b42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coreui-angular-dev", - "version": "5.5.23", + "version": "5.5.24", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coreui-angular-dev", - "version": "5.5.23", + "version": "5.5.24", "license": "MIT", "dependencies": { "@angular/animations": "^20.3.13", diff --git a/package.json b/package.json index 8bd1971c..62a7fbef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coreui-angular-dev", - "version": "5.5.23", + "version": "5.5.24", "description": "CoreUI Components Library for Angular", "copyright": "Copyright 2025 creativeLabs Łukasz Holeczek", "license": "MIT", diff --git a/projects/coreui-angular-chartjs/package.json b/projects/coreui-angular-chartjs/package.json index f52010e1..649b363f 100644 --- a/projects/coreui-angular-chartjs/package.json +++ b/projects/coreui-angular-chartjs/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/angular-chartjs", - "version": "5.5.23", + "version": "5.5.24", "description": "Angular wrapper component for Chart.js", "copyright": "Copyright 2025 creativeLabs Łukasz Holeczek", "license": "MIT", diff --git a/projects/coreui-angular/package.json b/projects/coreui-angular/package.json index e5b56f32..ff3c3639 100644 --- a/projects/coreui-angular/package.json +++ b/projects/coreui-angular/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/angular", - "version": "5.5.23", + "version": "5.5.24", "description": "CoreUI Components Library for Angular", "copyright": "Copyright 2025 creativeLabs Łukasz Holeczek", "license": "MIT", @@ -29,7 +29,7 @@ "@angular/core": "^20.3.0", "@angular/router": "^20.3.0", "@coreui/coreui": "^5.4.3", - "@coreui/icons-angular": "~5.5.23", + "@coreui/icons-angular": "~5.5.24", "rxjs": "^7.8.2" }, "repository": { diff --git a/projects/coreui-icons-angular/package.json b/projects/coreui-icons-angular/package.json index d540fb48..a664c12e 100644 --- a/projects/coreui-icons-angular/package.json +++ b/projects/coreui-icons-angular/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/icons-angular", - "version": "5.5.23", + "version": "5.5.24", "description": "CoreUI Icons Angular component and service", "copyright": "Copyright 2025 creativeLabs Łukasz Holeczek", "license": "MIT",