From 5a2592e21c5680db4da350c3613bdfb1bae8f68d Mon Sep 17 00:00:00 2001 From: xidedix Date: Wed, 5 Feb 2025 15:48:11 +0100 Subject: [PATCH 1/3] fix(offcanvas): offcanvas hides on animation.done toState visible, refactor --- .../offcanvas/offcanvas.component.ts | 32 +++++++------------ 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts index abb4d634..dd0be79e 100644 --- a/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts +++ b/projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts @@ -7,16 +7,14 @@ import { DestroyRef, effect, ElementRef, - EventEmitter, inject, input, + linkedSignal, OnDestroy, OnInit, output, PLATFORM_ID, - Renderer2, - signal, - untracked + Renderer2 } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { A11yModule } from '@angular/cdk/a11y'; @@ -56,7 +54,7 @@ let nextId = 0; hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], host: { ngSkipHydration: 'true', - '[@showHide]': 'animateTrigger', + '[@showHide]': 'this.visible() ? "visible" : "hidden"', '[attr.id]': 'id()', '[attr.inert]': 'ariaHidden() || null', '[attr.role]': 'role()', @@ -125,7 +123,6 @@ export class OffcanvasComponent implements OnInit, OnDestroy { #activeBackdrop!: HTMLDivElement; #backdropClickSubscription!: Subscription; #layoutChangeSubscription!: Subscription; - #show = false; /** * Allow body scrolling while offcanvas is visible. @@ -141,15 +138,11 @@ export class OffcanvasComponent implements OnInit, OnDestroy { */ readonly visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' }); - readonly visibleInputEffect = effect(() => { - const visible = this.visibleInput(); - untracked(() => { - this.visible.set(visible); - }); + readonly visible = linkedSignal({ + source: () => this.visibleInput(), + computation: (value) => value }); - readonly visible = signal(false); - readonly visibleEffect = effect(() => { const visible = this.visible(); if (visible) { @@ -164,18 +157,19 @@ export class OffcanvasComponent implements OnInit, OnDestroy { /** * Event triggered on visible change. - * @return EventEmitter + * @return */ readonly visibleChange = output(); readonly hostClasses = computed(() => { const responsive = this.responsive(); const placement = this.placement(); + const visible = this.visible(); return { offcanvas: typeof responsive === 'boolean', [`offcanvas-${responsive}`]: typeof responsive !== 'boolean', [`offcanvas-${placement}`]: !!placement, - show: this.show + show: visible } as Record; }); @@ -187,16 +181,12 @@ export class OffcanvasComponent implements OnInit, OnDestroy { return '-1'; } - get animateTrigger(): string { - return this.visible() ? 'visible' : 'hidden'; - } - get show(): boolean { - return this.visible() && this.#show; + return this.visible(); } set show(value: boolean) { - this.#show = value; + this.visible.set(value); } get responsiveBreakpoint(): string | false { From 867852a542a932a575f3ba419e6808d675792adc Mon Sep 17 00:00:00 2001 From: xidedix Date: Wed, 5 Feb 2025 15:48:33 +0100 Subject: [PATCH 2/3] refactor(backdrop): minor cleanups --- projects/coreui-angular/src/lib/backdrop/backdrop.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/coreui-angular/src/lib/backdrop/backdrop.service.ts b/projects/coreui-angular/src/lib/backdrop/backdrop.service.ts index e090e93a..9cf312e3 100644 --- a/projects/coreui-angular/src/lib/backdrop/backdrop.service.ts +++ b/projects/coreui-angular/src/lib/backdrop/backdrop.service.ts @@ -47,10 +47,10 @@ export class BackdropService { this.#unListen(); this.#renderer.removeClass(backdropElement, 'show'); setTimeout(() => { - this.#renderer.removeChild(this.#document.body, backdropElement); if (this.activeBackdrop === backdropElement) { this.resetScrollbar(); } + this.#renderer.removeChild(this.#document.body, backdropElement); backdropElement = undefined; }, 300); } From b628ed1886e8a312bc45d55bc9365a98046cbf0b Mon Sep 17 00:00:00 2001 From: xidedix Date: Wed, 5 Feb 2025 15:49:06 +0100 Subject: [PATCH 3/3] chore(release): ship v5.3.10 --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- projects/coreui-angular/package.json | 2 +- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 308fdebc..38c131b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,13 @@ ### [@coreui/angular](https://coreui.io/angular/) changelog +--- + +#### `5.3.10` + +- fix(offcanvas): offcanvas hides on animation.done toState visible, refactor +- refactor(backdrop): minor cleanups + --- #### `5.3.9` diff --git a/package-lock.json b/package-lock.json index 417eb8c3..65985182 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coreui-angular-dev", - "version": "5.3.9", + "version": "5.3.10", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coreui-angular-dev", - "version": "5.3.9", + "version": "5.3.10", "license": "MIT", "dependencies": { "@angular/animations": "^19.1.4", diff --git a/package.json b/package.json index ed17dad3..b5f275cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coreui-angular-dev", - "version": "5.3.9", + "version": "5.3.10", "description": "CoreUI Components Library for Angular", "copyright": "Copyright 2025 creativeLabs Łukasz Holeczek", "license": "MIT", diff --git a/projects/coreui-angular/package.json b/projects/coreui-angular/package.json index 988956ab..db49d261 100644 --- a/projects/coreui-angular/package.json +++ b/projects/coreui-angular/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/angular", - "version": "5.3.9", + "version": "5.3.10", "description": "CoreUI Components Library for Angular", "copyright": "Copyright 2025 creativeLabs Łukasz Holeczek", "license": "MIT",