@ruc-lib/drawer 3.2.0 → 4.0.0

package/README.md

@@ -27,11 +27,41 @@ npm install @uxpractice/ruc-lib
 ```
 
 ### Install Individual Component
+
 If you only need the Drawer component:
+
+**For Angular 15:**
+```bash
+npm install @ruc-lib/drawer@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
+```
+
+**For Angular 16:**
+```bash
+npm install @ruc-lib/drawer@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
+```
+
+**For Angular 17:**
+```bash
+npm install @ruc-lib/drawer@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
+```
+
+**For Angular 18:**
+```bash
+npm install @ruc-lib/drawer@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
+```
+
+**For Angular 19:**
+```bash
+npm install @ruc-lib/drawer@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
+```
+
+**For Angular 20:**
 ```bash
-npm install @ruc-lib/drawer
+npm install @ruc-lib/drawer@4.0.0
 ```
 
+> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
+
 ### 📦 Version Compatibility
 
 Please ensure you install the correct version of `@ruc-lib/drawer` based on your Angular version.
@@ -40,36 +70,34 @@ Please ensure you install the correct version of `@ruc-lib/drawer` based on your
 |--------------------|------------------------------------------|
 | 15.x.x             | `npm install @ruc-lib/drawer@^3.2.0`     |
 | 16.x.x             | `npm install @ruc-lib/drawer@^3.2.0`     |
+| 17.x.x             | `npm install @ruc-lib/drawer@^4.0.0`     |
+| 18.x.x             | `npm install @ruc-lib/drawer@^4.0.0`     |
+| 19.x.x             | `npm install @ruc-lib/drawer@^4.0.0`     |
+| 20.x.x             | `npm install @ruc-lib/drawer@^4.0.0`     |
 
 
 ## Usage
 
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibDrawerModule`:
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibDrawerComponent`:
 
 ```typescript
+import { Component } from '@angular/core';
+
 // For Complete Library
-import { RuclibDrawerModule } from '@uxpractice/ruc-lib/drawer';
+import { RuclibDrawerComponent } from '@uxpractice/ruc-lib/drawer';
 
 // For Individual Package
-import { RuclibDrawerModule } from '@ruc-lib/drawer';
-
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    RuclibDrawerModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+import { RuclibDrawerComponent } from '@ruc-lib/drawer';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibDrawerComponent],
+  templateUrl: './app.component.html',
 })
-export class AppModule {}
+export class AppComponent {
+  // Component code here
+}
 ```
 
 ### 2. Use the Component
@@ -235,4 +263,4 @@ Contributions are welcome! Feel free to open issues or pull requests for any enh
 
 # Acknowledgements
 
-Thank you for choosing the Drawer Component Library. If you have any feedback or suggestions, please let us know!
+Thank you for choosing the Drawer Component Library. If you have any feedback or suggestions, please let us know!

package/fesm2022/ruc-lib-drawer.mjs

@@ -0,0 +1,456 @@
+import * as i0 from '@angular/core';
+import { Pipe, EventEmitter, ViewContainerRef, HostListener, ViewChild, Output, Input, Component } from '@angular/core';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1 from '@angular/platform-browser';
+
+/**
+ * @Pipe SafeHtmlPipe
+ * @name safeHtml
+ * @description A pipe that bypasses Angular's built-in security and sanitizes HTML content,
+ * allowing it to be safely rendered in the DOM. Use with caution and only with trusted HTML sources.
+ */
+class SafeHtmlPipe {
+    /**
+     * @param sanitizer - An instance of DomSanitizer used to bypass security.
+     */
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    /**
+     * Transforms a string containing HTML into a SafeHtml object that can be bound to [innerHTML].
+     * @param value - The HTML string to sanitize.
+     * @returns A SafeHtml object, which Angular trusts as safe HTML.
+     */
+    transform(value) {
+        if (value === null || value === undefined) {
+            return value;
+        }
+        return this.sanitizer.bypassSecurityTrustHtml(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'safeHtml', standalone: true }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+class RuclibDrawerComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        /**
+         * Input data for configuring the drawer's appearance and behavior.
+         * @see RuclibDrawerInput interface for detailed properties.
+         */
+        this.rucInputData = {};
+        /**
+         * EventEmitter for various drawer events.
+         * Emits objects with `type` (e.g., 'openedStart', 'closedStart', 'openedChange', 'drawerToggle')
+         * and `opened` (boolean) and `position` (string) properties.
+         */
+        this.rucEvent = new EventEmitter();
+        /** Reference to the dynamically created component. */
+        this.dynamicComponentRef = null;
+        /**
+         * Current animation state of the drawer ('in' or 'out').
+         * @public
+         */
+        this.drawerAnimationState = 'out';
+        /**
+         * Current active position of the drawer.
+         * @public
+         * @default 'left'
+         */
+        this.currentDrawerPosition = 'left'; // Default
+        /**
+         * Stores the next position if the drawer is currently open and a new position is requested.
+         * Used to sequence close and open animations.
+         * @private
+         */
+        this.pendingDrawerPosition = null;
+        /**
+         * Flag to indicate if an animation is currently in progress to prevent rapid toggling.
+         * @public
+         */
+        this.isAnimating = false;
+        /**
+         * Effective animation duration for the drawer, derived from input or default.
+         * @public
+         * @default '300ms'
+         */
+        this.effectiveAnimationDuration = '300ms';
+        /**
+         * Mode of the drawer, primarily for determining backdrop behavior with custom animations.
+         * @public
+         * @default 'side'
+         */
+        this.matDrawerMode = 'side';
+        /**
+         * Actual position ('start' or 'end') used by Angular Material's MatDrawer if it were directly used.
+         * Retained for logical consistency in determining layout.
+         * @public
+         * @default 'start'
+         */
+        this.matActualPosition = 'start';
+        /**
+         * Flag indicating if the drawer is in a vertical layout (top/bottom).
+         * Helps determine if width or height should be 100%.
+         * @public
+         */
+        this.isVerticalLayout = false;
+        /**
+         * Effective dimension (width or height) of the drawer panel.
+         * @public
+         * @default '250px'
+         */
+        this.effectiveDrawerDimension = '250px';
+    }
+    /**
+     * Angular lifecycle hook that is called after data-bound properties of a directive are initialized.
+     */
+    ngOnInit() {
+        this.applyInputs();
+        this.drawerAnimationState = 'out';
+        this.loadDynamicContent();
+    }
+    /**
+     * Angular lifecycle hook that is called after Angular has fully initialized a component's view.
+     */
+    ngAfterViewInit() {
+        if (this.rucInputData.initialOpenedState && this.drawerAnimationState === 'out') {
+            // Defer state update to the next microtask queue.
+            // This helps avoid ExpressionChangedAfterItHasBeenCheckedError when initializing the drawer's open state.
+            Promise.resolve().then(() => this.setDrawerOpenState(true));
+        }
+    }
+    /**
+     * Angular lifecycle hook that is called when any data-bound property of a directive changes.
+     * @param changes - Object containing the changed properties.
+     */
+    ngOnChanges(changes) {
+        if (changes['rucInputData']) {
+            const previousRucInputData = changes['rucInputData'].previousValue || {};
+            const currentRucInputData = changes['rucInputData'].currentValue || {};
+            const oldPosition = previousRucInputData.drawerPosition ?? this.currentDrawerPosition;
+            const wasOpen = this.drawerAnimationState === 'in';
+            this.currentDrawerPosition = currentRucInputData.drawerPosition ?? 'left';
+            this.applyInputs();
+            const newPosition = this.currentDrawerPosition;
+            const shouldBeOpen = this.rucInputData.initialOpenedState ?? false;
+            if (wasOpen && oldPosition !== newPosition) {
+                this.pendingDrawerPosition = newPosition;
+                this.setDrawerOpenState(false);
+            }
+            else if (wasOpen !== shouldBeOpen) {
+                setTimeout(() => {
+                    this.setDrawerOpenState(shouldBeOpen);
+                });
+            }
+            else {
+                this.loadDynamicContent();
+            }
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Applies input data to component properties, calculating dimensions and positions.
+     * @private
+     */
+    applyInputs() {
+        this.matDrawerMode = this.rucInputData.mode ?? 'side';
+        this.effectiveAnimationDuration = this.rucInputData.animationDuration || '300ms';
+        const getDimension = (inputDimension, defaultDimension) => {
+            return (inputDimension && inputDimension.trim() !== '') ? inputDimension : defaultDimension;
+        };
+        switch (this.currentDrawerPosition) {
+            case 'right':
+                this.matActualPosition = 'end';
+                this.isVerticalLayout = false;
+                this.effectiveDrawerDimension = getDimension(this.rucInputData.drawerWidth, '250px');
+                break;
+            case 'top':
+                this.matActualPosition = 'start';
+                this.isVerticalLayout = true;
+                this.effectiveDrawerDimension = getDimension(this.rucInputData.drawerHeight, '200px');
+                break;
+            case 'bottom':
+                this.matActualPosition = 'end';
+                this.isVerticalLayout = true;
+                this.effectiveDrawerDimension = getDimension(this.rucInputData.drawerHeight, '200px');
+                break;
+            case 'left':
+            default:
+                this.matActualPosition = 'start';
+                this.isVerticalLayout = false;
+                this.effectiveDrawerDimension = getDimension(this.rucInputData.drawerWidth, '250px');
+                break;
+        }
+    }
+    /**
+     * Toggles the drawer's open/close state or switches to a new position.
+     * @param requestedPosition - The desired position to open the drawer from. If not provided, uses `currentDrawerPosition`.
+     */
+    toggleDrawer(requestedPosition) {
+        if (this.isAnimating && !this.pendingDrawerPosition) {
+            return;
+        }
+        const positionToToggle = requestedPosition || this.currentDrawerPosition;
+        const isDrawerOpen = this.drawerAnimationState === 'in';
+        const isSamePosition = this.currentDrawerPosition === positionToToggle;
+        if (isDrawerOpen) {
+            if (isSamePosition) {
+                this.setDrawerOpenState(false);
+            }
+            else {
+                this.pendingDrawerPosition = positionToToggle;
+                this.setDrawerOpenState(false);
+            }
+        }
+        else {
+            if (!isSamePosition) {
+                this.currentDrawerPosition = positionToToggle;
+                this.applyInputs();
+            }
+            this.setDrawerOpenState(true);
+        }
+    }
+    /**
+     * Sets the drawer's open state and triggers the animation.
+     * @param open - Boolean indicating whether to open (true) or close (false) the drawer.
+     * @private
+     */
+    setDrawerOpenState(open) {
+        if (this.isAnimating && !this.pendingDrawerPosition && open === (this.drawerAnimationState === 'in')) {
+            return;
+        }
+        this.isAnimating = true;
+        this.drawerAnimationState = open ? 'in' : 'out';
+        this.rucEvent.emit({
+            type: open ? 'openedStart' : 'closedStart',
+            opened: open,
+            position: this.currentDrawerPosition
+        });
+        this.cdr.detectChanges();
+    }
+    /**
+     * Callback for when a drawer animation finishes.
+     * Manages state transitions, especially when switching between open drawers.
+     * @param event - The Angular AnimationEvent.
+     */
+    onAnimationDone(event) {
+        if (event.element.classList.contains('dynamic-drawer')) {
+            if (event.toState === 'out') {
+                this.rucEvent.emit({ type: 'openedChange', opened: false, position: this.currentDrawerPosition });
+                this.rucEvent.emit({ type: 'drawerToggle', opened: false, position: this.currentDrawerPosition });
+                if (this.pendingDrawerPosition) {
+                    this.currentDrawerPosition = this.pendingDrawerPosition;
+                    this.pendingDrawerPosition = null;
+                    this.applyInputs();
+                    setTimeout(() => {
+                        this.setDrawerOpenState(true);
+                    });
+                    return;
+                }
+            }
+            else if (event.toState === 'in') {
+                this.rucEvent.emit({ type: 'openedChange', opened: true, position: this.currentDrawerPosition });
+                this.rucEvent.emit({ type: 'drawerToggle', opened: true, position: this.currentDrawerPosition });
+            }
+            this.isAnimating = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Loads the dynamic component into the drawer if specified in rucInputData.
+     * Clears existing dynamic component if any.
+     * @private
+     */
+    loadDynamicContent() {
+        this.clearDynamicContent();
+        const componentType = this.rucInputData.content?.drawerContentComponent;
+        if (componentType && this.drawerComponentHost) {
+            this.dynamicComponentRef = this.drawerComponentHost.createComponent(componentType);
+            if (this.dynamicComponentRef.instance) {
+                this.dynamicComponentRef.changeDetectorRef.detectChanges();
+            }
+            if (this.rucInputData.drawerContentComponentData && this.dynamicComponentRef.instance) {
+                Object.keys(this.rucInputData.drawerContentComponentData).forEach(key => {
+                    if (key in this.dynamicComponentRef.instance) {
+                        this.dynamicComponentRef.instance[key] = this.rucInputData.drawerContentComponentData[key];
+                    }
+                });
+                this.dynamicComponentRef.changeDetectorRef.detectChanges();
+            }
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Getter for the current animation parameters to be passed to the animation triggers in the template.
+     * Includes the current animation state ('in' or 'out') and the effective duration.
+     */
+    get animationParams() {
+        return { value: this.drawerAnimationState, params: { duration: this.effectiveAnimationDuration } };
+    }
+    /**
+     * Getter for the backdrop animation parameters.
+     * Typically uses a faster duration than the main drawer animation.
+     */
+    get backdropAnimationParams() {
+        let durationMs = 0;
+        if (this.effectiveAnimationDuration.endsWith('ms')) {
+            durationMs = parseInt(this.effectiveAnimationDuration, 10);
+        }
+        else if (this.effectiveAnimationDuration.endsWith('s')) {
+            durationMs = parseFloat(this.effectiveAnimationDuration) * 1000;
+        }
+        else {
+            durationMs = parseInt(this.effectiveAnimationDuration, 10) || 300; // Fallback if format is unexpected
+        }
+        const backdropDurationValue = Math.floor(durationMs / 2); // Ensure integer for ms
+        const backdropDuration = backdropDurationValue > 0 ? `${backdropDurationValue}ms` : '150ms'; // Fallback if calculated duration is 0 or less
+        return { value: this.drawerAnimationState, params: { duration: backdropDuration } };
+    }
+    /**
+     * Generates an accessible label for the toggle button based on the drawer's state and position.
+     * @returns The ARIA label string for the toggle button.
+     */
+    getToggleButtonAriaLabel() {
+        const defaultOpen = `Open ${this.currentDrawerPosition} Drawer`;
+        const defaultClose = `Close ${this.currentDrawerPosition} Drawer`;
+        const openText = this.rucInputData.toggleButtonText?.open || defaultOpen;
+        const closeText = this.rucInputData.toggleButtonText?.close || defaultClose;
+        return this.drawerAnimationState === 'in' ? closeText : openText;
+    }
+    /**
+     * Handles clicks on the backdrop.
+     * Closes the drawer only if `disableClose` is not true.
+     * @public
+     */
+    handleBackdropClick() {
+        if (!(this.rucInputData.disableClose ?? false)) {
+            this.toggleDrawer(this.currentDrawerPosition);
+        }
+    }
+    /**
+     * Listens for Escape key presses on the document.
+     * Closes the drawer if it's open and `disableClose` is not true.
+     * @param event - The KeyboardEvent.
+     */
+    onKeydownHandler(event) {
+        if (this.drawerAnimationState === 'in' && !(this.rucInputData.disableClose ?? false)) {
+            this.toggleDrawer(this.currentDrawerPosition);
+        }
+    }
+    /**
+     * Clears any dynamically loaded component.
+     * @private
+     */
+    clearDynamicContent() {
+        if (this.drawerComponentHost) {
+            this.drawerComponentHost.clear();
+        }
+        if (this.dynamicComponentRef) {
+            this.dynamicComponentRef.destroy();
+            this.dynamicComponentRef = null;
+        }
+    }
+    /**
+     * Angular lifecycle hook that is called clear dynamic component content.
+     */
+    ngOnDestroy() {
+        this.clearDynamicContent();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibDrawerComponent, isStandalone: true, selector: "uxp-ruclib-drawer", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, outputs: { rucEvent: "rucEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "drawerComponentHost", first: true, predicate: ["drawerComponentHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<!--\r\nCustom Backdrop element.\r\nVisible only when:\r\n- rucInputData.mode is 'over'\r\n- rucInputData.hasBackdrop is true (or undefined, defaulting to true)\r\n- drawerAnimationState is 'in' (drawer is open or opening)\r\nAnimates using 'backdropFade' trigger.\r\nClicking the backdrop will toggle the drawer for the current position.\r\nBackground color can be customized via rucInputData.backdropBackgroundColor.\r\n-->\r\n@if (rucInputData.mode === 'over' && (rucInputData.hasBackdrop ?? true) && drawerAnimationState === 'in') {\r\n  <div class=\"custom-backdrop\"\r\n    [@backdropFade]=\"backdropAnimationParams\"\r\n    (click)=\"handleBackdropClick()\"\r\n    [style.background-color]=\"rucInputData.hasBackdrop ? rucInputData.backdropBackgroundColor : ''\">\r\n  </div>\r\n}\r\n\r\n<!--\r\nCustom Dynamic Drawer element.\r\nThis is the main panel that slides in and out.\r\n- Applies CSS classes based on currentDrawerPosition and customTheme.\r\n- Dynamically sets width and height based on drawer orientation and input data.\r\n- Uses one of four animation triggers (slideInOutLeft, slideInOutRight, slideInOutTop, slideInOutBottom)\r\nbased on currentDrawerPosition. Only the active trigger runs its animation; others are set to an\r\ninstant 'out' state to prevent interference.\r\n- Animation completion events are handled by onAnimationDone().\r\n-->\r\n<div class=\"dynamic-drawer\"\r\n  [ngClass]=\"'drawer-' + currentDrawerPosition + ' ' + (customTheme || '')\"\r\n  [style.width]=\"!isVerticalLayout ? effectiveDrawerDimension : '100%'\"\r\n  [style.height]=\"isVerticalLayout ? effectiveDrawerDimension : '100%'\"\r\n\r\n  [@slideInOutLeft]=\"currentDrawerPosition === 'left' ? animationParams : {value: 'out', params: {duration: '0ms'}}\"\r\n  (@slideInOutLeft.done)=\"currentDrawerPosition === 'left' && onAnimationDone($event)\"\r\n\r\n  [@slideInOutRight]=\"currentDrawerPosition === 'right' ? animationParams : {value: 'out', params: {duration: '0ms'}}\"\r\n  (@slideInOutRight.done)=\"currentDrawerPosition === 'right' && onAnimationDone($event)\"\r\n\r\n  [@slideInOutTop]=\"currentDrawerPosition === 'top' ? animationParams : {value: 'out', params: {duration: '0ms'}}\"\r\n  (@slideInOutTop.done)=\"currentDrawerPosition === 'top' && onAnimationDone($event)\"\r\n\r\n  [@slideInOutBottom]=\"currentDrawerPosition === 'bottom' ? animationParams : {value: 'out', params: {duration: '0ms'}}\"\r\n  (@slideInOutBottom.done)=\"currentDrawerPosition === 'bottom' && onAnimationDone($event)\">\r\n\r\n  <!-- Wrapper for the content inside the drawer, handles padding and layout. -->\r\n  <div class=\"drawer-content-wrapper\">\r\n    <!-- Optional title for the drawer. -->\r\n    @if (rucInputData.content?.drawerTitle) {\r\n      <h2 class=\"ruclib-drawer-title\">\r\n        {{ rucInputData.content?.drawerTitle }}\r\n      </h2>\r\n    }\r\n    <!--\r\n    Optional close button inside the drawer.\r\n    Toggles the drawer for the current position when clicked.\r\n    ARIA label provides accessibility.\r\n    Dimensions can be customized via rucInputData.closeButtonDimensions.\r\n    -->\r\n    @if (rucInputData.showCloseIcon) {\r\n      <button\r\n        mat-icon-button class=\"ruclib-drawer-close-button\"\r\n        (click)=\"toggleDrawer(currentDrawerPosition)\"\r\n        [attr.aria-label]=\"'Close ' + currentDrawerPosition + ' drawer'\"\r\n        [style.width]=\"rucInputData.closeButtonDimensions?.width\"\r\n        [style.height]=\"rucInputData.closeButtonDimensions?.height\">\r\n        <!-- Material icon for the close button. Size can be customized. -->\r\n        <mat-icon [style.font-size]=\"rucInputData.closeButtonDimensions?.iconSize\">close</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- Main body content of the drawer. -->\r\n    <div class=\"ruclib-drawer-body\">\r\n      <!-- Host for dynamically injected component -->\r\n      <ng-template #drawerComponentHost></ng-template>\r\n      <!-- Fallback to HTML content if no component is provided -->\r\n      @if (!rucInputData.content?.drawerContentComponent) {\r\n        <div [innerHTML]=\"rucInputData.content?.drawerBody || '' | safeHtml\"></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--\r\nAngular Material Drawer Container.\r\nActs as the main container for the drawer system, especially if 'side' or 'push' modes\r\nwere to be implemented with MatDrawer's native behavior. With custom fixed-position animations,\r\nits primary role here is to host the mat-drawer-content.\r\n- Applies 'vertical-layout' class if the drawer is top/bottom.\r\n- MatDrawer's own backdrop is disabled as a custom one is used.\r\n-->\r\n<mat-drawer-container\r\n  class=\"ruclib-drawer-container\"\r\n  [class.vertical-layout]=\"isVerticalLayout\"\r\n  [hasBackdrop]=\"false\"> <!-- MatDrawer's backdrop is not used with custom animation -->\r\n  <mat-drawer-content class=\"ruclib-main-content\">\r\n    <button [disabled]=\"rucInputData.disableToggleButtonInMainContent\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      title=\"Toggle Drawer\"\r\n      class=\"drawer-toggle-button\"\r\n      [style.width]=\"rucInputData.toggleButtonDimensions?.width\"\r\n      [style.height]=\"rucInputData.toggleButtonDimensions?.height\"\r\n      [style.padding]=\"rucInputData.toggleButtonDimensions?.padding\"\r\n      [style.font-size]=\"rucInputData.toggleButtonDimensions?.fontSize\"\r\n      (click)=\"toggleDrawer(currentDrawerPosition)\"\r\n      [attr.aria-label]=\"getToggleButtonAriaLabel()\"\r\n      [attr.aria-expanded]=\"drawerAnimationState === 'in'\">\r\n      <!-- Optional Material icon for the toggle button. Show only if no image URL is provided. -->\r\n      @if (rucInputData.toggleButtonIcon && !rucInputData.toggleButtonImageUrl) {\r\n        <mat-icon [style.font-size]=\"rucInputData.toggleButtonDimensions?.iconSize\">{{ rucInputData.toggleButtonIcon }}</mat-icon>\r\n      }\r\n      <!-- Optional image for the toggle button. If present, it should fill the button. -->\r\n      @if (rucInputData.toggleButtonImageUrl) {\r\n        <img\r\n          [src]=\"rucInputData.toggleButtonImageUrl\"\r\n          [alt]=\"rucInputData.toggleButtonImageAlt || 'Toggle Drawer'\"\r\n          class=\"ruclib-drawer-toggle-image\"\r\n          [style.width]=\"rucInputData.toggleButtonDimensions?.width\"\r\n          [style.height]=\"rucInputData.toggleButtonDimensions?.height\"\r\n          [style.padding]=\"rucInputData.toggleButtonDimensions?.padding\">\r\n      }\r\n      <!-- Text for the toggle button. Show only if NO icon AND NO image URL is provided. -->\r\n      @if (!rucInputData.toggleButtonIcon && !rucInputData.toggleButtonImageUrl && (rucInputData.toggleButtonText?.open || rucInputData.toggleButtonText?.close)) {\r\n        <span>\r\n          {{ drawerAnimationState === 'in' ? (rucInputData.toggleButtonText?.close || 'Close') : (rucInputData.toggleButtonText?.open || 'Open') }}\r\n        </span>\r\n      }\r\n      <!-- Text for the toggle button when an icon (but NO image) IS also present. -->\r\n      @if (rucInputData.toggleButtonIcon && !rucInputData.toggleButtonImageUrl && (rucInputData.toggleButtonText?.open || rucInputData.toggleButtonText?.close)) {\r\n        <span class=\"toggle-button-text-with-icon\">\r\n          {{ drawerAnimationState === 'in' ? (rucInputData.toggleButtonText?.close || 'Close') : (rucInputData.toggleButtonText?.open || 'Open') }}\r\n        </span>\r\n      }\r\n    </button>\r\n    <!-- Main application content area, rendered from HTML string via safeHtml pipe. -->\r\n    <div [innerHTML]=\"rucInputData.content?.mainBody || '' | safeHtml\"></div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n", styles: [":host{display:block;position:relative;overflow:hidden}.custom-backdrop{position:absolute;inset:0;background-color:#000;z-index:999;visibility:hidden}.ruclib-drawer-container{width:100%;height:400px;border:1px solid #ccc;position:relative;overflow:hidden}.drawer-content-wrapper{padding:16px;position:relative;box-sizing:border-box;height:100%;display:flex;flex-direction:column}.ruclib-drawer-title{margin-top:0;margin-bottom:16px;font-size:1.5em;flex-shrink:0}.ruclib-drawer-close-button{position:absolute;top:8px;right:8px;padding:5px 0 0!important;flex-shrink:0}.ruclib-drawer-body{flex-grow:1;overflow-y:auto;word-break:break-word}.dynamic-drawer{background-color:var(--mat-sidenav-content-background-color, white);position:absolute;box-sizing:border-box;box-shadow:0 2px 10px #0003;z-index:1000;overflow:hidden}.dynamic-drawer.drawer-left{top:0;bottom:0;left:0}.dynamic-drawer.drawer-right{top:0;bottom:0;right:0}.dynamic-drawer.drawer-top{top:0;left:0;right:0}.dynamic-drawer.drawer-bottom{bottom:0;left:0;right:0}.dynamic-drawer.light-theme{background-color:#fff;color:#000000de}.dynamic-drawer.light-theme .ruclib-drawer-title{color:#000000de}.dynamic-drawer.light-theme .ruclib-drawer-close-button .mat-icon{color:#0000008a}.dynamic-drawer.dark-theme{background-color:#424242;color:#fff}.dynamic-drawer.dark-theme .ruclib-drawer-title,.dynamic-drawer.dark-theme .ruclib-drawer-close-button .mat-icon{color:#fff}.dynamic-drawer.custom-theme-one{background-color:#fff;color:#000000de}.dynamic-drawer.custom-theme-one .ruclib-drawer-title{color:#000000de}.dynamic-drawer.custom-theme-one .ruclib-drawer-close-button .mat-icon{color:#0000008a}.dynamic-drawer.custom-theme-two{background-color:#424242;color:#fff}.dynamic-drawer.custom-theme-two .ruclib-drawer-title,.dynamic-drawer.custom-theme-two .ruclib-drawer-close-button .mat-icon{color:#fff}.ruclib-drawer-toggle-image{object-fit:contain;display:block}.drawer-toggle-button{margin-bottom:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ruclib-main-content{padding:16px;display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i4.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], animations: [
+            trigger('backdropFade', [
+                state('out', style({ opacity: 0, visibility: 'hidden' })),
+                state('in', style({ opacity: 0.6, visibility: 'visible' })),
+                transition('out => in', animate('{{duration}} ease-in')),
+                transition('in => out', animate('{{duration}} ease-out')),
+            ]),
+            trigger('slideInOutLeft', [
+                state('out', style({ transform: 'translateX(-100%)', visibility: 'hidden' })),
+                state('in', style({ transform: 'translateX(0)', visibility: 'visible' })),
+                transition('out <=> in', animate('{{duration}} ease-in-out')),
+            ]),
+            trigger('slideInOutRight', [
+                state('out', style({ transform: 'translateX(100%)', visibility: 'hidden' })),
+                state('in', style({ transform: 'translateX(0)', visibility: 'visible' })),
+                transition('out <=> in', animate('{{duration}} ease-in-out')),
+            ]),
+            trigger('slideInOutTop', [
+                state('out', style({ transform: 'translateY(-100%)', visibility: 'hidden' })),
+                state('in', style({ transform: 'translateY(0%)', visibility: 'visible' })),
+                transition('out <=> in', animate('{{duration}} ease-in-out')),
+            ]),
+            trigger('slideInOutBottom', [
+                state('out', style({ transform: 'translateY(100%)', visibility: 'hidden' })),
+                state('in', style({ transform: 'translateY(0%)', visibility: 'visible' })),
+                transition('out <=> in', animate('{{duration}} ease-in-out')),
+            ])
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-drawer', imports: [CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatSidenavModule,
+                        MatToolbarModule, SafeHtmlPipe], animations: [
+                        trigger('backdropFade', [
+                            state('out', style({ opacity: 0, visibility: 'hidden' })),
+                            state('in', style({ opacity: 0.6, visibility: 'visible' })),
+                            transition('out => in', animate('{{duration}} ease-in')),
+                            transition('in => out', animate('{{duration}} ease-out')),
+                        ]),
+                        trigger('slideInOutLeft', [
+                            state('out', style({ transform: 'translateX(-100%)', visibility: 'hidden' })),
+                            state('in', style({ transform: 'translateX(0)', visibility: 'visible' })),
+                            transition('out <=> in', animate('{{duration}} ease-in-out')),
+                        ]),
+                        trigger('slideInOutRight', [
+                            state('out', style({ transform: 'translateX(100%)', visibility: 'hidden' })),
+                            state('in', style({ transform: 'translateX(0)', visibility: 'visible' })),
+                            transition('out <=> in', animate('{{duration}} ease-in-out')),
+                        ]),
+                        trigger('slideInOutTop', [
+                            state('out', style({ transform: 'translateY(-100%)', visibility: 'hidden' })),
+                            state('in', style({ transform: 'translateY(0%)', visibility: 'visible' })),
+                            transition('out <=> in', animate('{{duration}} ease-in-out')),
+                        ]),
+                        trigger('slideInOutBottom', [
+                            state('out', style({ transform: 'translateY(100%)', visibility: 'hidden' })),
+                            state('in', style({ transform: 'translateY(0%)', visibility: 'visible' })),
+                            transition('out <=> in', animate('{{duration}} ease-in-out')),
+                        ])
+                    ], template: "<!--\r\nCustom Backdrop element.\r\nVisible only when:\r\n- rucInputData.mode is 'over'\r\n- rucInputData.hasBackdrop is true (or undefined, defaulting to true)\r\n- drawerAnimationState is 'in' (drawer is open or opening)\r\nAnimates using 'backdropFade' trigger.\r\nClicking the backdrop will toggle the drawer for the current position.\r\nBackground color can be customized via rucInputData.backdropBackgroundColor.\r\n-->\r\n@if (rucInputData.mode === 'over' && (rucInputData.hasBackdrop ?? true) && drawerAnimationState === 'in') {\r\n  <div class=\"custom-backdrop\"\r\n    [@backdropFade]=\"backdropAnimationParams\"\r\n    (click)=\"handleBackdropClick()\"\r\n    [style.background-color]=\"rucInputData.hasBackdrop ? rucInputData.backdropBackgroundColor : ''\">\r\n  </div>\r\n}\r\n\r\n<!--\r\nCustom Dynamic Drawer element.\r\nThis is the main panel that slides in and out.\r\n- Applies CSS classes based on currentDrawerPosition and customTheme.\r\n- Dynamically sets width and height based on drawer orientation and input data.\r\n- Uses one of four animation triggers (slideInOutLeft, slideInOutRight, slideInOutTop, slideInOutBottom)\r\nbased on currentDrawerPosition. Only the active trigger runs its animation; others are set to an\r\ninstant 'out' state to prevent interference.\r\n- Animation completion events are handled by onAnimationDone().\r\n-->\r\n<div class=\"dynamic-drawer\"\r\n  [ngClass]=\"'drawer-' + currentDrawerPosition + ' ' + (customTheme || '')\"\r\n  [style.width]=\"!isVerticalLayout ? effectiveDrawerDimension : '100%'\"\r\n  [style.height]=\"isVerticalLayout ? effectiveDrawerDimension : '100%'\"\r\n\r\n  [@slideInOutLeft]=\"currentDrawerPosition === 'left' ? animationParams : {value: 'out', params: {duration: '0ms'}}\"\r\n  (@slideInOutLeft.done)=\"currentDrawerPosition === 'left' && onAnimationDone($event)\"\r\n\r\n  [@slideInOutRight]=\"currentDrawerPosition === 'right' ? animationParams : {value: 'out', params: {duration: '0ms'}}\"\r\n  (@slideInOutRight.done)=\"currentDrawerPosition === 'right' && onAnimationDone($event)\"\r\n\r\n  [@slideInOutTop]=\"currentDrawerPosition === 'top' ? animationParams : {value: 'out', params: {duration: '0ms'}}\"\r\n  (@slideInOutTop.done)=\"currentDrawerPosition === 'top' && onAnimationDone($event)\"\r\n\r\n  [@slideInOutBottom]=\"currentDrawerPosition === 'bottom' ? animationParams : {value: 'out', params: {duration: '0ms'}}\"\r\n  (@slideInOutBottom.done)=\"currentDrawerPosition === 'bottom' && onAnimationDone($event)\">\r\n\r\n  <!-- Wrapper for the content inside the drawer, handles padding and layout. -->\r\n  <div class=\"drawer-content-wrapper\">\r\n    <!-- Optional title for the drawer. -->\r\n    @if (rucInputData.content?.drawerTitle) {\r\n      <h2 class=\"ruclib-drawer-title\">\r\n        {{ rucInputData.content?.drawerTitle }}\r\n      </h2>\r\n    }\r\n    <!--\r\n    Optional close button inside the drawer.\r\n    Toggles the drawer for the current position when clicked.\r\n    ARIA label provides accessibility.\r\n    Dimensions can be customized via rucInputData.closeButtonDimensions.\r\n    -->\r\n    @if (rucInputData.showCloseIcon) {\r\n      <button\r\n        mat-icon-button class=\"ruclib-drawer-close-button\"\r\n        (click)=\"toggleDrawer(currentDrawerPosition)\"\r\n        [attr.aria-label]=\"'Close ' + currentDrawerPosition + ' drawer'\"\r\n        [style.width]=\"rucInputData.closeButtonDimensions?.width\"\r\n        [style.height]=\"rucInputData.closeButtonDimensions?.height\">\r\n        <!-- Material icon for the close button. Size can be customized. -->\r\n        <mat-icon [style.font-size]=\"rucInputData.closeButtonDimensions?.iconSize\">close</mat-icon>\r\n      </button>\r\n    }\r\n    <!-- Main body content of the drawer. -->\r\n    <div class=\"ruclib-drawer-body\">\r\n      <!-- Host for dynamically injected component -->\r\n      <ng-template #drawerComponentHost></ng-template>\r\n      <!-- Fallback to HTML content if no component is provided -->\r\n      @if (!rucInputData.content?.drawerContentComponent) {\r\n        <div [innerHTML]=\"rucInputData.content?.drawerBody || '' | safeHtml\"></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--\r\nAngular Material Drawer Container.\r\nActs as the main container for the drawer system, especially if 'side' or 'push' modes\r\nwere to be implemented with MatDrawer's native behavior. With custom fixed-position animations,\r\nits primary role here is to host the mat-drawer-content.\r\n- Applies 'vertical-layout' class if the drawer is top/bottom.\r\n- MatDrawer's own backdrop is disabled as a custom one is used.\r\n-->\r\n<mat-drawer-container\r\n  class=\"ruclib-drawer-container\"\r\n  [class.vertical-layout]=\"isVerticalLayout\"\r\n  [hasBackdrop]=\"false\"> <!-- MatDrawer's backdrop is not used with custom animation -->\r\n  <mat-drawer-content class=\"ruclib-main-content\">\r\n    <button [disabled]=\"rucInputData.disableToggleButtonInMainContent\"\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      title=\"Toggle Drawer\"\r\n      class=\"drawer-toggle-button\"\r\n      [style.width]=\"rucInputData.toggleButtonDimensions?.width\"\r\n      [style.height]=\"rucInputData.toggleButtonDimensions?.height\"\r\n      [style.padding]=\"rucInputData.toggleButtonDimensions?.padding\"\r\n      [style.font-size]=\"rucInputData.toggleButtonDimensions?.fontSize\"\r\n      (click)=\"toggleDrawer(currentDrawerPosition)\"\r\n      [attr.aria-label]=\"getToggleButtonAriaLabel()\"\r\n      [attr.aria-expanded]=\"drawerAnimationState === 'in'\">\r\n      <!-- Optional Material icon for the toggle button. Show only if no image URL is provided. -->\r\n      @if (rucInputData.toggleButtonIcon && !rucInputData.toggleButtonImageUrl) {\r\n        <mat-icon [style.font-size]=\"rucInputData.toggleButtonDimensions?.iconSize\">{{ rucInputData.toggleButtonIcon }}</mat-icon>\r\n      }\r\n      <!-- Optional image for the toggle button. If present, it should fill the button. -->\r\n      @if (rucInputData.toggleButtonImageUrl) {\r\n        <img\r\n          [src]=\"rucInputData.toggleButtonImageUrl\"\r\n          [alt]=\"rucInputData.toggleButtonImageAlt || 'Toggle Drawer'\"\r\n          class=\"ruclib-drawer-toggle-image\"\r\n          [style.width]=\"rucInputData.toggleButtonDimensions?.width\"\r\n          [style.height]=\"rucInputData.toggleButtonDimensions?.height\"\r\n          [style.padding]=\"rucInputData.toggleButtonDimensions?.padding\">\r\n      }\r\n      <!-- Text for the toggle button. Show only if NO icon AND NO image URL is provided. -->\r\n      @if (!rucInputData.toggleButtonIcon && !rucInputData.toggleButtonImageUrl && (rucInputData.toggleButtonText?.open || rucInputData.toggleButtonText?.close)) {\r\n        <span>\r\n          {{ drawerAnimationState === 'in' ? (rucInputData.toggleButtonText?.close || 'Close') : (rucInputData.toggleButtonText?.open || 'Open') }}\r\n        </span>\r\n      }\r\n      <!-- Text for the toggle button when an icon (but NO image) IS also present. -->\r\n      @if (rucInputData.toggleButtonIcon && !rucInputData.toggleButtonImageUrl && (rucInputData.toggleButtonText?.open || rucInputData.toggleButtonText?.close)) {\r\n        <span class=\"toggle-button-text-with-icon\">\r\n          {{ drawerAnimationState === 'in' ? (rucInputData.toggleButtonText?.close || 'Close') : (rucInputData.toggleButtonText?.open || 'Open') }}\r\n        </span>\r\n      }\r\n    </button>\r\n    <!-- Main application content area, rendered from HTML string via safeHtml pipe. -->\r\n    <div [innerHTML]=\"rucInputData.content?.mainBody || '' | safeHtml\"></div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n", styles: [":host{display:block;position:relative;overflow:hidden}.custom-backdrop{position:absolute;inset:0;background-color:#000;z-index:999;visibility:hidden}.ruclib-drawer-container{width:100%;height:400px;border:1px solid #ccc;position:relative;overflow:hidden}.drawer-content-wrapper{padding:16px;position:relative;box-sizing:border-box;height:100%;display:flex;flex-direction:column}.ruclib-drawer-title{margin-top:0;margin-bottom:16px;font-size:1.5em;flex-shrink:0}.ruclib-drawer-close-button{position:absolute;top:8px;right:8px;padding:5px 0 0!important;flex-shrink:0}.ruclib-drawer-body{flex-grow:1;overflow-y:auto;word-break:break-word}.dynamic-drawer{background-color:var(--mat-sidenav-content-background-color, white);position:absolute;box-sizing:border-box;box-shadow:0 2px 10px #0003;z-index:1000;overflow:hidden}.dynamic-drawer.drawer-left{top:0;bottom:0;left:0}.dynamic-drawer.drawer-right{top:0;bottom:0;right:0}.dynamic-drawer.drawer-top{top:0;left:0;right:0}.dynamic-drawer.drawer-bottom{bottom:0;left:0;right:0}.dynamic-drawer.light-theme{background-color:#fff;color:#000000de}.dynamic-drawer.light-theme .ruclib-drawer-title{color:#000000de}.dynamic-drawer.light-theme .ruclib-drawer-close-button .mat-icon{color:#0000008a}.dynamic-drawer.dark-theme{background-color:#424242;color:#fff}.dynamic-drawer.dark-theme .ruclib-drawer-title,.dynamic-drawer.dark-theme .ruclib-drawer-close-button .mat-icon{color:#fff}.dynamic-drawer.custom-theme-one{background-color:#fff;color:#000000de}.dynamic-drawer.custom-theme-one .ruclib-drawer-title{color:#000000de}.dynamic-drawer.custom-theme-one .ruclib-drawer-close-button .mat-icon{color:#0000008a}.dynamic-drawer.custom-theme-two{background-color:#424242;color:#fff}.dynamic-drawer.custom-theme-two .ruclib-drawer-title,.dynamic-drawer.custom-theme-two .ruclib-drawer-close-button .mat-icon{color:#fff}.ruclib-drawer-toggle-image{object-fit:contain;display:block}.drawer-toggle-button{margin-bottom:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ruclib-main-content{padding:16px;display:flex;flex-direction:column;align-items:flex-start}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { rucInputData: [{
+                type: Input
+            }], customTheme: [{
+                type: Input
+            }], rucEvent: [{
+                type: Output
+            }], drawerComponentHost: [{
+                type: ViewChild,
+                args: ['drawerComponentHost', { read: ViewContainerRef, static: true }]
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibDrawerComponent };
+//# sourceMappingURL=ruc-lib-drawer.mjs.map