@taiga-ui/kit
Version:
Taiga UI Angular main components kit
86 lines • 14.4 kB
JavaScript
import { __decorate, __extends, __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
var TuiSliderComponent = /** @class */ (function (_super) {
__extends(TuiSliderComponent, _super);
function TuiSliderComponent(control, changeDetectorRef, documentRef, fromToTexts$) {
return _super.call(this, control, changeDetectorRef, documentRef, fromToTexts$) || this;
}
TuiSliderComponent_1 = TuiSliderComponent;
Object.defineProperty(TuiSliderComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.dotRight ? this.dotRight.nativeElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiSliderComponent.prototype, "focused", {
get: function () {
return isNativeFocused(this.nativeFocusableElement);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiSliderComponent.prototype, "left", {
get: function () {
return 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiSliderComponent.prototype, "right", {
get: function () {
return 100 - 100 * this.getFractionFromValue(this.value);
},
enumerable: true,
configurable: true
});
TuiSliderComponent.prototype.getFallbackValue = function () {
return 0;
};
TuiSliderComponent.prototype.processStep = function (increment) {
var fraction = this.getFractionFromValue(this.value);
var step = this.discrete ? 1 / this.steps : SLIDER_KEYBOARD_STEP;
var value = this.getValueFromFraction(increment ? fraction + step : fraction - step);
this.processValue(value);
};
TuiSliderComponent.prototype.processValue = function (value) {
this.updateValue(value);
};
var TuiSliderComponent_1;
TuiSliderComponent.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: 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(function () { return 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);
return TuiSliderComponent;
}(AbstractTuiSlider));
export { TuiSliderComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9zbGlkZXIvIiwic291cmNlcyI6WyJzbGlkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDekMsT0FBTyxFQUNILHVCQUF1QixFQUN2QixpQkFBaUIsRUFDakIsU0FBUyxFQUNULFVBQVUsRUFDVixNQUFNLEVBQ04sUUFBUSxFQUNSLElBQUksR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDekMsT0FBTyxFQUNILGVBQWUsRUFDZiwyQkFBMkIsR0FHOUIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGlCQUFpQixFQUFFLG9CQUFvQixFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFDL0UsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFDdkQsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUVoQyxXQUFXO0FBYVg7SUFDWSxzQ0FBeUI7SUFFakMsNEJBSUksT0FBeUIsRUFDRSxpQkFBb0MsRUFDN0MsV0FBcUIsRUFDWixZQUEwQztlQUVyRSxrQkFBTSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsV0FBVyxFQUFFLFlBQVksQ0FBQztJQUNoRSxDQUFDOzJCQWJRLGtCQUFrQjtJQWUzQixzQkFBSSxzREFBc0I7YUFBMUI7WUFDSSxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDOUQsQ0FBQzs7O09BQUE7SUFFRCxzQkFBSSx1Q0FBTzthQUFYO1lBQ0ksT0FBTyxlQUFlLENBQUMsSUFBSSxDQUFDLHNCQUFzQixDQUFDLENBQUM7UUFDeEQsQ0FBQzs7O09BQUE7SUFFRCxzQkFBSSxvQ0FBSTthQUFSO1lBQ0ksT0FBTyxDQUFDLENBQUM7UUFDYixDQUFDOzs7T0FBQTtJQUVELHNCQUFJLHFDQUFLO2FBQVQ7WUFDSSxPQUFPLEdBQUcsR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3RCxDQUFDOzs7T0FBQTtJQUVTLDZDQUFnQixHQUExQjtRQUNJLE9BQU8sQ0FBQyxDQUFDO0lBQ2IsQ0FBQztJQUVTLHdDQUFXLEdBQXJCLFVBQXNCLFNBQWtCO1FBQ3BDLElBQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkQsSUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLG9CQUFvQixDQUFDO1FBQ25FLElBQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxvQkFBb0IsQ0FDbkMsU0FBUyxDQUFDLENBQUMsQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUNoRCxDQUFDO1FBRUYsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM3QixDQUFDO0lBRVMseUNBQVksR0FBdEIsVUFBdUIsS0FBYTtRQUNoQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzVCLENBQUM7OztnQkF4Q1ksU0FBUyx1QkFIakIsUUFBUSxZQUNSLElBQUksWUFDSixNQUFNLFNBQUMsU0FBUztnQkFFNkIsaUJBQWlCLHVCQUE5RCxNQUFNLFNBQUMsaUJBQWlCO2dCQUNNLFFBQVEsdUJBQXRDLE1BQU0sU0FBQyxRQUFRO2dCQUN5QixVQUFVLHVCQUFsRCxNQUFNLFNBQUMsaUJBQWlCOztJQVZwQixrQkFBa0I7UUFaOUIsU0FBUyxDQUFDO1lBQ1AsUUFBUSxFQUFFLFlBQVk7WUFDdEIsaTJFQUFnRTtZQUVoRSxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtZQUMvQyxTQUFTLEVBQUU7Z0JBQ1A7b0JBQ0ksT0FBTyxFQUFFLDJCQUEyQjtvQkFDcEMsV0FBVyxFQUFFLFVBQVUsQ0FBQyxjQUFNLE9BQUEsb0JBQWtCLEVBQWxCLENBQWtCLENBQUM7aUJBQ3BEO2FBQ0o7O1NBQ0osQ0FBQztRQUtPLFdBQUEsUUFBUSxFQUFFLENBQUE7UUFDVixXQUFBLElBQUksRUFBRSxDQUFBO1FBQ04sV0FBQSxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUE7UUFFakIsV0FBQSxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQTtRQUN6QixXQUFBLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQTtRQUNoQixXQUFBLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFBO09BVnJCLGtCQUFrQixDQWdEOUI7SUFBRCx5QkFBQztDQUFBLEFBaERELENBQ1ksaUJBQWlCLEdBK0M1QjtTQWhEWSxrQkFBa0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0RPQ1VNRU5UfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgZm9yd2FyZFJlZixcbiAgICBJbmplY3QsXG4gICAgT3B0aW9uYWwsXG4gICAgU2VsZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge05nQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtcbiAgICBpc05hdGl2ZUZvY3VzZWQsXG4gICAgVFVJX0ZPQ1VTQUJMRV9JVEVNX0FDQ0VTU09SLFxuICAgIFR1aUZvY3VzYWJsZUVsZW1lbnRBY2Nlc3NvcixcbiAgICBUdWlOYXRpdmVGb2N1c2FibGVFbGVtZW50LFxufSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcbmltcG9ydCB7QWJzdHJhY3RUdWlTbGlkZXIsIFNMSURFUl9LRVlCT0FSRF9TVEVQfSBmcm9tICdAdGFpZ2EtdWkva2l0L2Fic3RyYWN0JztcbmltcG9ydCB7VFVJX0ZST01fVE9fVEVYVFN9IGZyb20gJ0B0YWlnYS11aS9raXQvdG9rZW5zJztcbmltcG9ydCB7T2JzZXJ2YWJsZX0gZnJvbSAncnhqcyc7XG5cbi8vIEBkeW5hbWljXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3R1aS1zbGlkZXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi4vLi4vYWJzdHJhY3Qvc2xpZGVyL3NsaWRlci5jb21tb24udGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4uLy4uL2Fic3RyYWN0L3NsaWRlci9zbGlkZXIuY29tbW9uLnN0eWxlLmxlc3MnLCAnLi9zbGlkZXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW1xuICAgICAgICB7XG4gICAgICAgICAgICBwcm92aWRlOiBUVUlfRk9DVVNBQkxFX0lURU1fQUNDRVNTT1IsXG4gICAgICAgICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBUdWlTbGlkZXJDb21wb25lbnQpLFxuICAgICAgICB9LFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVNsaWRlckNvbXBvbmVudFxuICAgIGV4dGVuZHMgQWJzdHJhY3RUdWlTbGlkZXI8bnVtYmVyPlxuICAgIGltcGxlbWVudHMgVHVpRm9jdXNhYmxlRWxlbWVudEFjY2Vzc29yIHtcbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQE9wdGlvbmFsKClcbiAgICAgICAgQFNlbGYoKVxuICAgICAgICBASW5qZWN0KE5nQ29udHJvbClcbiAgICAgICAgY29udHJvbDogTmdDb250cm9sIHwgbnVsbCxcbiAgICAgICAgQEluamVjdChDaGFuZ2VEZXRlY3RvclJlZikgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmLFxuICAgICAgICBASW5qZWN0KERPQ1VNRU5UKSBkb2N1bWVudFJlZjogRG9jdW1lbnQsXG4gICAgICAgIEBJbmplY3QoVFVJX0ZST01fVE9fVEVYVFMpIGZyb21Ub1RleHRzJDogT2JzZXJ2YWJsZTxbc3RyaW5nLCBzdHJpbmddPixcbiAgICApIHtcbiAgICAgICAgc3VwZXIoY29udHJvbCwgY2hhbmdlRGV0ZWN0b3JSZWYsIGRvY3VtZW50UmVmLCBmcm9tVG9UZXh0cyQpO1xuICAgIH1cblxuICAgIGdldCBuYXRpdmVGb2N1c2FibGVFbGVtZW50KCk6IFR1aU5hdGl2ZUZvY3VzYWJsZUVsZW1lbnQgfCBudWxsIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuZG90UmlnaHQgPyB0aGlzLmRvdFJpZ2h0Lm5hdGl2ZUVsZW1lbnQgOiBudWxsO1xuICAgIH1cblxuICAgIGdldCBmb2N1c2VkKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gaXNOYXRpdmVGb2N1c2VkKHRoaXMubmF0aXZlRm9jdXNhYmxlRWxlbWVudCk7XG4gICAgfVxuXG4gICAgZ2V0IGxlZnQoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIDA7XG4gICAgfVxuXG4gICAgZ2V0IHJpZ2h0KCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiAxMDAgLSAxMDAgKiB0aGlzLmdldEZyYWN0aW9uRnJvbVZhbHVlKHRoaXMudmFsdWUpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXRGYWxsYmFja1ZhbHVlKCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiAwO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBwcm9jZXNzU3RlcChpbmNyZW1lbnQ6IGJvb2xlYW4pIHtcbiAgICAgICAgY29uc3QgZnJhY3Rpb24gPSB0aGlzLmdldEZyYWN0aW9uRnJvbVZhbHVlKHRoaXMudmFsdWUpO1xuICAgICAgICBjb25zdCBzdGVwID0gdGhpcy5kaXNjcmV0ZSA/IDEgLyB0aGlzLnN0ZXBzIDogU0xJREVSX0tFWUJPQVJEX1NURVA7XG4gICAgICAgIGNvbnN0IHZhbHVlID0gdGhpcy5nZXRWYWx1ZUZyb21GcmFjdGlvbihcbiAgICAgICAgICAgIGluY3JlbWVudCA/IGZyYWN0aW9uICsgc3RlcCA6IGZyYWN0aW9uIC0gc3RlcCxcbiAgICAgICAgKTtcblxuICAgICAgICB0aGlzLnByb2Nlc3NWYWx1ZSh2YWx1ZSk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIHByb2Nlc3NWYWx1ZSh2YWx1ZTogbnVtYmVyKSB7XG4gICAgICAgIHRoaXMudXBkYXRlVmFsdWUodmFsdWUpO1xuICAgIH1cbn1cbiJdfQ==