feat(core): Popup add service for arbitrary portal items (#9605)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-mobile/directives/sidebar/sidebar.directive.ts

@@ -1,6 +1,6 @@
 import type {ComponentRef, OnDestroy} from '@angular/core';
 import {Directive, inject, INJECTOR, Input, TemplateRef} from '@angular/core';
-import {TuiDropdownService} from '@taiga-ui/core/directives/dropdown';
+import {TuiPopupService} from '@taiga-ui/core/services';
 import type {TuiHorizontalDirection} from '@taiga-ui/core/types';
 import {PolymorpheusComponent, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
 
@@ -15,7 +15,7 @@ export class TuiSidebarDirective<T = Record<string, unknown>>
     implements OnDestroy
 {
     private readonly injector = inject(INJECTOR);
-    private readonly portalService = inject(TuiDropdownService);
+    private readonly service = inject(TuiPopupService);
 
     private readonly component = new PolymorpheusComponent(
         TuiSidebarComponent,
@@ -50,7 +50,7 @@ export class TuiSidebarDirective<T = Record<string, unknown>>
             return;
         }
 
-        this.sidebarRef = this.portalService.add(this.component);
+        this.sidebarRef = this.service.add(this.component);
         this.sidebarRef.changeDetectorRef.detectChanges();
     }
 
@@ -59,7 +59,7 @@ export class TuiSidebarDirective<T = Record<string, unknown>>
             return;
         }
 
-        this.portalService.remove(this.sidebarRef);
+        this.service.remove(this.sidebarRef);
         this.sidebarRef = null;
     }
 }

projects/core/components/root/root.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
+import {tuiAsPortal, TuiPortals} from '@taiga-ui/cdk/classes';
 import {TUI_VERSION} from '@taiga-ui/cdk/constants';
 import {TuiPlatform} from '@taiga-ui/cdk/directives/platform';
 import {TuiVisualViewport} from '@taiga-ui/cdk/directives/visual-viewport';
@@ -22,7 +23,7 @@ import {
 } from '@taiga-ui/core/components/scrollbar';
 import {TuiDropdowns} from '@taiga-ui/core/directives';
 import {TuiHints} from '@taiga-ui/core/directives/hint';
-import {TuiBreakpointService} from '@taiga-ui/core/services';
+import {TuiBreakpointService, TuiPopupService} from '@taiga-ui/core/services';
 import {TUI_ANIMATIONS_SPEED, TUI_REDUCED_MOTION, TUI_THEME} from '@taiga-ui/core/tokens';
 import {tuiGetDuration} from '@taiga-ui/core/utils';
 import {PreventEventPlugin} from '@taiga-ui/event-plugins';
@@ -38,6 +39,7 @@ import {debounceTime, map} from 'rxjs';
     encapsulation: ViewEncapsulation.None,
     // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
     changeDetection: ChangeDetectionStrategy.Default,
+    viewProviders: [tuiAsPortal(TuiPopupService)],
     hostDirectives: [TuiPlatform, TuiVisualViewport],
     host: {
         'data-tui-version': TUI_VERSION,
@@ -48,7 +50,7 @@ import {debounceTime, map} from 'rxjs';
         '(touchstart.passive.silent)': '0',
     },
 })
-export class TuiRoot {
+export class TuiRoot extends TuiPortals {
     protected readonly reducedMotion = inject(TUI_REDUCED_MOTION);
     protected readonly duration = tuiGetDuration(inject(TUI_ANIMATIONS_SPEED));
 
@@ -74,6 +76,8 @@ export class TuiRoot {
               );
 
     constructor() {
+        super();
+
         inject(DOCUMENT).documentElement.setAttribute(
             'data-tui-theme',
             inject(TUI_THEME).toLowerCase(),

projects/core/components/root/root.style.less

@@ -35,6 +35,7 @@ tui-root {
 tui-root > .t-root-scrollbar {
     .fullsize(fixed, inset);
 
+    z-index: 0;
     display: none;
     margin: 0;
 }

projects/core/components/root/root.template.html

@@ -1,17 +1,15 @@
+<div class="t-root-content"><ng-content /></div>
 <tui-scroll-controls
     *ngIf="scrollbars()"
     class="t-root-scrollbar"
 />
-<tui-dropdowns>
-    <div class="t-root-content">
-        <ng-content />
-    </div>
-    <ng-content select="tuiOverContent" />
-    <tui-dialogs />
-    <ng-content select="tuiOverDialogs" />
-    <tui-alerts />
-    <ng-content select="tuiOverAlerts" />
-</tui-dropdowns>
+<ng-container #viewContainer />
+<ng-content select="tuiOverContent" />
+<tui-dialogs />
+<ng-content select="tuiOverDialogs" />
+<tui-alerts />
+<ng-content select="tuiOverAlerts" />
+<tui-dropdowns />
 <ng-content select="tuiOverDropdowns" />
 <tui-hints />
 <ng-content select="tuiOverHints" />

projects/core/directives/dropdown/dropdowns.component.ts

@@ -9,19 +9,7 @@ import {TuiDropdownService} from './dropdown.service';
 @Component({
     standalone: true,
     selector: 'tui-dropdowns',
-    template: `
-        <ng-content></ng-content>
-        <ng-container #viewContainer></ng-container>
-    `,
-    styles: [
-        `
-            :host {
-                display: block;
-                height: 100%;
-                isolation: isolate;
-            }
-        `,
-    ],
+    template: '<ng-container #viewContainer />',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [tuiAsPortal(TuiDropdownService)],
 })

projects/core/services/index.ts

@@ -1,5 +1,6 @@
 export * from './breakpoint.service';
 export * from './dark-theme.service';
 export * from './format-date.service';
+export * from './popup.service';
 export * from './position.service';
 export * from './visual-viewport.service';

projects/core/services/popup.service.ts

@@ -0,0 +1,7 @@
+import {Injectable} from '@angular/core';
+import {TuiPortalService} from '@taiga-ui/cdk/classes';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class TuiPopupService extends TuiPortalService {}

projects/demo/src/modules/components/label/examples/1/index.html

@@ -21,7 +21,10 @@
             type="checkbox"
         />
         <span tuiTitle>
-            ng-polymorpheus
+            <span>
+                ng-polymorpheus&nbsp;
+                <tui-icon tuiTooltip="Our first open-source project" />
+            </span>
             <span tuiSubtitle>A tiny library for polymorphic templates in Angular</span>
         </span>
     </label>

projects/demo/src/modules/components/label/examples/1/index.ts

@@ -2,12 +2,12 @@ import {Component} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiLabel, TuiTitle} from '@taiga-ui/core';
-import {TuiCheckbox} from '@taiga-ui/kit';
+import {TuiIcon, TuiLabel, TuiTitle} from '@taiga-ui/core';
+import {TuiCheckbox, TuiTooltip} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [ReactiveFormsModule, TuiCheckbox, TuiLabel, TuiTitle],
+    imports: [ReactiveFormsModule, TuiCheckbox, TuiIcon, TuiLabel, TuiTitle, TuiTooltip],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

projects/demo/src/styles/styles.less

@@ -19,7 +19,3 @@ body {
         scroll-behavior: auto;
     }
 }
-
-html {
-    font-size: 1em;
-}

projects/kit/directives/tooltip/tooltip.style.less

@@ -9,10 +9,15 @@
 
     [tuiBlock],
     [tuiCell][data-size='s'],
-    [tuiLabel][data-orientation='horizontal'] {
+    [tuiLabel][data-orientation='horizontal'] & {
         border-width: 0.25rem;
     }
 
+    [tuiTitle] & {
+        font-size: 1rem;
+        border: none;
+    }
+
     &::after {
         .center-all();