feat(cdk): scroll controls should be visible only inside tui-root area (

#6624)
taiga-family · Jan 31, 2024 · ad35cdb · ad35cdb
1 parent 1237ede
commit ad35cdb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/projects/cdk/components/dialog-host/dialog-host.component.ts b/projects/cdk/components/dialog-host/dialog-host.component.ts
@@ -84,7 +84,7 @@ export class TuiDialogHostComponent<T extends TuiDialog<unknown, unknown>>
                 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
@@ -7,13 +7,18 @@
     top: 0;
     left: 0;
     z-index: 1;
+    display: none;
     min-width: calc(100% - 1px);
     min-height: calc(100% - 1px);
     max-width: calc(100% - 1px);
     max-height: calc(100% - 1px);
     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
@@ -61,9 +61,12 @@ export class TuiRootComponent {
         @Inject(TuiBreakpointService) private readonly breakpoint: TuiBreakpointService,
         @Inject(TUI_IS_IOS) readonly isIOS: boolean,
         @Inject(TUI_IS_ANDROID) readonly isAndroid: boolean,
-        @Inject(DOCUMENT) {body}: Document,
+        @Inject(DOCUMENT) document: Document,
         @Inject(TUI_THEME) theme: string,
     ) {
-        body.setAttribute('data-tui-theme', theme.toLowerCase());
+        document.defaultView?.document.body.setAttribute(
+            'data-tui-theme',
+            theme.toLowerCase(),
+        );
     }
 }