@taiga-ui/kit/fesm2015/taiga-ui-kit-components-input-month-range.js

Taiga UI Angular main components kit

import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, ViewChild, Component, forwardRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractTuiNullableControl, TUI_FIRST_DAY, TUI_LAST_DAY, ALWAYS_FALSE_HANDLER, TuiMonthRange, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiPreventDefaultModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
import { sizeBigger, TUI_MONTHS, TuiTextfieldSizeDirective, TUI_TEXTFIELD_SIZE, TuiPrimitiveTextfieldComponent, TuiHostedDropdownModule, TuiPrimitiveTextfieldModule, TuiSvgModule } from '@taiga-ui/core';
import { LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';
import { TuiCalendarMonthModule } from '@taiga-ui/kit/components/calendar-month';

var TuiInputMonthRangeComponent_1;
// @dynamic
let TuiInputMonthRangeComponent = TuiInputMonthRangeComponent_1 = class TuiInputMonthRangeComponent extends AbstractTuiNullableControl {
    constructor(control, changeDetectorRef, months$, textfieldSize) {
        super(control, changeDetectorRef);
        this.months$ = months$;
        this.textfieldSize = textfieldSize;
        this.min = TUI_FIRST_DAY;
        this.max = TUI_LAST_DAY;
        this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
        this.open = false;
    }
    get nativeFocusableElement() {
        return this.textfield ? this.textfield.nativeFocusableElement : null;
    }
    get focused() {
        return !!this.textfield && this.textfield.focused;
    }
    get calendarIcon() {
        return sizeBigger(this.textfieldSize.size)
            ? 'tuiIconCalendarLarge'
            : 'tuiIconCalendar';
    }
    computeValue(value, focused, months) {
        if (value === null) {
            return '';
        }
        const formattedValueTo = !value.isSingleMonth || !focused ? this.formatMonth(value.to, months) : '';
        return `${this.formatMonth(value.from, months)} — ${formattedValueTo}`;
    }
    get canOpen() {
        return !this.computedDisabled && !this.readOnly;
    }
    onValueChange(value) {
        if (value === '') {
            this.updateValue(null);
        }
    }
    onMonthClick(month) {
        if (this.value === null || !this.value.isSingleMonth) {
            this.writeValue(new TuiMonthRange(month, month));
            return;
        }
        this.updateValue(TuiMonthRange.sort(this.value.from, month));
        this.close();
    }
    onHovered(hovered) {
        this.updateHovered(hovered);
    }
    onOpenChange(open) {
        this.open = open;
    }
    onActiveZone(focused) {
        this.updateFocused(focused);
        if (focused) {
            return;
        }
        if (this.value && this.value.isSingleMonth) {
            this.updateValue(new TuiMonthRange(this.value.from, this.value.from));
        }
    }
    setDisabledState() {
        super.setDisabledState();
        this.close();
    }
    formatMonth({ month, formattedYear }, months) {
        return `${months[month]} ${formattedYear}`;
    }
    close() {
        this.open = false;
    }
};
TuiInputMonthRangeComponent.ctorParameters = () => [
    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
    { type: Observable, decorators: [{ type: Inject, args: [TUI_MONTHS,] }] },
    { type: TuiTextfieldSizeDirective, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_SIZE,] }] }
];
__decorate([
    Input(),
    tuiDefaultProp()
], TuiInputMonthRangeComponent.prototype, "min", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiInputMonthRangeComponent.prototype, "max", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiInputMonthRangeComponent.prototype, "disabledItemHandler", void 0);
__decorate([
    ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputMonthRangeComponent.prototype, "textfield", void 0);
TuiInputMonthRangeComponent = TuiInputMonthRangeComponent_1 = __decorate([
    Component({
        selector: 'tui-input-month-range',
        template: "<tui-hosted-dropdown\n    class=\"hosted\"\n    [canOpen]=\"canOpen\"\n    [content]=\"dropdown\"\n    [open]=\"open && canOpen\"\n    (openChange)=\"onOpenChange($event)\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        *ngIf=\"months$ | async as months\"\n        class=\"textfield\"\n        [editable]=\"false\"\n        [disabled]=\"disabled\"\n        [nativeId]=\"nativeId\"\n        [readOnly]=\"readOnly\"\n        [iconContent]=\"calendarIcon\"\n        [pseudoFocused]=\"pseudoFocused\"\n        [pseudoHovered]=\"pseudoHovered\"\n        [invalid]=\"computedInvalid\"\n        [value]=\"computeValue(value, focused, months)\"\n        (valueChange)=\"onValueChange($event)\"\n        (hoveredChange)=\"onHovered($event)\"\n    >\n        <ng-content></ng-content>\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            tuiPreventDefault=\"mousedown\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [min]=\"min\"\n            [max]=\"max\"\n            [value]=\"value\"\n            (monthClick)=\"onMonthClick($event)\"\n        ></tui-calendar-month>\n    </ng-template>\n</tui-hosted-dropdown>\n",
        providers: [
            {
                provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
                useExisting: forwardRef(() => TuiInputMonthRangeComponent_1),
            },
            LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER,
        ],
        changeDetection: ChangeDetectionStrategy.OnPush,
        styles: [":host{display:block;border-radius:var(--tui-radius-m)}.hosted{display:block;border-radius:inherit}.textfield{border-radius:inherit}.icon{position:relative;cursor:pointer}"]
    }),
    __param(0, Optional()),
    __param(0, Self()),
    __param(0, Inject(NgControl)),
    __param(1, Inject(ChangeDetectorRef)),
    __param(2, Inject(TUI_MONTHS)),
    __param(3, Inject(TUI_TEXTFIELD_SIZE))
], TuiInputMonthRangeComponent);

let TuiInputMonthRangeModule = class TuiInputMonthRangeModule {
};
TuiInputMonthRangeModule = __decorate([
    NgModule({
        imports: [
            CommonModule,
            TuiCalendarMonthModule,
            TuiHostedDropdownModule,
            TuiPrimitiveTextfieldModule,
            TuiSvgModule,
            TuiPreventDefaultModule,
            TuiActiveZoneModule,
        ],
        declarations: [TuiInputMonthRangeComponent],
        exports: [TuiInputMonthRangeComponent],
    })
], TuiInputMonthRangeModule);

/**
 * Generated bundle index. Do not edit.
 */

export { TuiInputMonthRangeComponent, TuiInputMonthRangeModule };
//# sourceMappingURL=taiga-ui-kit-components-input-month-range.js.map