@taiga-ui/kit
Version:
Taiga UI Angular main components kit
384 lines (379 loc) • 18.4 kB
JavaScript
import { __extends, __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Injector, Type, Input, ViewChild, HostListener, Component, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { ALWAYS_FALSE_HANDLER, TuiMonth, TUI_FIRST_DAY, TUI_LAST_DAY, nullableSame, TuiDayRange, RANGE_SEPARATOR_CHAR, setNativeFocused, TUI_IS_MOBILE, TUI_DATE_FILLER, TUI_DATE_RANGE_FILLER, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiNullableControl, TuiActiveZoneModule, TuiLetModule } from '@taiga-ui/cdk';
import { TUI_DEFAULT_MARKER_HANDLER, sizeBigger, TuiDialogService, TuiTextfieldSizeDirective, TUI_TEXTFIELD_SIZE, TuiTextfieldExampleTextDirective, TUI_TEXTFIELD_EXAMPLE_TEXT, TuiPrimitiveTextfieldComponent, TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule, TuiHostedDropdownModule, TuiSvgModule } from '@taiga-ui/core';
import { MAX_DAY_RANGE_LENGTH_MAPPER, TUI_DATE_RANGE_MASK, EMPTY_MASK } from '@taiga-ui/kit/constants';
import { LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
import { TUI_MOBILE_CALENDAR, TUI_CALENDAR_DATA_STREAM } from '@taiga-ui/kit/tokens';
import { tuiCreateAutoCorrectedDateRangePipe } from '@taiga-ui/kit/utils/mask';
import { TuiReplayControlValueChangesFactory } from '@taiga-ui/kit/utils/miscellaneous';
import { PolymorpheusComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { TuiCalendarRangeModule } from '@taiga-ui/kit/components/calendar-range';
import { TuiValueAccessorModule } from '@taiga-ui/kit/directives';
import { TextMaskModule } from 'angular2-text-mask';
var ɵ0 = TuiReplayControlValueChangesFactory;
var TuiInputDateRangeComponent = /** @class */ (function (_super) {
__extends(TuiInputDateRangeComponent, _super);
function TuiInputDateRangeComponent(control, changeDetectorRef, injector, isMobile, dialogService, mobileCalendar, textfieldSize, textfieldExampleText, filler, rangeFiller) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.injector = injector;
_this.isMobile = isMobile;
_this.dialogService = dialogService;
_this.mobileCalendar = mobileCalendar;
_this.textfieldSize = textfieldSize;
_this.textfieldExampleText = textfieldExampleText;
_this.filler = filler;
_this.rangeFiller = rangeFiller;
_this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
_this.markerHandler = TUI_DEFAULT_MARKER_HANDLER;
_this.defaultViewedMonth = TuiMonth.currentLocal();
_this.items = [];
_this.min = TUI_FIRST_DAY;
_this.max = TUI_LAST_DAY;
_this.minLength = null;
_this.maxLength = null;
_this.open = false;
_this.maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER;
_this.textMaskOptions = {
mask: TUI_DATE_RANGE_MASK,
pipe: tuiCreateAutoCorrectedDateRangePipe(_this),
guide: false,
};
return _this;
}
TuiInputDateRangeComponent_1 = TuiInputDateRangeComponent;
Object.defineProperty(TuiInputDateRangeComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.textfield ? this.textfield.nativeFocusableElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "focused", {
get: function () {
return !!this.textfield && this.textfield.focused;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "computedMobile", {
get: function () {
return this.isMobile && !!this.mobileCalendar;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "calendarIcon", {
get: function () {
return sizeBigger(this.textfieldSize.size)
? 'tuiIconCalendarLarge'
: 'tuiIconCalendar';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "canOpen", {
get: function () {
return !this.computedDisabled && !this.readOnly && !this.computedMobile;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "computedExampleText", {
get: function () {
return this.items.length ? this.textfieldExampleText.exampleText : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "computedFiller", {
get: function () {
return this.activePeriod ? '' : this.rangeFiller;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "computedMask", {
get: function () {
return this.activePeriod ? EMPTY_MASK : this.textMaskOptions;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "activePeriod", {
get: function () {
var _this = this;
return (this.items.find(function (item) {
return nullableSame(_this.value, item.range, function (a, b) {
return a.from.daySame(b.from.dayLimit(_this.min, _this.max)) &&
a.to.daySame(b.to.dayLimit(_this.min, _this.max));
});
}) || null);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "computedValue", {
get: function () {
var _a = this, value = _a.value, nativeValue = _a.nativeValue, activePeriod = _a.activePeriod;
if (activePeriod) {
return String(activePeriod);
}
return value ? value.formattedDayRange : nativeValue;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "innerPseudoFocused", {
get: function () {
if (this.pseudoFocused === false) {
return false;
}
if (this.open || this.computedFocused) {
return true;
}
return null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateRangeComponent.prototype, "nativeValue", {
get: function () {
return this.nativeFocusableElement ? this.nativeFocusableElement.value : '';
},
set: function (value) {
if (!this.nativeFocusableElement) {
return;
}
this.nativeFocusableElement.value = value;
},
enumerable: true,
configurable: true
});
TuiInputDateRangeComponent.prototype.onMobileClick = function () {
var _this = this;
if (!this.mobileCalendar) {
this.toggle();
return;
}
this.dialogService
.open(new PolymorpheusComponent(this.mobileCalendar, this.injector), {
size: 'fullscreen',
closeable: false,
data: {
single: false,
min: this.maxLengthMapper(this.min, this.value, this.maxLength, true),
max: this.maxLengthMapper(this.max, this.value, this.maxLength, false),
disabledItemHandler: this.disabledItemHandler,
},
})
.pipe(takeUntil(this.destroy$))
.subscribe(function (value) {
_this.updateValue(value);
});
};
TuiInputDateRangeComponent.prototype.onClick = function () {
if (!this.isMobile) {
this.toggle();
}
};
TuiInputDateRangeComponent.prototype.onOpenChange = function (open) {
this.open = open;
};
TuiInputDateRangeComponent.prototype.onValueChange = function (value) {
if (value && this.control) {
this.control.updateValueAndValidity();
}
if (value.length !== this.rangeFiller.length) {
this.updateValue(null);
return;
}
var parsedValue = TuiDayRange.normalizeParse(value, this.filler, this.rangeFiller);
this.updateValue(!this.minLength && !this.maxLength
? parsedValue
: this.clampValue(parsedValue));
};
TuiInputDateRangeComponent.prototype.onRangeChange = function (range) {
this.toggle();
this.focusInput();
if (!nullableSame(this.value, range, function (a, b) { return a.daySame(b); })) {
this.updateValue(range);
}
};
TuiInputDateRangeComponent.prototype.onItemSelect = function (item) {
this.toggle();
this.focusInput();
if (typeof item !== 'string') {
this.updateValue(item.range.dayLimit(this.min, this.max));
return;
}
if (this.activePeriod !== null) {
this.updateValue(null);
this.nativeValue = '';
}
};
TuiInputDateRangeComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiInputDateRangeComponent.prototype.onPressed = function (pressed) {
this.updatePressed(pressed);
};
TuiInputDateRangeComponent.prototype.onActiveZone = function (focused) {
this.updateFocused(focused);
if (!focused &&
!this.itemSelected &&
(this.nativeValue.length === this.filler.length ||
this.nativeValue.length ===
this.filler.length + RANGE_SEPARATOR_CHAR.length)) {
this.updateValue(TuiDayRange.normalizeParse(this.nativeValue, this.filler, this.rangeFiller));
}
};
TuiInputDateRangeComponent.prototype.writeValue = function (value) {
_super.prototype.writeValue.call(this, value);
this.nativeValue = value ? this.computedValue : '';
};
Object.defineProperty(TuiInputDateRangeComponent.prototype, "itemSelected", {
get: function () {
var _this = this;
return this.items.findIndex(function (item) { return String(item) === _this.nativeValue; }) !== -1;
},
enumerable: true,
configurable: true
});
TuiInputDateRangeComponent.prototype.toggle = function () {
this.open = !this.open;
};
TuiInputDateRangeComponent.prototype.focusInput = function (preventScroll) {
if (preventScroll === void 0) { preventScroll = false; }
if (this.nativeFocusableElement) {
setNativeFocused(this.nativeFocusableElement, true, preventScroll);
}
};
TuiInputDateRangeComponent.prototype.clampValue = function (value) {
var clampedBottom = this.minLength && value.from.append(this.minLength).dayAfter(value.to)
? new TuiDayRange(value.from, value.from.append(this.minLength).append({ day: -1 }))
: value;
var availableMax = this.maxLength
? clampedBottom.from.append(this.maxLength).append({ day: -1 })
: this.max;
return clampedBottom.to.dayAfter(availableMax)
? new TuiDayRange(clampedBottom.from, availableMax)
: clampedBottom;
};
var TuiInputDateRangeComponent_1;
TuiInputDateRangeComponent.ctorParameters = function () { return [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Injector, decorators: [{ type: Inject, args: [Injector,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_MOBILE,] }] },
{ type: TuiDialogService, decorators: [{ type: Inject, args: [TuiDialogService,] }] },
{ type: Type, decorators: [{ type: Optional }, { type: Inject, args: [TUI_MOBILE_CALENDAR,] }] },
{ type: TuiTextfieldSizeDirective, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_SIZE,] }] },
{ type: TuiTextfieldExampleTextDirective, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_EXAMPLE_TEXT,] }] },
{ type: String, decorators: [{ type: Inject, args: [TUI_DATE_FILLER,] }] },
{ type: String, decorators: [{ type: Inject, args: [TUI_DATE_RANGE_FILLER,] }] }
]; };
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateRangeComponent.prototype, "disabledItemHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateRangeComponent.prototype, "markerHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateRangeComponent.prototype, "defaultViewedMonth", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateRangeComponent.prototype, "items", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateRangeComponent.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateRangeComponent.prototype, "max", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateRangeComponent.prototype, "minLength", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateRangeComponent.prototype, "maxLength", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputDateRangeComponent.prototype, "textfield", void 0);
__decorate([
HostListener('click')
], TuiInputDateRangeComponent.prototype, "onClick", null);
TuiInputDateRangeComponent = TuiInputDateRangeComponent_1 = __decorate([
Component({
selector: 'tui-input-date-range',
template: "<tui-hosted-dropdown\n class=\"hosted\"\n [canOpen]=\"canOpen\"\n [content]=\"dropdown\"\n [open]=\"open && canOpen\"\n (openChange)=\"onOpenChange($event)\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-primitive-textfield\n automation-id=\"tui-input-date-range__textfield\"\n class=\"textfield\"\n tuiValueAccessor\n [pseudoFocused]=\"innerPseudoFocused\"\n [pseudoHovered]=\"pseudoHovered\"\n [pseudoPressed]=\"pseudoPressed\"\n [invalid]=\"computedInvalid\"\n [tuiTextfieldExampleText]=\"computedExampleText\"\n [nativeId]=\"nativeId\"\n [filler]=\"computedFiller\"\n [readOnly]=\"readOnly\"\n [iconContent]=\"computedMobile ? iconContent : calendarIcon\"\n [disabled]=\"computedDisabled\"\n [textMask]=\"computedMask\"\n [value]=\"computedValue\"\n (valueChange)=\"onValueChange($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (pressedChange)=\"onPressed($event)\"\n >\n <ng-content></ng-content>\n </tui-primitive-textfield>\n\n <ng-template #iconContent>\n <tui-svg\n automation-id=\"tui-input-date-range__icon\"\n [class.icon]=\"!computedDisabled\"\n [src]=\"calendarIcon\"\n (click)=\"onMobileClick()\"\n ></tui-svg>\n </ng-template>\n\n <ng-template #dropdown>\n <tui-calendar-range\n [defaultViewedMonth]=\"defaultViewedMonth\"\n [disabledItemHandler]=\"disabledItemHandler\"\n [items]=\"items\"\n [min]=\"min\"\n [max]=\"max\"\n [markerHandler]=\"markerHandler\"\n [minLength]=\"minLength\"\n [maxLength]=\"maxLength\"\n (rangeChange)=\"onRangeChange($event)\"\n ></tui-calendar-range>\n </ng-template>\n</tui-hosted-dropdown>\n",
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(function () { return TuiInputDateRangeComponent_1; }),
},
{
provide: TUI_CALENDAR_DATA_STREAM,
deps: [[new Optional(), new Self(), NgControl]],
useFactory: ɵ0,
},
LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER,
],
styles: [":host{display:block;border-radius:var(--tui-radius-m)}:host._disabled{pointer-events:none}.hosted{display:block;border-radius:inherit}.textfield{border-radius:inherit}.icon{pointer-events:auto}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(Injector)),
__param(3, Inject(TUI_IS_MOBILE)),
__param(4, Inject(TuiDialogService)),
__param(5, Optional()),
__param(5, Inject(TUI_MOBILE_CALENDAR)),
__param(6, Inject(TUI_TEXTFIELD_SIZE)),
__param(7, Inject(TUI_TEXTFIELD_EXAMPLE_TEXT)),
__param(8, Inject(TUI_DATE_FILLER)),
__param(9, Inject(TUI_DATE_RANGE_FILLER))
], TuiInputDateRangeComponent);
return TuiInputDateRangeComponent;
}(AbstractTuiNullableControl));
var TuiInputDateRangeModule = /** @class */ (function () {
function TuiInputDateRangeModule() {
}
TuiInputDateRangeModule = __decorate([
NgModule({
imports: [
CommonModule,
TextMaskModule,
TuiActiveZoneModule,
TuiLetModule,
PolymorpheusModule,
TuiPrimitiveTextfieldModule,
TuiTextfieldControllerModule,
TuiHostedDropdownModule,
TuiSvgModule,
TuiCalendarRangeModule,
TuiValueAccessorModule,
],
declarations: [TuiInputDateRangeComponent],
exports: [TuiInputDateRangeComponent],
})
], TuiInputDateRangeModule);
return TuiInputDateRangeModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputDateRangeComponent, TuiInputDateRangeModule, ɵ0 };
//# sourceMappingURL=taiga-ui-kit-components-input-date-range.js.map