@taiga-ui/kit
Version:
Taiga UI Angular main components kit
282 lines (277 loc) • 11.3 kB
JavaScript
import { __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 { AbstractTuiNullableControl, ALWAYS_FALSE_HANDLER, isNativeFocused, TuiTime, TUI_STRICT_MATCHER, setNativeFocused, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR } from '@taiga-ui/cdk';
import { sizeBigger, TuiTextfieldSizeDirective, TUI_TEXTFIELD_SIZE, TuiPrimitiveTextfieldComponent, TuiDataListModule, TuiHostedDropdownModule, TuiPrimitiveTextfieldModule } from '@taiga-ui/core';
import { FIXED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
import { TUI_TIME_TEXTS } from '@taiga-ui/kit/tokens';
import { tuiCreateTimeMask, tuiCreateAutoCorrectedTimePipe } from '@taiga-ui/kit/utils/mask';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { TuiValueAccessorModule } from '@taiga-ui/kit/directives';
import { TextMaskModule } from 'angular2-text-mask';
var TuiInputTimeComponent_1;
// @dynamic
let TuiInputTimeComponent = TuiInputTimeComponent_1 = class TuiInputTimeComponent extends AbstractTuiNullableControl {
constructor(control, changeDetectorRef, textfieldSize, timeTexts$) {
super(control, changeDetectorRef);
this.textfieldSize = textfieldSize;
this.timeTexts$ = timeTexts$;
this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
this.items = [];
this.itemSize = 'm';
this.strict = false;
this.mode = 'HH:MM';
this.open = false;
}
get nativeFocusableElement() {
return this.textfield ? this.textfield.nativeFocusableElement : null;
}
get focused() {
return isNativeFocused(this.nativeFocusableElement);
}
get filtered() {
return this.filter(this.items, this.mode, this.computedSearch);
}
get textMaskOptions() {
return this.calculateMask(this.mode);
}
get computedValue() {
return this.value ? this.value.toString(this.mode) : this.nativeValue;
}
get computedSearch() {
return this.computedValue.length !== this.mode.length ? this.computedValue : '';
}
get interactive() {
return !this.disabled && !this.readOnly;
}
get innerPseudoFocused() {
if (this.pseudoFocused === false) {
return false;
}
if (this.open || this.computedFocused) {
return true;
}
return null;
}
get icon() {
return sizeBigger(this.textfieldSize.size) ? 'tuiIconTimeLarge' : 'tuiIconTime';
}
get nativeValue() {
return this.nativeFocusableElement ? this.nativeFocusableElement.value : '';
}
set nativeValue(value) {
if (!this.nativeFocusableElement) {
return;
}
this.nativeFocusableElement.value = value;
}
getFiller$(mode) {
return this.timeTexts$.pipe(map(texts => texts[mode]));
}
onValueChange(value) {
this.open = !!this.items.length;
if (value && this.control) {
this.control.updateValueAndValidity();
}
const match = this.getMatch(value);
if (match !== undefined) {
this.updateValue(match);
return;
}
if (value.length !== this.mode.length) {
this.updateValue(null);
return;
}
const time = TuiTime.fromString(value);
this.updateValue(this.strict ? this.findNearestTimeFromItems(time) : time);
}
onFocused(focused) {
this.updateFocused(focused);
if (focused ||
this.value !== null ||
this.nativeValue === '' ||
this.mode === 'HH:MM') {
return;
}
const parsedTime = TuiTime.fromString(this.nativeValue);
this.updateValue(parsedTime);
setTimeout(() => {
if (this.nativeValue.endsWith('.') || this.nativeValue.endsWith(':')) {
this.nativeValue = this.nativeValue.slice(0, -1);
}
});
}
onHovered(hovered) {
this.updateHovered(hovered);
}
onArrowUp(event) {
if (this.items.length) {
return;
}
this.processArrow(event, 1);
}
onArrowDown(event) {
if (this.items.length) {
return;
}
this.processArrow(event, -1);
}
onClick() {
this.open = !this.open;
}
onMenuClick(item) {
this.focusInput();
this.updateValue(item);
}
onOpen(open) {
this.open = open;
}
writeValue(value) {
super.writeValue(value);
this.nativeValue = value ? this.computedValue : '';
}
findNearestTimeFromItems(value) {
return this.items.reduce((previous, current) => Math.abs(current.toAbsoluteMilliseconds() - value.toAbsoluteMilliseconds()) <
Math.abs(previous.toAbsoluteMilliseconds() - value.toAbsoluteMilliseconds())
? current
: previous);
}
getMatch(value) {
return this.items.find(item => TUI_STRICT_MATCHER(item, value));
}
close() {
this.open = false;
}
processArrow(event, shift) {
const { target } = event;
if (this.readOnly || !(target instanceof HTMLInputElement)) {
return;
}
const selectionStart = target.selectionStart || 0;
this.shiftTime(this.calculateShift(selectionStart, shift));
target.setSelectionRange(selectionStart, selectionStart);
event.preventDefault();
}
calculateShift(selectionStart, shift) {
if (selectionStart <= 2) {
return { hours: shift };
}
if (selectionStart <= 5) {
return { minutes: shift };
}
if (selectionStart <= 8) {
return { seconds: shift };
}
return { ms: shift };
}
shiftTime(shift) {
if (this.value === null) {
return;
}
const increasedTime = this.value.shift(shift);
// Manual update so we can set caret position properly
this.nativeValue = increasedTime.toString(this.mode);
this.updateValue(increasedTime);
}
focusInput(preventScroll = false) {
if (this.nativeFocusableElement) {
setNativeFocused(this.nativeFocusableElement, true, preventScroll);
this.close();
}
}
calculateMask(mode) {
return {
mask: tuiCreateTimeMask(mode),
pipe: tuiCreateAutoCorrectedTimePipe(mode),
guide: false,
};
}
filter(items, mode, search) {
return items.filter(item => item.toString(mode).includes(search));
}
};
TuiInputTimeComponent.ctorParameters = () => [
{ 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: Observable, decorators: [{ type: Inject, args: [TUI_TIME_TEXTS,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTimeComponent.prototype, "disabledItemHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTimeComponent.prototype, "items", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTimeComponent.prototype, "itemSize", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTimeComponent.prototype, "strict", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputTimeComponent.prototype, "mode", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputTimeComponent.prototype, "textfield", void 0);
__decorate([
tuiPure
], TuiInputTimeComponent.prototype, "getFiller$", null);
__decorate([
HostListener('click')
], TuiInputTimeComponent.prototype, "onClick", null);
__decorate([
tuiPure
], TuiInputTimeComponent.prototype, "calculateMask", null);
__decorate([
tuiPure
], TuiInputTimeComponent.prototype, "filter", null);
TuiInputTimeComponent = TuiInputTimeComponent_1 = __decorate([
Component({
selector: 'tui-input-time',
template: "<tui-hosted-dropdown\n class=\"wrapper\"\n [canOpen]=\"interactive && !!filtered.length\"\n [content]=\"dropdownContent\"\n [open]=\"open && !!filtered.length\"\n (openChange)=\"onOpen($event)\"\n (focusedChange)=\"onFocused($event)\"\n>\n <tui-primitive-textfield\n class=\"textfield\"\n tuiValueAccessor\n [filler]=\"getFiller$(mode) | async\"\n [nativeId]=\"nativeId\"\n [pseudoFocused]=\"innerPseudoFocused\"\n [pseudoHovered]=\"pseudoHovered\"\n [pseudoPressed]=\"pseudoPressed\"\n [invalid]=\"computedInvalid\"\n [focusable]=\"focusable\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [textMask]=\"textMaskOptions\"\n [iconContent]=\"icon\"\n [value]=\"computedValue\"\n (valueChange)=\"onValueChange($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (keydown.arrowUp)=\"onArrowUp($event)\"\n (keydown.arrowDown)=\"onArrowDown($event)\"\n >\n <ng-content></ng-content>\n </tui-primitive-textfield>\n</tui-hosted-dropdown>\n<ng-template #dropdownContent>\n <tui-data-list automation-id=\"tui-input-time__dropdown\">\n <button\n *ngFor=\"let item of filtered\"\n tuiOption\n automation-id=\"tui-input-time__item\"\n [size]=\"itemSize\"\n [disabled]=\"disabledItemHandler(item)\"\n (click)=\"onMenuClick(item)\"\n >\n {{item}}\n </button>\n </tui-data-list>\n</ng-template>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputTimeComponent_1),
},
FIXED_DROPDOWN_CONTROLLER_PROVIDER,
],
styles: [":host{display:block;border-radius:var(--tui-radius-m)}:host._disabled{pointer-events:none}.wrapper{display:block;border-radius:inherit}.textfield{border-radius:inherit}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(TUI_TEXTFIELD_SIZE)),
__param(3, Inject(TUI_TIME_TEXTS))
], TuiInputTimeComponent);
let TuiInputTimeModule = class TuiInputTimeModule {
};
TuiInputTimeModule = __decorate([
NgModule({
imports: [
CommonModule,
TextMaskModule,
TuiDataListModule,
TuiHostedDropdownModule,
TuiPrimitiveTextfieldModule,
TuiValueAccessorModule,
],
declarations: [TuiInputTimeComponent],
exports: [TuiInputTimeComponent],
})
], TuiInputTimeModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputTimeComponent, TuiInputTimeModule };
//# sourceMappingURL=taiga-ui-kit-components-input-time.js.map