#380 Use document DI token

projects/composition/src/app/components/viewer/viewer.component.ts

@@ -1,13 +1,15 @@
 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: ''
 })
 export abstract class ViewerComponent implements OnInit, AfterViewInit {
   private _route = inject(ActivatedRoute);
   private _router = inject(Router);
+  private _document = inject(DOCUMENT);
   protected selectedTabIndex = 0;
 
   ngOnInit(): void {
@@ -31,7 +33,7 @@
   }
 
   ngAfterViewInit(): void {
     this._router.events.subscribe((event: any) => {
       if (event instanceof Scroll && event.anchor) {
         setTimeout(() => {
           this._scroll('#' + event.anchor);
@@ -41,9 +43,9 @@
   }
 
   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');

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';

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];

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
     );
   }
 

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

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();
   }
 

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

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)}`
       : '';
   }
 }

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);
   }

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();
   }
 

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"

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);
   }
 }

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>

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,26 +459,26 @@ 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)
           };
         case 'tr':
           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':