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