@taiga-ui/core 4.74.1 → 4.75.0

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, Component, ChangeDetectionStrategy, ElementRef, 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, 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';
@@ -20,9 +20,9 @@ import { tuiZonefreeScheduler, tuiTypedFromEvent, tuiZonefree, tuiIfMap, tuiClos
 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 { 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, tuiGetFocused } from '@taiga-ui/cdk/utils/focus';
@@ -61,6 +61,7 @@ const TUI_DROPDOWN_COMPONENT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_COMP
     factory: () => TuiDropdownComponent,
 });
 const TUI_DROPDOWN_CONTEXT = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_CONTEXT' : '');
+const TUI_DROPDOWN_HOST = new InjectionToken(ngDevMode ? 'TUI_DROPDOWN_HOST' : '');
 
 class TuiDropdownService extends TuiPortalService {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -218,6 +219,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['tuiDropdownDirectionChange']
             }], emitDirection: [] } });
 
+class TuiDropdownA11y {
+    constructor() {
+        this.id = inject(TuiIdService).generate();
+        this.host = inject(TUI_DROPDOWN_HOST);
+        this.dropdown = inject(TuiDropdownDirective);
+        this.sync = effect(() => {
+            const content = this.dropdown._content();
+            const dropdown = this.dropdown.ref();
+            const host = this.host.nativeElement;
+            host.setAttribute('aria-expanded', String(!!dropdown));
+            host.setAttribute('aria-controls', this.id);
+            host.setAttribute('aria-haspopup', this._tuiDropdownRole());
+            if (host.matches('input')) {
+                if (content) {
+                    host.setAttribute('role', 'combobox');
+                }
+                else {
+                    host.removeAttribute('role');
+                }
+            }
+            dropdown?.location.nativeElement.setAttribute('role', this._tuiDropdownRole());
+            dropdown?.location.nativeElement.setAttribute('id', this.id);
+            if (content) {
+                return;
+            }
+            host.removeAttribute('aria-expanded');
+            host.removeAttribute('aria-controls');
+            host.removeAttribute('aria-haspopup');
+        });
+        // TODO: refactor to signal inputs after Angular update
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        this._tuiDropdownRole = signal('listbox');
+    }
+    set tuiDropdownRole(role) {
+        this._tuiDropdownRole.set(role);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownA11y, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDropdownA11y, isStandalone: true, selector: "[tuiDropdownA11y]", inputs: { tuiDropdownRole: "tuiDropdownRole" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownA11y, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: '[tuiDropdownA11y]' }]
+        }], propDecorators: { tuiDropdownRole: [{
+                type: Input
+            }] } });
+
 class TuiDropdownDirective {
     constructor() {
         this.refresh$ = new Subject();
@@ -286,7 +333,8 @@ class TuiDropdownDirective {
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+            tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
+        ], exportAs: ["tuiDropdown"], hostDirectives: [{ directive: TuiDropdownDriverDirective }, { directive: TuiDropdownA11y, inputs: ["tuiDropdownRole", "tuiDropdownRole"] }, { directive: TuiDropdownPosition, outputs: ["tuiDropdownDirectionChange", "tuiDropdownDirectionChange"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
@@ -296,10 +344,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     providers: [
                         tuiAsRectAccessor(TuiDropdownDirective),
                         tuiAsVehicle(TuiDropdownDirective),
+                        tuiProvide(TUI_DROPDOWN_HOST, ElementRef),
                     ],
                     exportAs: 'tuiDropdown',
                     hostDirectives: [
                         TuiDropdownDriverDirective,
+                        { directive: TuiDropdownA11y, inputs: ['tuiDropdownRole'] },
                         {
                             directive: TuiDropdownPosition,
                             outputs: ['tuiDropdownDirectionChange'],
@@ -385,13 +435,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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:-webkit-max-content;inline-size:max-content;overscroll-behavior:none}.t-primitive{padding:1rem}\n"] }]
         }] });
 
-function activeZoneFilter(event) {
-    return (!event ||
-        (this.driver.value && !this.activeZone.contains(tuiGetActualTarget(event))));
-}
 class TuiDropdownContext extends TuiRectAccessor {
     constructor() {
         super(...arguments);
+        this.zone = inject(NgZone);
         this.isTouch = inject(TUI_IS_TOUCH);
         this.currentRect = EMPTY_CLIENT_RECT;
         this.userSelect = computed(() => (this.isTouch() ? 'none' : null));
@@ -406,9 +453,14 @@ class TuiDropdownContext extends TuiRectAccessor {
     getClientRect() {
         return this.currentRect;
     }
-    closeDropdown(_event) {
-        this.driver.next(false);
-        this.currentRect = EMPTY_CLIENT_RECT;
+    closeDropdown(event) {
+        if (!event ||
+            (this.driver.value && !this.activeZone.contains(tuiGetActualTarget(event)))) {
+            this.zone.run(() => {
+                this.driver.next(false);
+                this.currentRect = EMPTY_CLIENT_RECT;
+            });
+        }
     }
     onContextMenu(x, y) {
         this.currentRect = tuiPointToClientRect(x, y);
@@ -422,9 +474,6 @@ class TuiDropdownContext extends TuiRectAccessor {
             tuiAsRectAccessor(TuiDropdownContext),
         ], usesInheritance: true, ngImport: i0 }); }
 }
-__decorate([
-    shouldCall(activeZoneFilter)
-], TuiDropdownContext.prototype, "closeDropdown", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownContext, decorators: [{
             type: Directive,
             args: [{
@@ -444,7 +493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '(longtap)': 'onContextMenu($event.detail.clientX, $event.detail.clientY)',
                     },
                 }]
-        }], propDecorators: { closeDropdown: [] } });
+        }] });
 
 /** Default values for hint options */
 const TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS = {
@@ -461,22 +510,13 @@ function tuiDropdownHoverOptionsProvider(options) {
     return tuiProvideOptions(TUI_DROPDOWN_HOVER_OPTIONS, options, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS);
 }
 
-function shouldClose(event) {
-    return (
-    // @ts-ignore
-    typeof CloseWatcher === 'undefined' &&
-        // ?. for auto fill events
-        event.key?.toLowerCase() === 'escape' &&
-        this.tuiDropdownEnabled &&
-        !!this.tuiDropdownOpen &&
-        !this['dropdown']()?.nextElementSibling);
-}
 class TuiDropdownOpen {
     constructor() {
         this.directive = inject(TuiDropdownDirective);
         this.el = tuiInjectElement();
         this.obscured = inject(TuiObscured);
         this.activeZone = inject(TuiActiveZone);
+        this.zone = inject(NgZone);
         this.dropdown = computed(() => this.directive.ref()?.location.nativeElement);
         this.tuiDropdownEnabled = true;
         this.tuiDropdownOpen = false;
@@ -484,7 +524,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.nativeElement.contains(tuiGetActualTarget(event)) ||
             !this.directive.ref())))), tuiZonefull(), tuiWatch(), takeUntilDestroyed())
             .subscribe(() => this.toggle(false));
         this.sync = this.driver.pipe(takeUntilDestroyed()).subscribe((open) => {
@@ -493,28 +533,46 @@ class TuiDropdownOpen {
             }
         });
     }
+    get nativeElement() {
+        const initial = this.dropdownHost?.nativeElement || this.el;
+        const focusable = tuiIsNativeKeyboardFocusable(initial)
+            ? initial
+            : tuiGetClosestFocusable({ initial, root: this.el });
+        return this.dropdownHost?.nativeElement || focusable || this.el;
+    }
     ngOnChanges() {
         this.drive(!!this.tuiDropdownOpen);
         this.tuiDropdownOpenChange.emit(!!this.tuiDropdownOpen);
     }
     toggle(open) {
         if (this.focused && !open) {
-            this.host.focus({ preventScroll: true });
+            this.nativeElement.focus({ preventScroll: true });
         }
         this.update(open);
     }
     onEsc(event) {
-        event.preventDefault();
-        this.toggle(false);
+        if (
+        // @ts-ignore
+        typeof CloseWatcher === 'undefined' &&
+            // ?. for autofill events
+            event.key?.toLowerCase() === 'escape' &&
+            this.tuiDropdownEnabled &&
+            !!this.tuiDropdownOpen &&
+            !this.dropdown()?.nextElementSibling) {
+            this.zone.run(() => {
+                event.preventDefault();
+                this.toggle(false);
+            });
+        }
     }
     onClick(target) {
-        if (!this.editable && this.host.contains(target)) {
+        if (!this.editable && this.nativeElement.contains(target)) {
             this.update(!this.tuiDropdownOpen);
         }
     }
     onArrow(event, up) {
         if (!tuiIsElement(event.target) ||
-            !this.host.contains(event.target) ||
+            !this.nativeElement.contains(event.target) ||
             !this.tuiDropdownEnabled ||
             !this.directive._content()) {
             return;
@@ -530,21 +588,15 @@ class TuiDropdownOpen {
             this.focused &&
             tuiIsHTMLElement(target) &&
             !tuiIsElementEditable(target)) {
-            this.host.focus({ preventScroll: true });
+            this.nativeElement.focus({ preventScroll: true });
         }
     }
-    get host() {
-        const initial = this.dropdownHost?.nativeElement || this.el;
-        const focusable = tuiIsNativeKeyboardFocusable(initial)
-            ? initial
-            : tuiGetClosestFocusable({ initial, root: this.el });
-        return this.dropdownHost?.nativeElement || focusable || this.el;
-    }
     get editable() {
-        return tuiIsElementEditable(this.host);
+        return tuiIsElementEditable(this.nativeElement);
     }
     get focused() {
-        return tuiIsNativeFocusedIn(this.host) || tuiIsNativeFocusedIn(this.dropdown());
+        return (tuiIsNativeFocusedIn(this.nativeElement) ||
+            tuiIsNativeFocusedIn(this.dropdown()));
     }
     update(open) {
         if (open && !this.tuiDropdownEnabled) {
@@ -572,17 +624,22 @@ class TuiDropdownOpen {
         focusable?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownOpen, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDropdownOpen, isStandalone: true, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: { tuiDropdownEnabled: "tuiDropdownEnabled", tuiDropdownOpen: "tuiDropdownOpen" }, outputs: { tuiDropdownOpenChange: "tuiDropdownOpenChange" }, host: { listeners: { "click": "onClick($event.target)", "keydown.arrowDown": "onArrow($event, false)", "keydown.arrowUp": "onArrow($event, true)", "document:keydown.zoneless.capture": "onEsc($event)", "document:keydown.zoneless": "onKeydown($event)", "tuiActiveZoneChange": "0" } }, providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1$1.TuiObscured }, { directive: i1.TuiActiveZone, inputs: ["tuiActiveZoneParent", "tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange", "tuiActiveZoneChange"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDropdownOpen, isStandalone: true, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: { tuiDropdownEnabled: "tuiDropdownEnabled", tuiDropdownOpen: "tuiDropdownOpen" }, outputs: { tuiDropdownOpenChange: "tuiDropdownOpenChange" }, host: { listeners: { "click": "onClick($event.target)", "keydown.arrowDown": "onArrow($event, false)", "keydown.arrowUp": "onArrow($event, true)", "document:keydown.zoneless.capture": "onEsc($event)", "document:keydown.zoneless": "onKeydown($event)", "tuiActiveZoneChange": "0" } }, providers: [
+            TuiDropdownDriver,
+            tuiAsDriver(TuiDropdownDriver),
+            tuiProvide(TUI_DROPDOWN_HOST, TuiDropdownOpen),
+        ], queries: [{ propertyName: "dropdownHost", first: true, predicate: ["tuiDropdownHost"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1$1.TuiObscured }, { directive: i1.TuiActiveZone, inputs: ["tuiActiveZoneParent", "tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange", "tuiActiveZoneChange"] }], ngImport: i0 }); }
 }
-__decorate([
-    shouldCall(shouldClose)
-], TuiDropdownOpen.prototype, "onEsc", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDropdownOpen, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]',
-                    providers: [TuiDropdownDriver, tuiAsDriver(TuiDropdownDriver)],
+                    providers: [
+                        TuiDropdownDriver,
+                        tuiAsDriver(TuiDropdownDriver),
+                        tuiProvide(TUI_DROPDOWN_HOST, TuiDropdownOpen),
+                    ],
                     hostDirectives: [
                         TuiObscured,
                         {
@@ -610,7 +667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], tuiDropdownOpenChange: [{
                 type: Output
-            }], onEsc: [] } });
+            }] } });
 
 class TuiDropdownHover extends TuiDriver {
     constructor() {
@@ -989,6 +1046,7 @@ const TuiDropdown = [
     TuiDropdownPosition,
     TuiDropdownPositionSided,
     TuiDropdownSelection,
+    TuiDropdownA11y,
 ];
 
 function tuiDropdown(value) {
@@ -1077,5 +1135,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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_HOST, TUI_DROPDOWN_HOVER_DEFAULT_OPTIONS, TUI_DROPDOWN_HOVER_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdown, TuiDropdownA11y, TuiDropdownAuto, TuiDropdownComponent, TuiDropdownContext, TuiDropdownDirective, TuiDropdownDriver, TuiDropdownDriverDirective, TuiDropdownFixed, TuiDropdownHover, TuiDropdownManual, TuiDropdownOpen, TuiDropdownOpenLegacy, TuiDropdownOptionsDirective, TuiDropdownPortal, TuiDropdownPosition, TuiDropdownPositionSided, TuiDropdownSelection, TuiDropdownService, TuiDropdowns, TuiWithDropdownOpen, tuiDropdown, tuiDropdownEnabled, tuiDropdownHoverOptionsProvider, tuiDropdownOpen, tuiDropdownOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-directives-dropdown.mjs.map