@ngx-formly/material 6.3.10 → 7.0.0-alpha.0

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