@taiga-ui/core 4.52.0-canary.91aeb4a → 4.52.0-canary.974ca4b

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, PLATFORM_ID, ElementRef, ContentChild, ViewContainerRef } from '@angular/core';
+import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, Input, EventEmitter, Output, ChangeDetectorRef, INJECTOR, signal, TemplateRef, computed, forwardRef, 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';
@@ -8,8 +8,8 @@ import * as i2 from '@taiga-ui/cdk/directives/animated';
 import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
 import { tuiInjectElement, tuiGetActualTarget, tuiPointToClientRect, tuiIsElement, tuiIsHTMLElement, tuiIsElementEditable, tuiIsTextNode, tuiIsTextfield } from '@taiga-ui/cdk/utils/dom';
 import { tuiClamp } from '@taiga-ui/cdk/utils/math';
-import { tuiProvide, tuiPure, tuiPx, tuiProvideOptions, tuiIsString, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
-import { TuiDriverDirective, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiAsRectAccessor, tuiAsVehicle, tuiPositionAccessorFor, tuiRectAccessorFor, tuiAsDriver, TuiDriver, tuiAsPositionAccessor } from '@taiga-ui/core/classes';
+import { tuiProvide, tuiPure, tuiPx, tuiSetSignal, tuiIsString, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
+import { TuiDriverDirective, TuiPositionAccessor, tuiFallbackAccessor, TuiRectAccessor, tuiAsVehicle, tuiPositionAccessorFor, tuiRectAccessorFor, tuiAsDriver, tuiAsRectAccessor, TuiDriver, tuiAsPositionAccessor } from '@taiga-ui/core/classes';
 import { TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
 import { TuiVisualViewportService, TuiPositionService } from '@taiga-ui/core/services';
 import { TUI_VIEWPORT, TUI_DARK_MODE, TUI_SELECTION_STREAM } from '@taiga-ui/core/tokens';
@@ -23,6 +23,7 @@ import { __decorate } from 'tslib';
 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 { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 import * as i1$1 from '@taiga-ui/cdk/directives/obscured';
 import { TuiObscured } from '@taiga-ui/cdk/directives/obscured';
 import { tuiIsKeyboardFocusable, tuiGetClosestFocusable, tuiIsFocusedIn, tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
@@ -48,10 +49,7 @@ class TuiDropdownDriverDirective extends TuiDriverDirective {
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownDriverDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDriverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                }]
+            type: Directive
         }] });
 
 /**
@@ -103,7 +101,6 @@ class TuiDropdownOptionsDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOptionsDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]',
                     providers: [tuiProvide(TUI_DROPDOWN_OPTIONS, TuiDropdownOptionsDirective)],
                 }]
@@ -138,7 +135,9 @@ class TuiDropdownPosition extends TuiPositionAccessor {
         this.viewport = inject(TUI_VIEWPORT);
         this.directionChange = new EventEmitter();
         this.type = 'dropdown';
-        this.accessor = tuiFallbackAccessor('dropdown')(inject(TuiRectAccessor), inject(TuiDropdownDirective, { optional: true }));
+        this.accessor = tuiFallbackAccessor('dropdown')(inject(TuiRectAccessor, { optional: true }), {
+            getClientRect: () => this.el.getBoundingClientRect(),
+        });
     }
     emitDirection(direction) {
         this.directionChange.emit(direction);
@@ -147,7 +146,7 @@ class TuiDropdownPosition extends TuiPositionAccessor {
         if (!width && !height) {
             this.previous = undefined;
         }
-        const hostRect = this.accessor?.getClientRect() ?? EMPTY_CLIENT_RECT;
+        const hostRect = this.accessor.getClientRect();
         const viewportRect = this.viewport.getClientRect();
         const { minHeight, direction, offset, limitWidth } = this.options;
         const align = this.getAlign(this.options.align);
@@ -198,10 +197,7 @@ __decorate([
     tuiPure
 ], TuiDropdownPosition.prototype, "emitDirection", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownPosition, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                }]
+            type: Directive
         }], propDecorators: { directionChange: [{
                 type: Output,
                 args: ['tuiDropdownDirectionChange']
@@ -270,20 +266,13 @@ class TuiDropdownDirective {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { tuiDropdown: "tuiDropdown" }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [
-            tuiAsRectAccessor(TuiDropdownDirective),
-            tuiAsVehicle(TuiDropdownDirective),
-        ], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownDirective, isStandalone: true, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: { tuiDropdown: "tuiDropdown" }, host: { properties: { "class.tui-dropdown-open": "ref()" } }, providers: [tuiAsVehicle(TuiDropdownDirective)], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdown]:not(ng-container):not(ng-template)',
-                    providers: [
-                        tuiAsRectAccessor(TuiDropdownDirective),
-                        tuiAsVehicle(TuiDropdownDirective),
-                    ],
+                    providers: [tuiAsVehicle(TuiDropdownDirective)],
                     exportAs: 'tuiDropdown',
                     hostDirectives: [
                         TuiDropdownDriverDirective,
@@ -355,7 +344,7 @@ class TuiDropdownComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownComponent, isStandalone: true, selector: "tui-dropdown", host: { properties: { "attr.data-appearance": "options.appearance", "attr.tuiTheme": "theme()" } }, providers: [
             TuiPositionService,
             tuiPositionAccessorFor('dropdown', TuiDropdownPosition),
-            tuiRectAccessorFor('dropdown', TuiDropdownDirective),
+            tuiRectAccessorFor('dropdown', forwardRef(() => TuiDropdownDirective)),
         ], hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownComponent, decorators: [{
@@ -363,7 +352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ selector: 'tui-dropdown', imports: [PolymorpheusOutlet, TuiScrollbar], changeDetection: ChangeDetectionStrategy.Default, providers: [
                         TuiPositionService,
                         tuiPositionAccessorFor('dropdown', TuiDropdownPosition),
-                        tuiRectAccessorFor('dropdown', TuiDropdownDirective),
+                        tuiRectAccessorFor('dropdown', forwardRef(() => TuiDropdownDirective)),
                     ], hostDirectives: [TuiActiveZone, TuiAnimated], host: {
                         '[attr.data-appearance]': 'options.appearance',
                         '[attr.tuiTheme]': 'theme()',
@@ -388,7 +377,6 @@ class TuiDropdownContent {
 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: () => [] });
@@ -436,7 +424,6 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownContext, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdownContext]',
                     providers: [
                         TuiActiveZone,
@@ -462,12 +449,7 @@ const TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS = {
 /**
  * Default parameters for dropdown hover directive
  */
-const TUI_DROPDOWN_HOVER_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_HOVER_OPTIONS' : '', {
-    factory: () => TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS,
-});
-function tuiDropdownHoverOptionsProvider(options) {
-    return tuiProvideOptions(TUI_DROPDOWN_HOVER_OPTIONS, options, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS);
-}
+const [TUI_DROPDOWN_HOVER_OPTIONS, tuiDropdownHoverOptionsProvider] = tuiCreateOptions(TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS);
 
 function shouldClose(event) {
     return (
@@ -492,7 +474,7 @@ class TuiDropdownOpen {
         // TODO: make it private when all legacy controls will be deleted from @taiga-ui/legacy (5.0)
         this.driver = inject(TuiDropdownDriver);
         this.sub = this.driver
-            .pipe(tuiIfMap(() => merge(tuiCloseWatcher(), this.obscured.tuiObscured.pipe(filter(Boolean)), this.activeZone.tuiActiveZoneChange.pipe(filter((a) => !a)), fromEvent(this.el, 'focusin').pipe(filter((event) => !this.host.contains(tuiGetActualTarget(event)) ||
+            .pipe(tuiIfMap(() => merge(tuiCloseWatcher(), this.obscured.tuiObscured$.pipe(filter(Boolean)), this.activeZone.tuiActiveZoneChange.pipe(filter((a) => !a)), fromEvent(this.el, 'focusin').pipe(filter((event) => !this.host.contains(tuiGetActualTarget(event)) ||
             !this.directive.ref())))), tuiZonefull(), tuiWatch(), takeUntilDestroyed())
             .subscribe(() => this.toggle(false));
         this.sync = this.driver.pipe(takeUntilDestroyed()).subscribe((open) => {
@@ -563,7 +545,7 @@ class TuiDropdownOpen {
         this.drive();
     }
     drive(open = !!this.tuiDropdownOpen && this.tuiDropdownEnabled) {
-        this.obscured.tuiObscuredEnabled = open;
+        tuiSetSignal(this.obscured.tuiObscuredEnabled, open);
         this.driver.next(open);
     }
     focusDropdown(previous) {
@@ -588,7 +570,6 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOpen, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]',
                     providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],
                     hostDirectives: [
@@ -659,7 +640,6 @@ class TuiDropdownHover extends TuiDriver {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownHover, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdownHover]',
                     providers: [TuiActiveZone, tuiAsDriver(TuiDropdownHover)],
                     host: {
@@ -691,7 +671,6 @@ class TuiDropdownManual {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownManual, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdownManual]',
                     providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],
                 }]
@@ -719,7 +698,6 @@ class TuiDropdownOpenLegacy {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownOpenLegacy, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdownOpen]:not([tuiDropdown]),[tuiDropdownOpenChange]:not([tuiDropdown])',
                 }]
         }], propDecorators: { tuiDropdownOpenChange: [{
@@ -779,7 +757,6 @@ class TuiDropdownPositionSided extends TuiPositionAccessor {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownPositionSided, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdownSided]',
                     providers: [TuiDropdownPosition, tuiAsPositionAccessor(TuiDropdownPositionSided)],
                 }]
@@ -920,7 +897,6 @@ class TuiDropdownSelection extends TuiDriver {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownSelection, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[tuiDropdownSelection]',
                     providers: [
                         tuiAsDriver(TuiDropdownSelection),
@@ -975,7 +951,6 @@ class TuiDropdownFixed {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownFixed, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     providers: [tuiDropdownOptionsProvider({})],
                 }]
         }], ctorParameters: () => [] });
@@ -991,8 +966,7 @@ class TuiDropdownAuto {
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDropdownAuto, isStandalone: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDropdownAuto, decorators: [{
-            type: Directive,
-            args: [{ standalone: true }]
+            type: Directive
         }], ctorParameters: () => [] });
 
 class TuiWithDropdownOpen {
@@ -1002,7 +976,6 @@ class TuiWithDropdownOpen {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiWithDropdownOpen, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     hostDirectives: [
                         {
                             directive: TuiDropdownOpen,