From d8dc2b1310a98a3693d5744311ec4993ea91b40e Mon Sep 17 00:00:00 2001 From: splincode Date: Wed, 2 Oct 2024 21:42:23 +0300 Subject: [PATCH] feat(cdk): add `tuiInjectDocElement` --- .../mobile-calendar/mobile-calendar.component.ts | 7 ++++--- projects/cdk/services/theme-color.service.ts | 7 +++---- projects/cdk/utils/dom/index.ts | 1 + projects/cdk/utils/dom/inject-document-element.ts | 6 ++++++ projects/core/components/root/root.component.ts | 5 +++-- projects/core/tokens/scroll-ref.ts | 6 +++--- projects/demo/src/modules/app/search/index.ts | 4 ++-- 7 files changed, 22 insertions(+), 14 deletions(-) create mode 100644 projects/cdk/utils/dom/inject-document-element.ts diff --git a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts index 07fa0ac72d18..a758e0d8b0f6 100644 --- a/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts +++ b/projects/addon-mobile/components/mobile-calendar/mobile-calendar.component.ts @@ -3,7 +3,7 @@ import { CdkVirtualForOf, CdkVirtualScrollViewport, } from '@angular/cdk/scrolling'; -import {AsyncPipe, DOCUMENT, NgForOf, NgIf} from '@angular/common'; +import {AsyncPipe, NgForOf, NgIf} from '@angular/common'; import type {AfterViewInit} from '@angular/core'; import { ChangeDetectionStrategy, @@ -36,6 +36,7 @@ import { import {TuiMapperPipe} from '@taiga-ui/cdk/pipes/mapper'; import {TUI_IS_E2E, TUI_IS_IOS} from '@taiga-ui/cdk/tokens'; import type {TuiBooleanHandler, TuiMapper} from '@taiga-ui/cdk/types'; +import {tuiInjectDocElement} from '@taiga-ui/cdk/utils/dom'; import {TuiButton} from '@taiga-ui/core/components/button'; import {TuiLink} from '@taiga-ui/core/components/link'; import {TuiMonthPipe} from '@taiga-ui/core/pipes/month'; @@ -126,7 +127,7 @@ export class TuiMobileCalendar implements AfterViewInit { private activeYear = 0; private activeMonth = 0; private readonly destroyRef = inject(DestroyRef); - private readonly doc = inject(DOCUMENT); + private readonly documentElement = tuiInjectDocElement(); private readonly speed = inject(TUI_ANIMATIONS_SPEED); private readonly ngZone = inject(NgZone); @@ -222,7 +223,7 @@ export class TuiMobileCalendar implements AfterViewInit { } protected get yearWidth(): number { - return this.doc.documentElement.clientWidth / YEARS_IN_ROW; + return this.documentElement.clientWidth / YEARS_IN_ROW; } protected onClose(): void { diff --git a/projects/cdk/services/theme-color.service.ts b/projects/cdk/services/theme-color.service.ts index dd4e31b90699..0e7f9d0386ba 100644 --- a/projects/cdk/services/theme-color.service.ts +++ b/projects/cdk/services/theme-color.service.ts @@ -1,7 +1,6 @@ -import {DOCUMENT} from '@angular/common'; import {inject, Injectable} from '@angular/core'; import {Meta} from '@angular/platform-browser'; -import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk/utils'; +import {tuiCreateTokenFromFactory, tuiInjectDocElement} from '@taiga-ui/cdk/utils'; export const TUI_THEME_COLOR = tuiCreateTokenFromFactory( () => inject(Meta).getTag('name="theme-color"')?.content ?? '', @@ -16,8 +15,8 @@ interface TuiThemeColor { providedIn: 'root', }) export class TuiThemeColorService implements TuiThemeColor { + private readonly documentElement = tuiInjectDocElement(); private readonly current = inject(TUI_THEME_COLOR); - private readonly doc = inject(DOCUMENT); private readonly meta = inject(Meta); public get color(): string { @@ -26,6 +25,6 @@ export class TuiThemeColorService implements TuiThemeColor { public set color(content: string) { this.meta.updateTag({name: 'theme-color', content}); - this.doc.documentElement.style.setProperty('--tui-theme-color', content); + this.documentElement.style.setProperty('--tui-theme-color', content); } } diff --git a/projects/cdk/utils/dom/index.ts b/projects/cdk/utils/dom/index.ts index b995cbc1f289..b08533c5d820 100644 --- a/projects/cdk/utils/dom/index.ts +++ b/projects/cdk/utils/dom/index.ts @@ -8,6 +8,7 @@ export * from './get-element-obscurers'; export * from './get-element-offset'; export * from './get-element-point'; export * from './get-selected-text'; +export * from './inject-document-element'; export * from './inject-element'; export * from './is-current-target'; export * from './is-element-editable'; diff --git a/projects/cdk/utils/dom/inject-document-element.ts b/projects/cdk/utils/dom/inject-document-element.ts new file mode 100644 index 000000000000..bf8375f604f3 --- /dev/null +++ b/projects/cdk/utils/dom/inject-document-element.ts @@ -0,0 +1,6 @@ +import {DOCUMENT} from '@angular/common'; +import {inject} from '@angular/core'; + +export function tuiInjectDocElement(): HTMLElement { + return inject(DOCUMENT).documentElement; +} diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts index 11842bfef28c..7444cac91f9a 100644 --- a/projects/core/components/root/root.component.ts +++ b/projects/core/components/root/root.component.ts @@ -1,5 +1,5 @@ /// -import {DOCUMENT, NgIf} from '@angular/common'; +import {NgIf} from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -14,6 +14,7 @@ import {TUI_VERSION} from '@taiga-ui/cdk/constants'; import {TuiPlatform} from '@taiga-ui/cdk/directives/platform'; import {tuiWatch, tuiZonefreeScheduler} from '@taiga-ui/cdk/observables'; import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens'; +import {tuiInjectDocElement} from '@taiga-ui/cdk/utils/dom'; import {TuiAlerts} from '@taiga-ui/core/components/alert'; import {TUI_DIALOGS, TuiDialogs} from '@taiga-ui/core/components/dialog'; import {TuiScrollControls} from '@taiga-ui/core/components/scrollbar'; @@ -68,7 +69,7 @@ export class TuiRoot { ); constructor() { - inject(DOCUMENT).defaultView?.document.documentElement.setAttribute( + tuiInjectDocElement().setAttribute( 'data-tui-theme', inject(TUI_THEME).toLowerCase(), ); diff --git a/projects/core/tokens/scroll-ref.ts b/projects/core/tokens/scroll-ref.ts index 1d59c20c103c..134305f25f19 100644 --- a/projects/core/tokens/scroll-ref.ts +++ b/projects/core/tokens/scroll-ref.ts @@ -1,7 +1,7 @@ -import {DOCUMENT} from '@angular/common'; -import {ElementRef, inject} from '@angular/core'; +import {ElementRef} from '@angular/core'; +import {tuiInjectDocElement} from '@taiga-ui/cdk/utils/dom'; import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk/utils/miscellaneous'; export const TUI_SCROLL_REF = tuiCreateTokenFromFactory( - () => new ElementRef(inject(DOCUMENT).documentElement), + () => new ElementRef(tuiInjectDocElement()), ); diff --git a/projects/demo/src/modules/app/search/index.ts b/projects/demo/src/modules/app/search/index.ts index b4ac0c765beb..7193157562e1 100644 --- a/projects/demo/src/modules/app/search/index.ts +++ b/projects/demo/src/modules/app/search/index.ts @@ -1,4 +1,3 @@ -import {DOCUMENT} from '@angular/common'; import { afterNextRender, ChangeDetectionStrategy, @@ -7,6 +6,7 @@ import { inject, ViewEncapsulation, } from '@angular/core'; +import {tuiInjectDocElement} from '@taiga-ui/cdk'; import {TUI_DARK_MODE} from '@taiga-ui/core'; import {SEARCH_CONFIG} from './env'; @@ -47,7 +47,7 @@ export class TuiAlgoliaSearch { } private setSearchDocDarkMode(): void { - const documentElement = inject(DOCUMENT).defaultView?.document.documentElement; + const documentElement = tuiInjectDocElement(); const darkMode = inject(TUI_DARK_MODE); effect(() => {