ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
316 lines (311 loc) • 14.4 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, Input, Output, HostBinding, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng-zorro-antd-mobile/slider';
import { SliderModule } from 'ng-zorro-antd-mobile/slider';
class RangeComponent {
get min() {
return this._min;
}
set min(value) {
this._min = value;
}
get max() {
return this._max;
}
set max(value) {
this._max = value;
}
get step() {
return this._step;
}
set step(value) {
this._step = value;
}
get value() {
return this._value;
}
set value(value) {
this.setValue(value);
}
set defaultValue(value) {
this._defaultValue = value;
this._value = this._defaultValue;
this.setValue(value);
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
}
get marks() {
return this._marks;
}
set marks(value) {
this._marks = value;
}
get dots() {
return this._dots;
}
set dots(value) {
this._dots = value;
}
get included() {
return this._included;
}
set included(value) {
this._included = value;
}
set count(value) {
this._count = value;
}
set allowCross(value) {
this._allowCross = value;
this.setValueBound();
}
set pushable(value) {
this._pushable = value;
if (this.verifyPushable()) {
this.setValueBound();
}
}
get handleStyle() {
return this._handleStyle;
}
set handleStyle(value) {
this._handleStyle = value;
}
get trackStyle() {
return this._trackStyle;
}
set trackStyle(value) {
this._trackStyle = value;
}
get railStyle() {
return this._railStyle;
}
set railStyle(value) {
this._railStyle = value;
}
constructor(_elf) {
this._elf = _elf;
this.prefixCls = 'am-slider';
this.offset = [];
this.length = [];
this._min = 0;
this._max = 100;
this._step = 1;
this._defaultValue = [0, 0, 0];
this._disabled = false;
this._marks = {};
this._dots = false;
this._included = true;
this._count = 1;
this._allowCross = true;
this._handleStyle = [];
this._trackStyle = [];
this.onChange = new EventEmitter();
this.onAfterChange = new EventEmitter();
this.amWrapper = true;
this._ngModelOnChange = () => { };
this._ngModelOnTouched = () => { };
}
setCls() {
this.sliderCls = {
[`${this.prefixCls}-disabled`]: this._disabled
};
}
initialValue() {
const minTemp = this._min;
if (!this.verifyPushable()) {
this._pushable = 0;
console.warn('pushable设置无效，已大于有些value间隔，被强制设为0');
}
const initialValue = Array.apply(null, Array(this._count + 1)).map(function () {
return minTemp;
});
this._defaultValue = this._defaultValue !== undefined ? this._defaultValue : initialValue;
this._value = this._value !== undefined ? this._value : this._defaultValue;
// 验证count值
this._count = this._value.length - 1;
// 验证value区间
for (let i = 0; i < this._value.length; i++) {
if (this._value[i] < this._min) {
this._value[i] = this._min;
}
else if (this._value[i] > this._max) {
this._value[i] = this._max;
}
}
if (this._count > 0) {
this.upperBound = Math.max(...this._value);
this.lowerBound = Math.min(...this._value);
}
}
handleChange(e, i) {
let temp = [...this._value];
temp[i] = e;
this.upperBound = Math.max(...temp);
this.lowerBound = Math.min(...temp);
this.setTrackStyle(temp);
this.onChange.emit(temp);
}
handleAfterChange(e, i) {
setTimeout(() => {
this._value[i] = e;
this.upperBound = Math.max(...this._value);
this.lowerBound = Math.min(...this._value);
this.setTrackStyle(this._value);
this.onAfterChange.emit(this._value);
this._ngModelOnChange(this._value);
this.setValueBound();
}, 0);
}
setTrackStyle(value) {
if (value && value.length === this._count + 1) {
value.sort((a, b) => a - b);
for (let i = 0; i < this._count; i++) {
this.offset[i] = (value[i] * 100) / (this._max - this._min);
this.length[i] = ((value[i + 1] - value[i]) * 100) / (this._max - this._min);
}
}
}
setValueBound() {
this.maxBound = [];
this.minBound = [];
if ((this._allowCross && this._pushable === undefined) || this._handleCount <= 1) {
for (let i = 0; i < this._handleCount; i++) {
this.maxBound[i] = this._max;
this.minBound[i] = this._min;
}
}
else {
if (this._pushable === undefined) {
this._pushable = 0;
}
for (let i = 0; i < this._handleCount; i++) {
this.maxBound[i] = i === this._handleCount - 1 ? this._max : this._value[i + 1] - this._pushable;
this.minBound[i] = i === 0 ? this._min : this._value[i - 1] + this._pushable;
}
}
}
verifyPushable() {
for (let i = 1; i < this._handleCount; i++) {
const diff = this._value[i] - this._value[i - 1];
if (diff < this._pushable) {
return false;
}
}
return true;
}
writeValue(value) {
this.setValue(value, true);
}
setValue(value, isWriteValue = false) {
if (value) {
this._value = value;
this._handleCount = this._value.length + 1;
this.initialValue();
this.setValueBound();
this.setCls();
this.setTrackStyle(this._value);
if (isWriteValue) {
this._ngModelOnChange(this._value);
}
else {
this.onAfterChange.emit(this._value);
}
}
}
registerOnChange(fn) {
this._ngModelOnChange = fn;
}
registerOnTouched(fn) {
this._ngModelOnTouched = fn;
}
ngOnInit() {
this.initialValue();
this.setValueBound();
this._handleCount = this._count + 1;
this.setCls();
const sliderCoords = this._elf.nativeElement.getElementsByClassName('am-slider')[0].getBoundingClientRect();
this.sliderLength = sliderCoords.width;
this.sliderStart = sliderCoords.left;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RangeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: RangeComponent, selector: "Range , nzm-range", inputs: { min: "min", max: "max", step: "step", value: "value", defaultValue: "defaultValue", disabled: "disabled", marks: "marks", dots: "dots", included: "included", count: "count", allowCross: "allowCross", pushable: "pushable", handleStyle: "handleStyle", trackStyle: "trackStyle", railStyle: "railStyle" }, outputs: { onChange: "onChange", onAfterChange: "onAfterChange" }, host: { properties: { "class.am-slider-wrapper": "this.amWrapper" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RangeComponent),
multi: true
}
], ngImport: i0, template: "<div class=\"am-slider\" [ngClass]=\"sliderCls\">\n <div class=\"am-slider-rail\" [ngStyle]=\"railStyle\"></div>\n <SliderTrack\n *ngFor=\"let off of offset; let i = index\"\n [className]=\"'am-slider-track'\"\n [included]=\"included\"\n [style]=\"trackStyle[i]\"\n [offset]=\"off\"\n [length]=\"length[i]\"\n ></SliderTrack>\n <SliderSteps\n [max]=\"max\"\n [min]=\"min\"\n [dots]=\"dots\"\n [step]=\"step\"\n [marks]=\"marks\"\n [upperBound]=\"upperBound\"\n [lowerBound]=\"lowerBound\"\n ></SliderSteps>\n <SliderHandle\n *ngFor=\"let val of value; let i = index\"\n [max]=\"max\"\n [min]=\"min\"\n [maxBound]=\"maxBound[i]\"\n [minBound]=\"minBound[i]\"\n [value]=\"val\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [sliderLength]=\"sliderLength\"\n [sliderStart]=\"sliderStart\"\n [handleStyle]=\"handleStyle[i]\"\n (onChange)=\"handleChange($event, i)\"\n (onAfterChange)=\"handleAfterChange($event, i)\"\n ></SliderHandle>\n <SliderMarks\n [max]=\"max\"\n [min]=\"min\"\n [marks]=\"marks\"\n [upperBound]=\"upperBound\"\n [lowerBound]=\"lowerBound\"\n ></SliderMarks>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.SliderHandleComponent, selector: "SliderHandle, nzm-slider-handle", inputs: ["min", "max", "minBound", "maxBound", "step", "value", "disabled", "sliderLength", "sliderStart", "handleStyle"], outputs: ["onChange", "onAfterChange"] }, { kind: "component", type: i2.SliderMarksComponent, selector: "SliderMarks, nzm-slider-marks", inputs: ["min", "max", "marks", "included", "upperBound", "lowerBound"], outputs: ["onChange", "onAfterChange"] }, { kind: "component", type: i2.SliderStepsComponent, selector: "SliderSteps, nzm-slider-steps", inputs: ["min", "max", "marks", "step", "included", "dots", "upperBound", "lowerBound"] }, { kind: "component", type: i2.SliderTrackComponent, selector: "SliderTrack, nzm-slider-track", inputs: ["className", "included", "offset", "length", "style"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RangeComponent, decorators: [{
type: Component,
args: [{ selector: 'Range , nzm-range', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RangeComponent),
multi: true
}
], template: "<div class=\"am-slider\" [ngClass]=\"sliderCls\">\n <div class=\"am-slider-rail\" [ngStyle]=\"railStyle\"></div>\n <SliderTrack\n *ngFor=\"let off of offset; let i = index\"\n [className]=\"'am-slider-track'\"\n [included]=\"included\"\n [style]=\"trackStyle[i]\"\n [offset]=\"off\"\n [length]=\"length[i]\"\n ></SliderTrack>\n <SliderSteps\n [max]=\"max\"\n [min]=\"min\"\n [dots]=\"dots\"\n [step]=\"step\"\n [marks]=\"marks\"\n [upperBound]=\"upperBound\"\n [lowerBound]=\"lowerBound\"\n ></SliderSteps>\n <SliderHandle\n *ngFor=\"let val of value; let i = index\"\n [max]=\"max\"\n [min]=\"min\"\n [maxBound]=\"maxBound[i]\"\n [minBound]=\"minBound[i]\"\n [value]=\"val\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [sliderLength]=\"sliderLength\"\n [sliderStart]=\"sliderStart\"\n [handleStyle]=\"handleStyle[i]\"\n (onChange)=\"handleChange($event, i)\"\n (onAfterChange)=\"handleAfterChange($event, i)\"\n ></SliderHandle>\n <SliderMarks\n [max]=\"max\"\n [min]=\"min\"\n [marks]=\"marks\"\n [upperBound]=\"upperBound\"\n [lowerBound]=\"lowerBound\"\n ></SliderMarks>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { min: [{
type: Input
}], max: [{
type: Input
}], step: [{
type: Input
}], value: [{
type: Input
}], defaultValue: [{
type: Input
}], disabled: [{
type: Input
}], marks: [{
type: Input
}], dots: [{
type: Input
}], included: [{
type: Input
}], count: [{
type: Input
}], allowCross: [{
type: Input
}], pushable: [{
type: Input
}], handleStyle: [{
type: Input
}], trackStyle: [{
type: Input
}], railStyle: [{
type: Input
}], onChange: [{
type: Output
}], onAfterChange: [{
type: Output
}], amWrapper: [{
type: HostBinding,
args: ['class.am-slider-wrapper']
}] } });
class RangeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: RangeModule, declarations: [RangeComponent], imports: [CommonModule, SliderModule], exports: [RangeComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RangeModule, imports: [CommonModule, SliderModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: RangeModule, decorators: [{
type: NgModule,
args: [{
exports: [RangeComponent],
declarations: [RangeComponent],
imports: [CommonModule, SliderModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { RangeComponent, RangeModule };
//# sourceMappingURL=ng-zorro-antd-mobile-range.mjs.map