@taiga-ui/core 4.96.0 → 4.97.0

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

@@ -18,11 +18,11 @@ function tuiAppearanceOptionsProvider(token) {
 
 class TuiAppearanceStyles {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearanceStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearanceStyles, isStandalone: true, selector: "ng-component", exportAs: ["tui-appearance-4.96.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiAppearanceV=\"4.96.0\"]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;-webkit-appearance:none;appearance:none;outline:.125rem solid transparent;outline-offset:-.125rem;transition-property:color,background-color,opacity,box-shadow,border-color,border-radius,filter}[tuiAppearanceV=\"4.96.0\"]:before,[tuiAppearanceV=\"4.96.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.96.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.96.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.96.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.96.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.96.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.96.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.96.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.96.0\"][tuiWrapper][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearanceStyles, isStandalone: true, selector: "ng-component", exportAs: ["tui-appearance-4.97.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiAppearanceV=\"4.97.0\"]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;-webkit-appearance:none;appearance:none;outline:.125rem solid transparent;outline-offset:-.125rem;transition-property:color,background-color,opacity,box-shadow,border-color,border-radius,filter}[tuiAppearanceV=\"4.97.0\"]:before,[tuiAppearanceV=\"4.97.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.97.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.97.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.97.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.97.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.97.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.97.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.97.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.97.0\"][tuiWrapper][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearanceStyles, decorators: [{
             type: Component,
-            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-appearance-${TUI_VERSION}`, styles: ["[tuiAppearanceV=\"4.96.0\"]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;-webkit-appearance:none;appearance:none;outline:.125rem solid transparent;outline-offset:-.125rem;transition-property:color,background-color,opacity,box-shadow,border-color,border-radius,filter}[tuiAppearanceV=\"4.96.0\"]:before,[tuiAppearanceV=\"4.96.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.96.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.96.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.96.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.96.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.96.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.96.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.96.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.96.0\"][tuiWrapper][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}\n"] }]
+            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-appearance-${TUI_VERSION}`, styles: ["[tuiAppearanceV=\"4.97.0\"]{transition-property:all;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;-webkit-appearance:none;appearance:none;outline:.125rem solid transparent;outline-offset:-.125rem;transition-property:color,background-color,opacity,box-shadow,border-color,border-radius,filter}[tuiAppearanceV=\"4.97.0\"]:before,[tuiAppearanceV=\"4.97.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.97.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.97.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.97.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.97.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.97.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.97.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.97.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.97.0\"][tuiWrapper][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}\n"] }]
         }] });
 class TuiAppearance {
     constructor() {
@@ -58,7 +58,7 @@ class TuiAppearance {
         this.mode.set(mode);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearance, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearance, isStandalone: true, selector: "[tuiAppearance]", inputs: { tuiAppearance: "tuiAppearance", tuiAppearanceState: "tuiAppearanceState", tuiAppearanceFocus: "tuiAppearanceFocus", tuiAppearanceMode: "tuiAppearanceMode" }, host: { attributes: { "tuiAppearance": "", "tuiAppearanceV": "4.96.0" }, properties: { "attr.data-appearance": "appearance()", "attr.data-state": "state()", "attr.data-focus": "focus()", "attr.data-mode": "modes()" } }, hostDirectives: [{ directive: i1.TuiTransitioned }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiAppearance, isStandalone: true, selector: "[tuiAppearance]", inputs: { tuiAppearance: "tuiAppearance", tuiAppearanceState: "tuiAppearanceState", tuiAppearanceFocus: "tuiAppearanceFocus", tuiAppearanceMode: "tuiAppearanceMode" }, host: { attributes: { "tuiAppearance": "", "tuiAppearanceV": "4.97.0" }, properties: { "attr.data-appearance": "appearance()", "attr.data-state": "state()", "attr.data-focus": "focus()", "attr.data-mode": "modes()" } }, hostDirectives: [{ directive: i1.TuiTransitioned }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAppearance, decorators: [{
             type: Directive,

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

@@ -421,7 +421,7 @@ class TuiDropdownComponent {
             TuiPositionService,
             tuiPositionAccessorFor('dropdown', TuiDropdownPosition),
             tuiRectAccessorFor('dropdown', 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-1);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:-webkit-max-content;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 }); }
+        ], 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-1);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:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}: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:-webkit-max-content;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: "16.2.12", ngImport: i0, type: TuiDropdownComponent, decorators: [{
             type: Component,
@@ -432,7 +432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], hostDirectives: [TuiActiveZone, TuiAnimated], host: {
                         '[attr.data-appearance]': 'options.appearance',
                         '[attr.tuiTheme]': 'theme()',
-                    }, 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-1);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:-webkit-max-content;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"] }]
+                    }, 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-1);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:has(tui-data-list[data-size=l]){border-radius:var(--tui-radius-l)}: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:-webkit-max-content;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"] }]
         }] });
 
 class TuiDropdownContext extends TuiRectAccessor {
@@ -675,16 +675,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class TuiDropdownHover extends TuiDriver {
     constructor() {
         super((subscriber) => this.stream$.subscribe(subscriber));
+        this.directive = inject(TuiDropdownDirective);
         this.el = tuiInjectElement();
         this.doc = inject(DOCUMENT);
         this.options = inject(TUI_DROPDOWN_HOVER_OPTIONS);
-        this.activeZone = inject(TuiActiveZone);
         this.open = inject(TuiDropdownOpen, { optional: true });
         /**
          * Dropdown can be removed not only via click/touch –
          * swipe on mobile devices removes dropdown sheet without triggering new mouseover / mouseout events.
          */
-        this.dropdownExternalRemoval$ = toObservable(inject(TuiDropdownDirective).ref).pipe(filter((x) => !x && this.hovered));
+        this.dropdownExternalRemoval$ = toObservable(this.directive.ref).pipe(filter((x) => !x && this.hovered));
         this.stream$ = merge(this.dropdownExternalRemoval$.pipe(switchMap(() => tuiTypedFromEvent(this.doc, 'pointerdown').pipe(map(tuiGetActualTarget), delay(this.hideDelay), startWith(null), takeUntil(fromEvent(this.doc, 'mouseover'))))), tuiTypedFromEvent(this.doc, 'mouseover').pipe(map(tuiGetActualTarget)), tuiTypedFromEvent(this.doc, 'mouseout').pipe(map((e) => e.relatedTarget))).pipe(map((element) => tuiIsElement(element) && this.isHovered(element)), distinctUntilChanged(), switchMap((visible) => of(visible).pipe(delay(visible ? this.showDelay : this.hideDelay), takeUntil(this.open ? fromEvent(this.el, 'pointerdown') : EMPTY))), tuiZoneOptimized(), tap((hovered) => {
             this.hovered = hovered;
             this.open?.toggle(hovered);
@@ -701,8 +701,10 @@ class TuiDropdownHover extends TuiDriver {
     }
     isHovered(element) {
         const host = this.dropdownHost?.nativeElement || this.el;
+        // Match the dropdown's own content zone, not the host's, so overlays (e.g. a dialog) don't count as hovered
+        const zone = this.directive.ref()?.injector.get(TuiActiveZone, null);
         const hovered = host.contains(element);
-        const child = !this.el.contains(element) && this.activeZone.contains(element);
+        const child = !this.el.contains(element) && !!zone?.contains(element);
         return hovered || child;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }