angular-material-wrap 0.1.0-beta.8 → 0.1.0-beta.9

package/fesm2022/angular-material-wrap.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, model, output, ViewEncapsulation, Component, computed, signal, effect, ContentChild, viewChild, Directive, forwardRef, ViewChild, contentChildren, Injectable, contentChild, Injector, Optional, Inject, Pipe, inject, InjectionToken } from '@angular/core';
+import { input, model, output, ViewEncapsulation, Component, computed, signal, effect, ContentChild, viewChild, Directive, Injectable, inject, ElementRef, Renderer2, HostListener, forwardRef, ViewChild, contentChildren, contentChild, Injector, Optional, Inject, Pipe, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/material/button';
@@ -42,7 +42,7 @@ import * as i1$9 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i7 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import { Subject, debounceTime, distinctUntilChanged, takeUntil, Subscription, fromEvent, BehaviorSubject, defer, from, of } from 'rxjs';
+import { Subject, debounceTime, distinctUntilChanged, takeUntil, Subscription, fromEvent, Observable, BehaviorSubject, defer, from, of } from 'rxjs';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1$a from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -3476,6 +3476,610 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { amwBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "amwBadge", required: true }] }], amwBadgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "amwBadgeColor", required: false }] }], amwBadgePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "amwBadgePosition", required: false }] }], amwBadgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "amwBadgeSize", required: false }] }], amwBadgeHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "amwBadgeHidden", required: false }] }], amwBadgeOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "amwBadgeOverlap", required: false }] }], amwBadgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "amwBadgeClass", required: false }] }] } });
 
+const DEFAULT_CONFIG$1 = {
+    autoReevaluate: true,
+    debounceTime: 300,
+    disableOnErrors: true,
+    disableOnWarnings: false
+};
+/**
+ * AMW Validation Service
+ *
+ * Provides centralized validation management for components.
+ * Components can create validation contexts, add/remove violations,
+ * and automatically reevaluate when associated controls change.
+ *
+ * @example
+ * ```typescript
+ * // In your component
+ * export class MyFormComponent implements OnInit {
+ *   private validationContext!: ValidationContext;
+ *
+ *   constructor(private validationService: AmwValidationService) {}
+ *
+ *   ngOnInit() {
+ *     this.validationContext = this.validationService.createContext({
+ *       disableOnErrors: true
+ *     });
+ *
+ *     // Add a violation
+ *     this.validationService.addViolation(this.validationContext.id, {
+ *       id: 'name-required',
+ *       message: 'Name is required',
+ *       severity: 'error',
+ *       field: 'name',
+ *       control: this.form.get('name'),
+ *       validator: () => !!this.form.get('name')?.value
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class AmwValidationService {
+    /** Map of all validation contexts by ID */
+    contexts = new Map();
+    /** Counter for generating unique IDs */
+    idCounter = 0;
+    /** Map of control subscriptions for cleanup */
+    controlSubscriptions = new Map();
+    constructor() { }
+    /**
+     * Create a new validation context for a component
+     * @param config Optional configuration
+     * @returns The created validation context
+     */
+    createContext(config) {
+        const id = this.generateId();
+        const violations = signal([], ...(ngDevMode ? [{ debugName: "violations" }] : []));
+        const mergedConfig = { ...DEFAULT_CONFIG$1, ...config };
+        const hasErrors = computed(() => violations().some(v => v.severity === 'error'), ...(ngDevMode ? [{ debugName: "hasErrors" }] : []));
+        const hasWarnings = computed(() => violations().some(v => v.severity === 'warning'), ...(ngDevMode ? [{ debugName: "hasWarnings" }] : []));
+        const isSubmitDisabled = computed(() => {
+            if (mergedConfig.disableOnErrors && hasErrors())
+                return true;
+            if (mergedConfig.disableOnWarnings && hasWarnings())
+                return true;
+            return false;
+        }, ...(ngDevMode ? [{ debugName: "isSubmitDisabled" }] : []));
+        const context = {
+            id,
+            violations,
+            hasErrors,
+            hasWarnings,
+            isSubmitDisabled,
+            config: mergedConfig
+        };
+        this.contexts.set(id, context);
+        return context;
+    }
+    /**
+     * Destroy a validation context and clean up subscriptions
+     * @param contextId The context ID to destroy
+     */
+    destroyContext(contextId) {
+        // Clean up control subscriptions
+        const subscriptions = this.controlSubscriptions.get(contextId);
+        if (subscriptions) {
+            subscriptions.forEach(unsub => unsub());
+            this.controlSubscriptions.delete(contextId);
+        }
+        this.contexts.delete(contextId);
+    }
+    /**
+     * Add a violation to a context
+     * @param contextId The context ID
+     * @param violation The violation to add (without ID, one will be generated)
+     * @returns The violation ID
+     */
+    addViolation(contextId, violation) {
+        const context = this.contexts.get(contextId);
+        if (!context) {
+            throw new Error(`Validation context ${contextId} not found`);
+        }
+        const violationId = violation.id || this.generateViolationId();
+        const fullViolation = {
+            ...violation,
+            id: violationId
+        };
+        // Check if violation with same ID already exists
+        const existing = context.violations().find(v => v.id === violationId);
+        if (existing) {
+            // Update existing violation
+            context.violations.update(violations => violations.map(v => v.id === violationId ? fullViolation : v));
+        }
+        else {
+            // Add new violation
+            context.violations.update(violations => [...violations, fullViolation]);
+        }
+        // Set up control subscription for auto-reevaluation
+        if (context.config.autoReevaluate && fullViolation.control) {
+            this.setupControlSubscription(contextId, fullViolation);
+        }
+        return violationId;
+    }
+    /**
+     * Remove a violation from a context
+     * @param contextId The context ID
+     * @param violationId The violation ID to remove
+     */
+    removeViolation(contextId, violationId) {
+        const context = this.contexts.get(contextId);
+        if (!context)
+            return;
+        context.violations.update(violations => violations.filter(v => v.id !== violationId));
+    }
+    /**
+     * Clear all violations from a context
+     * @param contextId The context ID
+     */
+    clearViolations(contextId) {
+        const context = this.contexts.get(contextId);
+        if (!context)
+            return;
+        context.violations.set([]);
+    }
+    /**
+     * Get all violations for a context
+     * @param contextId The context ID
+     * @returns Array of violations
+     */
+    getViolations(contextId) {
+        const context = this.contexts.get(contextId);
+        return context?.violations() || [];
+    }
+    /**
+     * Get violations for a specific field
+     * @param contextId The context ID
+     * @param field The field name
+     * @returns Array of violations for the field
+     */
+    getFieldViolations(contextId, field) {
+        return this.getViolations(contextId).filter(v => v.field === field);
+    }
+    /**
+     * Check if a context has any violations
+     * @param contextId The context ID
+     * @returns True if violations exist
+     */
+    hasViolations(contextId) {
+        return this.getViolations(contextId).length > 0;
+    }
+    /**
+     * Reevaluate all violations in a context
+     * @param contextId The context ID
+     */
+    reevaluate(contextId) {
+        const context = this.contexts.get(contextId);
+        if (!context)
+            return;
+        context.violations.update(violations => violations.filter(v => {
+            if (v.validator) {
+                return !v.validator(); // Keep violation if validator returns false
+            }
+            if (v.control) {
+                return v.control.invalid; // Keep violation if control is invalid
+            }
+            return true; // Keep violations without validator or control
+        }));
+    }
+    /**
+     * Get a context by ID
+     * @param contextId The context ID
+     * @returns The validation context or undefined
+     */
+    getContext(contextId) {
+        return this.contexts.get(contextId);
+    }
+    /**
+     * Set up a subscription to a control for auto-reevaluation
+     */
+    setupControlSubscription(contextId, violation) {
+        if (!violation.control)
+            return;
+        let debounceTimer = null;
+        const context = this.contexts.get(contextId);
+        if (!context)
+            return;
+        const subscription = violation.control.valueChanges.subscribe(() => {
+            if (debounceTimer) {
+                clearTimeout(debounceTimer);
+            }
+            debounceTimer = setTimeout(() => {
+                // Reevaluate this specific violation
+                const shouldKeep = violation.validator
+                    ? !violation.validator()
+                    : violation.control?.invalid;
+                if (!shouldKeep) {
+                    this.removeViolation(contextId, violation.id);
+                }
+            }, context.config.debounceTime);
+        });
+        // Store unsubscribe function
+        const subscriptions = this.controlSubscriptions.get(contextId) || [];
+        subscriptions.push(() => subscription.unsubscribe());
+        this.controlSubscriptions.set(contextId, subscriptions);
+    }
+    generateId() {
+        return `vc_${Date.now()}_${++this.idCounter}`;
+    }
+    generateViolationId() {
+        return `vv_${Date.now()}_${++this.idCounter}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwValidationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwValidationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Mixin/base class functionality for components that need validation
+ * This can be used via composition or inheritance
+ */
+class ValidationMixin {
+    validationService;
+    validationContext;
+    /**
+     * Initialize validation for this component
+     * Call this in ngOnInit
+     */
+    initializeValidation(service, config) {
+        this.validationService = service;
+        this.validationContext = service.createContext(config);
+    }
+    /**
+     * Clean up validation context
+     * Call this in ngOnDestroy
+     */
+    destroyValidation() {
+        if (this.validationContext) {
+            this.validationService.destroyContext(this.validationContext.id);
+        }
+    }
+    /**
+     * Add a validation violation
+     */
+    addViolation(violation) {
+        return this.validationService.addViolation(this.validationContext.id, violation);
+    }
+    /**
+     * Remove a validation violation
+     */
+    removeViolation(violationId) {
+        this.validationService.removeViolation(this.validationContext.id, violationId);
+    }
+    /**
+     * Clear all violations
+     */
+    clearViolations() {
+        this.validationService.clearViolations(this.validationContext.id);
+    }
+    /**
+     * Get all violations
+     */
+    get violations() {
+        return this.validationContext?.violations() || [];
+    }
+    /**
+     * Check if submit should be disabled
+     */
+    get isSubmitDisabled() {
+        return this.validationContext?.isSubmitDisabled() || false;
+    }
+    /**
+     * Check if there are any errors
+     */
+    get hasErrors() {
+        return this.validationContext?.hasErrors() || false;
+    }
+    /**
+     * Check if there are any warnings
+     */
+    get hasWarnings() {
+        return this.validationContext?.hasWarnings() || false;
+    }
+}
+
+/**
+ * AMW Validation Tooltip Directive
+ *
+ * Displays validation violations in a tooltip when hovering over a submit button.
+ * Works with the AmwValidationService to show relevant validation messages.
+ *
+ * When violations exist and the user hovers over the button, a tooltip appears
+ * showing all current validation messages. The button is also automatically
+ * disabled based on the validation context configuration.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with validation context ID -->
+ * <button [amwValidationTooltip]="validationContext.id">
+ *   Submit
+ * </button>
+ *
+ * <!-- With validation context object -->
+ * <button [amwValidationTooltip]="validationContext">
+ *   Submit
+ * </button>
+ *
+ * <!-- Auto-disable based on validation state -->
+ * <amw-button
+ *   [amwValidationTooltip]="validationContext"
+ *   [disabled]="validationContext.isSubmitDisabled()">
+ *   Submit
+ * </amw-button>
+ * ```
+ */
+class AmwValidationTooltipDirective {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    validationService = inject(AmwValidationService);
+    /**
+     * The validation context (ID string or context object)
+     */
+    amwValidationTooltip = input.required(...(ngDevMode ? [{ debugName: "amwValidationTooltip" }] : []));
+    /**
+     * Position of the tooltip
+     */
+    tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
+    /**
+     * Whether to auto-disable the element when validation fails
+     */
+    autoDisable = input(true, ...(ngDevMode ? [{ debugName: "autoDisable" }] : []));
+    /** The tooltip element */
+    tooltipElement = null;
+    /** Whether tooltip is currently visible */
+    isTooltipVisible = false;
+    /** Timeout for delayed show */
+    showTimeout = null;
+    /** Timeout for delayed hide */
+    hideTimeout = null;
+    constructor() {
+        // Set up effect to auto-disable based on validation state
+        effect(() => {
+            if (this.autoDisable()) {
+                const context = this.getContext();
+                if (context && context.isSubmitDisabled()) {
+                    this.renderer.setAttribute(this.elementRef.nativeElement, 'disabled', 'true');
+                }
+                else {
+                    this.renderer.removeAttribute(this.elementRef.nativeElement, 'disabled');
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.createTooltipElement();
+    }
+    ngOnDestroy() {
+        this.removeTooltip();
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        if (this.hideTimeout)
+            clearTimeout(this.hideTimeout);
+    }
+    onMouseEnter() {
+        const violations = this.getViolations();
+        if (violations.length > 0) {
+            if (this.hideTimeout) {
+                clearTimeout(this.hideTimeout);
+                this.hideTimeout = null;
+            }
+            this.showTimeout = setTimeout(() => this.showTooltip(), 200);
+        }
+    }
+    onMouseLeave() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+        this.hideTimeout = setTimeout(() => this.hideTooltip(), 100);
+    }
+    onFocus() {
+        const violations = this.getViolations();
+        if (violations.length > 0) {
+            this.showTooltip();
+        }
+    }
+    onBlur() {
+        this.hideTooltip();
+    }
+    /**
+     * Get the validation context
+     */
+    getContext() {
+        const input = this.amwValidationTooltip();
+        if (typeof input === 'string') {
+            return this.validationService.getContext(input);
+        }
+        return input;
+    }
+    /**
+     * Get current violations
+     */
+    getViolations() {
+        const context = this.getContext();
+        return context?.violations() || [];
+    }
+    /**
+     * Create the tooltip element
+     */
+    createTooltipElement() {
+        this.tooltipElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.tooltipElement, 'amw-validation-tooltip');
+        this.renderer.setStyle(this.tooltipElement, 'position', 'fixed');
+        this.renderer.setStyle(this.tooltipElement, 'z-index', '10000');
+        this.renderer.setStyle(this.tooltipElement, 'pointer-events', 'none');
+        this.renderer.setStyle(this.tooltipElement, 'opacity', '0');
+        this.renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
+        this.renderer.setStyle(this.tooltipElement, 'transition', 'opacity 200ms, visibility 200ms');
+        // Use softer info-style colors for less jarring appearance
+        this.renderer.setStyle(this.tooltipElement, 'background-color', '#e3f2fd');
+        this.renderer.setStyle(this.tooltipElement, 'color', '#002171');
+        this.renderer.setStyle(this.tooltipElement, 'padding', '8px 12px');
+        this.renderer.setStyle(this.tooltipElement, 'border-radius', '4px');
+        this.renderer.setStyle(this.tooltipElement, 'font-size', '12px');
+        this.renderer.setStyle(this.tooltipElement, 'max-width', '300px');
+        this.renderer.setStyle(this.tooltipElement, 'box-shadow', '0 2px 8px rgba(0,0,0,0.15)');
+        if (this.tooltipElement) {
+            document.body.appendChild(this.tooltipElement);
+        }
+    }
+    /**
+     * Show the tooltip
+     */
+    showTooltip() {
+        if (!this.tooltipElement)
+            return;
+        const violations = this.getViolations();
+        if (violations.length === 0)
+            return;
+        // Build tooltip content
+        const content = this.buildTooltipContent(violations);
+        this.tooltipElement.innerHTML = content;
+        // Position the tooltip
+        this.positionTooltip();
+        // Show with animation
+        this.renderer.setStyle(this.tooltipElement, 'opacity', '1');
+        this.renderer.setStyle(this.tooltipElement, 'visibility', 'visible');
+        this.isTooltipVisible = true;
+    }
+    /**
+     * Hide the tooltip
+     */
+    hideTooltip() {
+        if (!this.tooltipElement)
+            return;
+        this.renderer.setStyle(this.tooltipElement, 'opacity', '0');
+        this.renderer.setStyle(this.tooltipElement, 'visibility', 'hidden');
+        this.isTooltipVisible = false;
+    }
+    /**
+     * Build tooltip HTML content
+     */
+    buildTooltipContent(violations) {
+        const errors = violations.filter(v => v.severity === 'error');
+        const warnings = violations.filter(v => v.severity === 'warning');
+        const infos = violations.filter(v => v.severity === 'info');
+        let html = '<div class="amw-validation-tooltip__content">';
+        if (errors.length > 0) {
+            html += '<div class="amw-validation-tooltip__section amw-validation-tooltip__section--error">';
+            html += '<strong>Errors:</strong>';
+            html += '<ul style="margin: 4px 0 0 0; padding-left: 16px;">';
+            errors.forEach(e => {
+                html += `<li>${this.escapeHtml(e.message)}</li>`;
+            });
+            html += '</ul></div>';
+        }
+        if (warnings.length > 0) {
+            html += '<div class="amw-validation-tooltip__section amw-validation-tooltip__section--warning" style="margin-top: 8px;">';
+            html += '<strong>Warnings:</strong>';
+            html += '<ul style="margin: 4px 0 0 0; padding-left: 16px;">';
+            warnings.forEach(w => {
+                html += `<li>${this.escapeHtml(w.message)}</li>`;
+            });
+            html += '</ul></div>';
+        }
+        if (infos.length > 0) {
+            html += '<div class="amw-validation-tooltip__section amw-validation-tooltip__section--info" style="margin-top: 8px;">';
+            html += '<strong>Info:</strong>';
+            html += '<ul style="margin: 4px 0 0 0; padding-left: 16px;">';
+            infos.forEach(i => {
+                html += `<li>${this.escapeHtml(i.message)}</li>`;
+            });
+            html += '</ul></div>';
+        }
+        html += '</div>';
+        return html;
+    }
+    /**
+     * Position the tooltip relative to the host element
+     */
+    positionTooltip() {
+        if (!this.tooltipElement)
+            return;
+        const hostRect = this.elementRef.nativeElement.getBoundingClientRect();
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        const position = this.tooltipPosition();
+        const offset = 8;
+        let top;
+        let left;
+        switch (position) {
+            case 'top':
+                top = hostRect.top - tooltipRect.height - offset;
+                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = hostRect.bottom + offset;
+                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.left - tooltipRect.width - offset;
+                break;
+            case 'right':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.right + offset;
+                break;
+        }
+        // Keep tooltip within viewport
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        if (left < 8)
+            left = 8;
+        if (left + tooltipRect.width > viewportWidth - 8) {
+            left = viewportWidth - tooltipRect.width - 8;
+        }
+        if (top < 8)
+            top = 8;
+        if (top + tooltipRect.height > viewportHeight - 8) {
+            top = viewportHeight - tooltipRect.height - 8;
+        }
+        this.renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
+        this.renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
+    }
+    /**
+     * Remove tooltip element from DOM
+     */
+    removeTooltip() {
+        if (this.tooltipElement && this.tooltipElement.parentNode) {
+            this.tooltipElement.parentNode.removeChild(this.tooltipElement);
+            this.tooltipElement = null;
+        }
+    }
+    /**
+     * Escape HTML to prevent XSS
+     */
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwValidationTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: AmwValidationTooltipDirective, isStandalone: true, selector: "[amwValidationTooltip]", inputs: { amwValidationTooltip: { classPropertyName: "amwValidationTooltip", publicName: "amwValidationTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, autoDisable: { classPropertyName: "autoDisable", publicName: "autoDisable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwValidationTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[amwValidationTooltip]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { amwValidationTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "amwValidationTooltip", required: true }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], autoDisable: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoDisable", required: false }] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
 /**
  * Angular Material Wrap Divider Component
  *
@@ -12177,6 +12781,891 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], encapsulation: ViewEncapsulation.None, template: "<mat-paginator\n    [class]=\"paginatorClasses()\"\n    [length]=\"length()\"\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [pageIndex]=\"pageIndex()\"\n    [showFirstLastButtons]=\"showFirstLastButtons()\"\n    [hidePageSize]=\"hidePageSize()\"\n    [disabled]=\"disabled()\"\n    (page)=\"onPageChange($event)\"\n    aria-label=\"Select page\">\n</mat-paginator>\n", styles: [".amw-paginator{display:flex;align-items:center}.amw-paginator--disabled{opacity:.5;pointer-events:none}.amw-paginator--hide-page-size .mat-mdc-paginator-page-size{display:none}.amw-paginator .mat-mdc-paginator-container{padding:0 8px;min-height:56px}.amw-paginator .mat-mdc-paginator-page-size-label{margin:0 4px}.amw-paginator .mat-mdc-paginator-range-label{margin:0 16px}.amw-paginator .mat-mdc-paginator-navigation-first:disabled,.amw-paginator .mat-mdc-paginator-navigation-previous:disabled,.amw-paginator .mat-mdc-paginator-navigation-next:disabled,.amw-paginator .mat-mdc-paginator-navigation-last:disabled{opacity:.38}\n"] }]
         }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], paginatorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorClass", required: false }] }], page: [{ type: i0.Output, args: ["page"] }] } });
 
+/**
+ * Full Screen Loading Service
+ *
+ * Manages a queue of loading messages that can be driven by observables.
+ * Each observable can add its own message, and when the observable completes
+ * or emits a value, the message is dismissed with animation.
+ *
+ * @example
+ * ```typescript
+ * // Using the loading() operator
+ * this.userService.getUser(id)
+ *   .pipe(loading('Loading user...'))
+ *   .subscribe(user => this.user = user);
+ *
+ * // Multiple simultaneous operations
+ * forkJoin([
+ *   this.service1.getData().pipe(loading('Loading data 1...')),
+ *   this.service2.getData().pipe(loading('Loading data 2...'))
+ * ]).subscribe(results => this.results = results);
+ * ```
+ */
+class AmwFullScreenLoadingService {
+    /** Internal signal holding all loading items */
+    loadingItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "loadingItemsSignal" }] : []));
+    /** Signal indicating whether the overlay is visible */
+    overlayVisibleSignal = signal(false, ...(ngDevMode ? [{ debugName: "overlayVisibleSignal" }] : []));
+    /** Timeout for overlay dismiss animation */
+    overlayDismissTimeout = null;
+    /** Animation duration for items dismissing (ms) */
+    itemDismissAnimationDuration = 300;
+    /** Animation duration for overlay appearing/disappearing (ms) */
+    overlayAnimationDuration = 300;
+    /** Read-only computed signal of loading items */
+    loadingItems = computed(() => this.loadingItemsSignal(), ...(ngDevMode ? [{ debugName: "loadingItems" }] : []));
+    /** Read-only computed signal of whether any loading is active */
+    isLoading = computed(() => this.loadingItemsSignal().length > 0, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** Read-only signal of whether overlay is visible (for animation timing) */
+    overlayVisible = computed(() => this.overlayVisibleSignal(), ...(ngDevMode ? [{ debugName: "overlayVisible" }] : []));
+    /** Counter for generating unique IDs */
+    idCounter = 0;
+    constructor() { }
+    /**
+     * Add a loading item to the queue
+     * @param message The message to display
+     * @returns The unique ID of the loading item
+     */
+    add(message) {
+        const id = this.generateId();
+        const item = {
+            id,
+            message,
+            dismissing: false,
+            timestamp: Date.now()
+        };
+        // Clear any pending overlay dismiss
+        if (this.overlayDismissTimeout) {
+            clearTimeout(this.overlayDismissTimeout);
+            this.overlayDismissTimeout = null;
+        }
+        // Show overlay if this is the first item
+        if (this.loadingItemsSignal().length === 0) {
+            this.overlayVisibleSignal.set(true);
+        }
+        this.loadingItemsSignal.update(items => [...items, item]);
+        return id;
+    }
+    /**
+     * Dismiss a loading item from the queue with animation
+     * @param id The ID of the loading item to dismiss
+     */
+    dismiss(id) {
+        // First, mark the item as dismissing to trigger animation
+        this.loadingItemsSignal.update(items => items.map(item => item.id === id ? { ...item, dismissing: true } : item));
+        // After animation completes, remove the item
+        setTimeout(() => {
+            this.loadingItemsSignal.update(items => items.filter(item => item.id !== id));
+            // If no more items, start overlay dismiss
+            if (this.loadingItemsSignal().length === 0) {
+                this.overlayDismissTimeout = setTimeout(() => {
+                    this.overlayVisibleSignal.set(false);
+                }, this.overlayAnimationDuration);
+            }
+        }, this.itemDismissAnimationDuration);
+    }
+    /**
+     * Clear all loading items immediately
+     */
+    clear() {
+        this.loadingItemsSignal.set([]);
+        if (this.overlayDismissTimeout) {
+            clearTimeout(this.overlayDismissTimeout);
+        }
+        this.overlayDismissTimeout = setTimeout(() => {
+            this.overlayVisibleSignal.set(false);
+        }, this.overlayAnimationDuration);
+    }
+    /**
+     * Update the message for an existing loading item
+     * @param id The ID of the loading item
+     * @param message The new message
+     */
+    updateMessage(id, message) {
+        this.loadingItemsSignal.update(items => items.map(item => item.id === id ? { ...item, message } : item));
+    }
+    /**
+     * Generate a unique ID for a loading item
+     */
+    generateId() {
+        return `fsl_${Date.now()}_${++this.idCounter}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwFullScreenLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwFullScreenLoadingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwFullScreenLoadingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * RxJS operator that adds a loading message while the observable is active.
+ * The message is dismissed when the observable emits its first value (for single-emission observables)
+ * or when it completes/errors.
+ *
+ * @param message The loading message to display
+ * @param options Configuration options
+ * @returns A MonoTypeOperatorFunction that can be used with .pipe()
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * this.http.get('/api/data')
+ *   .pipe(loading('Loading data...'))
+ *   .subscribe(data => this.data = data);
+ *
+ * // With multiple operations
+ * this.service.doAThing()
+ *   .pipe(loading('Processing...'))
+ *   .subscribe(result => console.log(result));
+ * ```
+ */
+function loading(message, options) {
+    const dismissOnComplete = options?.dismissOnComplete ?? false;
+    return (source) => {
+        let loadingId = null;
+        let dismissed = false;
+        let service = options?.service ?? null;
+        // Lazy inject the service if not provided
+        const getService = () => {
+            if (!service) {
+                // Dynamic import to get the injector
+                const injector = globalThis.__amwFullScreenLoadingInjector;
+                if (injector) {
+                    service = injector.get(AmwFullScreenLoadingService);
+                }
+                else {
+                    throw new Error('AmwFullScreenLoadingService not available. ' +
+                        'Make sure AmwFullScreenLoadingComponent is included in your app.');
+                }
+            }
+            return service;
+        };
+        return new Observable(subscriber => {
+            // Add loading item when subscription starts
+            try {
+                loadingId = getService().add(message);
+            }
+            catch (e) {
+                console.warn('Full screen loading service not available:', e);
+            }
+            const dismissLoading = () => {
+                if (!dismissed && loadingId) {
+                    dismissed = true;
+                    try {
+                        getService().dismiss(loadingId);
+                    }
+                    catch (e) {
+                        // Service may not be available
+                    }
+                }
+            };
+            const subscription = source.subscribe({
+                next: (value) => {
+                    if (!dismissOnComplete) {
+                        dismissLoading();
+                    }
+                    subscriber.next(value);
+                },
+                error: (err) => {
+                    dismissLoading();
+                    subscriber.error(err);
+                },
+                complete: () => {
+                    dismissLoading();
+                    subscriber.complete();
+                }
+            });
+            // Cleanup on unsubscribe
+            return () => {
+                dismissLoading();
+                subscription.unsubscribe();
+            };
+        });
+    };
+}
+
+/**
+ * AMW Full Screen Loading Component
+ *
+ * Displays a full-screen loading overlay with multiple animated messages.
+ * Each message is keyed to an observable and dismisses with a smooth animation
+ * when the observable completes.
+ *
+ * Add this component once at the root of your application (e.g., in app.component.html):
+ *
+ * @example
+ * ```html
+ * <!-- In app.component.html -->
+ * <router-outlet></router-outlet>
+ * <amw-full-screen-loading></amw-full-screen-loading>
+ * ```
+ *
+ * Then use the loading() operator in your services:
+ *
+ * @example
+ * ```typescript
+ * // In your component/service
+ * import { loading } from '@angular-material-wrap';
+ *
+ * this.userService.getUser(id)
+ *   .pipe(loading('Loading user profile...'))
+ *   .subscribe(user => this.user = user);
+ *
+ * // Multiple simultaneous operations
+ * this.dataService.fetchData()
+ *   .pipe(loading('Fetching data...'))
+ *   .subscribe();
+ *
+ * this.otherService.process()
+ *   .pipe(loading('Processing...'))
+ *   .subscribe();
+ * ```
+ *
+ * Features:
+ * - Smooth 300ms transitions for overlay appearance/disappearance
+ * - Multiple messages can display simultaneously
+ * - Messages dismiss with a slide-right + fade animation
+ * - Centered spinner and message display
+ * - Subtle pulse animation on the spinner
+ */
+class AmwFullScreenLoadingComponent {
+    injector = inject(Injector);
+    loadingService = inject(AmwFullScreenLoadingService);
+    /** Computed signal for loading items */
+    items = computed(() => this.loadingService.loadingItems(), ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Computed signal for overlay visibility */
+    isVisible = computed(() => this.loadingService.overlayVisible(), ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    /** Computed signal for whether loading is active (items exist) */
+    isLoading = computed(() => this.loadingService.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    ngOnInit() {
+        // Register the injector globally for the loading() operator to use
+        globalThis.__amwFullScreenLoadingInjector = this.injector;
+    }
+    ngOnDestroy() {
+        // Clean up global injector reference
+        if (globalThis.__amwFullScreenLoadingInjector === this.injector) {
+            delete globalThis.__amwFullScreenLoadingInjector;
+        }
+    }
+    /**
+     * Track by function for ngFor
+     */
+    trackByItem(index, item) {
+        return item.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwFullScreenLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AmwFullScreenLoadingComponent, isStandalone: true, selector: "amw-full-screen-loading", ngImport: i0, template: "@if (isVisible()) {\n<div class=\"amw-full-screen-loading\" [class.amw-full-screen-loading--visible]=\"isLoading()\"\n  [class.amw-full-screen-loading--hiding]=\"!isLoading()\">\n  <!-- Overlay backdrop -->\n  <div class=\"amw-full-screen-loading__backdrop\"></div>\n\n  <!-- Spinner container (fixed position) -->\n  <div class=\"amw-full-screen-loading__content\">\n    <div class=\"amw-fsl-spinner\">\n      <div class=\"amw-fsl-spinner__ring amw-fsl-spinner__ring--1\"></div>\n      <div class=\"amw-fsl-spinner__ring amw-fsl-spinner__ring--2\"></div>\n    </div>\n  </div>\n\n  <!-- Messages container (fixed position below spinner) -->\n  <div class=\"amw-full-screen-loading__messages\">\n    @for (item of items(); track trackByItem($index, item)) {\n    <div class=\"amw-full-screen-loading__message\"\n      [class.amw-full-screen-loading__message--dismissing]=\"item.dismissing\">\n      <span class=\"amw-full-screen-loading__message-text\">{{ item.message }}</span>\n    </div>\n    }\n  </div>\n</div>\n}", styles: [".amw-full-screen-loading{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:all;opacity:0}.amw-full-screen-loading--visible{animation:amw-fsl-fade-in .6s cubic-bezier(0,0,.2,1) forwards}.amw-full-screen-loading--hiding{animation:amw-fsl-fade-out .5s cubic-bezier(.4,0,1,1) forwards}.amw-full-screen-loading__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:backdrop-filter .6s ease-out}.amw-full-screen-loading__content{position:absolute;top:30%;left:50%;transform:translate(-50%);z-index:1;display:flex;flex-direction:column;align-items:center}.amw-full-screen-loading__messages{position:absolute;top:calc(30% + 375px);left:50%;transform:translate(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:200px}.amw-full-screen-loading__message{display:flex;align-items:center;justify-content:center;padding:12px 24px;background-color:#fffffff2;border-radius:24px;opacity:1;transform:translate(0);box-shadow:0 4px 20px #00000026;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);animation:amw-fsl-message-enter .45s cubic-bezier(0,0,.2,1)}.amw-full-screen-loading__message--dismissing{opacity:0;transform:translate(40px);transition:opacity .5s cubic-bezier(.4,0,1,1),transform .5s cubic-bezier(.4,0,1,1)}.amw-full-screen-loading__message-text{font-size:14px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}.amw-fsl-spinner{position:relative;width:350px;height:350px}.amw-fsl-spinner__ring{position:absolute;top:50%;left:50%;border-radius:50%;box-sizing:border-box}.amw-fsl-spinner__ring--1{width:360px;height:360px;margin-left:-180px;margin-top:-180px;background:conic-gradient(var(--mdc-theme-primary, #6200ee) 0deg 100deg,transparent 100deg 120deg,var(--mdc-theme-primary, #6200ee) 120deg 220deg,transparent 220deg 240deg,var(--mdc-theme-primary, #6200ee) 240deg 340deg,transparent 340deg 360deg);mask:radial-gradient(circle,transparent 50%,black 50%);-webkit-mask:radial-gradient(circle,transparent 50%,black 50%);animation:amw-fsl-rotate-cw-1 25s cubic-bezier(.4,0,.2,1) infinite}.amw-fsl-spinner__ring--2{width:250px;height:250px;margin-left:-125px;margin-top:-125px;background:conic-gradient(var(--mdc-theme-secondary, #03dac6) 0deg 92deg,transparent 92deg 120deg,var(--mdc-theme-secondary, #03dac6) 120deg 212deg,transparent 212deg 240deg,var(--mdc-theme-secondary, #03dac6) 240deg 332deg,transparent 332deg 360deg);mask:radial-gradient(circle,transparent 40%,black 40%);-webkit-mask:radial-gradient(circle,transparent 40%,black 40%);animation:amw-fsl-rotate-ccw-1 22s cubic-bezier(.25,.1,.25,1) infinite}@keyframes amw-fsl-rotate-cw-1{0%{transform:rotate(0)}25%{transform:rotate(120deg)}50%{transform:rotate(180deg)}75%{transform:rotate(300deg)}to{transform:rotate(360deg)}}@keyframes amw-fsl-rotate-ccw-1{0%{transform:rotate(0)}20%{transform:rotate(-90deg)}40%{transform:rotate(-120deg)}60%{transform:rotate(-240deg)}80%{transform:rotate(-300deg)}to{transform:rotate(-360deg)}}@keyframes amw-fsl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes amw-fsl-fade-out{0%{opacity:1}to{opacity:0}}@keyframes amw-fsl-message-enter{0%{opacity:0;transform:translateY(15px) scale(.98)}60%{opacity:.8;transform:translateY(-2px) scale(1)}to{opacity:1;transform:translateY(0) scale(1)}}.dark-theme .amw-full-screen-loading__backdrop{background-color:#000000bf}.dark-theme .amw-full-screen-loading__message{background-color:#1e1e1ef2;box-shadow:0 4px 20px #0006}.dark-theme .amw-full-screen-loading__message-text{color:#fff}.dark-theme .amw-fsl-spinner__ring--1{background:conic-gradient(var(--mdc-theme-primary, #bb86fc) 0deg 100deg,transparent 100deg 120deg,var(--mdc-theme-primary, #bb86fc) 120deg 220deg,transparent 220deg 240deg,var(--mdc-theme-primary, #bb86fc) 240deg 340deg,transparent 340deg 360deg)}.dark-theme .amw-fsl-spinner__ring--2{background:conic-gradient(var(--mdc-theme-secondary, #03dac6) 0deg 92deg,transparent 92deg 120deg,var(--mdc-theme-secondary, #03dac6) 120deg 212deg,transparent 212deg 240deg,var(--mdc-theme-secondary, #03dac6) 240deg 332deg,transparent 332deg 360deg)}@media(prefers-reduced-motion:reduce){.amw-full-screen-loading--visible{animation:amw-fsl-fade-in .4s linear forwards}.amw-full-screen-loading--hiding{animation:amw-fsl-fade-out .4s linear forwards}.amw-full-screen-loading__message{transition:opacity .2s linear;animation:none}.amw-full-screen-loading__message--dismissing{transform:none;transition:opacity .3s linear}.amw-fsl-spinner__ring{animation-duration:20s!important;animation-timing-function:linear!important}.amw-fsl-spinner__ring--1{animation-name:amw-fsl-rotate-simple-cw}.amw-fsl-spinner__ring--2{animation-name:amw-fsl-rotate-simple-ccw}@keyframes amw-fsl-rotate-simple-cw{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes amw-fsl-rotate-simple-ccw{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwFullScreenLoadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'amw-full-screen-loading', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "@if (isVisible()) {\n<div class=\"amw-full-screen-loading\" [class.amw-full-screen-loading--visible]=\"isLoading()\"\n  [class.amw-full-screen-loading--hiding]=\"!isLoading()\">\n  <!-- Overlay backdrop -->\n  <div class=\"amw-full-screen-loading__backdrop\"></div>\n\n  <!-- Spinner container (fixed position) -->\n  <div class=\"amw-full-screen-loading__content\">\n    <div class=\"amw-fsl-spinner\">\n      <div class=\"amw-fsl-spinner__ring amw-fsl-spinner__ring--1\"></div>\n      <div class=\"amw-fsl-spinner__ring amw-fsl-spinner__ring--2\"></div>\n    </div>\n  </div>\n\n  <!-- Messages container (fixed position below spinner) -->\n  <div class=\"amw-full-screen-loading__messages\">\n    @for (item of items(); track trackByItem($index, item)) {\n    <div class=\"amw-full-screen-loading__message\"\n      [class.amw-full-screen-loading__message--dismissing]=\"item.dismissing\">\n      <span class=\"amw-full-screen-loading__message-text\">{{ item.message }}</span>\n    </div>\n    }\n  </div>\n</div>\n}", styles: [".amw-full-screen-loading{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center;pointer-events:all;opacity:0}.amw-full-screen-loading--visible{animation:amw-fsl-fade-in .6s cubic-bezier(0,0,.2,1) forwards}.amw-full-screen-loading--hiding{animation:amw-fsl-fade-out .5s cubic-bezier(.4,0,1,1) forwards}.amw-full-screen-loading__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:backdrop-filter .6s ease-out}.amw-full-screen-loading__content{position:absolute;top:30%;left:50%;transform:translate(-50%);z-index:1;display:flex;flex-direction:column;align-items:center}.amw-full-screen-loading__messages{position:absolute;top:calc(30% + 375px);left:50%;transform:translate(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:200px}.amw-full-screen-loading__message{display:flex;align-items:center;justify-content:center;padding:12px 24px;background-color:#fffffff2;border-radius:24px;opacity:1;transform:translate(0);box-shadow:0 4px 20px #00000026;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);animation:amw-fsl-message-enter .45s cubic-bezier(0,0,.2,1)}.amw-full-screen-loading__message--dismissing{opacity:0;transform:translate(40px);transition:opacity .5s cubic-bezier(.4,0,1,1),transform .5s cubic-bezier(.4,0,1,1)}.amw-full-screen-loading__message-text{font-size:14px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}.amw-fsl-spinner{position:relative;width:350px;height:350px}.amw-fsl-spinner__ring{position:absolute;top:50%;left:50%;border-radius:50%;box-sizing:border-box}.amw-fsl-spinner__ring--1{width:360px;height:360px;margin-left:-180px;margin-top:-180px;background:conic-gradient(var(--mdc-theme-primary, #6200ee) 0deg 100deg,transparent 100deg 120deg,var(--mdc-theme-primary, #6200ee) 120deg 220deg,transparent 220deg 240deg,var(--mdc-theme-primary, #6200ee) 240deg 340deg,transparent 340deg 360deg);mask:radial-gradient(circle,transparent 50%,black 50%);-webkit-mask:radial-gradient(circle,transparent 50%,black 50%);animation:amw-fsl-rotate-cw-1 25s cubic-bezier(.4,0,.2,1) infinite}.amw-fsl-spinner__ring--2{width:250px;height:250px;margin-left:-125px;margin-top:-125px;background:conic-gradient(var(--mdc-theme-secondary, #03dac6) 0deg 92deg,transparent 92deg 120deg,var(--mdc-theme-secondary, #03dac6) 120deg 212deg,transparent 212deg 240deg,var(--mdc-theme-secondary, #03dac6) 240deg 332deg,transparent 332deg 360deg);mask:radial-gradient(circle,transparent 40%,black 40%);-webkit-mask:radial-gradient(circle,transparent 40%,black 40%);animation:amw-fsl-rotate-ccw-1 22s cubic-bezier(.25,.1,.25,1) infinite}@keyframes amw-fsl-rotate-cw-1{0%{transform:rotate(0)}25%{transform:rotate(120deg)}50%{transform:rotate(180deg)}75%{transform:rotate(300deg)}to{transform:rotate(360deg)}}@keyframes amw-fsl-rotate-ccw-1{0%{transform:rotate(0)}20%{transform:rotate(-90deg)}40%{transform:rotate(-120deg)}60%{transform:rotate(-240deg)}80%{transform:rotate(-300deg)}to{transform:rotate(-360deg)}}@keyframes amw-fsl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes amw-fsl-fade-out{0%{opacity:1}to{opacity:0}}@keyframes amw-fsl-message-enter{0%{opacity:0;transform:translateY(15px) scale(.98)}60%{opacity:.8;transform:translateY(-2px) scale(1)}to{opacity:1;transform:translateY(0) scale(1)}}.dark-theme .amw-full-screen-loading__backdrop{background-color:#000000bf}.dark-theme .amw-full-screen-loading__message{background-color:#1e1e1ef2;box-shadow:0 4px 20px #0006}.dark-theme .amw-full-screen-loading__message-text{color:#fff}.dark-theme .amw-fsl-spinner__ring--1{background:conic-gradient(var(--mdc-theme-primary, #bb86fc) 0deg 100deg,transparent 100deg 120deg,var(--mdc-theme-primary, #bb86fc) 120deg 220deg,transparent 220deg 240deg,var(--mdc-theme-primary, #bb86fc) 240deg 340deg,transparent 340deg 360deg)}.dark-theme .amw-fsl-spinner__ring--2{background:conic-gradient(var(--mdc-theme-secondary, #03dac6) 0deg 92deg,transparent 92deg 120deg,var(--mdc-theme-secondary, #03dac6) 120deg 212deg,transparent 212deg 240deg,var(--mdc-theme-secondary, #03dac6) 240deg 332deg,transparent 332deg 360deg)}@media(prefers-reduced-motion:reduce){.amw-full-screen-loading--visible{animation:amw-fsl-fade-in .4s linear forwards}.amw-full-screen-loading--hiding{animation:amw-fsl-fade-out .4s linear forwards}.amw-full-screen-loading__message{transition:opacity .2s linear;animation:none}.amw-full-screen-loading__message--dismissing{transform:none;transition:opacity .3s linear}.amw-fsl-spinner__ring{animation-duration:20s!important;animation-timing-function:linear!important}.amw-fsl-spinner__ring--1{animation-name:amw-fsl-rotate-simple-cw}.amw-fsl-spinner__ring--2{animation-name:amw-fsl-rotate-simple-ccw}@keyframes amw-fsl-rotate-simple-cw{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes amw-fsl-rotate-simple-ccw{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}}\n"] }]
+        }] });
+
+const DEFAULT_CONFIG = {
+    maxErrors: 50,
+    autoDismissAfter: 0,
+    logToConsole: true,
+    trackHistory: true,
+    maxHistory: 100
+};
+/**
+ * AMW Error State Service
+ *
+ * Provides centralized error state management for components and applications.
+ * Components can create error contexts, add/remove errors, and display them
+ * in a consistent manner.
+ *
+ * @example
+ * ```typescript
+ * // In your component
+ * export class MyComponent implements OnInit, OnDestroy {
+ *   private errorContext!: ErrorContext;
+ *
+ *   constructor(private errorStateService: AmwErrorStateService) {}
+ *
+ *   ngOnInit() {
+ *     this.errorContext = this.errorStateService.createContext({
+ *       autoDismissAfter: 5000
+ *     });
+ *   }
+ *
+ *   ngOnDestroy() {
+ *     this.errorStateService.destroyContext(this.errorContext.id);
+ *   }
+ *
+ *   handleApiError(error: HttpErrorResponse) {
+ *     this.errorStateService.addError(this.errorContext.id, {
+ *       message: error.message,
+ *       code: error.status.toString(),
+ *       severity: 'error',
+ *       source: 'API',
+ *       originalError: error,
+ *       retryAction: () => this.retryRequest()
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class AmwErrorStateService {
+    /** Map of all error contexts by ID */
+    contexts = new Map();
+    /** Global error history */
+    errorHistory = signal([], ...(ngDevMode ? [{ debugName: "errorHistory" }] : []));
+    /** Counter for generating unique IDs */
+    idCounter = 0;
+    /** Map of auto-dismiss timers */
+    dismissTimers = new Map();
+    /** Subject for error events */
+    errorSubject = new Subject();
+    /** Observable for error events */
+    errors$ = this.errorSubject.asObservable();
+    /** Global config */
+    globalConfig = { ...DEFAULT_CONFIG };
+    constructor() { }
+    /**
+     * Configure global error state settings
+     */
+    configure(config) {
+        this.globalConfig = { ...this.globalConfig, ...config };
+    }
+    /**
+     * Create a new error context for a component
+     * @param config Optional configuration
+     * @returns The created error context
+     */
+    createContext(config) {
+        const id = this.generateId();
+        const errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+        const mergedConfig = { ...this.globalConfig, ...config };
+        const hasErrors = computed(() => errors().some(e => e.severity === 'error' && !e.dismissed), ...(ngDevMode ? [{ debugName: "hasErrors" }] : []));
+        const hasWarnings = computed(() => errors().some(e => e.severity === 'warning' && !e.dismissed), ...(ngDevMode ? [{ debugName: "hasWarnings" }] : []));
+        const errorCount = computed(() => errors().filter(e => !e.dismissed).length, ...(ngDevMode ? [{ debugName: "errorCount" }] : []));
+        const context = {
+            id,
+            errors,
+            hasErrors,
+            hasWarnings,
+            errorCount,
+            config: mergedConfig
+        };
+        this.contexts.set(id, context);
+        return context;
+    }
+    /**
+     * Destroy an error context and clean up timers
+     * @param contextId The context ID to destroy
+     */
+    destroyContext(contextId) {
+        // Clean up any dismiss timers
+        const context = this.contexts.get(contextId);
+        if (context) {
+            context.errors().forEach(error => {
+                const timerKey = `${contextId}_${error.id}`;
+                const timer = this.dismissTimers.get(timerKey);
+                if (timer) {
+                    clearTimeout(timer);
+                    this.dismissTimers.delete(timerKey);
+                }
+            });
+        }
+        this.contexts.delete(contextId);
+    }
+    /**
+     * Add an error to a context
+     * @param contextId The context ID
+     * @param error The error to add (without ID, one will be generated)
+     * @returns The error ID
+     */
+    addError(contextId, error) {
+        const context = this.contexts.get(contextId);
+        if (!context) {
+            throw new Error(`Error context ${contextId} not found`);
+        }
+        const errorId = error.id || this.generateErrorId();
+        const fullError = {
+            ...error,
+            id: errorId,
+            timestamp: Date.now(),
+            dismissed: false,
+            dismissible: error.dismissible ?? true
+        };
+        // Log to console if configured
+        if (context.config.logToConsole) {
+            this.logError(fullError);
+        }
+        // Check max errors
+        let currentErrors = context.errors();
+        if (context.config.maxErrors && currentErrors.length >= context.config.maxErrors) {
+            // Remove oldest error
+            currentErrors = currentErrors.slice(1);
+        }
+        // Add new error
+        context.errors.set([...currentErrors, fullError]);
+        // Add to history if configured
+        if (context.config.trackHistory) {
+            this.addToHistory(fullError);
+        }
+        // Emit error event
+        this.errorSubject.next(fullError);
+        // Set up auto-dismiss if configured
+        if (context.config.autoDismissAfter && context.config.autoDismissAfter > 0) {
+            this.setupAutoDismiss(contextId, errorId, context.config.autoDismissAfter);
+        }
+        return errorId;
+    }
+    /**
+     * Add an error from a caught exception
+     * @param contextId The context ID
+     * @param error The caught error
+     * @param options Additional options
+     */
+    addFromException(contextId, error, options) {
+        const message = error instanceof Error ? error.message : String(error);
+        const code = error instanceof Error ? error.name : 'UNKNOWN';
+        return this.addError(contextId, {
+            message,
+            code,
+            severity: options?.severity || 'error',
+            source: options?.source,
+            field: options?.field,
+            originalError: error,
+            retryAction: options?.retryAction
+        });
+    }
+    /**
+     * Dismiss an error
+     * @param contextId The context ID
+     * @param errorId The error ID to dismiss
+     */
+    dismissError(contextId, errorId) {
+        const context = this.contexts.get(contextId);
+        if (!context)
+            return;
+        context.errors.update(errors => errors.map(e => e.id === errorId ? { ...e, dismissed: true } : e));
+        // Clear auto-dismiss timer
+        const timerKey = `${contextId}_${errorId}`;
+        const timer = this.dismissTimers.get(timerKey);
+        if (timer) {
+            clearTimeout(timer);
+            this.dismissTimers.delete(timerKey);
+        }
+    }
+    /**
+     * Remove an error completely
+     * @param contextId The context ID
+     * @param errorId The error ID to remove
+     */
+    removeError(contextId, errorId) {
+        const context = this.contexts.get(contextId);
+        if (!context)
+            return;
+        context.errors.update(errors => errors.filter(e => e.id !== errorId));
+        // Clear auto-dismiss timer
+        const timerKey = `${contextId}_${errorId}`;
+        const timer = this.dismissTimers.get(timerKey);
+        if (timer) {
+            clearTimeout(timer);
+            this.dismissTimers.delete(timerKey);
+        }
+    }
+    /**
+     * Clear all errors from a context
+     * @param contextId The context ID
+     */
+    clearErrors(contextId) {
+        const context = this.contexts.get(contextId);
+        if (!context)
+            return;
+        // Clear all timers for this context
+        context.errors().forEach(error => {
+            const timerKey = `${contextId}_${error.id}`;
+            const timer = this.dismissTimers.get(timerKey);
+            if (timer) {
+                clearTimeout(timer);
+                this.dismissTimers.delete(timerKey);
+            }
+        });
+        context.errors.set([]);
+    }
+    /**
+     * Get all errors for a context
+     * @param contextId The context ID
+     * @returns Array of errors
+     */
+    getErrors(contextId) {
+        const context = this.contexts.get(contextId);
+        return context?.errors() || [];
+    }
+    /**
+     * Get active (non-dismissed) errors
+     * @param contextId The context ID
+     * @returns Array of active errors
+     */
+    getActiveErrors(contextId) {
+        return this.getErrors(contextId).filter(e => !e.dismissed);
+    }
+    /**
+     * Get errors for a specific field
+     * @param contextId The context ID
+     * @param field The field name
+     * @returns Array of errors for the field
+     */
+    getFieldErrors(contextId, field) {
+        return this.getErrors(contextId).filter(e => e.field === field && !e.dismissed);
+    }
+    /**
+     * Check if a context has any active errors
+     * @param contextId The context ID
+     * @returns True if active errors exist
+     */
+    hasActiveErrors(contextId) {
+        return this.getActiveErrors(contextId).length > 0;
+    }
+    /**
+     * Get the error history
+     * @returns Array of historical errors
+     */
+    getErrorHistory() {
+        return this.errorHistory();
+    }
+    /**
+     * Clear the error history
+     */
+    clearHistory() {
+        this.errorHistory.set([]);
+    }
+    /**
+     * Get a context by ID
+     * @param contextId The context ID
+     * @returns The error context or undefined
+     */
+    getContext(contextId) {
+        return this.contexts.get(contextId);
+    }
+    /**
+     * Retry an error's action if available
+     * @param contextId The context ID
+     * @param errorId The error ID
+     */
+    retryError(contextId, errorId) {
+        const context = this.contexts.get(contextId);
+        if (!context)
+            return;
+        const error = context.errors().find(e => e.id === errorId);
+        if (error?.retryAction) {
+            // Dismiss the error before retrying
+            this.dismissError(contextId, errorId);
+            // Execute retry action
+            error.retryAction();
+        }
+    }
+    /**
+     * Add error to history
+     */
+    addToHistory(error) {
+        let history = this.errorHistory();
+        if (this.globalConfig.maxHistory && history.length >= this.globalConfig.maxHistory) {
+            history = history.slice(1);
+        }
+        this.errorHistory.set([...history, error]);
+    }
+    /**
+     * Log error to console
+     */
+    logError(error) {
+        const prefix = `[AMW Error State] [${error.severity.toUpperCase()}]`;
+        const message = `${prefix} ${error.message}`;
+        switch (error.severity) {
+            case 'error':
+                console.error(message, error.originalError || '');
+                break;
+            case 'warning':
+                console.warn(message, error.originalError || '');
+                break;
+            case 'info':
+                console.info(message);
+                break;
+        }
+    }
+    /**
+     * Set up auto-dismiss timer
+     */
+    setupAutoDismiss(contextId, errorId, duration) {
+        const timerKey = `${contextId}_${errorId}`;
+        const timer = setTimeout(() => {
+            this.dismissError(contextId, errorId);
+            this.dismissTimers.delete(timerKey);
+        }, duration);
+        this.dismissTimers.set(timerKey, timer);
+    }
+    generateId() {
+        return `ec_${Date.now()}_${++this.idCounter}`;
+    }
+    generateErrorId() {
+        return `err_${Date.now()}_${++this.idCounter}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwErrorStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwErrorStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwErrorStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Mixin/base class functionality for components that need error state management
+ * This can be used via composition or inheritance
+ */
+class ErrorStateMixin {
+    errorStateService;
+    errorContext;
+    /**
+     * Initialize error state for this component
+     * Call this in ngOnInit
+     */
+    initializeErrorState(service, config) {
+        this.errorStateService = service;
+        this.errorContext = service.createContext(config);
+    }
+    /**
+     * Clean up error context
+     * Call this in ngOnDestroy
+     */
+    destroyErrorState() {
+        if (this.errorContext) {
+            this.errorStateService.destroyContext(this.errorContext.id);
+        }
+    }
+    /**
+     * Add an error
+     */
+    addError(error) {
+        return this.errorStateService.addError(this.errorContext.id, error);
+    }
+    /**
+     * Add error from exception
+     */
+    addErrorFromException(error, options) {
+        return this.errorStateService.addFromException(this.errorContext.id, error, options);
+    }
+    /**
+     * Dismiss an error
+     */
+    dismissError(errorId) {
+        this.errorStateService.dismissError(this.errorContext.id, errorId);
+    }
+    /**
+     * Clear all errors
+     */
+    clearErrors() {
+        this.errorStateService.clearErrors(this.errorContext.id);
+    }
+    /**
+     * Get all active errors
+     */
+    get activeErrors() {
+        return this.errorContext?.errors().filter(e => !e.dismissed) || [];
+    }
+    /**
+     * Check if there are any active errors
+     */
+    get hasErrors() {
+        return this.errorContext?.hasErrors() || false;
+    }
+    /**
+     * Check if there are any warnings
+     */
+    get hasWarnings() {
+        return this.errorContext?.hasWarnings() || false;
+    }
+    /**
+     * Get error count
+     */
+    get errorCount() {
+        return this.errorContext?.errorCount() || 0;
+    }
+}
+
+/**
+ * AMW Error Display Component
+ *
+ * Displays errors from an error context in a consistent, user-friendly manner.
+ * Supports different display modes, severity icons, dismiss/retry actions.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <amw-error-display [context]="errorContext"></amw-error-display>
+ *
+ * <!-- With custom configuration -->
+ * <amw-error-display
+ *   [context]="errorContext"
+ *   mode="inline"
+ *   [showDismiss]="true"
+ *   [showRetry]="true"
+ *   [maxVisible]="5">
+ * </amw-error-display>
+ * ```
+ */
+class AmwErrorDisplayComponent {
+    errorStateService = inject(AmwErrorStateService);
+    /**
+     * The error context to display errors from
+     */
+    context = input.required(...(ngDevMode ? [{ debugName: "context" }] : []));
+    /**
+     * Display mode
+     * - 'banner': Full-width banner at top/bottom
+     * - 'inline': Inline within content
+     * - 'toast': Floating toast-style
+     * - 'list': Simple list of errors
+     */
+    mode = input('inline', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /**
+     * Position for banner/toast modes
+     */
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * Whether to show dismiss buttons
+     */
+    showDismiss = input(true, ...(ngDevMode ? [{ debugName: "showDismiss" }] : []));
+    /**
+     * Whether to show retry buttons (for errors with retry actions)
+     */
+    showRetry = input(true, ...(ngDevMode ? [{ debugName: "showRetry" }] : []));
+    /**
+     * Maximum number of errors to show (-1 for unlimited)
+     */
+    maxVisible = input(-1, ...(ngDevMode ? [{ debugName: "maxVisible" }] : []));
+    /**
+     * Whether to show only active (non-dismissed) errors
+     */
+    activeOnly = input(true, ...(ngDevMode ? [{ debugName: "activeOnly" }] : []));
+    /**
+     * Filter by severity
+     */
+    severityFilter = input('all', ...(ngDevMode ? [{ debugName: "severityFilter" }] : []));
+    /**
+     * Emitted when an error is dismissed
+     */
+    errorDismissed = output();
+    /**
+     * Emitted when retry is clicked
+     */
+    errorRetried = output();
+    /**
+     * Get the resolved error context
+     */
+    resolvedContext = computed(() => {
+        const ctx = this.context();
+        if (typeof ctx === 'string') {
+            return this.errorStateService.getContext(ctx);
+        }
+        return ctx;
+    }, ...(ngDevMode ? [{ debugName: "resolvedContext" }] : []));
+    /**
+     * Get filtered errors to display
+     */
+    displayErrors = computed(() => {
+        const ctx = this.resolvedContext();
+        if (!ctx)
+            return [];
+        let errors = ctx.errors();
+        // Filter active only
+        if (this.activeOnly()) {
+            errors = errors.filter(e => !e.dismissed);
+        }
+        // Filter by severity
+        const severity = this.severityFilter();
+        if (severity !== 'all') {
+            errors = errors.filter(e => e.severity === severity);
+        }
+        // Limit visible
+        const max = this.maxVisible();
+        if (max > 0 && errors.length > max) {
+            errors = errors.slice(-max);
+        }
+        return errors;
+    }, ...(ngDevMode ? [{ debugName: "displayErrors" }] : []));
+    /**
+     * Whether there are any errors to display
+     */
+    hasErrors = computed(() => this.displayErrors().length > 0, ...(ngDevMode ? [{ debugName: "hasErrors" }] : []));
+    /**
+     * Get hidden error count
+     */
+    hiddenCount = computed(() => {
+        const ctx = this.resolvedContext();
+        if (!ctx)
+            return 0;
+        let totalErrors = ctx.errors();
+        if (this.activeOnly()) {
+            totalErrors = totalErrors.filter(e => !e.dismissed);
+        }
+        const max = this.maxVisible();
+        if (max > 0 && totalErrors.length > max) {
+            return totalErrors.length - max;
+        }
+        return 0;
+    }, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : []));
+    /**
+     * Get icon for severity
+     */
+    getIcon(severity) {
+        const icons = {
+            error: 'error',
+            warning: 'warning',
+            info: 'info'
+        };
+        return icons[severity];
+    }
+    /**
+     * Dismiss an error
+     */
+    onDismiss(error) {
+        const ctx = this.resolvedContext();
+        if (ctx) {
+            this.errorStateService.dismissError(ctx.id, error.id);
+            this.errorDismissed.emit(error);
+        }
+    }
+    /**
+     * Retry an error's action
+     */
+    onRetry(error) {
+        const ctx = this.resolvedContext();
+        if (ctx) {
+            this.errorStateService.retryError(ctx.id, error.id);
+            this.errorRetried.emit(error);
+        }
+    }
+    /**
+     * Clear all errors
+     */
+    clearAll() {
+        const ctx = this.resolvedContext();
+        if (ctx) {
+            this.errorStateService.clearErrors(ctx.id);
+        }
+    }
+    /**
+     * Track by function
+     */
+    trackByError(index, error) {
+        return error.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AmwErrorDisplayComponent, isStandalone: true, selector: "amw-error-display", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showDismiss: { classPropertyName: "showDismiss", publicName: "showDismiss", isSignal: true, isRequired: false, transformFunction: null }, showRetry: { classPropertyName: "showRetry", publicName: "showRetry", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, activeOnly: { classPropertyName: "activeOnly", publicName: "activeOnly", isSignal: true, isRequired: false, transformFunction: null }, severityFilter: { classPropertyName: "severityFilter", publicName: "severityFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { errorDismissed: "errorDismissed", errorRetried: "errorRetried" }, ngImport: i0, template: "@if (hasErrors()) {\n  <div class=\"amw-error-display\"\n       [class.amw-error-display--banner]=\"mode() === 'banner'\"\n       [class.amw-error-display--inline]=\"mode() === 'inline'\"\n       [class.amw-error-display--toast]=\"mode() === 'toast'\"\n       [class.amw-error-display--list]=\"mode() === 'list'\"\n       [class.amw-error-display--top]=\"position() === 'top'\"\n       [class.amw-error-display--bottom]=\"position() === 'bottom'\">\n\n    <div class=\"amw-error-display__container\">\n      @for (error of displayErrors(); track trackByError($index, error)) {\n        <div class=\"amw-error-display__item\"\n             [class.amw-error-display__item--error]=\"error.severity === 'error'\"\n             [class.amw-error-display__item--warning]=\"error.severity === 'warning'\"\n             [class.amw-error-display__item--info]=\"error.severity === 'info'\"\n             [class.amw-error-display__item--dismissed]=\"error.dismissed\">\n\n          <div class=\"amw-error-display__icon\">\n            <amw-icon [name]=\"getIcon(error.severity)\"></amw-icon>\n          </div>\n\n          <div class=\"amw-error-display__content\">\n            <div class=\"amw-error-display__message\">{{ error.message }}</div>\n            @if (error.source || error.code) {\n              <div class=\"amw-error-display__meta\">\n                @if (error.source) {\n                  <span class=\"amw-error-display__source\">{{ error.source }}</span>\n                }\n                @if (error.code) {\n                  <span class=\"amw-error-display__code\">[{{ error.code }}]</span>\n                }\n              </div>\n            }\n          </div>\n\n          <div class=\"amw-error-display__actions\">\n            @if (showRetry() && error.retryAction) {\n              <amw-button\n                appearance=\"text\"\n                size=\"small\"\n                icon=\"refresh\"\n                (click)=\"onRetry(error)\"\n                ariaLabel=\"Retry\">\n              </amw-button>\n            }\n            @if (showDismiss() && error.dismissible) {\n              <amw-button\n                appearance=\"text\"\n                size=\"small\"\n                icon=\"close\"\n                (click)=\"onDismiss(error)\"\n                ariaLabel=\"Dismiss\">\n              </amw-button>\n            }\n          </div>\n        </div>\n      }\n\n      @if (hiddenCount() > 0) {\n        <div class=\"amw-error-display__overflow\">\n          +{{ hiddenCount() }} more error(s)\n        </div>\n      }\n\n      @if (displayErrors().length > 1) {\n        <div class=\"amw-error-display__footer\">\n          <amw-button\n            appearance=\"text\"\n            size=\"small\"\n            (click)=\"clearAll()\">\n            Clear All\n          </amw-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".amw-error-display{font-family:var(--mdc-typography-body1-font-family, Roboto, sans-serif)}.amw-error-display--inline{margin:8px 0}.amw-error-display--banner{position:fixed;left:0;right:0;z-index:1000;padding:0 16px;box-shadow:0 2px 8px #00000026}.amw-error-display--banner.amw-error-display--top{top:0}.amw-error-display--banner.amw-error-display--bottom{bottom:0}.amw-error-display--toast{position:fixed;z-index:1000;max-width:400px;padding:8px}.amw-error-display--toast.amw-error-display--top{top:16px;right:16px}.amw-error-display--toast.amw-error-display--bottom{bottom:16px;right:16px}.amw-error-display--toast .amw-error-display__container{flex-direction:column;gap:8px}.amw-error-display--toast .amw-error-display__item{border-radius:8px;box-shadow:0 2px 8px #0003}.amw-error-display--list .amw-error-display__item{border-radius:0;border-bottom:1px solid var(--mdc-theme-outline-variant, #e0e0e0)}.amw-error-display--list .amw-error-display__item:last-child{border-bottom:none}.amw-error-display__container{display:flex;flex-direction:column;gap:4px}.amw-error-display__item{display:flex;align-items:flex-start;padding:12px 16px;border-radius:4px;animation:amw-error-slide-in .3s ease-out}.amw-error-display__item--error{background-color:var(--mdc-theme-error-container, #fdecea);color:#410002}.amw-error-display__item--error .amw-error-display__icon{color:#ba1a1a}.amw-error-display__item--warning{background-color:#fff3e0;color:#3d2800}.amw-error-display__item--warning .amw-error-display__icon{color:#9a5000}.amw-error-display__item--info{background-color:#e3f2fd;color:#002171}.amw-error-display__item--info .amw-error-display__icon{color:#002171}.amw-error-display__item--dismissed{opacity:.5;animation:amw-error-fade-out .3s ease-out}.amw-error-display__icon{flex-shrink:0;margin-right:12px;display:flex;align-items:center}.amw-error-display__icon amw-icon{font-size:20px;width:20px;height:20px}.amw-error-display__content{flex:1;min-width:0}.amw-error-display__message{font-size:14px;line-height:1.4;word-break:break-word}.amw-error-display__meta{display:flex;gap:8px;margin-top:4px;font-size:12px}.amw-error-display__source{font-weight:500}.amw-error-display__code{font-family:monospace}.amw-error-display__actions{flex-shrink:0;display:flex;gap:4px;margin-left:8px}.amw-error-display__actions amw-button{opacity:.7;transition:opacity .2s}.amw-error-display__actions amw-button:hover{opacity:1}.amw-error-display__overflow{padding:8px 16px;font-size:12px;color:var(--mdc-theme-on-surface-variant, #666);text-align:center;font-style:italic}.amw-error-display__footer{display:flex;justify-content:flex-end;padding:4px 8px}@keyframes amw-error-slide-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes amw-error-fade-out{0%{opacity:1}to{opacity:.5}}.dark-theme .amw-error-display__item--error{background-color:#b0002040;color:#ffb4ab}.dark-theme .amw-error-display__item--error .amw-error-display__icon{color:#ffb4ab}.dark-theme .amw-error-display__item--warning{background-color:#ff980033;color:#ffe0b2}.dark-theme .amw-error-display__item--warning .amw-error-display__icon{color:#ffe0b2}.dark-theme .amw-error-display__item--info{background-color:#2196f333;color:#bbdefb}.dark-theme .amw-error-display__item--info .amw-error-display__icon{color:#bbdefb}@media(prefers-reduced-motion:reduce){.amw-error-display__item{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AmwIconComponent, selector: "amw-icon", inputs: ["name", "color", "size", "fontSet", "fontIcon", "inline", "iconClass", "ariaLabel"] }, { kind: "component", type: AmwButtonComponent, selector: "amw-button", inputs: ["type", "appearance", "fab", "icon", "iconPosition", "loading", "fullWidth", "autofocus", "text", "form", "formAction", "formMethod", "formTarget", "formEnctype", "formNoValidate", "formReset", "ripple", "disableRipple", "rippleColor", "rippleRadius", "rippleCentered", "rippleUnbounded", "spinnerSize", "spinnerColor"], outputs: ["buttonClick", "buttonFocus", "buttonBlur", "mouseenter", "mouseleave"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AmwErrorDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'amw-error-display', standalone: true, imports: [CommonModule, AmwIconComponent, AmwButtonComponent], encapsulation: ViewEncapsulation.None, template: "@if (hasErrors()) {\n  <div class=\"amw-error-display\"\n       [class.amw-error-display--banner]=\"mode() === 'banner'\"\n       [class.amw-error-display--inline]=\"mode() === 'inline'\"\n       [class.amw-error-display--toast]=\"mode() === 'toast'\"\n       [class.amw-error-display--list]=\"mode() === 'list'\"\n       [class.amw-error-display--top]=\"position() === 'top'\"\n       [class.amw-error-display--bottom]=\"position() === 'bottom'\">\n\n    <div class=\"amw-error-display__container\">\n      @for (error of displayErrors(); track trackByError($index, error)) {\n        <div class=\"amw-error-display__item\"\n             [class.amw-error-display__item--error]=\"error.severity === 'error'\"\n             [class.amw-error-display__item--warning]=\"error.severity === 'warning'\"\n             [class.amw-error-display__item--info]=\"error.severity === 'info'\"\n             [class.amw-error-display__item--dismissed]=\"error.dismissed\">\n\n          <div class=\"amw-error-display__icon\">\n            <amw-icon [name]=\"getIcon(error.severity)\"></amw-icon>\n          </div>\n\n          <div class=\"amw-error-display__content\">\n            <div class=\"amw-error-display__message\">{{ error.message }}</div>\n            @if (error.source || error.code) {\n              <div class=\"amw-error-display__meta\">\n                @if (error.source) {\n                  <span class=\"amw-error-display__source\">{{ error.source }}</span>\n                }\n                @if (error.code) {\n                  <span class=\"amw-error-display__code\">[{{ error.code }}]</span>\n                }\n              </div>\n            }\n          </div>\n\n          <div class=\"amw-error-display__actions\">\n            @if (showRetry() && error.retryAction) {\n              <amw-button\n                appearance=\"text\"\n                size=\"small\"\n                icon=\"refresh\"\n                (click)=\"onRetry(error)\"\n                ariaLabel=\"Retry\">\n              </amw-button>\n            }\n            @if (showDismiss() && error.dismissible) {\n              <amw-button\n                appearance=\"text\"\n                size=\"small\"\n                icon=\"close\"\n                (click)=\"onDismiss(error)\"\n                ariaLabel=\"Dismiss\">\n              </amw-button>\n            }\n          </div>\n        </div>\n      }\n\n      @if (hiddenCount() > 0) {\n        <div class=\"amw-error-display__overflow\">\n          +{{ hiddenCount() }} more error(s)\n        </div>\n      }\n\n      @if (displayErrors().length > 1) {\n        <div class=\"amw-error-display__footer\">\n          <amw-button\n            appearance=\"text\"\n            size=\"small\"\n            (click)=\"clearAll()\">\n            Clear All\n          </amw-button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".amw-error-display{font-family:var(--mdc-typography-body1-font-family, Roboto, sans-serif)}.amw-error-display--inline{margin:8px 0}.amw-error-display--banner{position:fixed;left:0;right:0;z-index:1000;padding:0 16px;box-shadow:0 2px 8px #00000026}.amw-error-display--banner.amw-error-display--top{top:0}.amw-error-display--banner.amw-error-display--bottom{bottom:0}.amw-error-display--toast{position:fixed;z-index:1000;max-width:400px;padding:8px}.amw-error-display--toast.amw-error-display--top{top:16px;right:16px}.amw-error-display--toast.amw-error-display--bottom{bottom:16px;right:16px}.amw-error-display--toast .amw-error-display__container{flex-direction:column;gap:8px}.amw-error-display--toast .amw-error-display__item{border-radius:8px;box-shadow:0 2px 8px #0003}.amw-error-display--list .amw-error-display__item{border-radius:0;border-bottom:1px solid var(--mdc-theme-outline-variant, #e0e0e0)}.amw-error-display--list .amw-error-display__item:last-child{border-bottom:none}.amw-error-display__container{display:flex;flex-direction:column;gap:4px}.amw-error-display__item{display:flex;align-items:flex-start;padding:12px 16px;border-radius:4px;animation:amw-error-slide-in .3s ease-out}.amw-error-display__item--error{background-color:var(--mdc-theme-error-container, #fdecea);color:#410002}.amw-error-display__item--error .amw-error-display__icon{color:#ba1a1a}.amw-error-display__item--warning{background-color:#fff3e0;color:#3d2800}.amw-error-display__item--warning .amw-error-display__icon{color:#9a5000}.amw-error-display__item--info{background-color:#e3f2fd;color:#002171}.amw-error-display__item--info .amw-error-display__icon{color:#002171}.amw-error-display__item--dismissed{opacity:.5;animation:amw-error-fade-out .3s ease-out}.amw-error-display__icon{flex-shrink:0;margin-right:12px;display:flex;align-items:center}.amw-error-display__icon amw-icon{font-size:20px;width:20px;height:20px}.amw-error-display__content{flex:1;min-width:0}.amw-error-display__message{font-size:14px;line-height:1.4;word-break:break-word}.amw-error-display__meta{display:flex;gap:8px;margin-top:4px;font-size:12px}.amw-error-display__source{font-weight:500}.amw-error-display__code{font-family:monospace}.amw-error-display__actions{flex-shrink:0;display:flex;gap:4px;margin-left:8px}.amw-error-display__actions amw-button{opacity:.7;transition:opacity .2s}.amw-error-display__actions amw-button:hover{opacity:1}.amw-error-display__overflow{padding:8px 16px;font-size:12px;color:var(--mdc-theme-on-surface-variant, #666);text-align:center;font-style:italic}.amw-error-display__footer{display:flex;justify-content:flex-end;padding:4px 8px}@keyframes amw-error-slide-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes amw-error-fade-out{0%{opacity:1}to{opacity:.5}}.dark-theme .amw-error-display__item--error{background-color:#b0002040;color:#ffb4ab}.dark-theme .amw-error-display__item--error .amw-error-display__icon{color:#ffb4ab}.dark-theme .amw-error-display__item--warning{background-color:#ff980033;color:#ffe0b2}.dark-theme .amw-error-display__item--warning .amw-error-display__icon{color:#ffe0b2}.dark-theme .amw-error-display__item--info{background-color:#2196f333;color:#bbdefb}.dark-theme .amw-error-display__item--info .amw-error-display__icon{color:#bbdefb}@media(prefers-reduced-motion:reduce){.amw-error-display__item{animation:none}}\n"] }]
+        }], propDecorators: { context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], showDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDismiss", required: false }] }], showRetry: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRetry", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], activeOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeOnly", required: false }] }], severityFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "severityFilter", required: false }] }], errorDismissed: [{ type: i0.Output, args: ["errorDismissed"] }], errorRetried: [{ type: i0.Output, args: ["errorRetried"] }] } });
+
 // Calendar components
 
 /**
@@ -17685,5 +19174,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AmwAccordionComponent, AmwAccordionPanelComponent, AmwAutoFocusDirective, AmwAutocompleteComponent, AmwBadgeDirective, AmwButtonComponent, AmwButtonToggleComponent, AmwButtonToggleGroupComponent, AmwCacheConfigService, AmwCacheSyncService, AmwCalendarBaseComponent, AmwCalendarFullComponent, AmwCalendarMiniComponent, AmwCalendarPickerComponent, AmwCardComponent, AmwCardService, AmwCheckboxComponent, AmwChipComponent, AmwChipInputComponent, AmwChipsComponent, AmwClickOutsideDirective, AmwColorPickerComponent, AmwCopyToClipboardDirective, AmwCurrencyPipe, AmwDashboardPageComponent, AmwDataTableComponent, AmwDatePipe, AmwDatepickerComponent, AmwDetailPageComponent, AmwDialogComponent, AmwDialogRef, AmwDialogService, AmwDividerComponent, AmwFileInputComponent, AmwFormPageComponent, AmwFormValidationComponent, AmwHttpCacheService, AmwIconButtonComponent, AmwIconComponent, AmwIndexedDbStorageService, AmwInputComponent, AmwListComponent, AmwListItemComponent, AmwListPageComponent, AmwLoadingService, AmwMasterDetailPageComponent, AmwMenuComponent, AmwMenuItemComponent, AmwMenuTriggerForDirective, AmwMessagingService, AmwNotificationService, AmwPaginatorComponent, AmwPopoverComponent, AmwProgressBarComponent, AmwProgressSpinnerComponent, AmwRadioComponent, AmwRadioGroupComponent, AmwRangeSliderComponent, AmwReportPageComponent, AmwSearchPageComponent, AmwSelectComponent, AmwSidenavComponent, AmwSliderComponent, AmwStepperComponent, AmwSwitchComponent, AmwTabComponent, AmwTabsComponent, AmwTextTransformPipe, AmwTextareaComponent, AmwThemeEditorComponent, AmwThemeManagerComponent, AmwThemePickerComponent, AmwThemeService, AmwTimepickerComponent, AmwToggleComponent, AmwToolbarComponent, AmwTooltipComponent, AmwTooltipDirective, AmwWorkflowPageComponent, BaseComponent, DefaultDashboardDataSource, DefaultFormPageDataSource, DefaultMasterDetailDataSource, DefaultReportPageDataSource, DefaultWorkflowPageDataSource, HttpCacheInterceptor, LIST_PAGE_DATA_SOURCE, WORKFLOW_PAGE_DATA_SOURCE, getAmwDialogTitle, httpCacheInterceptor };
+export { AmwAccordionComponent, AmwAccordionPanelComponent, AmwAutoFocusDirective, AmwAutocompleteComponent, AmwBadgeDirective, AmwButtonComponent, AmwButtonToggleComponent, AmwButtonToggleGroupComponent, AmwCacheConfigService, AmwCacheSyncService, AmwCalendarBaseComponent, AmwCalendarFullComponent, AmwCalendarMiniComponent, AmwCalendarPickerComponent, AmwCardComponent, AmwCardService, AmwCheckboxComponent, AmwChipComponent, AmwChipInputComponent, AmwChipsComponent, AmwClickOutsideDirective, AmwColorPickerComponent, AmwCopyToClipboardDirective, AmwCurrencyPipe, AmwDashboardPageComponent, AmwDataTableComponent, AmwDatePipe, AmwDatepickerComponent, AmwDetailPageComponent, AmwDialogComponent, AmwDialogRef, AmwDialogService, AmwDividerComponent, AmwErrorDisplayComponent, AmwErrorStateService, AmwFileInputComponent, AmwFormPageComponent, AmwFormValidationComponent, AmwFullScreenLoadingComponent, AmwFullScreenLoadingService, AmwHttpCacheService, AmwIconButtonComponent, AmwIconComponent, AmwIndexedDbStorageService, AmwInputComponent, AmwListComponent, AmwListItemComponent, AmwListPageComponent, AmwLoadingService, AmwMasterDetailPageComponent, AmwMenuComponent, AmwMenuItemComponent, AmwMenuTriggerForDirective, AmwMessagingService, AmwNotificationService, AmwPaginatorComponent, AmwPopoverComponent, AmwProgressBarComponent, AmwProgressSpinnerComponent, AmwRadioComponent, AmwRadioGroupComponent, AmwRangeSliderComponent, AmwReportPageComponent, AmwSearchPageComponent, AmwSelectComponent, AmwSidenavComponent, AmwSliderComponent, AmwStepperComponent, AmwSwitchComponent, AmwTabComponent, AmwTabsComponent, AmwTextTransformPipe, AmwTextareaComponent, AmwThemeEditorComponent, AmwThemeManagerComponent, AmwThemePickerComponent, AmwThemeService, AmwTimepickerComponent, AmwToggleComponent, AmwToolbarComponent, AmwTooltipComponent, AmwTooltipDirective, AmwValidationService, AmwValidationTooltipDirective, AmwWorkflowPageComponent, BaseComponent, DefaultDashboardDataSource, DefaultFormPageDataSource, DefaultMasterDetailDataSource, DefaultReportPageDataSource, DefaultWorkflowPageDataSource, ErrorStateMixin, HttpCacheInterceptor, LIST_PAGE_DATA_SOURCE, ValidationMixin, WORKFLOW_PAGE_DATA_SOURCE, getAmwDialogTitle, httpCacheInterceptor, loading };
 //# sourceMappingURL=angular-material-wrap.mjs.map