diff --git a/projects/composition/src/app/components/viewer/viewer.component.ts b/projects/composition/src/app/components/viewer/viewer.component.ts
index 2eecf7b4..28df4964 100644
--- a/projects/composition/src/app/components/viewer/viewer.component.ts
+++ b/projects/composition/src/app/components/viewer/viewer.component.ts
@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, Router, Scroll } from '@angular/router';
 import { CpsTabChangeEvent } from 'cps-ui-kit';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
   template: ''
@@ -8,6 +9,7 @@ import { CpsTabChangeEvent } from 'cps-ui-kit';
 export abstract class ViewerComponent implements OnInit, AfterViewInit {
   private _route = inject(ActivatedRoute);
   private _router = inject(Router);
+  private _document = inject(DOCUMENT);
   protected selectedTabIndex = 0;
 
   ngOnInit(): void {
@@ -41,9 +43,9 @@ export abstract class ViewerComponent implements OnInit, AfterViewInit {
   }
 
   private _scroll(query: string) {
-    const targetElement = document.querySelector(query);
+    const targetElement = this._document.querySelector(query);
     if (!targetElement) {
-      window.scrollTo(0, 0);
+      (this._document.defaultView as Window).scrollTo(0, 0);
     } else {
       targetElement.scrollIntoView();
       targetElement.classList.add('anchor-highlight');
diff --git a/projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.ts b/projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.ts
index 7356075d..af5e441a 100644
--- a/projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.ts
+++ b/projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.ts
@@ -1,9 +1,6 @@
 import { Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {
-  CpsButtonToggleComponent,
-  CpsButtonToggleOption
-} from 'projects/cps-ui-kit/src/public-api';
+import { CpsButtonToggleComponent, CpsButtonToggleOption } from 'cps-ui-kit';
 
 import ComponentData from '../../api-data/cps-button-toggle.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
diff --git a/projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts b/projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts
index 84b4a17c..fc019719 100644
--- a/projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts
+++ b/projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
 import {
   CpsInputComponent,
   CpsNotificationPosition,
@@ -51,10 +51,13 @@ export class ColorsPageComponent implements OnInit {
   colorNameColor: { [key: string]: string } = {};
 
   // eslint-disable-next-line no-useless-constructor
-  constructor(private _notificationService: CpsNotificationService) {}
+  constructor(
+    private _notificationService: CpsNotificationService,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
 
   ngOnInit(): void {
-    const customColors = getCpsColors();
+    const customColors = getCpsColors(this.document);
     customColors.forEach((clr) => {
       const name = clr[0].replace(/^--cps-color-/, '');
       const value = clr[1];
diff --git a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
index 6191b594..60f752e6 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.ts
@@ -1,10 +1,11 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -412,6 +413,7 @@ export class CpsAutocompleteComponent
 
   constructor(
     @Self() @Optional() private _control: NgControl,
+    @Inject(DOCUMENT) private document: Document,
     private cdRef: ChangeDetectorRef,
     private _labelByValue: LabelByValuePipe
   ) {
@@ -658,7 +660,7 @@ export class CpsAutocompleteComponent
   isActive() {
     return (
       this.isOpened ||
-      document.activeElement === this.autocompleteInput?.nativeElement
+      this.document.activeElement === this.autocompleteInput?.nativeElement
     );
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts
index 77527776..97bdfc87 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.ts
@@ -1,7 +1,8 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   Component,
   EventEmitter,
+  Inject,
   Input,
   OnInit,
   Optional,
@@ -148,6 +149,7 @@ export class CpsButtonToggleComponent implements ControlValueAccessor, OnInit {
 
   constructor(
     @Self() @Optional() private _control: NgControl,
+    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2
   ) {
     if (this._control) {
@@ -233,7 +235,7 @@ export class CpsButtonToggleComponent implements ControlValueAccessor, OnInit {
       '"Source Sans Pro", sans-serif'
     );
 
-    this.renderer.appendChild(document.body, hiddenSpan);
+    this.renderer.appendChild(this.document.body, hiddenSpan);
 
     this.largestButtonWidth = 0;
     this.options.forEach((opt) => {
@@ -252,7 +254,7 @@ export class CpsButtonToggleComponent implements ControlValueAccessor, OnInit {
       this.renderer.removeChild(hiddenSpan, text);
     });
 
-    this.renderer.removeChild(document.body, hiddenSpan);
+    this.renderer.removeChild(this.document.body, hiddenSpan);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
diff --git a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
index 987ea553..37c4552e 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.ts
@@ -1,8 +1,9 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   Component,
   EventEmitter,
   HostBinding,
+  Inject,
   Input,
   OnChanges,
   Output
@@ -115,11 +116,16 @@ export class CpsButtonComponent implements OnChanges {
 
   classesList: string[] = [];
 
+  // eslint-disable-next-line no-useless-constructor
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
   ngOnChanges(): void {
-    this.buttonColor = getCSSColor(this.color);
+    this.buttonColor = getCSSColor(this.color, this.document);
     this.borderRadius = convertSize(this.borderRadius);
     this.textColor =
-      this.type === 'solid' ? getCSSColor(this.contentColor) : this.buttonColor;
+      this.type === 'solid'
+        ? getCSSColor(this.contentColor, this.document)
+        : this.buttonColor;
     this.setClasses();
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts
index 0f9802dc..36c35e0c 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-checkbox/cps-checkbox.component.ts
@@ -1,8 +1,9 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   OnInit,
   Optional,
@@ -106,6 +107,7 @@ export class CpsCheckboxComponent implements OnInit, ControlValueAccessor {
 
   constructor(
     @Self() @Optional() private _control: NgControl,
+    @Inject(DOCUMENT) private document: Document,
     private _elementRef: ElementRef<HTMLElement>
   ) {
     if (this._control) {
@@ -114,7 +116,7 @@ export class CpsCheckboxComponent implements OnInit, ControlValueAccessor {
   }
 
   ngOnInit(): void {
-    this.iconColor = getCSSColor(this.iconColor);
+    this.iconColor = getCSSColor(this.iconColor, this.document);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
diff --git a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts
index 06f39083..5901f5e8 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-divider/cps-divider.component.ts
@@ -1,6 +1,13 @@
-import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+import {
+  Component,
+  Inject,
+  ViewEncapsulation,
+  computed,
+  input
+} from '@angular/core';
 import { getCSSColor } from '../../utils/colors-utils';
 import { convertSize } from '../../utils/internal/size-utils';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * CpsDividerType is used to define the type of the divider.
@@ -49,6 +56,9 @@ export class CpsDividerComponent {
    */
   thickness = input<number | string>('1px');
 
+  // eslint-disable-next-line no-useless-constructor
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
   private _borderTop = computed(() => {
     return this._constructBorder(!this.vertical());
   });
@@ -59,7 +69,7 @@ export class CpsDividerComponent {
 
   private _constructBorder(isVertical: boolean) {
     return isVertical
-      ? `${convertSize(this.thickness())} ${this.type()} ${getCSSColor(this.color())}`
+      ? `${convertSize(this.thickness())} ${this.type()} ${getCSSColor(this.color(), this.document)}`
       : '';
   }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.ts b/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.ts
index 0c62b5b8..146a144b 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.ts
@@ -1,9 +1,10 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   OnInit,
   Output,
@@ -139,6 +140,7 @@ export class CpsExpansionPanelComponent implements OnInit, AfterViewInit {
 
   constructor(
     private _animationBuilder: AnimationBuilder,
+    @Inject(DOCUMENT) private document: Document,
     private _renderer: Renderer2
   ) {
     this._contentCollapseAnimation = this._animationBuilder.build([
@@ -167,8 +169,8 @@ export class CpsExpansionPanelComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit(): void {
-    this.borderColor = getCSSColor(this.borderColor);
-    this.backgroundColor = getCSSColor(this.backgroundColor);
+    this.borderColor = getCSSColor(this.borderColor, this.document);
+    this.backgroundColor = getCSSColor(this.backgroundColor, this.document);
     this.borderRadius = convertSize(this.borderRadius);
     this.width = convertSize(this.width);
   }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts
index 736f74b1..db398c77 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnChanges } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, Inject, Input, OnChanges } from '@angular/core';
 import { convertSize } from '../../utils/internal/size-utils';
 import { getCSSColor } from '../../utils/colors-utils';
 
@@ -178,8 +178,11 @@ export class CpsIconComponent implements OnChanges {
 
   classesList: string[] = ['cps-icon'];
 
+  // eslint-disable-next-line no-useless-constructor
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
   ngOnChanges(): void {
-    this.iconColor = getCSSColor(this.color);
+    this.iconColor = getCSSColor(this.color, this.document);
     this.setClasses();
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html b/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html
index 5441883a..8d345e0d 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.html
@@ -30,6 +30,7 @@
       *ngIf="!valueToDisplay"
       spellcheck="false"
       [type]="currentType"
+      autocomplete="off"
       [value]="value"
       (input)="updateValueEvent($event)"
       [placeholder]="placeholder"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.ts b/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.ts
index 0571f800..ee1b0cce 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { getCSSColor } from '../../utils/colors-utils';
 
 /**
@@ -40,8 +40,11 @@ export class CpsLoaderComponent implements OnInit {
 
   backgroundColor = 'rgba(0, 0, 0, 0.1)';
 
+  // eslint-disable-next-line no-useless-constructor
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
   ngOnInit(): void {
     this.backgroundColor = `rgba(0, 0, 0, ${this.opacity})`;
-    this.labelColor = getCSSColor(this.labelColor);
+    this.labelColor = getCSSColor(this.labelColor, this.document);
   }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.html b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.html
index 942e59cc..af1cda9a 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.html
+++ b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.html
@@ -13,7 +13,7 @@
   }"
   (@animation.start)="onAnimationStart($event)"
   (@animation.done)="onAnimationEnd($event)">
-  <div (mousedown)="onContentClick()" (touchstart)="onContentClick()">
+  <div (mousedown)="onContentClick()">
     <ng-container *ngIf="items.length < 1">
       <ng-content></ng-content>
     </ng-container>
diff --git a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts
index 81375fa0..fc15e672 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts
@@ -228,6 +228,8 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
 
   hideReason: CpsMenuHideReason | undefined;
 
+  private window: Window;
+
   // eslint-disable-next-line no-useless-constructor
   constructor(
     @Inject(DOCUMENT) private document: Document,
@@ -239,6 +241,7 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
     public config: PrimeNGConfig,
     public overlayService: OverlayService
   ) {
+    this.window = this.document.defaultView as Window;
     this.resizeObserver = new ResizeObserver((entries) => {
       if (this.target) {
         entries.forEach((entry) => {
@@ -366,14 +369,13 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
     if (isPlatformBrowser(this.platformId)) {
       if (!this.documentClickListener && this.dismissable) {
         this.zone.runOutsideAngular(() => {
-          const documentEvent = DomHandler.isIOS() ? 'touchstart' : 'mousedown';
           const documentTarget: any = this.el
             ? this.el.nativeElement.ownerDocument
             : this.document;
 
           this.documentClickListener = this.renderer.listen(
             documentTarget,
-            documentEvent,
+            'mousedown',
             (event) => {
               if (
                 !this.persistent &&
@@ -457,14 +459,14 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
             ),
             left: Math.min(
               targetOffset.left + target.offsetWidth,
-              window.innerWidth - element.offsetWidth
+              this.window.innerWidth - element.offsetWidth
             )
           };
         case 'tl':
           return {
             top: Math.min(
               targetOffset.top,
-              window.innerHeight - element.offsetHeight
+              this.window.innerHeight - element.offsetHeight
             ),
             left: Math.max(0, targetOffset.left - element.offsetWidth)
           };
@@ -472,11 +474,11 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy, OnChanges {
           return {
             top: Math.min(
               targetOffset.top,
-              window.innerHeight - element.offsetHeight
+              this.window.innerHeight - element.offsetHeight
             ),
             left: Math.min(
               targetOffset.left + target.offsetWidth,
-              window.innerWidth - element.offsetWidth
+              this.window.innerWidth - element.offsetWidth
             )
           };
         case 'default':
diff --git a/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.ts b/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.ts
index 7497c619..06592dbb 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-paginator/cps-paginator.component.ts
@@ -1,12 +1,13 @@
 import {
   Component,
   EventEmitter,
+  Inject,
   Input,
   OnInit,
   Output,
   ViewChild
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { Paginator, PaginatorModule } from 'primeng/paginator';
 import { CpsSelectComponent } from '../cps-select/cps-select.component';
 import { getCSSColor } from '../../utils/colors-utils';
@@ -77,8 +78,11 @@ export class CpsPaginatorComponent implements OnInit {
 
   rowOptions: { label: string; value: number }[] = [];
 
+  // eslint-disable-next-line no-useless-constructor
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
   ngOnInit(): void {
-    this.backgroundColor = getCSSColor(this.backgroundColor);
+    this.backgroundColor = getCSSColor(this.backgroundColor, this.document);
     if (this.rowsPerPageOptions.length < 1)
       this.rowsPerPageOptions = [5, 10, 25, 50];
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.ts
index db07977c..765acf13 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { convertSize } from '../../utils/internal/size-utils';
 import { getCSSColor } from '../../utils/colors-utils';
 
@@ -33,10 +33,13 @@ export class CpsProgressCircularComponent implements OnInit {
    */
   @Input() color = 'calm';
 
+  // eslint-disable-next-line no-useless-constructor
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
   ngOnInit(): void {
     this.diameter = convertSize(this.diameter);
     this.strokeWidth = convertSize(this.strokeWidth);
 
-    this.color = getCSSColor(this.color);
+    this.color = getCSSColor(this.color, this.document);
   }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
index e3386f91..19169641 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-progress-linear/cps-progress-linear.component.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { convertSize } from '../../utils/internal/size-utils';
 import { getCSSColor } from '../../utils/colors-utils';
 
@@ -51,12 +51,15 @@ export class CpsProgressLinearComponent implements OnInit {
    */
   @Input() radius: number | string = 0;
 
+  // eslint-disable-next-line no-useless-constructor
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
   ngOnInit(): void {
     this.width = convertSize(this.width);
     this.height = convertSize(this.height);
     this.radius = convertSize(this.radius);
 
-    this.color = getCSSColor(this.color);
-    this.bgColor = getCSSColor(this.bgColor);
+    this.color = getCSSColor(this.color, this.document);
+    this.bgColor = getCSSColor(this.bgColor, this.document);
   }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts
index 57e1c408..5c5cf6ef 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-tab-group/cps-tab-group.component.ts
@@ -5,7 +5,7 @@ import {
   transition,
   trigger
 } from '@angular/animations';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   AfterContentInit,
   AfterViewInit,
@@ -14,6 +14,7 @@ import {
   ContentChildren,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   OnChanges,
   OnDestroy,
@@ -200,11 +201,17 @@ export class CpsTabGroupComponent
   private _previousTabIndex = 0;
 
   // eslint-disable-next-line no-useless-constructor
-  constructor(private cdRef: ChangeDetectorRef) {}
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
 
   ngOnInit(): void {
-    this.tabsBackground = getCSSColor(this.tabsBackground);
-    this.navButtonsBackground = getCSSColor(this.navButtonsBackground);
+    this.tabsBackground = getCSSColor(this.tabsBackground, this.document);
+    this.navButtonsBackground = getCSSColor(
+      this.navButtonsBackground,
+      this.document
+    );
 
     this.windowResize$ = fromEvent(window, 'resize')
       .pipe(debounceTime(50), distinctUntilChanged())
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts
index 031c8c66..d4050899 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts
@@ -5,6 +5,7 @@ import {
   Component,
   ContentChild,
   EventEmitter,
+  Inject,
   Input,
   OnChanges,
   OnInit,
@@ -13,7 +14,7 @@ import {
   TemplateRef,
   ViewChild
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Table, TableService, TableModule } from 'primeng/table';
 import { SortEvent } from 'primeng/api';
@@ -657,7 +658,10 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
   ];
 
   // eslint-disable-next-line no-useless-constructor
-  constructor(private cdRef: ChangeDetectorRef) {}
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
 
   ngOnInit(): void {
     this.emptyBodyHeight = convertSize(this.emptyBodyHeight);
@@ -964,7 +968,7 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
         type: EXCEL_TYPE
       });
 
-      const downloadLink = document.createElement('a');
+      const downloadLink = this.document.createElement('a');
       downloadLink.href = URL.createObjectURL(blob);
       downloadLink.download = `${this.exportFilename}.xlsx`;
       downloadLink.click();
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.ts
index c96f7009..37878c4a 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-tag/cps-tag.component.ts
@@ -1,7 +1,8 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   Component,
   EventEmitter,
+  Inject,
   Input,
   OnChanges,
   Optional,
@@ -72,14 +73,17 @@ export class CpsTagComponent implements ControlValueAccessor, OnChanges {
 
   private _value = false;
 
-  constructor(@Self() @Optional() private _control: NgControl) {
+  constructor(
+    @Self() @Optional() private _control: NgControl,
+    @Inject(DOCUMENT) private document: Document
+  ) {
     if (this._control) {
       this._control.valueAccessor = this;
     }
   }
 
   ngOnChanges(): void {
-    this.color = getCSSColor(this.color);
+    this.color = getCSSColor(this.color, this.document);
     this.setClasses();
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts
index 47b771f7..5af5b9f7 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.ts
@@ -1,9 +1,10 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
+  Inject,
   Input,
   OnDestroy,
   OnInit,
@@ -84,6 +85,7 @@ export class CpsTreeAutocompleteComponent
 
   constructor(
     @Optional() public override control: NgControl,
+    @Inject(DOCUMENT) private document: Document,
     public override cdRef: ChangeDetectorRef
   ) {
     super(control, cdRef);
@@ -174,7 +176,7 @@ export class CpsTreeAutocompleteComponent
   isActive() {
     return (
       this.isOpened ||
-      document.activeElement === this.treeAutocompleteInput?.nativeElement
+      this.document.activeElement === this.treeAutocompleteInput?.nativeElement
     );
   }
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
index 81f66c12..555420c9 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
@@ -6,6 +6,7 @@ import {
   Component,
   ContentChild,
   EventEmitter,
+  Inject,
   Input,
   NgZone,
   OnChanges,
@@ -18,7 +19,7 @@ import {
   TemplateRef,
   ViewChild
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
   TreeTable,
@@ -657,14 +658,18 @@ export class CpsTreeTableComponent
 
   private _needRecalcAutoLayout = true;
 
-  _data: any[] = [];
+  private _data: any[] = [];
+
+  private window: Window;
 
   // eslint-disable-next-line no-useless-constructor
   constructor(
     private cdRef: ChangeDetectorRef,
+    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
     private ngZone: NgZone
   ) {
+    this.window = this.document.defaultView as Window;
     this._resizeObserver = new ResizeObserver((entries) => {
       entries.forEach((entry) => {
         const body = entry.target;
@@ -706,7 +711,7 @@ export class CpsTreeTableComponent
 
     this.defScrollHeight = this.scrollHeight;
     if (this.virtualScroll) {
-      window.addEventListener('resize', this._onWindowResize.bind(this));
+      this.window.addEventListener('resize', this._onWindowResize.bind(this));
 
       if (this.defScrollHeight && this.defScrollHeight !== 'flex') {
         this._defScrollHeightPx = parseInt(this.scrollHeight, 10);
@@ -850,7 +855,10 @@ export class CpsTreeTableComponent
     this._resizeObserver?.disconnect();
     if (this.virtualScroll) {
       if (this.autoLayout) this._scrollSubscription?.unsubscribe();
-      window.removeEventListener('resize', this._onWindowResize.bind(this));
+      this.window.removeEventListener(
+        'resize',
+        this._onWindowResize.bind(this)
+      );
     }
   }
 
@@ -902,13 +910,13 @@ export class CpsTreeTableComponent
       if (!bodyRows?.length) return;
 
       const tdWidths: number[] = [];
-      const fragment = document.createDocumentFragment();
-      const hiddenDiv = document.createElement('div');
+      const fragment = this.document.createDocumentFragment();
+      const hiddenDiv = this.document.createElement('div');
       hiddenDiv.style.visibility = 'hidden';
       hiddenDiv.style.position = 'absolute';
       hiddenDiv.style.whiteSpace = 'nowrap';
 
-      document.body.appendChild(hiddenDiv);
+      this.document.body.appendChild(hiddenDiv);
       bodyRows.forEach((tr: HTMLElement) => {
         const tds = tr?.querySelectorAll('td');
         tds?.forEach((td: HTMLElement, idx: number) => {
@@ -931,7 +939,7 @@ export class CpsTreeTableComponent
           tdWidths[idx] = Math.max(tdWidths[idx], tdWidth);
         });
       });
-      document.body.removeChild(hiddenDiv);
+      this.document.body.removeChild(hiddenDiv);
 
       if (thWidths.length !== tdWidths.length) return;
 
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-row-toggler.directive.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-row-toggler.directive.ts
index 82af52b7..3e2cfa6c 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-row-toggler.directive.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/directives/cps-tree-table-row-toggler.directive.ts
@@ -1,7 +1,9 @@
+import { DOCUMENT } from '@angular/common';
 import {
   ComponentRef,
   Directive,
   ElementRef,
+  Inject,
   Input,
   OnDestroy,
   OnInit,
@@ -28,6 +30,7 @@ export class CpsTreetableRowTogglerDirective implements OnInit, OnDestroy {
 
   constructor(
     private elementRef: ElementRef,
+    @Inject(DOCUMENT) private document: Document,
     private viewContainerRef: ViewContainerRef
   ) {
     this.togglerCompRef =
@@ -40,7 +43,7 @@ export class CpsTreetableRowTogglerDirective implements OnInit, OnDestroy {
     );
     this.togglerCompRef.setInput('rowNode', this.rowNode);
 
-    const spanElement = document.createElement('span');
+    const spanElement = this.document.createElement('span');
     spanElement.style.display = 'flex';
 
     while (this.elementRef.nativeElement.firstChild) {
diff --git a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts
index 57381fa9..8a71affe 100644
--- a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts
+++ b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts
@@ -2,10 +2,12 @@ import {
   Directive,
   ElementRef,
   HostListener,
+  Inject,
   Input,
   OnDestroy
 } from '@angular/core';
 import { convertSize } from '../../utils/internal/size-utils';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * CpsTooltipPosition is used to define the position of the tooltip.
@@ -86,8 +88,14 @@ export class CpsTooltipDirective implements OnDestroy {
   private _showTimeout?: any;
   private _hideTimeout?: any;
 
-  // eslint-disable-next-line no-useless-constructor
-  constructor(private _elementRef: ElementRef<HTMLElement>) {}
+  private window: Window;
+
+  constructor(
+    private _elementRef: ElementRef<HTMLElement>,
+    @Inject(DOCUMENT) private document: Document
+  ) {
+    this.window = this.document.defaultView as Window;
+  }
 
   ngOnDestroy(): void {
     this._destroyTooltip();
@@ -98,13 +106,13 @@ export class CpsTooltipDirective implements OnDestroy {
 
     if (this.tooltipDisabled) return;
 
-    this._popup = document.createElement('div');
+    this._popup = this.document.createElement('div');
     this._constructElement(this._popup);
 
     if (this.tooltipPersistent)
       this._popup.addEventListener('click', this._destroyTooltip);
 
-    window.addEventListener('scroll', this._destroyTooltip, true);
+    this.window.addEventListener('scroll', this._destroyTooltip, true);
   };
 
   private _destroyTooltip = (event: any = undefined) => {
@@ -113,7 +121,7 @@ export class CpsTooltipDirective implements OnDestroy {
       this._popup = undefined;
     };
 
-    window.removeEventListener('scroll', this._destroyTooltip, true);
+    this.window.removeEventListener('scroll', this._destroyTooltip, true);
     if (!this._popup) return;
 
     this._popup.removeEventListener('click', this._destroyTooltip);
@@ -135,7 +143,7 @@ export class CpsTooltipDirective implements OnDestroy {
   };
 
   private _constructElement(popup: HTMLDivElement) {
-    const popupContent = document.createElement('div');
+    const popupContent = this.document.createElement('div');
     popupContent.innerHTML = this.tooltip || 'Add your text to this tooltip';
     popupContent.classList.add(this.tooltipContentClass);
     popup.appendChild(popupContent);
@@ -143,7 +151,7 @@ export class CpsTooltipDirective implements OnDestroy {
     popup.classList.add('cps-tooltip');
     popup.style.maxWidth = convertSize(this.tooltipMaxWidth);
 
-    document.body.appendChild(popup);
+    this.document.body.appendChild(popup);
     requestAnimationFrame(function () {
       popup.style.opacity = '1';
     });
@@ -159,14 +167,14 @@ export class CpsTooltipDirective implements OnDestroy {
   }
 
   private _getCoords(): { left: number; top: number } | undefined {
-    function isInsideScreen(coords: { left: number; top: number }): boolean {
+    const isInsideScreen = (coords: { left: number; top: number }): boolean => {
       return (
         coords.top >= 0 &&
         coords.left >= 0 &&
-        coords.left + popupRect.width <= window.innerWidth &&
-        coords.top + popupRect.height <= window.innerHeight
+        coords.left + popupRect.width <= this.window.innerWidth &&
+        coords.top + popupRect.height <= this.window.innerHeight
       );
-    }
+    };
 
     let positions: CpsTooltipPosition[] = ['top', 'bottom', 'left', 'right'];
     positions = positions.filter((item) => item !== this.tooltipPosition);
@@ -206,33 +214,33 @@ export class CpsTooltipDirective implements OnDestroy {
         return {
           left:
             targetElRect.left +
-            window.scrollX +
+            this.window.scrollX +
             (targetEl.offsetWidth - popupRect.width) / 2,
-          top: targetElRect.bottom + window.scrollY + 8
+          top: targetElRect.bottom + this.window.scrollY + 8
         };
       case 'left':
         return {
-          left: targetElRect.left - window.scrollX - popupRect.width - 8,
+          left: targetElRect.left - this.window.scrollX - popupRect.width - 8,
           top:
             targetElRect.top +
-            window.scrollY +
+            this.window.scrollY +
             (targetEl.offsetHeight - popupRect.height) / 2
         };
       case 'right':
         return {
-          left: targetElRect.right + window.scrollX + 8,
+          left: targetElRect.right + this.window.scrollX + 8,
           top:
             targetElRect.top +
-            window.scrollY +
+            this.window.scrollY +
             (targetEl.offsetHeight - popupRect.height) / 2
         };
       default:
         return {
           left:
             targetElRect.left +
-            window.scrollX +
+            this.window.scrollX +
             (targetEl.offsetWidth - popupRect.width) / 2,
-          top: targetElRect.top + window.scrollY - popupRect.height - 8
+          top: targetElRect.top + this.window.scrollY - popupRect.height - 8
         };
     }
   }
diff --git a/projects/cps-ui-kit/src/lib/utils/colors-utils.ts b/projects/cps-ui-kit/src/lib/utils/colors-utils.ts
index 06ca63e6..64d9701f 100644
--- a/projects/cps-ui-kit/src/lib/utils/colors-utils.ts
+++ b/projects/cps-ui-kit/src/lib/utils/colors-utils.ts
@@ -1,16 +1,16 @@
-const isSameDomain = (styleSheet: any): boolean => {
+const isSameDomain = (styleSheet: any, _window: Window): boolean => {
   if (!styleSheet.href) {
     return true;
   }
 
-  return styleSheet.href.indexOf(window.location.origin) === 0;
+  return styleSheet.href.indexOf(_window.location.origin) === 0;
 };
 
 const isStyleRule = (rule: any): boolean => rule.type === 1;
 
-const isValidCSSColor = (val: string): boolean => {
+const isValidCSSColor = (val: string, _document: Document): boolean => {
   if (val === 'currentColor') return true;
-  const element = document.createElement('div');
+  const element = _document.createElement('div');
   element.style.backgroundColor = val;
   return element && element.style.backgroundColor !== '';
 };
@@ -42,27 +42,31 @@ const isDark = (color: string): boolean => {
   return hsp <= 127.5;
 };
 
-export const getCpsColors = (): [string, string][] =>
-  [...(document.styleSheets as any)].filter(isSameDomain).reduce(
-    (finalArr, sheet) =>
-      finalArr.concat(
-        [...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
-          const props = [...rule.style]
-            .map((propName) => [
-              propName.trim(),
-              rule.style.getPropertyValue(propName).trim()
-            ])
-            .filter(([propName]) => propName.indexOf('--cps-color') === 0);
+export const getCpsColors = (_document: Document): [string, string][] =>
+  [...(_document.styleSheets as any)]
+    .filter((sheet: any) =>
+      isSameDomain(sheet, _document.defaultView as Window)
+    )
+    .reduce(
+      (finalArr, sheet) =>
+        finalArr.concat(
+          [...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
+            const props = [...rule.style]
+              .map((propName) => [
+                propName.trim(),
+                rule.style.getPropertyValue(propName).trim()
+              ])
+              .filter(([propName]) => propName.indexOf('--cps-color') === 0);
 
-          return [...propValArr, ...props];
-        }, [])
-      ),
-    []
-  );
+            return [...propValArr, ...props];
+          }, [])
+        ),
+      []
+    );
 
-export const getCSSColor = (val: string): string => {
+export const getCSSColor = (val: string, _document: Document): string => {
   if (!val) return '';
-  return isValidCSSColor(val) ? val : `var(--cps-color-${val})`;
+  return isValidCSSColor(val, _document) ? val : `var(--cps-color-${val})`;
 };
 
 export const getTextColor = (backgroundColor: string): string => {