@taiga-ui/addon-mobile 4.52.0-canary.763e67d → 4.52.0-canary.7c53ccc
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.
- package/components/bottom-sheet/bottom-sheet.component.d.ts +3 -3
- package/components/mobile-calendar/calendar-date-stream.d.ts +6 -0
- package/components/mobile-calendar/index.d.ts +1 -0
- package/components/mobile-calendar/mobile-calendar.component.d.ts +15 -18
- package/components/mobile-calendar/mobile-calendar.strategy.d.ts +1 -2
- package/components/mobile-calendar-dropdown/mobile-calendar-dropdown.component.d.ts +6 -6
- package/components/mobile-calendar-dropdown/mobile-calendar-dropdown.directive.d.ts +6 -6
- package/components/pull-to-refresh/pull-to-refresh.component.d.ts +8 -7
- package/components/swipe-action/swipe-actions-auto-close.directive.d.ts +2 -2
- package/components/tab-bar/tab-bar-item.component.d.ts +3 -3
- package/components/tab-bar/tab-bar.component.d.ts +4 -7
- package/directives/elastic-sticky/elastic-sticky.directive.d.ts +1 -2
- package/directives/ripple/ripple.directive.d.ts +2 -2
- package/directives/touchable/touchable.directive.d.ts +5 -5
- package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs +11 -19
- package/fesm2022/taiga-ui-addon-mobile-components-bottom-sheet.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs +23 -31
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar-sheet.mjs +2 -2
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs +102 -123
- package/fesm2022/taiga-ui-addon-mobile-components-mobile-calendar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs +29 -39
- package/fesm2022/taiga-ui-addon-mobile-components-pull-to-refresh.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs +2 -2
- package/fesm2022/taiga-ui-addon-mobile-components-sheet-dialog.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-action.mjs +7 -14
- package/fesm2022/taiga-ui-addon-mobile-components-swipe-action.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs +23 -41
- package/fesm2022/taiga-ui-addon-mobile-components-tab-bar.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs +4 -6
- package/fesm2022/taiga-ui-addon-mobile-directives-elastic-sticky.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs +5 -7
- package/fesm2022/taiga-ui-addon-mobile-directives-ripple.mjs.map +1 -1
- package/fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs +16 -22
- package/fesm2022/taiga-ui-addon-mobile-directives-touchable.mjs.map +1 -1
- package/package.json +9 -9
- package/styles/android/app-bar.less +5 -1
- package/styles/common/badge-notification.less +1 -1
- package/styles/common/badge.less +2 -2
- package/styles/common/block-status.less +1 -1
- package/styles/common/button.less +1 -1
- package/styles/common/header.less +1 -1
- package/styles/common/message.less +1 -1
- package/styles/common/segmented.less +1 -1
- package/styles/common/title.less +0 -1
- package/styles/common/toast.less +1 -1
|
@@ -10,13 +10,13 @@ class TuiMobileCalendarSheet extends TuiCalendarSheet {
|
|
|
10
10
|
this.isIOS = inject(TUI_IS_IOS);
|
|
11
11
|
}
|
|
12
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendarSheet, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiMobileCalendarSheet, isStandalone: true, selector: "tui-mobile-calendar-sheet", host: { properties: { "class._ios": "isIOS" } }, usesInheritance: true, ngImport: i0, template: "@let sheet = month | tuiCalendarSheet;\n@for (_ of '-'.repeat(sheet.length); track $index) {\n @let rowIndex = $index;\n <div\n automation-id=\"tui-primitive-calendar-mobile__row\"\n class=\"t-row\"\n >\n @for (_ of '-'.repeat(7 - (sheet[rowIndex]?.length ?? 0)); track $index) {\n <div class=\"t-cell t-cell_empty\"></div>\n }\n @for (_ of '-'.repeat(sheet[rowIndex]?.length ?? 0); track $index) {\n @if (sheet[rowIndex]?.[$index]; as item) {\n <div\n automation-id=\"tui-primitive-calendar-mobile__cell\"\n tuiRipple\n class=\"t-cell\"\n [attr.data-range]=\"getItemRange(item)\"\n [class.t-cell_disabled]=\"disabledItemHandler(item)\"\n [class.t-cell_today]=\"itemIsToday(item)\"\n (click)=\"onItemClick(item)\"\n >\n {{ item.day }}\n </div>\n }\n }\n @for (_ of '-'.repeat(7 - (sheet[rowIndex]?.length ?? 0)); track $index) {\n <div class=\"t-cell t-cell_empty\"></div>\n }\n </div>\n}\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiMobileCalendarSheet, isStandalone: true, selector: "tui-mobile-calendar-sheet", host: { properties: { "class._ios": "isIOS" } }, usesInheritance: true, ngImport: i0, template: "@let sheet = month | tuiCalendarSheet;\n@for (_ of '-'.repeat(sheet.length); track $index) {\n @let rowIndex = $index;\n <div\n automation-id=\"tui-primitive-calendar-mobile__row\"\n class=\"t-row\"\n >\n @for (_ of '-'.repeat(7 - (sheet[rowIndex]?.length ?? 0)); track $index) {\n <div class=\"t-cell t-cell_empty\"></div>\n }\n @for (_ of '-'.repeat(sheet[rowIndex]?.length ?? 0); track $index) {\n @if (sheet[rowIndex]?.[$index]; as item) {\n <div\n automation-id=\"tui-primitive-calendar-mobile__cell\"\n tuiRipple\n class=\"t-cell\"\n [attr.data-range]=\"getItemRange(item)\"\n [class.t-cell_disabled]=\"disabledItemHandler(item)\"\n [class.t-cell_today]=\"itemIsToday(item)\"\n (click)=\"onItemClick(item)\"\n >\n {{ item.day }}\n </div>\n }\n }\n @for (_ of '-'.repeat(7 - (sheet[rowIndex]?.length ?? 0)); track $index) {\n <div class=\"t-cell t-cell_empty\"></div>\n }\n </div>\n}\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-body-m)}.t-row:first-child{justify-content:flex-end}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{right:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{left:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}:host{display:block;inline-size:20.75rem;max-inline-size:100vw}:host._ios{inline-size:22.625rem}:host._ios .t-row{block-size:3.125rem;font-size:1.0625rem}:host._ios .t-cell[data-range=start],:host._ios .t-cell[data-range=end],:host._ios .t-cell[data-range=active]{font-weight:600}.t-row{block-size:3rem;justify-content:space-between!important;font-family:inherit;font-size:1.125rem;padding:.125rem;box-sizing:border-box}.t-row:first-child .t-cell:not(.t-cell_empty)~.t-cell_empty,.t-row:last-child .t-cell_empty{display:none}.t-row:last-child .t-cell:not(.t-cell_empty)~.t-cell_empty{display:flex}.t-cell{inline-size:2.5rem;block-size:2.5rem;border-radius:100%;overflow:hidden;mask:none;border:none;text-decoration:none}.t-cell_empty{visibility:hidden}.t-cell_today:after{content:\"\\2022\";text-align:center;line-height:4rem;font-size:1.5rem;color:var(--tui-text-action)}.t-cell_today[data-range=start]:after,.t-cell_today[data-range=end]:after,.t-cell_today[data-range=active]:after{color:inherit}.t-cell[data-range=start],.t-cell[data-range=end],.t-cell[data-range=active]{font-weight:500}.t-cell:after{mask:none}\n"], dependencies: [{ kind: "pipe", type: TuiCalendarSheetPipe, name: "tuiCalendarSheet" }, { kind: "directive", type: TuiRipple, selector: "[tuiRipple]", inputs: ["tuiRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendarSheet, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
17
|
args: [{ selector: 'tui-mobile-calendar-sheet', imports: [TuiCalendarSheetPipe, TuiRipple], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
18
18
|
'[class._ios]': 'isIOS',
|
|
19
|
-
}, template: "@let sheet = month | tuiCalendarSheet;\n@for (_ of '-'.repeat(sheet.length); track $index) {\n @let rowIndex = $index;\n <div\n automation-id=\"tui-primitive-calendar-mobile__row\"\n class=\"t-row\"\n >\n @for (_ of '-'.repeat(7 - (sheet[rowIndex]?.length ?? 0)); track $index) {\n <div class=\"t-cell t-cell_empty\"></div>\n }\n @for (_ of '-'.repeat(sheet[rowIndex]?.length ?? 0); track $index) {\n @if (sheet[rowIndex]?.[$index]; as item) {\n <div\n automation-id=\"tui-primitive-calendar-mobile__cell\"\n tuiRipple\n class=\"t-cell\"\n [attr.data-range]=\"getItemRange(item)\"\n [class.t-cell_disabled]=\"disabledItemHandler(item)\"\n [class.t-cell_today]=\"itemIsToday(item)\"\n (click)=\"onItemClick(item)\"\n >\n {{ item.day }}\n </div>\n }\n }\n @for (_ of '-'.repeat(7 - (sheet[rowIndex]?.length ?? 0)); track $index) {\n <div class=\"t-cell t-cell_empty\"></div>\n }\n </div>\n}\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-
|
|
19
|
+
}, template: "@let sheet = month | tuiCalendarSheet;\n@for (_ of '-'.repeat(sheet.length); track $index) {\n @let rowIndex = $index;\n <div\n automation-id=\"tui-primitive-calendar-mobile__row\"\n class=\"t-row\"\n >\n @for (_ of '-'.repeat(7 - (sheet[rowIndex]?.length ?? 0)); track $index) {\n <div class=\"t-cell t-cell_empty\"></div>\n }\n @for (_ of '-'.repeat(sheet[rowIndex]?.length ?? 0); track $index) {\n @if (sheet[rowIndex]?.[$index]; as item) {\n <div\n automation-id=\"tui-primitive-calendar-mobile__cell\"\n tuiRipple\n class=\"t-cell\"\n [attr.data-range]=\"getItemRange(item)\"\n [class.t-cell_disabled]=\"disabledItemHandler(item)\"\n [class.t-cell_today]=\"itemIsToday(item)\"\n (click)=\"onItemClick(item)\"\n >\n {{ item.day }}\n </div>\n }\n }\n @for (_ of '-'.repeat(7 - (sheet[rowIndex]?.length ?? 0)); track $index) {\n <div class=\"t-cell t-cell_empty\"></div>\n }\n </div>\n}\n", styles: [".t-row{display:flex;justify-content:flex-start;font:var(--tui-font-body-m)}.t-row:first-child{justify-content:flex-end}.t-row:last-child{justify-content:flex-start}.t-cell{position:relative;display:flex;align-items:center;justify-content:center;line-height:2rem;isolation:isolate;cursor:pointer;overflow:hidden;border:.125rem solid transparent;box-sizing:border-box;mask:linear-gradient(transparent calc(50% - 1rem),#000 calc(50% - 1rem),#000 calc(50% + 1rem),transparent calc(50% + 1rem))}.t-cell:first-child{border-inline-start-color:transparent!important}.t-cell:last-child{border-inline-end-color:transparent!important}.t-cell:before,.t-cell:after{position:absolute;inset:0;content:\"\";z-index:-1;border-radius:var(--tui-radius-m)}.t-cell:after{mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 32\"><path d=\"M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z\"></path></svg>') right / .75rem 100% no-repeat,linear-gradient(#000,#000) left / calc(100% - .7rem) 100% no-repeat}.t-cell[data-range]:before{background:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range]:before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1)}:host._picking .t-cell[data-range=middle]{border-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=middle]:not(:first-child):before{border-top-left-radius:0;border-bottom-left-radius:0}.t-cell[data-range=middle]:not(:last-child):before{border-top-right-radius:0;border-bottom-right-radius:0}.t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=start]{border-inline-end-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:not(:last-child):before{right:-1rem}.t-cell[data-range=start]:after{background:var(--tui-background-accent-1)}.t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1);color:var(--tui-text-primary-on-accent-1)}:host._picking .t-cell[data-range=end]{border-inline-start-color:var(--tui-background-neutral-1-hover)}.t-cell[data-range=end]:not(:first-child):before{left:-1rem}.t-cell[data-range=end]:after{background:var(--tui-background-accent-1);transform:scaleX(-1)}.t-cell[data-range=active]{color:var(--tui-text-primary-on-accent-1)}.t-cell[data-range=active]:after{background:var(--tui-background-accent-1);mask:none}.t-cell_disabled{opacity:var(--tui-disabled-opacity);pointer-events:none}.t-cell_today{text-decoration:underline;text-underline-offset:.25rem}@media (hover: hover) and (pointer: fine){.t-cell:hover:not([data-range=start]):not([data-range=end]):before{background:var(--tui-background-neutral-1-hover)}.t-cell[data-range=start]:hover:after,.t-cell[data-range=end]:hover:after,.t-cell[data-range=active]:hover:after{background:var(--tui-background-accent-1-hover)}}:host{display:block;inline-size:20.75rem;max-inline-size:100vw}:host._ios{inline-size:22.625rem}:host._ios .t-row{block-size:3.125rem;font-size:1.0625rem}:host._ios .t-cell[data-range=start],:host._ios .t-cell[data-range=end],:host._ios .t-cell[data-range=active]{font-weight:600}.t-row{block-size:3rem;justify-content:space-between!important;font-family:inherit;font-size:1.125rem;padding:.125rem;box-sizing:border-box}.t-row:first-child .t-cell:not(.t-cell_empty)~.t-cell_empty,.t-row:last-child .t-cell_empty{display:none}.t-row:last-child .t-cell:not(.t-cell_empty)~.t-cell_empty{display:flex}.t-cell{inline-size:2.5rem;block-size:2.5rem;border-radius:100%;overflow:hidden;mask:none;border:none;text-decoration:none}.t-cell_empty{visibility:hidden}.t-cell_today:after{content:\"\\2022\";text-align:center;line-height:4rem;font-size:1.5rem;color:var(--tui-text-action)}.t-cell_today[data-range=start]:after,.t-cell_today[data-range=end]:after,.t-cell_today[data-range=active]:after{color:inherit}.t-cell[data-range=start],.t-cell[data-range=end],.t-cell[data-range=active]{font-weight:500}.t-cell:after{mask:none}\n"] }]
|
|
20
20
|
}] });
|
|
21
21
|
|
|
22
22
|
/**
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, Optional, Self, inject, viewChild, DestroyRef, NgZone, computed, input, output, model, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { NgControl } from '@angular/forms';
|
|
4
|
+
import { tuiControlValue, tuiWatch, tuiZonefreeScheduler, tuiZonefree, tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
|
|
5
|
+
import { of, map, Subject, distinctUntilChanged, EMPTY, timer, identity, delay, take, windowToggle, mergeMap, filter, switchMap, race, debounceTime, takeUntil } from 'rxjs';
|
|
1
6
|
import { VIRTUAL_SCROLL_STRATEGY, CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
2
7
|
import { DOCUMENT, AsyncPipe } from '@angular/common';
|
|
3
|
-
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, InjectionToken, Optional, DestroyRef, NgZone, EventEmitter, Input, Output, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
8
|
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
|
|
6
9
|
import { TuiMobileCalendarSheet } from '@taiga-ui/addon-mobile/components/mobile-calendar-sheet';
|
|
7
10
|
import { TuiRipple } from '@taiga-ui/addon-mobile/directives/ripple';
|
|
8
11
|
import { TuiTouchable } from '@taiga-ui/addon-mobile/directives/touchable';
|
|
9
12
|
import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
|
|
10
|
-
import { MONTHS_IN_YEAR, TuiDay, TuiMonth, TUI_FIRST_DAY, TUI_LAST_DAY
|
|
11
|
-
import { tuiWatch, tuiZonefreeScheduler, tuiZonefree, tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
|
|
13
|
+
import { MONTHS_IN_YEAR, TuiDay, TuiDayRange, TuiMonth, TUI_FIRST_DAY, TUI_LAST_DAY } from '@taiga-ui/cdk/date-time';
|
|
12
14
|
import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
|
|
13
15
|
import { TUI_IS_IOS, TUI_IS_E2E } from '@taiga-ui/cdk/tokens';
|
|
14
16
|
import { TuiButton } from '@taiga-ui/core/components/button';
|
|
@@ -16,10 +18,24 @@ import { TUI_CALENDAR_SHEET_OPTIONS, TuiOrderWeekDaysPipe } from '@taiga-ui/core
|
|
|
16
18
|
import { TuiLink } from '@taiga-ui/core/components/link';
|
|
17
19
|
import { TUI_ANIMATIONS_SPEED, TUI_COMMON_ICONS, TUI_CLOSE_WORD, TUI_MONTHS, TUI_SHORT_WEEK_DAYS } from '@taiga-ui/core/tokens';
|
|
18
20
|
import { tuiGetDuration } from '@taiga-ui/core/utils/miscellaneous';
|
|
19
|
-
import {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
import { TUI_CANCEL_WORD, TUI_DONE_WORD, TUI_CHOOSE_DAY_OR_RANGE_TEXTS } from '@taiga-ui/kit/tokens';
|
|
22
|
+
|
|
23
|
+
const TUI_CALENDAR_DATE_STREAM = new InjectionToken(ngDevMode ? 'TUI_CALENDAR_DATE_STREAM' : '');
|
|
24
|
+
function tuiDateStreamWithTransformer(transformer) {
|
|
25
|
+
return {
|
|
26
|
+
provide: TUI_CALENDAR_DATE_STREAM,
|
|
27
|
+
deps: [
|
|
28
|
+
[new Optional(), new Self(), NgControl],
|
|
29
|
+
[new Optional(), transformer],
|
|
30
|
+
],
|
|
31
|
+
useFactory: tuiControlValueFactory,
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function tuiControlValueFactory(control, transformer) {
|
|
35
|
+
return control
|
|
36
|
+
? tuiControlValue(control).pipe(map((value) => transformer ? transformer?.fromControlValue(value) : value))
|
|
37
|
+
: of(null);
|
|
38
|
+
}
|
|
23
39
|
|
|
24
40
|
function getCycle(options) {
|
|
25
41
|
return Array.from({ length: options.yearCycle }, (_, i) => Array.from({ length: MONTHS_IN_YEAR }, (_, month) => options.label +
|
|
@@ -77,9 +93,7 @@ class TuiMobileCalendarStrategy {
|
|
|
77
93
|
this.destroy$ = new Subject();
|
|
78
94
|
this.index$ = new Subject();
|
|
79
95
|
this.viewport = null;
|
|
80
|
-
|
|
81
|
-
get scrolledIndexChange() {
|
|
82
|
-
return this.index$.pipe(distinctUntilChanged());
|
|
96
|
+
this.scrolledIndexChange = this.index$.pipe(distinctUntilChanged());
|
|
83
97
|
}
|
|
84
98
|
attach(viewport) {
|
|
85
99
|
const cycle = this.isIOS ? IOS_CYCLE_HEIGHT : ANDROID_CYCLE_HEIGHT;
|
|
@@ -160,9 +174,6 @@ class TuiMobileCalendarStrategy {
|
|
|
160
174
|
this.index$.next(firstVisibleIndex);
|
|
161
175
|
}
|
|
162
176
|
}
|
|
163
|
-
__decorate([
|
|
164
|
-
tuiPure
|
|
165
|
-
], TuiMobileCalendarStrategy.prototype, "scrolledIndexChange", null);
|
|
166
177
|
|
|
167
178
|
/**
|
|
168
179
|
* Stream for updating value
|
|
@@ -182,7 +193,8 @@ const TUI_MOBILE_CALENDAR_PROVIDERS = [
|
|
|
182
193
|
|
|
183
194
|
class TuiMobileCalendar {
|
|
184
195
|
constructor() {
|
|
185
|
-
this.
|
|
196
|
+
this.yearsScroll = viewChild('yearsScroll');
|
|
197
|
+
this.monthsScroll = viewChild('monthsScroll');
|
|
186
198
|
this.today = TuiDay.currentLocal();
|
|
187
199
|
this.activeYear = 0;
|
|
188
200
|
this.activeMonth = 0;
|
|
@@ -190,6 +202,32 @@ class TuiMobileCalendar {
|
|
|
190
202
|
this.doc = inject(DOCUMENT);
|
|
191
203
|
this.speed = inject(TUI_ANIMATIONS_SPEED);
|
|
192
204
|
this.ngZone = inject(NgZone);
|
|
205
|
+
this.getYearsViewportSize = computed(() => this.yearsScroll()?.getViewportSize() || 0);
|
|
206
|
+
this.initialYear = computed((value = this.value()) => {
|
|
207
|
+
if (!value) {
|
|
208
|
+
return this.today.year;
|
|
209
|
+
}
|
|
210
|
+
if (value instanceof TuiDay) {
|
|
211
|
+
return value.year;
|
|
212
|
+
}
|
|
213
|
+
if (!(value instanceof TuiDayRange)) {
|
|
214
|
+
return value?.[0]?.year ?? this.today.year;
|
|
215
|
+
}
|
|
216
|
+
return value.to.year;
|
|
217
|
+
});
|
|
218
|
+
this.initialMonth = computed((value = this.value()) => {
|
|
219
|
+
if (!value) {
|
|
220
|
+
return this.today.month + (this.today.year - STARTING_YEAR) * MONTHS_IN_YEAR;
|
|
221
|
+
}
|
|
222
|
+
if (value instanceof TuiDay) {
|
|
223
|
+
return value.month + (value.year - STARTING_YEAR) * MONTHS_IN_YEAR;
|
|
224
|
+
}
|
|
225
|
+
if (!(value instanceof TuiDayRange)) {
|
|
226
|
+
return ((value?.[0]?.month ?? this.today.month) +
|
|
227
|
+
((value?.[0]?.year ?? this.today.year) - STARTING_YEAR) * MONTHS_IN_YEAR);
|
|
228
|
+
}
|
|
229
|
+
return value.to.month + (value.to.year - STARTING_YEAR) * MONTHS_IN_YEAR;
|
|
230
|
+
});
|
|
193
231
|
this.initialized = false;
|
|
194
232
|
this.isIOS = inject(TUI_IS_IOS);
|
|
195
233
|
this.isE2E = inject(TUI_IS_E2E);
|
|
@@ -211,34 +249,26 @@ class TuiMobileCalendar {
|
|
|
211
249
|
* ```
|
|
212
250
|
* TODO(v5): delete it
|
|
213
251
|
*/
|
|
214
|
-
this.single = !inject(TUI_CALENDAR_SHEET_OPTIONS).rangeMode;
|
|
215
|
-
this.multi = false;
|
|
216
|
-
this.min = TUI_FIRST_DAY;
|
|
217
|
-
this.max = TUI_LAST_DAY;
|
|
218
|
-
this.disabledItemHandler = TUI_FALSE_HANDLER;
|
|
219
|
-
this.cancel =
|
|
220
|
-
this.confirm =
|
|
221
|
-
this.
|
|
252
|
+
this.single = input(!inject(TUI_CALENDAR_SHEET_OPTIONS).rangeMode);
|
|
253
|
+
this.multi = input(false);
|
|
254
|
+
this.min = input(TUI_FIRST_DAY);
|
|
255
|
+
this.max = input(TUI_LAST_DAY);
|
|
256
|
+
this.disabledItemHandler = input(TUI_FALSE_HANDLER);
|
|
257
|
+
this.cancel = output();
|
|
258
|
+
this.confirm = output();
|
|
259
|
+
this.value = model(null);
|
|
222
260
|
this.disabledItemHandlerMapper = (disabledItemHandler, min, max) => (item) => item.dayBefore(min) ||
|
|
223
261
|
(max !== null && item.dayAfter(max)) ||
|
|
224
262
|
disabledItemHandler(item);
|
|
225
263
|
inject(TUI_VALUE_STREAM)
|
|
226
264
|
.pipe(takeUntilDestroyed())
|
|
227
265
|
.subscribe((value) => {
|
|
228
|
-
this.value
|
|
266
|
+
this.value.set(value);
|
|
229
267
|
});
|
|
230
268
|
}
|
|
231
|
-
set value(value) {
|
|
232
|
-
if (value !== undefined) {
|
|
233
|
-
this.value$.next(value);
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
get value() {
|
|
237
|
-
return this.value$.value;
|
|
238
|
-
}
|
|
239
269
|
ngAfterViewInit() {
|
|
240
|
-
this.activeYear = this.initialYear;
|
|
241
|
-
this.activeMonth = this.initialMonth;
|
|
270
|
+
this.activeYear = this.initialYear();
|
|
271
|
+
this.activeMonth = this.initialMonth();
|
|
242
272
|
// Virtual scroll has not yet rendered items even in ngAfterViewInit
|
|
243
273
|
this.waitScrolledChange();
|
|
244
274
|
}
|
|
@@ -260,28 +290,30 @@ class TuiMobileCalendar {
|
|
|
260
290
|
this.cancel.emit();
|
|
261
291
|
}
|
|
262
292
|
onConfirm() {
|
|
263
|
-
|
|
264
|
-
|
|
293
|
+
const value = this.value();
|
|
294
|
+
if (value) {
|
|
295
|
+
this.confirm.emit(value);
|
|
265
296
|
}
|
|
266
297
|
else {
|
|
267
298
|
this.cancel.emit();
|
|
268
299
|
}
|
|
269
300
|
}
|
|
270
301
|
onDayClick(day) {
|
|
271
|
-
|
|
272
|
-
|
|
302
|
+
const value = this.value();
|
|
303
|
+
if (this.single()) {
|
|
304
|
+
this.value.set(day);
|
|
273
305
|
}
|
|
274
|
-
else if (this.isMultiValue(
|
|
275
|
-
this.value
|
|
306
|
+
else if (this.isMultiValue(value)) {
|
|
307
|
+
this.value.set(toggleDay(value, day));
|
|
276
308
|
}
|
|
277
|
-
else if (
|
|
278
|
-
this.value
|
|
309
|
+
else if (value instanceof TuiDay) {
|
|
310
|
+
this.value.set(TuiDayRange.sort(value, day));
|
|
279
311
|
}
|
|
280
|
-
else if (
|
|
281
|
-
this.value
|
|
312
|
+
else if (value instanceof TuiDayRange) {
|
|
313
|
+
this.value.set(day);
|
|
282
314
|
}
|
|
283
|
-
else if (!
|
|
284
|
-
this.value
|
|
315
|
+
else if (!value) {
|
|
316
|
+
this.value.set(day);
|
|
285
317
|
}
|
|
286
318
|
}
|
|
287
319
|
getState(index) {
|
|
@@ -306,49 +338,20 @@ class TuiMobileCalendar {
|
|
|
306
338
|
this.activeYear = activeYear;
|
|
307
339
|
this.scrollToActiveYear();
|
|
308
340
|
}
|
|
309
|
-
get initialYear() {
|
|
310
|
-
if (!this.value) {
|
|
311
|
-
return this.today.year;
|
|
312
|
-
}
|
|
313
|
-
if (this.value instanceof TuiDay) {
|
|
314
|
-
return this.value.year;
|
|
315
|
-
}
|
|
316
|
-
if (!(this.value instanceof TuiDayRange)) {
|
|
317
|
-
return this.value?.[0]?.year ?? this.today.year;
|
|
318
|
-
}
|
|
319
|
-
return this.value.to.year;
|
|
320
|
-
}
|
|
321
|
-
get initialMonth() {
|
|
322
|
-
if (!this.value) {
|
|
323
|
-
return this.today.month + (this.today.year - STARTING_YEAR) * MONTHS_IN_YEAR;
|
|
324
|
-
}
|
|
325
|
-
if (this.value instanceof TuiDay) {
|
|
326
|
-
return this.value.month + (this.value.year - STARTING_YEAR) * MONTHS_IN_YEAR;
|
|
327
|
-
}
|
|
328
|
-
if (!(this.value instanceof TuiDayRange)) {
|
|
329
|
-
return ((this.value?.[0]?.month ?? this.today.month) +
|
|
330
|
-
((this.value?.[0]?.year ?? this.today.year) - STARTING_YEAR) *
|
|
331
|
-
MONTHS_IN_YEAR);
|
|
332
|
-
}
|
|
333
|
-
return (this.value.to.month + (this.value.to.year - STARTING_YEAR) * MONTHS_IN_YEAR);
|
|
334
|
-
}
|
|
335
341
|
isMultiValue(day) {
|
|
336
|
-
return !(day instanceof TuiDay) && !(day instanceof TuiDayRange) && this.multi;
|
|
337
|
-
}
|
|
338
|
-
getYearsViewportSize() {
|
|
339
|
-
return this.yearsScrollRef?.getViewportSize() || 0;
|
|
342
|
+
return !(day instanceof TuiDay) && !(day instanceof TuiDayRange) && this.multi();
|
|
340
343
|
}
|
|
341
344
|
updateViewportDimension() {
|
|
342
|
-
this.
|
|
343
|
-
this.
|
|
345
|
+
this.yearsScroll()?.checkViewportSize();
|
|
346
|
+
this.monthsScroll()?.checkViewportSize();
|
|
344
347
|
}
|
|
345
348
|
lateInit() {
|
|
346
349
|
return this.getYearsViewportSize() > 0 ? identity : delay(200);
|
|
347
350
|
}
|
|
348
351
|
waitScrolledChange() {
|
|
349
352
|
this.updateViewportDimension();
|
|
350
|
-
this.
|
|
351
|
-
.pipe(delay(tuiGetDuration(this.speed)), this.lateInit(), take(1), takeUntilDestroyed(this.destroyRef))
|
|
353
|
+
this.monthsScroll()
|
|
354
|
+
?.scrolledIndexChange.pipe(delay(tuiGetDuration(this.speed)), this.lateInit(), take(1), takeUntilDestroyed(this.destroyRef))
|
|
352
355
|
.subscribe(() => {
|
|
353
356
|
this.initialized = true;
|
|
354
357
|
this.updateViewportDimension();
|
|
@@ -359,21 +362,21 @@ class TuiMobileCalendar {
|
|
|
359
362
|
});
|
|
360
363
|
}
|
|
361
364
|
initYearScroll() {
|
|
362
|
-
const
|
|
363
|
-
if (!
|
|
365
|
+
const yearsScroll = this.yearsScroll();
|
|
366
|
+
if (!yearsScroll) {
|
|
364
367
|
return;
|
|
365
368
|
}
|
|
366
|
-
const touchstart$ = tuiTypedFromEvent(
|
|
367
|
-
const touchend$ = tuiTypedFromEvent(
|
|
368
|
-
const click$ = tuiTypedFromEvent(
|
|
369
|
+
const touchstart$ = tuiTypedFromEvent(yearsScroll.elementRef.nativeElement, 'touchstart', { passive: true });
|
|
370
|
+
const touchend$ = tuiTypedFromEvent(yearsScroll.elementRef.nativeElement, 'touchend', { passive: true });
|
|
371
|
+
const click$ = tuiTypedFromEvent(yearsScroll.elementRef.nativeElement, 'click');
|
|
369
372
|
// Refresh activeYear
|
|
370
|
-
|
|
373
|
+
yearsScroll
|
|
371
374
|
.elementScrolled()
|
|
372
375
|
.pipe(
|
|
373
376
|
// Ignore smooth scroll resulting from click on the exact year
|
|
374
377
|
windowToggle(touchstart$, () => click$), mergeMap((x) => x),
|
|
375
378
|
// Delay is required to run months scroll in the next frame to prevent flicker
|
|
376
|
-
delay(0), map(() => Math.round(
|
|
379
|
+
delay(0), map(() => Math.round(yearsScroll.measureScrollOffset() / this.yearWidth) +
|
|
377
380
|
Math.floor(YEARS_IN_ROW / 2) +
|
|
378
381
|
STARTING_YEAR), filter((activeYear) => activeYear !== this.activeYear), takeUntilDestroyed(this.destroyRef))
|
|
379
382
|
.subscribe((activeYear) => {
|
|
@@ -383,26 +386,26 @@ class TuiMobileCalendar {
|
|
|
383
386
|
});
|
|
384
387
|
// Smooth scroll to activeYear after scrolling is done
|
|
385
388
|
touchstart$
|
|
386
|
-
.pipe(switchMap(() => touchend$), switchMap(() => race(
|
|
389
|
+
.pipe(switchMap(() => touchend$), switchMap(() => race(yearsScroll.elementScrolled(), timer(SCROLL_DEBOUNCE_TIME, tuiZonefreeScheduler(this.ngZone))).pipe(debounceTime(SCROLL_DEBOUNCE_TIME * 2, tuiZonefreeScheduler(this.ngZone)), take(1), takeUntil(touchstart$))), takeUntilDestroyed(this.destroyRef))
|
|
387
390
|
.subscribe(() => this.scrollToActiveYear('smooth'));
|
|
388
391
|
}
|
|
389
392
|
initMonthScroll() {
|
|
390
|
-
const
|
|
391
|
-
if (!
|
|
393
|
+
const monthsScroll = this.monthsScroll();
|
|
394
|
+
if (!monthsScroll) {
|
|
392
395
|
return;
|
|
393
396
|
}
|
|
394
|
-
const touchstart$ = tuiTypedFromEvent(
|
|
395
|
-
const touchend$ = tuiTypedFromEvent(
|
|
397
|
+
const touchstart$ = tuiTypedFromEvent(monthsScroll.elementRef.nativeElement, 'touchstart', { passive: true });
|
|
398
|
+
const touchend$ = tuiTypedFromEvent(monthsScroll.elementRef.nativeElement, 'touchend', { passive: true });
|
|
396
399
|
// Smooth scroll to the closest month after scrolling is done
|
|
397
400
|
touchstart$
|
|
398
|
-
.pipe(switchMap(() => touchend$), switchMap(() => race(
|
|
401
|
+
.pipe(switchMap(() => touchend$), switchMap(() => race(monthsScroll.elementScrolled(), timer(SCROLL_DEBOUNCE_TIME, tuiZonefreeScheduler(this.ngZone))).pipe(debounceTime(SCROLL_DEBOUNCE_TIME * 2, tuiZonefreeScheduler(this.ngZone)), take(1), takeUntil(touchstart$))), takeUntilDestroyed(this.destroyRef))
|
|
399
402
|
.subscribe(() => this.scrollToActiveMonth('smooth'));
|
|
400
403
|
}
|
|
401
404
|
scrollToActiveYear(behavior = 'auto') {
|
|
402
|
-
this.
|
|
405
|
+
this.yearsScroll()?.scrollToIndex(Math.max(this.activeYear - STARTING_YEAR - 2, 0), this.isE2E ? 'auto' : behavior);
|
|
403
406
|
}
|
|
404
407
|
scrollToActiveMonth(behavior = 'auto') {
|
|
405
|
-
this.
|
|
408
|
+
this.monthsScroll()?.scrollToIndex(this.activeMonth, this.isE2E ? 'auto' : behavior);
|
|
406
409
|
}
|
|
407
410
|
isYearActive(index) {
|
|
408
411
|
return index === this.activeYear;
|
|
@@ -414,7 +417,7 @@ class TuiMobileCalendar {
|
|
|
414
417
|
return (year - this.activeYear) * MONTHS_IN_YEAR;
|
|
415
418
|
}
|
|
416
419
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiMobileCalendar, isStandalone: true, selector: "tui-mobile-calendar", inputs: { single: "single", multi: "multi", min: "min", max: "max", disabledItemHandler: "disabledItemHandler", value: "value" }, outputs: { cancel: "cancel", confirm: "confirm",
|
|
420
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiMobileCalendar, isStandalone: true, selector: "tui-mobile-calendar", inputs: { single: { classPropertyName: "single", publicName: "single", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledItemHandler: { classPropertyName: "disabledItemHandler", publicName: "disabledItemHandler", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", confirm: "confirm", value: "valueChange" }, host: { listeners: { "mousedown.prevent": "0" }, properties: { "class._ios": "isIOS", "class._initialized": "initialized" } }, providers: TUI_MOBILE_CALENDAR_PROVIDERS, viewQueries: [{ propertyName: "yearsScroll", first: true, predicate: ["yearsScroll"], descendants: true, isSignal: true }, { propertyName: "monthsScroll", first: true, predicate: ["monthsScroll"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (chooseDayOrRangeTexts?.(); as texts) {\n <header class=\"t-header\">\n <button\n appearance=\"\"\n automation-id=\"tui-mobile-calendar__cancel\"\n tuiIconButton\n tuiRipple\n type=\"button\"\n class=\"t-close\"\n [iconStart]=\"icons.close\"\n [style.border-radius.%]=\"100\"\n (click)=\"onClose()\"\n >\n {{ closeWord() }}\n </button>\n <button\n tuiLink\n tuiTouchable=\"opacity\"\n type=\"button\"\n class=\"t-link t-link_close\"\n (click)=\"onClose()\"\n >\n {{ cancelWord() }}\n </button>\n <h2\n automation-id=\"tui-mobile-calendar__label\"\n class=\"t-label\"\n >\n {{ single() ? texts[0] : multi() ? texts[2] : texts[1] }}\n </h2>\n <button\n automation-id=\"tui-mobile-calendar__confirm\"\n tuiLink\n tuiTouchable=\"opacity\"\n type=\"button\"\n class=\"t-link\"\n (click)=\"onConfirm()\"\n >\n {{ doneWord() }}\n </button>\n </header>\n}\n<cdk-virtual-scroll-viewport\n #yearsScroll\n orientation=\"horizontal\"\n class=\"t-years\"\n [itemSize]=\"yearWidth\"\n>\n <div class=\"t-years-wrapper\">\n <button\n *cdkVirtualFor=\"let index of years\"\n type=\"button\"\n class=\"t-year\"\n [attr.data-state]=\"getState(index)\"\n (click)=\"setYear(index)\"\n >\n {{ index }}\n </button>\n </div>\n</cdk-virtual-scroll-viewport>\n<div class=\"t-week\">\n @for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {\n <div class=\"t-day\">\n {{ day }}\n </div>\n }\n</div>\n<cdk-virtual-scroll-viewport\n #monthsScroll\n itemSize=\"354\"\n maxBufferPx=\"5000\"\n minBufferPx=\"0\"\n class=\"t-months\"\n (scrolledIndexChange)=\"onMonthChange($event)\"\n>\n <section\n *cdkVirtualFor=\"let month of months; templateCacheSize: 10\"\n class=\"t-month-wrapper\"\n >\n <h2 class=\"t-month\">{{ monthNames()[month.month] }}</h2>\n <tui-mobile-calendar-sheet\n class=\"t-calendar\"\n [disabledItemHandler]=\"disabledItemHandler() | tuiMapper: disabledItemHandlerMapper : min() : max()\"\n [month]=\"month\"\n [single]=\"single()\"\n [value]=\"value()\"\n (dayClick)=\"onDayClick($event)\"\n />\n </section>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;block-size:100%;color:var(--tui-text-primary);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}:host ::ng-deep .t-cell:before,:host ::ng-deep .t-cell:after{transform:translateZ(1px)}.t-header{position:relative;display:flex;align-items:center;block-size:3.5rem;padding:0 1rem;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-header{block-size:2.75rem;border-block-end:none}.t-close{inline-size:1.5rem;block-size:1.5rem;margin-inline-end:2rem}:host._ios .t-close{display:none}.t-link{margin-inline-start:auto;flex-shrink:0;font-size:.875rem;line-height:1rem;font-weight:500;text-transform:uppercase;color:var(--tui-text-action)}.t-link_close{display:none}:host._ios .t-link{min-inline-size:3.75rem;text-align:end;font-size:.9375rem;line-height:1.125rem;font-weight:400;letter-spacing:.018125rem;text-transform:none}:host._ios .t-link_close{display:block;margin:0 auto 0 0;text-align:start}.t-label{flex-grow:1;margin:0;font-size:1.25rem;line-height:3.5rem;font-weight:500;letter-spacing:-.0125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-label+.t-link{padding-inline-start:1rem}:host._ios .t-label{font-size:1.0625rem;font-weight:600;letter-spacing:-.025625rem;text-align:center}.t-years{scrollbar-width:none;-ms-overflow-style:none;block-size:4.0625rem;background-color:var(--tui-background-base);box-shadow:0 .5px var(--tui-border-normal)}.t-years::-webkit-scrollbar,.t-years::-webkit-scrollbar-thumb{display:none}:host._ios .t-years{background-color:transparent}.t-years-wrapper{display:flex;block-size:4.0625rem}.t-year{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;outline:none;inline-size:20vw;flex-shrink:0;font-size:.9375rem;font-weight:700;letter-spacing:.015625rem;cursor:pointer;opacity:.1;transform:scale(.73);transition:color,opacity,transform .2s}.t-year[data-state=adjacent]{transform:scale(.86);opacity:.3}.t-year[data-state=active]{color:var(--tui-text-action);opacity:1;transform:scale(1)}.t-week{display:flex;align-items:center;block-size:1.875rem;inline-size:20.75rem;max-inline-size:100%;margin:0 auto;font-size:.75rem}:host._ios .t-week{inline-size:22.625rem;font-size:.6875rem;font-weight:500;color:var(--tui-text-secondary)}.t-day{flex:1;text-align:center}.t-months{scrollbar-width:none;-ms-overflow-style:none;block-size:calc(100% - 9.5rem);box-shadow:0 -1px var(--tui-border-normal);overflow-x:hidden}.t-months::-webkit-scrollbar,.t-months::-webkit-scrollbar-thumb{display:none}:host._ios .t-months{block-size:calc(100% - 8.75rem)}.t-month-wrapper{display:flex;margin:.625rem 0 -.625rem;block-size:22.125rem;flex-direction:column}.t-month{block-size:2.75rem;inline-size:100%;line-height:2.75rem;padding-inline-start:1rem;font-size:.875rem;font-weight:500;text-transform:uppercase;margin:0 0 1.25rem;box-sizing:border-box;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-month{block-size:3.125rem;margin:0;border-block-end:none;text-transform:none;font-size:1.375rem;line-height:3.125rem;letter-spacing:.02rem;font-weight:700}.t-calendar{margin:0 auto;transition:opacity .2s}.t-week,.t-years,.t-months{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}:host(._initialized) .t-week,:host(._initialized) .t-years,:host(._initialized) .t-months{opacity:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiMobileCalendarSheet, selector: "tui-mobile-calendar-sheet" }, { kind: "pipe", type: TuiOrderWeekDaysPipe, name: "tuiOrderWeekDays" }, { kind: "directive", type: TuiRipple, selector: "[tuiRipple]", inputs: ["tuiRipple"] }, { kind: "directive", type: TuiTouchable, selector: "[tuiTouchable]", inputs: ["tuiTouchable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
418
421
|
}
|
|
419
422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiMobileCalendar, decorators: [{
|
|
420
423
|
type: Component,
|
|
@@ -434,32 +437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
434
437
|
'[class._ios]': 'isIOS',
|
|
435
438
|
'[class._initialized]': 'initialized',
|
|
436
439
|
'(mousedown.prevent)': '0',
|
|
437
|
-
}, template: "@if (chooseDayOrRangeTexts?.(); as texts) {\n <header class=\"t-header\">\n <button\n appearance=\"\"\n automation-id=\"tui-mobile-calendar__cancel\"\n tuiIconButton\n tuiRipple\n type=\"button\"\n class=\"t-close\"\n [iconStart]=\"icons.close\"\n [style.border-radius.%]=\"100\"\n (click)=\"onClose()\"\n >\n {{ closeWord() }}\n </button>\n <button\n tuiLink\n tuiTouchable=\"opacity\"\n type=\"button\"\n class=\"t-link t-link_close\"\n (click)=\"onClose()\"\n >\n {{ cancelWord() }}\n </button>\n <h2\n automation-id=\"tui-mobile-calendar__label\"\n class=\"t-label\"\n >\n {{ single ? texts[0] : multi ? texts[2] : texts[1] }}\n </h2>\n <button\n automation-id=\"tui-mobile-calendar__confirm\"\n tuiLink\n tuiTouchable=\"opacity\"\n type=\"button\"\n class=\"t-link\"\n (click)=\"onConfirm()\"\n >\n {{ doneWord() }}\n </button>\n </header>\n}\n<cdk-virtual-scroll-viewport\n #
|
|
438
|
-
}], ctorParameters: () => []
|
|
439
|
-
type: ViewChild,
|
|
440
|
-
args: ['yearsScrollRef']
|
|
441
|
-
}], monthsScrollRef: [{
|
|
442
|
-
type: ViewChild,
|
|
443
|
-
args: ['monthsScrollRef']
|
|
444
|
-
}], single: [{
|
|
445
|
-
type: Input
|
|
446
|
-
}], multi: [{
|
|
447
|
-
type: Input
|
|
448
|
-
}], min: [{
|
|
449
|
-
type: Input
|
|
450
|
-
}], max: [{
|
|
451
|
-
type: Input
|
|
452
|
-
}], disabledItemHandler: [{
|
|
453
|
-
type: Input
|
|
454
|
-
}], cancel: [{
|
|
455
|
-
type: Output
|
|
456
|
-
}], confirm: [{
|
|
457
|
-
type: Output
|
|
458
|
-
}], valueChange: [{
|
|
459
|
-
type: Output
|
|
460
|
-
}], value: [{
|
|
461
|
-
type: Input
|
|
462
|
-
}] } });
|
|
440
|
+
}, template: "@if (chooseDayOrRangeTexts?.(); as texts) {\n <header class=\"t-header\">\n <button\n appearance=\"\"\n automation-id=\"tui-mobile-calendar__cancel\"\n tuiIconButton\n tuiRipple\n type=\"button\"\n class=\"t-close\"\n [iconStart]=\"icons.close\"\n [style.border-radius.%]=\"100\"\n (click)=\"onClose()\"\n >\n {{ closeWord() }}\n </button>\n <button\n tuiLink\n tuiTouchable=\"opacity\"\n type=\"button\"\n class=\"t-link t-link_close\"\n (click)=\"onClose()\"\n >\n {{ cancelWord() }}\n </button>\n <h2\n automation-id=\"tui-mobile-calendar__label\"\n class=\"t-label\"\n >\n {{ single() ? texts[0] : multi() ? texts[2] : texts[1] }}\n </h2>\n <button\n automation-id=\"tui-mobile-calendar__confirm\"\n tuiLink\n tuiTouchable=\"opacity\"\n type=\"button\"\n class=\"t-link\"\n (click)=\"onConfirm()\"\n >\n {{ doneWord() }}\n </button>\n </header>\n}\n<cdk-virtual-scroll-viewport\n #yearsScroll\n orientation=\"horizontal\"\n class=\"t-years\"\n [itemSize]=\"yearWidth\"\n>\n <div class=\"t-years-wrapper\">\n <button\n *cdkVirtualFor=\"let index of years\"\n type=\"button\"\n class=\"t-year\"\n [attr.data-state]=\"getState(index)\"\n (click)=\"setYear(index)\"\n >\n {{ index }}\n </button>\n </div>\n</cdk-virtual-scroll-viewport>\n<div class=\"t-week\">\n @for (day of unorderedWeekDays$ | tuiOrderWeekDays | async; track day) {\n <div class=\"t-day\">\n {{ day }}\n </div>\n }\n</div>\n<cdk-virtual-scroll-viewport\n #monthsScroll\n itemSize=\"354\"\n maxBufferPx=\"5000\"\n minBufferPx=\"0\"\n class=\"t-months\"\n (scrolledIndexChange)=\"onMonthChange($event)\"\n>\n <section\n *cdkVirtualFor=\"let month of months; templateCacheSize: 10\"\n class=\"t-month-wrapper\"\n >\n <h2 class=\"t-month\">{{ monthNames()[month.month] }}</h2>\n <tui-mobile-calendar-sheet\n class=\"t-calendar\"\n [disabledItemHandler]=\"disabledItemHandler() | tuiMapper: disabledItemHandlerMapper : min() : max()\"\n [month]=\"month\"\n [single]=\"single()\"\n [value]=\"value()\"\n (dayClick)=\"onDayClick($event)\"\n />\n </section>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;block-size:100%;color:var(--tui-text-primary);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}:host ::ng-deep .t-cell:before,:host ::ng-deep .t-cell:after{transform:translateZ(1px)}.t-header{position:relative;display:flex;align-items:center;block-size:3.5rem;padding:0 1rem;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-header{block-size:2.75rem;border-block-end:none}.t-close{inline-size:1.5rem;block-size:1.5rem;margin-inline-end:2rem}:host._ios .t-close{display:none}.t-link{margin-inline-start:auto;flex-shrink:0;font-size:.875rem;line-height:1rem;font-weight:500;text-transform:uppercase;color:var(--tui-text-action)}.t-link_close{display:none}:host._ios .t-link{min-inline-size:3.75rem;text-align:end;font-size:.9375rem;line-height:1.125rem;font-weight:400;letter-spacing:.018125rem;text-transform:none}:host._ios .t-link_close{display:block;margin:0 auto 0 0;text-align:start}.t-label{flex-grow:1;margin:0;font-size:1.25rem;line-height:3.5rem;font-weight:500;letter-spacing:-.0125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-label+.t-link{padding-inline-start:1rem}:host._ios .t-label{font-size:1.0625rem;font-weight:600;letter-spacing:-.025625rem;text-align:center}.t-years{scrollbar-width:none;-ms-overflow-style:none;block-size:4.0625rem;background-color:var(--tui-background-base);box-shadow:0 .5px var(--tui-border-normal)}.t-years::-webkit-scrollbar,.t-years::-webkit-scrollbar-thumb{display:none}:host._ios .t-years{background-color:transparent}.t-years-wrapper{display:flex;block-size:4.0625rem}.t-year{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;outline:none;inline-size:20vw;flex-shrink:0;font-size:.9375rem;font-weight:700;letter-spacing:.015625rem;cursor:pointer;opacity:.1;transform:scale(.73);transition:color,opacity,transform .2s}.t-year[data-state=adjacent]{transform:scale(.86);opacity:.3}.t-year[data-state=active]{color:var(--tui-text-action);opacity:1;transform:scale(1)}.t-week{display:flex;align-items:center;block-size:1.875rem;inline-size:20.75rem;max-inline-size:100%;margin:0 auto;font-size:.75rem}:host._ios .t-week{inline-size:22.625rem;font-size:.6875rem;font-weight:500;color:var(--tui-text-secondary)}.t-day{flex:1;text-align:center}.t-months{scrollbar-width:none;-ms-overflow-style:none;block-size:calc(100% - 9.5rem);box-shadow:0 -1px var(--tui-border-normal);overflow-x:hidden}.t-months::-webkit-scrollbar,.t-months::-webkit-scrollbar-thumb{display:none}:host._ios .t-months{block-size:calc(100% - 8.75rem)}.t-month-wrapper{display:flex;margin:.625rem 0 -.625rem;block-size:22.125rem;flex-direction:column}.t-month{block-size:2.75rem;inline-size:100%;line-height:2.75rem;padding-inline-start:1rem;font-size:.875rem;font-weight:500;text-transform:uppercase;margin:0 0 1.25rem;box-sizing:border-box;border-block-end:.5px solid var(--tui-border-normal)}:host._ios .t-month{block-size:3.125rem;margin:0;border-block-end:none;text-transform:none;font-size:1.375rem;line-height:3.125rem;letter-spacing:.02rem;font-weight:700}.t-calendar{margin:0 auto;transition:opacity .2s}.t-week,.t-years,.t-months{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;opacity:0}:host(._initialized) .t-week,:host(._initialized) .t-years,:host(._initialized) .t-months{opacity:1}\n"] }]
|
|
441
|
+
}], ctorParameters: () => [] });
|
|
463
442
|
function toggleDay(days, day) {
|
|
464
443
|
return ((days?.find((item) => item.daySame(day))
|
|
465
444
|
? days.filter((item) => !item.daySame(day))
|
|
@@ -470,5 +449,5 @@ function toggleDay(days, day) {
|
|
|
470
449
|
* Generated bundle index. Do not edit.
|
|
471
450
|
*/
|
|
472
451
|
|
|
473
|
-
export { ANDROID_CYCLE, ANDROID_LABEL, ANDROID_WEEK, BUFFER, IOS_CYCLE, IOS_LABEL, IOS_WEEK, RANGE, SCROLL_DEBOUNCE_TIME, STARTING_YEAR, TUI_MOBILE_CALENDAR_PROVIDERS, TUI_VALUE_STREAM, TuiMobileCalendar, TuiMobileCalendarStrategy, YEARLY_CYCLE, YEARS_IN_ROW };
|
|
452
|
+
export { ANDROID_CYCLE, ANDROID_LABEL, ANDROID_WEEK, BUFFER, IOS_CYCLE, IOS_LABEL, IOS_WEEK, RANGE, SCROLL_DEBOUNCE_TIME, STARTING_YEAR, TUI_CALENDAR_DATE_STREAM, TUI_MOBILE_CALENDAR_PROVIDERS, TUI_VALUE_STREAM, TuiMobileCalendar, TuiMobileCalendarStrategy, YEARLY_CYCLE, YEARS_IN_ROW, tuiDateStreamWithTransformer };
|
|
474
453
|
//# sourceMappingURL=taiga-ui-addon-mobile-components-mobile-calendar.mjs.map
|