@m1z23r/ngx-ui 1.1.37 → 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)
@@ -1432,6 +1440,7 @@ class SelectComponent {
     asyncSearchAbortController = null;
     debounceTimer = null;
     elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
     positionCleanup = null;
     initializedOptions = new WeakSet();
     constructor() {
@@ -1496,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();
@@ -2011,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();
     }
@@ -2019,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);
@@ -2159,6 +2168,7 @@ class DropdownComponent {
     triggerRef;
     menuRef;
     elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
     positionCleanup = null;
     contextMenuPosition = null;
     trigger = contentChild(DropdownTriggerDirective, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
@@ -2194,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();
     }
@@ -2296,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();
     }
@@ -2304,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);
@@ -2684,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" }] : []));
@@ -2748,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() {
@@ -2787,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);
@@ -2856,7 +2868,7 @@ class TooltipDirective {
         margin-top: -4px;
       }
     `);
-        this.renderer.appendChild(document.head, style);
+        this.renderer.appendChild(this.document.head, style);
     }
     ngOnDestroy() {
         this.hide();
@@ -4032,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}`;
@@ -4289,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();
     }
@@ -4606,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();
     }
@@ -4614,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);
@@ -4723,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}`;
@@ -4788,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();
     }
@@ -4951,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();
     }
@@ -4959,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);
@@ -5075,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}`;
@@ -5283,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();
     }
@@ -5630,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();
     }
@@ -5638,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);
@@ -6276,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;
@@ -6470,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;
@@ -6479,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());