@ngx-formly/material 6.3.12 → 7.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/checkbox/checkbox.config.d.ts +2 -0
- package/checkbox/checkbox.type.d.ts +1 -1
- package/checkbox/public_api.d.ts +1 -0
- package/datepicker/datepicker.config.d.ts +2 -0
- package/datepicker/datepicker.type.d.ts +1 -1
- package/datepicker/public_api.d.ts +1 -0
- package/esm2022/checkbox/checkbox.config.mjs +17 -0
- package/esm2022/checkbox/checkbox.module.mjs +36 -0
- package/esm2022/checkbox/checkbox.type.mjs +113 -0
- package/esm2022/checkbox/public_api.mjs +4 -0
- package/esm2022/datepicker/datepicker.config.mjs +13 -0
- package/esm2022/datepicker/datepicker.module.mjs +40 -0
- package/esm2022/datepicker/datepicker.type.mjs +153 -0
- package/esm2022/datepicker/public_api.mjs +4 -0
- package/esm2022/form-field/field.type.mjs +142 -0
- package/esm2022/form-field/form-field.config.mjs +12 -0
- package/esm2022/form-field/form-field.module.mjs +23 -0
- package/esm2022/form-field/form-field.wrapper.mjs +159 -0
- package/esm2022/form-field/public_api.mjs +4 -0
- package/esm2022/input/input.config.mjs +32 -0
- package/esm2022/input/input.module.mjs +36 -0
- package/{esm2020 → esm2022}/input/input.type.mjs +8 -8
- package/esm2022/input/public_api.mjs +4 -0
- package/esm2022/lib/material.config.mjs +19 -0
- package/esm2022/lib/ui-material.mjs +4 -0
- package/esm2022/lib/ui-material.module.mjs +41 -0
- package/esm2022/multicheckbox/multicheckbox.config.mjs +13 -0
- package/esm2022/multicheckbox/multicheckbox.module.mjs +40 -0
- package/esm2022/multicheckbox/multicheckbox.type.mjs +85 -0
- package/esm2022/multicheckbox/public_api.mjs +4 -0
- package/esm2022/native-select/native-select.config.mjs +13 -0
- package/esm2022/native-select/native-select.module.mjs +40 -0
- package/{esm2020 → esm2022}/native-select/native-select.type.mjs +11 -11
- package/esm2022/native-select/public_api.mjs +4 -0
- package/esm2022/radio/public_api.mjs +4 -0
- package/esm2022/radio/radio.config.mjs +13 -0
- package/esm2022/radio/radio.module.mjs +40 -0
- package/esm2022/radio/radio.type.mjs +89 -0
- package/esm2022/select/public_api.mjs +4 -0
- package/esm2022/select/select.config.mjs +14 -0
- package/esm2022/select/select.module.mjs +44 -0
- package/esm2022/select/select.type.mjs +164 -0
- package/esm2022/slider/public_api.mjs +4 -0
- package/esm2022/slider/slider.config.mjs +13 -0
- package/esm2022/slider/slider.module.mjs +43 -0
- package/esm2022/slider/slider.type.mjs +67 -0
- package/esm2022/textarea/public_api.mjs +4 -0
- package/esm2022/textarea/textarea.config.mjs +13 -0
- package/esm2022/textarea/textarea.module.mjs +36 -0
- package/{esm2020 → esm2022}/textarea/textarea.type.mjs +12 -12
- package/esm2022/toggle/public_api.mjs +4 -0
- package/esm2022/toggle/toggle.config.mjs +13 -0
- package/esm2022/toggle/toggle.module.mjs +36 -0
- package/{esm2020 → esm2022}/toggle/toggle.type.mjs +8 -8
- package/{fesm2015 → fesm2022}/ngx-formly-material-checkbox.mjs +41 -51
- package/fesm2022/ngx-formly-material-checkbox.mjs.map +1 -0
- package/{fesm2020 → fesm2022}/ngx-formly-material-datepicker.mjs +38 -44
- package/fesm2022/ngx-formly-material-datepicker.mjs.map +1 -0
- package/{fesm2020 → fesm2022}/ngx-formly-material-form-field.mjs +35 -50
- package/fesm2022/ngx-formly-material-form-field.mjs.map +1 -0
- package/fesm2022/ngx-formly-material-input.mjs +151 -0
- package/fesm2022/ngx-formly-material-input.mjs.map +1 -0
- package/{fesm2020 → fesm2022}/ngx-formly-material-multicheckbox.mjs +37 -43
- package/fesm2022/ngx-formly-material-multicheckbox.mjs.map +1 -0
- package/fesm2022/ngx-formly-material-native-select.mjs +128 -0
- package/fesm2022/ngx-formly-material-native-select.mjs.map +1 -0
- package/fesm2022/ngx-formly-material-radio.mjs +140 -0
- package/fesm2022/ngx-formly-material-radio.mjs.map +1 -0
- package/{fesm2020 → fesm2022}/ngx-formly-material-select.mjs +44 -51
- package/fesm2022/ngx-formly-material-select.mjs.map +1 -0
- package/fesm2022/ngx-formly-material-slider.mjs +123 -0
- package/fesm2022/ngx-formly-material-slider.mjs.map +1 -0
- package/fesm2022/ngx-formly-material-textarea.mjs +125 -0
- package/fesm2022/ngx-formly-material-textarea.mjs.map +1 -0
- package/fesm2022/ngx-formly-material-toggle.mjs +111 -0
- package/fesm2022/ngx-formly-material-toggle.mjs.map +1 -0
- package/fesm2022/ngx-formly-material.mjs +65 -0
- package/fesm2022/ngx-formly-material.mjs.map +1 -0
- package/form-field/field.type.d.ts +1 -1
- package/form-field/form-field.config.d.ts +2 -0
- package/form-field/form-field.wrapper.d.ts +1 -1
- package/form-field/public_api.d.ts +1 -0
- package/input/input.config.d.ts +2 -0
- package/input/input.type.d.ts +1 -1
- package/input/public_api.d.ts +1 -0
- package/lib/material.config.d.ts +1 -0
- package/lib/ui-material.d.ts +1 -0
- package/multicheckbox/multicheckbox.config.d.ts +2 -0
- package/multicheckbox/multicheckbox.type.d.ts +1 -1
- package/multicheckbox/public_api.d.ts +1 -0
- package/native-select/native-select.config.d.ts +2 -0
- package/native-select/native-select.type.d.ts +1 -1
- package/native-select/public_api.d.ts +1 -0
- package/package.json +53 -81
- package/radio/public_api.d.ts +1 -0
- package/radio/radio.config.d.ts +2 -0
- package/radio/radio.type.d.ts +1 -1
- package/select/public_api.d.ts +1 -0
- package/select/select.config.d.ts +2 -0
- package/select/select.type.d.ts +1 -1
- package/slider/public_api.d.ts +3 -4
- package/slider/slider.config.d.ts +2 -0
- package/slider/slider.module.d.ts +7 -9
- package/slider/slider.type.d.ts +5 -15
- package/textarea/public_api.d.ts +1 -0
- package/textarea/textarea.config.d.ts +2 -0
- package/textarea/textarea.type.d.ts +1 -1
- package/toggle/public_api.d.ts +1 -0
- package/toggle/toggle.config.d.ts +2 -0
- package/toggle/toggle.type.d.ts +1 -1
- package/checkbox/package.json +0 -10
- package/datepicker/package.json +0 -10
- package/esm2020/checkbox/checkbox.module.mjs +0 -61
- package/esm2020/checkbox/checkbox.type.mjs +0 -113
- package/esm2020/checkbox/public_api.mjs +0 -3
- package/esm2020/datepicker/datepicker.module.mjs +0 -57
- package/esm2020/datepicker/datepicker.type.mjs +0 -153
- package/esm2020/datepicker/public_api.mjs +0 -3
- package/esm2020/form-field/field.type.mjs +0 -142
- package/esm2020/form-field/form-field.module.mjs +0 -48
- package/esm2020/form-field/form-field.wrapper.mjs +0 -159
- package/esm2020/form-field/public_api.mjs +0 -3
- package/esm2020/input/input.module.mjs +0 -91
- package/esm2020/input/public_api.mjs +0 -3
- package/esm2020/lib/ui-material.mjs +0 -3
- package/esm2020/lib/ui-material.module.mjs +0 -43
- package/esm2020/multicheckbox/multicheckbox.module.mjs +0 -57
- package/esm2020/multicheckbox/multicheckbox.type.mjs +0 -85
- package/esm2020/multicheckbox/public_api.mjs +0 -3
- package/esm2020/native-select/native-select.module.mjs +0 -57
- package/esm2020/native-select/public_api.mjs +0 -3
- package/esm2020/radio/public_api.mjs +0 -3
- package/esm2020/radio/radio.module.mjs +0 -57
- package/esm2020/radio/radio.type.mjs +0 -89
- package/esm2020/select/public_api.mjs +0 -3
- package/esm2020/select/select.module.mjs +0 -63
- package/esm2020/select/select.type.mjs +0 -164
- package/esm2020/slider/public_api.mjs +0 -7
- package/esm2020/slider/slider-input.mjs +0 -466
- package/esm2020/slider/slider-interface.mjs +0 -15
- package/esm2020/slider/slider-mdc.type.mjs +0 -97
- package/esm2020/slider/slider.module.mjs +0 -65
- package/esm2020/slider/slider.type.mjs +0 -80
- package/esm2020/textarea/public_api.mjs +0 -3
- package/esm2020/textarea/textarea.module.mjs +0 -53
- package/esm2020/toggle/public_api.mjs +0 -3
- package/esm2020/toggle/toggle.module.mjs +0 -53
- package/fesm2015/ngx-formly-material-checkbox.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-datepicker.mjs +0 -214
- package/fesm2015/ngx-formly-material-datepicker.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-form-field.mjs +0 -351
- package/fesm2015/ngx-formly-material-form-field.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-input.mjs +0 -176
- package/fesm2015/ngx-formly-material-input.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-multicheckbox.mjs +0 -143
- package/fesm2015/ngx-formly-material-multicheckbox.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-native-select.mjs +0 -134
- package/fesm2015/ngx-formly-material-native-select.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-radio.mjs +0 -146
- package/fesm2015/ngx-formly-material-radio.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-select.mjs +0 -230
- package/fesm2015/ngx-formly-material-select.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-slider.mjs +0 -712
- package/fesm2015/ngx-formly-material-slider.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-textarea.mjs +0 -131
- package/fesm2015/ngx-formly-material-textarea.mjs.map +0 -1
- package/fesm2015/ngx-formly-material-toggle.mjs +0 -117
- package/fesm2015/ngx-formly-material-toggle.mjs.map +0 -1
- package/fesm2015/ngx-formly-material.mjs +0 -55
- package/fesm2015/ngx-formly-material.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-checkbox.mjs +0 -175
- package/fesm2020/ngx-formly-material-checkbox.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-datepicker.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-form-field.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-input.mjs +0 -176
- package/fesm2020/ngx-formly-material-input.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-multicheckbox.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-native-select.mjs +0 -134
- package/fesm2020/ngx-formly-material-native-select.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-radio.mjs +0 -146
- package/fesm2020/ngx-formly-material-radio.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-select.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-slider.mjs +0 -708
- package/fesm2020/ngx-formly-material-slider.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-textarea.mjs +0 -131
- package/fesm2020/ngx-formly-material-textarea.mjs.map +0 -1
- package/fesm2020/ngx-formly-material-toggle.mjs +0 -117
- package/fesm2020/ngx-formly-material-toggle.mjs.map +0 -1
- package/fesm2020/ngx-formly-material.mjs +0 -55
- package/fesm2020/ngx-formly-material.mjs.map +0 -1
- package/form-field/package.json +0 -10
- package/input/package.json +0 -10
- package/multicheckbox/package.json +0 -10
- package/native-select/package.json +0 -10
- package/radio/package.json +0 -10
- package/select/package.json +0 -10
- package/slider/package.json +0 -10
- package/slider/slider-input.d.ts +0 -180
- package/slider/slider-interface.d.ts +0 -138
- package/slider/slider-mdc.type.d.ts +0 -13
- package/textarea/package.json +0 -10
- package/toggle/package.json +0 -10
- /package/checkbox/{ngx-formly-material-checkbox.d.ts → index.d.ts} +0 -0
- /package/datepicker/{ngx-formly-material-datepicker.d.ts → index.d.ts} +0 -0
- /package/{esm2020 → esm2022}/checkbox/ngx-formly-material-checkbox.mjs +0 -0
- /package/{esm2020 → esm2022}/datepicker/ngx-formly-material-datepicker.mjs +0 -0
- /package/{esm2020 → esm2022}/form-field/ngx-formly-material-form-field.mjs +0 -0
- /package/{esm2020 → esm2022}/input/ngx-formly-material-input.mjs +0 -0
- /package/{esm2020 → esm2022}/multicheckbox/ngx-formly-material-multicheckbox.mjs +0 -0
- /package/{esm2020 → esm2022}/native-select/ngx-formly-material-native-select.mjs +0 -0
- /package/{esm2020 → esm2022}/ngx-formly-material.mjs +0 -0
- /package/{esm2020 → esm2022}/public_api.mjs +0 -0
- /package/{esm2020 → esm2022}/radio/ngx-formly-material-radio.mjs +0 -0
- /package/{esm2020 → esm2022}/select/ngx-formly-material-select.mjs +0 -0
- /package/{esm2020 → esm2022}/slider/ngx-formly-material-slider.mjs +0 -0
- /package/{esm2020 → esm2022}/textarea/ngx-formly-material-textarea.mjs +0 -0
- /package/{esm2020 → esm2022}/toggle/ngx-formly-material-toggle.mjs +0 -0
- /package/form-field/{ngx-formly-material-form-field.d.ts → index.d.ts} +0 -0
- /package/{ngx-formly-material.d.ts → index.d.ts} +0 -0
- /package/input/{ngx-formly-material-input.d.ts → index.d.ts} +0 -0
- /package/multicheckbox/{ngx-formly-material-multicheckbox.d.ts → index.d.ts} +0 -0
- /package/native-select/{ngx-formly-material-native-select.d.ts → index.d.ts} +0 -0
- /package/radio/{ngx-formly-material-radio.d.ts → index.d.ts} +0 -0
- /package/select/{ngx-formly-material-select.d.ts → index.d.ts} +0 -0
- /package/slider/{ngx-formly-material-slider.d.ts → index.d.ts} +0 -0
- /package/textarea/{ngx-formly-material-textarea.d.ts → index.d.ts} +0 -0
- /package/toggle/{ngx-formly-material-toggle.d.ts → index.d.ts} +0 -0
|
@@ -1,708 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, ViewChild, InjectionToken, forwardRef, EventEmitter, Directive, Inject, Input, Output, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
-
import * as i3 from '@ngx-formly/core';
|
|
5
|
-
import { FormlyModule } from '@ngx-formly/core';
|
|
6
|
-
import * as i4 from '@angular/forms';
|
|
7
|
-
import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
8
|
-
import * as i1 from '@angular/material/slider';
|
|
9
|
-
import { MatSlider, MatSliderModule } from '@angular/material/slider';
|
|
10
|
-
import { FieldType, FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
|
|
11
|
-
import { VERSION as VERSION$1 } from '@angular/cdk';
|
|
12
|
-
import { VERSION, MatCommonModule, MatRippleModule } from '@angular/material/core';
|
|
13
|
-
import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
14
|
-
import { Subject } from 'rxjs';
|
|
15
|
-
|
|
16
|
-
class FormlyFieldSlider$2 extends FieldType {
|
|
17
|
-
constructor() {
|
|
18
|
-
super(...arguments);
|
|
19
|
-
this.defaultOptions = {
|
|
20
|
-
props: {
|
|
21
|
-
hideFieldUnderline: true,
|
|
22
|
-
floatLabel: 'always',
|
|
23
|
-
thumbLabel: false,
|
|
24
|
-
displayWith: (value) => value,
|
|
25
|
-
},
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
onContainerClick(event) {
|
|
29
|
-
this.slider.focus?.();
|
|
30
|
-
super.onContainerClick(event);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
FormlyFieldSlider$2.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyFieldSlider$2, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
-
FormlyFieldSlider$2.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FormlyFieldSlider$2, selector: "formly-field-mat-slider", viewQueries: [{ propertyName: "slider", first: true, predicate: MatSlider, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
|
|
35
|
-
<mat-slider
|
|
36
|
-
[id]="id"
|
|
37
|
-
[style.width]="'100%'"
|
|
38
|
-
[formControl]="formControl"
|
|
39
|
-
[formlyAttributes]="field"
|
|
40
|
-
[tabIndex]="props.tabindex"
|
|
41
|
-
[color]="props.color"
|
|
42
|
-
[displayWith]="props.displayWith"
|
|
43
|
-
[invert]="props.invert"
|
|
44
|
-
[max]="props.max"
|
|
45
|
-
[min]="props.min"
|
|
46
|
-
[step]="props.step"
|
|
47
|
-
[thumbLabel]="props.thumbLabel || props.discrete"
|
|
48
|
-
[tickInterval]="props.tickInterval"
|
|
49
|
-
[valueText]="props.valueText"
|
|
50
|
-
[vertical]="props.vertical"
|
|
51
|
-
(input)="props.input && props.input(field, $event)"
|
|
52
|
-
(change)="props.change && props.change(field, $event)"
|
|
53
|
-
>
|
|
54
|
-
</mat-slider>
|
|
55
|
-
`, isInline: true, components: [{ type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyFieldSlider$2, decorators: [{
|
|
57
|
-
type: Component,
|
|
58
|
-
args: [{
|
|
59
|
-
selector: 'formly-field-mat-slider',
|
|
60
|
-
template: `
|
|
61
|
-
<mat-slider
|
|
62
|
-
[id]="id"
|
|
63
|
-
[style.width]="'100%'"
|
|
64
|
-
[formControl]="formControl"
|
|
65
|
-
[formlyAttributes]="field"
|
|
66
|
-
[tabIndex]="props.tabindex"
|
|
67
|
-
[color]="props.color"
|
|
68
|
-
[displayWith]="props.displayWith"
|
|
69
|
-
[invert]="props.invert"
|
|
70
|
-
[max]="props.max"
|
|
71
|
-
[min]="props.min"
|
|
72
|
-
[step]="props.step"
|
|
73
|
-
[thumbLabel]="props.thumbLabel || props.discrete"
|
|
74
|
-
[tickInterval]="props.tickInterval"
|
|
75
|
-
[valueText]="props.valueText"
|
|
76
|
-
[vertical]="props.vertical"
|
|
77
|
-
(input)="props.input && props.input(field, $event)"
|
|
78
|
-
(change)="props.change && props.change(field, $event)"
|
|
79
|
-
>
|
|
80
|
-
</mat-slider>
|
|
81
|
-
`,
|
|
82
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
83
|
-
}]
|
|
84
|
-
}], propDecorators: { slider: [{
|
|
85
|
-
type: ViewChild,
|
|
86
|
-
args: [MatSlider, { static: true }]
|
|
87
|
-
}] } });
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* @license
|
|
91
|
-
* Copyright Google LLC All Rights Reserved.
|
|
92
|
-
*
|
|
93
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
94
|
-
* found in the LICENSE file at https://angular.io/license
|
|
95
|
-
*/
|
|
96
|
-
/**
|
|
97
|
-
* Injection token that can be used to query for a `MatSliderThumb`.
|
|
98
|
-
* Used primarily to avoid circular imports.
|
|
99
|
-
* @docs-private
|
|
100
|
-
*/
|
|
101
|
-
const MAT_SLIDER_THUMB = new InjectionToken('_MatSliderThumb');
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* @license
|
|
105
|
-
* Copyright Google LLC All Rights Reserved.
|
|
106
|
-
*
|
|
107
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
108
|
-
* found in the LICENSE file at https://angular.io/license
|
|
109
|
-
*/
|
|
110
|
-
class Signal {
|
|
111
|
-
constructor(value) {
|
|
112
|
-
this.value = value;
|
|
113
|
-
}
|
|
114
|
-
set(value) {
|
|
115
|
-
this.value = value;
|
|
116
|
-
}
|
|
117
|
-
update(updateFn) {
|
|
118
|
-
this.set(updateFn(this.value));
|
|
119
|
-
}
|
|
120
|
-
asReadonly() {
|
|
121
|
-
return this;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
/**
|
|
125
|
-
* Provider that allows the slider thumb to register as a ControlValueAccessor.
|
|
126
|
-
* @docs-private
|
|
127
|
-
*/
|
|
128
|
-
const MAT_SLIDER_THUMB_VALUE_ACCESSOR = {
|
|
129
|
-
provide: NG_VALUE_ACCESSOR,
|
|
130
|
-
useExisting: forwardRef(() => MatSliderThumb),
|
|
131
|
-
multi: true,
|
|
132
|
-
};
|
|
133
|
-
/**
|
|
134
|
-
* Directive that adds slider-specific behaviors to an input element inside `<mat-slider>`.
|
|
135
|
-
* Up to two may be placed inside of a `<mat-slider>`.
|
|
136
|
-
*
|
|
137
|
-
* If one is used, the selector `matSliderThumb` must be used, and the outcome will be a normal
|
|
138
|
-
* slider. If two are used, the selectors `matSliderStartThumb` and `matSliderEndThumb` must be
|
|
139
|
-
* used, and the outcome will be a range slider with two slider thumbs.
|
|
140
|
-
* @ignore
|
|
141
|
-
*/
|
|
142
|
-
class MatSliderThumb {
|
|
143
|
-
constructor(_ngZone, _elementRef, _cdr, _slider) {
|
|
144
|
-
this._ngZone = _ngZone;
|
|
145
|
-
this._elementRef = _elementRef;
|
|
146
|
-
this._cdr = _cdr;
|
|
147
|
-
this._slider = _slider;
|
|
148
|
-
/** Event emitted when the `value` is changed. */
|
|
149
|
-
this.valueChange = new EventEmitter();
|
|
150
|
-
/** Event emitted when the slider thumb starts being dragged. */
|
|
151
|
-
this.dragStart = new EventEmitter();
|
|
152
|
-
/** Event emitted when the slider thumb stops being dragged. */
|
|
153
|
-
this.dragEnd = new EventEmitter();
|
|
154
|
-
/**
|
|
155
|
-
* Indicates whether this thumb is the start or end thumb.
|
|
156
|
-
* @docs-private
|
|
157
|
-
*/
|
|
158
|
-
this.thumbPosition = 2 /* END */;
|
|
159
|
-
/** The aria-valuetext string representation of the input's value. */
|
|
160
|
-
this._valuetext = +VERSION.major >= 18 ? new Signal('') : '';
|
|
161
|
-
/** The radius of a native html slider's knob. */
|
|
162
|
-
this._knobRadius = 8;
|
|
163
|
-
/** Whether user's cursor is currently in a mouse down state on the input. */
|
|
164
|
-
this._isActive = false;
|
|
165
|
-
/** Whether the input is currently focused (either by tab or after clicking). */
|
|
166
|
-
this._isFocused = false;
|
|
167
|
-
/**
|
|
168
|
-
* Whether the initial value has been set.
|
|
169
|
-
* This exists because the initial value cannot be immediately set because the min and max
|
|
170
|
-
* must first be relayed from the parent MatSlider component, which can only happen later
|
|
171
|
-
* in the component lifecycle.
|
|
172
|
-
*/
|
|
173
|
-
this._hasSetInitialValue = false;
|
|
174
|
-
/** Emits when the component is destroyed. */
|
|
175
|
-
this._destroyed = new Subject();
|
|
176
|
-
/**
|
|
177
|
-
* Indicates whether UI updates should be skipped.
|
|
178
|
-
*
|
|
179
|
-
* This flag is used to avoid flickering
|
|
180
|
-
* when correcting values on pointer up/down.
|
|
181
|
-
*/
|
|
182
|
-
this._skipUIUpdate = false;
|
|
183
|
-
/** Callback called when the slider input value changes. */
|
|
184
|
-
this._onChangeFn = () => { };
|
|
185
|
-
/** Callback called when the slider input has been touched. */
|
|
186
|
-
this._onTouchedFn = () => { };
|
|
187
|
-
this._hostElement = _elementRef.nativeElement;
|
|
188
|
-
this._onPointerDown = this._onPointerDown.bind(this);
|
|
189
|
-
this._onPointerMove = this._onPointerMove.bind(this);
|
|
190
|
-
this._onPointerUp = this._onPointerUp.bind(this);
|
|
191
|
-
this._ngZone.runOutsideAngular(() => {
|
|
192
|
-
this._hostElement.addEventListener('pointerdown', this._onPointerDown);
|
|
193
|
-
this._hostElement.addEventListener('pointermove', this._onPointerMove);
|
|
194
|
-
this._hostElement.addEventListener('pointerup', this._onPointerUp);
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
get value() {
|
|
198
|
-
return coerceNumberProperty(this._hostElement.value);
|
|
199
|
-
}
|
|
200
|
-
set value(v) {
|
|
201
|
-
const val = coerceNumberProperty(v).toString();
|
|
202
|
-
if (!this._hasSetInitialValue) {
|
|
203
|
-
this._initialValue = val;
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
if (this._isActive) {
|
|
207
|
-
return;
|
|
208
|
-
}
|
|
209
|
-
this._hostElement.value = val;
|
|
210
|
-
this._updateThumbUIByValue();
|
|
211
|
-
this._slider._onValueChange(this);
|
|
212
|
-
this._cdr.detectChanges();
|
|
213
|
-
}
|
|
214
|
-
/**
|
|
215
|
-
* The current translateX in px of the slider visual thumb.
|
|
216
|
-
* @docs-private
|
|
217
|
-
*/
|
|
218
|
-
get translateX() {
|
|
219
|
-
if (this._slider.min >= this._slider.max) {
|
|
220
|
-
this._translateX = 0;
|
|
221
|
-
return this._translateX;
|
|
222
|
-
}
|
|
223
|
-
if (this._translateX === undefined) {
|
|
224
|
-
this._translateX = this._calcTranslateXByValue();
|
|
225
|
-
}
|
|
226
|
-
return this._translateX;
|
|
227
|
-
}
|
|
228
|
-
set translateX(v) {
|
|
229
|
-
this._translateX = v;
|
|
230
|
-
}
|
|
231
|
-
/** @docs-private */
|
|
232
|
-
get min() {
|
|
233
|
-
return coerceNumberProperty(this._hostElement.min);
|
|
234
|
-
}
|
|
235
|
-
set min(v) {
|
|
236
|
-
this._hostElement.min = coerceNumberProperty(v).toString();
|
|
237
|
-
this._cdr.detectChanges();
|
|
238
|
-
}
|
|
239
|
-
/** @docs-private */
|
|
240
|
-
get max() {
|
|
241
|
-
return coerceNumberProperty(this._hostElement.max);
|
|
242
|
-
}
|
|
243
|
-
set max(v) {
|
|
244
|
-
this._hostElement.max = coerceNumberProperty(v).toString();
|
|
245
|
-
this._cdr.detectChanges();
|
|
246
|
-
}
|
|
247
|
-
get step() {
|
|
248
|
-
return coerceNumberProperty(this._hostElement.step);
|
|
249
|
-
}
|
|
250
|
-
set step(v) {
|
|
251
|
-
this._hostElement.step = coerceNumberProperty(v).toString();
|
|
252
|
-
this._cdr.detectChanges();
|
|
253
|
-
}
|
|
254
|
-
/** @docs-private */
|
|
255
|
-
get disabled() {
|
|
256
|
-
return coerceBooleanProperty(this._hostElement.disabled);
|
|
257
|
-
}
|
|
258
|
-
set disabled(v) {
|
|
259
|
-
this._hostElement.disabled = coerceBooleanProperty(v);
|
|
260
|
-
this._cdr.detectChanges();
|
|
261
|
-
if (this._slider.disabled !== this.disabled) {
|
|
262
|
-
this._slider.disabled = this.disabled;
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
/** The percentage of the slider that coincides with the value. */
|
|
266
|
-
get percentage() {
|
|
267
|
-
if (this._slider.min >= this._slider.max) {
|
|
268
|
-
return this._slider._isRtl ? 1 : 0;
|
|
269
|
-
}
|
|
270
|
-
return (this.value - this._slider.min) / (this._slider.max - this._slider.min);
|
|
271
|
-
}
|
|
272
|
-
/** @docs-private */
|
|
273
|
-
get fillPercentage() {
|
|
274
|
-
if (!this._slider._cachedWidth) {
|
|
275
|
-
return this._slider._isRtl ? 1 : 0;
|
|
276
|
-
}
|
|
277
|
-
if (this._translateX === 0) {
|
|
278
|
-
return 0;
|
|
279
|
-
}
|
|
280
|
-
return this.translateX / this._slider._cachedWidth;
|
|
281
|
-
}
|
|
282
|
-
get valuetext() {
|
|
283
|
-
return +VERSION.major >= 18 ? this._valuetext.value : this._valuetext;
|
|
284
|
-
}
|
|
285
|
-
/** Used to relay updates to _isFocused to the slider visual thumbs. */
|
|
286
|
-
_setIsFocused(v) {
|
|
287
|
-
this._isFocused = v;
|
|
288
|
-
}
|
|
289
|
-
ngOnDestroy() {
|
|
290
|
-
this._hostElement.removeEventListener('pointerdown', this._onPointerDown);
|
|
291
|
-
this._hostElement.removeEventListener('pointermove', this._onPointerMove);
|
|
292
|
-
this._hostElement.removeEventListener('pointerup', this._onPointerUp);
|
|
293
|
-
this._destroyed.next();
|
|
294
|
-
this._destroyed.complete();
|
|
295
|
-
this.dragStart.complete();
|
|
296
|
-
this.dragEnd.complete();
|
|
297
|
-
}
|
|
298
|
-
/** @docs-private */
|
|
299
|
-
initProps() {
|
|
300
|
-
this._updateWidthInactive();
|
|
301
|
-
// If this or the parent slider is disabled, just make everything disabled.
|
|
302
|
-
if (this.disabled !== this._slider.disabled) {
|
|
303
|
-
// The MatSlider setter for disabled will relay this and disable both inputs.
|
|
304
|
-
this._slider.disabled = true;
|
|
305
|
-
}
|
|
306
|
-
this.step = this._slider.step;
|
|
307
|
-
this.min = this._slider.min;
|
|
308
|
-
this.max = this._slider.max;
|
|
309
|
-
this._initValue();
|
|
310
|
-
}
|
|
311
|
-
/** @docs-private */
|
|
312
|
-
initUI() {
|
|
313
|
-
this._updateThumbUIByValue();
|
|
314
|
-
}
|
|
315
|
-
_initValue() {
|
|
316
|
-
this._hasSetInitialValue = true;
|
|
317
|
-
if (this._initialValue === undefined) {
|
|
318
|
-
this.value = this._getDefaultValue();
|
|
319
|
-
}
|
|
320
|
-
else {
|
|
321
|
-
this._hostElement.value = this._initialValue;
|
|
322
|
-
this._updateThumbUIByValue();
|
|
323
|
-
this._slider._onValueChange(this);
|
|
324
|
-
this._cdr.detectChanges();
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
_getDefaultValue() {
|
|
328
|
-
return this.min;
|
|
329
|
-
}
|
|
330
|
-
_onBlur() {
|
|
331
|
-
this._setIsFocused(false);
|
|
332
|
-
this._onTouchedFn();
|
|
333
|
-
}
|
|
334
|
-
_onFocus() {
|
|
335
|
-
this._setIsFocused(true);
|
|
336
|
-
}
|
|
337
|
-
_onChange() {
|
|
338
|
-
this.valueChange.emit(this.value);
|
|
339
|
-
// only used to handle the edge case where user
|
|
340
|
-
// mousedown on the slider then uses arrow keys.
|
|
341
|
-
if (this._isActive) {
|
|
342
|
-
this._updateThumbUIByValue({ withAnimation: true });
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
_onInput() {
|
|
346
|
-
this._onChangeFn(this.value);
|
|
347
|
-
// handles arrowing and updating the value when
|
|
348
|
-
// a step is defined.
|
|
349
|
-
if (this._slider.step || !this._isActive) {
|
|
350
|
-
this._updateThumbUIByValue({ withAnimation: true });
|
|
351
|
-
}
|
|
352
|
-
this._slider._onValueChange(this);
|
|
353
|
-
}
|
|
354
|
-
_onNgControlValueChange() {
|
|
355
|
-
// only used to handle when the value change
|
|
356
|
-
// originates outside of the slider.
|
|
357
|
-
if (!this._isActive || !this._isFocused) {
|
|
358
|
-
this._slider._onValueChange(this);
|
|
359
|
-
this._updateThumbUIByValue();
|
|
360
|
-
}
|
|
361
|
-
this._slider.disabled = this._formControl.disabled;
|
|
362
|
-
}
|
|
363
|
-
_onPointerDown(event) {
|
|
364
|
-
if (this.disabled || event.button !== 0) {
|
|
365
|
-
return;
|
|
366
|
-
}
|
|
367
|
-
this._isActive = true;
|
|
368
|
-
this._setIsFocused(true);
|
|
369
|
-
this._updateWidthActive();
|
|
370
|
-
this._slider._updateDimensions();
|
|
371
|
-
// Does nothing if a step is defined because we
|
|
372
|
-
// want the value to snap to the values on input.
|
|
373
|
-
if (!this._slider.step) {
|
|
374
|
-
this._updateThumbUIByPointerEvent(event, { withAnimation: true });
|
|
375
|
-
}
|
|
376
|
-
if (!this.disabled) {
|
|
377
|
-
this._handleValueCorrection(event);
|
|
378
|
-
this.dragStart.emit({ source: this, parent: this._slider, value: this.value });
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
/**
|
|
382
|
-
* Corrects the value of the slider on pointer up/down.
|
|
383
|
-
*
|
|
384
|
-
* Called on pointer down and up because the value is set based
|
|
385
|
-
* on the inactive width instead of the active width.
|
|
386
|
-
*/
|
|
387
|
-
_handleValueCorrection(event) {
|
|
388
|
-
// Don't update the UI with the current value! The value on pointerdown
|
|
389
|
-
// and pointerup is calculated in the split second before the input(s)
|
|
390
|
-
// resize. See _updateWidthInactive() and _updateWidthActive() for more
|
|
391
|
-
// details.
|
|
392
|
-
this._skipUIUpdate = true;
|
|
393
|
-
// Note that this function gets triggered before the actual value of the
|
|
394
|
-
// slider is updated. This means if we were to set the value here, it
|
|
395
|
-
// would immediately be overwritten. Using setTimeout ensures the setting
|
|
396
|
-
// of the value happens after the value has been updated by the
|
|
397
|
-
// pointerdown event.
|
|
398
|
-
setTimeout(() => {
|
|
399
|
-
this._skipUIUpdate = false;
|
|
400
|
-
this._fixValue(event);
|
|
401
|
-
}, 0);
|
|
402
|
-
}
|
|
403
|
-
/** Corrects the value of the slider based on the pointer event's position. */
|
|
404
|
-
_fixValue(event) {
|
|
405
|
-
const xPos = event.clientX - this._slider._cachedLeft;
|
|
406
|
-
const width = this._slider._cachedWidth;
|
|
407
|
-
const step = this._slider.step === 0 ? 1 : this._slider.step;
|
|
408
|
-
const numSteps = Math.floor((this._slider.max - this._slider.min) / step);
|
|
409
|
-
const percentage = this._slider._isRtl ? 1 - xPos / width : xPos / width;
|
|
410
|
-
// To ensure the percentage is rounded to the necessary number of decimals.
|
|
411
|
-
const fixedPercentage = Math.round(percentage * numSteps) / numSteps;
|
|
412
|
-
const impreciseValue = fixedPercentage * (this._slider.max - this._slider.min) + this._slider.min;
|
|
413
|
-
const value = Math.round(impreciseValue / step) * step;
|
|
414
|
-
const prevValue = this.value;
|
|
415
|
-
if (value === prevValue) {
|
|
416
|
-
// Because we prevented UI updates, if it turns out that the race
|
|
417
|
-
// condition didn't happen and the value is already correct, we
|
|
418
|
-
// have to apply the ui updates now.
|
|
419
|
-
this._slider._onValueChange(this);
|
|
420
|
-
this._slider.step > 0
|
|
421
|
-
? this._updateThumbUIByValue()
|
|
422
|
-
: this._updateThumbUIByPointerEvent(event, { withAnimation: this._slider._hasAnimation });
|
|
423
|
-
return;
|
|
424
|
-
}
|
|
425
|
-
this.value = value;
|
|
426
|
-
this.valueChange.emit(this.value);
|
|
427
|
-
this._onChangeFn(this.value);
|
|
428
|
-
this._slider._onValueChange(this);
|
|
429
|
-
this._slider.step > 0
|
|
430
|
-
? this._updateThumbUIByValue()
|
|
431
|
-
: this._updateThumbUIByPointerEvent(event, { withAnimation: this._slider._hasAnimation });
|
|
432
|
-
}
|
|
433
|
-
_onPointerMove(event) {
|
|
434
|
-
// Again, does nothing if a step is defined because
|
|
435
|
-
// we want the value to snap to the values on input.
|
|
436
|
-
if (!this._slider.step && this._isActive) {
|
|
437
|
-
this._updateThumbUIByPointerEvent(event);
|
|
438
|
-
}
|
|
439
|
-
}
|
|
440
|
-
_onPointerUp() {
|
|
441
|
-
if (this._isActive) {
|
|
442
|
-
this._isActive = false;
|
|
443
|
-
this.dragEnd.emit({ source: this, parent: this._slider, value: this.value });
|
|
444
|
-
setTimeout(() => this._updateWidthInactive());
|
|
445
|
-
}
|
|
446
|
-
}
|
|
447
|
-
_clamp(v) {
|
|
448
|
-
return Math.max(Math.min(v, this._slider._cachedWidth), 0);
|
|
449
|
-
}
|
|
450
|
-
_calcTranslateXByValue() {
|
|
451
|
-
if (this._slider._isRtl) {
|
|
452
|
-
return (1 - this.percentage) * this._slider._cachedWidth;
|
|
453
|
-
}
|
|
454
|
-
return this.percentage * this._slider._cachedWidth;
|
|
455
|
-
}
|
|
456
|
-
_calcTranslateXByPointerEvent(event) {
|
|
457
|
-
return event.clientX - this._slider._cachedLeft;
|
|
458
|
-
}
|
|
459
|
-
/**
|
|
460
|
-
* Used to set the slider width to the correct
|
|
461
|
-
* dimensions while the user is dragging.
|
|
462
|
-
*/
|
|
463
|
-
_updateWidthActive() {
|
|
464
|
-
this._hostElement.style.padding = `0 ${this._slider._inputPadding}px`;
|
|
465
|
-
this._hostElement.style.width = `calc(100% + ${this._slider._inputPadding}px)`;
|
|
466
|
-
}
|
|
467
|
-
/**
|
|
468
|
-
* Sets the slider input to disproportionate dimensions to allow for touch
|
|
469
|
-
* events to be captured on touch devices.
|
|
470
|
-
*/
|
|
471
|
-
_updateWidthInactive() {
|
|
472
|
-
this._hostElement.style.padding = '0px';
|
|
473
|
-
this._hostElement.style.width = 'calc(100% + 48px)';
|
|
474
|
-
this._hostElement.style.left = '-24px';
|
|
475
|
-
}
|
|
476
|
-
_updateThumbUIByValue(options) {
|
|
477
|
-
this.translateX = this._clamp(this._calcTranslateXByValue());
|
|
478
|
-
this._updateThumbUI(options);
|
|
479
|
-
}
|
|
480
|
-
_updateThumbUIByPointerEvent(event, options) {
|
|
481
|
-
this.translateX = this._clamp(this._calcTranslateXByPointerEvent(event));
|
|
482
|
-
this._updateThumbUI(options);
|
|
483
|
-
}
|
|
484
|
-
_updateThumbUI(options) {
|
|
485
|
-
this._slider._setTransition(!!options?.withAnimation);
|
|
486
|
-
this._slider._onTranslateXChange(this);
|
|
487
|
-
}
|
|
488
|
-
/**
|
|
489
|
-
* Sets the input's value.
|
|
490
|
-
* @param value The new value of the input
|
|
491
|
-
* @docs-private
|
|
492
|
-
*/
|
|
493
|
-
writeValue(value) {
|
|
494
|
-
this.value = value;
|
|
495
|
-
}
|
|
496
|
-
/**
|
|
497
|
-
* Registers a callback to be invoked when the input's value changes from user input.
|
|
498
|
-
* @param fn The callback to register
|
|
499
|
-
* @docs-private
|
|
500
|
-
*/
|
|
501
|
-
registerOnChange(fn) {
|
|
502
|
-
this._onChangeFn = fn;
|
|
503
|
-
}
|
|
504
|
-
/**
|
|
505
|
-
* Registers a callback to be invoked when the input is blurred by the user.
|
|
506
|
-
* @param fn The callback to register
|
|
507
|
-
* @docs-private
|
|
508
|
-
*/
|
|
509
|
-
registerOnTouched(fn) {
|
|
510
|
-
this._onTouchedFn = fn;
|
|
511
|
-
}
|
|
512
|
-
/**
|
|
513
|
-
* Sets the disabled state of the slider.
|
|
514
|
-
* @param isDisabled The new disabled state
|
|
515
|
-
* @docs-private
|
|
516
|
-
*/
|
|
517
|
-
setDisabledState(isDisabled) {
|
|
518
|
-
this.disabled = isDisabled;
|
|
519
|
-
}
|
|
520
|
-
focus() {
|
|
521
|
-
this._hostElement.focus();
|
|
522
|
-
}
|
|
523
|
-
blur() {
|
|
524
|
-
this._hostElement.blur();
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
|
-
MatSliderThumb.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MatSliderThumb, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MatSlider }], target: i0.ɵɵFactoryTarget.Directive });
|
|
528
|
-
MatSliderThumb.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: { value: "value" }, outputs: { valueChange: "valueChange", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { attributes: { "type": "range" }, listeners: { "change": "_onChange()", "input": "_onInput()", "blur": "_onBlur()", "focus": "_onFocus()" }, properties: { "attr.aria-valuetext": "valuetext" }, classAttribute: "mdc-slider__input" }, providers: [MAT_SLIDER_THUMB_VALUE_ACCESSOR, { provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb }], exportAs: ["matSliderThumb"], ngImport: i0 });
|
|
529
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MatSliderThumb, decorators: [{
|
|
530
|
-
type: Directive,
|
|
531
|
-
args: [{
|
|
532
|
-
// eslint-disable-next-line
|
|
533
|
-
selector: 'input[matSliderThumb]',
|
|
534
|
-
exportAs: 'matSliderThumb',
|
|
535
|
-
host: {
|
|
536
|
-
class: 'mdc-slider__input',
|
|
537
|
-
type: 'range',
|
|
538
|
-
'[attr.aria-valuetext]': 'valuetext',
|
|
539
|
-
'(change)': '_onChange()',
|
|
540
|
-
'(input)': '_onInput()',
|
|
541
|
-
// TODO(wagnermaciel): Consider using a global event listener instead.
|
|
542
|
-
// Reason: I have found a semi-consistent way to mouse up without triggering this event.
|
|
543
|
-
'(blur)': '_onBlur()',
|
|
544
|
-
'(focus)': '_onFocus()',
|
|
545
|
-
},
|
|
546
|
-
providers: [MAT_SLIDER_THUMB_VALUE_ACCESSOR, { provide: MAT_SLIDER_THUMB, useExisting: MatSliderThumb }],
|
|
547
|
-
}]
|
|
548
|
-
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
549
|
-
type: Inject,
|
|
550
|
-
args: [MatSlider]
|
|
551
|
-
}] }]; }, propDecorators: { value: [{
|
|
552
|
-
type: Input
|
|
553
|
-
}], valueChange: [{
|
|
554
|
-
type: Output
|
|
555
|
-
}], dragStart: [{
|
|
556
|
-
type: Output
|
|
557
|
-
}], dragEnd: [{
|
|
558
|
-
type: Output
|
|
559
|
-
}] } });
|
|
560
|
-
|
|
561
|
-
/**
|
|
562
|
-
* @ignore
|
|
563
|
-
*/
|
|
564
|
-
class FormlyFieldMDCSlider extends FormlyFieldSlider$2 {
|
|
565
|
-
set mdcSlider(slider) {
|
|
566
|
-
Object.defineProperty(slider, '_input', {
|
|
567
|
-
set: () => { },
|
|
568
|
-
get: () => this.sliderThumb,
|
|
569
|
-
});
|
|
570
|
-
const visualThumb = {
|
|
571
|
-
_hostElement: {
|
|
572
|
-
classList: {
|
|
573
|
-
add: () => { },
|
|
574
|
-
remove: () => { },
|
|
575
|
-
},
|
|
576
|
-
},
|
|
577
|
-
};
|
|
578
|
-
// workarround for "ERROR TypeError: visualThumb is undefined" when `discrete` is set to `true`
|
|
579
|
-
slider._thumbs = { first: visualThumb, last: visualThumb };
|
|
580
|
-
}
|
|
581
|
-
onContainerClick(event) {
|
|
582
|
-
this.sliderThumb?._hostElement.focus();
|
|
583
|
-
super.onContainerClick(event);
|
|
584
|
-
}
|
|
585
|
-
}
|
|
586
|
-
FormlyFieldMDCSlider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyFieldMDCSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
587
|
-
FormlyFieldMDCSlider.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FormlyFieldMDCSlider, selector: "formly-field-mat-slider", viewQueries: [{ propertyName: "sliderThumb", first: true, predicate: MAT_SLIDER_THUMB, descendants: true, static: true }, { propertyName: "mdcSlider", first: true, predicate: MatSlider, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
|
|
588
|
-
<mat-slider
|
|
589
|
-
[id]="id"
|
|
590
|
-
[style.width]="'100%'"
|
|
591
|
-
[formlyAttributes]="field"
|
|
592
|
-
[tabIndex]="props.tabindex"
|
|
593
|
-
[color]="props.color"
|
|
594
|
-
[displayWith]="props.displayWith"
|
|
595
|
-
[invert]="props.invert"
|
|
596
|
-
[max]="props.max"
|
|
597
|
-
[min]="props.min"
|
|
598
|
-
[step]="props.step"
|
|
599
|
-
[discrete]="props.thumbLabel || props.discrete"
|
|
600
|
-
[showTickMarks]="props.showTickMarks"
|
|
601
|
-
[step]="props.step"
|
|
602
|
-
[tickInterval]="props.tickInterval"
|
|
603
|
-
[valueText]="props.valueText"
|
|
604
|
-
[vertical]="props.vertical"
|
|
605
|
-
(input)="props.input && props.input(field, $event)"
|
|
606
|
-
(change)="props.change && props.change(field, $event)"
|
|
607
|
-
>
|
|
608
|
-
<input matSliderThumb [formControl]="formControl" [formlyAttributes]="field" />
|
|
609
|
-
</mat-slider>
|
|
610
|
-
`, isInline: true, components: [{ type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
611
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyFieldMDCSlider, decorators: [{
|
|
612
|
-
type: Component,
|
|
613
|
-
args: [{
|
|
614
|
-
selector: 'formly-field-mat-slider',
|
|
615
|
-
template: `
|
|
616
|
-
<mat-slider
|
|
617
|
-
[id]="id"
|
|
618
|
-
[style.width]="'100%'"
|
|
619
|
-
[formlyAttributes]="field"
|
|
620
|
-
[tabIndex]="props.tabindex"
|
|
621
|
-
[color]="props.color"
|
|
622
|
-
[displayWith]="props.displayWith"
|
|
623
|
-
[invert]="props.invert"
|
|
624
|
-
[max]="props.max"
|
|
625
|
-
[min]="props.min"
|
|
626
|
-
[step]="props.step"
|
|
627
|
-
[discrete]="props.thumbLabel || props.discrete"
|
|
628
|
-
[showTickMarks]="props.showTickMarks"
|
|
629
|
-
[step]="props.step"
|
|
630
|
-
[tickInterval]="props.tickInterval"
|
|
631
|
-
[valueText]="props.valueText"
|
|
632
|
-
[vertical]="props.vertical"
|
|
633
|
-
(input)="props.input && props.input(field, $event)"
|
|
634
|
-
(change)="props.change && props.change(field, $event)"
|
|
635
|
-
>
|
|
636
|
-
<input matSliderThumb [formControl]="formControl" [formlyAttributes]="field" />
|
|
637
|
-
</mat-slider>
|
|
638
|
-
`,
|
|
639
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
640
|
-
}]
|
|
641
|
-
}], propDecorators: { sliderThumb: [{
|
|
642
|
-
type: ViewChild,
|
|
643
|
-
args: [MAT_SLIDER_THUMB, { static: true }]
|
|
644
|
-
}], mdcSlider: [{
|
|
645
|
-
type: ViewChild,
|
|
646
|
-
args: [MatSlider, { static: true }]
|
|
647
|
-
}] } });
|
|
648
|
-
|
|
649
|
-
const FormlyFieldSlider$1 = Number(VERSION$1.major) >= 15 ? FormlyFieldMDCSlider : FormlyFieldSlider$2;
|
|
650
|
-
class FormlyMatSliderModule {
|
|
651
|
-
}
|
|
652
|
-
FormlyMatSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyMatSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
653
|
-
FormlyMatSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyMatSliderModule, declarations: [FormlyFieldSlider$2, FormlyFieldMDCSlider, MatSliderThumb], imports: [CommonModule,
|
|
654
|
-
MatCommonModule,
|
|
655
|
-
MatRippleModule,
|
|
656
|
-
ReactiveFormsModule,
|
|
657
|
-
MatSliderModule,
|
|
658
|
-
FormlyMatFormFieldModule, i3.FormlyModule] });
|
|
659
|
-
FormlyMatSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyMatSliderModule, imports: [[
|
|
660
|
-
CommonModule,
|
|
661
|
-
MatCommonModule,
|
|
662
|
-
MatRippleModule,
|
|
663
|
-
ReactiveFormsModule,
|
|
664
|
-
MatSliderModule,
|
|
665
|
-
FormlyMatFormFieldModule,
|
|
666
|
-
FormlyModule.forChild({
|
|
667
|
-
types: [
|
|
668
|
-
{
|
|
669
|
-
name: 'slider',
|
|
670
|
-
component: FormlyFieldSlider$1,
|
|
671
|
-
wrappers: ['form-field'],
|
|
672
|
-
},
|
|
673
|
-
],
|
|
674
|
-
}),
|
|
675
|
-
]] });
|
|
676
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormlyMatSliderModule, decorators: [{
|
|
677
|
-
type: NgModule,
|
|
678
|
-
args: [{
|
|
679
|
-
declarations: [FormlyFieldSlider$2, FormlyFieldMDCSlider, MatSliderThumb],
|
|
680
|
-
imports: [
|
|
681
|
-
CommonModule,
|
|
682
|
-
MatCommonModule,
|
|
683
|
-
MatRippleModule,
|
|
684
|
-
ReactiveFormsModule,
|
|
685
|
-
MatSliderModule,
|
|
686
|
-
FormlyMatFormFieldModule,
|
|
687
|
-
FormlyModule.forChild({
|
|
688
|
-
types: [
|
|
689
|
-
{
|
|
690
|
-
name: 'slider',
|
|
691
|
-
component: FormlyFieldSlider$1,
|
|
692
|
-
wrappers: ['form-field'],
|
|
693
|
-
},
|
|
694
|
-
],
|
|
695
|
-
}),
|
|
696
|
-
],
|
|
697
|
-
schemas: [NO_ERRORS_SCHEMA],
|
|
698
|
-
}]
|
|
699
|
-
}] });
|
|
700
|
-
|
|
701
|
-
const FormlyFieldSlider = Number(VERSION$1.major) >= 15 ? FormlyFieldMDCSlider : FormlyFieldSlider$2;
|
|
702
|
-
|
|
703
|
-
/**
|
|
704
|
-
* Generated bundle index. Do not edit.
|
|
705
|
-
*/
|
|
706
|
-
|
|
707
|
-
export { FormlyFieldSlider, FormlyMatSliderModule };
|
|
708
|
-
//# sourceMappingURL=ngx-formly-material-slider.mjs.map
|