feat(addon-mobile): DropdownMobile add new directive

projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.component.ts

@@ -0,0 +1,154 @@
+import {DOCUMENT, NgIf} from '@angular/common';
+import type {AfterViewInit, OnDestroy} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    ViewEncapsulation,
+} from '@angular/core';
+import {IntersectionObserverModule} from '@ng-web-apis/intersection-observer';
+import {TuiKeyboardService} from '@taiga-ui/addon-mobile/services';
+import type {TuiSwipe} from '@taiga-ui/cdk';
+import {
+    TuiActiveZoneDirective,
+    tuiGetNativeFocused,
+    tuiInjectElement,
+    tuiIsElement,
+    tuiIsNodeIn,
+    tuiPx,
+    TuiSwipeDirective,
+} from '@taiga-ui/cdk';
+import {
+    TUI_ANIMATIONS_SPEED,
+    TuiDropdownDirective,
+    tuiFadeIn,
+    tuiGetDuration,
+    tuiSlideInTop,
+} from '@taiga-ui/core';
+import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
+
+import {TuiDropdownMobileDirective} from './dropdown-mobile.directive';
+
+const GAP = 16;
+
+@Component({
+    standalone: true,
+    selector: 'tui-dropdown-mobile',
+    imports: [IntersectionObserverModule, TuiSwipeDirective, NgIf, PolymorpheusModule],
+    templateUrl: './dropdown-mobile.template.html',
+    styleUrls: ['./dropdown-mobile.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    animations: [tuiSlideInTop, tuiFadeIn],
+    hostDirectives: [TuiActiveZoneDirective],
+    host: {
+        '[@tuiFadeIn]': 'animation',
+        '[@tuiSlideInTop]': 'animation',
+        '[class._sheet]': 'directive.tuiDropdownMobile',
+        '(document:click.silent.capture)': 'onClick($event)',
+        '(window>scroll.silent.capture)': 'refresh($event.currentTarget.visualViewport)',
+        '(visualViewport>resize.silent)': 'refresh($event.target)',
+        '(visualViewport>scroll.silent)': 'refresh($event.target)',
+    },
+})
+export class TuiDropdownMobileComponent implements OnDestroy, AfterViewInit {
+    private readonly el = tuiInjectElement();
+    private readonly keyboard = inject(TuiKeyboardService);
+    private readonly doc = inject(DOCUMENT);
+    private readonly scrollTop = this.doc.documentElement.scrollTop;
+    private readonly observer = new ResizeObserver(() =>
+        this.refresh(this.doc.defaultView!.visualViewport!),
+    );
+
+    protected readonly directive = inject(TuiDropdownMobileDirective);
+    protected readonly dropdown = inject(TuiDropdownDirective);
+    protected readonly animation = {
+        value: '',
+        params: {
+            start: '100vh',
+            duration: tuiGetDuration(inject(TUI_ANIMATIONS_SPEED)),
+        },
+    } as const;
+
+    constructor() {
+        this.observer.observe(this.dropdown.el);
+        this.doc.documentElement.style.setProperty('scroll-behavior', 'initial');
+    }
+
+    public ngAfterViewInit(): void {
+        this.el.scrollTop = this.directive.tuiDropdownMobile ? this.el.clientHeight : 0;
+    }
+
+    public ngOnDestroy(): void {
+        this.observer.disconnect();
+        this.doc.body.classList.remove('t-dropdown-mobile');
+        this.doc.body.style.removeProperty('--t-root-top');
+        this.doc.documentElement.scrollTop = this.scrollTop;
+        this.doc.documentElement.style.removeProperty('scroll-behavior');
+
+        if (this.focused) {
+            this.keyboard.hide();
+        }
+    }
+
+    protected onClick(event: MouseEvent): void {
+        if (
+            !this.el.contains(event.target as Node) &&
+            // TODO: find a better way to check if the click is inside interactive element in textfield
+            !(
+                tuiIsNodeIn(event.target as Node, 'tui-svg') ||
+                (tuiIsElement(event.target) && event.target.tagName === 'button')
+            )
+        ) {
+            event.stopPropagation();
+        }
+    }
+
+    protected onSwipe({direction}: TuiSwipe, el: HTMLElement): void {
+        if (
+            direction === 'bottom' &&
+            el.getBoundingClientRect().bottom > Number(this.doc.defaultView?.innerHeight)
+        ) {
+            this.close();
+        }
+    }
+
+    protected onIntersection([{isIntersecting}]: IntersectionObserverEntry[]): void {
+        if (isIntersecting) {
+            this.close();
+        }
+    }
+
+    protected close(): void {
+        this.dropdown.toggle(false);
+    }
+
+    protected refresh({offsetTop, height}: VisualViewport): void {
+        this.doc.body.style.removeProperty('--t-root-top');
+
+        if (
+            !this.focused ||
+            this.directive.tuiDropdownMobile ||
+            !this.doc.documentElement.style.getPropertyValue('scroll-behavior')
+        ) {
+            return;
+        }
+
+        this.doc.documentElement.scrollTop = 0;
+
+        const rect = this.dropdown.el.getBoundingClientRect();
+        const offset = rect.height + GAP * 2;
+
+        this.el.style.setProperty('top', tuiPx(offsetTop + offset));
+        this.el.style.setProperty('height', tuiPx(height - offset));
+        this.doc.body.classList.add('t-dropdown-mobile');
+        this.doc.body.style.setProperty(
+            '--t-root-top',
+            tuiPx(offsetTop + GAP - rect.top),
+        );
+    }
+
+    private get focused(): boolean {
+        return this.dropdown.el.contains(tuiGetNativeFocused(this.doc));
+    }
+}

projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.directive.ts

@@ -0,0 +1,42 @@
+import {Directive, HostListener, inject, Input} from '@angular/core';
+import {TUI_IS_MOBILE, tuiIsHTMLElement} from '@taiga-ui/cdk';
+import {TUI_DROPDOWN_COMPONENT} from '@taiga-ui/core';
+
+import {TuiDropdownMobileComponent} from './dropdown-mobile.component';
+
+@Directive({
+    standalone: true,
+    selector: '[tuiDropdownMobile]',
+    providers: [
+        {
+            provide: TUI_DROPDOWN_COMPONENT,
+            useFactory: () =>
+                inject(TUI_IS_MOBILE)
+                    ? TuiDropdownMobileComponent
+                    : inject(TUI_DROPDOWN_COMPONENT, {skipSelf: true}),
+        },
+    ],
+    host: {
+        '[style.visibility]': '"visible"',
+    },
+})
+export class TuiDropdownMobileDirective {
+    private readonly isMobile = inject(TUI_IS_MOBILE);
+
+    @Input()
+    public tuiDropdownMobile = '';
+
+    @HostListener('mousedown', ['$event'])
+    protected onMouseDown(event: MouseEvent): void {
+        if (
+            !this.isMobile ||
+            !tuiIsHTMLElement(event.target) ||
+            !event.target.matches('input,textarea')
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+        event.target.focus({preventScroll: true});
+    }
+}

projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less

@@ -0,0 +1,108 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+tui-dropdown-mobile:not(._sheet) {
+    .scrollbar-hidden();
+    .fullsize(fixed);
+    .transition(transform);
+
+    visibility: visible !important;
+    transform: translate3d(0, 0, 0);
+    background: var(--tui-base-01);
+    overscroll-behavior: contain;
+    overflow: auto;
+    box-shadow:
+        0 -0.5rem 0.5rem var(--tui-base-01),
+        0 10rem var(--tui-base-01),
+        0 20rem var(--tui-base-01),
+        0 30rem var(--tui-base-01);
+
+    &:after {
+        content: '';
+        display: block;
+        height: 1px;
+    }
+
+    > .t-container {
+        .scrollbar-hidden();
+
+        position: sticky;
+        top: 0;
+        height: 100%;
+        overflow: auto;
+        margin: 0 0.75rem;
+        touch-action: pan-y !important;
+    }
+
+    [tuiDropdownButton][tuiDropdownButton] {
+        position: fixed;
+        right: 1rem;
+        bottom: 1rem;
+        display: inline-flex;
+    }
+}
+
+tui-dropdown-mobile._sheet {
+    .fullsize(fixed, inset);
+    .scrollbar-hidden();
+
+    overflow: auto;
+    background: rgba(0, 0, 0, 0.75);
+    /* stylelint-disable-next-line */
+    box-shadow: 0 -50vh 5rem 5rem rgba(0, 0, 0, 0.75);
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
+    overscroll-behavior: none;
+
+    > .t-filler {
+        height: 100%;
+        scroll-snap-stop: always;
+        scroll-snap-align: start;
+    }
+
+    > .t-container {
+        display: flex;
+        max-height: calc(100% - 1rem);
+        flex-direction: column;
+        border-top-left-radius: 1rem;
+        border-top-right-radius: 1rem;
+        padding: 0 0.5rem;
+        scroll-snap-stop: always;
+        scroll-snap-align: start;
+        background: var(--tui-elevation-01);
+
+        > .t-heading {
+            position: relative;
+            margin: 0;
+            padding: 2rem 0.5rem 0.75rem;
+            font: var(--tui-font-heading-6);
+
+            &:before {
+                content: '';
+                position: absolute;
+                left: 50%;
+                top: 0.75rem;
+                width: 2rem;
+                height: 0.25rem;
+                border-radius: 1rem;
+                background: var(--tui-clear-hover);
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        > .t-content {
+            .scrollbar-hidden();
+
+            overflow: auto;
+        }
+    }
+}
+
+.t-dropdown-mobile {
+    touch-action: none;
+    visibility: hidden;
+
+    * {
+        touch-action: inherit;
+        visibility: inherit;
+    }
+}

projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.template.html

@@ -0,0 +1,25 @@
+<div
+    *ngIf="directive.tuiDropdownMobile"
+    waIntersectionObserver
+    waIntersectionThreshold="1"
+    class="t-filler"
+    (touchstart.silent)="close()"
+    (waIntersectionObservee)="onIntersection($event)"
+></div>
+<div
+    #container
+    class="t-container"
+    (tuiSwipe)="onSwipe($event, container)"
+>
+    <h2
+        *ngIf="directive.tuiDropdownMobile"
+        class="t-heading"
+    >
+        {{ directive.tuiDropdownMobile }}
+    </h2>
+    <div class="t-content">
+        <ng-container *polymorpheusOutlet="dropdown.content as text">
+            {{ text }}
+        </ng-container>
+    </div>
+</div>

projects/addon-mobile/directives/dropdown-mobile/index.ts

@@ -0,0 +1,2 @@
+export * from './dropdown-mobile.component';
+export * from './dropdown-mobile.directive';

projects/addon-mobile/directives/dropdown-mobile/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/addon-mobile/directives/index.ts

@@ -1,3 +1,4 @@
+export * from '@taiga-ui/addon-mobile/directives/dropdown-mobile';
 export * from '@taiga-ui/addon-mobile/directives/elastic-sticky';
 export * from '@taiga-ui/addon-mobile/directives/ripple';
 export * from '@taiga-ui/addon-mobile/directives/sidebar';

projects/cdk/utils/dom/get-element-obscurers.ts

@@ -53,7 +53,7 @@ export function tuiGetElementObscures(element: Element): readonly Element[] | nu
         return nonNull;
     }
 
-    const filtered = nonNull.filter(el => !element.contains(el));
+    const filtered = nonNull.filter(el => !element.contains(el) && !el.contains(element));
 
     return filtered.length === 4 ? filtered : null;
 }

projects/core/components/data-list/option/option.component.ts

@@ -9,7 +9,7 @@ import {
     Input,
 } from '@angular/core';
 import type {TuiEventWith} from '@taiga-ui/cdk';
-import {tuiInjectElement, tuiIsNativeFocused} from '@taiga-ui/cdk';
+import {TUI_IS_MOBILE, tuiInjectElement, tuiIsNativeFocused} from '@taiga-ui/cdk';
 import {TuiDropdownDirective} from '@taiga-ui/core/directives/dropdown';
 import type {TuiDataListHost} from '@taiga-ui/core/interfaces';
 import {
@@ -22,8 +22,11 @@ import {shouldCall} from '@tinkoff/ng-event-plugins';
 
 import {TuiDataListComponent} from '../data-list.component';
 
-function shouldFocus({currentTarget}: TuiEventWith<MouseEvent, HTMLElement>): boolean {
-    return !tuiIsNativeFocused(currentTarget);
+function shouldFocus(
+    this: TuiOptionComponent,
+    {currentTarget}: TuiEventWith<MouseEvent, HTMLElement>,
+): boolean {
+    return !this.isMobile && !tuiIsNativeFocused(currentTarget);
 }
 
 // TODO: Consider all use cases for aria roles
@@ -59,6 +62,8 @@ export class TuiOptionComponent<T = unknown> implements OnDestroy {
     @Input()
     public value?: T;
 
+    public readonly isMobile = inject(TUI_IS_MOBILE);
+
     protected readonly content = inject(TUI_OPTION_CONTENT, {optional: true});
     protected readonly dropdown = inject(TuiDropdownDirective, {
         self: true,

projects/core/components/root/root.style.less

@@ -52,4 +52,9 @@ tui-root > .t-root-scrollbar {
 .t-root-content {
     height: 100%;
     isolation: isolate;
+    transform: translateY(var(--t-root-top));
+}
+
+[tuiDropdownButton][tuiDropdownButton] {
+    display: none;
 }