@taiga-ui/addon-mobile
Version:
Extension package for Taiga UI that adds support for mobile specific behaviors such as custom data pickers, dropdowns, etc.
171 lines (166 loc) • 10.6 kB
JavaScript
import { __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { inject, Directive, ContentChild, computed, Component, ChangeDetectionStrategy } 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';
import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
import { TUI_LAST_DAY, TUI_FIRST_DAY, TuiDayRange, TuiDay } from '@taiga-ui/cdk/date-time';
import * as i1 from '@taiga-ui/cdk/directives/active-zone';
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_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';
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 {
constructor() {
this.handlers = inject(TuiItemsHandlersDirective);
}
get date() {
return this.single || this.range || this.dateTime;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileCalendarDropdownNew, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiMobileCalendarDropdownNew, isStandalone: true, selector: "[tuiMobileCalendar]", providers: [
{
provide: TUI_DROPDOWN_COMPONENT,
useFactory: () => inject(TUI_IS_MOBILE)
? TuiMobileCalendarDropdown
: 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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileCalendarDropdownNew, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiMobileCalendar]',
providers: [
{
provide: TUI_DROPDOWN_COMPONENT,
useFactory: () => inject(TUI_IS_MOBILE)
? TuiMobileCalendarDropdown
: 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 {
constructor() {
// TODO: Rework to use TuiDropdownOpenDirective so the focus returns to the field on closing
this.dropdown = inject(TuiDropdownDirective, { optional: true });
this.keyboard = inject(TuiKeyboardService);
this.context = injectContext({ optional: true });
this.observer = this.context?.$implicit;
this.data = this.context?.data || {};
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.multi = this.data.multi || this.is('tui-input-date[multiple]');
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);
this.keyboard.hide();
}
max() {
if (this.directive?.date) {
return this.directive.date.max();
}
return (this.data.max ||
(this.range
? TUI_DAY_CAPS_MAPPER(this.control.max, this.selectedPeriod, this.control.maxLength, false)
: this.control?.max) ||
TUI_LAST_DAY);
}
min() {
if (this.directive?.date) {
return this.directive.date.min();
}
return (this.data.min ||
(this.range
? TUI_DAY_CAPS_MAPPER(this.control.min, this.selectedPeriod, this.control.maxLength, true)
: this.control?.min) ||
TUI_FIRST_DAY);
}
onValueChange(value) {
if (!this.range) {
return;
}
if (value === null || value instanceof TuiDayRange) {
this.selectedPeriod = value;
}
else if (value instanceof TuiDay) {
this.selectedPeriod = new TuiDayRange(value, value);
}
}
get calculatedDisabledItemHandler() {
return this.calculateDisabledItemHandler(this.directive?.handlers.disabledItemHandler() ||
this.data.disabledItemHandler ||
this.control?.disabledItemHandler ||
TUI_FALSE_HANDLER, this.selectedPeriod, this.control?.minLength ?? null);
}
close() {
this.dropdown?.toggle(false);
this.observer?.complete();
this.keyboard.show();
}
confirm(value) {
const normalizedValue = this.range ? this.selectedPeriod : value;
if (this.control) {
this.control.value = normalizedValue;
}
if (this.directive?.date) {
this.directive.date.setDate(normalizedValue);
}
this.observer?.next(normalizedValue);
this.close();
}
calculateDisabledItemHandler(disabledItemHandler, value, minLength) {
return calculateDisabledItemHandler(disabledItemHandler, value, minLength);
}
is(selector) {
return !!this.dropdown?.el.closest(selector);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileCalendarDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
}
__decorate([
tuiPure
], TuiMobileCalendarDropdown.prototype, "calculateDisabledItemHandler", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiMobileCalendarDropdown, decorators: [{
type: Component,
args: [{ standalone: true, 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: function () { return []; }, propDecorators: { calculateDisabledItemHandler: [] } });
function tuiProvideMobileCalendar() {
return {
provide: TUI_MOBILE_CALENDAR,
useValue: TuiMobileCalendarDropdown,
};
}
/**
* Generated bundle index. Do not edit.
*/
export { TuiMobileCalendarDropdown, TuiMobileCalendarDropdownNew, tuiProvideMobileCalendar };
//# sourceMappingURL=taiga-ui-addon-mobile-components-mobile-calendar-dropdown.mjs.map