@taiga-ui/kit
Version:
Taiga UI Angular main components kit
440 lines (435 loc) • 16.5 kB
JavaScript
import { __extends, __decorate, __param } from 'tslib';
import { Input, HostBinding, Directive, ChangeDetectorRef, Inject, ViewChild } from '@angular/core';
import { clamp, round, tuiDefaultProp, AbstractTuiControl, typedFromEvent, setNativeFocused, quantize } from '@taiga-ui/cdk';
import { tuiCreateNumberMask, tuiCreateAutoCorrectedNumberPipe, maskedNumberStringToNumber } from '@taiga-ui/core';
import { TUI_FLOATING_PRECISION } from '@taiga-ui/kit/constants';
import { NgControl } from '@angular/forms';
import { TUI_FROM_TO_TEXTS } from '@taiga-ui/kit/tokens';
import { Subject, race, Observable } from 'rxjs';
import { map, switchMap, takeUntil } from 'rxjs/operators';
function quantumAssertion(quantum) {
return quantum > 0;
}
/**
* @internal
*/
var AbstractTuiInputSlider = /** @class */ (function (_super) {
__extends(AbstractTuiInputSlider, _super);
function AbstractTuiInputSlider() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.min = 0;
_this.max = Infinity;
_this.minLabel = '';
_this.maxLabel = '';
_this.pluralize = null;
_this.segmentsPluralize = null;
_this.segments = 0;
_this.steps = 0;
_this.quantum = 1;
_this.keySteps = null;
_this.size = 'l';
_this.mask = function (quantum, min) { return ({
mask: tuiCreateNumberMask({
allowNegative: min < 0,
allowDecimal: !Number.isInteger(quantum),
}),
pipe: tuiCreateAutoCorrectedNumberPipe(),
guide: false,
}); };
return _this;
}
Object.defineProperty(AbstractTuiInputSlider.prototype, "segmented", {
get: function () {
return this.segments > 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiInputSlider.prototype, "hasPlaceholder", {
get: function () {
return this.size === 'l';
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiInputSlider.prototype, "inputMode", {
get: function () {
return Number.isInteger(this.quantum)
? "numeric" /* Numeric */
: "decimal" /* Decimal */;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiInputSlider.prototype, "length", {
get: function () {
return this.max - this.min;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiInputSlider.prototype, "computedSteps", {
get: function () {
return this.steps || this.length / this.quantum;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiInputSlider.prototype, "step", {
get: function () {
return this.length / this.computedSteps;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiInputSlider.prototype, "hostMode", {
get: function () {
return this.modeDirective && this.modeDirective.mode;
},
enumerable: true,
configurable: true
});
AbstractTuiInputSlider.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
AbstractTuiInputSlider.prototype.isPluralized = function (pluralize) {
return pluralize !== null && pluralize.length === 3;
};
AbstractTuiInputSlider.prototype.valueGuard = function (value) {
return this.quantum
? clamp(round(Math.round(value / this.quantum) * this.quantum, TUI_FLOATING_PRECISION), this.min, this.max)
: clamp(value, this.min, this.max);
};
AbstractTuiInputSlider.prototype.capInputValue = function (value, max) {
if (max === void 0) { max = this.max; }
var capped = Math.min(maskedNumberStringToNumber(value), max);
if (this.min < 0 && capped < this.min) {
return this.min;
}
return isNaN(capped) || capped < this.min ? null : capped;
};
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "max", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "minLabel", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "maxLabel", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "pluralize", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "segmentsPluralize", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "segments", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "steps", void 0);
__decorate([
Input(),
tuiDefaultProp(quantumAssertion, 'Quantum must be positive')
], AbstractTuiInputSlider.prototype, "quantum", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiInputSlider.prototype, "keySteps", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-size')
], AbstractTuiInputSlider.prototype, "size", void 0);
__decorate([
HostBinding('class._segmented')
], AbstractTuiInputSlider.prototype, "segmented", null);
__decorate([
HostBinding('attr.data-mode')
], AbstractTuiInputSlider.prototype, "hostMode", null);
AbstractTuiInputSlider = __decorate([
Directive()
], AbstractTuiInputSlider);
return AbstractTuiInputSlider;
}(AbstractTuiControl));
var SLIDER_KEYBOARD_STEP = 0.05;
var DOT_WIDTH = {
s: 8,
m: 16,
};
/**
* @awful TODO: refactor
* @internal
* @dynamic
*/
var AbstractTuiSlider = /** @class */ (function (_super) {
__extends(AbstractTuiSlider, _super);
function AbstractTuiSlider(ngControl, changeDetectorRef, documentRef, fromToTexts$) {
var _this = _super.call(this, ngControl, changeDetectorRef) || this;
_this.documentRef = documentRef;
_this.fromToTexts$ = fromToTexts$;
_this.min = 0;
_this.max = Infinity;
_this.segments = 0;
_this.steps = 0;
_this.pluralize = null;
_this.size = 'm';
_this.keySteps = null;
_this.focusVisibleLeft = false;
_this.focusVisibleRight = false;
// @bad TODO: handle pointer events instead of mouse and touch events
_this.pointerDown$ = new Subject();
return _this;
}
Object.defineProperty(AbstractTuiSlider.prototype, "segmented", {
get: function () {
return this.segments > 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiSlider.prototype, "discrete", {
get: function () {
return this.steps > 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiSlider.prototype, "length", {
get: function () {
return this.max - this.min;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiSlider.prototype, "isLeftFocusable", {
get: function () {
return !this.disabled && this.focusable && this.right !== 100;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractTuiSlider.prototype, "isRightFocusable", {
get: function () {
return !this.disabled && this.focusable && this.left !== 100;
},
enumerable: true,
configurable: true
});
AbstractTuiSlider.prototype.ngOnInit = function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
var mouseMoves$ = typedFromEvent(this.documentRef, 'mousemove');
var mouseUps$ = typedFromEvent(this.documentRef, 'mouseup');
var touchMoves$ = typedFromEvent(this.documentRef, 'touchmove');
var touchEnds$ = typedFromEvent(this.documentRef, 'touchend');
var isPointerDownRight;
this.pointerDown$
.pipe(map(function (event) {
var rect = event.currentTarget.getBoundingClientRect();
var clientX = event instanceof MouseEvent
? event.clientX
: event.touches[0].clientX;
var fraction = clamp(_this.getFractionFromEvents(rect, clientX), 0, 1);
var deltaLeft = fraction * 100 - _this.left;
var deltaRight = fraction * 100 - 100 + _this.right;
isPointerDownRight =
Math.abs(deltaLeft) > Math.abs(deltaRight) ||
deltaRight > 0 ||
(_this.left === 0 && _this.right === 100);
var calibratedFraction = clamp(_this.getCalibratedFractionFromEvents(rect, clientX, isPointerDownRight), 0, 1);
var value = _this.getValueFromFraction(_this.fractionGuard(calibratedFraction));
_this.processValue(value, isPointerDownRight);
_this.processFocus(isPointerDownRight);
return rect;
}), switchMap(function (rect) {
return race([touchMoves$, mouseMoves$]).pipe(map(function (event) {
return _this.getCalibratedFractionFromEvents(rect, event instanceof MouseEvent
? event.clientX
: event.touches[0].clientX, isPointerDownRight);
}), takeUntil(race([mouseUps$, touchEnds$])));
}), map(function (fraction) { return _this.fractionGuard(fraction); }))
.subscribe(function (fraction) {
_this.processValue(_this.getValueFromFraction(fraction), isPointerDownRight);
});
};
AbstractTuiSlider.prototype.ngOnDestroy = function () {
_super.prototype.ngOnDestroy.call(this);
this.pointerDown$.complete();
};
AbstractTuiSlider.prototype.onMouseDown = function (event) {
if (this.disabled) {
return;
}
event.preventDefault();
this.pointerDown$.next(event);
};
AbstractTuiSlider.prototype.onTouchStart = function (event) {
if (this.disabled) {
return;
}
event.preventDefault();
this.pointerDown$.next(event);
};
AbstractTuiSlider.prototype.isPluralized = function (pluralize) {
return pluralize !== null && pluralize.length === 3;
};
AbstractTuiSlider.prototype.decrement = function (right) {
this.processStep(false, right);
};
AbstractTuiSlider.prototype.increment = function (right) {
this.processStep(true, right);
};
AbstractTuiSlider.prototype.getSegmentLabel = function (segment) {
return round(this.getValueFromFraction(segment / this.segments), 2);
};
AbstractTuiSlider.prototype.getSegmentPrefix = function (segment, texts) {
if (this.segments !== 1) {
return '';
}
if (segment === 0) {
return texts[0] + " ";
}
return texts[1] + " ";
};
AbstractTuiSlider.prototype.onActiveZone = function (active) {
this.updateFocused(active);
};
AbstractTuiSlider.prototype.onLeftFocusVisible = function (focusVisible) {
this.focusVisibleLeft = focusVisible;
};
AbstractTuiSlider.prototype.onRightFocusVisible = function (focusVisible) {
this.focusVisibleRight = focusVisible;
};
AbstractTuiSlider.prototype.getFractionFromValue = function (value) {
var fraction = (value - this.min) / this.length;
return this.keySteps !== null
? this.fractionValueKeyStepConverter(value, false)
: clamp(Number.isFinite(fraction) ? fraction : 1, 0, 1);
};
AbstractTuiSlider.prototype.getValueFromFraction = function (fraction) {
return this.keySteps !== null
? this.fractionValueKeyStepConverter(fraction, true)
: round(this.fractionGuard(fraction) * this.length + this.min, TUI_FLOATING_PRECISION);
};
AbstractTuiSlider.prototype.getCalibratedFractionFromEvents = function (rect, clientX, _) {
return this.getFractionFromEvents(rect, clientX);
};
AbstractTuiSlider.prototype.processFocus = function (right) {
if (!this.focusable || !this.dotRight || !this.dotLeft) {
return;
}
if (right) {
setNativeFocused(this.dotRight.nativeElement);
}
else {
setNativeFocused(this.dotLeft.nativeElement);
}
};
/**
* Function for converting the fullness of the slider to a value and vice versa
* taking into account the steps of linear dependence.
*
* @param value passed value
* @param isFraction translation is carried out from fullness to value
*/
AbstractTuiSlider.prototype.fractionValueKeyStepConverter = function (value, isFraction) {
var steps = [[0, this.min]].concat(this.keySteps, [
[100, this.max],
]);
var prevFraction = 0;
var nextFraction = 100;
var prevValue = this.min;
var nextValue = this.max;
for (var i = 1; i < steps.length; i++) {
if ((isFraction && steps[i][0] / 100 > value) ||
(!isFraction && steps[i][1] > value)) {
prevFraction = steps[i - 1][0] || 0;
nextFraction = steps[i][0];
prevValue = steps[i - 1][1];
nextValue = steps[i][1];
break;
}
}
var deltaFraction = nextFraction - prevFraction;
var deltaValue = nextValue - prevValue;
return isFraction
? round(((value * 100 - prevFraction) / deltaFraction) * deltaValue + prevValue, TUI_FLOATING_PRECISION)
: clamp(((value - prevValue) / deltaValue) * deltaFraction + prevFraction, 0, 100) / 100;
};
AbstractTuiSlider.prototype.fractionGuard = function (fraction) {
return this.discrete
? clamp(quantize(fraction, 1 / this.steps), 0, 1)
: clamp(fraction, 0, 1);
};
AbstractTuiSlider.prototype.getFractionFromEvents = function (rect, clientX) {
var value = clientX - rect.left - DOT_WIDTH[this.size] / 2;
var total = rect.width - DOT_WIDTH[this.size];
return round(value / total, TUI_FLOATING_PRECISION);
};
AbstractTuiSlider.ctorParameters = function () { return [
{ type: NgControl },
{ type: ChangeDetectorRef },
{ type: Document },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_FROM_TO_TEXTS,] }] }
]; };
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiSlider.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiSlider.prototype, "max", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiSlider.prototype, "segments", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiSlider.prototype, "steps", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiSlider.prototype, "pluralize", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-size'),
tuiDefaultProp()
], AbstractTuiSlider.prototype, "size", void 0);
__decorate([
Input(),
tuiDefaultProp()
], AbstractTuiSlider.prototype, "keySteps", void 0);
__decorate([
ViewChild('dotLeft')
], AbstractTuiSlider.prototype, "dotLeft", void 0);
__decorate([
ViewChild('dotRight')
], AbstractTuiSlider.prototype, "dotRight", void 0);
__decorate([
HostBinding('class._segmented')
], AbstractTuiSlider.prototype, "segmented", null);
AbstractTuiSlider = __decorate([
Directive(),
__param(3, Inject(TUI_FROM_TO_TEXTS))
], AbstractTuiSlider);
return AbstractTuiSlider;
}(AbstractTuiControl));
/**
* Generated bundle index. Do not edit.
*/
export { AbstractTuiInputSlider, AbstractTuiSlider, DOT_WIDTH, SLIDER_KEYBOARD_STEP, quantumAssertion };
//# sourceMappingURL=taiga-ui-kit-abstract.js.map