@taiga-ui/kit
Version:
Taiga UI Angular main components kit
128 lines (121 loc) • 9.17 kB
JavaScript
import { TuiLabel } from '@taiga-ui/core/components/label';
import * as i2 from '@taiga-ui/core/components/textfield';
import { tuiInjectAuxiliary, TuiWithNativePicker, TuiSelectLike, TuiTextfieldContent, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import * as i3 from '@taiga-ui/core/portals/dropdown';
import { TuiDropdownOpen, tuiDropdownEnabled, TuiDropdownAuto, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import { TuiCalendarMonth } from '@taiga-ui/kit/components/calendar-month';
import * as i0 from '@angular/core';
import { InjectionToken, inject, computed, effect, Directive, input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { TUI_FIRST_DAY, TUI_LAST_DAY, TuiMonth } from '@taiga-ui/cdk/date-time';
import { tuiSetSignal } from '@taiga-ui/cdk/utils/miscellaneous';
import { WA_IS_MOBILE } from '@ng-web-apis/platform';
import { TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
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 { TUI_MONTHS } from '@taiga-ui/core/tokens';
import { tuiProvideOptions } from '@taiga-ui/cdk/utils/di';
import { TUI_INPUT_DATE_OPTIONS, TUI_INPUT_DATE_DEFAULT_OPTIONS } from '@taiga-ui/kit/components/input-date';
const TUI_INPUT_MONTH_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_INPUT_MONTH_OPTIONS' : '', {
factory: () => ({
...inject(TUI_INPUT_DATE_OPTIONS),
valueTransformer: TUI_IDENTITY_VALUE_TRANSFORMER,
}),
});
const tuiInputMonthOptionsProvider = (options) => tuiProvideOptions(TUI_INPUT_MONTH_OPTIONS, options, TUI_INPUT_DATE_DEFAULT_OPTIONS);
class TuiInputMonthDirective extends TuiControl {
constructor() {
super(...arguments);
this.input = inject(TuiInputDirective);
this.months = inject(TUI_MONTHS);
this.open = inject(TuiDropdownOpen).open;
this.icon = tuiIconEnd(inject(TUI_INPUT_MONTH_OPTIONS).icon);
this.dropdownEnabled = tuiDropdownEnabled(computed(() => !this.native && this.interactive()));
this.valueEffect = effect(() => {
const value = this.value();
const formatted = value
? `${this.months()[value.month] ?? ''} ${value.formattedYear}`
: '';
this.input.value.set(formatted);
});
this.calendarIn = effect(() => {
const calendar = this.calendar();
calendar && tuiSetSignal(calendar.value, this.value());
});
this.calendarOut = effect((onCleanup) => {
const subscription = this.calendar()?.monthClick.subscribe((month) => {
this.onChange(month);
this.open.set(false);
});
onCleanup(() => subscription?.unsubscribe());
});
this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendarMonth);
this.native = !!inject(TuiWithNativePicker, { optional: true }) && inject(WA_IS_MOBILE);
}
clear() {
this.onChange(null);
this.open.set(this.dropdownEnabled());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputMonthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiInputMonthDirective, isStandalone: true, selector: "input[tuiInputMonth]", host: { listeners: { "input": "$event.inputType?.includes(\"delete\") && clear()" }, properties: { "disabled": "disabled()" } }, providers: [
tuiAsControl(TuiInputMonthDirective),
tuiValueTransformerFrom(TUI_INPUT_MONTH_OPTIONS),
], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithInput }, { directive: i2.TuiSelectLike }, { directive: i3.TuiDropdownAuto }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputMonthDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiInputMonth]',
providers: [
tuiAsControl(TuiInputMonthDirective),
tuiValueTransformerFrom(TUI_INPUT_MONTH_OPTIONS),
],
hostDirectives: [TuiWithInput, TuiSelectLike, TuiDropdownAuto],
host: {
'[disabled]': 'disabled()',
'(input)': '$event.inputType?.includes("delete") && clear()',
},
}]
}] });
class TuiInputMonthComponent {
constructor() {
this.host = inject(TuiInputMonthDirective);
this.calendarSync = effect(() => {
const calendar = this.host.calendar();
if (calendar) {
tuiSetSignal(calendar.min, this.min() ?? TUI_FIRST_DAY);
tuiSetSignal(calendar.max, this.max() ?? TUI_LAST_DAY);
}
});
this.min = input(null);
this.max = input(null);
}
onInput(value) {
if (!value) {
return this.host.onChange(null);
}
const [year = 0, month = 0] = value.split('-').map(Number);
this.host.onChange(new TuiMonth(year, month - 1));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiInputMonthComponent, isStandalone: true, selector: "input[tuiInputMonth][type=\"month\"]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.7.0", "ngSkipHydration": "true" } }, hostDirectives: [{ directive: i2.TuiWithNativePicker }], ngImport: i0, template: "@if (host.native) {\n <input\n *tuiTextfieldContent\n type=\"month\"\n [max]=\"max()?.toJSON()\"\n [min]=\"min()?.toJSON()\"\n [value]=\"host.value()?.toJSON()\"\n (click.stop.zoneless)=\"(0)\"\n (input)=\"onInput($any($event.target).value)\"\n (pointerdown.stop.zoneless)=\"(0)\"\n />\n}\n", styles: ["tui-textfield input[tuiInputMonth]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=month]{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto}tui-textfield input[tuiInputMonth]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=month]::-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: TuiInputMonthComponent, decorators: [{
type: Component,
args: [{ selector: 'input[tuiInputMonth][type="month"]', 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=\"month\"\n [max]=\"max()?.toJSON()\"\n [min]=\"min()?.toJSON()\"\n [value]=\"host.value()?.toJSON()\"\n (click.stop.zoneless)=\"(0)\"\n (input)=\"onInput($any($event.target).value)\"\n (pointerdown.stop.zoneless)=\"(0)\"\n />\n}\n", styles: ["tui-textfield input[tuiInputMonth]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=month]{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto}tui-textfield input[tuiInputMonth]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=month]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"] }]
}] });
const TuiInputMonth = [
TuiInputMonthComponent,
TuiInputMonthDirective,
TuiCalendarMonth,
TuiLabel,
TuiTextfieldComponent,
TuiTextfieldOptionsDirective,
TuiDropdownContent,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_MONTH_OPTIONS, TuiInputMonth, TuiInputMonthComponent, TuiInputMonthDirective, tuiInputMonthOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-month.mjs.map