@taiga-ui/kit
Version:
Taiga UI Angular main components kit
199 lines (194 loc) • 14.2 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, ViewChild, HostBinding, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { isNativeFocused, setNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableModule, TuiFocusedModule, TuiHoveredModule, TuiPressedModule, TuiMapperPipeModule, TuiInputModeModule } from '@taiga-ui/cdk';
import { maskedNumberStringToNumber, maskedMoneyValueIsEmpty, formatNumber, TuiModeDirective, TuiHintControllerDirective, TUI_HINT_WATCHED_CONTROLLER, HINT_CONTROLLER_PROVIDER, TuiPluralizePipeModule, TuiTooltipModule, TuiWrapperModule } from '@taiga-ui/core';
import { AbstractTuiInputSlider } from '@taiga-ui/kit/abstract';
import { CommonModule } from '@angular/common';
import { TuiSliderModule } from '@taiga-ui/kit/components/slider';
import { TextMaskModule } from 'angular2-text-mask';
var TuiInputSliderComponent_1;
// @dynamic
let TuiInputSliderComponent = TuiInputSliderComponent_1 = class TuiInputSliderComponent extends AbstractTuiInputSlider {
constructor(control, changeDetectorRef, modeDirective, hintController) {
super(control, changeDetectorRef);
this.modeDirective = modeDirective;
this.hintController = hintController;
this.secondary = '';
}
get nativeFocusableElement() {
return !this.focusableElement || this.computedDisabled
? null
: this.focusableElement.nativeElement;
}
get focused() {
return isNativeFocused(this.nativeFocusableElement);
}
get hasTooltip() {
return !!this.hintController.content && !this.disabled;
}
get showMinLabel() {
return !this.focused && this.value === this.min && !!this.minLabel;
}
get showMaxLabel() {
return !this.focused && this.value === this.max && !!this.maxLabel;
}
get computedValue() {
if (this.focused && this.isInputValueNotFinished) {
return this.inputValue;
}
return this.formattedValue;
}
get showValue() {
return !this.showMinLabel && !this.showMaxLabel;
}
get inputValue() {
return this.focusableElement ? this.focusableElement.nativeElement.value : '';
}
set inputValue(value) {
if (this.focusableElement) {
this.focusableElement.nativeElement.value = value;
}
}
onMouseDown() {
if (this.focusableElement) {
setNativeFocused(this.focusableElement.nativeElement);
}
}
onKeyDownArrowUp(event) {
if (this.readOnly) {
return;
}
event.preventDefault();
this.processStep(true);
this.inputValue = this.formattedValue;
}
onKeyDownArrowDown(event) {
if (this.readOnly) {
return;
}
event.preventDefault();
this.processStep(false);
this.inputValue = this.formattedValue;
}
onFocused(focused) {
this.updateFocused(focused);
if (focused) {
return;
}
const inputValue = maskedNumberStringToNumber(this.computedValue);
const value = isNaN(inputValue) ? this.min : this.valueGuard(inputValue);
this.updateValue(value);
this.inputValue = this.formattedValue;
}
onValue(value) {
const capped = this.capInputValue(value);
const postfix = value.slice(-1)[0] === ',' ? ',' : '';
if (maskedMoneyValueIsEmpty(value) || capped === null) {
return;
}
const newValue = formatNumber(capped) + postfix;
if (value !== newValue) {
this.inputValue = newValue;
}
this.updateValue(capped);
}
onSliderValue(value) {
this.updateValue(this.valueGuard(value));
this.inputValue = this.formattedValue;
}
getFallbackValue() {
return 0;
}
get formattedValue() {
return formatNumber(this.value);
}
get isInputValueNotFinished() {
if (this.inputValue === '') {
return true;
}
const nativeNumberValue = maskedNumberStringToNumber(this.inputValue);
return nativeNumberValue < 0
? nativeNumberValue > this.max
: nativeNumberValue < this.min;
}
processStep(increment) {
const value = this.valueGuard(increment ? this.value + this.step : this.value - this.step);
if (value !== this.value) {
this.updateValue(value);
}
}
};
TuiInputSliderComponent.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: TuiHintControllerDirective, decorators: [{ type: Inject, args: [TUI_HINT_WATCHED_CONTROLLER,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiInputSliderComponent.prototype, "secondary", void 0);
__decorate([
ViewChild('focusableElement')
], TuiInputSliderComponent.prototype, "focusableElement", void 0);
__decorate([
HostBinding('class._has-tooltip')
], TuiInputSliderComponent.prototype, "hasTooltip", null);
__decorate([
HostBinding('class._min-label')
], TuiInputSliderComponent.prototype, "showMinLabel", null);
__decorate([
HostBinding('class._max-label')
], TuiInputSliderComponent.prototype, "showMaxLabel", null);
TuiInputSliderComponent = TuiInputSliderComponent_1 = __decorate([
Component({
selector: 'tui-input-slider',
template: "<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-slider__placeholder\"\n >\n <ng-content></ng-content>\n </span>\n <input\n #focusableElement\n class=\"native\"\n automation-id=\"tui-input-slider__native\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [tuiInputMode]=\"inputMode\"\n [tuiFocusable]=\"focusable\"\n [textMask]=\"quantum | tuiMapper: mask: min\"\n [ngModel]=\"computedValue\"\n (ngModelChange)=\"onValue($event)\"\n (tuiFocusedChange)=\"onFocused($event)\"\n (tuiHoveredChange)=\"onHovered($event)\"\n (keydown.arrowUp)=\"onKeyDownArrowUp($event)\"\n (keydown.arrowDown)=\"onKeyDownArrowDown($event)\"\n />\n <div class=\"content\">\n <span *ngIf=\"showValue\" class=\"label\">\n <span class=\"value\">{{computedValue}}</span>\n <span\n *ngIf=\"isPluralized(pluralize)\"\n automation-id=\"tui-input-slider__pluralize\"\n >\n {{value | tuiPluralize: pluralize}}\n </span>\n </span>\n <span\n *ngIf=\"showMinLabel\"\n class=\"label\"\n automation-id=\"tui-input-slider__min-label\"\n >\n {{minLabel}}\n </span>\n <span\n *ngIf=\"showMaxLabel\"\n class=\"label\"\n automation-id=\"tui-input-slider__max-label\"\n >\n {{maxLabel}}\n </span>\n <span class=\"secondary\" automation-id=\"tui-input-slider__secondary\">\n {{secondary}}\n <tui-tooltip\n *ngIf=\"hasTooltip\"\n automation-id=\"tui-input-slider__tooltip\"\n class=\"tooltip\"\n describeId=\"placeholer_until_accesibility_is_added\"\n [content]=\"hintController.content\"\n [direction]=\"hintController.direction\"\n [mode]=\"hintController.mode\"\n (mousedown.prevent)=\"onMouseDown()\"\n ></tui-tooltip>\n </span>\n </div>\n</tui-wrapper>\n<tui-slider\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)=\"onSliderValue($event)\"\n (mousedown)=\"onMouseDown()\"\n></tui-slider>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputSliderComponent_1),
},
HINT_CONTROLLER_PROVIDER,
],
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}.native{position:absolute;top:0;left:0;height:100%;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;width:100%;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}:host._disabled .native{color:var(--tui-text-03);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host._max-label .native,:host._min-label .native{opacity:0}: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;align-items:center;height:var(--tui-height-m);padding:0 16px;justify-content:space-between}:host[data-tui-host-size='l'] .content{height:var(--tui-height-l);padding:0 16px}.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)}:host._has-tooltip .placeholder{max-width:calc(114% - 60px)}.value{visibility:hidden}.label{line-height:15px;overflow:hidden;text-overflow:ellipsis}:host[data-tui-host-size='l'] .label{padding-top:20px}.secondary{color:var(--tui-text-01)}:host._disabled .secondary{color:var(--tui-text-03)}:host[data-mode=onDark]._disabled .secondary{color:var(--tui-text-03-night)}.tooltip{margin-left:12px}.slider{position:absolute;top:100%;left:0;right:0;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_HINT_WATCHED_CONTROLLER))
], TuiInputSliderComponent);
let TuiInputSliderModule = class TuiInputSliderModule {
};
TuiInputSliderModule = __decorate([
NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TextMaskModule,
TuiFocusableModule,
TuiFocusedModule,
TuiHoveredModule,
TuiPressedModule,
TuiMapperPipeModule,
TuiInputModeModule,
TuiPluralizePipeModule,
TuiTooltipModule,
TuiSliderModule,
TuiWrapperModule,
],
declarations: [TuiInputSliderComponent],
exports: [TuiInputSliderComponent],
})
], TuiInputSliderModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputSliderComponent, TuiInputSliderModule };
//# sourceMappingURL=taiga-ui-kit-components-input-slider.js.map