@taiga-ui/kit
Version:
Taiga UI Angular main components kit
333 lines (328 loc) • 14.5 kB
JavaScript
import { __extends, __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 { ALWAYS_FALSE_HANDLER, isNativeFocused, TuiTime, TUI_STRICT_MATCHER, setNativeFocused, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiNullableControl } 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';
// @dynamic
var TuiInputTimeComponent = /** @class */ (function (_super) {
__extends(TuiInputTimeComponent, _super);
function TuiInputTimeComponent(control, changeDetectorRef, textfieldSize, timeTexts$) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_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;
return _this;
}
TuiInputTimeComponent_1 = TuiInputTimeComponent;
Object.defineProperty(TuiInputTimeComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.textfield ? this.textfield.nativeFocusableElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTimeComponent.prototype, "focused", {
get: function () {
return isNativeFocused(this.nativeFocusableElement);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTimeComponent.prototype, "filtered", {
get: function () {
return this.filter(this.items, this.mode, this.computedSearch);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTimeComponent.prototype, "textMaskOptions", {
get: function () {
return this.calculateMask(this.mode);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTimeComponent.prototype, "computedValue", {
get: function () {
return this.value ? this.value.toString(this.mode) : this.nativeValue;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTimeComponent.prototype, "computedSearch", {
get: function () {
return this.computedValue.length !== this.mode.length ? this.computedValue : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTimeComponent.prototype, "interactive", {
get: function () {
return !this.disabled && !this.readOnly;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTimeComponent.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(TuiInputTimeComponent.prototype, "icon", {
get: function () {
return sizeBigger(this.textfieldSize.size) ? 'tuiIconTimeLarge' : 'tuiIconTime';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputTimeComponent.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
});
TuiInputTimeComponent.prototype.getFiller$ = function (mode) {
return this.timeTexts$.pipe(map(function (texts) { return texts[mode]; }));
};
TuiInputTimeComponent.prototype.onValueChange = function (value) {
this.open = !!this.items.length;
if (value && this.control) {
this.control.updateValueAndValidity();
}
var match = this.getMatch(value);
if (match !== undefined) {
this.updateValue(match);
return;
}
if (value.length !== this.mode.length) {
this.updateValue(null);
return;
}
var time = TuiTime.fromString(value);
this.updateValue(this.strict ? this.findNearestTimeFromItems(time) : time);
};
TuiInputTimeComponent.prototype.onFocused = function (focused) {
var _this = this;
this.updateFocused(focused);
if (focused ||
this.value !== null ||
this.nativeValue === '' ||
this.mode === 'HH:MM') {
return;
}
var parsedTime = TuiTime.fromString(this.nativeValue);
this.updateValue(parsedTime);
setTimeout(function () {
if (_this.nativeValue.endsWith('.') || _this.nativeValue.endsWith(':')) {
_this.nativeValue = _this.nativeValue.slice(0, -1);
}
});
};
TuiInputTimeComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiInputTimeComponent.prototype.onArrowUp = function (event) {
if (this.items.length) {
return;
}
this.processArrow(event, 1);
};
TuiInputTimeComponent.prototype.onArrowDown = function (event) {
if (this.items.length) {
return;
}
this.processArrow(event, -1);
};
TuiInputTimeComponent.prototype.onClick = function () {
this.open = !this.open;
};
TuiInputTimeComponent.prototype.onMenuClick = function (item) {
this.focusInput();
this.updateValue(item);
};
TuiInputTimeComponent.prototype.onOpen = function (open) {
this.open = open;
};
TuiInputTimeComponent.prototype.writeValue = function (value) {
_super.prototype.writeValue.call(this, value);
this.nativeValue = value ? this.computedValue : '';
};
TuiInputTimeComponent.prototype.findNearestTimeFromItems = function (value) {
return this.items.reduce(function (previous, current) {
return Math.abs(current.toAbsoluteMilliseconds() - value.toAbsoluteMilliseconds()) <
Math.abs(previous.toAbsoluteMilliseconds() - value.toAbsoluteMilliseconds())
? current
: previous;
});
};
TuiInputTimeComponent.prototype.getMatch = function (value) {
return this.items.find(function (item) { return TUI_STRICT_MATCHER(item, value); });
};
TuiInputTimeComponent.prototype.close = function () {
this.open = false;
};
TuiInputTimeComponent.prototype.processArrow = function (event, shift) {
var target = event.target;
if (this.readOnly || !(target instanceof HTMLInputElement)) {
return;
}
var selectionStart = target.selectionStart || 0;
this.shiftTime(this.calculateShift(selectionStart, shift));
target.setSelectionRange(selectionStart, selectionStart);
event.preventDefault();
};
TuiInputTimeComponent.prototype.calculateShift = function (selectionStart, shift) {
if (selectionStart <= 2) {
return { hours: shift };
}
if (selectionStart <= 5) {
return { minutes: shift };
}
if (selectionStart <= 8) {
return { seconds: shift };
}
return { ms: shift };
};
TuiInputTimeComponent.prototype.shiftTime = function (shift) {
if (this.value === null) {
return;
}
var increasedTime = this.value.shift(shift);
// Manual update so we can set caret position properly
this.nativeValue = increasedTime.toString(this.mode);
this.updateValue(increasedTime);
};
TuiInputTimeComponent.prototype.focusInput = function (preventScroll) {
if (preventScroll === void 0) { preventScroll = false; }
if (this.nativeFocusableElement) {
setNativeFocused(this.nativeFocusableElement, true, preventScroll);
this.close();
}
};
TuiInputTimeComponent.prototype.calculateMask = function (mode) {
return {
mask: tuiCreateTimeMask(mode),
pipe: tuiCreateAutoCorrectedTimePipe(mode),
guide: false,
};
};
TuiInputTimeComponent.prototype.filter = function (items, mode, search) {
return items.filter(function (item) { return item.toString(mode).includes(search); });
};
var TuiInputTimeComponent_1;
TuiInputTimeComponent.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: 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(function () { return 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);
return TuiInputTimeComponent;
}(AbstractTuiNullableControl));
var TuiInputTimeModule = /** @class */ (function () {
function TuiInputTimeModule() {
}
TuiInputTimeModule = __decorate([
NgModule({
imports: [
CommonModule,
TextMaskModule,
TuiDataListModule,
TuiHostedDropdownModule,
TuiPrimitiveTextfieldModule,
TuiValueAccessorModule,
],
declarations: [TuiInputTimeComponent],
exports: [TuiInputTimeComponent],
})
], TuiInputTimeModule);
return TuiInputTimeModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputTimeComponent, TuiInputTimeModule };
//# sourceMappingURL=taiga-ui-kit-components-input-time.js.map