npm - @taiga-ui/addon-mobile - Versions diffs - 4.52.0-canary.974ca4b → 4.52.0-canary.9c7b1f0 - Mend

@taiga-ui/addon-mobile 4.52.0-canary.974ca4b → 4.52.0-canary.9c7b1f0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/components/bottom-sheet/bottom-sheet.component.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
 export declare class TuiBottomSheet {
     private readonly elements;
-    private readonly content?;
+    private readonly content;
     private readonly el;
-    stops: readonly string[];
+    readonly stops: import("@angular/core").InputSignal<readonly string[]>;
     protected onScroll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiBottomSheet, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiBottomSheet, "tui-bottom-sheet", never, { "stops": { "alias": "stops"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiBottomSheet, "tui-bottom-sheet", never, { "stops": { "alias": "stops"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/mobile-calendar/calendar-date-stream.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { InjectionToken, type Provider } from '@angular/core';
+import { type TuiValueTransformer } from '@taiga-ui/cdk/classes';
+import { type TuiDay, type TuiDayRange } from '@taiga-ui/cdk/date-time';
+import { type Observable } from 'rxjs';
+export declare const TUI_CALENDAR_DATE_STREAM: InjectionToken<Observable<TuiDay | TuiDayRange | null>>;
+export declare function tuiDateStreamWithTransformer(transformer: InjectionToken<TuiValueTransformer<any>>): Provider;

package/components/mobile-calendar/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+export * from './calendar-date-stream';
 export * from './mobile-calendar.component';
 export * from './mobile-calendar.const';
 export * from './mobile-calendar.providers';

package/components/mobile-calendar/mobile-calendar.component.d.ts CHANGED Viewed

@@ -1,11 +1,10 @@
-import { type AfterViewInit, EventEmitter } from '@angular/core';
+import { type AfterViewInit } from '@angular/core';
 import { TuiDay, TuiDayRange, TuiMonth } from '@taiga-ui/cdk/date-time';
 import { type TuiBooleanHandler, type TuiMapper } from '@taiga-ui/cdk/types';
 import * as i0 from "@angular/core";
 export declare class TuiMobileCalendar implements AfterViewInit {
-    private readonly yearsScrollRef?;
-    private readonly monthsScrollRef?;
-    private readonly value$;
+    private readonly yearsScroll;
+    private readonly monthsScroll;
     private readonly today;
     private activeYear;
     private activeMonth;
@@ -13,6 +12,9 @@ export declare class TuiMobileCalendar implements AfterViewInit {
     private readonly doc;
     private readonly speed;
     private readonly ngZone;
+    private readonly getYearsViewportSize;
+    private readonly initialYear;
+    private readonly initialMonth;
     protected initialized: boolean;
     protected readonly isIOS: boolean;
     protected readonly isE2E: boolean;
@@ -20,6 +22,7 @@ export declare class TuiMobileCalendar implements AfterViewInit {
     protected readonly closeWord: import("@angular/core").Signal<string>;
     protected readonly cancelWord: import("@angular/core").Signal<string>;
     protected readonly doneWord: import("@angular/core").Signal<string>;
+    protected readonly monthNames: import("@angular/core").Signal<readonly [January: string, February: string, March: string, April: string, May: string, June: string, July: string, August: string, September: string, October: string, November: string, December: string]>;
     protected readonly unorderedWeekDays$: import("rxjs").Observable<readonly [Monday: string, Tuesday: string, Wednesday: string, Thursday: string, Friday: string, Saturday: string, Sunday: string]>;
     protected readonly chooseDayOrRangeTexts: import("@angular/core").Signal<readonly [choose_day: string, choose_range: string, choose_days: string]> | null;
     protected readonly years: number[];
@@ -31,17 +34,15 @@ export declare class TuiMobileCalendar implements AfterViewInit {
      * ```
      * TODO(v5): delete it
      */
-    single: boolean;
-    multi: boolean;
-    min: TuiDay;
-    max: TuiDay;
-    disabledItemHandler: TuiBooleanHandler<TuiDay>;
-    readonly cancel: EventEmitter<void>;
-    readonly confirm: EventEmitter<TuiDayRange | TuiDay | readonly TuiDay[]>;
-    readonly valueChange: import("rxjs").Observable<TuiDayRange | TuiDay | readonly TuiDay[] | null>;
+    readonly single: import("@angular/core").InputSignal<boolean>;
+    readonly multi: import("@angular/core").InputSignal<boolean>;
+    readonly min: import("@angular/core").InputSignal<TuiDay>;
+    readonly max: import("@angular/core").InputSignal<TuiDay>;
+    readonly disabledItemHandler: import("@angular/core").InputSignal<TuiBooleanHandler<TuiDay>>;
+    readonly cancel: import("@angular/core").OutputEmitterRef<void>;
+    readonly confirm: import("@angular/core").OutputEmitterRef<TuiDay | TuiDayRange | readonly TuiDay[]>;
+    readonly value: import("@angular/core").ModelSignal<TuiDay | TuiDayRange | readonly TuiDay[] | null>;
     constructor();
-    set value(value: TuiDay | TuiDayRange | readonly TuiDay[] | null | undefined);
-    get value(): TuiDay | TuiDayRange | readonly TuiDay[] | null;
     ngAfterViewInit(): void;
     setYear(year: number): void;
     protected get yearWidth(): number;
@@ -55,10 +56,7 @@ export declare class TuiMobileCalendar implements AfterViewInit {
         TuiDay,
         TuiDay
     ], TuiBooleanHandler<TuiDay>>;
-    private get initialYear();
-    private get initialMonth();
     private isMultiValue;
-    private getYearsViewportSize;
     private updateViewportDimension;
     private lateInit;
     private waitScrolledChange;
@@ -70,5 +68,5 @@ export declare class TuiMobileCalendar implements AfterViewInit {
     private monthToYear;
     private getMonthOffset;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiMobileCalendar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiMobileCalendar, "tui-mobile-calendar", never, { "single": { "alias": "single"; "required": false; }; "multi": { "alias": "multi"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabledItemHandler": { "alias": "disabledItemHandler"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "cancel": "cancel"; "confirm": "confirm"; "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiMobileCalendar, "tui-mobile-calendar", never, { "single": { "alias": "single"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledItemHandler": { "alias": "disabledItemHandler"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "cancel": "cancel"; "confirm": "confirm"; "value": "valueChange"; }, never, never, true, never>;
 }

package/components/mobile-calendar/mobile-calendar.strategy.d.ts CHANGED Viewed

@@ -1,19 +1,15 @@
 import { type CdkVirtualScrollViewport, type VirtualScrollStrategy } from '@angular/cdk/scrolling';
-import { type TuiScrollService } from '@taiga-ui/cdk/services';
-import { type Observable } from 'rxjs';
 /**
- * This scroll strategy is hard wired with styles for iOS and Android.
+ * This scroll strategy is hard-wired with styles for iOS and Android.
  * It is dependent on month height on those platforms and is designed to
  * work for {@link TuiMobileCalendar} with years 1906 to 2102
  */
 export declare class TuiMobileCalendarStrategy implements VirtualScrollStrategy {
     private readonly isIOS;
-    private readonly scrollService;
+    private readonly destroy$;
     private readonly index$;
     private viewport;
-    private readonly destroy$;
-    constructor(isIOS: boolean, scrollService: TuiScrollService);
-    get scrolledIndexChange(): Observable<number>;
+    readonly scrolledIndexChange: import("rxjs").Observable<number>;
     attach(viewport: CdkVirtualScrollViewport): void;
     detach(): void;
     onContentScrolled(): void;

package/components/mobile-calendar-dropdown/mobile-calendar-dropdown.component.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-import { type ValueProvider } from '@angular/core';
 import { TuiDay, TuiDayRange } from '@taiga-ui/cdk/date-time';
 import { type TuiBooleanHandler } from '@taiga-ui/cdk/types';
-import { TuiMobileCalendarDropdownNew } from './mobile-calendar-dropdown.directive';
+import { TuiMobileCalendarDropdown } from './mobile-calendar-dropdown.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@taiga-ui/cdk/directives/active-zone";
 import * as i2 from "@taiga-ui/cdk/directives/animated";
@@ -12,7 +11,7 @@ export interface TuiMobileCalendarData {
     multi?: boolean;
     single?: boolean;
 }
-export declare class TuiMobileCalendarDropdown {
+export declare class TuiMobileCalendarDropdownComponent {
     private readonly dropdown;
     private readonly keyboard;
     private readonly context;
@@ -20,9 +19,9 @@ export declare class TuiMobileCalendarDropdown {
     private readonly data;
     private selectedPeriod;
     protected readonly control: any;
-    protected readonly directive: TuiMobileCalendarDropdownNew | null;
-    protected readonly range: boolean;
+    protected readonly directive: TuiMobileCalendarDropdown | null;
     protected readonly multi: boolean;
+    protected readonly range: boolean;
     protected readonly single: boolean;
     protected readonly value: import("@angular/core").Signal<TuiDay | TuiDayRange | null>;
     constructor();
@@ -34,7 +33,6 @@ export declare class TuiMobileCalendarDropdown {
     protected confirm(value: TuiDay | TuiDayRange | readonly TuiDay[]): void;
     private calculateDisabledItemHandler;
     private is;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TuiMobileCalendarDropdown, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiMobileCalendarDropdown, "tui-mobile-calendar-dropdown", never, {}, {}, never, never, true, [{ directive: typeof i1.TuiActiveZone; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiAnimated; inputs: {}; outputs: {}; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiMobileCalendarDropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiMobileCalendarDropdownComponent, "tui-mobile-calendar-dropdown", never, {}, {}, never, never, true, [{ directive: typeof i1.TuiActiveZone; inputs: {}; outputs: {}; }, { directive: typeof i2.TuiAnimated; inputs: {}; outputs: {}; }]>;
 }
-export declare function tuiProvideMobileCalendar(): ValueProvider;

package/components/mobile-calendar-dropdown/mobile-calendar-dropdown.directive.d.ts CHANGED Viewed

@@ -4,12 +4,12 @@ import { type TuiInputDateBase, TuiInputDateDirective } from '@taiga-ui/kit/comp
 import { TuiInputDateRangeDirective } from '@taiga-ui/kit/components/input-date-range';
 import { TuiInputDateTimeDirective } from '@taiga-ui/kit/components/input-date-time';
 import * as i0 from "@angular/core";
-export declare class TuiMobileCalendarDropdownNew {
-    readonly single?: TuiInputDateDirective;
-    readonly range?: TuiInputDateRangeDirective;
-    readonly dateTime?: TuiInputDateTimeDirective;
+export declare class TuiMobileCalendarDropdown {
+    readonly single: import("@angular/core").Signal<TuiInputDateDirective | undefined>;
+    readonly range: import("@angular/core").Signal<TuiInputDateRangeDirective | undefined>;
+    readonly dateTime: import("@angular/core").Signal<TuiInputDateTimeDirective | undefined>;
     readonly handlers: TuiItemsHandlersDirective<any>;
     get date(): TuiInputDateBase<readonly [TuiDay, TuiTime | null]> | TuiInputDateBase<TuiDay> | TuiInputDateBase<TuiDayRange> | undefined;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TuiMobileCalendarDropdownNew, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiMobileCalendarDropdownNew, "[tuiMobileCalendar]", never, {}, {}, ["single", "range", "dateTime"], never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TuiMobileCalendarDropdown, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiMobileCalendarDropdown, "[tuiMobileCalendar]", never, {}, {}, ["single", "range", "dateTime"], never, true, never>;
 }

package/components/pull-to-refresh/pull-to-refresh.component.d.ts CHANGED Viewed

@@ -1,17 +1,18 @@
 import { type TuiContext, type TuiHandler } from '@taiga-ui/cdk/types';
 import { type PolymorpheusContent } from '@taiga-ui/polymorpheus';
-import { type Observable } from 'rxjs';
-import { TuiPullToRefreshService } from './pull-to-refresh.service';
 import * as i0 from "@angular/core";
 export declare class TuiPullToRefresh {
     private readonly isIOS;
     private readonly threshold;
-    protected readonly pulling$: TuiPullToRefreshService;
+    private readonly service;
+    private readonly el;
+    protected readonly pulling: import("@angular/core").Signal<number>;
     protected readonly component: PolymorpheusContent<TuiContext<number>>;
-    protected readonly dropped$: Observable<boolean>;
-    styleHandler: TuiHandler<number, Record<string, unknown> | null>;
-    readonly pulled: Observable<unknown>;
+    protected readonly style: import("@angular/core").Signal<Record<string, unknown> | null>;
+    protected readonly dropped: import("@angular/core").Signal<boolean | undefined>;
+    readonly styleHandler: import("@angular/core").InputSignal<TuiHandler<number, Record<string, unknown> | null>>;
+    readonly pulled: import("@angular/core").OutputRef<number>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiPullToRefresh, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiPullToRefresh, "tui-pull-to-refresh", never, { "styleHandler": { "alias": "styleHandler"; "required": false; }; }, { "pulled": "pulled"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiPullToRefresh, "tui-pull-to-refresh", never, { "styleHandler": { "alias": "styleHandler"; "required": false; "isSignal": true; }; }, { "pulled": "pulled"; }, never, ["*"], true, never>;
 }

package/components/sheet-dialog/sheet-dialog.service.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type TuiModalComponent, TuiModalService } from '@taiga-ui/core/components/modal';
+import { type TuiModalComponent, TuiModalService } from '@taiga-ui/core/portals/modal';
 import { type PolymorpheusComponent } from '@taiga-ui/polymorpheus';
 import { TuiSheetDialogComponent } from './sheet-dialog.component';
 import { type TuiSheetDialogOptions } from './sheet-dialog.options';

package/components/swipe-action/swipe-actions-auto-close.directive.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class TuiSwipeActionsAutoClose {
     private readonly el;
-    autoClose: boolean | string;
+    readonly autoClose: import("@angular/core").InputSignal<string | boolean>;
     protected handleEvent(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiSwipeActionsAutoClose, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiSwipeActionsAutoClose, "tui-swipe-actions[autoClose]", never, { "autoClose": { "alias": "autoClose"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiSwipeActionsAutoClose, "tui-swipe-actions[autoClose]", never, { "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/components/tab-bar/tab-bar-item.component.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class TuiTabBarItem {
-    icon: string;
-    badge?: number | null;
+    readonly icon: import("@angular/core").InputSignal<string>;
+    readonly badge: import("@angular/core").InputSignal<number | undefined>;
     protected format(value: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTabBarItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiTabBarItem, "button[tuiTabBarItem], a[tuiTabBarItem]", never, { "icon": { "alias": "icon"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiTabBarItem, "button[tuiTabBarItem], a[tuiTabBarItem]", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/tab-bar/tab-bar.component.d.ts CHANGED Viewed

@@ -1,13 +1,10 @@
-import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TuiTabBarComponent {
     private readonly tabs;
-    quantity: number;
-    activeItemIndex: number;
-    readonly activeItemIndexChange: EventEmitter<number>;
-    setActive(tab: EventTarget): void;
-    protected get style(): string;
+    readonly quantity: import("@angular/core").InputSignal<number>;
+    readonly activeItemIndex: import("@angular/core").ModelSignal<number>;
+    setActive(tab: Element): void;
     private updateIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTabBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TuiTabBarComponent, "nav[tuiTabBar]", never, { "quantity": { "alias": "quantity"; "required": false; }; "activeItemIndex": { "alias": "activeItemIndex"; "required": false; }; }, { "activeItemIndexChange": "activeItemIndexChange"; }, ["tabs"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TuiTabBarComponent, "nav[tuiTabBar]", never, { "quantity": { "alias": "quantity"; "required": false; "isSignal": true; }; "activeItemIndex": { "alias": "activeItemIndex"; "required": false; "isSignal": true; }; }, { "activeItemIndex": "activeItemIndexChange"; }, ["tabs"], ["*"], true, never>;
 }

package/directives/dropdown-mobile/dropdown-mobile.component.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { type OnDestroy } from '@angular/core';
-import { TuiDropdownDirective } from '@taiga-ui/core/directives/dropdown';
+import { TuiDropdownDirective } from '@taiga-ui/core/portals/dropdown';
 import * as i0 from "@angular/core";
 import * as i1 from "@taiga-ui/cdk/directives/animated";
 import * as i2 from "@taiga-ui/cdk/directives/active-zone";

package/directives/dropdown-sheet/dropdown-sheet.component.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { TuiDropdownDirective } from '@taiga-ui/core/directives/dropdown';
+import { TuiDropdownDirective } from '@taiga-ui/core/portals/dropdown';
 import * as i0 from "@angular/core";
 export declare class TuiDropdownSheetComponent {
     private readonly content;

package/directives/elastic-sticky/elastic-sticky.directive.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-import { TuiElasticStickyService } from './elastic-sticky.service';
 import * as i0 from "@angular/core";
 export declare class TuiElasticSticky {
-    readonly tuiElasticSticky: TuiElasticStickyService;
+    readonly tuiElasticSticky: import("@angular/core").OutputRef<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiElasticSticky, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TuiElasticSticky, "[tuiElasticSticky]", ["tuiElasticSticky"], {}, { "tuiElasticSticky": "tuiElasticSticky"; }, never, never, true, never>;
 }

package/directives/responsive-dialog/responsive-dialog.service.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { type TuiSheetDialogOptions } from '@taiga-ui/addon-mobile/components/sheet-dialog';
 import { type TuiPortalContext } from '@taiga-ui/cdk/portals';
-import { type TuiDialogOptions } from '@taiga-ui/core/components/dialog';
+import { type TuiDialogOptions } from '@taiga-ui/core/portals/dialog';
 import { type PolymorpheusContent } from '@taiga-ui/polymorpheus';
 import { type Observable } from 'rxjs';
 import * as i0 from "@angular/core";

package/directives/ripple/ripple.directive.d.ts CHANGED Viewed

@@ -4,9 +4,9 @@ export declare class TuiRipple {
     private readonly destroyRef;
     private readonly duration;
     protected readonly nothing: undefined;
-    tuiRipple: string;
+    readonly tuiRipple: import("@angular/core").InputSignal<string>;
     protected start(x: number, y: number, target: HTMLElement, el: HTMLElement): void;
     private createRipple;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiRipple, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiRipple, "[tuiRipple]", never, { "tuiRipple": { "alias": "tuiRipple"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiRipple, "[tuiRipple]", never, { "tuiRipple": { "alias": "tuiRipple"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/directives/touchable/touchable.directive.d.ts CHANGED Viewed

@@ -1,13 +1,13 @@
 import * as i0 from "@angular/core";
-export declare function tuiFindTouchIndex(touches: TouchList, id: number): number;
 export declare class TuiTouchable {
     private readonly isIOS;
     private readonly el;
-    tuiTouchable: '' | 'background' | 'opacity' | 'transform';
+    private readonly doc;
+    protected readonly style: import("@angular/core").Signal<"background" | "opacity" | "transform">;
+    readonly tuiTouchable: import("@angular/core").InputSignal<"" | "background" | "opacity" | "transform">;
     constructor();
-    protected get style(): 'background' | 'opacity' | 'transform';
-    private hasTouchLeft;
+    private hasTouches;
     private onTouchStart;
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiTouchable, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiTouchable, "[tuiTouchable]", never, { "tuiTouchable": { "alias": "tuiTouchable"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TuiTouchable, "[tuiTouchable]", never, { "tuiTouchable": { "alias": "tuiTouchable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, ViewChild, ViewChildren, ChangeDetectionStrategy, Component } from '@angular/core';
-import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
+import { viewChildren, viewChild, input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
 import { tuiHeaderOptionsProvider } from '@taiga-ui/layout/components/header';
@@ -11,14 +10,15 @@ const OPTIONS = {
 };
 class TuiBottomSheet {
     constructor() {
-        this.elements = EMPTY_QUERY;
+        this.elements = viewChildren('stops');
+        this.content = viewChild('content');
         this.el = tuiInjectElement();
-        this.stops = ['1.5rem'];
+        this.stops = input(['1.5rem']);
     }
     onScroll() {
         const { clientHeight, scrollTop, scrollHeight } = this.el;
-        const top = this.elements.get(0)?.nativeElement.clientHeight || 0;
-        const max = this.content?.nativeElement.clientHeight || Infinity;
+        const top = this.elements()[0]?.nativeElement.clientHeight || 0;
+        const max = this.content()?.nativeElement.clientHeight || Infinity;
         const height = Math.min(clientHeight, max);
         const scrolled = Math.min(scrollTop, height - top);
         const transform = `translate3d(0, ${-1 * scrolled}px, 0)`;
@@ -26,26 +26,18 @@ class TuiBottomSheet {
         this.el.style.setProperty('overflow', 'scroll');
         this.el.animate([{ transform }], OPTIONS);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiBottomSheet, isStandalone: true, selector: "tui-bottom-sheet", inputs: { stops: "stops" }, host: { listeners: { "scroll.zoneless": "onScroll()", "resize": "onScroll()" }, properties: { "style.--t-initial": "stops[0]", "style.scroll-snap-type": "stops.length > 1 ? \"y mandatory\" : null" } }, providers: [tuiHeaderOptionsProvider({ size: 'h5' })], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "elements", predicate: ["stops"], descendants: true }], ngImport: i0, template: "@for (stop of stops; track stop) {\n    <div\n        #stops\n        class=\"t-stop\"\n        [style.inset-block-start]=\"stop\"\n    ></div>\n}\n<div\n    #content\n    class=\"t-content\"\n    (resize)=\"onScroll()\"\n>\n    <ng-content />\n</div>\n<div class=\"t-bottom\"></div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:absolute;top:100%;left:0;right:0;display:block;block-size:calc(100% - 1rem);max-inline-size:40rem;margin:calc(-1 * var(--t-initial)) auto 0;background:var(--tui-background-elevation-1);border-top-left-radius:var(--tui-radius-l);border-top-right-radius:var(--tui-radius-l);overflow:auto;box-shadow:0 1rem var(--tui-background-elevation-1),var(--tui-shadow-medium)}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{display:none}:host:before{content:\"\";position:sticky;top:.625rem;left:50%;z-index:1;display:block;inset-inline-start:50%;inline-size:2rem;block-size:.25rem;margin-block-end:-.25rem;transform:translate(calc(-50% * var(--tui-inline)));background:var(--tui-background-elevation-1);box-shadow:0 0 0 20rem var(--tui-background-elevation-1),inset 0 0 0 1rem var(--tui-border-normal);border-radius:1rem;clip-path:polygon(-100vw -1rem,100vw -1rem,100vw calc(100% + .625rem),-100vw calc(100% + .625rem))}:host:after{content:\"\";position:absolute;top:calc(100% - var(--t-initial));inline-size:1rem;block-size:calc(var(--t-height) - 100% + var(--t-initial));scroll-snap-align:start;scroll-snap-stop:always}.t-content{position:sticky;top:0;padding:2.25rem 1rem 1.5rem}.t-bottom{block-size:calc(100% - var(--t-initial))}.t-stop{position:absolute;block-size:var(--t-initial);inline-size:1rem;pointer-events:none;transform:translateY(-100%);scroll-snap-align:start;scroll-snap-stop:always}.t-stop:last-child{scroll-snap-align:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiBottomSheet, isStandalone: true, selector: "tui-bottom-sheet", inputs: { stops: { classPropertyName: "stops", publicName: "stops", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "scroll.zoneless": "onScroll()", "resize": "onScroll()" }, properties: { "style.--t-initial": "stops()[0]", "style.scroll-snap-type": "stops().length > 1 ? \"y mandatory\" : null" } }, providers: [tuiHeaderOptionsProvider({ size: 'h5' })], viewQueries: [{ propertyName: "elements", predicate: ["stops"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (stop of stops(); track $index) {\n    <div\n        #stops\n        class=\"t-stop\"\n        [style.inset-block-start]=\"stop\"\n    ></div>\n}\n<div\n    #content\n    class=\"t-content\"\n    (resize)=\"onScroll()\"\n>\n    <ng-content />\n</div>\n<div class=\"t-bottom\"></div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:absolute;top:100%;left:0;right:0;display:block;block-size:calc(100% - 1rem);max-inline-size:40rem;margin:calc(-1 * var(--t-initial)) auto 0;background:var(--tui-background-elevation-1);border-top-left-radius:var(--tui-radius-l);border-top-right-radius:var(--tui-radius-l);overflow:auto;box-shadow:0 1rem var(--tui-background-elevation-1),var(--tui-shadow-medium)}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{display:none}:host:before{content:\"\";position:sticky;top:.625rem;left:50%;z-index:1;display:block;inset-inline-start:50%;inline-size:2rem;block-size:.25rem;margin-block-end:-.25rem;transform:translate(calc(-50% * var(--tui-inline)));background:var(--tui-background-elevation-1);box-shadow:0 0 0 20rem var(--tui-background-elevation-1),inset 0 0 0 1rem var(--tui-border-normal);border-radius:1rem;clip-path:polygon(-100vw -1rem,100vw -1rem,100vw calc(100% + .625rem),-100vw calc(100% + .625rem))}:host:after{content:\"\";position:absolute;top:calc(100% - var(--t-initial));inline-size:1rem;block-size:calc(var(--t-height) - 100% + var(--t-initial));scroll-snap-align:start;scroll-snap-stop:always}.t-content{position:sticky;top:0;padding:2.25rem 1rem 1.5rem}.t-bottom{block-size:calc(100% - var(--t-initial))}.t-stop{position:absolute;block-size:var(--t-initial);inline-size:1rem;pointer-events:none;transform:translateY(-100%);scroll-snap-align:start;scroll-snap-stop:always}.t-stop:last-child{scroll-snap-align:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiBottomSheet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiBottomSheet, decorators: [{
             type: Component,
             args: [{ selector: 'tui-bottom-sheet', changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiHeaderOptionsProvider({ size: 'h5' })], host: {
-                        '[style.--t-initial]': 'stops[0]',
-                        '[style.scroll-snap-type]': 'stops.length > 1 ? "y mandatory" : null',
+                        '[style.--t-initial]': 'stops()[0]',
+                        '[style.scroll-snap-type]': 'stops().length > 1 ? "y mandatory" : null',
                         '(scroll.zoneless)': 'onScroll()',
                         '(resize)': 'onScroll()',
-                    }, template: "@for (stop of stops; track stop) {\n    <div\n        #stops\n        class=\"t-stop\"\n        [style.inset-block-start]=\"stop\"\n    ></div>\n}\n<div\n    #content\n    class=\"t-content\"\n    (resize)=\"onScroll()\"\n>\n    <ng-content />\n</div>\n<div class=\"t-bottom\"></div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:absolute;top:100%;left:0;right:0;display:block;block-size:calc(100% - 1rem);max-inline-size:40rem;margin:calc(-1 * var(--t-initial)) auto 0;background:var(--tui-background-elevation-1);border-top-left-radius:var(--tui-radius-l);border-top-right-radius:var(--tui-radius-l);overflow:auto;box-shadow:0 1rem var(--tui-background-elevation-1),var(--tui-shadow-medium)}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{display:none}:host:before{content:\"\";position:sticky;top:.625rem;left:50%;z-index:1;display:block;inset-inline-start:50%;inline-size:2rem;block-size:.25rem;margin-block-end:-.25rem;transform:translate(calc(-50% * var(--tui-inline)));background:var(--tui-background-elevation-1);box-shadow:0 0 0 20rem var(--tui-background-elevation-1),inset 0 0 0 1rem var(--tui-border-normal);border-radius:1rem;clip-path:polygon(-100vw -1rem,100vw -1rem,100vw calc(100% + .625rem),-100vw calc(100% + .625rem))}:host:after{content:\"\";position:absolute;top:calc(100% - var(--t-initial));inline-size:1rem;block-size:calc(var(--t-height) - 100% + var(--t-initial));scroll-snap-align:start;scroll-snap-stop:always}.t-content{position:sticky;top:0;padding:2.25rem 1rem 1.5rem}.t-bottom{block-size:calc(100% - var(--t-initial))}.t-stop{position:absolute;block-size:var(--t-initial);inline-size:1rem;pointer-events:none;transform:translateY(-100%);scroll-snap-align:start;scroll-snap-stop:always}.t-stop:last-child{scroll-snap-align:none}\n"] }]
-        }], propDecorators: { elements: [{
-                type: ViewChildren,
-                args: ['stops']
-            }], content: [{
-                type: ViewChild,
-                args: ['content']
-            }], stops: [{
-                type: Input
-            }] } });
+                    }, template: "@for (stop of stops(); track $index) {\n    <div\n        #stops\n        class=\"t-stop\"\n        [style.inset-block-start]=\"stop\"\n    ></div>\n}\n<div\n    #content\n    class=\"t-content\"\n    (resize)=\"onScroll()\"\n>\n    <ng-content />\n</div>\n<div class=\"t-bottom\"></div>\n", styles: [":host{scrollbar-width:none;-ms-overflow-style:none;position:absolute;top:100%;left:0;right:0;display:block;block-size:calc(100% - 1rem);max-inline-size:40rem;margin:calc(-1 * var(--t-initial)) auto 0;background:var(--tui-background-elevation-1);border-top-left-radius:var(--tui-radius-l);border-top-right-radius:var(--tui-radius-l);overflow:auto;box-shadow:0 1rem var(--tui-background-elevation-1),var(--tui-shadow-medium)}:host::-webkit-scrollbar,:host::-webkit-scrollbar-thumb{display:none}:host:before{content:\"\";position:sticky;top:.625rem;left:50%;z-index:1;display:block;inset-inline-start:50%;inline-size:2rem;block-size:.25rem;margin-block-end:-.25rem;transform:translate(calc(-50% * var(--tui-inline)));background:var(--tui-background-elevation-1);box-shadow:0 0 0 20rem var(--tui-background-elevation-1),inset 0 0 0 1rem var(--tui-border-normal);border-radius:1rem;clip-path:polygon(-100vw -1rem,100vw -1rem,100vw calc(100% + .625rem),-100vw calc(100% + .625rem))}:host:after{content:\"\";position:absolute;top:calc(100% - var(--t-initial));inline-size:1rem;block-size:calc(var(--t-height) - 100% + var(--t-initial));scroll-snap-align:start;scroll-snap-stop:always}.t-content{position:sticky;top:0;padding:2.25rem 1rem 1.5rem}.t-bottom{block-size:calc(100% - var(--t-initial))}.t-stop{position:absolute;block-size:var(--t-initial);inline-size:1rem;pointer-events:none;transform:translateY(-100%);scroll-snap-align:start;scroll-snap-stop:always}.t-stop:last-child{scroll-snap-align:none}\n"] }]
+        }] });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"taiga-ui-addon-mobile-components-bottom-sheet.mjs","sources":["../../../projects/addon-mobile/components/bottom-sheet/bottom-sheet.component.ts","../../../projects/addon-mobile/components/bottom-sheet/bottom-sheet.template.html","../../../projects/addon-mobile/components/bottom-sheet/taiga-ui-addon-mobile-components-bottom-sheet.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n type ElementRef,\n ~~Input~~,\n ~~type QueryList~~,\n ~~ViewChild~~,\n ~~ViewChildren,\n~~} from '@angular/core';\nimport {~~EMPTY_QUERY} from '@taiga-ui/cdk/constants';\nimport {~~tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiHeaderOptionsProvider} from '@taiga-ui/layout/components/header';\n\nconst OPTIONS = {\n duration: 20,\n easing: 'ease-in',\n fill: 'forwards',\n} as const;\n\n@Component({\n selector: 'tui-bottom-sheet',\n templateUrl: './bottom-sheet.template.html',\n styleUrl: './bottom-sheet.style.less',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [tuiHeaderOptionsProvider({size: 'h5'})],\n host: {\n '[style.--t-initial]': 'stops[0]',\n '[style.scroll-snap-type]': 'stops.length > 1 ? \"y mandatory\" : null',\n '(scroll.zoneless)': 'onScroll()',\n '(resize)': 'onScroll()',\n },\n})\nexport class TuiBottomSheet {\n ~~@ViewChildren('stops')\n~~ private readonly elements: ~~QueryList~~<ElementRef<HTMLElement>> ~~= EMPTY_QUERY;\n\n @ViewChild~~('~~content~~')\n private readonly content?: ElementRef<HTMLElement~~>;\~~n\n private readonly el = tuiInjectElement();\n\n ~~@Input()\n~~ public stops: readonly string[] = ['1.5rem'];\n\n protected onScroll(): void {\n const {clientHeight, scrollTop, scrollHeight} = this.el;\n const top = this.elements~~.get~~(0)?.nativeElement.clientHeight \|\| 0;\n const max = this.content?.nativeElement.clientHeight \|\| Infinity;\n const height = Math.min(clientHeight, max);\n const scrolled = Math.min(scrollTop, height - top);\n const transform = `translate3d(0, ${-1 * scrolled}px, 0)`;\n\n this.el.style.setProperty('--t-height', `${scrollHeight}px`);\n this.el.style.setProperty('overflow', 'scroll');\n this.el.animate([{transform}], OPTIONS);\n }\n}\n","@for (stop of stops; track ~~stop~~) {\n <div\n #stops\n class=\"t-stop\"\n [style.inset-block-start]=\"stop\"\n ></div>\n}\n<div\n #content\n class=\"t-content\"\n (resize)=\"onScroll()\"\n>\n <ng-content />\n</div>\n<div class=\"t-bottom\"></div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;;AAaA~~,MAAM,OAAO,GAAG;AACZ,IAAA,QAAQ,EAAE,EAAE;AACZ,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,IAAI,EAAE,UAAU;CACV;MAeG,cAAc,CAAA;AAb3B,IAAA,WAAA,GAAA;~~QAeqB~~,~~IAAQ~~,CAAA,QAAA,~~GAAuC~~,~~WAAW~~;~~QAK1D~~,IAAE,CAAA,EAAA,GAAG,gBAAgB,EAAE;~~AAGjC~~,QAAA,IAAA,CAAA,KAAK,~~GAAsB~~,CAAC,QAAQ,CAAC;AAc/C;IAZa,QAAQ,GAAA;QACd,MAAM,EAAC,YAAY,EAAE,SAAS,EAAE,YAAY,EAAC,GAAG,IAAI,CAAC,EAAE;AACvD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,~~CAAC~~,~~GAAG,~~CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,YAAY,IAAI,CAAC;~~QACjE~~,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,YAAY,IAAI,QAAQ;~~QAChE~~,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,GAAG,CAAC;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,GAAG,CAAC;QAClD,MAAM,SAAS,GAAG,CAAkB,eAAA,EAAA,CAAC,CAAC,GAAG,QAAQ,QAAQ;AAEzD,QAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI,CAAC;QAC5D,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAC,SAAS,EAAC,CAAC,EAAE,OAAO,CAAC;;+~~GAtBlC~~,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EARZ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,QAAA,EAAA,YAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,~~UAAA~~,EAAA,wBAAA,EAAA,~~2CAAA~~,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,wBAAwB,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,~~SAAA~~,EAAA,~~KAAA~~,EAAA,~~IAAA~~,~~EAAA~~,~~SAAA~~,EAAA,~~CAAA~~,~~SAAA~~,~~CAAA~~,EAAA,~~WAAA~~,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,~~UAAA~~,EAAA,SAAA,EAAA,CAAA,~~OAAA~~,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECxBvD,+RAeA~~,EAAA,MAAA,EAAA,CAAA,89CAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~4FDiBa~~,cAAc,EAAA,UAAA,EAAA,CAAA;kBAb1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAGX,eAAA,EAAA,uBAAuB,CAAC,MAAM,aACpC,CAAC,wBAAwB,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC,EAC7C,IAAA,EAAA;AACF,wBAAA,qBAAqB,EAAE,~~UAAU~~;~~AACjC~~,wBAAA,0BAA0B,EAAE,~~yCAAyC~~;~~AACrE~~,wBAAA,mBAAmB,EAAE,YAAY;AACjC,wBAAA,UAAU,EAAE,YAAY;AAC3B,qBAAA,EAAA,QAAA,EAAA~~,+RAAA~~,EAAA,MAAA,EAAA,CAAA,89CAAA,CAAA,EAAA~~;8BAIgB,QAAQ,EAAA,CAAA;sBADxB,YAAY;uBAAC,OAAO;gBAIJ,OAAO,EAAA,CAAA;sBADvB,SAAS;uBAAC,SAAS;gBAMb,KAAK,EAAA,CAAA;sBADX~~;;;~~AEzCL~~;;AAEG;;;;"}
1	+ {"version":3,"file":"taiga-ui-addon-mobile-components-bottom-sheet.mjs","sources":["../../../projects/addon-mobile/components/bottom-sheet/bottom-sheet.component.ts","../../../projects/addon-mobile/components/bottom-sheet/bottom-sheet.template.html","../../../projects/addon-mobile/components/bottom-sheet/taiga-ui-addon-mobile-components-bottom-sheet.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n type ElementRef,\n input,\n viewChild,\n viewChildren,\n} from '@angular/core';\nimport {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiHeaderOptionsProvider} from '@taiga-ui/layout/components/header';\n\nconst OPTIONS = {\n duration: 20,\n easing: 'ease-in',\n fill: 'forwards',\n} as const;\n\n@Component({\n selector: 'tui-bottom-sheet',\n templateUrl: './bottom-sheet.template.html',\n styleUrl: './bottom-sheet.style.less',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [tuiHeaderOptionsProvider({size: 'h5'})],\n host: {\n '[style.--t-initial]': 'stops()[0]',\n '[style.scroll-snap-type]': 'stops().length > 1 ? \"y mandatory\" : null',\n '(scroll.zoneless)': 'onScroll()',\n '(resize)': 'onScroll()',\n },\n})\nexport class TuiBottomSheet {\n private readonly elements = viewChildren<ElementRef<HTMLElement>>('stops');\n private readonly content = viewChild<ElementRef<HTMLElement>>('content');\n private readonly el = tuiInjectElement();\n\n public readonly stops = input<readonly string[]>(['1.5rem']);\n\n protected onScroll(): void {\n const {clientHeight, scrollTop, scrollHeight} = this.el;\n const top = this.elements()[0]?.nativeElement.clientHeight \|\| 0;\n const max = this.content()?.nativeElement.clientHeight \|\| Infinity;\n const height = Math.min(clientHeight, max);\n const scrolled = Math.min(scrollTop, height - top);\n const transform = `translate3d(0, ${-1 * scrolled}px, 0)`;\n\n this.el.style.setProperty('--t-height', `${scrollHeight}px`);\n this.el.style.setProperty('overflow', 'scroll');\n this.el.animate([{transform}], OPTIONS);\n }\n}\n","@for (stop of stops(); track $index) {\n <div\n #stops\n class=\"t-stop\"\n [style.inset-block-start]=\"stop\"\n ></div>\n}\n<div\n #content\n class=\"t-content\"\n (resize)=\"onScroll()\"\n>\n <ng-content />\n</div>\n<div class=\"t-bottom\"></div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;AAWA,MAAM,OAAO,GAAG;AACZ,IAAA,QAAQ,EAAE,EAAE;AACZ,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,IAAI,EAAE,UAAU;CACV;MAeG,cAAc,CAAA;AAb3B,IAAA,WAAA,GAAA;AAcqB,QAAA,IAAA,CAAA,QAAQ,GAAG,YAAY,CAA0B,OAAO,CAAC;AACzD,QAAA,IAAA,CAAA,OAAO,GAAG,SAAS,CAA0B,SAAS,CAAC;QACvD,IAAE,CAAA,EAAA,GAAG,gBAAgB,EAAE;AAExB,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAoB,CAAC,QAAQ,CAAC,CAAC;AAc/D;IAZa,QAAQ,GAAA;QACd,MAAM,EAAC,YAAY,EAAE,SAAS,EAAE,YAAY,EAAC,GAAG,IAAI,CAAC,EAAE;AACvD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,YAAY,IAAI,CAAC;AAC/D,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,CAAC,YAAY,IAAI,QAAQ;QAClE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,GAAG,CAAC;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,GAAG,CAAC;QAClD,MAAM,SAAS,GAAG,CAAkB,eAAA,EAAA,CAAC,CAAC,GAAG,QAAQ,QAAQ;AAEzD,QAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,CAAA,EAAG,YAAY,CAAA,EAAA,CAAI,CAAC;QAC5D,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAC,SAAS,EAAC,CAAC,EAAE,OAAO,CAAC;;+GAjBlC,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EARZ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,QAAA,EAAA,YAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,wBAAA,EAAA,6CAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,wBAAwB,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtBvD,mSAeA,EAAA,MAAA,EAAA,CAAA,89CAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDea,cAAc,EAAA,UAAA,EAAA,CAAA;kBAb1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAGX,eAAA,EAAA,uBAAuB,CAAC,MAAM,aACpC,CAAC,wBAAwB,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC,EAC7C,IAAA,EAAA;AACF,wBAAA,qBAAqB,EAAE,YAAY;AACnC,wBAAA,0BAA0B,EAAE,2CAA2C;AACvE,wBAAA,mBAAmB,EAAE,YAAY;AACjC,wBAAA,UAAU,EAAE,YAAY;AAC3B,qBAAA,EAAA,QAAA,EAAA,mSAAA,EAAA,MAAA,EAAA,CAAA,89CAAA,CAAA,EAAA;;;AE5BL;;AAEG;;;;"}

package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { inject, ContentChild, Directive, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { contentChild, inject, Directive, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { TuiMobileCalendar } from '@taiga-ui/addon-mobile/components/mobile-calendar';
 import { TuiKeyboardService } from '@taiga-ui/addon-mobile/services';
 import { TuiControl } from '@taiga-ui/cdk/classes';
@@ -11,9 +11,8 @@ import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
 import * as i2 from '@taiga-ui/cdk/directives/animated';
 import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
 import { tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
-import { TUI_DROPDOWN_COMPONENT, TuiDropdownDirective } from '@taiga-ui/core/directives/dropdown';
+import { TUI_DROPDOWN_COMPONENT, TuiDropdownDirective } from '@taiga-ui/core/portals/dropdown';
 import { TUI_DAY_CAPS_MAPPER, calculateDisabledItemHandler } from '@taiga-ui/kit/components/calendar-range';
-import { TUI_MOBILE_CALENDAR } from '@taiga-ui/kit/tokens';
 import { injectContext } from '@taiga-ui/polymorpheus';
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
 import { TuiItemsHandlersDirective } from '@taiga-ui/core/directives/items-handlers';
@@ -21,25 +20,27 @@ import { TuiInputDateDirective } from '@taiga-ui/kit/components/input-date';
 import { TuiInputDateRangeDirective } from '@taiga-ui/kit/components/input-date-range';
 import { TuiInputDateTimeDirective } from '@taiga-ui/kit/components/input-date-time';
-// TODO: Rename to TuiMobileCalendarDropdown in v5
-class TuiMobileCalendarDropdownNew {
+class TuiMobileCalendarDropdown {
     constructor() {
+        this.single = contentChild(TuiInputDateDirective);
+        this.range = contentChild(TuiInputDateRangeDirective);
+        this.dateTime = contentChild(TuiInputDateTimeDirective);
         this.handlers = inject(TuiItemsHandlersDirective);
     }
     get date() {
-        return this.single || this.range || this.dateTime;
+        return this.single() || this.range() || this.dateTime();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiMobileCalendarDropdownNew, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiMobileCalendarDropdownNew, isStandalone: true, selector: "[tuiMobileCalendar]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendarDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.17", type: TuiMobileCalendarDropdown, isStandalone: true, selector: "[tuiMobileCalendar]", providers: [
             {
                 provide: TUI_DROPDOWN_COMPONENT,
                 useFactory: () => inject(TUI_IS_MOBILE)
-                    ? TuiMobileCalendarDropdown
+                    ? TuiMobileCalendarDropdownComponent
                     : inject(TUI_DROPDOWN_COMPONENT, { skipSelf: true }),
             },
-        ], queries: [{ propertyName: "single", first: true, predicate: TuiInputDateDirective, descendants: true }, { propertyName: "range", first: true, predicate: TuiInputDateRangeDirective, descendants: true }, { propertyName: "dateTime", first: true, predicate: TuiInputDateTimeDirective, descendants: true }], ngImport: i0 }); }
+        ], queries: [{ propertyName: "single", first: true, predicate: TuiInputDateDirective, descendants: true, isSignal: true }, { propertyName: "range", first: true, predicate: TuiInputDateRangeDirective, descendants: true, isSignal: true }, { propertyName: "dateTime", first: true, predicate: TuiInputDateTimeDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiMobileCalendarDropdownNew, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendarDropdown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tuiMobileCalendar]',
@@ -47,24 +48,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         {
                             provide: TUI_DROPDOWN_COMPONENT,
                             useFactory: () => inject(TUI_IS_MOBILE)
-                                ? TuiMobileCalendarDropdown
+                                ? TuiMobileCalendarDropdownComponent
                                 : inject(TUI_DROPDOWN_COMPONENT, { skipSelf: true }),
                         },
                     ],
                 }]
-        }], propDecorators: { single: [{
-                type: ContentChild,
-                args: [TuiInputDateDirective]
-            }], range: [{
-                type: ContentChild,
-                args: [TuiInputDateRangeDirective]
-            }], dateTime: [{
-                type: ContentChild,
-                args: [TuiInputDateTimeDirective]
-            }] } });
+        }] });
-// TODO: Rename to TuiMobileCalendarDropdownComponent in v5, this component is terrible and needs a complete rewrite
-class TuiMobileCalendarDropdown {
+class TuiMobileCalendarDropdownComponent {
     constructor() {
         // TODO: Rework to use TuiDropdownOpenDirective so the focus returns to the field on closing
         this.dropdown = inject(TuiDropdownDirective, { optional: true });
@@ -75,11 +66,11 @@ class TuiMobileCalendarDropdown {
         this.selectedPeriod = null;
         // TODO: Refactor to proper Date, DateMulti and DateRange components after they are added to kit
         this.control = inject(TuiControl, { optional: true });
-        this.directive = inject(TuiMobileCalendarDropdownNew, { optional: true });
-        this.range = !!this.directive?.range || this.is('tui-input-date-range');
+        this.directive = inject(TuiMobileCalendarDropdown, { optional: true });
         this.multi = this.data.multi || this.is('tui-input-date[multiple]');
-        this.single = !!this.directive?.single ||
-            !!this.directive?.dateTime ||
+        this.range = !!this.directive?.range() || this.is('tui-input-date-range');
+        this.single = !!this.directive?.single() ||
+            !!this.directive?.dateTime() ||
             this.data.single || // TODO(v5): use `rangeMode` from DI token `TUI_CALENDAR_SHEET_DEFAULT_OPTIONS`
             this.is('tui-input-date:not([multiple])');
         this.value = computed((value = this.directive?.date?.value()) => Array.isArray(value) ? value[0] : value);
@@ -140,26 +131,20 @@ class TuiMobileCalendarDropdown {
     is(selector) {
         return !!this.dropdown?.el.closest(selector);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiMobileCalendarDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiMobileCalendarDropdown, isStandalone: true, selector: "tui-mobile-calendar-dropdown", hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }], ngImport: i0, template: "<tui-mobile-calendar\n    [disabledItemHandler]=\"calculatedDisabledItemHandler\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [multi]=\"multi\"\n    [single]=\"single\"\n    [value]=\"value()\"\n    (cancel)=\"close()\"\n    (confirm)=\"confirm($event)\"\n    (valueChange)=\"onValueChange($event)\"\n/>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:100%;background:var(--tui-background-elevation-1);box-shadow:0 10rem var(--tui-background-elevation-1),0 -90vh 1rem 2rem var(--tui-service-backdrop);block-size:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}\n"], dependencies: [{ kind: "component", type: TuiMobileCalendar, selector: "tui-mobile-calendar", inputs: ["single", "multi", "min", "max", "disabledItemHandler", "value"], outputs: ["cancel", "confirm", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TuiMobileCalendarDropdownComponent, isStandalone: true, selector: "tui-mobile-calendar-dropdown", hostDirectives: [{ directive: i1.TuiActiveZone }, { directive: i2.TuiAnimated }], ngImport: i0, template: "<tui-mobile-calendar\n    [disabledItemHandler]=\"calculatedDisabledItemHandler\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [multi]=\"multi\"\n    [single]=\"single\"\n    [value]=\"value()\"\n    (cancel)=\"close()\"\n    (confirm)=\"confirm($event)\"\n    (valueChange)=\"onValueChange($event)\"\n/>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:100%;background:var(--tui-background-elevation-1);box-shadow:0 10rem var(--tui-background-elevation-1),0 -90vh 1rem 2rem var(--tui-service-backdrop);block-size:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}\n"], dependencies: [{ kind: "component", type: TuiMobileCalendar, selector: "tui-mobile-calendar", inputs: ["single", "multi", "min", "max", "disabledItemHandler", "value"], outputs: ["cancel", "confirm", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
-], TuiMobileCalendarDropdown.prototype, "calculateDisabledItemHandler", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiMobileCalendarDropdown, decorators: [{
+], TuiMobileCalendarDropdownComponent.prototype, "calculateDisabledItemHandler", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendarDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tui-mobile-calendar-dropdown', imports: [TuiMobileCalendar], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiActiveZone, TuiAnimated], template: "<tui-mobile-calendar\n    [disabledItemHandler]=\"calculatedDisabledItemHandler\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [multi]=\"multi\"\n    [single]=\"single\"\n    [value]=\"value()\"\n    (cancel)=\"close()\"\n    (confirm)=\"confirm($event)\"\n    (valueChange)=\"onValueChange($event)\"\n/>\n", styles: [":host{position:fixed;top:0;left:0;inline-size:100%;block-size:100%;background:var(--tui-background-elevation-1);box-shadow:0 10rem var(--tui-background-elevation-1),0 -90vh 1rem 2rem var(--tui-service-backdrop);block-size:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide}\n"] }]
         }], ctorParameters: () => [], propDecorators: { calculateDisabledItemHandler: [] } });
-function tuiProvideMobileCalendar() {
-    return {
-        provide: TUI_MOBILE_CALENDAR,
-        useValue: TuiMobileCalendarDropdown,
-    };
-}
 /**
  * Generated bundle index. Do not edit.
  */
-export { TuiMobileCalendarDropdown, TuiMobileCalendarDropdownNew, tuiProvideMobileCalendar };
+export { TuiMobileCalendarDropdown, TuiMobileCalendarDropdownComponent };
 //# sourceMappingURL=taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs.map