@taiga-ui/kit
Version:
Taiga UI Angular main components kit
227 lines (220 loc) • 13.8 kB
JavaScript
import { TuiLabel } from '@taiga-ui/core/components/label';
import * as i1$1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldComponent, TuiWithNativePicker, tuiAsTextfieldAccessor, TuiTextfieldContent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { TuiDropdownDirective, TuiDropdownOpen, tuiDropdownEnabled, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import * as i0 from '@angular/core';
import { inject, computed, input, untracked, Directive, HostAttributeToken, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { TuiTime } from '@taiga-ui/cdk/date-time';
import * as i2 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { maskitoTimeOptionsGenerator, maskitoSelectionChangeHandler, maskitoCaretGuard, maskitoAddOnFocusPlugin, maskitoRemoveOnBlurPlugin } from '@maskito/kit';
import { WA_IS_MOBILE } from '@ng-web-apis/platform';
import { tuiCreateOptions, tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
import { tuiAsOptionContent } from '@taiga-ui/core/components/data-list';
import * as i1 from '@taiga-ui/core/components/input';
import { TuiInputDirective, TuiWithInput } from '@taiga-ui/core/components/input';
import { tuiIconEnd } from '@taiga-ui/core/directives/icons';
import { TuiSelectOption } from '@taiga-ui/kit/components/select';
import { TUI_TIME_TEXTS } from '@taiga-ui/kit/tokens';
import { tuiMaskito } from '@taiga-ui/kit/utils';
const TUI_INPUT_TIME_DEFAULT_OPTIONS = {
icon: '@tui.clock',
mode: 'HH:MM',
timeSegmentMaxValues: {},
timeSegmentMinValues: {},
valueTransformer: null,
};
const [TUI_INPUT_TIME_OPTIONS, tuiInputTimeOptionsProvider] = tuiCreateOptions(TUI_INPUT_TIME_DEFAULT_OPTIONS);
class TuiInputTimeDirective extends TuiControl {
constructor() {
super(...arguments);
this.input = inject(TuiInputDirective);
this.dropdown = inject(TuiDropdownDirective);
this.open = inject(TuiDropdownOpen).open;
this.options = inject(TUI_INPUT_TIME_OPTIONS);
this.fillers = inject(TUI_TIME_TEXTS);
this.icon = tuiIconEnd(this.options.icon);
this.dropdownEnabled = tuiDropdownEnabled(computed(() => !this.native && this.interactive()));
this.filler = tuiDirectiveBinding(TuiTextfieldComponent, 'filler', computed((filler = this.fillers()?.[this.timeMode()] ?? '') => this.postfix() ? '' : `${this.prefix()}${filler}`), {});
this.mask = tuiMaskito(computed(() => this.computeMask({
...this.options,
mode: this.timeMode(),
step: this.interactive() && !this.dropdown.content() ? 1 : 0,
prefix: this.prefix(),
postfix: this.postfix(),
})));
this.accept = input([]);
this.timeMode = input(this.options.mode, { alias: 'mode' });
this.prefix = input('');
this.postfix = input('');
this.native = !!inject(TuiWithNativePicker, { optional: true }) && inject(WA_IS_MOBILE);
}
setValue(value) {
this.onChange(value);
if (value) {
this.input.value.set(this.stringify(value));
}
else {
this.input.setValue(value);
}
if (!value && this.dropdownEnabled()) {
this.open.set(true);
}
}
writeValue(value) {
const reset = this.control.pristine && this.control.untouched && !value;
const changed = untracked(() => value !== this.value());
if (changed || reset) {
super.writeValue(value);
untracked(() => this.input.value.set(this.stringify(this.value())));
}
}
onInput(valueWithAffixes) {
const value = valueWithAffixes
.replace(this.prefix(), '')
.replace(this.postfix(), '');
const time = value.length === this.timeMode().length ? TuiTime.fromString(value) : null;
const newValue = this.accept().length && time
? this.findNearestTime(time, this.accept())
: time;
this.control?.control?.updateValueAndValidity({ emitEvent: false });
this.onChange(newValue);
if (newValue && newValue !== time) {
this.input.value.set(this.stringify(newValue));
}
}
toggle() {
this.open.update((x) => !x);
}
onBlur(valueWithAffixes) {
const value = valueWithAffixes
.replace(this.prefix(), '')
.replace(this.postfix(), '');
if (value && !this.value()) {
const time = TuiTime.fromString(value);
const newValue = this.accept().length
? this.findNearestTime(time, this.accept())
: time;
this.control?.control?.updateValueAndValidity({ emitEvent: false });
this.onChange(newValue);
if (newValue) {
this.input.value.set(this.stringify(newValue));
}
}
}
computeMask(params) {
const options = maskitoTimeOptionsGenerator(params);
const { mode, prefix, postfix } = params;
const inputModeSwitchPlugin = maskitoSelectionChangeHandler((element) => {
element.inputMode =
element.selectionStart >= mode.indexOf(' AA') ? 'text' : 'numeric';
});
const caretGuardPlugin = maskitoCaretGuard((value) => [
prefix.length,
value.length - postfix.length,
]);
return {
...options,
plugins: options.plugins.concat(caretGuardPlugin, maskitoAddOnFocusPlugin(`${prefix}${postfix}`), maskitoRemoveOnBlurPlugin(`${prefix}${postfix}`), mode.includes('AA') ? inputModeSwitchPlugin : []),
};
}
findNearestTime(value, items) {
// eslint-disable-next-line no-restricted-syntax
return items.reduce((previous, current) => Math.abs(current.valueOf() - value.valueOf()) <
Math.abs(previous.valueOf() - value.valueOf())
? current
: previous);
}
stringify(time) {
return `${this.prefix()}${time?.toString(this.timeMode()) || ''}${this.postfix()}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputTimeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiInputTimeDirective, isStandalone: true, selector: "input[tuiInputTime]", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, timeMode: { classPropertyName: "timeMode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, postfix: { classPropertyName: "postfix", publicName: "postfix", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "inputmode": "numeric" }, listeners: { "blur": "onBlur($event.target.value)", "click": "toggle()", "input": "onInput($event.target.value)" }, properties: { "disabled": "disabled()" } }, providers: [
tuiAsControl(TuiInputTimeDirective),
tuiAsTextfieldAccessor(TuiInputTimeDirective),
tuiValueTransformerFrom(TUI_INPUT_TIME_OPTIONS),
tuiAsOptionContent(TuiSelectOption),
], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithInput }, { directive: i2.MaskitoDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputTimeDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiInputTime]',
providers: [
tuiAsControl(TuiInputTimeDirective),
tuiAsTextfieldAccessor(TuiInputTimeDirective),
tuiValueTransformerFrom(TUI_INPUT_TIME_OPTIONS),
tuiAsOptionContent(TuiSelectOption),
],
hostDirectives: [TuiWithInput, MaskitoDirective],
host: {
inputmode: 'numeric',
'[disabled]': 'disabled()',
'(blur)': 'onBlur($event.target.value)',
'(click)': 'toggle()',
'(input)': 'onInput($event.target.value)',
},
}]
}] });
class TuiNativeTimePicker {
constructor() {
this.list = inject(new HostAttributeToken('list'), { optional: true });
}
getStep(timeMode) {
switch (timeMode) {
case 'HH:MM:SS':
case 'HH:MM:SS AA':
return 1;
case 'HH:MM:SS.MSS':
case 'HH:MM:SS.MSS AA':
return 0.001;
default:
return 60;
}
}
toISOString(value) {
const [day, time] = Array.isArray(value) ? value : [null, value];
const dateString = day ? day.toJSON() + (time ? 'T' : '') : '';
const timeString = time ? time.toString('HH:MM:SS.MSS') : '';
return dateString + timeString;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNativeTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiNativeTimePicker, isStandalone: true, host: { properties: { "attr.list": "null" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNativeTimePicker, decorators: [{
type: Directive,
args: [{ host: { '[attr.list]': 'null' } }]
}] });
class TuiInputTimeComponent extends TuiNativeTimePicker {
constructor() {
super(...arguments);
this.control = inject(TuiControl);
this.host = inject(TuiInputTimeDirective);
this.value = computed(() => this.toISOString(this.control.value()));
this.step = computed(() => this.getStep(this.host.timeMode()));
}
setValue(value) {
this.host.setValue(TuiTime.fromString(value));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiInputTimeComponent, isStandalone: true, selector: "input[tuiInputTime][type=\"time\"]", host: { attributes: { "data-tui-version": "5.7.0", "ngSkipHydration": "true" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiWithNativePicker }], ngImport: i0, template: "@if (host.native) {\n <input\n *tuiTextfieldContent\n type=\"time\"\n [attr.list]=\"list\"\n [step]=\"step()\"\n [value]=\"value()\"\n (change)=\"setValue($any($event.target).value)\"\n />\n}\n", styles: ["tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=time]{position:absolute;inset-inline-end:0;inset-inline-start:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0;pointer-events:auto}tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"], dependencies: [{ kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputTimeComponent, decorators: [{
type: Component,
args: [{ selector: 'input[tuiInputTime][type="time"]', imports: [TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiWithNativePicker], host: { 'data-tui-version': TUI_VERSION, ngSkipHydration: 'true' }, template: "@if (host.native) {\n <input\n *tuiTextfieldContent\n type=\"time\"\n [attr.list]=\"list\"\n [step]=\"step()\"\n [value]=\"value()\"\n (change)=\"setValue($any($event.target).value)\"\n />\n}\n", styles: ["tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=time]{position:absolute;inset-inline-end:0;inset-inline-start:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0;pointer-events:auto}tui-textfield input[tuiInputTime]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"] }]
}] });
const TuiInputTime = [
TuiInputTimeDirective,
TuiInputTimeComponent,
TuiLabel,
TuiTextfieldComponent,
TuiTextfieldOptionsDirective,
TuiDropdownContent,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_TIME_DEFAULT_OPTIONS, TUI_INPUT_TIME_OPTIONS, TuiInputTime, TuiInputTimeComponent, TuiInputTimeDirective, TuiNativeTimePicker, tuiInputTimeOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-time.mjs.map