@taiga-ui/kit
Version:
Taiga UI Angular main components kit
174 lines (169 loc) • 8.67 kB
JavaScript
import { __extends, __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, ViewChild, Component, forwardRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { TUI_FIRST_DAY, TUI_LAST_DAY, ALWAYS_FALSE_HANDLER, TuiMonthRange, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiNullableControl, 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';
// @dynamic
var TuiInputMonthRangeComponent = /** @class */ (function (_super) {
__extends(TuiInputMonthRangeComponent, _super);
function TuiInputMonthRangeComponent(control, changeDetectorRef, months$, textfieldSize) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.months$ = months$;
_this.textfieldSize = textfieldSize;
_this.min = TUI_FIRST_DAY;
_this.max = TUI_LAST_DAY;
_this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
_this.open = false;
return _this;
}
TuiInputMonthRangeComponent_1 = TuiInputMonthRangeComponent;
Object.defineProperty(TuiInputMonthRangeComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.textfield ? this.textfield.nativeFocusableElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputMonthRangeComponent.prototype, "focused", {
get: function () {
return !!this.textfield && this.textfield.focused;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputMonthRangeComponent.prototype, "calendarIcon", {
get: function () {
return sizeBigger(this.textfieldSize.size)
? 'tuiIconCalendarLarge'
: 'tuiIconCalendar';
},
enumerable: true,
configurable: true
});
TuiInputMonthRangeComponent.prototype.computeValue = function (value, focused, months) {
if (value === null) {
return '';
}
var formattedValueTo = !value.isSingleMonth || !focused ? this.formatMonth(value.to, months) : '';
return this.formatMonth(value.from, months) + " \u2014 " + formattedValueTo;
};
Object.defineProperty(TuiInputMonthRangeComponent.prototype, "canOpen", {
get: function () {
return !this.computedDisabled && !this.readOnly;
},
enumerable: true,
configurable: true
});
TuiInputMonthRangeComponent.prototype.onValueChange = function (value) {
if (value === '') {
this.updateValue(null);
}
};
TuiInputMonthRangeComponent.prototype.onMonthClick = function (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();
};
TuiInputMonthRangeComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiInputMonthRangeComponent.prototype.onOpenChange = function (open) {
this.open = open;
};
TuiInputMonthRangeComponent.prototype.onActiveZone = function (focused) {
this.updateFocused(focused);
if (focused) {
return;
}
if (this.value && this.value.isSingleMonth) {
this.updateValue(new TuiMonthRange(this.value.from, this.value.from));
}
};
TuiInputMonthRangeComponent.prototype.setDisabledState = function () {
_super.prototype.setDisabledState.call(this);
this.close();
};
TuiInputMonthRangeComponent.prototype.formatMonth = function (_a, months) {
var month = _a.month, formattedYear = _a.formattedYear;
return months[month] + " " + formattedYear;
};
TuiInputMonthRangeComponent.prototype.close = function () {
this.open = false;
};
var TuiInputMonthRangeComponent_1;
TuiInputMonthRangeComponent.ctorParameters = function () { return [
{ 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(function () { return 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);
return TuiInputMonthRangeComponent;
}(AbstractTuiNullableControl));
var TuiInputMonthRangeModule = /** @class */ (function () {
function TuiInputMonthRangeModule() {
}
TuiInputMonthRangeModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiCalendarMonthModule,
TuiHostedDropdownModule,
TuiPrimitiveTextfieldModule,
TuiSvgModule,
TuiPreventDefaultModule,
TuiActiveZoneModule,
],
declarations: [TuiInputMonthRangeComponent],
exports: [TuiInputMonthRangeComponent],
})
], TuiInputMonthRangeModule);
return TuiInputMonthRangeModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputMonthRangeComponent, TuiInputMonthRangeModule };
//# sourceMappingURL=taiga-ui-kit-components-input-month-range.js.map