carbon-components-angular
Version:
Next generation components
686 lines (679 loc) • 25.7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, Component, Input, Output, HostBinding, ViewChildren, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from 'carbon-components-angular/utils';
import { UtilsModule } from 'carbon-components-angular/utils';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
/**
* Used to select from ranges of values. [See here](https://www.carbondesignsystem.com/components/slider/usage) for usage information.
*
* Get started with importing the module:
*
* ```typescript
* import { SliderModule } from 'carbon-components-angular';
* ```
*
* The simplest possible slider usage looks something like:
*
* ```html
* <cds-slider></cds-slider>
* ```
*
* That will render a slider without labels or alternative value input. Labels can be provided by
* elements with `[minLabel]` and `[maxLabel]` attributes, and an `input` (may use the `ibmInput` directive) can be supplied
* for use as an alternative value field.
*
* ex:
*
* ```html
* <!-- Full example -->
* <cds-slider>
* <span minLabel>0GB</span>
* <span maxLabel>100GB</span>
* <input/>
* </cds-slider>
*
* <!-- with just an input -->
* <cds-slider>
* <input/>
* </cds-slider>
*
* <!-- with just one label -->
* <cds-slider>
* <span maxLabel>Maximum</span>
* </cds-slider>
* ```
*
* Slider supports `NgModel` by default, as well as two way binding to the `value` input.
*
* [See demo](../../?path=/story/components-slider--advanced)
*/
class Slider {
constructor(elementRef, eventService, changeDetection) {
this.elementRef = elementRef;
this.eventService = eventService;
this.changeDetection = changeDetection;
/** The interval for our range */
this.step = 1;
/** Base ID for the slider. The min and max labels get IDs `${this.id}-bottom-range` and `${this.id}-top-range` respectively */
this.id = `slider-${Slider.count++}`;
/** Value used to "multiply" the `step` when using arrow keys to select values */
this.shiftMultiplier = 4;
/** Set to `true` for a loading slider */
this.skeleton = false;
/** Set to `true` for a slider without arrow key interactions. */
this.disableArrowKeys = false;
/** Emits every time a new value is selected */
this.valueChange = new EventEmitter();
this.hostClass = true;
this.labelId = `${this.id}-label`;
this.bottomRangeId = `${this.id}-bottom-range`;
this.topRangeId = `${this.id}-top-range`;
this.fractionComplete = 0;
this.isMouseDown = false;
this._min = 0;
this._max = 100;
this._value = [this.min];
this._previousValue = [this.min];
this._disabled = false;
this._readonly = false;
this._focusedThumbIndex = 0;
/** Send changes back to the model */
this.propagateChange = (_) => { };
/** Callback to notify the model when our input has been touched */
this.onTouched = () => { };
}
/** The lower bound of our range */
set min(v) {
if (!v) {
return;
}
this._min = v;
// force the component to update
this.value = this.value;
}
get min() {
return this._min;
}
/** The upper bound of our range */
set max(v) {
if (!v) {
return;
}
this._max = v;
// force the component to update
this.value = this.value;
}
get max() {
return this._max;
}
/** Set the initial value. Available for two way binding */
set value(v) {
if (!v) {
v = [this.min];
}
if (typeof v === "number" || typeof v === "string") {
v = [Number(v)];
}
if (v[0] < this.min) {
v[0] = this.min;
}
if (v[0] > this.max) {
v[0] = this.max;
}
if (this.isRange()) {
if (this._previousValue[0] !== v[0]) { // left moved
if (v[0] > v[1] - this.step) {
// stop the left handle if surpassing the right one
v[0] = v[1] - this.step;
}
else if (v[0] > this.max) {
v[0] = this.max;
}
else if (v[0] < this.min) {
v[0] = this.min;
}
}
if (this._previousValue[1] !== v[1]) { // right moved
if (v[1] > this.max) {
v[1] = this.max;
}
else if (v[1] < this._value[0] + this.step) {
// stop the right handle if surpassing the left one
v[1] = this._value[0] + this.step;
}
else if (v[1] < this.min) {
v[1] = this.min;
}
}
}
this._previousValue = [...this._value]; // store a copy, enable detection which handle moved
this._value = [...v]; // triggers change detection when ngModel value is an array (for range)
if (this.isRange() && this.filledTrack) {
this.updateTrackRangeWidth();
}
else if (this.filledTrack) {
this.filledTrack.nativeElement.style.transform = `translate(0%, -50%) ${this.scaleX(this.getFractionComplete(v[0]))}`;
}
if (this.inputs && this.inputs.length) {
this.inputs.forEach((input, index) => {
input.value = this._value[index].toString();
});
}
const valueToEmit = this.isRange() ? v : v[0];
this.propagateChange(valueToEmit);
this.valueChange.emit(valueToEmit);
}
get value() {
if (this.isRange()) {
return this._value;
}
return this._value[0];
}
/** Disables the range visually and functionally */
set disabled(v) {
this._disabled = v;
// for some reason `this.input` never exists here, so we have to query for it here too
const inputs = this.getInputs();
if (inputs && inputs.length > 0) {
inputs.forEach(input => input.disabled = v);
}
}
get disabled() {
return this._disabled;
}
/** Set to `true` for a readonly state. */
set readonly(v) {
this._readonly = v;
// for some reason `this.input` never exists here, so we have to query for it here too
const inputs = this.getInputs();
if (inputs && inputs.length > 0) {
inputs.forEach(input => input.readOnly = v);
}
}
get readonly() {
return this._readonly;
}
ngAfterViewInit() {
// bind mousemove and mouseup to the document so we don't have issues tracking the mouse
this.eventService.onDocument("mousemove", this.onMouseMove.bind(this));
this.eventService.onDocument("mouseup", this.onMouseUp.bind(this));
// apply any values we got from before the view initialized
this.changeDetection.detectChanges();
// TODO: ontouchstart/ontouchmove/ontouchend
// set up the optional input
this.inputs = this.getInputs();
if (this.inputs && this.inputs.length > 0) {
this.inputs.forEach((input, index) => {
input.type = "number";
input.classList.add("cds--slider-text-input");
input.classList.add("cds--text-input");
input.setAttribute("aria-labelledby", `${this.bottomRangeId} ${this.topRangeId}`);
input.value = index < this._value.length ? this._value[index].toString() : this.max.toString();
// bind events on our optional input
this.eventService.on(input, "change", event => this.onChange(event, index));
if (index === 0) {
this.eventService.on(input, "focus", this.onFocus.bind(this));
}
});
}
}
trackThumbsBy(index, item) {
return index;
}
/** Register a change propagation function for `ControlValueAccessor` */
registerOnChange(fn) {
this.propagateChange = fn;
}
/** Register a callback to notify when our input has been touched */
registerOnTouched(fn) {
this.onTouched = fn;
}
/** Receives a value from the model */
writeValue(v) {
this.value = v;
}
/**
* Returns the amount of "completeness" of a value as a fraction of the total track width
*/
getFractionComplete(value) {
if (!this.track) {
return 0;
}
const trackWidth = this.track.nativeElement.getBoundingClientRect().width;
return this.convertToPx(value) / trackWidth;
}
/** Helper function to return the CSS transform `scaleX` function */
scaleX(complete) {
return `scaleX(${complete})`;
}
/** Converts a given px value to a "real" value in our range */
convertToValue(pxAmount) {
// basic concept borrowed from carbon-components
// https://github.com/carbon-design-system/carbon/blob/43bf3abdc2f8bdaa38aa84e0f733adde1e1e8894/src/components/slider/slider.js#L147-L151
const range = this.max - this.min;
const trackWidth = this.track.nativeElement.getBoundingClientRect().width;
const unrounded = pxAmount / trackWidth;
const rounded = Math.round((range * unrounded) / this.step) * this.step;
return rounded + this.min;
}
/** Converts a given "real" value to a px value we can update the view with */
convertToPx(value) {
if (!this.track) {
return 0;
}
const trackWidth = this.track.nativeElement.getBoundingClientRect().width;
if (value >= this.max) {
return trackWidth;
}
if (value <= this.min) {
return 0;
}
// account for value shifting by subtracting min from value and max
return Math.round(trackWidth * ((value - this.min) / (this.max - this.min)));
}
/**
* Increments the value by the step value, or the step value multiplied by the `multiplier` argument.
*
* @argument multiplier Defaults to `1`, multiplied with the step value.
*/
incrementValue(multiplier = 1, index = 0) {
this._value[index] = this._value[index] + (this.step * multiplier);
this.value = this.value; // run the setter
}
/**
* Decrements the value by the step value, or the step value multiplied by the `multiplier` argument.
*
* @argument multiplier Defaults to `1`, multiplied with the step value.
*/
decrementValue(multiplier = 1, index = 0) {
this._value[index] = this._value[index] - (this.step * multiplier);
this.value = this.value; // run the setter
}
/**
* Determines if the slider is in range mode.
*/
isRange() {
return this._value.length > 1;
}
/**
* Range mode only.
* Updates the track width to span from the low thumb to the high thumb
*/
updateTrackRangeWidth() {
const fraction = this.getFractionComplete(this._value[0]);
const fraction2 = this.getFractionComplete(this._value[1]);
this.filledTrack.nativeElement.style.transform = `translate(${fraction * 100}%, -50%) ${this.scaleX(fraction2 - fraction)}`;
}
/** Change handler for the optional input */
onChange(event, index) {
this._value[index] = Number(event.target.value);
this.value = this.value;
}
/**
* Handles clicks on the slider, and setting the value to it's "real" equivalent.
* Will assign the value to the closest thumb if in range mode.
* */
onClick(event) {
if (this.disabled || this.readonly) {
return;
}
const trackLeft = this.track.nativeElement.getBoundingClientRect().left;
const trackValue = this.convertToValue(event.clientX - trackLeft);
if (this.isRange()) {
if (Math.abs(this._value[0] - trackValue) < Math.abs(this._value[1] - trackValue)) {
this._value[0] = trackValue;
}
else {
this._value[1] = trackValue;
}
}
else {
this._value[0] = trackValue;
}
this.value = this.value;
}
/** Focus handler for the optional input */
onFocus({ target }) {
target.select();
}
/** Mouse move handler. Responsible for updating the value and visual selection based on mouse movement */
onMouseMove(event) {
if (this.disabled || this.readonly || !this.isMouseDown) {
return;
}
const track = this.track.nativeElement.getBoundingClientRect();
let value;
if (event.clientX - track.left <= track.width
&& event.clientX - track.left >= 0) {
value = this.convertToValue(event.clientX - track.left);
}
// if the mouse is beyond the max, set the value to `max`
if (event.clientX - track.left > track.width) {
value = this.max;
}
// if the mouse is below the min, set the value to `min`
if (event.clientX - track.left < 0) {
value = this.min;
}
if (value !== undefined) {
this._value[this._focusedThumbIndex] = value;
this.value = this.value;
}
}
/**
* Enables the `onMouseMove` handler
*
* @param {boolean} thumb If true then `thumb` is clicked down, otherwise `thumb2` is clicked down.
*/
onMouseDown(event, index = 0) {
event.preventDefault();
if (this.disabled || this.readonly) {
return;
}
this._focusedThumbIndex = index;
this.thumbs.toArray()[index].nativeElement.focus();
this.isMouseDown = true;
}
/** Disables the `onMouseMove` handler */
onMouseUp() {
this.isMouseDown = false;
}
/**
* Calls `incrementValue` for ArrowRight and ArrowUp, `decrementValue` for ArrowLeft and ArrowDown.
*
* @param {boolean} thumb If true then `thumb` is pressed down, otherwise `thumb2` is pressed down.
*/
onKeyDown(event, index = 0) {
if (this.disableArrowKeys || this.readonly) {
return;
}
const multiplier = event.shiftKey ? this.shiftMultiplier : 1;
if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
this.decrementValue(multiplier, index);
this.thumbs.toArray()[index].nativeElement.focus();
event.preventDefault();
}
else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
this.incrementValue(multiplier, index);
this.thumbs.toArray()[index].nativeElement.focus();
event.preventDefault();
}
}
isTemplate(value) {
return value instanceof TemplateRef;
}
/** Get optional input fields */
getInputs() {
return this.elementRef.nativeElement.querySelectorAll("input:not([type=range])");
}
}
/** Used to generate unique IDs */
Slider.count = 0;
Slider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Slider, deps: [{ token: i0.ElementRef }, { token: i1.EventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
Slider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Slider, selector: "cds-slider, ibm-slider", inputs: { min: "min", max: "max", step: "step", value: "value", id: "id", shiftMultiplier: "shiftMultiplier", skeleton: "skeleton", label: "label", disableArrowKeys: "disableArrowKeys", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.cds--form-item": "this.hostClass" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Slider,
multi: true
}
], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true }, { propertyName: "filledTrack", first: true, predicate: ["filledTrack"], descendants: true }, { propertyName: "range", first: true, predicate: ["range"], descendants: true }, { propertyName: "thumbs", predicate: ["thumbs"], descendants: true }], ngImport: i0, template: `
<ng-container *ngIf="!skeleton; else skeletonTemplate">
<label
*ngIf="label"
[for]="id"
[id]="labelId"
class="cds--label"
[ngClass]="{'cds--label--disabled': disabled}">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</label>
<div
class="cds--slider-container"
[ngClass]="{ 'cds--slider-container--readonly': readonly }">
<label [id]="bottomRangeId" class="cds--slider__range-label">
<ng-content select="[minLabel]"></ng-content>
</label>
<div
class="cds--slider"
(click)="onClick($event)"
[ngClass]="{
'cds--slider--disabled': disabled,
'cds--slider--readonly': readonly
}">
<ng-container *ngIf="!isRange()">
<div class="cds--slider__thumb-wrapper"
[ngStyle]="{insetInlineStart: getFractionComplete(value) * 100 + '%'}">
<div
#thumbs
role="slider"
[id]="id"
[attr.aria-labelledby]="labelId"
class="cds--slider__thumb"
tabindex="0"
(mousedown)="onMouseDown($event)"
(keydown)="onKeyDown($event)">
</div>
</div>
</ng-container>
<ng-container *ngIf="isRange()">
<div class="cds--slider__thumb-wrapper"
[ngStyle]="{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}"
*ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy">
<div
#thumbs
role="slider"
[id]="id + (i > 0 ? '-' + i : '')"
[attr.aria-labelledby]="labelId"
class="cds--slider__thumb"
tabindex="0"
(mousedown)="onMouseDown($event, i)"
(keydown)="onKeyDown($event, i)">
</div>
</div>
</ng-container>
<div
#track
class="cds--slider__track">
</div>
<div
#filledTrack
class="cds--slider__filled-track">
</div>
<input
#range
aria-label="slider"
class="cds--slider__input"
type="range"
[step]="step"
[min]="min"
[max]="max"
[value]="value.toString()">
</div>
<label [id]="topRangeId" class="cds--slider__range-label">
<ng-content select="[maxLabel]"></ng-content>
</label>
<ng-content select="input"></ng-content>
</div>
</ng-container>
<ng-template #skeletonTemplate>
<label *ngIf="label" class="cds--label cds--skeleton"></label>
<div class="cds--slider-container cds--skeleton">
<span class="cds--slider__range-label"></span>
<div class="cds--slider">
<div class="cds--slider__thumb"></div>
<div class="cds--slider__track"></div>
<div class="cds--slider__filled-track"></div>
</div>
<span class="cds--slider__range-label"></span>
</div>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Slider, decorators: [{
type: Component,
args: [{
selector: "cds-slider, ibm-slider",
template: `
<ng-container *ngIf="!skeleton; else skeletonTemplate">
<label
*ngIf="label"
[for]="id"
[id]="labelId"
class="cds--label"
[ngClass]="{'cds--label--disabled': disabled}">
<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>
<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>
</label>
<div
class="cds--slider-container"
[ngClass]="{ 'cds--slider-container--readonly': readonly }">
<label [id]="bottomRangeId" class="cds--slider__range-label">
<ng-content select="[minLabel]"></ng-content>
</label>
<div
class="cds--slider"
(click)="onClick($event)"
[ngClass]="{
'cds--slider--disabled': disabled,
'cds--slider--readonly': readonly
}">
<ng-container *ngIf="!isRange()">
<div class="cds--slider__thumb-wrapper"
[ngStyle]="{insetInlineStart: getFractionComplete(value) * 100 + '%'}">
<div
#thumbs
role="slider"
[id]="id"
[attr.aria-labelledby]="labelId"
class="cds--slider__thumb"
tabindex="0"
(mousedown)="onMouseDown($event)"
(keydown)="onKeyDown($event)">
</div>
</div>
</ng-container>
<ng-container *ngIf="isRange()">
<div class="cds--slider__thumb-wrapper"
[ngStyle]="{insetInlineStart: getFractionComplete(thumb) * 100 + '%'}"
*ngFor="let thumb of value; let i = index; trackBy: trackThumbsBy">
<div
#thumbs
role="slider"
[id]="id + (i > 0 ? '-' + i : '')"
[attr.aria-labelledby]="labelId"
class="cds--slider__thumb"
tabindex="0"
(mousedown)="onMouseDown($event, i)"
(keydown)="onKeyDown($event, i)">
</div>
</div>
</ng-container>
<div
#track
class="cds--slider__track">
</div>
<div
#filledTrack
class="cds--slider__filled-track">
</div>
<input
#range
aria-label="slider"
class="cds--slider__input"
type="range"
[step]="step"
[min]="min"
[max]="max"
[value]="value.toString()">
</div>
<label [id]="topRangeId" class="cds--slider__range-label">
<ng-content select="[maxLabel]"></ng-content>
</label>
<ng-content select="input"></ng-content>
</div>
</ng-container>
<ng-template #skeletonTemplate>
<label *ngIf="label" class="cds--label cds--skeleton"></label>
<div class="cds--slider-container cds--skeleton">
<span class="cds--slider__range-label"></span>
<div class="cds--slider">
<div class="cds--slider__thumb"></div>
<div class="cds--slider__track"></div>
<div class="cds--slider__filled-track"></div>
</div>
<span class="cds--slider__range-label"></span>
</div>
</ng-template>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: Slider,
multi: true
}
]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.EventService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { min: [{
type: Input
}], max: [{
type: Input
}], step: [{
type: Input
}], value: [{
type: Input
}], id: [{
type: Input
}], shiftMultiplier: [{
type: Input
}], skeleton: [{
type: Input
}], label: [{
type: Input
}], disableArrowKeys: [{
type: Input
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}], valueChange: [{
type: Output
}], hostClass: [{
type: HostBinding,
args: ["class.cds--form-item"]
}], thumbs: [{
type: ViewChildren,
args: ["thumbs"]
}], track: [{
type: ViewChild,
args: ["track"]
}], filledTrack: [{
type: ViewChild,
args: ["filledTrack"]
}], range: [{
type: ViewChild,
args: ["range"]
}] } });
class SliderModule {
}
SliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SliderModule, declarations: [Slider], imports: [CommonModule,
UtilsModule], exports: [Slider] });
SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SliderModule, imports: [CommonModule,
UtilsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SliderModule, decorators: [{
type: NgModule,
args: [{
declarations: [Slider],
exports: [Slider],
imports: [
CommonModule,
UtilsModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Slider, SliderModule };
//# sourceMappingURL=carbon-components-angular-slider.mjs.map