@taiga-ui/kit
Version:
Taiga UI Angular main components kit
144 lines (139 loc) • 10.2 kB
JavaScript
import { __extends, __decorate, __param } from 'tslib';
import { DOCUMENT, CommonModule } from '@angular/common';
import { Optional, Self, Inject, ChangeDetectorRef, ElementRef, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { isNativeFocusedIn, round, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiRepeatTimesModule, TuiFocusableModule, TuiActiveZoneModule, TuiFocusVisibleModule } from '@taiga-ui/cdk';
import { SLIDER_KEYBOARD_STEP, DOT_WIDTH, AbstractTuiSlider } from '@taiga-ui/kit/abstract';
import { TUI_FLOATING_PRECISION } from '@taiga-ui/kit/constants';
import { TUI_FROM_TO_TEXTS } from '@taiga-ui/kit/tokens';
import { Observable } from 'rxjs';
import { TuiPluralizePipeModule, TuiFormatNumberPipeModule } from '@taiga-ui/core';
// @dynamic
var TuiRangeComponent = /** @class */ (function (_super) {
__extends(TuiRangeComponent, _super);
function TuiRangeComponent(control, changeDetectorRef, documentRef, elementRef, fromToTexts$) {
var _this = _super.call(this, control, changeDetectorRef, documentRef, fromToTexts$) || this;
_this.elementRef = elementRef;
return _this;
}
TuiRangeComponent_1 = TuiRangeComponent;
Object.defineProperty(TuiRangeComponent.prototype, "nativeFocusableElement", {
get: function () {
if (this.computedDisabled || !this.dotLeft || !this.dotRight) {
return null;
}
return this.isLeftFocusable
? this.dotLeft.nativeElement
: this.dotRight.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRangeComponent.prototype, "focused", {
get: function () {
return isNativeFocusedIn(this.elementRef.nativeElement);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRangeComponent.prototype, "left", {
get: function () {
return 100 * this.getFractionFromValue(this.value[0]);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRangeComponent.prototype, "right", {
get: function () {
return 100 - 100 * this.getFractionFromValue(this.value[1]);
},
enumerable: true,
configurable: true
});
TuiRangeComponent.prototype.getFallbackValue = function () {
return [0, 0];
};
TuiRangeComponent.prototype.processStep = function (increment, right) {
var fraction = this.getFractionFromValue(right ? this.value[1] : this.value[0]);
var step = this.discrete ? 1 / this.steps : SLIDER_KEYBOARD_STEP;
var value = this.getValueFromFraction(increment ? fraction + step : fraction - step);
this.processValue(value, right);
};
TuiRangeComponent.prototype.processValue = function (value, right) {
if (right === true) {
this.updateEnd(value);
}
else {
this.updateStart(value);
}
};
TuiRangeComponent.prototype.getCalibratedFractionFromEvents = function (rect, clientX, isMouseDownRight) {
var value = clientX -
rect.left -
DOT_WIDTH[this.size] / 2 -
(isMouseDownRight ? DOT_WIDTH[this.size] : 0);
var total = rect.width - 2 * DOT_WIDTH[this.size];
return round(value / total, TUI_FLOATING_PRECISION);
};
TuiRangeComponent.prototype.updateStart = function (value) {
this.updateValue([Math.min(value, this.value[1]), this.value[1]]);
};
TuiRangeComponent.prototype.updateEnd = function (value) {
this.updateValue([this.value[0], Math.max(value, this.value[0])]);
};
var TuiRangeComponent_1;
TuiRangeComponent.ctorParameters = function () { return [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_FROM_TO_TEXTS,] }] }
]; };
TuiRangeComponent = TuiRangeComponent_1 = __decorate([
Component({
selector: 'tui-range',
template: "<div\n class=\"event-catcher\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n (mousedown)=\"onMouseDown($event)\"\n (touchstart)=\"onTouchStart($event)\"\n>\n <div class=\"wrapper\">\n <div *ngIf=\"segmented\" class=\"segments\">\n <span\n *tuiRepeatTimes=\"let segmentIndex of segments + 1\"\n class=\"segment\"\n automation-id=\"tui-slider__segment\"\n >\n <span *ngIf=\"fromToTexts$ | async as fromToText\" class=\"number\">\n {{getSegmentPrefix(segmentIndex, fromToText)}}\n {{getSegmentLabel(segmentIndex) | tuiFormatNumber}}\n <span *ngIf=\"isPluralized(pluralize)\">\n {{getSegmentLabel(segmentIndex) | tuiPluralize:\n pluralize}}\n </span>\n </span>\n </span>\n </div>\n <div\n class=\"bar\"\n automation-id=\"tui-slider__bar\"\n [style.left.%]=\"left\"\n [style.right.%]=\"right\"\n >\n <div\n #dotLeft\n class=\"dot\"\n automation-id=\"tui-slider__left\"\n [class.dot_focus-visible]=\"focusVisibleLeft && computedFocused\"\n [tuiFocusable]=\"isLeftFocusable\"\n (tuiFocusVisibleChange)=\"onLeftFocusVisible($event)\"\n (keydown.arrowLeft.prevent)=\"decrement(false)\"\n (keydown.arrowDown.prevent)=\"decrement(false)\"\n (keydown.arrowRight.prevent)=\"increment(false)\"\n (keydown.arrowUp.prevent)=\"increment(false)\"\n ></div>\n <div\n #dotRight\n class=\"dot\"\n automation-id=\"tui-slider__right\"\n [class.dot_focus-visible]=\"focusVisibleRight && computedFocused\"\n [tuiFocusable]=\"isRightFocusable\"\n (tuiFocusVisibleChange)=\"onRightFocusVisible($event)\"\n (keydown.arrowLeft.prevent)=\"decrement(true)\"\n (keydown.arrowDown.prevent)=\"decrement(true)\"\n (keydown.arrowRight.prevent)=\"increment(true)\"\n (keydown.arrowUp.prevent)=\"increment(true)\"\n ></div>\n </div>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(function () { return TuiRangeComponent_1; }),
},
],
styles: [":host{display:block;border-radius:var(--tui-radius-m);color:var(--tui-base-03);min-height:2px;font-size:16px}:host[data-tui-host-size='s']{min-height:2px;font-size:8px}:host._segmented{padding-bottom:20px}:host._disabled{cursor:default;pointer-events:none;opacity:var(--tui-disabled-opacity)}.event-catcher{min-height:inherit;border-radius:inherit;padding:7px 0;cursor:pointer}.wrapper{position:relative;min-height:inherit;border-radius:inherit;background-color:currentColor;border:solid transparent;border-width:0 1em}.bar{position:absolute;top:0;bottom:0;margin:0 -1em;border-radius:inherit;background-color:var(--tui-primary)}:host-context(tui-input-slider) .bar{margin-left:calc(var(--tui-radius-m)/ 2);border-bottom-left-radius:calc(var(--tui-radius-m) * 5) calc(var(--tui-radius-m) * 1.5)}.dot{transition-property:background-color;transition-duration:.3s;transition-timing-function:ease-in-out;position:absolute;top:50%;z-index:1;width:1em;height:1em;transform:translate(0,-50%);border-radius:100%;background-color:var(--tui-primary);outline:0;cursor:ew-resize}.dot:last-child{right:0;transform:translate(0,-50%)}.dot:hover{background-color:var(--tui-primary-hover)}.dot:active{background-color:var(--tui-primary-active)}.dot_focus-visible{box-shadow:inset 0 0 0 2px var(--tui-focus)}.segments{position:relative;z-index:1;display:flex;justify-content:space-between;min-height:inherit;margin:0 -1em}.segments-spacer{height:26px}.segment{position:relative;height:inherit;width:4px;background-color:rgba(0,0,0,.36);pointer-events:none}.segment:first-of-type,.segment:last-of-type{background-color:transparent}.number{position:absolute;left:50%;transform:translate(-50%,0);font:var(--tui-font-text-s);top:100%;margin-top:8px;color:var(--tui-text-02);white-space:nowrap}.segment:first-of-type .number{left:-.05em;transform:none}.segment:last-of-type .number{left:auto;right:-.05em;transform:none}:host._disabled .number{color:var(--tui-text-01)}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(DOCUMENT)),
__param(3, Inject(ElementRef)),
__param(4, Inject(TUI_FROM_TO_TEXTS))
], TuiRangeComponent);
return TuiRangeComponent;
}(AbstractTuiSlider));
var TuiRangeModule = /** @class */ (function () {
function TuiRangeModule() {
}
TuiRangeModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiRepeatTimesModule,
TuiFocusableModule,
TuiActiveZoneModule,
TuiFocusVisibleModule,
TuiPluralizePipeModule,
TuiFormatNumberPipeModule,
],
declarations: [TuiRangeComponent],
exports: [TuiRangeComponent],
})
], TuiRangeModule);
return TuiRangeModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiRangeComponent, TuiRangeModule };
//# sourceMappingURL=taiga-ui-kit-components-range.js.map