UNPKG

@taiga-ui/kit

Version:

Taiga UI Angular main components kit

207 lines (200 loc) 12 kB
import { NgIf } from '@angular/common'; import * as i0 from '@angular/core'; import { inject, signal, computed, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'; import { TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes'; import { TuiTime } from '@taiga-ui/cdk/date-time'; import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom'; import * as i1 from '@taiga-ui/core/components/textfield'; import { TuiTextfieldDirective, tuiTextfieldIconBinding, TuiTextfieldComponent, tuiAsTextfieldAccessor, TuiWithTextfield, TuiTextfieldContent } from '@taiga-ui/core/components/textfield'; import { toSignal } from '@angular/core/rxjs-interop'; import * as i2 from '@maskito/angular'; import { MaskitoDirective } from '@maskito/angular'; import { maskitoTimeOptionsGenerator, maskitoSelectionChangeHandler, maskitoCaretGuard, maskitoAddOnFocusPlugin, maskitoRemoveOnBlurPlugin } from '@maskito/kit'; import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens'; import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous'; import { tuiAsOptionContent } from '@taiga-ui/core/components/data-list'; import { TuiDropdownDirective, tuiDropdownOpen, tuiDropdownEnabled } from '@taiga-ui/core/directives/dropdown'; import { tuiAsAuxiliary } from '@taiga-ui/core/tokens'; import { TuiSelectOption } from '@taiga-ui/kit/components/select'; import { TUI_TIME_TEXTS } from '@taiga-ui/kit/tokens'; import { tuiMaskito } from '@taiga-ui/kit/utils'; import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di'; 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.textfield = inject(TuiTextfieldDirective); this.dropdown = inject(TuiDropdownDirective); this.open = tuiDropdownOpen(); this.options = inject(TUI_INPUT_TIME_OPTIONS); this.fillers = toSignal(inject(TUI_TIME_TEXTS)); this.prefix = signal(''); this.postfix = signal(''); this.icon = tuiTextfieldIconBinding(TUI_INPUT_TIME_OPTIONS); this.dropdownEnabled = tuiDropdownEnabled(computed(() => !this.native && this.interactive())); this.filler = tuiDirectiveBinding(TuiTextfieldComponent, 'fillerSetter', 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 = []; this.native = tuiInjectElement().type === 'time' && inject(TUI_IS_MOBILE); this.timeMode = signal(this.options.mode); } // TODO(v5): use signal inputs set modeSetter(x) { this.timeMode.set(x); } // TODO(v5): use signal inputs set prefixSetter(x) { this.prefix.set(x); } // TODO(v5): use signal inputs set postfixSetter(x) { this.postfix.set(x); } setValue(value) { this.onChange(value); this.textfield.value.set(this.stringify(value)); if (!value && this.dropdownEnabled()) { this.open.set(true); } } writeValue(value) { super.writeValue(value); this.textfield.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.textfield.value.set(this.stringify(newValue)); } } toggle() { this.open.update((x) => !x); } 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: "16.2.12", ngImport: i0, type: TuiInputTimeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputTimeDirective, isStandalone: true, selector: "input[tuiInputTime]", inputs: { accept: "accept", modeSetter: ["mode", "modeSetter"], prefixSetter: ["prefix", "prefixSetter"], postfixSetter: ["postfix", "postfixSetter"] }, host: { attributes: { "inputmode": "numeric" }, listeners: { "click": "toggle()", "input": "onInput($event.target.value)" }, properties: { "disabled": "disabled()" } }, providers: [ tuiAsControl(TuiInputTimeDirective), tuiAsTextfieldAccessor(TuiInputTimeDirective), tuiAsAuxiliary(TuiInputTimeDirective), tuiValueTransformerFrom(TUI_INPUT_TIME_OPTIONS), tuiAsOptionContent(TuiSelectOption), ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }, { directive: i2.MaskitoDirective }], ngImport: i0 }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTimeDirective, decorators: [{ type: Directive, args: [{ standalone: true, selector: 'input[tuiInputTime]', providers: [ tuiAsControl(TuiInputTimeDirective), tuiAsTextfieldAccessor(TuiInputTimeDirective), tuiAsAuxiliary(TuiInputTimeDirective), tuiValueTransformerFrom(TUI_INPUT_TIME_OPTIONS), tuiAsOptionContent(TuiSelectOption), ], hostDirectives: [TuiWithTextfield, MaskitoDirective], host: { inputmode: 'numeric', '[disabled]': 'disabled()', '(click)': 'toggle()', '(input)': 'onInput($event.target.value)', }, }] }], propDecorators: { accept: [{ type: Input }], modeSetter: [{ type: Input, args: ['mode'] }], prefixSetter: [{ type: Input, args: ['prefix'] }], postfixSetter: [{ type: Input, args: ['postfix'] }] } }); class TuiInputTimeComponent { constructor() { this.control = inject(TuiControl); this.list = tuiInjectElement().getAttribute('list'); this.host = inject(TuiInputTimeDirective); this.textfield = inject(TuiTextfieldDirective); this.value = computed((value = this.control.value()) => value ? value.toString(this.host.timeMode().replace(' AA', '')) : ''); this.step = computed((mode = this.host.timeMode()) => { switch (mode) { 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; } }); } setValue(value) { this.host.setValue(TuiTime.fromString(value)); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputTimeComponent, isStandalone: true, selector: "input[tuiInputTime][type=\"time\"]", host: { attributes: { "ngSkipHydration": "true" }, properties: { "type": "\"text\"", "attr.list": "null" } }, ngImport: i0, template: "<ng-container *ngIf=\"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</ng-container>\n", styles: ["tui-textfield input[tuiInputTime]~.t-content input[type=time]{position:absolute;right:0;left:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0}tui-textfield input[tuiInputTime]~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTimeComponent, decorators: [{ type: Component, args: [{ standalone: true, selector: 'input[tuiInputTime][type="time"]', imports: [NgIf, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { ngSkipHydration: 'true', '[type]': '"text"', '[attr.list]': 'null', }, template: "<ng-container *ngIf=\"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</ng-container>\n", styles: ["tui-textfield input[tuiInputTime]~.t-content input[type=time]{position:absolute;right:0;left:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0}tui-textfield input[tuiInputTime]~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}\n"] }] }] }); const TuiInputTime = [TuiInputTimeDirective, TuiInputTimeComponent]; /** * Generated bundle index. Do not edit. */ export { TUI_INPUT_TIME_DEFAULT_OPTIONS, TUI_INPUT_TIME_OPTIONS, TuiInputTime, TuiInputTimeComponent, TuiInputTimeDirective, tuiInputTimeOptionsProvider }; //# sourceMappingURL=taiga-ui-kit-components-input-time.mjs.map