@coreui/angular 4.5.28 → 4.5.29

package/fesm2022/coreui-angular.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, booleanAttribute, ContentChildren, HostListener, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, PLATFORM_ID, TemplateRef, ViewContainerRef, numberAttribute, Pipe, ChangeDetectionStrategy, inject, DestroyRef } from '@angular/core';
+import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, booleanAttribute, ContentChildren, HostListener, inject, RendererFactory2, Inject, ViewChild, forwardRef, Optional, ElementRef, ContentChild, DestroyRef, signal, effect, PLATFORM_ID, TemplateRef, ViewContainerRef, numberAttribute, Pipe, ChangeDetectionStrategy } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/common';
-import { NgTemplateOutlet, NgIf, NgClass, NgForOf, AsyncPipe, DOCUMENT, isPlatformBrowser, CommonModule, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { NgTemplateOutlet, NgIf, NgClass, DOCUMENT, NgForOf, AsyncPipe, isPlatformBrowser, CommonModule, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
+import { Subject, BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
-import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter, debounceTime } from 'rxjs/operators';
 import { createPopper } from '@popperjs/core';
 import * as i1$2 from '@angular/cdk/layout';
 import * as i3 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import { IconDirective } from '@coreui/icons-angular';
 
 var BreakpointInfix;
@@ -1065,6 +1065,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class BackdropService {
+    constructor() {
+        this.#backdropClick = new Subject();
+        this.backdropClick$ = this.#backdropClick.asObservable();
+        this.#document = inject(DOCUMENT);
+        this.#rendererFactory = inject(RendererFactory2);
+        this.#renderer = this.#rendererFactory.createRenderer(null, null);
+        this.scrollbarWidth = this.#scrollbarWidth;
+        this.#scrollBarVisible = true;
+    }
+    #backdropClick;
+    #document;
+    #rendererFactory;
+    #renderer;
+    #unListen;
+    get #scrollbarWidth() {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+        const documentWidth = this.#document.documentElement.clientWidth;
+        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
+        return `${scrollbarWidth}px`;
+    }
+    setBackdrop(type = 'modal') {
+        const backdropElement = this.#renderer.createElement('div');
+        this.#renderer.addClass(backdropElement, `${type}-backdrop`);
+        this.#renderer.addClass(backdropElement, 'fade');
+        this.#renderer.appendChild(this.#document.body, backdropElement);
+        this.#unListen = this.#renderer.listen(backdropElement, 'click', (e) => {
+            this.onClickHandler();
+        });
+        this.scrollbarWidth = this.#scrollbarWidth;
+        setTimeout(() => {
+            this.#renderer.addClass(backdropElement, 'show');
+            // this.hideScrollbar();
+        });
+        this.activeBackdrop = backdropElement;
+        return backdropElement;
+    }
+    clearBackdrop(backdropElement) {
+        if (backdropElement) {
+            this.#unListen();
+            this.#renderer.removeClass(backdropElement, 'show');
+            setTimeout(() => {
+                this.#renderer.removeChild(this.#document.body, backdropElement);
+                if (this.activeBackdrop === backdropElement) {
+                    this.resetScrollbar();
+                }
+                backdropElement = undefined;
+            }, 300);
+        }
+        return undefined;
+    }
+    get #isRTL() { return this.#document.documentElement.dir === 'rtl' || this.#document.body.dir === 'rtl'; }
+    #scrollBarVisible;
+    hideScrollbar() {
+        if (this.#scrollBarVisible) {
+            this.#renderer.setStyle(this.#document.body, 'overflow', 'hidden');
+            this.#renderer.setStyle(this.#document.body, `padding-${this.#isRTL ? 'left' : 'right'}`, this.scrollbarWidth);
+            this.#scrollBarVisible = false;
+        }
+    }
+    resetScrollbar() {
+        this.#renderer.removeStyle(this.#document.body, 'overflow');
+        this.#renderer.removeStyle(this.#document.body, `padding-${this.#isRTL ? 'left' : 'right'}`);
+        this.#scrollBarVisible = true;
+    }
+    onClickHandler() {
+        this.#backdropClick.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class BreadcrumbItemComponent {
     get ariaCurrent() {
         return this.active ? 'page' : null;
@@ -5034,67 +5112,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
-class BackdropService {
-    constructor(document, rendererFactory) {
-        this.document = document;
-        this.rendererFactory = rendererFactory;
-        this.backdropClick = new Subject();
-        this.backdropClick$ = this.backdropClick.asObservable();
-        this.renderer = rendererFactory.createRenderer(null, null);
-    }
-    get scrollbarWidth() {
-        // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-        const documentWidth = this.document.documentElement.clientWidth;
-        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
-        return `${scrollbarWidth}px`;
-    }
-    setBackdrop(type = 'modal') {
-        const backdropElement = this.renderer.createElement('div');
-        this.renderer.addClass(backdropElement, `${type}-backdrop`);
-        this.renderer.addClass(backdropElement, 'fade');
-        this.renderer.appendChild(this.document.body, backdropElement);
-        this.unListen = this.renderer.listen(backdropElement, 'click', (e) => {
-            this.onClickHandler();
-        });
-        setTimeout(() => {
-            this.renderer.addClass(backdropElement, 'show');
-        });
-        return backdropElement;
-    }
-    clearBackdrop(backdrop) {
-        if (backdrop) {
-            this.unListen();
-            this.renderer.removeClass(backdrop, 'show');
-            setTimeout(() => {
-                this.renderer.removeChild(this.document.body, backdrop);
-                backdrop = undefined;
-            }, 300);
-        }
-        return backdrop;
-    }
-    onClickHandler() {
-        this.backdropClick.next(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BackdropService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.RendererFactory2 }]; } });
-
 class ModalComponent {
+    #destroyRef;
+    #focusMonitor;
     constructor(document, renderer, hostElement, modalService, backdropService) {
         this.document = document;
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.modalService = modalService;
         this.backdropService = backdropService;
+        this.#destroyRef = inject(DestroyRef);
+        this.#focusMonitor = inject(FocusMonitor);
         /**
          * Align the modal in the center or top of the screen.
          * @type {'top' | 'center'}
@@ -5123,46 +5151,72 @@ class ModalComponent {
          * @default 'dialog'
          */
         this.role = 'dialog';
+        this.#ariaModal = null;
         /**
-         * Set aria-modal html attr for modal. [docs]
+         * Create a scrollable modal that allows scrolling the modal body.
          * @type boolean
-         * @default true
          */
-        this.ariaModal = true;
-        this._scrollable = false;
+        this.scrollable = false;
+        this.#visible = signal(false);
+        this.#activeElement = null;
+        this.#visibleEffect = effect(() => {
+            if (this.#visible() && this.#afterViewInit()) {
+                this.#activeElement = this.document.activeElement;
+                // this.#activeElement?.blur();
+                setTimeout(() => {
+                    const focusable = this.modalContentRef.nativeElement.querySelectorAll('[tabindex]:not([tabindex="-1"]), button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])');
+                    this.#focusMonitor.focusVia(focusable[0], 'keyboard');
+                });
+            }
+            else {
+                if (this.document.contains(this.#activeElement)) {
+                    setTimeout(() => {
+                        this.#activeElement?.focus();
+                        this.#activeElement = null;
+                    });
+                }
+            }
+        });
         /**
          * Event triggered on modal dismiss.
          */
         this.visibleChange = new EventEmitter();
         this._show = true;
         this.mouseDownTarget = null;
+        this.#afterViewInit = signal(false);
     }
     /**
-     * Create a scrollable modal that allows scrolling the modal body.
+     * Set aria-modal html attr for modal. [docs]
      * @type boolean
+     * @default null
      */
-    set scrollable(value) {
-        this._scrollable = coerceBooleanProperty(value);
+    set ariaModal(value) {
+        this.#ariaModal = value;
     }
-    get scrollable() {
-        return this._scrollable;
+    get ariaModal() {
+        return this.visible || this.#ariaModal ? true : null;
     }
+    ;
+    #ariaModal;
     /**
      * Toggle the visibility of modal component.
      * @type boolean
      */
     set visible(value) {
-        const newValue = coerceBooleanProperty(value);
-        if (this._visible !== newValue) {
-            this._visible = newValue;
-            this.setBackdrop(this.backdrop !== false && newValue);
-            this.setBodyStyles(newValue);
-            this.visibleChange.emit(newValue);
+        if (this.#visible() !== value) {
+            this.#visible.set(value);
+            this.setBackdrop(this.backdrop !== false && value);
+            this.setBodyStyles(value);
+            this.visibleChange.emit(value);
         }
     }
     get visible() {
-        return this._visible;
+        return this.#visible();
     }
+    #visible;
+    #activeElement;
+    #visibleEffect;
+    #activeBackdrop;
     // private inBoundingClientRect!: boolean;
     get hostClasses() {
         return {
@@ -5188,10 +5242,8 @@ class ModalComponent {
         this._show = value;
     }
     animateStart(event) {
-        const scrollbarWidth = this.backdropService.scrollbarWidth;
         if (event.toState === 'visible') {
-            this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
-            this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+            this.backdropService.hideScrollbar();
             this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'block');
         }
         else {
@@ -5204,8 +5256,6 @@ class ModalComponent {
         setTimeout(() => {
             if (event.toState === 'hidden') {
                 this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'none');
-                this.renderer.removeStyle(this.document.body, 'overflow');
-                this.renderer.removeStyle(this.document.body, 'padding-right');
             }
         });
         this.show = this.visible;
@@ -5240,36 +5290,32 @@ class ModalComponent {
     ngOnInit() {
         this.stateToggleSubscribe();
     }
+    #afterViewInit;
+    ngAfterViewInit() {
+        this.#afterViewInit.set(true);
+    }
     ngOnDestroy() {
         this.modalService.toggle({ show: false, modal: this });
-        this.stateToggleSubscribe(false);
+        this.#afterViewInit.set(false);
     }
-    stateToggleSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.stateToggleSubscription = this.modalService.modalState$.subscribe((action) => {
-                if (this === action.modal || this.id === action.id) {
-                    if ('show' in action) {
-                        this.visible = action?.show === 'toggle' ? !this.visible : action.show;
-                    }
+    stateToggleSubscribe() {
+        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;
                 }
-                else {
-                    if (this.visible) {
-                        this.visible = false;
-                    }
+            }
+            else {
+                if (this.visible) {
+                    this.visible = false;
                 }
-            });
-        }
-        else {
-            this.stateToggleSubscription?.unsubscribe();
-        }
+            }
+        });
     }
     setBackdrop(setBackdrop) {
-        if (setBackdrop) {
-            this.activeBackdrop = this.backdropService.setBackdrop('modal');
-        }
-        else {
-            this.activeBackdrop = this.backdropService.clearBackdrop(this.activeBackdrop);
-        }
+        this.#activeBackdrop = setBackdrop ? this.backdropService.setBackdrop('modal') : this.backdropService.clearBackdrop(this.#activeBackdrop);
     }
     setBodyStyles(open) {
         if (open) {
@@ -5292,7 +5338,7 @@ class ModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: ModalService }, { token: BackdropService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "c-modal", inputs: { alignment: "alignment", backdrop: "backdrop", fullscreen: "fullscreen", keyboard: "keyboard", id: "id", size: "size", transition: "transition", role: "role", ariaModal: "ariaModal", scrollable: "scrollable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keyup": "onKeyDownHandler($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ModalContentComponent, descendants: true, read: ElementRef }], exportAs: ["cModal"], ngImport: i0, template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", dependencies: [{ kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: ModalComponent, isStandalone: true, selector: "c-modal", inputs: { alignment: "alignment", backdrop: "backdrop", fullscreen: "fullscreen", keyboard: ["keyboard", "keyboard", booleanAttribute], id: "id", size: "size", transition: ["transition", "transition", booleanAttribute], role: "role", ariaModal: "ariaModal", scrollable: ["scrollable", "scrollable", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keyup": "onKeyDownHandler($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ModalContentComponent, descendants: true, read: ElementRef }, { propertyName: "modalContentRef", first: true, predicate: ["modalContentRef"], descendants: true, read: ElementRef }], exportAs: ["cModal"], ngImport: i0, template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\" #modalContentRef>\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", dependencies: [{ kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // display: 'block'
@@ -5300,7 +5346,7 @@ class ModalComponent {
                 state('hidden', style({
                 // display: 'none'
                 })),
-                transition('visible <=> *', [animate('300ms')])
+                transition('visible <=> *', [animate('150ms')])
             ])
         ] }); }
 }
@@ -5314,9 +5360,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             state('hidden', style({
                             // display: 'none'
                             })),
-                            transition('visible <=> *', [animate('300ms')])
+                            transition('visible <=> *', [animate('150ms')])
                         ])
-                    ], exportAs: 'cModal', standalone: true, imports: [ModalDialogComponent, ModalContentComponent, A11yModule], template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n" }]
+                    ], exportAs: 'cModal', standalone: true, imports: [ModalDialogComponent, ModalContentComponent, A11yModule], template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\" #modalContentRef>\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -5327,13 +5373,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], fullscreen: [{
                 type: Input
             }], keyboard: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], id: [{
                 type: Input
             }], size: [{
                 type: Input
             }], transition: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], role: [{
                 type: Input
             }, {
@@ -5345,14 +5393,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: HostBinding,
                 args: ['attr.aria-modal']
             }], scrollable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visibleChange: [{
                 type: Output
             }], modalContent: [{
                 type: ViewChild,
                 args: [ModalContentComponent, { read: ElementRef }]
+            }], modalContentRef: [{
+                type: ViewChild,
+                args: ['modalContentRef', { read: ElementRef }]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -5448,6 +5501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 let nextId = 0;
 class OffcanvasComponent {
+    #destroyRef;
     constructor(document, platformId, renderer, hostElement, offcanvasService, backdropService, breakpointObserver) {
         this.document = document;
         this.platformId = platformId;
@@ -5456,6 +5510,7 @@ class OffcanvasComponent {
         this.offcanvasService = offcanvasService;
         this.backdropService = backdropService;
         this.breakpointObserver = breakpointObserver;
+        this.#destroyRef = inject(DestroyRef);
         /**
          * Apply a backdrop on body while offcanvas is open.
          * @type boolean | 'static'
@@ -5494,43 +5549,31 @@ class OffcanvasComponent {
          * @default true
          */
         this.ariaModal = true;
+        this.#show = false;
+        /**
+         * Allow body scrolling while offcanvas is visible.
+         * @type boolean
+         * @default false
+         */
+        this.scroll = false;
+        this.#visible = false;
         /**
          * Event triggered on visible change.
+         * @type EventEmitter<boolean>
          */
         this.visibleChange = new EventEmitter();
-        this.#scroll = false;
-        this.#visible = false;
-        this.#show = false;
     }
-    #scroll;
-    #visible;
     #activeBackdrop;
-    #scrollbarWidth;
-    #stateToggleSubscription;
     #backdropClickSubscription;
     #layoutChangeSubscription;
     #show;
-    get scroll() {
-        return this.#scroll;
-    }
-    /**
-     * Allow body scrolling while offcanvas is visible.
-     * @type boolean
-     * @default false
-     */
-    set scroll(value) {
-        this.#scroll = coerceBooleanProperty(value);
-    }
-    get visible() {
-        return this.#visible;
-    }
     /**
      * Toggle the visibility of offcanvas component.
      * @type boolean
      * @default false
      */
     set visible(value) {
-        this.#visible = coerceBooleanProperty(value);
+        this.#visible = value;
         if (this.#visible) {
             this.setBackdrop(this.backdrop);
             this.setFocus();
@@ -5541,6 +5584,10 @@ class OffcanvasComponent {
         this.layoutChangeSubscribe(this.#visible);
         this.visibleChange.emit(value);
     }
+    get visible() {
+        return this.#visible;
+    }
+    #visible;
     get hostClasses() {
         return {
             offcanvas: typeof this.responsive === 'boolean',
@@ -5574,11 +5621,9 @@ class OffcanvasComponent {
         return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
     }
     animateStart(event) {
-        const scrollbarWidth = this.#scrollbarWidth;
         if (event.toState === 'visible') {
             if (!this.scroll) {
-                this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
-                this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+                this.backdropService.hideScrollbar();
             }
             this.renderer.addClass(this.hostElement.nativeElement, 'showing');
         }
@@ -5608,7 +5653,6 @@ class OffcanvasComponent {
         }
     }
     ngOnInit() {
-        this.#scrollbarWidth = this.backdropService.scrollbarWidth;
         this.stateToggleSubscribe();
         setTimeout(() => {
             // hotfix to avoid offcanvas flicker on the first render
@@ -5617,33 +5661,30 @@ class OffcanvasComponent {
     }
     ngOnDestroy() {
         this.offcanvasService.toggle({ show: false, id: this.id });
-        this.stateToggleSubscribe(false);
     }
     setFocus() {
         if (isPlatformBrowser(this.platformId)) {
             setTimeout(() => this.hostElement.nativeElement.focus());
         }
     }
-    stateToggleSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.#stateToggleSubscription =
-                this.offcanvasService.offcanvasState$.subscribe((action) => {
-                    if (this === action.offcanvas || this.id === action.id) {
-                        if ('show' in action) {
-                            this.visible =
-                                action?.show === 'toggle' ? !this.visible : action.show;
-                        }
-                    }
-                });
-        }
-        else {
-            this.#stateToggleSubscription?.unsubscribe();
-        }
+    stateToggleSubscribe() {
+        this.offcanvasService.offcanvasState$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((action) => {
+            if (this === action.offcanvas || this.id === action.id) {
+                if ('show' in action) {
+                    this.visible =
+                        action?.show === 'toggle' ? !this.visible : action.show;
+                }
+            }
+        });
     }
     backdropClickSubscribe(subscribe = true) {
         if (subscribe) {
             this.#backdropClickSubscription =
-                this.backdropService.backdropClick$.subscribe((clicked) => {
+                this.backdropService.backdropClick$
+                    .pipe(takeUntilDestroyed(this.#destroyRef))
+                    .subscribe((clicked) => {
                     this.offcanvasService.toggle({ show: !clicked, id: this.id });
                 });
         }
@@ -5652,7 +5693,6 @@ class OffcanvasComponent {
         }
     }
     setBackdrop(setBackdrop) {
-        this.#scrollbarWidth = this.backdropService.scrollbarWidth;
         this.#activeBackdrop = !!setBackdrop ? this.backdropService.setBackdrop('offcanvas')
             : this.backdropService.clearBackdrop(this.#activeBackdrop);
         setBackdrop === true ? this.backdropClickSubscribe()
@@ -5666,7 +5706,7 @@ class OffcanvasComponent {
             const responsiveBreakpoint = `(max-width: ${this.responsiveBreakpoint})`;
             const layoutChanges = this.breakpointObserver.observe([responsiveBreakpoint]);
             this.#layoutChangeSubscription = layoutChanges
-                .pipe(filter(breakpointState => !breakpointState.matches))
+                .pipe(filter(breakpointState => !breakpointState.matches), takeUntilDestroyed(this.#destroyRef))
                 .subscribe((breakpointState) => {
                 this.visible = breakpointState.matches;
             });
@@ -5676,7 +5716,7 @@ class OffcanvasComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OffcanvasComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OffcanvasService }, { token: BackdropService }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: "keyboard", placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: "ariaModal", scroll: "scroll", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: OffcanvasComponent, isStandalone: true, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: ["keyboard", "keyboard", booleanAttribute], placement: "placement", responsive: "responsive", id: "id", role: "role", ariaModal: ["ariaModal", "ariaModal", booleanAttribute], scroll: ["scroll", "scroll", booleanAttribute], visible: ["visible", "visible", booleanAttribute] }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('showHide', [
                 state('visible', style({
                 // visibility: 'visible'
@@ -5710,7 +5750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: OffcanvasService }, { type: BackdropService }, { type: i1$2.BreakpointObserver }]; }, propDecorators: { backdrop: [{
                 type: Input
             }], keyboard: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], placement: [{
                 type: Input
             }], responsive: [{
@@ -5723,16 +5764,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: HostBinding,
                 args: ['attr.role']
             }], ariaModal: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }, {
                 type: HostBinding,
                 args: ['attr.aria-modal']
-            }], visibleChange: [{
-                type: Output
             }], scroll: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], visible: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], visibleChange: [{
+                type: Output
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -9688,5 +9732,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
+export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular.mjs.map