@taiga-ui/kit
Version:
Taiga UI Angular main components kit
239 lines (234 loc) • 17.4 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, ViewChild, HostBinding, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { isNativeFocused, setNativeFocused, TUI_IS_MOBILE, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableModule, TuiFocusedModule, TuiHoveredModule, TuiPressedModule, TuiMapperPipeModule, TuiInputModeModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
import { formatNumber, maskedMoneyValueIsEmpty, maskedNumberStringToNumber, TuiModeDirective, TuiPluralizePipeModule, TuiWrapperModule } from '@taiga-ui/core';
import { AbstractTuiInputSlider } from '@taiga-ui/kit/abstract';
import { CommonModule } from '@angular/common';
import { TuiRangeModule } from '@taiga-ui/kit/components/range';
import { TextMaskModule } from 'angular2-text-mask';
var TuiInputRangeComponent_1;
// @dynamic
let TuiInputRangeComponent = TuiInputRangeComponent_1 = class TuiInputRangeComponent extends AbstractTuiInputSlider {
constructor(control, changeDetectorRef, modeDirective, isMobile) {
super(control, changeDetectorRef);
this.modeDirective = modeDirective;
this.isMobile = isMobile;
}
get nativeFocusableElement() {
return !this.nativeLeft || this.disabled ? null : this.nativeLeft.nativeElement;
}
get focused() {
return this.focusedLeft || this.focusedRight;
}
get focusedLeft() {
return !!this.nativeLeft && isNativeFocused(this.nativeLeft.nativeElement);
}
get focusedRight() {
return !!this.nativeRight && isNativeFocused(this.nativeRight.nativeElement);
}
get showMinLabel() {
return !this.focusedLeft && !!this.minLabel && this.value[0] === this.min;
}
get showMaxLabel() {
return !this.focusedRight && !!this.maxLabel && this.value[1] === this.max;
}
get inputValueLeft() {
return this.nativeLeft ? this.nativeLeft.nativeElement.value : '';
}
get inputValueRight() {
return this.nativeRight ? this.nativeRight.nativeElement.value : '';
}
get computedValueLeft() {
return formatNumber(this.value[0]);
}
get computedValueRight() {
return formatNumber(this.value[1]);
}
onActiveZone(active) {
this.updateFocused(active);
}
onMouseDown() {
if (this.nativeRight && !this.isMobile) {
setNativeFocused(this.nativeRight.nativeElement);
}
}
onKeyDownArrowUpLeft(event) {
if (this.readOnly) {
return;
}
event.preventDefault();
this.processStep(true, false);
}
onKeyDownArrowDownLeft(event) {
if (this.readOnly) {
return;
}
event.preventDefault();
this.processStep(false, false);
}
onKeyDownArrowUpRight(event) {
if (this.readOnly) {
return;
}
event.preventDefault();
this.processStep(true, true);
}
onKeyDownArrowDownRight(event) {
if (this.readOnly) {
return;
}
event.preventDefault();
this.processStep(false, true);
}
onInputLeft() {
const value = this.inputValueLeft;
const capped = this.capInputValue(value, this.value[1]);
const postfix = value.slice(-1)[0] === ',' ? ',' : '';
if (maskedMoneyValueIsEmpty(value) || capped === null) {
return;
}
const newValue = formatNumber(capped) + postfix;
if (this.nativeLeft && this.inputValueLeft !== newValue) {
this.nativeLeft.nativeElement.value = newValue;
}
this.updateValue([capped, this.value[1]]);
}
onInputRight() {
const value = this.inputValueRight;
const capped = this.capInputValue(value);
const postfix = value.slice(-1)[0] === ',' ? ',' : '';
if (maskedMoneyValueIsEmpty(value) || capped === null) {
return;
}
const newValue = formatNumber(capped) + postfix;
if (this.nativeRight && this.inputValueRight !== newValue) {
this.nativeRight.nativeElement.value = newValue;
}
if (capped >= this.value[0]) {
this.updateValue([this.value[0], capped]);
}
}
onRangeValue(value) {
const guardedValue = value.map(item => this.valueGuard(item));
if (!this.nativeLeft ||
!this.nativeRight ||
(guardedValue[0] === this.value[0] && guardedValue[1] === this.value[1])) {
return;
}
if (!this.isMobile) {
const element = guardedValue[0] !== this.value[0]
? this.nativeLeft.nativeElement
: this.nativeRight.nativeElement;
setNativeFocused(element);
}
this.updateValue(guardedValue);
this.nativeLeft.nativeElement.value = formatNumber(guardedValue[0]);
}
onLeftFocused(focused) {
if (focused || !this.nativeLeft) {
return;
}
const inputValue = maskedNumberStringToNumber(this.computedValueLeft);
const value = isNaN(inputValue) ? this.min : this.valueGuard(inputValue);
this.nativeLeft.nativeElement.value = formatNumber(value);
if (value !== this.value[0]) {
this.updateValue([value, this.value[1]]);
}
}
onRightFocused(focused) {
if (focused || !this.nativeRight) {
return;
}
const inputValue = maskedNumberStringToNumber(this.computedValueRight);
const value = isNaN(inputValue)
? this.value[0]
: this.valueGuard(Math.max(inputValue, this.value[0]));
this.nativeRight.nativeElement.value = formatNumber(value);
if (value !== this.value[1]) {
this.updateValue([this.value[0], value]);
}
}
getFallbackValue() {
return [0, 0];
}
processStep(increment, right) {
const start = this.valueGuard(increment ? this.value[0] + this.step : this.value[0] - this.step);
const end = this.valueGuard(increment ? this.value[1] + this.step : this.value[1] - this.step);
const value = [
right ? this.value[0] : Math.min(start, this.value[1]),
right ? Math.max(end, this.value[0]) : this.value[1],
];
if (value[0] !== this.value[0] || value[1] !== this.value[1]) {
this.updateValue(value);
}
}
};
TuiInputRangeComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: TuiModeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiModeDirective,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_MOBILE,] }] }
];
__decorate([
ViewChild('nativeLeft')
], TuiInputRangeComponent.prototype, "nativeLeft", void 0);
__decorate([
ViewChild('nativeRight')
], TuiInputRangeComponent.prototype, "nativeRight", void 0);
__decorate([
HostBinding('class._min-label')
], TuiInputRangeComponent.prototype, "showMinLabel", null);
__decorate([
HostBinding('class._max-label')
], TuiInputRangeComponent.prototype, "showMaxLabel", null);
TuiInputRangeComponent = TuiInputRangeComponent_1 = __decorate([
Component({
selector: 'tui-input-range',
template: "<div class=\"zone\" (tuiActiveZoneChange)=\"onActiveZone($event)\">\n <tui-wrapper\n appearance=\"textfield\"\n [readOnly]=\"readOnly\"\n [disabled]=\"disabled\"\n [focused]=\"computedFocused\"\n [hovered]=\"computedHovered\"\n [invalid]=\"computedInvalid\"\n >\n <span\n *ngIf=\"hasPlaceholder\"\n class=\"placeholder\"\n automation-id=\"tui-input-range__placeholder\"\n >\n <ng-content></ng-content>\n </span>\n <div class=\"content\">\n <span *ngIf=\"!showMinLabel\" class=\"label\">\n <span class=\"value\">{{inputValueLeft}}</span>\n <span\n *ngIf=\"isPluralized(pluralize)\"\n class=\"pluralize\"\n automation-id=\"tui-input-range__pluralize-left\"\n >\n {{value[0] | tuiPluralize: pluralize}}\n </span>\n </span>\n <span\n *ngIf=\"showMinLabel\"\n class=\"label\"\n automation-id=\"tui-input-range__min-label\"\n >\n {{minLabel}}\n </span>\n <span\n *ngIf=\"showMaxLabel\"\n automation-id=\"tui-input-range__max-label\"\n class=\"max\"\n >\n {{maxLabel}}\n </span>\n </div>\n <tui-range\n class=\"slider\"\n [min]=\"min\"\n [max]=\"max\"\n [steps]=\"computedSteps\"\n [segments]=\"segments\"\n [keySteps]=\"keySteps\"\n [pluralize]=\"segmentsPluralize\"\n [focusable]=\"false\"\n [disabled]=\"readOnly || disabled\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onRangeValue($event)\"\n (mousedown.prevent)=\"onMouseDown()\"\n ></tui-range>\n </tui-wrapper>\n\n <div class=\"native-wrapper\" (tuiHoveredChange)=\"onHovered($event)\">\n <input\n #nativeLeft\n class=\"native\"\n automation-id=\"tui-input-range__native-left\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [class.native_hidden]=\"showMinLabel\"\n [tuiInputMode]=\"inputMode\"\n [tuiFocusable]=\"focusable\"\n [textMask]=\"quantum | tuiMapper: mask: min\"\n [ngModel]=\"computedValueLeft\"\n (ngModelChange)=\"onInputLeft()\"\n (tuiFocusedChange)=\"onLeftFocused($event)\"\n (keydown.arrowUp)=\"onKeyDownArrowUpLeft($event)\"\n (keydown.arrowDown)=\"onKeyDownArrowDownLeft($event)\"\n />\n <input\n #nativeRight\n class=\"native native_right\"\n automation-id=\"tui-input-range__native-right\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [class.native_hidden]=\"showMaxLabel\"\n [tuiInputMode]=\"inputMode\"\n [tuiFocusable]=\"focusable\"\n [textMask]=\"quantum | tuiMapper: mask: min\"\n [ngModel]=\"computedValueRight\"\n (ngModelChange)=\"onInputRight()\"\n (tuiFocusedChange)=\"onRightFocused($event)\"\n (keydown.arrowUp)=\"onKeyDownArrowUpRight($event)\"\n (keydown.arrowDown)=\"onKeyDownArrowDownRight($event)\"\n />\n <span\n *ngIf=\"isPluralized(pluralize) && !showMaxLabel\"\n class=\"pluralize pluralize_right\"\n automation-id=\"tui-input-range__pluralize-right\"\n (mousedown)=\"onMouseDown()\"\n >\n {{value[1] | tuiPluralize: pluralize}}\n </span>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputRangeComponent_1),
},
],
styles: [":host{font:var(--tui-font-text-m);position:relative;z-index:0;display:block;border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host._segmented{border-bottom:26px solid transparent}:host[data-mode=onDark]{color:var(--tui-base-01)}.zone{border-radius:inherit}.native-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.pluralize{display:flex;align-items:center;padding-right:12px;margin-left:-8px}.pluralize_right{margin-left:-12px}:host[data-tui-host-size='l'] .pluralize_right{padding-top:20px}:host._disabled .pluralize_right{color:var(--tui-text-03)}:host[data-mode=onDark]._disabled .pluralize_right{color:var(--tui-text-03-night)}.native{padding:0 16px;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;flex:1;min-width:0;color:var(--tui-text-01);box-sizing:border-box;outline:0}.native:-webkit-autofill,.native:-webkit-autofill:focus,.native:-webkit-autofill:hover{border-radius:inherit;-webkit-text-fill-color:inherit!important;color:inherit!important;background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}.native_right{text-align:right}.native_hidden{opacity:0}:host._disabled .native{color:var(--tui-text-03);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host[data-tui-host-size='l'] .native{padding:20px 16px 0}:host[data-mode=onDark] .native{color:var(--tui-text-01-night)}:host[data-mode=onDark]._disabled .native{color:var(--tui-text-03-night)}.content{display:flex;height:var(--tui-height-m);padding:0 16px;justify-content:space-between;align-items:center}:host[data-tui-host-size='l'] .content{height:var(--tui-height-l);padding:0 16px}:host[data-tui-host-size='l']._disabled .content{color:var(--tui-text-03)}:host[data-tui-host-size='l'][data-mode=onDark]._disabled .content{color:var(--tui-text-03-night)}.placeholder{transition-property:transform,min-width,color,letter-spacing;transition-duration:.3s;transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:13px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;color:var(--tui-text-02);transform-origin:left;letter-spacing:normal;text-transform:none;position:absolute;top:0;width:100%;height:100%;left:16px;transform:translateY(-10px) scale(.87);line-height:var(--tui-height-l);max-width:calc(114% - 32px)}.placeholder_raised{width:114%;transform:translateY(-10px) scale(.87)}:host[data-tui-host-size='m'] .placeholder_raised{width:118%;transform:translateY(-8px) scale(.85);letter-spacing:.4px}:host._invalid:not(._focused) .placeholder_raised,:host._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .placeholder,:host[data-tui-host-size='l']._focused._label-outside .placeholder,:host[data-tui-host-size='m']._focused._label-outside .placeholder{color:var(--tui-text-03)}:host[data-tui-host-size='l'] .placeholder{font-size:15px}:host[data-tui-host-size='l']._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m']._focused:not(._label-outside) .placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .placeholder{color:var(--tui-text-02-night)}:host[data-tui-host-size='l'][data-mode=onDark]._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused:not(._label-outside) .placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .placeholder,:host[data-tui-host-size='l'][data-mode=onDark]._focused._label-outside .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused._label-outside .placeholder{color:var(--tui-text-02-night)}.value{visibility:hidden;overflow:hidden;padding-right:12px}:host._disabled .value{color:var(--tui-text-03)}.label{display:flex;width:50%}:host[data-tui-host-size='l'] .label{padding-top:20px}.max{text-align:right;flex:1}:host[data-tui-host-size='l'] .max{padding-top:20px;line-height:calc(var(--tui-height-l) - 20px)}.slider{position:absolute;top:100%;left:0;right:0;z-index:1;border-top-left-radius:0;border-top-right-radius:0;margin:-9px 0 0;color:transparent}:host._disabled .slider,:host._readonly .slider{pointer-events:none}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Optional()),
__param(2, Inject(TuiModeDirective)),
__param(3, Inject(TUI_IS_MOBILE))
], TuiInputRangeComponent);
let TuiInputRangeModule = class TuiInputRangeModule {
};
TuiInputRangeModule = __decorate([
NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TextMaskModule,
TuiFocusableModule,
TuiFocusedModule,
TuiHoveredModule,
TuiPressedModule,
TuiMapperPipeModule,
TuiInputModeModule,
TuiActiveZoneModule,
TuiPluralizePipeModule,
TuiRangeModule,
TuiWrapperModule,
],
declarations: [TuiInputRangeComponent],
exports: [TuiInputRangeComponent],
})
], TuiInputRangeModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputRangeComponent, TuiInputRangeModule };
//# sourceMappingURL=taiga-ui-kit-components-input-range.js.map