From af8ced38cd01b121ed4b3a2d60d0d4546275b867 Mon Sep 17 00:00:00 2001 From: Andrei Date: Tue, 7 May 2024 15:58:15 +0200 Subject: [PATCH 1/4] substitute document and window objects --- .../app/components/viewer/viewer.component.ts | 6 ++- .../cps-autocomplete.component.ts | 6 ++- .../cps-button-toggle.component.ts | 8 ++-- .../components/cps-menu/cps-menu.component.ts | 11 +++-- .../cps-table/cps-table.component.ts | 10 ++-- .../cps-tree-autocomplete.component.ts | 6 ++- .../cps-tree-table.component.ts | 24 ++++++---- .../cps-tree-table-row-toggler.directive.ts | 5 +- .../cps-tooltip/cps-tooltip.directive.ts | 46 +++++++++++-------- 9 files changed, 78 insertions(+), 44 deletions(-) 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/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-menu/cps-menu.component.ts b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts index 81375fa0..5968bf68 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) => { @@ -457,14 +460,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 +475,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-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-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) {} + private window: Window; + + constructor( + private _elementRef: ElementRef, + @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 }; } } From 55ef25ffd66410908c04cc01def72751ea577445 Mon Sep 17 00:00:00 2001 From: Andrei Date: Tue, 7 May 2024 18:49:14 +0200 Subject: [PATCH 2/4] pass document to colors utils --- .../colors-page/colors-page.component.ts | 11 +++-- .../cps-button/cps-button.component.ts | 12 +++-- .../cps-checkbox/cps-checkbox.component.ts | 6 ++- .../cps-divider/cps-divider.component.ts | 14 +++++- .../cps-expansion-panel.component.ts | 8 ++-- .../components/cps-icon/cps-icon.component.ts | 9 ++-- .../cps-loader/cps-loader.component.ts | 9 ++-- .../cps-paginator/cps-paginator.component.ts | 8 +++- .../cps-progress-circular.component.ts | 9 ++-- .../cps-progress-linear.component.ts | 11 +++-- .../cps-tab-group/cps-tab-group.component.ts | 15 ++++-- .../components/cps-tag/cps-tag.component.ts | 10 ++-- .../cps-ui-kit/src/lib/utils/colors-utils.ts | 48 ++++++++++--------- 13 files changed, 112 insertions(+), 58 deletions(-) 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-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 ) { 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('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-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-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-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/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 => { From 92256ac64b779db688719088ed533ecb74020cd3 Mon Sep 17 00:00:00 2001 From: Andrei Date: Tue, 7 May 2024 19:07:45 +0200 Subject: [PATCH 3/4] fix warnings --- .../pages/button-toggle-page/button-toggle-page.component.ts | 5 +---- .../src/lib/components/cps-input/cps-input.component.html | 1 + 2 files changed, 2 insertions(+), 4 deletions(-) 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/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" From c382538e2412fc43f6aac0c5a25f723b206c936e Mon Sep 17 00:00:00 2001 From: Andrei Date: Tue, 7 May 2024 19:15:14 +0200 Subject: [PATCH 4/4] more to prev --- .../src/lib/components/cps-menu/cps-menu.component.html | 2 +- .../src/lib/components/cps-menu/cps-menu.component.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) 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)"> -
+
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 5968bf68..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 @@ -369,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 &&