,
- @Inject(ANIMATION_FRAME) animationFrame$: Observable
,
- @Inject(TUI_ELEMENT_REF) private readonly wrapper: ElementRef,
- @Inject(TUI_SCROLL_REF) private readonly container: ElementRef,
- @Inject(DOCUMENT) private readonly doc: Document,
- @Inject(ElementRef) private readonly el: ElementRef,
- ) {
- const {nativeElement} = this.el;
- const mousedown$ = tuiTypedFromEvent(nativeElement, 'mousedown');
- const mousemove$ = tuiTypedFromEvent(this.doc, 'mousemove');
- const mouseup$ = tuiTypedFromEvent(this.doc, 'mouseup');
- const mousedownWrapper$ = tuiTypedFromEvent(
- this.wrapper.nativeElement,
- 'mousedown',
- );
-
- merge(
- mousedownWrapper$.pipe(map(event => this.getScrolled(event, 0.5, 0.5))),
- mousedown$.pipe(
- tuiStopPropagation(),
- switchMap(event => {
- const rect = nativeElement.getBoundingClientRect();
- const vertical = getOffsetVertical(event, rect);
- const horizontal = getOffsetHorizontal(event, rect);
-
- return mousemove$.pipe(
- map(event => this.getScrolled(event, vertical, horizontal)),
- takeUntil(mouseup$),
- );
- }),
- ),
- )
- .pipe(tuiZonefree(zone), takeUntil(destroy$))
- .subscribe(([scrollTop, scrollLeft]) => {
- if (this.tuiScrollbar === 'vertical') {
- renderer.setProperty(this.element, 'scrollTop', scrollTop);
- } else {
- renderer.setProperty(this.element, 'scrollLeft', scrollLeft);
- }
- });
+ private readonly el = inject(TUI_SCROLL_REF).nativeElement;
+ private readonly style: CSSStyleDeclaration = inject(ElementRef).nativeElement.style;
+
+ protected readonly scrollSub = inject(TuiScrollbarService)
+ .pipe(takeUntil(inject(TuiDestroyService)))
+ .subscribe(([top, left]) => {
+ this.el.style.scrollBehavior = 'auto';
+ this.el.scrollTo({top, left});
+ this.el.style.scrollBehavior = '';
+ });
+
+ protected readonly styleSub = merge(
+ inject(ANIMATION_FRAME).pipe(throttleTime(POLLING_TIME)),
+ tuiScrollFrom(this.el),
+ )
+ .pipe(tuiZonefree(inject(NgZone)), takeUntil(inject(TuiDestroyService)))
+ .subscribe(() => {
+ if (this.tuiScrollbar === 'vertical') {
+ this.style.top = `${this.thumb * 100}%`;
+ this.style.height = `${this.view * 100}%`;
+ } else {
+ this.style.left = `${this.thumb * 100}%`;
+ this.style.width = `${this.view * 100}%`;
+ }
+ });
- merge(
- animationFrame$.pipe(throttleTime(POLLING_TIME)),
- tuiScrollFrom(this.element),
- )
- .pipe(tuiZonefree(zone), takeUntil(destroy$))
- .subscribe(() => {
- if (this.tuiScrollbar === 'vertical') {
- renderer.setStyle(nativeElement, 'top', `${this.thumb * 100}%`);
- renderer.setStyle(nativeElement, 'height', `${this.view * 100}%`);
- } else {
- renderer.setStyle(nativeElement, 'left', `${this.thumb * 100}%`);
- renderer.setStyle(nativeElement, 'width', `${this.view * 100}%`);
- }
- });
- }
+ @Input()
+ tuiScrollbar: 'horizontal' | 'vertical' = 'vertical';
private get scrolled(): number {
const {
@@ -108,7 +51,7 @@ export class TuiScrollbarDirective {
scrollLeft,
scrollWidth,
clientWidth,
- } = this.element;
+ } = this.el;
return this.tuiScrollbar === 'vertical'
? scrollTop / (scrollHeight - clientHeight)
@@ -116,7 +59,7 @@ export class TuiScrollbarDirective {
}
private get compensation(): number {
- const {clientHeight, scrollHeight, clientWidth, scrollWidth} = this.element;
+ const {clientHeight, scrollHeight, clientWidth, scrollWidth} = this.el;
if (
((clientHeight * clientHeight) / scrollHeight > MIN_WIDTH &&
@@ -139,33 +82,10 @@ export class TuiScrollbarDirective {
}
private get view(): number {
- const {clientHeight, scrollHeight, clientWidth, scrollWidth} = this.element;
+ const {clientHeight, scrollHeight, clientWidth, scrollWidth} = this.el;
return this.tuiScrollbar === 'vertical'
? Math.ceil((clientHeight / scrollHeight) * 100) / 100
: Math.ceil((clientWidth / scrollWidth) * 100) / 100;
}
-
- private get element(): Element {
- return this.container.nativeElement;
- }
-
- private getScrolled(
- {clientY, clientX}: MouseEvent,
- offsetVertical: number,
- offsetHorizontal: number,
- ): [number, number] {
- const {offsetHeight, offsetWidth} = this.el.nativeElement;
- const {top, left, width, height} =
- this.wrapper.nativeElement.getBoundingClientRect();
-
- const maxTop = this.element.scrollHeight - height;
- const maxLeft = this.element.scrollWidth - width;
- const scrolledTop =
- (clientY - top - offsetHeight * offsetVertical) / (height - offsetHeight);
- const scrolledLeft =
- (clientX - left - offsetWidth * offsetHorizontal) / (width - offsetWidth);
-
- return [maxTop * scrolledTop, maxLeft * scrolledLeft];
- }
}
diff --git a/projects/core/components/scroll-controls/scrollbar.service.ts b/projects/core/components/scroll-controls/scrollbar.service.ts
new file mode 100644
index 000000000000..f27cde8a9d77
--- /dev/null
+++ b/projects/core/components/scroll-controls/scrollbar.service.ts
@@ -0,0 +1,60 @@
+import {ElementRef, inject, Injectable, NgZone} from '@angular/core';
+import {tuiStopPropagation, tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk';
+import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens';
+import {map, merge, Observable, switchMap, takeUntil} from 'rxjs';
+
+@Injectable()
+export class TuiScrollbarService extends Observable<[number, number]> {
+ private readonly el: HTMLElement = inject(ElementRef).nativeElement;
+ private readonly element = inject(TUI_SCROLL_REF).nativeElement;
+ private readonly scroll$ = merge(
+ tuiTypedFromEvent(this.el.parentElement!, 'mousedown').pipe(
+ map(event => this.getScrolled(event, 0.5, 0.5)),
+ ),
+ tuiTypedFromEvent(this.el, 'mousedown').pipe(
+ tuiStopPropagation(),
+ tuiZonefree(inject(NgZone)),
+ switchMap(event => {
+ const {ownerDocument} = this.el;
+ const rect = this.el.getBoundingClientRect();
+ const vertical = getOffsetVertical(event, rect);
+ const horizontal = getOffsetHorizontal(event, rect);
+
+ return tuiTypedFromEvent(ownerDocument, 'mousemove').pipe(
+ map(event => this.getScrolled(event, vertical, horizontal)),
+ takeUntil(tuiTypedFromEvent(ownerDocument, 'mouseup')),
+ );
+ }),
+ ),
+ );
+
+ constructor() {
+ super(subscriber => this.scroll$.subscribe(subscriber));
+ }
+
+ private getScrolled(
+ {clientY, clientX}: MouseEvent,
+ offsetY: number,
+ offsetX: number,
+ ): [number, number] {
+ const {offsetHeight, offsetWidth} = this.el;
+ const {top, left, width, height} = this.el.parentElement!.getBoundingClientRect();
+
+ const maxTop = this.element.scrollHeight - height;
+ const maxLeft = this.element.scrollWidth - width;
+ const scrolledTop =
+ (clientY - top - offsetHeight * offsetY) / (height - offsetHeight);
+ const scrolledLeft =
+ (clientX - left - offsetWidth * offsetX) / (width - offsetWidth);
+
+ return [maxTop * scrolledTop, maxLeft * scrolledLeft];
+ }
+}
+
+function getOffsetVertical({clientY}: MouseEvent, {top, height}: DOMRect): number {
+ return (clientY - top) / height;
+}
+
+function getOffsetHorizontal({clientX}: MouseEvent, {left, width}: DOMRect): number {
+ return (clientX - left) / width;
+}
diff --git a/projects/core/components/scrollbar/index.ts b/projects/core/components/scrollbar/index.ts
index 01466b797884..6f2e27d38bc3 100644
--- a/projects/core/components/scrollbar/index.ts
+++ b/projects/core/components/scrollbar/index.ts
@@ -1,4 +1,3 @@
-export * from './scroll-ref.directive';
export * from './scrollable.directive';
export * from './scrollbar.component';
export * from './scrollbar.module';
diff --git a/projects/core/components/scrollbar/scroll-ref.directive.ts b/projects/core/components/scrollbar/scroll-ref.directive.ts
deleted file mode 100644
index c2757c5ffd1a..000000000000
--- a/projects/core/components/scrollbar/scroll-ref.directive.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {Directive, ElementRef} from '@angular/core';
-import {TUI_SCROLL_REF} from '@taiga-ui/cdk';
-
-/** @deprecated import from `@taiga-ui/cdk` instead */
-export const SCROLL_REF_SELECTOR = '[tuiScrollRef]';
-
-/** @deprecated import from `@taiga-ui/cdk` instead */
-@Directive({
- selector: SCROLL_REF_SELECTOR,
- providers: [
- {
- provide: TUI_SCROLL_REF,
- useExisting: ElementRef,
- },
- ],
-})
-export class TuiScrollRefDirective {}
diff --git a/projects/core/components/scrollbar/scrollbar.component.ts b/projects/core/components/scrollbar/scrollbar.component.ts
index 1dd8bedc74c6..45376adeb27c 100644
--- a/projects/core/components/scrollbar/scrollbar.component.ts
+++ b/projects/core/components/scrollbar/scrollbar.component.ts
@@ -10,12 +10,12 @@ import {
import {CSS as CSS_TOKEN, USER_AGENT} from '@ng-web-apis/common';
import {
TUI_IS_IOS,
- TUI_SCROLL_REF,
tuiGetElementOffset,
TuiInjectionTokenType,
tuiIsFirefox,
} from '@taiga-ui/cdk';
import {TUI_SCROLL_INTO_VIEW, TUI_SCROLLABLE} from '@taiga-ui/core/constants';
+import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens';
// TODO: Remove all legacy code in 4.0
@Component({
diff --git a/projects/core/components/scrollbar/scrollbar.module.ts b/projects/core/components/scrollbar/scrollbar.module.ts
index 4ea24c1ddb53..0663296ccc6a 100644
--- a/projects/core/components/scrollbar/scrollbar.module.ts
+++ b/projects/core/components/scrollbar/scrollbar.module.ts
@@ -1,14 +1,13 @@
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
-import {TuiScrollControlsModule} from '@taiga-ui/cdk';
+import {TuiScrollControlsComponent} from '@taiga-ui/core/components/scroll-controls';
-import {TuiScrollRefDirective} from './scroll-ref.directive';
import {TuiScrollableDirective} from './scrollable.directive';
import {TuiScrollbarComponent} from './scrollbar.component';
@NgModule({
- imports: [CommonModule, TuiScrollControlsModule],
- declarations: [TuiScrollbarComponent, TuiScrollRefDirective, TuiScrollableDirective],
- exports: [TuiScrollbarComponent, TuiScrollRefDirective, TuiScrollableDirective],
+ imports: [CommonModule, TuiScrollControlsComponent],
+ declarations: [TuiScrollbarComponent, TuiScrollableDirective],
+ exports: [TuiScrollbarComponent, TuiScrollableDirective],
})
export class TuiScrollbarModule {}
diff --git a/projects/core/directives/dropdown/dropdown-portal.directive.ts b/projects/core/directives/dropdown/dropdown-portal.directive.ts
new file mode 100644
index 000000000000..c0dd70c8d8f9
--- /dev/null
+++ b/projects/core/directives/dropdown/dropdown-portal.directive.ts
@@ -0,0 +1,34 @@
+import {
+ Directive,
+ EmbeddedViewRef,
+ inject,
+ Input,
+ OnDestroy,
+ TemplateRef,
+} from '@angular/core';
+
+import {TuiDropdownService} from './dropdown.service';
+
+@Directive({
+ standalone: true,
+ selector: 'ng-template[tuiDropdown]',
+})
+export class TuiDropdownPortalDirective implements OnDestroy {
+ private readonly template = inject(TemplateRef);
+ private readonly service = inject(TuiDropdownService);
+
+ private viewRef?: EmbeddedViewRef;
+
+ @Input()
+ set tuiDropdown(show: boolean) {
+ this.viewRef?.destroy();
+
+ if (show) {
+ this.viewRef = this.service.addTemplate(this.template);
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.viewRef?.destroy();
+ }
+}
diff --git a/projects/core/directives/dropdown/dropdown.directive.ts b/projects/core/directives/dropdown/dropdown.directive.ts
index d1230f033217..b78853e8c9d0 100644
--- a/projects/core/directives/dropdown/dropdown.directive.ts
+++ b/projects/core/directives/dropdown/dropdown.directive.ts
@@ -15,7 +15,6 @@ import {
TuiActiveZoneDirective,
TuiContext,
TuiDestroyService,
- TuiDropdownPortalService,
tuiPure,
} from '@taiga-ui/cdk';
import {
@@ -35,6 +34,7 @@ import {Subject, takeUntil, throttleTime} from 'rxjs';
import {TuiDropdownDriverDirective} from './dropdown.driver';
import {TUI_DROPDOWN_COMPONENT} from './dropdown.providers';
+import {TuiDropdownService} from './dropdown.service';
import {TuiDropdownPositionDirective} from './dropdown-position.directive';
@Directive({
@@ -58,7 +58,7 @@ export class TuiDropdownDirective
TuiVehicle
{
private readonly refresh$ = new Subject();
- private readonly service = inject(TuiDropdownPortalService);
+ private readonly service = inject(TuiDropdownService);
private readonly cdr = inject(ChangeDetectorRef);
@Input()
diff --git a/projects/core/directives/dropdown/dropdown.module.ts b/projects/core/directives/dropdown/dropdown.module.ts
index ce9a2b554c67..9d79c241746a 100644
--- a/projects/core/directives/dropdown/dropdown.module.ts
+++ b/projects/core/directives/dropdown/dropdown.module.ts
@@ -8,6 +8,7 @@ import {TuiDropdownHoverDirective} from './dropdown-hover.directive';
import {TuiDropdownManualDirective} from './dropdown-manual.directive';
import {TuiDropdownOpenDirective} from './dropdown-open.directive';
import {TuiDropdownOptionsDirective} from './dropdown-options.directive';
+import {TuiDropdownPortalDirective} from './dropdown-portal.directive';
import {TuiDropdownPositionDirective} from './dropdown-position.directive';
import {TuiDropdownPositionSidedDirective} from './dropdown-position-sided.directive';
import {TuiDropdownSelectionDirective} from './dropdown-selection.directive';
@@ -18,6 +19,7 @@ import {TuiDropdownSelectionDirective} from './dropdown-selection.directive';
TuiDropdownComponent,
TuiDropdownOpenDirective,
TuiDropdownOptionsDirective,
+ TuiDropdownPortalDirective,
TuiDropdownDriverDirective,
TuiDropdownManualDirective,
TuiDropdownHoverDirective,
@@ -31,6 +33,7 @@ import {TuiDropdownSelectionDirective} from './dropdown-selection.directive';
TuiDropdownComponent,
TuiDropdownOpenDirective,
TuiDropdownOptionsDirective,
+ TuiDropdownPortalDirective,
TuiDropdownDriverDirective,
TuiDropdownManualDirective,
TuiDropdownHoverDirective,
diff --git a/projects/core/directives/dropdown/dropdown.service.ts b/projects/core/directives/dropdown/dropdown.service.ts
new file mode 100644
index 000000000000..97089e9d402f
--- /dev/null
+++ b/projects/core/directives/dropdown/dropdown.service.ts
@@ -0,0 +1,5 @@
+import {Injectable} from '@angular/core';
+import {TuiPortalService} from '@taiga-ui/cdk';
+
+@Injectable({providedIn: 'root'})
+export class TuiDropdownService extends TuiPortalService {}
diff --git a/projects/core/directives/dropdown/dropdowns.component.ts b/projects/core/directives/dropdown/dropdowns.component.ts
new file mode 100644
index 000000000000..1c65078a0454
--- /dev/null
+++ b/projects/core/directives/dropdown/dropdowns.component.ts
@@ -0,0 +1,28 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {tuiAsPortal, TuiPortalsComponent} from '@taiga-ui/cdk';
+
+import {TuiDropdownService} from './dropdown.service';
+
+/**
+ * Host element for dynamically created portals, for example using {@link TuiDropdownDirective}.
+ */
+@Component({
+ standalone: true,
+ selector: 'tui-dropdowns',
+ template: `
+
+
+ `,
+ styles: [
+ `
+ :host {
+ display: block;
+ height: 100%;
+ isolation: isolate;
+ }
+ `,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ providers: [tuiAsPortal(TuiDropdownService)],
+})
+export class TuiDropdownsComponent extends TuiPortalsComponent {}
diff --git a/projects/core/directives/dropdown/index.ts b/projects/core/directives/dropdown/index.ts
index 8dd12ede2f1f..ffe722118e13 100644
--- a/projects/core/directives/dropdown/index.ts
+++ b/projects/core/directives/dropdown/index.ts
@@ -3,12 +3,15 @@ export * from './dropdown.directive';
export * from './dropdown.driver';
export * from './dropdown.module';
export * from './dropdown.providers';
+export * from './dropdown.service';
export * from './dropdown-context.directive';
export * from './dropdown-hover.directive';
export * from './dropdown-hover.options';
export * from './dropdown-manual.directive';
export * from './dropdown-open.directive';
export * from './dropdown-options.directive';
+export * from './dropdown-portal.directive';
export * from './dropdown-position.directive';
export * from './dropdown-position-sided.directive';
export * from './dropdown-selection.directive';
+export * from './dropdowns.component';
diff --git a/projects/core/tokens/scroll-ref.ts b/projects/core/tokens/scroll-ref.ts
index e1b10093e364..8885c3bcc6cb 100644
--- a/projects/core/tokens/scroll-ref.ts
+++ b/projects/core/tokens/scroll-ref.ts
@@ -1,6 +1,7 @@
-import {TUI_SCROLL_REF as TOKEN} from '@taiga-ui/cdk';
+import {DOCUMENT} from '@angular/common';
+import {ElementRef, inject} from '@angular/core';
+import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk';
-/**
- * @deprecated import from `@taiga-ui/cdk` instead
- */
-export const TUI_SCROLL_REF = TOKEN;
+export const TUI_SCROLL_REF = tuiCreateTokenFromFactory(
+ () => new ElementRef(inject(DOCUMENT).documentElement),
+);
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 64763dcdcbab..d5b2bf79f337 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -1570,14 +1570,6 @@ export const ROUTES: Routes = [
title: 'Pan',
},
},
- {
- path: 'directives/portal',
- loadChildren: async () =>
- (await import('../directives/portal/portal.module')).ExampleTuiPortalModule,
- data: {
- title: 'Portal',
- },
- },
{
path: 'directives/resizer',
loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/home/examples/app-template.md b/projects/demo/src/modules/app/home/examples/app-template.md
index ee406acb4dbf..6d8cadc8df96 100644
--- a/projects/demo/src/modules/app/home/examples/app-template.md
+++ b/projects/demo/src/modules/app/home/examples/app-template.md
@@ -14,7 +14,7 @@
-
+
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 1f959bdd38a6..11b27a864164 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -1340,12 +1340,6 @@ export const pages: TuiDocPages = [
keywords: 'pan, panning, панарамирование, пан',
route: '/directives/pan',
},
- {
- section: 'Tools',
- title: 'Portal',
- keywords: 'template, шаблон, портал',
- route: '/directives/portal',
- },
{
section: 'Tools',
title: 'Present',
diff --git a/projects/demo/src/modules/components/app-bar/app-bar.module.ts b/projects/demo/src/modules/components/app-bar/app-bar.module.ts
index 3ac70ec9d360..f42efe272e92 100644
--- a/projects/demo/src/modules/components/app-bar/app-bar.module.ts
+++ b/projects/demo/src/modules/components/app-bar/app-bar.module.ts
@@ -3,7 +3,6 @@ import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
import {TuiAppBarModule} from '@taiga-ui/addon-mobile';
-import {TuiPortalModule} from '@taiga-ui/cdk';
import {TuiButtonModule, TuiLabelModule, TuiNotificationModule} from '@taiga-ui/core';
import {TuiProgressModule} from '@taiga-ui/kit';
@@ -18,7 +17,6 @@ import {TuiAppBarExample1} from './examples/1';
TuiLabelModule,
TuiNotificationModule,
TuiAppBarModule,
- TuiPortalModule,
TuiAddonDocModule,
RouterModule.forChild(tuiGenerateRoutes(ExampleTuiAppBarComponent)),
],
diff --git a/projects/demo/src/modules/components/dialog/examples/4/index.ts b/projects/demo/src/modules/components/dialog/examples/4/index.ts
index e279a529027b..35a0d7d22095 100644
--- a/projects/demo/src/modules/components/dialog/examples/4/index.ts
+++ b/projects/demo/src/modules/components/dialog/examples/4/index.ts
@@ -1,8 +1,8 @@
import {Component, Inject, TemplateRef} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
-import {tuiClamp, TuiDropdownPortalService} from '@taiga-ui/cdk';
-import {TuiDialogService} from '@taiga-ui/core';
+import {tuiClamp} from '@taiga-ui/cdk';
+import {TuiDialogService, TuiDropdownService} from '@taiga-ui/core';
import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
@Component({
@@ -19,8 +19,7 @@ export class TuiDialogExampleComponent4 {
constructor(
@Inject(TuiDialogService) private readonly dialogs: TuiDialogService,
- @Inject(TuiDropdownPortalService)
- private readonly portalService: TuiDropdownPortalService,
+ @Inject(TuiDropdownService) private readonly dropdowns: TuiDropdownService,
) {}
get transform(): string {
@@ -48,11 +47,11 @@ export class TuiDialogExampleComponent4 {
content: PolymorpheusContent,
button: TemplateRef>,
): void {
- const templateRef = this.portalService.addTemplate(button);
+ const templateRef = this.dropdowns.addTemplate(button);
this.dialogs.open(content).subscribe({
complete: () => {
- this.portalService.removeTemplate(templateRef);
+ this.dropdowns.removeTemplate(templateRef);
},
});
}
diff --git a/projects/demo/src/modules/components/tab-bar/tab-bar.module.ts b/projects/demo/src/modules/components/tab-bar/tab-bar.module.ts
index 5b2d2a327381..adb3a1422bf0 100644
--- a/projects/demo/src/modules/components/tab-bar/tab-bar.module.ts
+++ b/projects/demo/src/modules/components/tab-bar/tab-bar.module.ts
@@ -4,8 +4,7 @@ import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
import {TuiTabBarModule} from '@taiga-ui/addon-mobile';
-import {TuiPortalModule} from '@taiga-ui/cdk';
-import {TuiButtonModule, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiButtonModule, TuiDropdownModule, TuiNotificationModule} from '@taiga-ui/core';
import {TuiCheckboxLabeledModule} from '@taiga-ui/kit';
import {TuiTabBarExample1} from './examples/1';
@@ -18,11 +17,11 @@ import {ExampleTuiTabBarComponent} from './tab-bar.component';
imports: [
CommonModule,
FormsModule,
+ TuiDropdownModule,
TuiButtonModule,
TuiNotificationModule,
TuiCheckboxLabeledModule,
TuiTabBarModule,
- TuiPortalModule,
TuiAddonDocModule,
RouterModule.forChild(tuiGenerateRoutes(ExampleTuiTabBarComponent)),
],
diff --git a/projects/demo/src/modules/components/tab-bar/tab-bar.template.html b/projects/demo/src/modules/components/tab-bar/tab-bar.template.html
index 267e06b9f30b..730f88029215 100644
--- a/projects/demo/src/modules/components/tab-bar/tab-bar.template.html
+++ b/projects/demo/src/modules/components/tab-bar/tab-bar.template.html
@@ -22,9 +22,10 @@
*ngIf="!fixed"
class="bar"
>
-
-
-
+
Create your own portal service by extending
- AbstractTuiPortalService
+ TuiPortalService
+
+
+
+
diff --git a/projects/demo/src/modules/directives/dropdown/examples/2/index.ts b/projects/demo/src/modules/directives/dropdown/examples/2/index.ts
index bab803340f3d..0abd045cc699 100644
--- a/projects/demo/src/modules/directives/dropdown/examples/2/index.ts
+++ b/projects/demo/src/modules/directives/dropdown/examples/2/index.ts
@@ -12,14 +12,5 @@ import {assets} from '@demo/utils';
})
export class TuiDropdownExample2 {
open = false;
-
avatarUrl = assets`/images/avatar.jpg`;
-
- onMouseEnter(): void {
- this.open = true;
- }
-
- onMouseLeave(): void {
- this.open = false;
- }
}
diff --git a/projects/demo/src/modules/directives/dropdown/examples/5/index.html b/projects/demo/src/modules/directives/dropdown/examples/5/index.html
new file mode 100644
index 000000000000..c2e4c61772a3
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown/examples/5/index.html
@@ -0,0 +1,16 @@
+
+
+ Manually style this element
+
diff --git a/projects/demo/src/modules/directives/dropdown/examples/5/index.less b/projects/demo/src/modules/directives/dropdown/examples/5/index.less
new file mode 100644
index 000000000000..d43e7c98d03f
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown/examples/5/index.less
@@ -0,0 +1,6 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+.dropdown {
+ .center-all();
+ position: fixed;
+}
diff --git a/projects/demo/src/modules/directives/portal/examples/1/index.ts b/projects/demo/src/modules/directives/dropdown/examples/5/index.ts
similarity index 75%
rename from projects/demo/src/modules/directives/portal/examples/1/index.ts
rename to projects/demo/src/modules/directives/dropdown/examples/5/index.ts
index 6cd627fda608..5b679564b1c4 100644
--- a/projects/demo/src/modules/directives/portal/examples/1/index.ts
+++ b/projects/demo/src/modules/directives/dropdown/examples/5/index.ts
@@ -3,12 +3,12 @@ import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
@Component({
- selector: 'tui-portal-example-1',
+ selector: 'tui-dropdown-example-5',
templateUrl: './index.html',
styleUrls: ['./index.less'],
encapsulation,
changeDetection,
})
-export class TuiPortalExample1 {
- show = false;
+export class TuiDropdownExample5 {
+ open = false;
}
diff --git a/projects/demo/src/modules/directives/portal/examples/1/index.html b/projects/demo/src/modules/directives/portal/examples/1/index.html
deleted file mode 100644
index 8d00ff777243..000000000000
--- a/projects/demo/src/modules/directives/portal/examples/1/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
- Hey, Joe
-
diff --git a/projects/demo/src/modules/directives/portal/examples/1/index.less b/projects/demo/src/modules/directives/portal/examples/1/index.less
deleted file mode 100644
index 20b26ef88f95..000000000000
--- a/projects/demo/src/modules/directives/portal/examples/1/index.less
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
-
-.portal {
- box-shadow: var(--tui-shadow-dropdown);
- .center-all();
- position: fixed;
- padding: 1.5rem;
- border-radius: var(--tui-radius-l);
- background: var(--tui-base-01);
-}
diff --git a/projects/demo/src/modules/directives/portal/examples/import/import-module.md b/projects/demo/src/modules/directives/portal/examples/import/import-module.md
deleted file mode 100644
index 32690613da38..000000000000
--- a/projects/demo/src/modules/directives/portal/examples/import/import-module.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```ts
-import {TuiPortalModule} from '@taiga-ui/cdk';
-
-@NgModule({
- imports: [
- // ...
- TuiPortalModule,
- ],
- // ...
-})
-export class MyModule {}
-```
diff --git a/projects/demo/src/modules/directives/portal/examples/import/insert-template.md b/projects/demo/src/modules/directives/portal/examples/import/insert-template.md
deleted file mode 100644
index 2fcf27457e10..000000000000
--- a/projects/demo/src/modules/directives/portal/examples/import/insert-template.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```html
-
- I will be shown above all content when
- show
- is set to true
-
-```
diff --git a/projects/demo/src/modules/directives/portal/portal.component.ts b/projects/demo/src/modules/directives/portal/portal.component.ts
deleted file mode 100644
index bf8772597214..000000000000
--- a/projects/demo/src/modules/directives/portal/portal.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample} from '@taiga-ui/addon-doc';
-
-@Component({
- selector: 'example-tui-portal',
- templateUrl: './portal.template.html',
- changeDetection,
-})
-export class ExampleTuiPortalComponent {
- readonly example1: TuiDocExample = {
- TypeScript: import('./examples/1/index.ts?raw'),
- HTML: import('./examples/1/index.html?raw'),
- LESS: import('./examples/1/index.less?raw'),
- };
-
- readonly exampleModule = import('./examples/import/import-module.md?raw');
- readonly exampleHtml = import('./examples/import/insert-template.md?raw');
-}
diff --git a/projects/demo/src/modules/directives/portal/portal.module.ts b/projects/demo/src/modules/directives/portal/portal.module.ts
deleted file mode 100644
index 18201a3b691f..000000000000
--- a/projects/demo/src/modules/directives/portal/portal.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiPortalModule} from '@taiga-ui/cdk';
-import {TuiToggleModule} from '@taiga-ui/kit';
-
-import {TuiPortalExample1} from './examples/1';
-import {ExampleTuiPortalComponent} from './portal.component';
-
-@NgModule({
- imports: [
- FormsModule,
- TuiToggleModule,
- TuiPortalModule,
- TuiAddonDocModule,
- RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPortalComponent)),
- ],
- declarations: [ExampleTuiPortalComponent, TuiPortalExample1],
- exports: [ExampleTuiPortalComponent],
-})
-export class ExampleTuiPortalModule {}
diff --git a/projects/demo/src/modules/directives/portal/portal.template.html b/projects/demo/src/modules/directives/portal/portal.template.html
deleted file mode 100644
index f860ab92df41..000000000000
--- a/projects/demo/src/modules/directives/portal/portal.template.html
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
- Directive to show a template in a portal host above all content, similar to dropdowns.
-
-
-
-
-
-
-
-
- -
-
- Import
- TuiPortalModule
- into a module where you want to use our component
-
-
-
-
-
- -
-
Add to the template:
-
-
-
-
-
-