From 25e83cc1a0208c02c3bfd65e73b5f5163c2127c5 Mon Sep 17 00:00:00 2001 From: splincode Date: Wed, 31 Jan 2024 15:15:12 +0300 Subject: [PATCH] feat(cdk): scroll controls should be visible only inside tui-root area --- projects/cdk/components/dialog-host/dialog-host.component.ts | 2 +- .../components/scroll-controls/scroll-controls.style.less | 5 +++++ projects/core/components/root/root.component.ts | 5 ++++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/projects/cdk/components/dialog-host/dialog-host.component.ts b/projects/cdk/components/dialog-host/dialog-host.component.ts index bc949a49b076..9952c4bc593d 100644 --- a/projects/cdk/components/dialog-host/dialog-host.component.ts +++ b/projects/cdk/components/dialog-host/dialog-host.component.ts @@ -83,7 +83,7 @@ export class TuiDialogHostComponent> this.dialogs = dialogs; this.cdr.markForCheck(); - this.doc.documentElement.classList.toggle( + this.doc.defaultView?.document.documentElement.classList.toggle( 't-overscroll-none', !!dialogs.length, ); diff --git a/projects/cdk/components/scroll-controls/scroll-controls.style.less b/projects/cdk/components/scroll-controls/scroll-controls.style.less index 6d6fcc71ebb7..576ff7ebc95d 100644 --- a/projects/cdk/components/scroll-controls/scroll-controls.style.less +++ b/projects/cdk/components/scroll-controls/scroll-controls.style.less @@ -7,6 +7,7 @@ top: 0; left: 0; z-index: 1; + display: none; min-width: calc(100% - 1px); min-height: calc(100% - 1px); max-width: calc(100% - 1px); @@ -14,6 +15,10 @@ float: left; margin-inline-end: calc(-100% + 1px); pointer-events: none; + + &:host-context([data-tui-theme]) { + display: block; + } } .t-bar { diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts index be478efef9aa..61bece336960 100644 --- a/projects/core/components/root/root.component.ts +++ b/projects/core/components/root/root.component.ts @@ -62,6 +62,9 @@ export class TuiRootComponent { @Inject(DOCUMENT) document: Document, @Inject(TUI_THEME) theme: string, ) { - document.documentElement.setAttribute('data-tui-theme', theme.toLowerCase()); + document.defaultView?.document.documentElement.setAttribute( + 'data-tui-theme', + theme.toLowerCase(), + ); } }