@taiga-ui/kit
Version:
Taiga UI Angular main components kit
303 lines (298 loc) • 14.5 kB
JavaScript
import { __extends, __read, __spread, __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, ViewChild, HostListener, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { TUI_FIRST_DAY, TUI_LAST_DAY, ALWAYS_FALSE_HANDLER, TuiMonth, TuiDay, TuiTime, nullableSame, TUI_DATE_FILLER, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiControl, TuiPreventDefaultModule } from '@taiga-ui/cdk';
import { sizeBigger, TuiTextfieldSizeDirective, TUI_TEXTFIELD_SIZE, TuiPrimitiveTextfieldComponent, TuiCalendarModule, TuiSvgModule, TuiLinkModule, TuiHostedDropdownModule, TuiPrimitiveTextfieldModule } from '@taiga-ui/core';
import { DATE_TIME_SEPARATOR, TUI_DATE_MASK } from '@taiga-ui/kit/constants';
import { LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
import { TUI_TIME_TEXTS, TUI_CALENDAR_DATA_STREAM } from '@taiga-ui/kit/tokens';
import { tuiCreateTimeMask, tuiCreateAutoCorrectedDateTimePipe } from '@taiga-ui/kit/utils/mask';
import { TuiReplayControlValueChangesFactory } from '@taiga-ui/kit/utils/miscellaneous';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { TuiValueAccessorModule } from '@taiga-ui/kit/directives';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { TextMaskModule } from 'angular2-text-mask';
var ɵ0 = TuiReplayControlValueChangesFactory;
// @dynamic
var TuiInputDateTimeComponent = /** @class */ (function (_super) {
__extends(TuiInputDateTimeComponent, _super);
function TuiInputDateTimeComponent(control, changeDetectorRef, textfieldSize, dateFiller, timeTexts$) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.textfieldSize = textfieldSize;
_this.dateFiller = dateFiller;
_this.timeTexts$ = timeTexts$;
_this.min = TUI_FIRST_DAY;
_this.max = TUI_LAST_DAY;
_this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
_this.defaultActiveYearMonth = TuiMonth.currentLocal();
_this.timeMode = 'HH:MM';
_this.open = false;
_this.month = null;
return _this;
}
TuiInputDateTimeComponent_1 = TuiInputDateTimeComponent;
Object.defineProperty(TuiInputDateTimeComponent.prototype, "fillerLength", {
get: function () {
return this.dateFiller.length + DATE_TIME_SEPARATOR.length + this.timeMode.length;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateTimeComponent.prototype, "textMaskOptions", {
get: function () {
return this.calculateMask(this.value[0], this.min, this.max, this.timeMode, this.dateFiller);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateTimeComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.textfield ? this.textfield.nativeFocusableElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateTimeComponent.prototype, "focused", {
get: function () {
return !!this.textfield && this.textfield.focused;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateTimeComponent.prototype, "calendarIcon", {
get: function () {
return sizeBigger(this.textfieldSize.size)
? 'tuiIconCalendarLarge'
: 'tuiIconCalendar';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateTimeComponent.prototype, "computedValue", {
get: function () {
var _a = this, value = _a.value, nativeValue = _a.nativeValue, focused = _a.focused, touched = _a.touched;
var _b = __read(value, 2), date = _b[0], time = _b[1];
if ((date && !nativeValue) ||
(date && nativeValue.length === this.dateFiller.length) ||
(date && time)) {
return "" + date.toString() + DATE_TIME_SEPARATOR + (time ? time.toString(this.timeMode) : '');
}
if (touched || focused) {
return nativeValue;
}
return date !== null ? date.toString() : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateTimeComponent.prototype, "calendarValue", {
get: function () {
return this.value[0];
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateTimeComponent.prototype, "computedActiveYearMonth", {
get: function () {
return this.month || this.value[0] || this.defaultActiveYearMonth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputDateTimeComponent.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
});
Object.defineProperty(TuiInputDateTimeComponent.prototype, "canOpen", {
get: function () {
return !this.computedDisabled && !this.readOnly;
},
enumerable: true,
configurable: true
});
TuiInputDateTimeComponent.prototype.getFiller$ = function (dateFiller, timeMode) {
return this.timeTexts$.pipe(map(function (texts) { return "" + dateFiller + DATE_TIME_SEPARATOR + texts[timeMode]; }));
};
TuiInputDateTimeComponent.prototype.onClick = function () {
this.open = !this.open;
};
TuiInputDateTimeComponent.prototype.onValueChange = function (value) {
if (value.length < this.dateFiller.length) {
this.updateValue([null, null]);
return;
}
var _a = __read(value.split(DATE_TIME_SEPARATOR), 2), date = _a[0], time = _a[1];
var parsedDate = TuiDay.normalizeParse(date);
var parsedTime = time && time.length === this.timeMode.length
? TuiTime.fromString(time)
: null;
if (parsedDate !== null) {
this.open = false;
}
this.updateValue([parsedDate, parsedTime]);
};
TuiInputDateTimeComponent.prototype.onDayClick = function (day) {
this.updateValue([day, this.value[1]]);
this.open = false;
};
TuiInputDateTimeComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiInputDateTimeComponent.prototype.onMonthChange = function (month) {
this.month = month;
};
TuiInputDateTimeComponent.prototype.onOpenChange = function (open) {
this.open = open;
};
TuiInputDateTimeComponent.prototype.onFocused = function (focused) {
var _this = this;
this.updateFocused(focused);
if (focused ||
this.value[0] === null ||
this.value[1] !== null ||
this.nativeValue.length <= this.fillerLength + DATE_TIME_SEPARATOR.length ||
this.timeMode === 'HH:MM') {
return;
}
var _a = __read(this.nativeValue.split(DATE_TIME_SEPARATOR), 2), time = _a[1];
if (!time) {
return;
}
var parsedTime = TuiTime.fromString(time);
this.updateValue([this.value[0], parsedTime]);
setTimeout(function () {
if (_this.nativeValue.endsWith('.') || _this.nativeValue.endsWith(':')) {
_this.nativeValue = _this.nativeValue.slice(0, -1);
}
});
};
TuiInputDateTimeComponent.prototype.setDisabledState = function () {
_super.prototype.setDisabledState.call(this);
this.open = false;
};
TuiInputDateTimeComponent.prototype.writeValue = function (value) {
_super.prototype.writeValue.call(this, value);
this.nativeValue = value && (value[0] || value[1]) ? this.computedValue : '';
};
TuiInputDateTimeComponent.prototype.getFallbackValue = function () {
return [null, null];
};
TuiInputDateTimeComponent.prototype.valueIdenticalComparator = function (oldValue, newValue) {
return (nullableSame(oldValue[0], newValue[0], function (a, b) { return a.daySame(b); }) &&
nullableSame(oldValue[1], newValue[1], function (a, b) { return a.toString() === b.toString(); }));
};
TuiInputDateTimeComponent.prototype.calculateMask = function (day, min, max, timeMode, filler) {
return {
mask: __spread(TUI_DATE_MASK, [',', ' '], tuiCreateTimeMask(timeMode)),
pipe: tuiCreateAutoCorrectedDateTimePipe({ value: day, min: min, max: max, filler: filler }, timeMode),
guide: false,
};
};
var TuiInputDateTimeComponent_1;
TuiInputDateTimeComponent.ctorParameters = function () { return [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: TuiTextfieldSizeDirective, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_SIZE,] }] },
{ type: String, decorators: [{ type: Inject, args: [TUI_DATE_FILLER,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_TIME_TEXTS,] }] }
]; };
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateTimeComponent.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateTimeComponent.prototype, "max", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateTimeComponent.prototype, "disabledItemHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateTimeComponent.prototype, "defaultActiveYearMonth", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateTimeComponent.prototype, "timeMode", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputDateTimeComponent.prototype, "textfield", void 0);
__decorate([
tuiPure
], TuiInputDateTimeComponent.prototype, "getFiller$", null);
__decorate([
HostListener('click')
], TuiInputDateTimeComponent.prototype, "onClick", null);
__decorate([
tuiPure
], TuiInputDateTimeComponent.prototype, "calculateMask", null);
TuiInputDateTimeComponent = TuiInputDateTimeComponent_1 = __decorate([
Component({
selector: 'tui-input-date-time',
template: "<tui-hosted-dropdown\n class=\"hosted\"\n [canOpen]=\"canOpen\"\n [content]=\"dropdown\"\n [open]=\"open && canOpen\"\n (openChange)=\"onOpenChange($event)\"\n>\n <tui-primitive-textfield\n class=\"textfield\"\n tuiValueAccessor\n [pseudoFocused]=\"pseudoFocused\"\n [pseudoHovered]=\"pseudoHovered\"\n [invalid]=\"computedInvalid\"\n [filler]=\"getFiller$(dateFiller, timeMode) | async\"\n [nativeId]=\"nativeId\"\n [readOnly]=\"readOnly\"\n [iconContent]=\"calendarIcon\"\n [disabled]=\"disabled\"\n [textMask]=\"textMaskOptions\"\n [value]=\"computedValue\"\n (valueChange)=\"onValueChange($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (focusedChange)=\"onFocused($event)\"\n >\n <ng-content></ng-content>\n </tui-primitive-textfield>\n\n <ng-template #dropdown=\"polymorpheus\" polymorpheus>\n <tui-calendar\n tuiPreventDefault=\"mousedown\"\n [min]=\"min\"\n [max]=\"max\"\n [disabledItemHandler]=\"disabledItemHandler\"\n [month]=\"computedActiveYearMonth\"\n [value]=\"calendarValue\"\n (dayClick)=\"onDayClick($event)\"\n (monthChange)=\"onMonthChange($event)\"\n ></tui-calendar>\n </ng-template>\n</tui-hosted-dropdown>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(function () { return TuiInputDateTimeComponent_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)}.hosted{display:block;border-radius:inherit}.textfield{border-radius:inherit}.icon{position:relative;cursor:pointer}.button{display:flex;height:44px;justify-content:center;box-shadow:inset 0 1px var(--tui-base-03)}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(TUI_TEXTFIELD_SIZE)),
__param(3, Inject(TUI_DATE_FILLER)),
__param(4, Inject(TUI_TIME_TEXTS))
], TuiInputDateTimeComponent);
return TuiInputDateTimeComponent;
}(AbstractTuiControl));
var TuiInputDateTimeModule = /** @class */ (function () {
function TuiInputDateTimeModule() {
}
TuiInputDateTimeModule = __decorate([
NgModule({
imports: [
CommonModule,
TextMaskModule,
PolymorpheusModule,
TuiPreventDefaultModule,
TuiCalendarModule,
TuiSvgModule,
TuiLinkModule,
TuiHostedDropdownModule,
TuiPrimitiveTextfieldModule,
TuiValueAccessorModule,
],
declarations: [TuiInputDateTimeComponent],
exports: [TuiInputDateTimeComponent],
})
], TuiInputDateTimeModule);
return TuiInputDateTimeModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputDateTimeComponent, TuiInputDateTimeModule, ɵ0 };
//# sourceMappingURL=taiga-ui-kit-components-input-date-time.js.map