@taiga-ui/core 4.93.0 → 4.95.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.93.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiAppearanceV=\"4.93.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.93.0\"]:before,[tuiAppearanceV=\"4.93.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.93.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.93.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.93.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.95.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiAppearanceV=\"4.95.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.95.0\"]:before,[tuiAppearanceV=\"4.95.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.95.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.95.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.95.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.95.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.95.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.95.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.95.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.95.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.93.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.93.0\"]:before,[tuiAppearanceV=\"4.93.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.93.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.93.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.93.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.93.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.93.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.95.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.95.0\"]:before,[tuiAppearanceV=\"4.95.0\"]:after{transition-duration:inherit;transition-timing-function:ease-in-out}[tuiAppearanceV=\"4.95.0\"]:focus-visible:not([data-focus=false]){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.95.0\"][data-focus=true]{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.95.0\"][tuiWrapper]:not(._focused):has(:focus-visible){outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.95.0\"][tuiWrapper]._focused._focused{outline-color:var(--tui-border-focus)}[tuiAppearanceV=\"4.95.0\"]:disabled:not([data-state]),[tuiAppearanceV=\"4.95.0\"][data-state=disabled]{cursor:initial;opacity:var(--tui-disabled-opacity)}[tuiAppearanceV=\"4.95.0\"][tuiWrapper]:disabled:not([data-state]),[tuiAppearanceV=\"4.95.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.93.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.95.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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, Input, EventEmitter, Output, effect, signal, ChangeDetectorRef, INJECTOR, TemplateRef, ElementRef, computed, Component, ChangeDetectionStrategy, NgZone, ContentChild, ViewContainerRef } from '@angular/core';
+import { Injectable, Directive, InjectionToken, Optional, Self, SkipSelf, inject, Input, EventEmitter, Output, effect, signal, ChangeDetectorRef, INJECTOR, TemplateRef, ElementRef, computed, Component, ChangeDetectionStrategy, NgZone, ContentChild, PLATFORM_ID, 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';
@@ -14,14 +14,14 @@ 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';
 import { PolymorpheusComponent, PolymorpheusTemplate, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { BehaviorSubject, Subject, throttleTime, takeWhile, map, merge, filter, fromEvent, switchMap, delay, startWith, takeUntil, distinctUntilChanged, of, EMPTY, tap, share, combineLatest } from 'rxjs';
+import { BehaviorSubject, Subject, throttleTime, takeWhile, map, merge, filter, fromEvent, NEVER, switchMap, delay, startWith, takeUntil, distinctUntilChanged, of, EMPTY, 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 { tuiZonefreeScheduler, tuiTypedFromEvent, tuiZonefree, tuiIfMap, tuiCloseWatcher, tuiZonefull, tuiWatch } from '@taiga-ui/cdk/observables';
 import { tuiOverrideOptions, tuiCheckFixedPosition, tuiGetWordRange } from '@taiga-ui/core/utils';
 import { TuiPortalService, TuiPortals, tuiAsPortal } from '@taiga-ui/cdk/classes';
 import { __decorate } from 'tslib';
 import { TuiIdService } from '@taiga-ui/cdk/services';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { TUI_IS_TOUCH, TUI_RANGE } from '@taiga-ui/cdk/tokens';
 import * as i1$1 from '@taiga-ui/cdk/directives/obscured';
 import { TuiObscured } from '@taiga-ui/cdk/directives/obscured';
@@ -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-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:-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.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-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:-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.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 {
@@ -440,6 +440,7 @@ class TuiDropdownContext extends TuiRectAccessor {
         super(...arguments);
         this.zone = inject(NgZone);
         this.isTouch = inject(TUI_IS_TOUCH);
+        this.el = tuiInjectElement();
         this.currentRect = EMPTY_CLIENT_RECT;
         this.userSelect = computed(() => (this.isTouch() ? 'none' : null));
         this.activeZone = inject(TuiActiveZone);
@@ -454,8 +455,10 @@ class TuiDropdownContext extends TuiRectAccessor {
         return this.currentRect;
     }
     closeDropdown(event) {
-        if (!event ||
-            (this.driver.value && !this.activeZone.contains(tuiGetActualTarget(event)))) {
+        const target = event ? tuiGetActualTarget(event) : null;
+        if (!target ||
+            (this.driver.value &&
+                (!this.activeZone.contains(target) || this.el.contains(target)))) {
             this.zone.run(() => {
                 this.driver.next(false);
                 this.currentRect = EMPTY_CLIENT_RECT;
@@ -682,10 +685,9 @@ class TuiDropdownHover extends TuiDriver {
          * 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.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);
-        }), share());
+        this.stream$ = isPlatformBrowser(inject(PLATFORM_ID))
+            ? this.createStream()
+            : NEVER;
         this.showDelay = this.options.showDelay;
         this.hideDelay = this.options.hideDelay;
         this.hovered = false;
@@ -702,6 +704,20 @@ class TuiDropdownHover extends TuiDriver {
         const child = !this.el.contains(element) && this.activeZone.contains(element);
         return hovered || child;
     }
+    createStream() {
+        const root = this.el.getRootNode();
+        const mouseover$ = tuiTypedFromEvent(root, 'mouseover');
+        const mouseout$ = tuiTypedFromEvent(root, 'mouseout');
+        return merge(
+        /**
+         * Dropdown can be removed not only via click/touch –
+         * swipe on mobile devices removes dropdown sheet without triggering new mouseover / mouseout events.
+         */
+        this.dropdownExternalRemoval$.pipe(switchMap(() => tuiTypedFromEvent(this.doc, 'pointerdown').pipe(map(tuiGetActualTarget), delay(this.hideDelay), startWith(null), takeUntil(mouseover$)))), mouseover$.pipe(map(tuiGetActualTarget)), mouseout$.pipe(map((event) => event.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))), tap((hovered) => {
+            this.hovered = hovered;
+            this.open?.toggle(hovered);
+        }), share());
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownHover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDropdownHover, isStandalone: true, selector: "[tuiDropdownHover]", inputs: { showDelay: ["tuiDropdownShowDelay", "showDelay"], hideDelay: ["tuiDropdownHideDelay", "hideDelay"] }, host: { listeners: { "click.capture": "onClick($event)" } }, providers: [TuiActiveZone, tuiAsDriver(TuiDropdownHover)], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0 }); }
 }