@taiga-ui/kit
Version:
Taiga UI Angular main components kit
67 lines • 13.3 kB
JavaScript
var TuiSliderComponent_1;
import { __decorate, __param } from "tslib";
import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Inject, Optional, Self, } from '@angular/core';
import { NgControl } from '@angular/forms';
import { isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, } from '@taiga-ui/cdk';
import { AbstractTuiSlider, SLIDER_KEYBOARD_STEP } from '@taiga-ui/kit/abstract';
import { TUI_FROM_TO_TEXTS } from '@taiga-ui/kit/tokens';
import { Observable } from 'rxjs';
// @dynamic
let TuiSliderComponent = TuiSliderComponent_1 = class TuiSliderComponent extends AbstractTuiSlider {
constructor(control, changeDetectorRef, documentRef, fromToTexts$) {
super(control, changeDetectorRef, documentRef, fromToTexts$);
}
get nativeFocusableElement() {
return this.dotRight ? this.dotRight.nativeElement : null;
}
get focused() {
return isNativeFocused(this.nativeFocusableElement);
}
get left() {
return 0;
}
get right() {
return 100 - 100 * this.getFractionFromValue(this.value);
}
getFallbackValue() {
return 0;
}
processStep(increment) {
const fraction = this.getFractionFromValue(this.value);
const step = this.discrete ? 1 / this.steps : SLIDER_KEYBOARD_STEP;
const value = this.getValueFromFraction(increment ? fraction + step : fraction - step);
this.processValue(value);
}
processValue(value) {
this.updateValue(value);
}
};
TuiSliderComponent.ctorParameters = () => [
{ 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: Observable, decorators: [{ type: Inject, args: [TUI_FROM_TO_TEXTS,] }] }
];
TuiSliderComponent = TuiSliderComponent_1 = __decorate([
Component({
selector: 'tui-slider',
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(() => TuiSliderComponent_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)}", ".dot:first-child{display:none}.wrapper{border-left:none}.bar,.segments{margin-left:0}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(DOCUMENT)),
__param(3, Inject(TUI_FROM_TO_TEXTS))
], TuiSliderComponent);
export { TuiSliderComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9zbGlkZXIvIiwic291cmNlcyI6WyJzbGlkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3pDLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsTUFBTSxFQUNOLFFBQVEsRUFDUixJQUFJLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ3pDLE9BQU8sRUFDSCxlQUFlLEVBQ2YsMkJBQTJCLEdBRzlCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxpQkFBaUIsRUFBRSxvQkFBb0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBQy9FLE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLHNCQUFzQixDQUFDO0FBQ3ZELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFaEMsV0FBVztBQWFYLElBQWEsa0JBQWtCLDBCQUEvQixNQUFhLGtCQUNULFNBQVEsaUJBQXlCO0lBRWpDLFlBSUksT0FBeUIsRUFDRSxpQkFBb0MsRUFDN0MsV0FBcUIsRUFDWixZQUEwQztRQUVyRSxLQUFLLENBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxZQUFZLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRUQsSUFBSSxzQkFBc0I7UUFDdEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQzlELENBQUM7SUFFRCxJQUFJLE9BQU87UUFDUCxPQUFPLGVBQWUsQ0FBQyxJQUFJLENBQUMsc0JBQXNCLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRUQsSUFBSSxJQUFJO1FBQ0osT0FBTyxDQUFDLENBQUM7SUFDYixDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ0wsT0FBTyxHQUFHLEdBQUcsR0FBRyxHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0QsQ0FBQztJQUVTLGdCQUFnQjtRQUN0QixPQUFPLENBQUMsQ0FBQztJQUNiLENBQUM7SUFFUyxXQUFXLENBQUMsU0FBa0I7UUFDcEMsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN2RCxNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUM7UUFDbkUsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUNuQyxTQUFTLENBQUMsQ0FBQyxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQ2hELENBQUM7UUFFRixJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzdCLENBQUM7SUFFUyxZQUFZLENBQUMsS0FBYTtRQUNoQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzVCLENBQUM7Q0FDSixDQUFBOztZQXpDZ0IsU0FBUyx1QkFIakIsUUFBUSxZQUNSLElBQUksWUFDSixNQUFNLFNBQUMsU0FBUztZQUU2QixpQkFBaUIsdUJBQTlELE1BQU0sU0FBQyxpQkFBaUI7WUFDTSxRQUFRLHVCQUF0QyxNQUFNLFNBQUMsUUFBUTtZQUN5QixVQUFVLHVCQUFsRCxNQUFNLFNBQUMsaUJBQWlCOztBQVZwQixrQkFBa0I7SUFaOUIsU0FBUyxDQUFDO1FBQ1AsUUFBUSxFQUFFLFlBQVk7UUFDdEIsaTJFQUFnRTtRQUVoRSxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtRQUMvQyxTQUFTLEVBQUU7WUFDUDtnQkFDSSxPQUFPLEVBQUUsMkJBQTJCO2dCQUNwQyxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFrQixDQUFDO2FBQ3BEO1NBQ0o7O0tBQ0osQ0FBQztJQUtPLFdBQUEsUUFBUSxFQUFFLENBQUE7SUFDVixXQUFBLElBQUksRUFBRSxDQUFBO0lBQ04sV0FBQSxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUE7SUFFakIsV0FBQSxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQTtJQUN6QixXQUFBLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQTtJQUNoQixXQUFBLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFBO0dBVnJCLGtCQUFrQixDQWdEOUI7U0FoRFksa0JBQWtCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtET0NVTUVOVH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgQ29tcG9uZW50LFxuICAgIGZvcndhcmRSZWYsXG4gICAgSW5qZWN0LFxuICAgIE9wdGlvbmFsLFxuICAgIFNlbGYsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOZ0NvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7XG4gICAgaXNOYXRpdmVGb2N1c2VkLFxuICAgIFRVSV9GT0NVU0FCTEVfSVRFTV9BQ0NFU1NPUixcbiAgICBUdWlGb2N1c2FibGVFbGVtZW50QWNjZXNzb3IsXG4gICAgVHVpTmF0aXZlRm9jdXNhYmxlRWxlbWVudCxcbn0gZnJvbSAnQHRhaWdhLXVpL2Nkayc7XG5pbXBvcnQge0Fic3RyYWN0VHVpU2xpZGVyLCBTTElERVJfS0VZQk9BUkRfU1RFUH0gZnJvbSAnQHRhaWdhLXVpL2tpdC9hYnN0cmFjdCc7XG5pbXBvcnQge1RVSV9GUk9NX1RPX1RFWFRTfSBmcm9tICdAdGFpZ2EtdWkva2l0L3Rva2Vucyc7XG5pbXBvcnQge09ic2VydmFibGV9IGZyb20gJ3J4anMnO1xuXG4vLyBAZHluYW1pY1xuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0dWktc2xpZGVyJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4uLy4uL2Fic3RyYWN0L3NsaWRlci9zbGlkZXIuY29tbW9uLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuLi8uLi9hYnN0cmFjdC9zbGlkZXIvc2xpZGVyLmNvbW1vbi5zdHlsZS5sZXNzJywgJy4vc2xpZGVyLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAge1xuICAgICAgICAgICAgcHJvdmlkZTogVFVJX0ZPQ1VTQUJMRV9JVEVNX0FDQ0VTU09SLFxuICAgICAgICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gVHVpU2xpZGVyQ29tcG9uZW50KSxcbiAgICAgICAgfSxcbiAgICBdLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlTbGlkZXJDb21wb25lbnRcbiAgICBleHRlbmRzIEFic3RyYWN0VHVpU2xpZGVyPG51bWJlcj5cbiAgICBpbXBsZW1lbnRzIFR1aUZvY3VzYWJsZUVsZW1lbnRBY2Nlc3NvciB7XG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIEBPcHRpb25hbCgpXG4gICAgICAgIEBTZWxmKClcbiAgICAgICAgQEluamVjdChOZ0NvbnRyb2wpXG4gICAgICAgIGNvbnRyb2w6IE5nQ29udHJvbCB8IG51bGwsXG4gICAgICAgIEBJbmplY3QoQ2hhbmdlRGV0ZWN0b3JSZWYpIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICAgICAgQEluamVjdChET0NVTUVOVCkgZG9jdW1lbnRSZWY6IERvY3VtZW50LFxuICAgICAgICBASW5qZWN0KFRVSV9GUk9NX1RPX1RFWFRTKSBmcm9tVG9UZXh0cyQ6IE9ic2VydmFibGU8W3N0cmluZywgc3RyaW5nXT4sXG4gICAgKSB7XG4gICAgICAgIHN1cGVyKGNvbnRyb2wsIGNoYW5nZURldGVjdG9yUmVmLCBkb2N1bWVudFJlZiwgZnJvbVRvVGV4dHMkKTtcbiAgICB9XG5cbiAgICBnZXQgbmF0aXZlRm9jdXNhYmxlRWxlbWVudCgpOiBUdWlOYXRpdmVGb2N1c2FibGVFbGVtZW50IHwgbnVsbCB7XG4gICAgICAgIHJldHVybiB0aGlzLmRvdFJpZ2h0ID8gdGhpcy5kb3RSaWdodC5uYXRpdmVFbGVtZW50IDogbnVsbDtcbiAgICB9XG5cbiAgICBnZXQgZm9jdXNlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIGlzTmF0aXZlRm9jdXNlZCh0aGlzLm5hdGl2ZUZvY3VzYWJsZUVsZW1lbnQpO1xuICAgIH1cblxuICAgIGdldCBsZWZ0KCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiAwO1xuICAgIH1cblxuICAgIGdldCByaWdodCgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gMTAwIC0gMTAwICogdGhpcy5nZXRGcmFjdGlvbkZyb21WYWx1ZSh0aGlzLnZhbHVlKTtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0RmFsbGJhY2tWYWx1ZSgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gMDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgcHJvY2Vzc1N0ZXAoaW5jcmVtZW50OiBib29sZWFuKSB7XG4gICAgICAgIGNvbnN0IGZyYWN0aW9uID0gdGhpcy5nZXRGcmFjdGlvbkZyb21WYWx1ZSh0aGlzLnZhbHVlKTtcbiAgICAgICAgY29uc3Qgc3RlcCA9IHRoaXMuZGlzY3JldGUgPyAxIC8gdGhpcy5zdGVwcyA6IFNMSURFUl9LRVlCT0FSRF9TVEVQO1xuICAgICAgICBjb25zdCB2YWx1ZSA9IHRoaXMuZ2V0VmFsdWVGcm9tRnJhY3Rpb24oXG4gICAgICAgICAgICBpbmNyZW1lbnQgPyBmcmFjdGlvbiArIHN0ZXAgOiBmcmFjdGlvbiAtIHN0ZXAsXG4gICAgICAgICk7XG5cbiAgICAgICAgdGhpcy5wcm9jZXNzVmFsdWUodmFsdWUpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBwcm9jZXNzVmFsdWUodmFsdWU6IG51bWJlcikge1xuICAgICAgICB0aGlzLnVwZGF0ZVZhbHVlKHZhbHVlKTtcbiAgICB9XG59XG4iXX0=