@cute-widgets/base 20.0.3 → 20.0.5

package/fesm2022/cute-widgets-base-sidenav.mjs

@@ -6,8 +6,8 @@ import { Platform } from '@angular/cdk/platform';
 import { CdkScrollable, ScrollDispatcher, ViewportRuler, CdkScrollableModule } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ElementRef, NgZone, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, Component, DOCUMENT, signal, EventEmitter, Injector, afterNextRender, ViewChild, Output, Input, QueryList, isDevMode, ContentChild, ContentChildren, NgModule } from '@angular/core';
-import { Subject, fromEvent, merge } from 'rxjs';
-import { filter, map, takeUntil, take, startWith, debounceTime } from 'rxjs/operators';
+import { Subject, merge } from 'rxjs';
+import { takeUntil, filter, map, take, startWith, debounceTime } from 'rxjs/operators';
 import { _animationsDisabled } from '@cute-widgets/base/core/animation';
 import { CuteLayoutControl } from '@cute-widgets/base/abstract';
 import { CommonModule } from '@angular/common';
@@ -39,12 +39,9 @@ const CUTE_DRAWER_DEFAULT_AUTOSIZE = new InjectionToken('CUTE_DRAWER_DEFAULT_AUT
  */
 const CUTE_DRAWER_CONTAINER = new InjectionToken('CUTE_DRAWER_CONTAINER');
 /**
- * The main content of the 'cute-drawer' component
+ * The main content of the 'cute-drawer' component.
  */
 class CuteDrawerContent extends CdkScrollable {
-    generateId() {
-        return "";
-    }
     constructor() {
         const elementRef = inject(ElementRef);
         const scrollDispatcher = inject(ScrollDispatcher);
@@ -55,7 +52,9 @@ class CuteDrawerContent extends CdkScrollable {
         this._container = inject(CuteDrawerContainer);
     }
     ngAfterContentInit() {
-        this._container._contentMarginChanges.subscribe(() => {
+        this._container._contentMarginChanges
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => {
             this._changeDetectorRef.markForCheck();
         });
     }
@@ -231,7 +230,7 @@ class CuteDrawer extends CuteLayoutControl {
                     }
                     else {
                         // Don't toggle the animating state on `transitioncancel` since another animation should
-                        // start afterwards. This prevents the drawer from blinking if an animation is interrupted.
+                        // start afterward. This prevents the drawer from blinking if an animation is interrupted.
                         if (event.type === 'transitionend') {
                             this._setIsAnimating(false);
                         }
@@ -254,21 +253,22 @@ class CuteDrawer extends CuteLayoutControl {
          * time a key is pressed. Instead, we re-enter the zone only if the `ESC` key is pressed,
          * and we don't have a close disabled.
          */
-        this._ngZone.runOutsideAngular(() => {
+        this._eventCleanups = this._ngZone.runOutsideAngular(() => {
+            const renderer = this._renderer;
             const element = this._elementRef.nativeElement;
-            fromEvent(element, 'keydown')
-                .pipe(filter(event => {
-                return event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event);
-            }), takeUntil(this._destroyed))
-                .subscribe(event => this._ngZone.run(() => {
-                this.close();
-                event.stopPropagation();
-                event.preventDefault();
-            }));
-            this._eventCleanups = [
-                this._renderer.listen(element, 'transitionrun', this._handleTransitionEvent),
-                this._renderer.listen(element, 'transitionend', this._handleTransitionEvent),
-                this._renderer.listen(element, 'transitioncancel', this._handleTransitionEvent),
+            return [
+                renderer.listen(element, 'keydown', (event) => {
+                    if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {
+                        this._ngZone.run(() => {
+                            this.close();
+                            event.stopPropagation();
+                            event.preventDefault();
+                        });
+                    }
+                }),
+                renderer.listen(element, 'transitionrun', this._handleTransitionEvent),
+                renderer.listen(element, 'transitionend', this._handleTransitionEvent),
+                renderer.listen(element, 'transitioncancel', this._handleTransitionEvent),
             ];
         });
         this._animationEnd.subscribe(() => {
@@ -473,8 +473,7 @@ class CuteDrawer extends CuteLayoutControl {
         if (this._focusTrap) {
             // Trap focus only if the backdrop is enabled. Otherwise, allow end user to interact with the
             // sidenav content.
-            this._focusTrap.enabled = !!this._container?.hasBackdrop && this.opened;
-            ;
+            this._focusTrap.enabled = this.opened && !!this._container?._isShowingBackdrop();
         }
     }
     /**
@@ -666,7 +665,9 @@ class CuteDrawerContainer extends CuteLayoutControl {
             this._drawers.reset(drawer.filter(item => !item._container || item._container === this));
             this._drawers.notifyOnChanges();
         });
-        this._drawers.changes.pipe(startWith(null)).subscribe(() => {
+        this._drawers.changes
+            .pipe(startWith(null), takeUntil(this._destroyed))
+            .subscribe(() => {
             this._validateDrawers();
             this._drawers.forEach((drawer) => {
                 this._watchDrawerToggle(drawer);
@@ -712,7 +713,7 @@ class CuteDrawerContainer extends CuteLayoutControl {
         // 1. For drawers in `over` mode, they don't affect the content.
         // 2. For drawers in `side` mode they should shrink the content. We do this by adding to the
         //    left margin (for left drawer) or right margin (for right the drawer).
-        // 3. For drawers in `push` mode the should shift the content without resizing it. We do this by
+        // 3. For drawers in `push` mode they should shift the content without resizing it. We do this by
         //    adding to the left or right margin and simultaneously subtracting the same amount of
         //    margin from the other side.
         let left = 0;
@@ -871,7 +872,7 @@ class CuteDrawerContainer extends CuteLayoutControl {
                 provide: CUTE_DRAWER_CONTAINER,
                 useExisting: CuteDrawerContainer,
             },
-        ], queries: [{ propertyName: "_content", first: true, predicate: CuteDrawerContent, descendants: true }, { propertyName: "_allDrawers", predicate: CuteDrawer, descendants: true }], viewQueries: [{ propertyName: "_userContent", first: true, predicate: CuteDrawerContent, descendants: true }], exportAs: ["cuteDrawerContainer"], usesInheritance: true, ngImport: i0, template: "@if (hasBackdrop) {\r\n  <div class=\"cute-drawer-backdrop\" (click)=\"_onBackdropClicked()\"\r\n       [class.cute-drawer-shown]=\"_isShowingBackdrop()\"></div>\r\n}\r\n\r\n<ng-content select=\"cute-drawer\"></ng-content>\r\n\r\n<ng-content select=\"cute-drawer-content\"></ng-content>\r\n\r\n@if (!_content) {\r\n  <cute-drawer-content>\r\n    <ng-content></ng-content>\r\n  </cute-drawer-content>\r\n}\r\n", styles: [".cute-drawer-container{position:relative;z-index:1;color:var(--bs-body-color);background-color:var(--bs-body-bg);box-sizing:border-box;display:block;overflow:hidden}.cute-drawer-container[fullscreen]{inset:0;position:absolute}.cute-drawer-container[fullscreen].cute-drawer-container-has-open{overflow:hidden}.cute-drawer-container.cute-drawer-container-explicit-backdrop .cute-drawer-side{z-index:3}.cute-drawer-container.ng-animate-disabled .cute-drawer-backdrop,.cute-drawer-container.ng-animate-disabled .cute-drawer-content,.ng-animate-disabled .cute-drawer-container .cute-drawer-backdrop,.ng-animate-disabled .cute-drawer-container .cute-drawer-content{transition:none}.cute-drawer-backdrop{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.cute-drawer-backdrop.cute-drawer-shown{visibility:visible;background-color:#0009}.cute-drawer-transition .cute-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (forced-colors: active){.cute-drawer-backdrop{opacity:.5}}.cute-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.cute-drawer-content.cute-drawer-content-hidden{opacity:0}.cute-drawer-transition .cute-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.cute-drawer{box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;position:relative;z-index:4;color:var(--bs-secondary-color);background-color:var(--bs-secondary-bg);border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-right:solid var(--bs-border-width) var(--bs-border-color);display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (forced-colors: active){.cute-drawer,[dir=rtl] .cute-drawer.cute-drawer-end{border-right:solid 1px currentColor}}@media (forced-colors: active){[dir=rtl] .cute-drawer,.cute-drawer.cute-drawer-end{border-left:solid 1px currentColor;border-right:none}}.cute-drawer.cute-drawer-side{z-index:2}.cute-drawer.cute-drawer-end{right:0;transform:translate3d(100%,0,0);border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .cute-drawer{border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0;transform:translate3d(100%,0,0)}[dir=rtl] .cute-drawer.cute-drawer-end{border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-top-left-radius:0;border-bottom-left-radius:0;left:0;right:auto;transform:translate3d(-100%,0,0)}.cute-drawer-transition .cute-drawer{transition:transform .4s cubic-bezier(.25,.8,.25,1)}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating){visibility:hidden;box-shadow:none}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating) .cute-drawer-inner-container{display:none}.cute-drawer.cute-drawer-opened.cute-drawer-opened{transform:none}.cute-drawer-side{box-shadow:none;border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid}.cute-drawer-side.cute-drawer-end,[dir=rtl] .cute-drawer-side{border-left-color:var(--bs-border-color);border-left-width:var(--bs-border-width);border-left-style:solid;border-right:none}[dir=rtl] .cute-drawer-side.cute-drawer-end{border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid;border-left:none}.cute-drawer-inner-container{width:100%;height:100%;overflow:auto}.cute-sidenav-fixed{position:fixed}\n"], dependencies: [{ kind: "component", type: CuteDrawerContent, selector: "cute-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_content", first: true, predicate: CuteDrawerContent, descendants: true }, { propertyName: "_allDrawers", predicate: CuteDrawer, descendants: true }], viewQueries: [{ propertyName: "_userContent", first: true, predicate: CuteDrawerContent, descendants: true }], exportAs: ["cuteDrawerContainer"], usesInheritance: true, ngImport: i0, template: "@if (hasBackdrop) {\r\n  <div class=\"cute-drawer-backdrop\" (click)=\"_onBackdropClicked()\"\r\n       [class.cute-drawer-shown]=\"_isShowingBackdrop()\"></div>\r\n}\r\n\r\n<ng-content select=\"cute-drawer\"></ng-content>\r\n\r\n<ng-content select=\"cute-drawer-content\"></ng-content>\r\n\r\n@if (!_content) {\r\n  <cute-drawer-content>\r\n    <ng-content></ng-content>\r\n  </cute-drawer-content>\r\n}\r\n", styles: [".cute-drawer-container{position:relative;z-index:1;color:var(--bs-body-color);background-color:var(--bs-body-bg);box-sizing:border-box;display:block;overflow:hidden}.cute-drawer-container[fullscreen]{inset:0;position:absolute}.cute-drawer-container[fullscreen].cute-drawer-container-has-open{overflow:hidden}.cute-drawer-container.cute-drawer-container-explicit-backdrop .cute-drawer-side{z-index:3}.cute-drawer-container.ng-animate-disabled .cute-drawer-backdrop,.cute-drawer-container.ng-animate-disabled .cute-drawer-content,.ng-animate-disabled .cute-drawer-container .cute-drawer-backdrop,.ng-animate-disabled .cute-drawer-container .cute-drawer-content{transition:none}.cute-drawer-backdrop{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.cute-drawer-backdrop.cute-drawer-shown{visibility:visible;background-color:#0009}.cute-drawer-transition .cute-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (forced-colors: active){.cute-drawer-backdrop{opacity:.5}}.cute-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.cute-drawer-content.cute-drawer-content-hidden{opacity:0}.cute-drawer-transition .cute-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.cute-drawer{position:relative;z-index:4;color:var(--bs-secondary-color);background-color:var(--bs-secondary-bg);box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-right:solid var(--bs-border-width) var(--bs-border-color);display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (forced-colors: active){.cute-drawer,[dir=rtl] .cute-drawer.cute-drawer-end{border-right:solid var(--bs-border-width) currentColor}}@media (forced-colors: active){[dir=rtl] .cute-drawer,.cute-drawer.cute-drawer-end{border-left:solid var(--bs-border-width) currentColor;border-right:none}}.cute-drawer.cute-drawer-side{z-index:2}.cute-drawer.cute-drawer-end{right:0;transform:translate3d(100%,0,0);border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .cute-drawer{border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0;transform:translate3d(100%,0,0)}[dir=rtl] .cute-drawer.cute-drawer-end{border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-top-left-radius:0;border-bottom-left-radius:0;left:0;right:auto;transform:translate3d(-100%,0,0)}.cute-drawer-transition .cute-drawer{transition:transform .4s cubic-bezier(.25,.8,.25,1)}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating){visibility:hidden;box-shadow:none}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating) .cute-drawer-inner-container{display:none}.cute-drawer.cute-drawer-opened.cute-drawer-opened{transform:none}.cute-drawer-side{box-shadow:none;border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid}.cute-drawer-side.cute-drawer-end,[dir=rtl] .cute-drawer-side{border-left-color:var(--bs-border-color);border-left-width:var(--bs-border-width);border-left-style:solid;border-right:none}[dir=rtl] .cute-drawer-side.cute-drawer-end{border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid;border-left:none}.cute-drawer-inner-container{width:100%;height:100%;overflow:auto}.cute-sidenav-fixed{position:fixed}\n"], dependencies: [{ kind: "component", type: CuteDrawerContent, selector: "cute-drawer-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteDrawerContainer, decorators: [{
             type: Component,
@@ -883,7 +884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             provide: CUTE_DRAWER_CONTAINER,
                             useExisting: CuteDrawerContainer,
                         },
-                    ], imports: [CuteDrawerContent], template: "@if (hasBackdrop) {\r\n  <div class=\"cute-drawer-backdrop\" (click)=\"_onBackdropClicked()\"\r\n       [class.cute-drawer-shown]=\"_isShowingBackdrop()\"></div>\r\n}\r\n\r\n<ng-content select=\"cute-drawer\"></ng-content>\r\n\r\n<ng-content select=\"cute-drawer-content\"></ng-content>\r\n\r\n@if (!_content) {\r\n  <cute-drawer-content>\r\n    <ng-content></ng-content>\r\n  </cute-drawer-content>\r\n}\r\n", styles: [".cute-drawer-container{position:relative;z-index:1;color:var(--bs-body-color);background-color:var(--bs-body-bg);box-sizing:border-box;display:block;overflow:hidden}.cute-drawer-container[fullscreen]{inset:0;position:absolute}.cute-drawer-container[fullscreen].cute-drawer-container-has-open{overflow:hidden}.cute-drawer-container.cute-drawer-container-explicit-backdrop .cute-drawer-side{z-index:3}.cute-drawer-container.ng-animate-disabled .cute-drawer-backdrop,.cute-drawer-container.ng-animate-disabled .cute-drawer-content,.ng-animate-disabled .cute-drawer-container .cute-drawer-backdrop,.ng-animate-disabled .cute-drawer-container .cute-drawer-content{transition:none}.cute-drawer-backdrop{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.cute-drawer-backdrop.cute-drawer-shown{visibility:visible;background-color:#0009}.cute-drawer-transition .cute-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (forced-colors: active){.cute-drawer-backdrop{opacity:.5}}.cute-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.cute-drawer-content.cute-drawer-content-hidden{opacity:0}.cute-drawer-transition .cute-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.cute-drawer{box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;position:relative;z-index:4;color:var(--bs-secondary-color);background-color:var(--bs-secondary-bg);border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-right:solid var(--bs-border-width) var(--bs-border-color);display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (forced-colors: active){.cute-drawer,[dir=rtl] .cute-drawer.cute-drawer-end{border-right:solid 1px currentColor}}@media (forced-colors: active){[dir=rtl] .cute-drawer,.cute-drawer.cute-drawer-end{border-left:solid 1px currentColor;border-right:none}}.cute-drawer.cute-drawer-side{z-index:2}.cute-drawer.cute-drawer-end{right:0;transform:translate3d(100%,0,0);border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .cute-drawer{border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0;transform:translate3d(100%,0,0)}[dir=rtl] .cute-drawer.cute-drawer-end{border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-top-left-radius:0;border-bottom-left-radius:0;left:0;right:auto;transform:translate3d(-100%,0,0)}.cute-drawer-transition .cute-drawer{transition:transform .4s cubic-bezier(.25,.8,.25,1)}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating){visibility:hidden;box-shadow:none}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating) .cute-drawer-inner-container{display:none}.cute-drawer.cute-drawer-opened.cute-drawer-opened{transform:none}.cute-drawer-side{box-shadow:none;border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid}.cute-drawer-side.cute-drawer-end,[dir=rtl] .cute-drawer-side{border-left-color:var(--bs-border-color);border-left-width:var(--bs-border-width);border-left-style:solid;border-right:none}[dir=rtl] .cute-drawer-side.cute-drawer-end{border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid;border-left:none}.cute-drawer-inner-container{width:100%;height:100%;overflow:auto}.cute-sidenav-fixed{position:fixed}\n"] }]
+                    ], imports: [CuteDrawerContent], template: "@if (hasBackdrop) {\r\n  <div class=\"cute-drawer-backdrop\" (click)=\"_onBackdropClicked()\"\r\n       [class.cute-drawer-shown]=\"_isShowingBackdrop()\"></div>\r\n}\r\n\r\n<ng-content select=\"cute-drawer\"></ng-content>\r\n\r\n<ng-content select=\"cute-drawer-content\"></ng-content>\r\n\r\n@if (!_content) {\r\n  <cute-drawer-content>\r\n    <ng-content></ng-content>\r\n  </cute-drawer-content>\r\n}\r\n", styles: [".cute-drawer-container{position:relative;z-index:1;color:var(--bs-body-color);background-color:var(--bs-body-bg);box-sizing:border-box;display:block;overflow:hidden}.cute-drawer-container[fullscreen]{inset:0;position:absolute}.cute-drawer-container[fullscreen].cute-drawer-container-has-open{overflow:hidden}.cute-drawer-container.cute-drawer-container-explicit-backdrop .cute-drawer-side{z-index:3}.cute-drawer-container.ng-animate-disabled .cute-drawer-backdrop,.cute-drawer-container.ng-animate-disabled .cute-drawer-content,.ng-animate-disabled .cute-drawer-container .cute-drawer-backdrop,.ng-animate-disabled .cute-drawer-container .cute-drawer-content{transition:none}.cute-drawer-backdrop{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.cute-drawer-backdrop.cute-drawer-shown{visibility:visible;background-color:#0009}.cute-drawer-transition .cute-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (forced-colors: active){.cute-drawer-backdrop{opacity:.5}}.cute-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.cute-drawer-content.cute-drawer-content-hidden{opacity:0}.cute-drawer-transition .cute-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.cute-drawer{position:relative;z-index:4;color:var(--bs-secondary-color);background-color:var(--bs-secondary-bg);box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-right:solid var(--bs-border-width) var(--bs-border-color);display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (forced-colors: active){.cute-drawer,[dir=rtl] .cute-drawer.cute-drawer-end{border-right:solid var(--bs-border-width) currentColor}}@media (forced-colors: active){[dir=rtl] .cute-drawer,.cute-drawer.cute-drawer-end{border-left:solid var(--bs-border-width) currentColor;border-right:none}}.cute-drawer.cute-drawer-side{z-index:2}.cute-drawer.cute-drawer-end{right:0;transform:translate3d(100%,0,0);border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .cute-drawer{border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0;transform:translate3d(100%,0,0)}[dir=rtl] .cute-drawer.cute-drawer-end{border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-top-left-radius:0;border-bottom-left-radius:0;left:0;right:auto;transform:translate3d(-100%,0,0)}.cute-drawer-transition .cute-drawer{transition:transform .4s cubic-bezier(.25,.8,.25,1)}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating){visibility:hidden;box-shadow:none}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating) .cute-drawer-inner-container{display:none}.cute-drawer.cute-drawer-opened.cute-drawer-opened{transform:none}.cute-drawer-side{box-shadow:none;border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid}.cute-drawer-side.cute-drawer-end,[dir=rtl] .cute-drawer-side{border-left-color:var(--bs-border-color);border-left-width:var(--bs-border-width);border-left-style:solid;border-right:none}[dir=rtl] .cute-drawer-side.cute-drawer-end{border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid;border-left:none}.cute-drawer-inner-container{width:100%;height:100%;overflow:auto}.cute-sidenav-fixed{position:fixed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _allDrawers: [{
                 type: ContentChildren,
                 args: [CuteDrawer, {
@@ -1016,7 +1017,7 @@ class CuteSidenavContainer extends CuteDrawerContainer {
                 provide: CuteDrawerContainer,
                 useExisting: CuteSidenavContainer,
             },
-        ], queries: [{ propertyName: "_content", first: true, predicate: CuteSidenavContent, descendants: true }, { propertyName: "_allDrawers", predicate: CuteSidenav, descendants: true }], exportAs: ["cuteSidenavContainer"], usesInheritance: true, ngImport: i0, template: "@if (hasBackdrop) {\r\n    <div class=\"cute-drawer-backdrop\" (click)=\"_onBackdropClicked()\"\r\n         [class.cute-drawer-shown]=\"_isShowingBackdrop()\"></div>\r\n}\r\n\r\n<ng-content select=\"cute-sidenav\"></ng-content>\r\n\r\n<ng-content select=\"cute-sidenav-content\"></ng-content>\r\n\r\n@if (!_content) {\r\n    <cute-sidenav-content>\r\n        <ng-content></ng-content>\r\n    </cute-sidenav-content>\r\n}\r\n", styles: [".cute-drawer-container{position:relative;z-index:1;color:var(--bs-body-color);background-color:var(--bs-body-bg);box-sizing:border-box;display:block;overflow:hidden}.cute-drawer-container[fullscreen]{inset:0;position:absolute}.cute-drawer-container[fullscreen].cute-drawer-container-has-open{overflow:hidden}.cute-drawer-container.cute-drawer-container-explicit-backdrop .cute-drawer-side{z-index:3}.cute-drawer-container.ng-animate-disabled .cute-drawer-backdrop,.cute-drawer-container.ng-animate-disabled .cute-drawer-content,.ng-animate-disabled .cute-drawer-container .cute-drawer-backdrop,.ng-animate-disabled .cute-drawer-container .cute-drawer-content{transition:none}.cute-drawer-backdrop{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.cute-drawer-backdrop.cute-drawer-shown{visibility:visible;background-color:#0009}.cute-drawer-transition .cute-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (forced-colors: active){.cute-drawer-backdrop{opacity:.5}}.cute-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.cute-drawer-content.cute-drawer-content-hidden{opacity:0}.cute-drawer-transition .cute-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.cute-drawer{box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;position:relative;z-index:4;color:var(--bs-secondary-color);background-color:var(--bs-secondary-bg);border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-right:solid var(--bs-border-width) var(--bs-border-color);display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (forced-colors: active){.cute-drawer,[dir=rtl] .cute-drawer.cute-drawer-end{border-right:solid 1px currentColor}}@media (forced-colors: active){[dir=rtl] .cute-drawer,.cute-drawer.cute-drawer-end{border-left:solid 1px currentColor;border-right:none}}.cute-drawer.cute-drawer-side{z-index:2}.cute-drawer.cute-drawer-end{right:0;transform:translate3d(100%,0,0);border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .cute-drawer{border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0;transform:translate3d(100%,0,0)}[dir=rtl] .cute-drawer.cute-drawer-end{border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-top-left-radius:0;border-bottom-left-radius:0;left:0;right:auto;transform:translate3d(-100%,0,0)}.cute-drawer-transition .cute-drawer{transition:transform .4s cubic-bezier(.25,.8,.25,1)}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating){visibility:hidden;box-shadow:none}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating) .cute-drawer-inner-container{display:none}.cute-drawer.cute-drawer-opened.cute-drawer-opened{transform:none}.cute-drawer-side{box-shadow:none;border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid}.cute-drawer-side.cute-drawer-end,[dir=rtl] .cute-drawer-side{border-left-color:var(--bs-border-color);border-left-width:var(--bs-border-width);border-left-style:solid;border-right:none}[dir=rtl] .cute-drawer-side.cute-drawer-end{border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid;border-left:none}.cute-drawer-inner-container{width:100%;height:100%;overflow:auto}.cute-sidenav-fixed{position:fixed}\n"], dependencies: [{ kind: "component", type: CuteSidenavContent, selector: "cute-sidenav-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_content", first: true, predicate: CuteSidenavContent, descendants: true }, { propertyName: "_allDrawers", predicate: CuteSidenav, descendants: true }], exportAs: ["cuteSidenavContainer"], usesInheritance: true, ngImport: i0, template: "@if (hasBackdrop) {\r\n    <div class=\"cute-drawer-backdrop\" (click)=\"_onBackdropClicked()\"\r\n         [class.cute-drawer-shown]=\"_isShowingBackdrop()\"></div>\r\n}\r\n\r\n<ng-content select=\"cute-sidenav\"></ng-content>\r\n\r\n<ng-content select=\"cute-sidenav-content\"></ng-content>\r\n\r\n@if (!_content) {\r\n    <cute-sidenav-content>\r\n        <ng-content></ng-content>\r\n    </cute-sidenav-content>\r\n}\r\n", styles: [".cute-drawer-container{position:relative;z-index:1;color:var(--bs-body-color);background-color:var(--bs-body-bg);box-sizing:border-box;display:block;overflow:hidden}.cute-drawer-container[fullscreen]{inset:0;position:absolute}.cute-drawer-container[fullscreen].cute-drawer-container-has-open{overflow:hidden}.cute-drawer-container.cute-drawer-container-explicit-backdrop .cute-drawer-side{z-index:3}.cute-drawer-container.ng-animate-disabled .cute-drawer-backdrop,.cute-drawer-container.ng-animate-disabled .cute-drawer-content,.ng-animate-disabled .cute-drawer-container .cute-drawer-backdrop,.ng-animate-disabled .cute-drawer-container .cute-drawer-content{transition:none}.cute-drawer-backdrop{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.cute-drawer-backdrop.cute-drawer-shown{visibility:visible;background-color:#0009}.cute-drawer-transition .cute-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (forced-colors: active){.cute-drawer-backdrop{opacity:.5}}.cute-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.cute-drawer-content.cute-drawer-content-hidden{opacity:0}.cute-drawer-transition .cute-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.cute-drawer{position:relative;z-index:4;color:var(--bs-secondary-color);background-color:var(--bs-secondary-bg);box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-right:solid var(--bs-border-width) var(--bs-border-color);display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (forced-colors: active){.cute-drawer,[dir=rtl] .cute-drawer.cute-drawer-end{border-right:solid var(--bs-border-width) currentColor}}@media (forced-colors: active){[dir=rtl] .cute-drawer,.cute-drawer.cute-drawer-end{border-left:solid var(--bs-border-width) currentColor;border-right:none}}.cute-drawer.cute-drawer-side{z-index:2}.cute-drawer.cute-drawer-end{right:0;transform:translate3d(100%,0,0);border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .cute-drawer{border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0;transform:translate3d(100%,0,0)}[dir=rtl] .cute-drawer.cute-drawer-end{border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-top-left-radius:0;border-bottom-left-radius:0;left:0;right:auto;transform:translate3d(-100%,0,0)}.cute-drawer-transition .cute-drawer{transition:transform .4s cubic-bezier(.25,.8,.25,1)}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating){visibility:hidden;box-shadow:none}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating) .cute-drawer-inner-container{display:none}.cute-drawer.cute-drawer-opened.cute-drawer-opened{transform:none}.cute-drawer-side{box-shadow:none;border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid}.cute-drawer-side.cute-drawer-end,[dir=rtl] .cute-drawer-side{border-left-color:var(--bs-border-color);border-left-width:var(--bs-border-width);border-left-style:solid;border-right:none}[dir=rtl] .cute-drawer-side.cute-drawer-end{border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid;border-left:none}.cute-drawer-inner-container{width:100%;height:100%;overflow:auto}.cute-sidenav-fixed{position:fixed}\n"], dependencies: [{ kind: "component", type: CuteSidenavContent, selector: "cute-sidenav-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSidenavContainer, decorators: [{
             type: Component,
@@ -1034,7 +1035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         },
                     ], imports: [
                         CuteSidenavContent
-                    ], template: "@if (hasBackdrop) {\r\n    <div class=\"cute-drawer-backdrop\" (click)=\"_onBackdropClicked()\"\r\n         [class.cute-drawer-shown]=\"_isShowingBackdrop()\"></div>\r\n}\r\n\r\n<ng-content select=\"cute-sidenav\"></ng-content>\r\n\r\n<ng-content select=\"cute-sidenav-content\"></ng-content>\r\n\r\n@if (!_content) {\r\n    <cute-sidenav-content>\r\n        <ng-content></ng-content>\r\n    </cute-sidenav-content>\r\n}\r\n", styles: [".cute-drawer-container{position:relative;z-index:1;color:var(--bs-body-color);background-color:var(--bs-body-bg);box-sizing:border-box;display:block;overflow:hidden}.cute-drawer-container[fullscreen]{inset:0;position:absolute}.cute-drawer-container[fullscreen].cute-drawer-container-has-open{overflow:hidden}.cute-drawer-container.cute-drawer-container-explicit-backdrop .cute-drawer-side{z-index:3}.cute-drawer-container.ng-animate-disabled .cute-drawer-backdrop,.cute-drawer-container.ng-animate-disabled .cute-drawer-content,.ng-animate-disabled .cute-drawer-container .cute-drawer-backdrop,.ng-animate-disabled .cute-drawer-container .cute-drawer-content{transition:none}.cute-drawer-backdrop{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.cute-drawer-backdrop.cute-drawer-shown{visibility:visible;background-color:#0009}.cute-drawer-transition .cute-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (forced-colors: active){.cute-drawer-backdrop{opacity:.5}}.cute-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.cute-drawer-content.cute-drawer-content-hidden{opacity:0}.cute-drawer-transition .cute-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.cute-drawer{box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;position:relative;z-index:4;color:var(--bs-secondary-color);background-color:var(--bs-secondary-bg);border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-right:solid var(--bs-border-width) var(--bs-border-color);display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (forced-colors: active){.cute-drawer,[dir=rtl] .cute-drawer.cute-drawer-end{border-right:solid 1px currentColor}}@media (forced-colors: active){[dir=rtl] .cute-drawer,.cute-drawer.cute-drawer-end{border-left:solid 1px currentColor;border-right:none}}.cute-drawer.cute-drawer-side{z-index:2}.cute-drawer.cute-drawer-end{right:0;transform:translate3d(100%,0,0);border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .cute-drawer{border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0;transform:translate3d(100%,0,0)}[dir=rtl] .cute-drawer.cute-drawer-end{border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-top-left-radius:0;border-bottom-left-radius:0;left:0;right:auto;transform:translate3d(-100%,0,0)}.cute-drawer-transition .cute-drawer{transition:transform .4s cubic-bezier(.25,.8,.25,1)}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating){visibility:hidden;box-shadow:none}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating) .cute-drawer-inner-container{display:none}.cute-drawer.cute-drawer-opened.cute-drawer-opened{transform:none}.cute-drawer-side{box-shadow:none;border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid}.cute-drawer-side.cute-drawer-end,[dir=rtl] .cute-drawer-side{border-left-color:var(--bs-border-color);border-left-width:var(--bs-border-width);border-left-style:solid;border-right:none}[dir=rtl] .cute-drawer-side.cute-drawer-end{border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid;border-left:none}.cute-drawer-inner-container{width:100%;height:100%;overflow:auto}.cute-sidenav-fixed{position:fixed}\n"] }]
+                    ], template: "@if (hasBackdrop) {\r\n    <div class=\"cute-drawer-backdrop\" (click)=\"_onBackdropClicked()\"\r\n         [class.cute-drawer-shown]=\"_isShowingBackdrop()\"></div>\r\n}\r\n\r\n<ng-content select=\"cute-sidenav\"></ng-content>\r\n\r\n<ng-content select=\"cute-sidenav-content\"></ng-content>\r\n\r\n@if (!_content) {\r\n    <cute-sidenav-content>\r\n        <ng-content></ng-content>\r\n    </cute-sidenav-content>\r\n}\r\n", styles: [".cute-drawer-container{position:relative;z-index:1;color:var(--bs-body-color);background-color:var(--bs-body-bg);box-sizing:border-box;display:block;overflow:hidden}.cute-drawer-container[fullscreen]{inset:0;position:absolute}.cute-drawer-container[fullscreen].cute-drawer-container-has-open{overflow:hidden}.cute-drawer-container.cute-drawer-container-explicit-backdrop .cute-drawer-side{z-index:3}.cute-drawer-container.ng-animate-disabled .cute-drawer-backdrop,.cute-drawer-container.ng-animate-disabled .cute-drawer-content,.ng-animate-disabled .cute-drawer-container .cute-drawer-backdrop,.ng-animate-disabled .cute-drawer-container .cute-drawer-content{transition:none}.cute-drawer-backdrop{inset:0;position:absolute;display:block;z-index:3;visibility:hidden}.cute-drawer-backdrop.cute-drawer-shown{visibility:visible;background-color:#0009}.cute-drawer-transition .cute-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media (forced-colors: active){.cute-drawer-backdrop{opacity:.5}}.cute-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.cute-drawer-content.cute-drawer-content-hidden{opacity:0}.cute-drawer-transition .cute-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.cute-drawer{position:relative;z-index:4;color:var(--bs-secondary-color);background-color:var(--bs-secondary-bg);box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f;border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-right:solid var(--bs-border-width) var(--bs-border-color);display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media (forced-colors: active){.cute-drawer,[dir=rtl] .cute-drawer.cute-drawer-end{border-right:solid var(--bs-border-width) currentColor}}@media (forced-colors: active){[dir=rtl] .cute-drawer,.cute-drawer.cute-drawer-end{border-left:solid var(--bs-border-width) currentColor;border-right:none}}.cute-drawer.cute-drawer-side{z-index:2}.cute-drawer.cute-drawer-end{right:0;transform:translate3d(100%,0,0);border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .cute-drawer{border-top-left-radius:var(--bs-border-radius-lg);border-bottom-left-radius:var(--bs-border-radius-lg);border-top-right-radius:0;border-bottom-right-radius:0;transform:translate3d(100%,0,0)}[dir=rtl] .cute-drawer.cute-drawer-end{border-top-right-radius:var(--bs-border-radius-lg);border-bottom-right-radius:var(--bs-border-radius-lg);border-top-left-radius:0;border-bottom-left-radius:0;left:0;right:auto;transform:translate3d(-100%,0,0)}.cute-drawer-transition .cute-drawer{transition:transform .4s cubic-bezier(.25,.8,.25,1)}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating){visibility:hidden;box-shadow:none}.cute-drawer:not(.cute-drawer-opened):not(.cute-drawer-animating) .cute-drawer-inner-container{display:none}.cute-drawer.cute-drawer-opened.cute-drawer-opened{transform:none}.cute-drawer-side{box-shadow:none;border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid}.cute-drawer-side.cute-drawer-end,[dir=rtl] .cute-drawer-side{border-left-color:var(--bs-border-color);border-left-width:var(--bs-border-width);border-left-style:solid;border-right:none}[dir=rtl] .cute-drawer-side.cute-drawer-end{border-right-color:var(--bs-border-color);border-right-width:var(--bs-border-width);border-right-style:solid;border-left:none}.cute-drawer-inner-container{width:100%;height:100%;overflow:auto}.cute-sidenav-fixed{position:fixed}\n"] }]
         }], propDecorators: { _allDrawers: [{
                 type: ContentChildren,
                 args: [CuteSidenav, {