sb-element
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.1. It is a component library constructed around the SCSS library [Sb-Theming](https://github.com/SeverinBuchser/SbTheming) and supports [Angular Schematics]
88 lines • 12.9 kB
JavaScript
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Color, mixinClassName, mixinColor, mixinDisable, mixinFocus } from '../../core';
import * as i0 from "@angular/core";
import * as i1 from "../../core";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
const SbSliderCore = mixinDisable(mixinFocus(mixinColor(mixinClassName(class {
constructor(_elementRef, _themeService) {
this._elementRef = _elementRef;
this._themeService = _themeService;
}
}, 'sb-slider'), Color.PRIMARY)));
export class SbSliderComponent extends SbSliderCore {
constructor(elementRef, themeService) {
super(elementRef, themeService);
this._sliderId = SbSliderComponent._globalSliderId++;
this.min = 0;
this.max = 10;
this.step = 1;
this.snapPoints = new Array();
this.onChange = () => { };
this.onTouch = () => { };
this.innerValue = undefined;
}
get steplistId() {
return `sb-slider-steplist-${this._sliderId}`;
}
set snap(snap) {
if (Array.isArray(snap))
this.snapPoints = snap;
else if (snap) {
this.snapPoints = new Array();
let snapStep = Math.round((this.max - this.min) / 5 / this.step) * this.step;
let sum = this.min;
while (sum < this.max - snapStep) {
this.snapPoints.push(sum);
sum += snapStep;
}
}
}
set value(value) {
this.writeValue(value);
this.onChange(value);
}
get value() {
return this.innerValue;
}
writeValue(value) {
if (value !== this.innerValue && !this.disabled) {
this.innerValue = value;
}
}
registerOnChange(fn) { this.onChange = fn; }
registerOnTouched(fn) { this.onTouch = fn; }
onBlur() { this.onTouch(); }
}
SbSliderComponent._globalSliderId = 0;
SbSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbSliderComponent, deps: [{ token: i0.ElementRef }, { token: i1.SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbSliderComponent, selector: "sb-slider", inputs: { size: "size", color: "color", disabled: "disabled", min: "min", max: "max", step: "step", snap: "snap" }, outputs: { focus: "focus", blur: "blur" }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbSliderComponent,
multi: true
}], usesInheritance: true, ngImport: i0, template: "<input\n type=\"range\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.list]=\"steplistId\"\n [(ngModel)]=\"value\"\n (blur)=\"setFocusedState(false)\"\n (focus)=\"setFocusedState(true)\"\n [disabled]=\"disabled\"/>\n<datalist [id]=\"steplistId\">\n <option *ngFor=\"let snapPoint of snapPoints\" [value]=\"snapPoint\"></option>\n</datalist>\n", directives: [{ type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbSliderComponent, decorators: [{
type: Component,
args: [{ selector: 'sb-slider', encapsulation: ViewEncapsulation.None, inputs: [
'size',
'color',
'disabled'
], outputs: [
'focus',
'blur'
], providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbSliderComponent,
multi: true
}], template: "<input\n type=\"range\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.list]=\"steplistId\"\n [(ngModel)]=\"value\"\n (blur)=\"setFocusedState(false)\"\n (focus)=\"setFocusedState(true)\"\n [disabled]=\"disabled\"/>\n<datalist [id]=\"steplistId\">\n <option *ngFor=\"let snapPoint of snapPoints\" [value]=\"snapPoint\"></option>\n</datalist>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SbThemeService }]; }, propDecorators: { min: [{
type: Input
}], max: [{
type: Input
}], step: [{
type: Input
}], snap: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NiLWVsZW1lbnQvc3JjL2xpYi9mb3Jtcy9zbGlkZXIvc2xpZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NiLWVsZW1lbnQvc3JjL2xpYi9mb3Jtcy9zbGlkZXIvc2xpZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hGLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN6RSxPQUFPLEVBQUUsS0FBSyxFQUFFLGNBQWMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBa0IsTUFBTSxZQUFZLENBQUM7Ozs7O0FBRXpHLE1BQU0sWUFBWSxHQUFHLFlBQVksQ0FDL0IsVUFBVSxDQUNSLFVBQVUsQ0FDUixjQUFjLENBQ1o7SUFDRSxZQUNTLFdBQXVCLEVBQ3ZCLGFBQTZCO1FBRDdCLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLGtCQUFhLEdBQWIsYUFBYSxDQUFnQjtJQUFHLENBQUM7Q0FDM0MsRUFBRSxXQUFXLENBQ2YsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUNqQixDQUNGLENBQ0YsQ0FBQztBQXFCRixNQUFNLE9BQU8saUJBQWtCLFNBQVEsWUFBWTtJQThDakQsWUFDRSxVQUFzQixFQUN0QixZQUE0QjtRQUU1QixLQUFLLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBL0MxQixjQUFTLEdBQVcsaUJBQWlCLENBQUMsZUFBZSxFQUFHLENBQUM7UUFNMUQsUUFBRyxHQUFXLENBQUMsQ0FBQztRQUdoQixRQUFHLEdBQVcsRUFBRSxDQUFDO1FBR2pCLFNBQUksR0FBVyxDQUFDLENBQUM7UUFlakIsZUFBVSxHQUFrQixJQUFJLEtBQUssRUFBVSxDQUFDO1FBRS9DLGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDekIsWUFBTyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUV4QixlQUFVLEdBQXVCLFNBQVMsQ0FBQztJQWdCbkQsQ0FBQztJQS9DRCxJQUFJLFVBQVU7UUFDWixPQUFPLHNCQUFzQixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDaEQsQ0FBQztJQVdELElBQ0ksSUFBSSxDQUFDLElBQTZCO1FBQ3BDLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7WUFBRSxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQzthQUMzQyxJQUFJLElBQUksRUFBRTtZQUNiLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxLQUFLLEVBQVUsQ0FBQztZQUN0QyxJQUFJLFFBQVEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsR0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUMsQ0FBQyxHQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO1lBQ3JFLElBQUksR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUM7WUFDbkIsT0FBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsR0FBRyxRQUFRLEVBQUU7Z0JBQy9CLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFBO2dCQUN6QixHQUFHLElBQUksUUFBUSxDQUFDO2FBQ2pCO1NBQ0Y7SUFDSCxDQUFDO0lBUUQsSUFBSSxLQUFLLENBQUMsS0FBeUI7UUFDakMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN2QixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDekIsQ0FBQztJQVVNLFVBQVUsQ0FBQyxLQUF5QjtRQUN6QyxJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsVUFBVSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUMvQyxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztTQUN6QjtJQUNILENBQUM7SUFFTSxnQkFBZ0IsQ0FBQyxFQUFPLElBQVUsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUEsQ0FBQyxDQUFDO0lBQ3RELGlCQUFpQixDQUFDLEVBQU8sSUFBVSxJQUFJLENBQUMsT0FBTyxHQUFHLEVBQUUsQ0FBQSxDQUFDLENBQUM7SUFDdEQsTUFBTSxLQUFXLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQSxDQUFDLENBQUM7O0FBNUR6QixpQ0FBZSxHQUFXLENBQUUsQ0FBQTs4R0FGaEMsaUJBQWlCO2tHQUFqQixpQkFBaUIsbU1BTmpCLENBQUM7WUFDVixPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxpQkFBaUI7WUFDOUIsS0FBSyxFQUFFLElBQUk7U0FDWixDQUFDLGlEQ25DSiw4V0FhQTsyRkR3QmEsaUJBQWlCO2tCQW5CN0IsU0FBUzsrQkFDRSxXQUFXLGlCQUVOLGlCQUFpQixDQUFDLElBQUksVUFDN0I7d0JBQ04sTUFBTTt3QkFDTixPQUFPO3dCQUNQLFVBQVU7cUJBQ1gsV0FDUTt3QkFDUCxPQUFPO3dCQUNQLE1BQU07cUJBQ1AsYUFDVSxDQUFDOzRCQUNWLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsbUJBQW1COzRCQUM5QixLQUFLLEVBQUUsSUFBSTt5QkFDWixDQUFDOzhIQVdLLEdBQUc7c0JBRFQsS0FBSztnQkFJQyxHQUFHO3NCQURULEtBQUs7Z0JBSUMsSUFBSTtzQkFEVixLQUFLO2dCQUlGLElBQUk7c0JBRFAsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBDb2xvciwgbWl4aW5DbGFzc05hbWUsIG1peGluQ29sb3IsIG1peGluRGlzYWJsZSwgbWl4aW5Gb2N1cywgU2JUaGVtZVNlcnZpY2UgfSBmcm9tICcuLi8uLi9jb3JlJztcblxuY29uc3QgU2JTbGlkZXJDb3JlID0gbWl4aW5EaXNhYmxlKFxuICBtaXhpbkZvY3VzKFxuICAgIG1peGluQ29sb3IoXG4gICAgICBtaXhpbkNsYXNzTmFtZShcbiAgICAgICAgY2xhc3Mge1xuICAgICAgICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICAgICAgcHVibGljIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgICAgICAgICAgcHVibGljIF90aGVtZVNlcnZpY2U6IFNiVGhlbWVTZXJ2aWNlKSB7fVxuICAgICAgICB9LCAnc2Itc2xpZGVyJ1xuICAgICAgKSwgQ29sb3IuUFJJTUFSWVxuICAgIClcbiAgKVxuKTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2Itc2xpZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NsaWRlci5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGlucHV0czogW1xuICAgICdzaXplJyxcbiAgICAnY29sb3InLFxuICAgICdkaXNhYmxlZCdcbiAgXSxcbiAgb3V0cHV0czogW1xuICAgICdmb2N1cycsXG4gICAgJ2JsdXInXG4gIF0sXG4gIHByb3ZpZGVyczogW3tcbiAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICB1c2VFeGlzdGluZzogU2JTbGlkZXJDb21wb25lbnQsXG4gICAgbXVsdGk6IHRydWVcbiAgfV1cbn0pXG5leHBvcnQgY2xhc3MgU2JTbGlkZXJDb21wb25lbnQgZXh0ZW5kcyBTYlNsaWRlckNvcmUgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG5cbiAgcHJpdmF0ZSBzdGF0aWMgX2dsb2JhbFNsaWRlcklkOiBudW1iZXIgPSAwO1xuICBwcml2YXRlIF9zbGlkZXJJZDogbnVtYmVyID0gU2JTbGlkZXJDb21wb25lbnQuX2dsb2JhbFNsaWRlcklkICsrO1xuICBnZXQgc3RlcGxpc3RJZCgpOiBzdHJpbmcge1xuICAgIHJldHVybiBgc2Itc2xpZGVyLXN0ZXBsaXN0LSR7dGhpcy5fc2xpZGVySWR9YDtcbiAgfVxuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBtaW46IG51bWJlciA9IDA7XG5cbiAgQElucHV0KClcbiAgcHVibGljIG1heDogbnVtYmVyID0gMTA7XG5cbiAgQElucHV0KClcbiAgcHVibGljIHN0ZXA6IG51bWJlciA9IDE7XG5cbiAgQElucHV0KClcbiAgc2V0IHNuYXAoc25hcDogQXJyYXk8bnVtYmVyPiB8IGJvb2xlYW4pIHtcbiAgICBpZiAoQXJyYXkuaXNBcnJheShzbmFwKSkgdGhpcy5zbmFwUG9pbnRzID0gc25hcDtcbiAgICBlbHNlIGlmIChzbmFwKSB7XG4gICAgICB0aGlzLnNuYXBQb2ludHMgPSBuZXcgQXJyYXk8bnVtYmVyPigpO1xuICAgICAgbGV0IHNuYXBTdGVwID0gTWF0aC5yb3VuZCgodGhpcy5tYXgtdGhpcy5taW4pLzUvdGhpcy5zdGVwKSp0aGlzLnN0ZXA7XG4gICAgICBsZXQgc3VtID0gdGhpcy5taW47XG4gICAgICB3aGlsZShzdW0gPCB0aGlzLm1heCAtIHNuYXBTdGVwKSB7XG4gICAgICAgIHRoaXMuc25hcFBvaW50cy5wdXNoKHN1bSlcbiAgICAgICAgc3VtICs9IHNuYXBTdGVwO1xuICAgICAgfVxuICAgIH1cbiAgfVxuICBwdWJsaWMgc25hcFBvaW50czogQXJyYXk8bnVtYmVyPiA9IG5ldyBBcnJheTxudW1iZXI+KCk7XG5cbiAgcHJpdmF0ZSBvbkNoYW5nZTogYW55ID0gKCkgPT4ge307XG4gIHByaXZhdGUgb25Ub3VjaDogYW55ID0gKCkgPT4ge307XG5cbiAgcHJpdmF0ZSBpbm5lclZhbHVlOiBudW1iZXIgfCB1bmRlZmluZWQgPSB1bmRlZmluZWQ7XG5cbiAgc2V0IHZhbHVlKHZhbHVlOiBudW1iZXIgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLndyaXRlVmFsdWUodmFsdWUpO1xuICAgIHRoaXMub25DaGFuZ2UodmFsdWUpO1xuICB9XG5cbiAgZ2V0IHZhbHVlKCk6IG51bWJlciB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMuaW5uZXJWYWx1ZTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgdGhlbWVTZXJ2aWNlOiBTYlRoZW1lU2VydmljZVxuICApIHtcbiAgICBzdXBlcihlbGVtZW50UmVmLCB0aGVtZVNlcnZpY2UpO1xuICB9XG5cblxuICBwdWJsaWMgd3JpdGVWYWx1ZSh2YWx1ZTogbnVtYmVyIHwgdW5kZWZpbmVkKTogdm9pZCB7XG4gICAgaWYgKHZhbHVlICE9PSB0aGlzLmlubmVyVmFsdWUgJiYgIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuaW5uZXJWYWx1ZSA9IHZhbHVlO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHsgdGhpcy5vbkNoYW5nZSA9IGZuIH1cbiAgcHVibGljIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHsgdGhpcy5vblRvdWNoID0gZm4gfVxuICBwdWJsaWMgb25CbHVyKCk6IHZvaWQgeyB0aGlzLm9uVG91Y2goKSB9XG5cbn1cbiIsIjxpbnB1dFxuICB0eXBlPVwicmFuZ2VcIlxuICBbbWluXT1cIm1pblwiXG4gIFttYXhdPVwibWF4XCJcbiAgW3N0ZXBdPVwic3RlcFwiXG4gIFthdHRyLmxpc3RdPVwic3RlcGxpc3RJZFwiXG4gIFsobmdNb2RlbCldPVwidmFsdWVcIlxuICAoYmx1cik9XCJzZXRGb2N1c2VkU3RhdGUoZmFsc2UpXCJcbiAgKGZvY3VzKT1cInNldEZvY3VzZWRTdGF0ZSh0cnVlKVwiXG4gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiLz5cbjxkYXRhbGlzdCBbaWRdPVwic3RlcGxpc3RJZFwiPlxuICA8b3B0aW9uICpuZ0Zvcj1cImxldCBzbmFwUG9pbnQgb2Ygc25hcFBvaW50c1wiIFt2YWx1ZV09XCJzbmFwUG9pbnRcIj48L29wdGlvbj5cbjwvZGF0YWxpc3Q+XG4iXX0=