@taiga-ui/core 4.52.0-canary.e444d19 → 4.52.0-canary.eb5ffe3

package/fesm2022/taiga-ui-core-directives-dropdown.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, Input, EventEmitter, Output, ChangeDetectorRef, INJECTOR, signal, TemplateRef, computed, ChangeDetectionStrategy, Component, ElementRef, ContentChild, ViewContainerRef } from '@angular/core';
+import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, Input, EventEmitter, Output, ChangeDetectorRef, INJECTOR, signal, TemplateRef, computed, ChangeDetectionStrategy, Component, PLATFORM_ID, ElementRef, ContentChild, ViewContainerRef } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { EMPTY_CLIENT_RECT, TUI_TRUE_HANDLER, CHAR_ZERO_WIDTH_SPACE, CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
 import * as i1 from '@taiga-ui/cdk/directives/active-zone';
@@ -17,15 +17,15 @@ import { PolymorpheusComponent, PolymorpheusTemplate, PolymorpheusOutlet } from
 import { BehaviorSubject, Subject, throttleTime, takeWhile, map, merge, filter, fromEvent, switchMap, delay, startWith, takeUntil, distinctUntilChanged, of, tap, share, combineLatest } from 'rxjs';
 import { coerceArray } from '@angular/cdk/coercion';
 import { tuiZonefreeScheduler, tuiTypedFromEvent, tuiZonefree, tuiIfMap, tuiCloseWatcher, tuiZonefull, tuiWatch, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
+import { TuiPopupService } from '@taiga-ui/core/directives/popup';
 import { tuiOverrideOptions, tuiCheckFixedPosition, tuiGetWordRange } from '@taiga-ui/core/utils';
-import { TuiPortalService, TuiPortals, tuiAsPortal } from '@taiga-ui/cdk/classes';
 import { __decorate } from 'tslib';
-import { DOCUMENT } from '@angular/common';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { TUI_IS_TOUCH, TUI_RANGE } from '@taiga-ui/cdk/tokens';
 import { shouldCall } from '@taiga-ui/event-plugins';
 import * as i1$1 from '@taiga-ui/cdk/directives/obscured';
 import { TuiObscured } from '@taiga-ui/cdk/directives/obscured';
-import { tuiIsNativeKeyboardFocusable, tuiGetClosestFocusable, tuiIsNativeFocusedIn, tuiGetNativeFocused } from '@taiga-ui/cdk/utils/focus';
+import { tuiIsKeyboardFocusable, tuiGetClosestFocusable, tuiIsFocusedIn, tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
 import { tuiIsEditingKey, tuiOverrideOptions as tuiOverrideOptions$1 } from '@taiga-ui/core/utils/miscellaneous';
 
 class TuiDropdownDriver extends BehaviorSubject {
@@ -62,17 +62,6 @@ const TUI_DROPDOWN_COMPONENT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_COMP
 });
 const TUI_DROPDOWN_CONTEXT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_CONTEXT' : '');
 
-class TuiDropdownService extends TuiPortalService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 /** Default values for dropdown options */
 const TUI_DROPDOWN_DEFAULT_OPTIONS = {
     align: 'left',
@@ -221,7 +210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class TuiDropdownDirective {
     constructor() {
         this.refresh$ = new Subject();
-        this.service = inject(TuiDropdownService);
+        this.service = inject(TuiPopupService);
         this.cdr = inject(ChangeDetectorRef);
         // TODO: think of a better solution later
         this.drivers = coerceArray(inject(TuiDropdownDriver, { self: true, optional: true }));
@@ -274,7 +263,7 @@ class TuiDropdownDirective {
         }
         else if (!show && ref) {
             this.ref.set(null);
-            this.service.remove(ref);
+            ref.destroy();
         }
         this.drivers.forEach((driver) => driver?.next(show));
         // TODO: Remove in v5, only needed in Angular 16
@@ -381,6 +370,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     }, template: "<tui-scrollbar class=\"t-scroll\">\n    <div\n        *polymorpheusOutlet=\"directive._content() as text; context: {$implicit: close}\"\n        class=\"t-primitive\"\n    >\n        {{ text }}\n    </div>\n</tui-scrollbar>\n", styles: [":host{position:absolute;display:flex;box-shadow:var(--tui-shadow-medium);color:var(--tui-text-primary);background:var(--tui-background-elevation-3);border-radius:var(--tui-radius-m);overflow:hidden;border:1px solid var(--tui-border-normal);box-sizing:border-box;isolation:isolate;pointer-events:auto;--tui-from: translateY(-1rem)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}:host:not([style*=top]){visibility:hidden}.t-scroll{flex-grow:1;max-inline-size:100%;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"] }]
         }] });
 
+class TuiDropdownContent {
+    constructor() {
+        this.directive = inject(TuiDropdownDirective);
+        this.directive.tuiDropdown = inject(TemplateRef);
+        if (isPlatformBrowser(inject(PLATFORM_ID)) &&
+            this.directive.el.matches(':focus-within')) {
+            this.directive.toggle(true);
+        }
+    }
+    ngOnDestroy() {
+        this.directive.tuiDropdown = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownContent, isStandalone: true, selector: "ng-template[tuiDropdown]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownContent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'ng-template[tuiDropdown]',
+                }]
+        }], ctorParameters: () => [] });
+
 function activeZoneFilter(event) {
     return (!event ||
         (this.driver.value && !this.activeZone.contains(tuiGetActualTarget(event))));
@@ -531,7 +543,7 @@ class TuiDropdownOpen {
     }
     get host() {
         const initial = this.dropdownHost?.nativeElement || this.el;
-        const focusable = tuiIsNativeKeyboardFocusable(initial)
+        const focusable = tuiIsKeyboardFocusable(initial)
             ? initial
             : tuiGetClosestFocusable({ initial, root: this.el });
         return this.dropdownHost?.nativeElement || focusable || this.el;
@@ -540,7 +552,7 @@ class TuiDropdownOpen {
         return tuiIsElementEditable(this.host);
     }
     get focused() {
-        return tuiIsNativeFocusedIn(this.host) || tuiIsNativeFocusedIn(this.dropdown());
+        return tuiIsFocusedIn(this.host) || tuiIsFocusedIn(this.dropdown());
     }
     update(open) {
         if (open && !this.tuiDropdownEnabled) {
@@ -716,36 +728,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
-/**
- * @deprecated use {@link TuiPopup} directive instead
- */
-class TuiDropdownPortal {
-    constructor() {
-        this.template = inject(TemplateRef);
-        this.service = inject(TuiDropdownService);
-    }
-    set tuiDropdown(show) {
-        this.viewRef?.destroy();
-        if (show) {
-            this.viewRef = this.service.addTemplate(this.template);
-        }
-    }
-    ngOnDestroy() {
-        this.viewRef?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownPortal, isStandalone: true, selector: "ng-template[tuiDropdown]", inputs: { tuiDropdown: "tuiDropdown" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownPortal, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[tuiDropdown]',
-                }]
-        }], propDecorators: { tuiDropdown: [{
-                type: Input
-            }] } });
-
 class TuiDropdownPositionSided extends TuiPositionAccessor {
     constructor() {
         super(...arguments);
@@ -863,7 +845,7 @@ class TuiDropdownSelection extends TuiDriver {
         return this.el.querySelector('tui-textfield .t-ghost') || this.el;
     }
     getRange() {
-        const active = tuiGetNativeFocused(this.doc);
+        const active = tuiGetFocused(this.doc);
         const selection = this.doc.getSelection();
         const range = active && tuiIsTextfield(active) && this.el.contains(active)
             ? this.veryVerySadInputFix(active)
@@ -959,9 +941,9 @@ const TuiDropdown = [
     TuiDropdownComponent,
     TuiDropdownOpen,
     TuiDropdownOpenLegacy,
-    TuiDropdownPortal,
     TuiDropdownManual,
     TuiDropdownHover,
+    TuiDropdownContent,
     TuiDropdownContext,
     TuiDropdownPosition,
     TuiDropdownPositionSided,
@@ -1013,25 +995,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ standalone: true }]
         }], ctorParameters: () => [] });
 
-/**
- * Host element for dynamically created portals, for example using {@link TuiDropdownDirective}.
- */
-class TuiDropdowns extends TuiPortals {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdowns, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdowns, isStandalone: true, selector: "tui-dropdowns", host: { styleAttribute: "position: absolute; width: 100%; top: 0" }, providers: [tuiAsPortal(TuiDropdownService)], usesInheritance: true, ngImport: i0, template: '<ng-container #viewContainer />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdowns, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'tui-dropdowns',
-                    template: '<ng-container #viewContainer />',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [tuiAsPortal(TuiDropdownService)],
-                    host: { style: 'position: absolute; width: 100%; top: 0' },
-                }]
-        }] });
-
 class TuiWithDropdownOpen {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithDropdownOpen, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiWithDropdownOpen, isStandalone: true, hostDirectives: [{ directive: TuiDropdownOpen, inputs: ["tuiDropdownOpen", "open", "tuiDropdownEnabled", "tuiDropdownEnabled"], outputs: ["tuiDropdownOpenChange", "openChange"] }], ngImport: i0 }); }
@@ -1054,5 +1017,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownAuto, TuiDropdownComponent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOpenLegacy, TuiDropdownOptionsDirective, TuiDropdownPortal, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiDropdownService, TuiDropdowns, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOpen, tuiDropdownOptionsProvider };
+export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_CONTEXT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownAuto, TuiDropdownComponent, TuiDropdownContent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOpenLegacy, TuiDropdownOptionsDirective, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOpen, tuiDropdownOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-directives-dropdown.mjs.map