From 6ab17567882ec42f9e8396fe7e9556c2388c2c1a Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Fri, 25 Oct 2024 15:50:58 +0800 Subject: [PATCH] feat(core): `Popup` add service for arbitrary portal items (#9605) Co-authored-by: taiga-family-bot --- .../directives/sidebar/sidebar.directive.ts | 8 ++++---- .../core/components/root/root.component.ts | 8 ++++++-- projects/core/components/root/root.style.less | 1 + .../core/components/root/root.template.html | 18 ++++++++---------- .../directives/dropdown/dropdowns.component.ts | 14 +------------- projects/core/services/index.ts | 1 + projects/core/services/popup.service.ts | 7 +++++++ .../components/label/examples/1/index.html | 5 ++++- .../components/label/examples/1/index.ts | 6 +++--- projects/demo/src/styles/styles.less | 4 ---- .../kit/directives/tooltip/tooltip.style.less | 7 ++++++- 11 files changed, 41 insertions(+), 38 deletions(-) create mode 100644 projects/core/services/popup.service.ts diff --git a/projects/addon-mobile/directives/sidebar/sidebar.directive.ts b/projects/addon-mobile/directives/sidebar/sidebar.directive.ts index dbd6986a8b5b..159ffaf6ca0a 100644 --- a/projects/addon-mobile/directives/sidebar/sidebar.directive.ts +++ b/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> 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> 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> return; } - this.portalService.remove(this.sidebarRef); + this.service.remove(this.sidebarRef); this.sidebarRef = null; } } diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts index 68b6d1f24605..5592a9e2cdf3 100644 --- a/projects/core/components/root/root.component.ts +++ b/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(), diff --git a/projects/core/components/root/root.style.less b/projects/core/components/root/root.style.less index 5d14f041309c..68a5597ef0c4 100644 --- a/projects/core/components/root/root.style.less +++ b/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; } diff --git a/projects/core/components/root/root.template.html b/projects/core/components/root/root.template.html index f96ceac22647..fc90027a77c9 100644 --- a/projects/core/components/root/root.template.html +++ b/projects/core/components/root/root.template.html @@ -1,17 +1,15 @@ +
- -
- -
- - - - - - + + + + + + + diff --git a/projects/core/directives/dropdown/dropdowns.component.ts b/projects/core/directives/dropdown/dropdowns.component.ts index 2a57aed0de8f..8958b92fb0c9 100644 --- a/projects/core/directives/dropdown/dropdowns.component.ts +++ b/projects/core/directives/dropdown/dropdowns.component.ts @@ -9,19 +9,7 @@ import {TuiDropdownService} from './dropdown.service'; @Component({ standalone: true, selector: 'tui-dropdowns', - template: ` - - - `, - styles: [ - ` - :host { - display: block; - height: 100%; - isolation: isolate; - } - `, - ], + template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsPortal(TuiDropdownService)], }) diff --git a/projects/core/services/index.ts b/projects/core/services/index.ts index 52983859e5fc..3b62571c2a52 100644 --- a/projects/core/services/index.ts +++ b/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'; diff --git a/projects/core/services/popup.service.ts b/projects/core/services/popup.service.ts new file mode 100644 index 000000000000..549be95e47ea --- /dev/null +++ b/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 {} diff --git a/projects/demo/src/modules/components/label/examples/1/index.html b/projects/demo/src/modules/components/label/examples/1/index.html index db2ec2acd405..5ccb6011f4ab 100644 --- a/projects/demo/src/modules/components/label/examples/1/index.html +++ b/projects/demo/src/modules/components/label/examples/1/index.html @@ -21,7 +21,10 @@ type="checkbox" /> - ng-polymorpheus + + ng-polymorpheus  + + A tiny library for polymorphic templates in Angular diff --git a/projects/demo/src/modules/components/label/examples/1/index.ts b/projects/demo/src/modules/components/label/examples/1/index.ts index 7a65c5063198..57fbe6871664 100644 --- a/projects/demo/src/modules/components/label/examples/1/index.ts +++ b/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, diff --git a/projects/demo/src/styles/styles.less b/projects/demo/src/styles/styles.less index f3b59803f6f4..5c783096c6f1 100644 --- a/projects/demo/src/styles/styles.less +++ b/projects/demo/src/styles/styles.less @@ -19,7 +19,3 @@ body { scroll-behavior: auto; } } - -html { - font-size: 1em; -} diff --git a/projects/kit/directives/tooltip/tooltip.style.less b/projects/kit/directives/tooltip/tooltip.style.less index 3cfef7c4172c..3785a0b62002 100644 --- a/projects/kit/directives/tooltip/tooltip.style.less +++ b/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();