@m1z23r/ngx-ui 1.1.36 → 1.1.38

package/README.md

@@ -45,12 +45,20 @@ import { ButtonComponent } from '@m1z23r/ngx-ui';
 @Component({
   imports: [ButtonComponent],
   template: `
-    <ui-button variant="primary" size="md" (clicked)="handleClick($event)">
+    <ui-button color="primary" size="md" (clicked)="handleClick($event)">
       Click me
     </ui-button>
 
-    <ui-button variant="outline" [loading]="isLoading">
-      Submit
+    <ui-button variant="outline" color="danger" [loading]="isLoading">
+      Delete
+    </ui-button>
+
+    <ui-button variant="ghost" color="secondary">
+      Cancel
+    </ui-button>
+
+    <ui-button variant="elevated" color="success">
+      Save
     </ui-button>
   `
 })
@@ -60,7 +68,8 @@ import { ButtonComponent } from '@m1z23r/ngx-ui';
 
 | Input | Type | Default | Description |
 |-------|------|---------|-------------|
-| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | Button style variant |
+| `variant` | `'default' \| 'outline' \| 'ghost' \| 'elevated'` | `'default'` | Button style variant |
+| `color` | `'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Button color |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
 | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | HTML button type |
 | `disabled` | `boolean` | `false` | Disable the button |
@@ -109,6 +118,9 @@ import { InputComponent } from '@m1z23r/ngx-ui';
 | `readonly` | `boolean` | `false` | Make input read-only |
 | `required` | `boolean` | `false` | Mark as required (shows asterisk) |
 | `id` | `string` | auto-generated | Custom input ID |
+| `validators` | `ValidatorFn[]` | `[]` | Array of validator functions |
+| `validatorFn` | `ValidatorFn \| null` | `null` | Single validator function |
+| `showErrorsOn` | `'touched' \| 'dirty' \| 'always'` | `'touched'` | When to show validation errors |
 
 #### Two-way Binding
 
@@ -116,6 +128,26 @@ import { InputComponent } from '@m1z23r/ngx-ui';
 |-------|------|-------------|
 | `value` | `string \| number` | The input value |
 
+#### Validation
+
+The input component has built-in validation support:
+
+```typescript
+// Computed properties
+errors: Signal<ValidationError[]>    // All current validation errors
+isValid: Signal<boolean>             // Whether input passes validation
+isInvalid: Signal<boolean>           // Whether input fails validation
+errorMessage: Signal<string | null>  // First error message
+validationState: Signal<ValidationState>  // Full validation state
+
+// Methods
+reset(): void                        // Reset value and validation state
+markAsTouched(): void                // Mark as touched
+markAsDirty(): void                  // Mark as dirty
+hasError(key: string): boolean       // Check for specific error
+getError(key: string): ValidationError | undefined  // Get specific error
+```
+
 ---
 
 ### Table
@@ -399,7 +431,7 @@ import { ButtonComponent, LoadingDirective, LoadingService } from '@m1z23r/ngx-u
     <!-- These buttons automatically show loading when their identifier is active -->
     <ui-button uiLoading="login" (clicked)="login()">Login</ui-button>
     <ui-button uiLoading="submit" (clicked)="submit()">Submit</ui-button>
-    <ui-button uiLoading="delete" variant="outline">Delete</ui-button>
+    <ui-button uiLoading="delete" variant="outline" color="danger">Delete</ui-button>
   `
 })
 export class MyComponent {
@@ -569,7 +601,7 @@ import { CircularProgressComponent } from '@m1z23r/ngx-ui';
 |-------|------|---------|-------------|
 | `value` | `number` | `0` | Progress value (0-100) |
 | `variant` | `'primary' \| 'success' \| 'warning' \| 'danger'` | `'primary'` | Color variant |
-| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Circle size |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Circle size |
 | `strokeWidth` | `number` | `4` | Stroke width in pixels |
 | `showLabel` | `boolean` | `false` | Show percentage in center |
 | `indeterminate` | `boolean` | `false` | Spinning animation |
@@ -791,6 +823,7 @@ import { TabsComponent, TabComponent } from '@m1z23r/ngx-ui';
 | `variant` | `'default' \| 'pills' \| 'underline'` | `'default'` | Tab style |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tab size |
 | `ariaLabel` | `string` | `''` | Accessibility label |
+| `renderMode` | `'conditional' \| 'persistent'` | `'conditional'` | Tab content rendering strategy |
 
 ### Tabs Two-way Binding
 
@@ -798,12 +831,6 @@ import { TabsComponent, TabComponent } from '@m1z23r/ngx-ui';
 |-------|------|-------------|
 | `activeTab` | `string \| number` | Active tab ID or index |
 
-### Tabs Outputs
-
-| Output | Type | Description |
-|--------|------|-------------|
-| `changed` | `string \| number` | Emitted when active tab changes |
-
 ### Tab Inputs
 
 | Input | Type | Default | Description |
@@ -876,10 +903,10 @@ export class MyComponent {
 | Method | Parameters | Returns | Description |
 |--------|------------|---------|-------------|
 | `show(config)` | `ToastConfig` | `ToastRef` | Show toast with full config |
-| `success(message, title?)` | `string, string?` | `ToastRef` | Success toast |
-| `error(message, title?)` | `string, string?` | `ToastRef` | Error toast |
-| `warning(message, title?)` | `string, string?` | `ToastRef` | Warning toast |
-| `info(message, title?)` | `string, string?` | `ToastRef` | Info toast |
+| `success(message, title?, duration?)` | `string, string?, number?` | `ToastRef` | Success toast |
+| `error(message, title?, duration?)` | `string, string?, number?` | `ToastRef` | Error toast |
+| `warning(message, title?, duration?)` | `string, string?, number?` | `ToastRef` | Warning toast |
+| `info(message, title?, duration?)` | `string, string?, number?` | `ToastRef` | Info toast |
 | `dismiss(id)` | `string` | `void` | Dismiss specific toast |
 | `dismissAll()` | - | `void` | Dismiss all toasts |
 
@@ -894,6 +921,7 @@ export class MyComponent {
 | `position` | `ToastPosition` | `'top-right'` | Screen position |
 | `dismissible` | `boolean` | `true` | Show close button |
 | `showProgress` | `boolean` | `true` | Show countdown bar |
+| `maxVisible` | `number` | - | Max visible toasts at once |
 
 ### ToastPosition Values
 
@@ -927,7 +955,6 @@ import { PaginationComponent } from '@m1z23r/ngx-ui';
   [maxPages]="7"
   [showFirstLast]="true"
   size="md"
-  (changed)="onPageChange($event)"
 />
 ```
 
@@ -947,12 +974,6 @@ import { PaginationComponent } from '@m1z23r/ngx-ui';
 |-------|------|-------------|
 | `page` | `number` | Current page (1-indexed) |
 
-### Outputs
-
-| Output | Type | Description |
-|--------|------|-------------|
-| `changed` | `number` | Emitted when page changes |
-
 ### Features
 
 - **Smart truncation**: Shows ellipsis when there are many pages
@@ -981,7 +1002,7 @@ import { DialogService, DIALOG_DATA, DIALOG_REF, DialogRef, ModalComponent, Butt
       <p>{{ data.message }}</p>
 
       <ng-container footer>
-        <ui-button variant="outline" (clicked)="dialogRef.close(false)">Cancel</ui-button>
+        <ui-button variant="outline" color="secondary" (clicked)="dialogRef.close(false)">Cancel</ui-button>
         <ui-button (clicked)="dialogRef.close(true)">Confirm</ui-button>
       </ng-container>
     </ui-modal>
@@ -1021,7 +1042,7 @@ A wrapper component that provides the modal UI with backdrop, header, body, and
 
   <!-- Footer content (named slot) -->
   <ng-container footer>
-    <ui-button variant="outline" (clicked)="cancel()">Cancel</ui-button>
+    <ui-button variant="outline" color="secondary" (clicked)="cancel()">Cancel</ui-button>
     <ui-button (clicked)="save()">Save</ui-button>
   </ng-container>
 </ui-modal>
@@ -1109,8 +1130,17 @@ All components use CSS custom properties for styling. Override these in your glo
 
   // Semantic colors
   --ui-success: #22c55e;
+  --ui-success-hover: #16a34a;
+  --ui-success-active: #15803d;
+  --ui-success-text: #ffffff;
   --ui-danger: #ef4444;
+  --ui-danger-hover: #dc2626;
+  --ui-danger-active: #b91c1c;
+  --ui-danger-text: #ffffff;
   --ui-warning: #f59e0b;
+  --ui-warning-hover: #d97706;
+  --ui-warning-active: #b45309;
+  --ui-warning-text: #ffffff;
 
   // Background colors
   --ui-bg: #ffffff;
@@ -1132,6 +1162,7 @@ All components use CSS custom properties for styling. Override these in your glo
   --ui-radius-sm: 0.25rem;
   --ui-radius-md: 0.375rem;
   --ui-radius-lg: 0.5rem;
+  --ui-radius-xl: 0.75rem;
 
   // Spacing
   --ui-spacing-xs: 0.25rem;
@@ -1146,10 +1177,13 @@ All components use CSS custom properties for styling. Override these in your glo
   --ui-navbar-height: 4rem;
   --ui-footer-height: 3rem;
 
+  // Breakpoints
+  --ui-breakpoint-mobile: 768px;
+
   // Shadows
   --ui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 
   // Transitions
   --ui-transition-fast: 150ms ease;
@@ -1161,6 +1195,19 @@ All components use CSS custom properties for styling. Override these in your glo
   --ui-font-sm: 0.875rem;
   --ui-font-md: 1rem;
   --ui-font-lg: 1.125rem;
+  --ui-font-xl: 1.25rem;
+
+  // Dropdown & Select
+  --ui-dropdown-bg: var(--ui-bg);
+  --ui-dropdown-border: var(--ui-border);
+  --ui-dropdown-shadow: var(--ui-shadow-lg);
+  --ui-dropdown-radius: var(--ui-radius-md);
+  --ui-dropdown-max-height: 300px;
+
+  // Option/Item states
+  --ui-option-hover-bg: var(--ui-bg-hover);
+  --ui-option-selected-bg: color-mix(in srgb, var(--ui-primary) 10%, transparent);
+  --ui-option-selected-text: var(--ui-primary);
 }
 ```
 

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, output, ChangeDetectionStrategy, Component, ElementRef, HostListener, effect, Directive, model, Pipe, contentChildren, TemplateRef, contentChild, ViewChild, viewChild, afterRenderEffect, DestroyRef } from '@angular/core';
-import { isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet, DOCUMENT, DecimalPipe } from '@angular/common';
+import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet, NgComponentOutlet, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
@@ -378,6 +378,8 @@ const DEFAULT_DIALOG_CONFIG = {
 class DialogService {
     appRef = inject(ApplicationRef);
     injector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
     /**
      * Opens a dialog with the specified component.
      *
@@ -397,7 +399,9 @@ class DialogService {
         const hostElement = componentRef.location.nativeElement;
         hostElement.dataset['dialogConfig'] = JSON.stringify(mergedConfig);
         this.appRef.attachView(componentRef.hostView);
-        document.body.appendChild(hostElement);
+        if (isPlatformBrowser(this.platformId)) {
+            this.document.body.appendChild(hostElement);
+        }
         return dialogRef;
     }
     destroy(componentRef) {
@@ -550,6 +554,8 @@ const TOAST_DATA = new InjectionToken('TOAST_DATA');
 class ToastService {
     appRef = inject(ApplicationRef);
     injector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
     containerRef = null;
     toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
     toastRefs = new Map();
@@ -658,7 +664,9 @@ class ToastService {
         });
         this.updateContainer();
         this.appRef.attachView(this.containerRef.hostView);
-        document.body.appendChild(this.containerRef.location.nativeElement);
+        if (isPlatformBrowser(this.platformId)) {
+            this.document.body.appendChild(this.containerRef.location.nativeElement);
+        }
     }
     updateContainer() {
         if (!this.containerRef)
@@ -922,6 +930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
 class ModalComponent {
     dialogRef = inject(DIALOG_REF, { optional: true });
     elementRef = inject(ElementRef);
+    /** Tracks if mousedown started on the backdrop (to prevent close on drag-out) */
+    mouseDownOnBackdrop = signal(false, ...(ngDevMode ? [{ debugName: "mouseDownOnBackdrop" }] : []));
     /** Title displayed in the modal header */
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
     /** Modal size preset */
@@ -951,10 +961,17 @@ class ModalComponent {
             this.close();
         }
     }
+    onBackdropMouseDown(event) {
+        this.mouseDownOnBackdrop.set(event.target === event.currentTarget);
+    }
     onBackdropClick(event) {
-        if (event.target === event.currentTarget && this.closeOnBackdropClick()) {
+        // Only close if both mousedown AND mouseup happened on the backdrop
+        if (this.mouseDownOnBackdrop() &&
+            event.target === event.currentTarget &&
+            this.closeOnBackdropClick()) {
             this.close();
         }
+        this.mouseDownOnBackdrop.set(false);
     }
     close() {
         this.dialogRef?.close();
@@ -967,11 +984,11 @@ class ModalComponent {
         return classes.join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" } }, ngImport: i0, template: "<div class=\"ui-modal__backdrop\" (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"ui-modal__container\"\n    [class]=\"containerClasses()\"\n    [style.width]=\"width()\"\n    [style.max-width]=\"maxWidth()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    @if (title()) {\n      <div class=\"ui-modal__header\">\n        <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n        @if (showCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"ui-modal__close\"\n            aria-label=\"Close\"\n            (click)=\"close()\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"ui-modal__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ui-modal__footer\">\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" } }, ngImport: i0, template: "<div class=\"ui-modal__backdrop\" (mousedown)=\"onBackdropMouseDown($event)\" (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"ui-modal__container\"\n    [class]=\"containerClasses()\"\n    [style.width]=\"width()\"\n    [style.max-width]=\"maxWidth()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    @if (title()) {\n      <div class=\"ui-modal__header\">\n        <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n        @if (showCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"ui-modal__close\"\n            aria-label=\"Close\"\n            (click)=\"close()\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"ui-modal__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ui-modal__footer\">\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-modal__backdrop\" (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"ui-modal__container\"\n    [class]=\"containerClasses()\"\n    [style.width]=\"width()\"\n    [style.max-width]=\"maxWidth()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    @if (title()) {\n      <div class=\"ui-modal__header\">\n        <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n        @if (showCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"ui-modal__close\"\n            aria-label=\"Close\"\n            (click)=\"close()\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"ui-modal__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ui-modal__footer\">\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+            args: [{ selector: 'ui-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-modal__backdrop\" (mousedown)=\"onBackdropMouseDown($event)\" (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"ui-modal__container\"\n    [class]=\"containerClasses()\"\n    [style.width]=\"width()\"\n    [style.max-width]=\"maxWidth()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    @if (title()) {\n      <div class=\"ui-modal__header\">\n        <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n        @if (showCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"ui-modal__close\"\n            aria-label=\"Close\"\n            (click)=\"close()\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"ui-modal__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ui-modal__footer\">\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], onEscapePress: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -1423,6 +1440,7 @@ class SelectComponent {
     asyncSearchAbortController = null;
     debounceTimer = null;
     elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
     positionCleanup = null;
     initializedOptions = new WeakSet();
     constructor() {
@@ -1487,8 +1505,8 @@ class SelectComponent {
     }
     ngOnDestroy() {
         const dropdown = this.dropdownRef?.nativeElement;
-        if (dropdown?.parentElement === document.body) {
-            document.body.removeChild(dropdown);
+        if (dropdown?.parentElement === this.document.body) {
+            this.document.body.removeChild(dropdown);
         }
         this.removePositionListeners();
         this.cancelAsyncSearch();
@@ -2002,7 +2020,7 @@ class SelectComponent {
         if (!dropdown)
             return;
         dropdown.style.display = 'block';
-        document.body.appendChild(dropdown);
+        this.document.body.appendChild(dropdown);
         this.updateDropdownPosition();
         this.addPositionListeners();
     }
@@ -2010,7 +2028,7 @@ class SelectComponent {
         const dropdown = this.dropdownRef?.nativeElement;
         if (!dropdown)
             return;
-        if (dropdown.parentElement === document.body) {
+        if (dropdown.parentElement === this.document.body) {
             const wrapper = this.elementRef.nativeElement.querySelector('.ui-select-wrapper');
             if (wrapper) {
                 wrapper.appendChild(dropdown);
@@ -2150,6 +2168,7 @@ class DropdownComponent {
     triggerRef;
     menuRef;
     elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
     positionCleanup = null;
     contextMenuPosition = null;
     trigger = contentChild(DropdownTriggerDirective, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
@@ -2185,8 +2204,8 @@ class DropdownComponent {
     }
     ngOnDestroy() {
         const menu = this.menuRef?.nativeElement;
-        if (menu?.parentElement === document.body) {
-            document.body.removeChild(menu);
+        if (menu?.parentElement === this.document.body) {
+            this.document.body.removeChild(menu);
         }
         this.removePositionListeners();
     }
@@ -2287,7 +2306,7 @@ class DropdownComponent {
         if (!menu)
             return;
         menu.style.display = 'block';
-        document.body.appendChild(menu);
+        this.document.body.appendChild(menu);
         this.updateMenuPosition();
         this.addPositionListeners();
     }
@@ -2295,7 +2314,7 @@ class DropdownComponent {
         const menu = this.menuRef?.nativeElement;
         if (!menu)
             return;
-        if (menu.parentElement === document.body) {
+        if (menu.parentElement === this.document.body) {
             const wrapper = this.elementRef.nativeElement.querySelector('.ui-dropdown');
             if (wrapper) {
                 wrapper.appendChild(menu);
@@ -2675,6 +2694,8 @@ class TooltipDirective {
     tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
     tooltipDelay = input(200, ...(ngDevMode ? [{ debugName: "tooltipDelay" }] : []));
     tooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : []));
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
     tooltipElement = null;
     showTimeout = null;
     isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
@@ -2739,7 +2760,7 @@ class TooltipDirective {
         const arrow = this.renderer.createElement('span');
         this.renderer.addClass(arrow, 'ui-tooltip__arrow');
         this.renderer.appendChild(this.tooltipElement, arrow);
-        this.renderer.appendChild(document.body, this.tooltipElement);
+        this.renderer.appendChild(this.document.body, this.tooltipElement);
         this.injectStyles();
     }
     positionTooltip() {
@@ -2778,13 +2799,13 @@ class TooltipDirective {
     }
     destroyTooltip() {
         if (this.tooltipElement) {
-            this.renderer.removeChild(document.body, this.tooltipElement);
+            this.renderer.removeChild(this.document.body, this.tooltipElement);
             this.tooltipElement = null;
         }
     }
     injectStyles() {
         const styleId = 'ui-tooltip-styles';
-        if (document.getElementById(styleId))
+        if (!isPlatformBrowser(this.platformId) || this.document.getElementById(styleId))
             return;
         const style = this.renderer.createElement('style');
         this.renderer.setProperty(style, 'id', styleId);
@@ -2847,7 +2868,7 @@ class TooltipDirective {
         margin-top: -4px;
       }
     `);
-        this.renderer.appendChild(document.head, style);
+        this.renderer.appendChild(this.document.head, style);
     }
     ngOnDestroy() {
         this.hide();
@@ -4023,6 +4044,7 @@ class DatepickerComponent {
     focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
     hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : []));
     elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
     positionCleanup = null;
     static nextId = 0;
     generatedId = `ui-datepicker-${++DatepickerComponent.nextId}`;
@@ -4280,8 +4302,8 @@ class DatepickerComponent {
     }, ...(ngDevMode ? [{ debugName: "canNavigateNext" }] : []));
     ngOnDestroy() {
         const dropdown = this.dropdownRef?.nativeElement;
-        if (dropdown?.parentElement === document.body) {
-            document.body.removeChild(dropdown);
+        if (dropdown?.parentElement === this.document.body) {
+            this.document.body.removeChild(dropdown);
         }
         this.removePositionListeners();
     }
@@ -4597,7 +4619,7 @@ class DatepickerComponent {
         if (!dropdown)
             return;
         dropdown.style.display = 'block';
-        document.body.appendChild(dropdown);
+        this.document.body.appendChild(dropdown);
         this.updateDropdownPosition();
         this.addPositionListeners();
     }
@@ -4605,7 +4627,7 @@ class DatepickerComponent {
         const dropdown = this.dropdownRef?.nativeElement;
         if (!dropdown)
             return;
-        if (dropdown.parentElement === document.body) {
+        if (dropdown.parentElement === this.document.body) {
             const wrapper = this.elementRef.nativeElement.querySelector('.ui-datepicker-wrapper');
             if (wrapper) {
                 wrapper.appendChild(dropdown);
@@ -4714,6 +4736,7 @@ class TimepickerComponent {
     selectedSecond = signal(0, ...(ngDevMode ? [{ debugName: "selectedSecond" }] : []));
     selectedPeriod = signal('AM', ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : []));
     elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
     positionCleanup = null;
     static nextId = 0;
     generatedId = `ui-timepicker-${++TimepickerComponent.nextId}`;
@@ -4779,8 +4802,8 @@ class TimepickerComponent {
     }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
     ngOnDestroy() {
         const dropdown = this.dropdownRef?.nativeElement;
-        if (dropdown?.parentElement === document.body) {
-            document.body.removeChild(dropdown);
+        if (dropdown?.parentElement === this.document.body) {
+            this.document.body.removeChild(dropdown);
         }
         this.removePositionListeners();
     }
@@ -4942,7 +4965,7 @@ class TimepickerComponent {
         if (!dropdown)
             return;
         dropdown.style.display = 'block';
-        document.body.appendChild(dropdown);
+        this.document.body.appendChild(dropdown);
         this.updateDropdownPosition();
         this.addPositionListeners();
     }
@@ -4950,7 +4973,7 @@ class TimepickerComponent {
         const dropdown = this.dropdownRef?.nativeElement;
         if (!dropdown)
             return;
-        if (dropdown.parentElement === document.body) {
+        if (dropdown.parentElement === this.document.body) {
             const wrapper = this.elementRef.nativeElement.querySelector('.ui-timepicker-wrapper');
             if (wrapper) {
                 wrapper.appendChild(dropdown);
@@ -5066,6 +5089,7 @@ class DatetimepickerComponent {
     selectedSecond = signal(0, ...(ngDevMode ? [{ debugName: "selectedSecond" }] : []));
     selectedPeriod = signal('AM', ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : []));
     elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
     positionCleanup = null;
     static nextId = 0;
     generatedId = `ui-datetimepicker-${++DatetimepickerComponent.nextId}`;
@@ -5274,8 +5298,8 @@ class DatetimepickerComponent {
     }, ...(ngDevMode ? [{ debugName: "canNavigateNext" }] : []));
     ngOnDestroy() {
         const dropdown = this.dropdownRef?.nativeElement;
-        if (dropdown?.parentElement === document.body) {
-            document.body.removeChild(dropdown);
+        if (dropdown?.parentElement === this.document.body) {
+            this.document.body.removeChild(dropdown);
         }
         this.removePositionListeners();
     }
@@ -5621,7 +5645,7 @@ class DatetimepickerComponent {
         if (!dropdown)
             return;
         dropdown.style.display = 'block';
-        document.body.appendChild(dropdown);
+        this.document.body.appendChild(dropdown);
         this.updateDropdownPosition();
         this.addPositionListeners();
     }
@@ -5629,7 +5653,7 @@ class DatetimepickerComponent {
         const dropdown = this.dropdownRef?.nativeElement;
         if (!dropdown)
             return;
-        if (dropdown.parentElement === document.body) {
+        if (dropdown.parentElement === this.document.body) {
             const wrapper = this.elementRef.nativeElement.querySelector('.ui-datetimepicker-wrapper');
             if (wrapper) {
                 wrapper.appendChild(dropdown);
@@ -6267,6 +6291,8 @@ class TemplateInputComponent {
     inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
     popoverRef;
     hostRef = inject(ElementRef);
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
     positionCleanup = null;
     currentSpanRect = null;
     isPortaled = false;
@@ -6461,7 +6487,9 @@ class TemplateInputComponent {
   `;
     injectStyles() {
         const styleId = 'ui-tmpl-styles';
-        let existing = document.getElementById(styleId);
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        let existing = this.document.getElementById(styleId);
         // Always replace to handle HMR / version upgrades
         if (existing) {
             existing.textContent = TemplateInputComponent.STYLE_CONTENT;
@@ -6470,11 +6498,11 @@ class TemplateInputComponent {
         const style = this.renderer.createElement('style');
         this.renderer.setProperty(style, 'id', styleId);
         this.renderer.setProperty(style, 'textContent', TemplateInputComponent.STYLE_CONTENT);
-        this.renderer.appendChild(document.head, style);
+        this.renderer.appendChild(this.document.head, style);
     }
     portalPopover() {
         const el = this.popoverRef.nativeElement;
-        document.body.appendChild(el);
+        this.document.body.appendChild(el);
         el.style.display = 'block';
         this.isPortaled = true;
         requestAnimationFrame(() => this.updatePopoverPosition());