@tft/crispr-forms 14.0.1-rc.2 → 14.0.2

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 (174) hide show
  1. package/esm2020/src/lib/crispr-forms.module.mjs +5 -2
  2. package/esm2020/src/lib/display-field.directive.mjs +53 -0
  3. package/esm2020/src/lib/field-component-map.const.mjs +18 -18
  4. package/esm2020/src/lib/field.directive.mjs +2 -2
  5. package/esm2020/src/lib/form-group-list/form-group-list.component.mjs +9 -3
  6. package/esm2020/ui/autocomplete-chiplist-field/autocomplete-chiplist-field.component.mjs +9 -6
  7. package/esm2020/ui/autocomplete-chiplist-field/public-api.mjs +2 -0
  8. package/esm2020/ui/autocomplete-chiplist-field/tft-crispr-forms-ui-autocomplete-chiplist-field.mjs +5 -0
  9. package/esm2020/ui/autocomplete-field/autocomplete-field.component.mjs +8 -5
  10. package/esm2020/ui/autocomplete-field/public-api.mjs +2 -0
  11. package/esm2020/ui/autocomplete-field/tft-crispr-forms-ui-autocomplete-field.mjs +5 -0
  12. package/esm2020/ui/button/button.component.mjs +5 -2
  13. package/esm2020/ui/button/public-api.mjs +2 -0
  14. package/esm2020/ui/button/tft-crispr-forms-ui-button.mjs +5 -0
  15. package/esm2020/ui/checkbox-field/checkbox-field.component.mjs +7 -7
  16. package/esm2020/ui/checkbox-field/public-api.mjs +2 -0
  17. package/esm2020/ui/checkbox-field/tft-crispr-forms-ui-checkbox-field.mjs +5 -0
  18. package/esm2020/ui/datepicker-field/datepicker-field.component.mjs +8 -5
  19. package/esm2020/ui/datepicker-field/public-api.mjs +2 -0
  20. package/esm2020/ui/datepicker-field/tft-crispr-forms-ui-datepicker-field.mjs +5 -0
  21. package/esm2020/ui/divider/public-api.mjs +2 -0
  22. package/esm2020/ui/divider/tft-crispr-forms-ui-divider.mjs +5 -0
  23. package/esm2020/ui/{file-upload/file-upload.component.mjs → file-upload-field/file-upload-field.component.mjs} +3 -3
  24. package/esm2020/ui/file-upload-field/public-api.mjs +2 -0
  25. package/esm2020/ui/file-upload-field/tft-crispr-forms-ui-file-upload-field.mjs +5 -0
  26. package/esm2020/ui/input-field/input-field.component.mjs +7 -4
  27. package/esm2020/ui/input-field/public-api.mjs +2 -0
  28. package/esm2020/ui/input-field/tft-crispr-forms-ui-input-field.mjs +5 -0
  29. package/esm2020/ui/option/public-api.mjs +2 -0
  30. package/esm2020/ui/option/tft-crispr-forms-ui-option.mjs +5 -0
  31. package/esm2020/ui/public-api.mjs +1 -15
  32. package/esm2020/ui/radio-field/public-api.mjs +2 -0
  33. package/esm2020/ui/radio-field/radio-field.component.mjs +7 -4
  34. package/esm2020/ui/radio-field/tft-crispr-forms-ui-radio-field.mjs +5 -0
  35. package/esm2020/ui/select-field/public-api.mjs +2 -0
  36. package/esm2020/ui/select-field/select-field.component.mjs +9 -10
  37. package/esm2020/ui/select-field/tft-crispr-forms-ui-select-field.mjs +5 -0
  38. package/esm2020/ui/slider-field/public-api.mjs +2 -0
  39. package/esm2020/ui/slider-field/slider-field.component.mjs +8 -5
  40. package/esm2020/ui/slider-field/tft-crispr-forms-ui-slider-field.mjs +5 -0
  41. package/esm2020/ui/textarea-field/public-api.mjs +2 -0
  42. package/esm2020/ui/textarea-field/textarea-field.component.mjs +6 -3
  43. package/esm2020/ui/textarea-field/tft-crispr-forms-ui-textarea-field.mjs +5 -0
  44. package/esm2020/ui/unit-conversion-field/public-api.mjs +2 -0
  45. package/esm2020/ui/unit-conversion-field/tft-crispr-forms-ui-unit-conversion-field.mjs +5 -0
  46. package/esm2020/ui/unit-conversion-field/unit-conversion-field.component.mjs +7 -4
  47. package/esm2020/utils/abstracts/crispr-display-field.abstract.mjs +14 -0
  48. package/esm2020/utils/abstracts/index.mjs +2 -1
  49. package/esm2020/utils/models/file-upload-field.config.mjs +1 -1
  50. package/esm2020/utils/models/form-group-list.config.mjs +1 -1
  51. package/fesm2015/tft-crispr-forms-ui-autocomplete-chiplist-field.mjs +138 -0
  52. package/fesm2015/tft-crispr-forms-ui-autocomplete-chiplist-field.mjs.map +1 -0
  53. package/fesm2015/tft-crispr-forms-ui-autocomplete-field.mjs +101 -0
  54. package/fesm2015/tft-crispr-forms-ui-autocomplete-field.mjs.map +1 -0
  55. package/fesm2015/tft-crispr-forms-ui-button.mjs +55 -0
  56. package/fesm2015/tft-crispr-forms-ui-button.mjs.map +1 -0
  57. package/fesm2015/tft-crispr-forms-ui-checkbox-field.mjs +49 -0
  58. package/fesm2015/tft-crispr-forms-ui-checkbox-field.mjs.map +1 -0
  59. package/fesm2015/tft-crispr-forms-ui-datepicker-field.mjs +71 -0
  60. package/fesm2015/tft-crispr-forms-ui-datepicker-field.mjs.map +1 -0
  61. package/fesm2015/tft-crispr-forms-ui-divider.mjs +34 -0
  62. package/fesm2015/tft-crispr-forms-ui-divider.mjs.map +1 -0
  63. package/fesm2015/tft-crispr-forms-ui-file-upload-field.mjs +117 -0
  64. package/fesm2015/tft-crispr-forms-ui-file-upload-field.mjs.map +1 -0
  65. package/fesm2015/tft-crispr-forms-ui-input-field.mjs +48 -0
  66. package/fesm2015/tft-crispr-forms-ui-input-field.mjs.map +1 -0
  67. package/fesm2015/tft-crispr-forms-ui-option.mjs +26 -0
  68. package/fesm2015/tft-crispr-forms-ui-option.mjs.map +1 -0
  69. package/fesm2015/tft-crispr-forms-ui-radio-field.mjs +46 -0
  70. package/fesm2015/tft-crispr-forms-ui-radio-field.mjs.map +1 -0
  71. package/fesm2015/tft-crispr-forms-ui-select-field.mjs +81 -0
  72. package/fesm2015/tft-crispr-forms-ui-select-field.mjs.map +1 -0
  73. package/fesm2015/tft-crispr-forms-ui-slider-field.mjs +51 -0
  74. package/fesm2015/tft-crispr-forms-ui-slider-field.mjs.map +1 -0
  75. package/fesm2015/tft-crispr-forms-ui-textarea-field.mjs +49 -0
  76. package/fesm2015/tft-crispr-forms-ui-textarea-field.mjs.map +1 -0
  77. package/fesm2015/tft-crispr-forms-ui-unit-conversion-field.mjs +93 -0
  78. package/fesm2015/tft-crispr-forms-ui-unit-conversion-field.mjs.map +1 -0
  79. package/fesm2015/tft-crispr-forms-ui.mjs +2 -674
  80. package/fesm2015/tft-crispr-forms-ui.mjs.map +1 -1
  81. package/fesm2015/tft-crispr-forms-utils.mjs +11 -1
  82. package/fesm2015/tft-crispr-forms-utils.mjs.map +1 -1
  83. package/fesm2015/tft-crispr-forms.mjs +80 -21
  84. package/fesm2015/tft-crispr-forms.mjs.map +1 -1
  85. package/fesm2020/tft-crispr-forms-ui-autocomplete-chiplist-field.mjs +137 -0
  86. package/fesm2020/tft-crispr-forms-ui-autocomplete-chiplist-field.mjs.map +1 -0
  87. package/fesm2020/tft-crispr-forms-ui-autocomplete-field.mjs +100 -0
  88. package/fesm2020/tft-crispr-forms-ui-autocomplete-field.mjs.map +1 -0
  89. package/fesm2020/tft-crispr-forms-ui-button.mjs +55 -0
  90. package/fesm2020/tft-crispr-forms-ui-button.mjs.map +1 -0
  91. package/fesm2020/tft-crispr-forms-ui-checkbox-field.mjs +49 -0
  92. package/fesm2020/tft-crispr-forms-ui-checkbox-field.mjs.map +1 -0
  93. package/fesm2020/tft-crispr-forms-ui-datepicker-field.mjs +70 -0
  94. package/fesm2020/tft-crispr-forms-ui-datepicker-field.mjs.map +1 -0
  95. package/fesm2020/tft-crispr-forms-ui-divider.mjs +34 -0
  96. package/fesm2020/tft-crispr-forms-ui-divider.mjs.map +1 -0
  97. package/fesm2020/tft-crispr-forms-ui-file-upload-field.mjs +115 -0
  98. package/fesm2020/tft-crispr-forms-ui-file-upload-field.mjs.map +1 -0
  99. package/fesm2020/tft-crispr-forms-ui-input-field.mjs +48 -0
  100. package/fesm2020/tft-crispr-forms-ui-input-field.mjs.map +1 -0
  101. package/fesm2020/tft-crispr-forms-ui-option.mjs +26 -0
  102. package/fesm2020/tft-crispr-forms-ui-option.mjs.map +1 -0
  103. package/fesm2020/tft-crispr-forms-ui-radio-field.mjs +46 -0
  104. package/fesm2020/tft-crispr-forms-ui-radio-field.mjs.map +1 -0
  105. package/fesm2020/tft-crispr-forms-ui-select-field.mjs +80 -0
  106. package/fesm2020/tft-crispr-forms-ui-select-field.mjs.map +1 -0
  107. package/fesm2020/tft-crispr-forms-ui-slider-field.mjs +51 -0
  108. package/fesm2020/tft-crispr-forms-ui-slider-field.mjs.map +1 -0
  109. package/fesm2020/tft-crispr-forms-ui-textarea-field.mjs +49 -0
  110. package/fesm2020/tft-crispr-forms-ui-textarea-field.mjs.map +1 -0
  111. package/fesm2020/tft-crispr-forms-ui-unit-conversion-field.mjs +91 -0
  112. package/fesm2020/tft-crispr-forms-ui-unit-conversion-field.mjs.map +1 -0
  113. package/fesm2020/tft-crispr-forms-ui.mjs +2 -666
  114. package/fesm2020/tft-crispr-forms-ui.mjs.map +1 -1
  115. package/fesm2020/tft-crispr-forms-utils.mjs +11 -1
  116. package/fesm2020/tft-crispr-forms-utils.mjs.map +1 -1
  117. package/fesm2020/tft-crispr-forms.mjs +78 -21
  118. package/fesm2020/tft-crispr-forms.mjs.map +1 -1
  119. package/package.json +114 -4
  120. package/src/lib/crispr-forms.module.d.ts +5 -4
  121. package/src/lib/display-field.directive.d.ts +23 -0
  122. package/src/lib/field-component-map.const.d.ts +31 -18
  123. package/src/lib/form-group-list/form-group-list.component.d.ts +2 -0
  124. package/tft-crispr-forms-14.0.2.tgz +0 -0
  125. package/ui/autocomplete-chiplist-field/index.d.ts +5 -1
  126. package/ui/autocomplete-chiplist-field/public-api.d.ts +1 -0
  127. package/ui/autocomplete-field/index.d.ts +5 -1
  128. package/ui/autocomplete-field/public-api.d.ts +1 -0
  129. package/ui/button/index.d.ts +5 -1
  130. package/ui/button/public-api.d.ts +1 -0
  131. package/ui/checkbox-field/index.d.ts +5 -1
  132. package/ui/checkbox-field/public-api.d.ts +1 -0
  133. package/ui/datepicker-field/index.d.ts +5 -1
  134. package/ui/datepicker-field/public-api.d.ts +1 -0
  135. package/ui/divider/index.d.ts +5 -1
  136. package/ui/divider/public-api.d.ts +1 -0
  137. package/ui/file-upload-field/index.d.ts +5 -0
  138. package/ui/file-upload-field/public-api.d.ts +1 -0
  139. package/ui/input-field/index.d.ts +5 -1
  140. package/ui/input-field/public-api.d.ts +1 -0
  141. package/ui/option/index.d.ts +5 -1
  142. package/ui/option/public-api.d.ts +1 -0
  143. package/ui/public-api.d.ts +0 -14
  144. package/ui/radio-field/index.d.ts +5 -1
  145. package/ui/radio-field/public-api.d.ts +1 -0
  146. package/ui/select-field/index.d.ts +5 -1
  147. package/ui/select-field/public-api.d.ts +1 -0
  148. package/ui/slider-field/index.d.ts +5 -1
  149. package/ui/slider-field/public-api.d.ts +1 -0
  150. package/ui/textarea-field/index.d.ts +5 -1
  151. package/ui/textarea-field/public-api.d.ts +1 -0
  152. package/ui/unit-conversion-field/index.d.ts +5 -1
  153. package/ui/unit-conversion-field/public-api.d.ts +1 -0
  154. package/utils/abstracts/crispr-display-field.abstract.d.ts +22 -0
  155. package/utils/abstracts/index.d.ts +1 -0
  156. package/utils/models/file-upload-field.config.d.ts +7 -1
  157. package/utils/models/form-group-list.config.d.ts +1 -0
  158. package/esm2020/ui/autocomplete-chiplist-field/index.mjs +0 -2
  159. package/esm2020/ui/autocomplete-field/index.mjs +0 -2
  160. package/esm2020/ui/button/index.mjs +0 -2
  161. package/esm2020/ui/checkbox-field/index.mjs +0 -2
  162. package/esm2020/ui/datepicker-field/index.mjs +0 -2
  163. package/esm2020/ui/divider/index.mjs +0 -2
  164. package/esm2020/ui/file-upload/index.mjs +0 -2
  165. package/esm2020/ui/input-field/index.mjs +0 -2
  166. package/esm2020/ui/option/index.mjs +0 -2
  167. package/esm2020/ui/radio-field/index.mjs +0 -2
  168. package/esm2020/ui/select-field/index.mjs +0 -2
  169. package/esm2020/ui/slider-field/index.mjs +0 -2
  170. package/esm2020/ui/textarea-field/index.mjs +0 -2
  171. package/esm2020/ui/unit-conversion-field/index.mjs +0 -2
  172. package/tft-crispr-forms-14.0.1-rc.2.tgz +0 -0
  173. package/ui/file-upload/index.d.ts +0 -1
  174. /package/ui/{file-upload/file-upload.component.d.ts → file-upload-field/file-upload-field.component.d.ts} +0 -0
@@ -1,676 +1,12 @@
1
- import * as i0 from '@angular/core';
2
- import { Component, ChangeDetectionStrategy, Input, ViewChild, Optional, Self } from '@angular/core';
3
- import * as i4 from '@angular/material/input';
4
- import { MatInputModule } from '@angular/material/input';
5
- import * as i1 from '@angular/common';
6
- import { CommonModule } from '@angular/common';
7
- import { FieldContainerComponent } from '@tft/crispr-forms/ui/field-container';
8
- export * from '@tft/crispr-forms/ui/field-container';
9
- import * as i2 from '@angular/forms';
10
- import { ReactiveFormsModule, FormControl } from '@angular/forms';
11
- import * as i3 from '@angular/material/form-field';
12
- import { MatFormFieldModule } from '@angular/material/form-field';
13
- import { InfoComponent } from '@tft/crispr-forms/ui/info';
14
- export * from '@tft/crispr-forms/ui/info';
15
- import { crisprControlMixin, CrisprFieldComponent, observablifyOptions, DEFAULT_EMPTY_OPTIONS_MESSAGE, AbstractAutocompleteComponent } from '@tft/crispr-forms/utils';
16
- import * as i4$1 from '@angular/material/select';
17
- import { MatSelectModule } from '@angular/material/select';
18
- import * as i2$1 from '@angular/material/checkbox';
19
- import { MatCheckboxModule } from '@angular/material/checkbox';
20
- import * as i4$2 from '@angular/material/core';
21
- import { MatOptionModule } from '@angular/material/core';
22
- import * as i3$1 from '@angular/material/autocomplete';
23
- import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
24
- import { tap, map, startWith } from 'rxjs/operators';
25
- import { BehaviorSubject, combineLatest, of } from 'rxjs';
26
- import { ENTER } from '@angular/cdk/keycodes';
27
- import * as i7 from '@angular/material/chips';
28
- import { MatChipsModule } from '@angular/material/chips';
29
- import * as i3$2 from '@angular/material/icon';
30
- import { MatIconModule } from '@angular/material/icon';
31
- import * as i3$3 from '@angular/material/slider';
32
- import { MatSliderModule } from '@angular/material/slider';
33
- import * as i2$2 from '@angular/material/button';
34
- import { MatButtonModule } from '@angular/material/button';
35
- import * as i4$3 from '@angular/material/tooltip';
36
- import { MatTooltipModule } from '@angular/material/tooltip';
37
- import * as i2$3 from '@angular/material/datepicker';
38
- import { MatDatepickerModule } from '@angular/material/datepicker';
39
- import { MatDateFnsModule } from '@angular/material-date-fns-adapter';
40
- import * as i6 from '@angular/cdk/portal';
41
- import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
42
- import * as i2$4 from '@angular/material/divider';
43
- import { MatDividerModule } from '@angular/material/divider';
44
- import * as i3$4 from '@angular/material/radio';
45
- import { MatRadioModule } from '@angular/material/radio';
46
- import * as i7$1 from '@tft/form-validation-handler';
47
- import { FormValidationHandlerModule } from '@tft/form-validation-handler';
48
- import { FileDropzoneDirective } from '@tft/crispr-forms/ui/file-dropzone';
49
1
  export * from '@tft/crispr-forms/ui/file-dropzone';
50
- import { SelectedFileComponent } from '@tft/crispr-forms/ui/selected-file';
51
2
  export * from '@tft/crispr-forms/ui/selected-file';
3
+ export * from '@tft/crispr-forms/ui/field-container';
52
4
  export * from '@tft/crispr-forms/ui/heading';
53
-
54
- const InputFieldMixin = crisprControlMixin(CrisprFieldComponent);
55
- class InputFieldComponent extends InputFieldMixin {
56
- constructor() {
57
- super();
58
- this.defaultConfig = { inputType: 'text' };
59
- }
60
- ngOnInit() {
61
- super.ngOnInit();
62
- }
63
- }
64
- InputFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
65
- InputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: InputFieldComponent, isStandalone: true, selector: "crispr-input-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label>\n {{config.label}}\n </mat-label>\n <input\n [type]=\"config.inputType\"\n matInput\n [placeholder]=\"config.placeholder\"\n [formControlName]=\"config.controlName\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [maxlength]=\"config.maxLength\"\n [step]=\"config.step\"\n [autofocus]=\"config.autofocus\"\n [pattern]=\"config.pattern\"\n [spellcheck]=\"config.spellcheck\"\n [autocomplete]=\"config.autoComplete\"\n [autocapitalize]=\"config.autoCapitalize\">\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n matSuffix\n *ngIf=\"config.info\"\n [info]=\"config.info\">\n </crispr-info>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n\n\n</crispr-field-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
66
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldComponent, decorators: [{
67
- type: Component,
68
- args: [{ selector: 'crispr-input-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
69
- CommonModule,
70
- InfoComponent,
71
- ReactiveFormsModule,
72
- FieldContainerComponent,
73
- MatFormFieldModule,
74
- MatInputModule,
75
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label>\n {{config.label}}\n </mat-label>\n <input\n [type]=\"config.inputType\"\n matInput\n [placeholder]=\"config.placeholder\"\n [formControlName]=\"config.controlName\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [maxlength]=\"config.maxLength\"\n [step]=\"config.step\"\n [autofocus]=\"config.autofocus\"\n [pattern]=\"config.pattern\"\n [spellcheck]=\"config.spellcheck\"\n [autocomplete]=\"config.autoComplete\"\n [autocapitalize]=\"config.autoCapitalize\">\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n matSuffix\n *ngIf=\"config.info\"\n [info]=\"config.info\">\n </crispr-info>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n\n\n</crispr-field-container>\n" }]
76
- }], ctorParameters: function () { return []; } });
77
-
78
- class OptionComponent {
79
- }
80
- OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
81
- OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: OptionComponent, isStandalone: true, selector: "crispr-option", inputs: { option: "option" }, ngImport: i0, template: "<div>\n <img\n *ngIf=\"option.imageUrl\"\n [src]=\"option.imageUrl\"\n alt=\"image of {{option.label}}\"\n style=\"vertical-align:middle;\"\n aria-hidden\n height=\"25\"/>\n {{option.label}}\n</div>\n\n<crispr-info *ngIf=\"option.info as info\" [info]=\"info\">\n\n</crispr-info>\n", styles: [":host{display:flex;justify-content:space-between}:host img{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
82
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionComponent, decorators: [{
83
- type: Component,
84
- args: [{ selector: 'crispr-option', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
85
- CommonModule,
86
- InfoComponent,
87
- ], template: "<div>\n <img\n *ngIf=\"option.imageUrl\"\n [src]=\"option.imageUrl\"\n alt=\"image of {{option.label}}\"\n style=\"vertical-align:middle;\"\n aria-hidden\n height=\"25\"/>\n {{option.label}}\n</div>\n\n<crispr-info *ngIf=\"option.info as info\" [info]=\"info\">\n\n</crispr-info>\n", styles: [":host{display:flex;justify-content:space-between}:host img{margin-right:4px}\n"] }]
88
- }], propDecorators: { option: [{
89
- type: Input
90
- }] } });
91
-
92
- const SelectFieldMixin = crisprControlMixin(CrisprFieldComponent);
93
- class SelectFieldComponent extends SelectFieldMixin {
94
- constructor() {
95
- super(...arguments);
96
- this.defaultConfig = {
97
- enableToggleAll: false,
98
- color: 'primary'
99
- };
100
- this.allSelected = false;
101
- }
102
- ngOnInit() {
103
- super.ngOnInit();
104
- // options$ can be passed as an array, promise that resolves array, or observable that resolves array
105
- // this functions accounts for all possibilities and converts to observable that resolves array
106
- this.options$ = observablifyOptions(this.config.options, this.group);
107
- }
108
- ngAfterViewInit() {
109
- if (this.config.multiple
110
- && this.config.enableToggleAll
111
- && this.selectField.options?.length === this.value?.length) {
112
- this.allSelected = true;
113
- }
114
- }
115
- toggleAll(isSelected) {
116
- if (isSelected) {
117
- this.selectField.options.forEach(option => option.deselect());
118
- }
119
- else {
120
- this.selectField.options.forEach(option => option.select());
121
- }
122
- this.allSelected = !this.allSelected;
123
- }
124
- }
125
- SelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
126
- SelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SelectFieldComponent, isStandalone: true, selector: "crispr-select-field", viewQueries: [{ propertyName: "selectField", first: true, predicate: ["selectField"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <mat-select\n #selectField\n [formControlName]=\"config.controlName\"\n [placeholder]=\"config.placeholder\"\n [multiple]=\"config.multiple\">\n\n <mat-checkbox\n [color]=\"config.color\"\n [checked]=\"allSelected\"\n *ngIf=\"config?.multiple && config.enableToggleAll\"\n (click)=\"toggleAll(allSelected)\">\n Select All\n </mat-checkbox>\n <mat-option\n *ngFor=\"let option of options$ | async\"\n [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n\n </mat-select>\n\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n *ngIf=\"config.info\"\n matSuffix\n [info]=\"config.info\">\n </crispr-info>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
127
- // CrisprFieldDirective,
128
- FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
129
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldComponent, decorators: [{
130
- type: Component,
131
- args: [{ selector: 'crispr-select-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
132
- CommonModule,
133
- InfoComponent,
134
- OptionComponent,
135
- MatCheckboxModule,
136
- MatSelectModule,
137
- ReactiveFormsModule,
138
- // CrisprFieldDirective,
139
- FieldContainerComponent,
140
- MatFormFieldModule,
141
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <mat-select\n #selectField\n [formControlName]=\"config.controlName\"\n [placeholder]=\"config.placeholder\"\n [multiple]=\"config.multiple\">\n\n <mat-checkbox\n [color]=\"config.color\"\n [checked]=\"allSelected\"\n *ngIf=\"config?.multiple && config.enableToggleAll\"\n (click)=\"toggleAll(allSelected)\">\n Select All\n </mat-checkbox>\n <mat-option\n *ngFor=\"let option of options$ | async\"\n [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n\n </mat-select>\n\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n *ngIf=\"config.info\"\n matSuffix\n [info]=\"config.info\">\n </crispr-info>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"] }]
142
- }], propDecorators: { selectField: [{
143
- type: ViewChild,
144
- args: ['selectField']
145
- }] } });
146
-
147
- const defaultConfig$6 = {
148
- autoActiveFirstOption: true,
149
- typeDebounceTime: 500,
150
- emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE
151
- };
152
- class AutocompleteFieldComponent extends AbstractAutocompleteComponent {
153
- constructor() {
154
- super(...arguments);
155
- this.defaultConfig = defaultConfig$6;
156
- }
157
- ngOnInit() {
158
- super.ngOnInit();
159
- this.clearFieldSubscription = this.autocompleteInputControl.valueChanges.subscribe((text) => {
160
- if (typeof text === 'string' && text?.trim() === '') {
161
- this.control.setValue(null);
162
- }
163
- });
164
- }
165
- ngOnDestroy() {
166
- this.clearFieldSubscription.unsubscribe();
167
- }
168
- setControlValue(value) {
169
- if (this.control && value) {
170
- // sets the initial value on the control if one is passed
171
- this.control.setValue(value.value || '');
172
- this.autocompleteInputControl.setValue(value.label || '');
173
- }
174
- }
175
- /**
176
- * The material autocomplete defaults to displaying the options value instead of its label.
177
- * We only have the value from the selected option to work with, so we have to pass the options
178
- * through a function called in the template and return the function that the material displayWith
179
- * input is expecting.
180
- * @param options the array of options to search for option with corresponding value
181
- */
182
- displayLabel(options) {
183
- if (this.config.displayWith) {
184
- return this.config.displayWith(options);
185
- }
186
- return (value) => {
187
- const label = !!options && Array.isArray(options)
188
- ? options.find((option) => JSON.stringify(option.value) === JSON.stringify(value))?.label : value;
189
- return label;
190
- };
191
- }
192
- handleSelect(event) {
193
- this.control.setValue(event.option.value);
194
- this.autoInputRef.nativeElement.blur();
195
- }
196
- }
197
- AutocompleteFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
198
- AutocompleteFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: AutocompleteFieldComponent, isStandalone: true, selector: "crispr-autocomplete-field", viewQueries: [{ propertyName: "autoInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "autoInputRef", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n\n <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config.controlName\" type=\"text\"/>\n\n <input\n matInput\n [formControl]=\"autocompleteInputControl\"\n [placeholder]=\"config.placeholder\"\n [matAutocomplete]=\"auto\"\n role=\"textbox\"\n type=\"textbox\"\n autocapitalize=\"off\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n #autoInput>\n\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n *ngIf=\"config.info\"\n matSuffix\n [info]=\"config.info \">\n </crispr-info>\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [autoActiveFirstOption]=\"config.autoActiveFirstOption\"\n (optionSelected)=\"handleSelect($event)\"\n [displayWith]=\"displayLabel(options$ | async)\">\n\n <ng-container *ngIf=\"options$ | async as options; else emptyOption\">\n <ng-container *ngIf=\"options.length > 0; else emptyOption\">\n <mat-option\n *ngFor=\"let option of options\"\n [value]=\"option.value\">\n <crispr-option [option]=\"option\"></crispr-option>\n </mat-option>\n </ng-container>\n\n </ng-container>\n <ng-template #emptyOption>\n <mat-option disabled=\"true\">\n {{config.emptyOptionsMessage}}\n </mat-option>\n </ng-template>\n\n </mat-autocomplete>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n</crispr-field-container>\n", styles: [".hidden-error-directive-anchor{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatOptionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
199
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
200
- type: Component,
201
- args: [{ selector: 'crispr-autocomplete-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
202
- CommonModule,
203
- InfoComponent,
204
- OptionComponent,
205
- ReactiveFormsModule,
206
- FieldContainerComponent,
207
- MatAutocompleteModule,
208
- MatInputModule,
209
- MatOptionModule,
210
- ], template: "\n<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n\n <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config.controlName\" type=\"text\"/>\n\n <input\n matInput\n [formControl]=\"autocompleteInputControl\"\n [placeholder]=\"config.placeholder\"\n [matAutocomplete]=\"auto\"\n role=\"textbox\"\n type=\"textbox\"\n autocapitalize=\"off\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n #autoInput>\n\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n *ngIf=\"config.info\"\n matSuffix\n [info]=\"config.info \">\n </crispr-info>\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [autoActiveFirstOption]=\"config.autoActiveFirstOption\"\n (optionSelected)=\"handleSelect($event)\"\n [displayWith]=\"displayLabel(options$ | async)\">\n\n <ng-container *ngIf=\"options$ | async as options; else emptyOption\">\n <ng-container *ngIf=\"options.length > 0; else emptyOption\">\n <mat-option\n *ngFor=\"let option of options\"\n [value]=\"option.value\">\n <crispr-option [option]=\"option\"></crispr-option>\n </mat-option>\n </ng-container>\n\n </ng-container>\n <ng-template #emptyOption>\n <mat-option disabled=\"true\">\n {{config.emptyOptionsMessage}}\n </mat-option>\n </ng-template>\n\n </mat-autocomplete>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n</crispr-field-container>\n", styles: [".hidden-error-directive-anchor{display:none}\n"] }]
211
- }], propDecorators: { autoInput: [{
212
- type: ViewChild,
213
- args: ['autoInput', { read: MatAutocompleteTrigger }]
214
- }], autoInputRef: [{
215
- type: ViewChild,
216
- args: ['autoInput']
217
- }] } });
218
-
219
- const defaultConfig$5 = {
220
- chipsSelectable: true,
221
- areChipsRemovable: true,
222
- tabToSelect: true,
223
- autoActiveFirstOption: true,
224
- imageUrlParam: 'image',
225
- typeDebounceTime: 500,
226
- allowDuplicates: false,
227
- duplicateCompareFunction: (chip, option) => chip.value === option.value,
228
- separatorKeyCodes: [ENTER],
229
- emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
230
- };
231
- class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
232
- constructor() {
233
- super(...arguments);
234
- this.defaultConfig = defaultConfig$5;
235
- this.chips$ = new BehaviorSubject([]);
236
- this.controlValue$ = this.chips$.pipe(tap(chips => {
237
- this.control.setValue(chips.map(chip => chip.value));
238
- }));
239
- }
240
- ngOnInit() {
241
- super.ngOnInit();
242
- this.remainingOptions$ = combineLatest([
243
- this.chips$,
244
- this.options$
245
- ]).pipe(map(([chips, options]) => {
246
- return this.config.allowDuplicates
247
- ? options
248
- : options?.filter(option => {
249
- return !chips.some(chip => this.config.duplicateCompareFunction(chip, option));
250
- });
251
- }));
252
- }
253
- setControlValue(value) {
254
- if (value) {
255
- this.chips$.next(value);
256
- }
257
- }
258
- // handles mat selecting
259
- handleSelect(event) {
260
- const selectedOption = event.option.value;
261
- this.chips$.next([...this.chips$.value, selectedOption]);
262
- this.chipInputRef.nativeElement.value = '';
263
- this.autocompleteInputControl.setValue('');
264
- // setTimeout needed because the panel thinks it's still open at this point
265
- setTimeout(() => this.chipInput.openPanel());
266
- }
267
- /**
268
- * To follow ARIA standards we want to select the active option on blur.
269
- * matChipInputAddOnBlur should do this but it causes buggy behaviour
270
- * @param event blur event that triggers the handle blur
271
- */
272
- handleTab(_event) {
273
- if (this.chipInput.activeOption && (this.config.tabToSelect || this.config.addChipOnBlur)) {
274
- const chip = this.chipInput.activeOption.value;
275
- this.chips$.next([...this.chips$.value, chip]);
276
- }
277
- }
278
- /**
279
- * Handles selection via key tokens passed through separatorKeyCodes propert
280
- * NOTE: If TAB is used focus does not move on to next component
281
- * @param event
282
- */
283
- handleTokenEnd(event) {
284
- if (this.chipInput.activeOption) {
285
- this.chipInput.activeOption.select();
286
- }
287
- event.chipInput?.clear();
288
- }
289
- mapToLabel(option) {
290
- return option ? option.label : '';
291
- }
292
- removeChip(removedChip) {
293
- const remainingChips = this.chips$.value.filter(chip => chip !== removedChip);
294
- this.chips$.next(remainingChips);
295
- }
296
- }
297
- AutocompleteChiplistFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
298
- AutocompleteChiplistFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: AutocompleteChiplistFieldComponent, isStandalone: true, selector: "crispr-autocomplete-chiplist-field", viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "chipInputRef", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n\n <mat-chip-list\n #chipList>\n <mat-chip\n class=\"refinement-chip\"\n *ngFor=\"let chip of controlValue$ | async\"\n [selectable]=\"config.chipsSelectable\"\n [removable]=\"config.areChipsRemovable\"\n (removed)=\"removeChip(chip)\">\n <span *ngIf=\"chip.imageUrl as imageUrl\" class=\"image-container\">\n <img [src]=\"imageUrl\" alt=\"image of {{chip.label}}\">\n </span>\n {{chip.label}}\n <mat-icon\n matChipRemove\n *ngIf=\"config.areChipsRemovable\">\n cancel\n </mat-icon>\n </mat-chip>\n <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config.controlName\" type=\"text\"/>\n\n <input\n matInput\n [formControl]=\"autocompleteInputControl\"\n [placeholder]=\"config.placeholder\"\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n (keydown.tab)=\"handleTab($event)\"\n [matChipInputSeparatorKeyCodes]=\"config.separatorKeyCodes\"\n (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n role=\"searchbox\"\n type=\"text\"\n autocapitalize=\"off\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n #autoInput/>\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n *ngIf=\"config.info\"\n matSuffix\n [info]=\"config.info \">\n </crispr-info>\n\n </mat-chip-list>\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [autoActiveFirstOption]=\"this.config.autoActiveFirstOption\"\n (optionSelected)=\"handleSelect($event)\"\n [displayWith]=\"mapToLabel\">\n <ng-container *ngIf=\"remainingOptions$ | async as remainingOptions; else emptyOption\">\n <ng-container *ngIf=\"remainingOptions.length > 0; else emptyOption\">\n <mat-option\n *ngFor=\"let option of remainingOptions$ | async\"\n [value]=\"option\">\n <crispr-option [option]=\"option\"></crispr-option>\n </mat-option>\n </ng-container>\n\n </ng-container>\n <ng-template #emptyOption>\n <mat-option disabled=\"true\">\n {{config.emptyOptionsMessage}}\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n</crispr-field-container>\n", styles: [".refinement-chip .image-container{width:26px;height:26px;border-radius:50%;overflow:hidden;margin:-2px 4px -2px -8px}.refinement-chip .image-container img{width:100%;height:100%;object-fit:cover}.hidden-error-directive-anchor{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
299
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldComponent, decorators: [{
300
- type: Component,
301
- args: [{ selector: 'crispr-autocomplete-chiplist-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
302
- CommonModule,
303
- InfoComponent,
304
- OptionComponent,
305
- ReactiveFormsModule,
306
- FieldContainerComponent,
307
- MatAutocompleteModule,
308
- MatInputModule,
309
- MatOptionModule,
310
- MatChipsModule,
311
- MatIconModule
312
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n\n <mat-chip-list\n #chipList>\n <mat-chip\n class=\"refinement-chip\"\n *ngFor=\"let chip of controlValue$ | async\"\n [selectable]=\"config.chipsSelectable\"\n [removable]=\"config.areChipsRemovable\"\n (removed)=\"removeChip(chip)\">\n <span *ngIf=\"chip.imageUrl as imageUrl\" class=\"image-container\">\n <img [src]=\"imageUrl\" alt=\"image of {{chip.label}}\">\n </span>\n {{chip.label}}\n <mat-icon\n matChipRemove\n *ngIf=\"config.areChipsRemovable\">\n cancel\n </mat-icon>\n </mat-chip>\n <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config.controlName\" type=\"text\"/>\n\n <input\n matInput\n [formControl]=\"autocompleteInputControl\"\n [placeholder]=\"config.placeholder\"\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n (keydown.tab)=\"handleTab($event)\"\n [matChipInputSeparatorKeyCodes]=\"config.separatorKeyCodes\"\n (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n role=\"searchbox\"\n type=\"text\"\n autocapitalize=\"off\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n #autoInput/>\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n *ngIf=\"config.info\"\n matSuffix\n [info]=\"config.info \">\n </crispr-info>\n\n </mat-chip-list>\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [autoActiveFirstOption]=\"this.config.autoActiveFirstOption\"\n (optionSelected)=\"handleSelect($event)\"\n [displayWith]=\"mapToLabel\">\n <ng-container *ngIf=\"remainingOptions$ | async as remainingOptions; else emptyOption\">\n <ng-container *ngIf=\"remainingOptions.length > 0; else emptyOption\">\n <mat-option\n *ngFor=\"let option of remainingOptions$ | async\"\n [value]=\"option\">\n <crispr-option [option]=\"option\"></crispr-option>\n </mat-option>\n </ng-container>\n\n </ng-container>\n <ng-template #emptyOption>\n <mat-option disabled=\"true\">\n {{config.emptyOptionsMessage}}\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n</crispr-field-container>\n", styles: [".refinement-chip .image-container{width:26px;height:26px;border-radius:50%;overflow:hidden;margin:-2px 4px -2px -8px}.refinement-chip .image-container img{width:100%;height:100%;object-fit:cover}.hidden-error-directive-anchor{display:none}\n"] }]
313
- }], propDecorators: { chipInput: [{
314
- type: ViewChild,
315
- args: ['autoInput', { read: MatAutocompleteTrigger }]
316
- }], chipInputRef: [{
317
- type: ViewChild,
318
- args: ['autoInput']
319
- }] } });
320
-
321
- const defaultConfig$4 = {
322
- labelPosition: 'after',
323
- inline: false
324
- };
325
- const CheckboxFieldMixin = crisprControlMixin(CrisprFieldComponent);
326
- class CheckboxFieldComponent extends CheckboxFieldMixin {
327
- constructor() {
328
- super(...arguments);
329
- this.defaultConfig = defaultConfig$4;
330
- }
331
- ngOnInit() {
332
- super.ngOnInit();
333
- }
334
- }
335
- CheckboxFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
336
- CheckboxFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: CheckboxFieldComponent, isStandalone: true, selector: "crispr-checkbox-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\"\n [inlineField]=\"config.inline\">\n <div\n [formGroup]=\"group\">\n <mat-checkbox\n [color]=\"config.color\"\n [labelPosition]=\"config.labelPosition\"\n [formControlName]=\"config.controlName\">\n {{config.label}}\n <crispr-info\n matSuffix *ngIf=\"config.info\"\n [info]=\"config.info\">\n </crispr-info>\n </mat-checkbox>\n </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
337
- // CrisprFieldDirective,
338
- FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
339
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
340
- type: Component,
341
- args: [{ selector: 'crispr-checkbox-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
342
- CommonModule,
343
- InfoComponent,
344
- MatCheckboxModule,
345
- ReactiveFormsModule,
346
- // CrisprFieldDirective,
347
- FieldContainerComponent
348
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\"\n [inlineField]=\"config.inline\">\n <div\n [formGroup]=\"group\">\n <mat-checkbox\n [color]=\"config.color\"\n [labelPosition]=\"config.labelPosition\"\n [formControlName]=\"config.controlName\">\n {{config.label}}\n <crispr-info\n matSuffix *ngIf=\"config.info\"\n [info]=\"config.info\">\n </crispr-info>\n </mat-checkbox>\n </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"] }]
349
- }] });
350
-
351
- const defaultConfig$3 = { rows: 5 };
352
- const TextareaFieldMixin = crisprControlMixin(CrisprFieldComponent);
353
- class TextareaFieldComponent extends TextareaFieldMixin {
354
- constructor() {
355
- super(...arguments);
356
- this.defaultConfig = defaultConfig$3;
357
- }
358
- ngOnInit() {
359
- super.ngOnInit();
360
- }
361
- }
362
- TextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
363
- TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: TextareaFieldComponent, isStandalone: true, selector: "crispr-textarea-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <textarea\n [rows]=\"config.rows\"\n matInput\n [placeholder]=\"config.placeholder\"\n [formControlName]=\"config.controlName\">\n </textarea>\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n *ngIf=\"config.info\"\n matSuffix\n [info]=\"config.info\">\n </crispr-info>\n\n <mat-hint *ngIf=\"config.hint && control.valid\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n\n</crispr-field-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
364
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldComponent, decorators: [{
365
- type: Component,
366
- args: [{ selector: 'crispr-textarea-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
367
- CommonModule,
368
- InfoComponent,
369
- ReactiveFormsModule,
370
- FieldContainerComponent,
371
- MatFormFieldModule,
372
- MatInputModule,
373
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <textarea\n [rows]=\"config.rows\"\n matInput\n [placeholder]=\"config.placeholder\"\n [formControlName]=\"config.controlName\">\n </textarea>\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n *ngIf=\"config.info\"\n matSuffix\n [info]=\"config.info\">\n </crispr-info>\n\n <mat-hint *ngIf=\"config.hint && control.valid\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n\n</crispr-field-container>\n" }]
374
- }] });
375
-
376
- const defaultConfig$2 = { displayLimits: true };
377
- const SliderFieldMixin = crisprControlMixin(CrisprFieldComponent);
378
- class SliderFieldComponent extends SliderFieldMixin {
379
- constructor() {
380
- super();
381
- this.defaultConfig = defaultConfig$2;
382
- }
383
- get flexDirection() {
384
- return this.config.vertical ? 'column' : 'row';
385
- }
386
- ngOnInit() {
387
- super.ngOnInit();
388
- }
389
- }
390
- SliderFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
391
- SliderFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SliderFieldComponent, isStandalone: true, selector: "crispr-slider-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <div\n [formGroup]=\"group\">\n <label *ngIf=\"config.label\">\n {{config.label}}\n <crispr-info\n *ngIf=\"config.info\"\n [info]=\"config.info\">\n </crispr-info>\n </label>\n <div class=\"slider-container\"\n [ngStyle]=\"{'flex-direction': flexDirection}\">\n <span *ngIf=\"config.displayLimits\">\n {{config.min}}\n </span>\n <mat-slider\n class=\"example-margin\"\n [formControlName]=\"config.controlName\"\n [invert]=\"config.invert\"\n [max]=\"config.max\"\n [min]=\"config.min\"\n [step]=\"config.step\"\n [thumbLabel]=\"config.thumbLabel\"\n [tickInterval]=\"config.tickInterval\"\n [vertical]=\"config.vertical\">\n </mat-slider>\n <span *ngIf=\"config.displayLimits\">\n {{config.max}}\n </span>\n </div>\n\n </div>\n</crispr-field-container>\n\n", styles: [".slider-container{display:flex;align-items:center}.slider-container .mat-slider-horizontal{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
392
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldComponent, decorators: [{
393
- type: Component,
394
- args: [{ selector: 'crispr-slider-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
395
- CommonModule,
396
- InfoComponent,
397
- OptionComponent,
398
- FieldContainerComponent,
399
- ReactiveFormsModule,
400
- MatSliderModule
401
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <div\n [formGroup]=\"group\">\n <label *ngIf=\"config.label\">\n {{config.label}}\n <crispr-info\n *ngIf=\"config.info\"\n [info]=\"config.info\">\n </crispr-info>\n </label>\n <div class=\"slider-container\"\n [ngStyle]=\"{'flex-direction': flexDirection}\">\n <span *ngIf=\"config.displayLimits\">\n {{config.min}}\n </span>\n <mat-slider\n class=\"example-margin\"\n [formControlName]=\"config.controlName\"\n [invert]=\"config.invert\"\n [max]=\"config.max\"\n [min]=\"config.min\"\n [step]=\"config.step\"\n [thumbLabel]=\"config.thumbLabel\"\n [tickInterval]=\"config.tickInterval\"\n [vertical]=\"config.vertical\">\n </mat-slider>\n <span *ngIf=\"config.displayLimits\">\n {{config.max}}\n </span>\n </div>\n\n </div>\n</crispr-field-container>\n\n", styles: [".slider-container{display:flex;align-items:center}.slider-container .mat-slider-horizontal{width:100%}\n"] }]
402
- }], ctorParameters: function () { return []; } });
403
-
404
- class ButtonComponent extends CrisprFieldComponent {
405
- constructor() {
406
- super(...arguments);
407
- this.defaultConfig = { buttonType: 'raised', type: 'submit' };
408
- }
409
- get matButtonClass() {
410
- return this.config.buttonType ? `mat-${this.config.buttonType}-button` : '';
411
- }
412
- ngOnInit() {
413
- super.ngOnInit();
414
- this.formValid$ = this.group.statusChanges.pipe(map(status => status === 'VALID'), startWith(this.group.valid));
415
- }
416
- handleClick(group, event) {
417
- if (this.config.callback) {
418
- this.config.callback(group, event);
419
- }
420
- }
421
- }
422
- ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
423
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ButtonComponent, isStandalone: true, selector: "crispr-button", usesInheritance: true, ngImport: i0, template: "<button\n [formGroup]=\"group\"\n mat-button\n [ngClass]=\"matButtonClass\"\n [color]=\"config.color\"\n [disabled]=\"config.disabledOnInvalidForm && !(formValid$ | async)\"\n [type]=\"config.type\"\n (click)=\"handleClick(group, $event)\"\n [matTooltip]=\"config.info?.content\"\n [matTooltipPosition]=\"config.info?.tooltipPosition || 'below'\">\n {{ config.label }}\n <mat-icon *ngIf=\"config.icon\">\n {{ config.icon}}\n </mat-icon>\n</button>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
424
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
425
- type: Component,
426
- args: [{ selector: 'crispr-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
427
- CommonModule,
428
- MatButtonModule,
429
- MatIconModule,
430
- MatTooltipModule,
431
- ReactiveFormsModule,
432
- ], template: "<button\n [formGroup]=\"group\"\n mat-button\n [ngClass]=\"matButtonClass\"\n [color]=\"config.color\"\n [disabled]=\"config.disabledOnInvalidForm && !(formValid$ | async)\"\n [type]=\"config.type\"\n (click)=\"handleClick(group, $event)\"\n [matTooltip]=\"config.info?.content\"\n [matTooltipPosition]=\"config.info?.tooltipPosition || 'below'\">\n {{ config.label }}\n <mat-icon *ngIf=\"config.icon\">\n {{ config.icon}}\n </mat-icon>\n</button>\n\n" }]
433
- }] });
434
-
435
- const defaultConfig$1 = {
436
- startView: 'month',
437
- };
438
- const DatepickerFieldMixin = crisprControlMixin(CrisprFieldComponent);
439
- class DatepickerFieldComponent extends DatepickerFieldMixin {
440
- constructor() {
441
- super(...arguments);
442
- this.defaultConfig = defaultConfig$1;
443
- }
444
- ngOnInit() {
445
- super.ngOnInit();
446
- this.startAt$ = this.config.startAt instanceof Date
447
- ? of(this.config.startAt)
448
- : this.config.startAt instanceof Function
449
- ? this.config.startAt(this.group)
450
- : of(null);
451
- this.dateClass = this.config?.cellClassFunction || null;
452
- this.dateClass$ = this.config.dateClass ? this.config?.dateClass(this.group) : of(() => '');
453
- }
454
- ngAfterContentInit() {
455
- if (this.config.datepickerActions) {
456
- this.calendarFooterPortal = new ComponentPortal(this.config.datepickerActions);
457
- }
458
- }
459
- }
460
- DatepickerFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
461
- DatepickerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DatepickerFieldComponent, isStandalone: true, selector: "crispr-datepicker-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <input\n matInput\n [formControlName]=\"config.controlName\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [matDatepicker]=\"picker\"\n [matDatepickerFilter]=\"config.datepickerFilter\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n [touchUi]=\"config.touchUi\"\n [startView]=\"config.startView\"\n [startAt]=\"startAt$ | async\"\n [dateClass]=\"dateClass || (dateClass$ | async)\"\n #picker>\n <mat-datepicker-actions *ngIf=\"calendarFooterPortal\">\n <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDateFnsModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
462
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldComponent, decorators: [{
463
- type: Component,
464
- args: [{ selector: 'crispr-datepicker-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
465
- CommonModule,
466
- FieldContainerComponent,
467
- MatDatepickerModule,
468
- MatFormFieldModule,
469
- ReactiveFormsModule,
470
- MatInputModule,
471
- MatDateFnsModule,
472
- PortalModule
473
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <input\n matInput\n [formControlName]=\"config.controlName\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [matDatepicker]=\"picker\"\n [matDatepickerFilter]=\"config.datepickerFilter\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n [touchUi]=\"config.touchUi\"\n [startView]=\"config.startView\"\n [startAt]=\"startAt$ | async\"\n [dateClass]=\"dateClass || (dateClass$ | async)\"\n #picker>\n <mat-datepicker-actions *ngIf=\"calendarFooterPortal\">\n <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n </mat-datepicker-actions>\n </mat-datepicker>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n</crispr-field-container>\n\n" }]
474
- }] });
475
-
476
- class DividerComponent extends CrisprFieldComponent {
477
- constructor() {
478
- super(...arguments);
479
- // TODO: pull in type after configs are better organized
480
- this.defaultConfig = {};
481
- }
482
- ngOnInit() {
483
- super.ngOnInit();
484
- }
485
- }
486
- DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
487
- DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DividerComponent, isStandalone: true, selector: "crispr-divider", usesInheritance: true, ngImport: i0, template: "<mat-divider [ngClass]=\"config.classes\"></mat-divider>", styles: [":host{display:block;padding:1em 0}::ng-deep .mat-divider.mat-divider-horizontal{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], preserveWhitespaces: true });
488
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerComponent, decorators: [{
489
- type: Component,
490
- args: [{ selector: 'crispr-divider', standalone: true, imports: [
491
- CommonModule,
492
- MatDividerModule
493
- ], template: "<mat-divider [ngClass]=\"config.classes\"></mat-divider>", styles: [":host{display:block;padding:1em 0}::ng-deep .mat-divider.mat-divider-horizontal{position:relative}\n"] }]
494
- }] });
495
-
496
- const RadioFieldMixin = crisprControlMixin(CrisprFieldComponent);
497
- class RadioFieldComponent extends RadioFieldMixin {
498
- constructor() {
499
- super(...arguments);
500
- this.defaultConfig = {};
501
- }
502
- ngOnInit() {
503
- super.ngOnInit();
504
- // options$ can be passed as an array, promise that resolves array, or observable that resolves array
505
- // this functions accounts for all possibilities and converts to observable that resolves array
506
- this.options$ = observablifyOptions(this.config.options, this.group);
507
- }
508
- }
509
- RadioFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
510
- RadioFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: RadioFieldComponent, isStandalone: true, selector: "crispr-radio-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n\n <mat-radio-group\n [formControl]=\"control\"\n [color]=\"config.color\">\n <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of options$ | async\" [value]=\"option.value\">\n {{option.label}}\n </mat-radio-button>\n </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
511
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldComponent, decorators: [{
512
- type: Component,
513
- args: [{ selector: 'crispr-radio-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
514
- CommonModule,
515
- ReactiveFormsModule,
516
- FieldContainerComponent,
517
- MatRadioModule,
518
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n\n <mat-radio-group\n [formControl]=\"control\"\n [color]=\"config.color\">\n <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of options$ | async\" [value]=\"option.value\">\n {{option.label}}\n </mat-radio-button>\n </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"] }]
519
- }] });
520
-
521
- const defaultConfig = {};
522
- const UnitConversionFieldMixin = crisprControlMixin(CrisprFieldComponent);
523
- class UnitConversionFieldComponent extends UnitConversionFieldMixin {
524
- constructor() {
525
- super(...arguments);
526
- this.defaultConfig = defaultConfig;
527
- this.displayValueControl = new FormControl();
528
- this.unitSelectControl = new FormControl();
529
- }
530
- ngOnInit() {
531
- super.ngOnInit();
532
- // TODO: Validators need work. validation is tricky because the input needs to be validated against but the validator will compare against the controls value
533
- // this.displayValueControl.setValidators(this.config.validators);
534
- const controlValuePipeline = [
535
- this.displayValueControl.valueChanges.pipe(startWith(this.displayValueControl.value))
536
- ];
537
- // setup all required pieces when showing a field for selecting units
538
- if (this.config.showUnitSelect) {
539
- this.unitOptions$ = observablifyOptions(this.config.selectableUnits, this.group);
540
- controlValuePipeline.push(this.unitSelectControl.valueChanges.pipe(startWith(this.config?.initialDisplayUnit || null)));
541
- this.unitSelectControl.setValue(this.config?.initialDisplayUnit || null);
542
- }
543
- this.transformationSubscription = combineLatest(controlValuePipeline).subscribe(([displayValue, unitValue]) => {
544
- const computedValue = this.config.storedValueConversion(displayValue, unitValue);
545
- this.control.setValue(computedValue);
546
- });
547
- }
548
- ngOnDestroy() {
549
- this.transformationSubscription.unsubscribe();
550
- }
551
- setInitialDisplayValue(storedValue, unit) {
552
- const initialDisplayValue = this.config.initialDisplayValueConversion(storedValue || null, unit);
553
- this.displayValueControl.setValue(initialDisplayValue);
554
- }
555
- /**
556
- * We override the 'setControlValue' we inherited from crisprControlMixin and add our custom logic,
557
- * This function gets called onInit because were object oriented. it's so great, so great that I'm
558
- * typing a paragraph to explain what the hell is going on...
559
- * @param value the initial value for the control passed down from the form components input
560
- */
561
- setControlValue(value) {
562
- const initialUnitValue = this.config.showUnitSelect ? this.config?.initialDisplayUnit : null;
563
- this.setInitialDisplayValue(value, initialUnitValue);
564
- }
565
- }
566
- UnitConversionFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
567
- UnitConversionFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: UnitConversionFieldComponent, isStandalone: true, selector: "crispr-unit-conversion-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field\n [style.width.%]=\"config.showUnitSelect ? 60 : 100\"\n class=\"number-field\"\n [color]=\"config.color\"\n [appearance]=\"config.appearance\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <input\n type=\"number\"\n matInput\n [formControl]=\"displayValueControl\"\n [placeholder]=\"config.placeholder\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [step]=\"config.step\"\n [autofocus]=\"config.autofocus\">\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n matSuffix\n *ngIf=\"config.info\"\n [info]=\"config.info\">\n </crispr-info>\n </mat-form-field>\n\n <mat-form-field\n *ngIf=\"config.showUnitSelect\"\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\"\n class=\"unit-field\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <mat-select\n #selectField\n [formControl]=\"unitSelectControl\">\n\n <mat-option\n *ngFor=\"let option of unitOptions$ | async\"\n [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n\n </mat-select>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n\n</crispr-field-container>\n", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
568
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldComponent, decorators: [{
569
- type: Component,
570
- args: [{ selector: 'crispr-unit-conversion-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
571
- CommonModule,
572
- InfoComponent,
573
- OptionComponent,
574
- ReactiveFormsModule,
575
- FieldContainerComponent,
576
- MatInputModule,
577
- MatSelectModule,
578
- MatOptionModule,
579
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field\n [style.width.%]=\"config.showUnitSelect ? 60 : 100\"\n class=\"number-field\"\n [color]=\"config.color\"\n [appearance]=\"config.appearance\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <input\n type=\"number\"\n matInput\n [formControl]=\"displayValueControl\"\n [placeholder]=\"config.placeholder\"\n [min]=\"config.min\"\n [max]=\"config.max\"\n [step]=\"config.step\"\n [autofocus]=\"config.autofocus\">\n <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n <crispr-info\n matSuffix\n *ngIf=\"config.info\"\n [info]=\"config.info\">\n </crispr-info>\n </mat-form-field>\n\n <mat-form-field\n *ngIf=\"config.showUnitSelect\"\n [color]=\"config.color\"\n [appearance]=\"config.appearance\"\n [formGroup]=\"group\"\n class=\"unit-field\">\n <mat-label *ngIf=\"config.label\">\n {{config.label}}\n </mat-label>\n <mat-select\n #selectField\n [formControl]=\"unitSelectControl\">\n\n <mat-option\n *ngFor=\"let option of unitOptions$ | async\"\n [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n\n </mat-select>\n\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n </mat-form-field>\n\n</crispr-field-container>\n", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"] }]
580
- }] });
581
-
582
- /* eslint-disable @nrwl/nx/enforce-module-boundaries */
583
- const FileUploadFieldMixin = crisprControlMixin(CrisprFieldComponent);
584
- class FileUploadFieldComponent extends FileUploadFieldMixin {
585
- // ngControl: NgControl = null;
586
- constructor(ngControl) {
587
- super();
588
- this.ngControl = ngControl;
589
- this.defaultConfig = {
590
- allowMultipleFiles: false,
591
- acceptedTypes: '*.*',
592
- dropZoneText: 'DROP FILE HERE',
593
- selectFilesButtonType: 'button',
594
- selectButtonText: 'SELECT',
595
- showClearFilesButton: true,
596
- clearFilesButtonText: 'CLEAR',
597
- uploadButtonText: 'UPLOAD',
598
- uploadButtonType: 'button',
599
- showUploadProgress: false,
600
- disableOnUpload: true
601
- };
602
- this.isUploaded = false;
603
- this.fileProgress = [];
604
- if (this.ngControl != null) {
605
- // Setting the value accessor directly (instead of using
606
- // the providers) to avoid running into a circular import.
607
- ngControl.valueAccessor = this;
608
- }
609
- }
610
- ngOnInit() {
611
- super.ngOnInit();
612
- this.disabled$ = this.config.disabledCallback
613
- ? this.config.disabledCallback(this.group)
614
- : of(false);
615
- }
616
- filesChanged(files) {
617
- if (files && files.length > 0) {
618
- this.selectedFiles = files;
619
- this.control.patchValue(files);
620
- }
621
- }
622
- uploadFiles() {
623
- if (this.selectedFiles && this.config.uploadFiles) {
624
- this.isUploaded = true;
625
- this.config.uploadFiles(this.group, this.selectedFiles, this);
626
- }
627
- }
628
- resetFileInput() {
629
- this.fileInputRef.nativeElement.value = '';
630
- this.control.patchValue(null);
631
- this.isUploaded = false;
632
- }
633
- writeValue(value) {
634
- // clear file input
635
- // this.host.nativeElement.value = '';
636
- // this.file = null;
637
- }
638
- registerOnChange(fn) {
639
- this.onChange = fn;
640
- }
641
- registerOnTouched(fn) {
642
- }
643
- }
644
- FileUploadFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldComponent, deps: [{ token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
645
- FileUploadFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: FileUploadFieldComponent, isStandalone: true, selector: "crispr-file-upload-field", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field floatLabel=\"always\"\n [color]=\"config.color\"\n appearance=\"outline\"\n [crisprFileDropzone]=\"!(disabled$ | async) && !(config.disableOnUpload && isUploaded)\"\n [formGroup]=\"group\"\n (fileDrop)=\"filesChanged($event)\">\n\n <input [formControlName]=\"config.controlName\" matInput type=\"text\"/>\n <input\n #fileInput\n type=\"file\"\n style=\"display: none\"\n [accept]=\"config.acceptedTypes\"\n [multiple]=\"config.allowMultipleFiles\"\n (change)=\"filesChanged($event.target.files)\"/>\n <mat-label>{{config.label}}</mat-label>\n\n <div *ngIf=\"!(selectedFiles?.length > 0); else selectedFileList\" class=\"drop-info\">\n <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n <h2 class=\"mat-h2\">{{config.dropZoneText}}</h2>\n or\n <button\n mat-raised-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"(disabled$ | async) || config.disableOnUpload && isUploaded\"\n (click)=\"fileInput.click()\"\n [attr.aria-label]=\"config.controlName\">\n {{config.selectButtonText}}\n </button>\n </div>\n <ng-template #selectedFileList>\n <div class=\"selected-files-container\">\n <div class=\"selected-files-list\">\n <crispr-selected-file\n *ngFor=\"let file of selectedFiles; let i = index;\"\n [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n [fileName]=\"file.name\"\n [showProgress]=\"config.showUploadProgress\"\n [progress]=\"fileProgress && (fileProgress[i] | async)\">\n </crispr-selected-file>\n </div>\n\n </div>\n </ng-template>\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n </mat-form-field>\n <div class=\"button-container\" *ngIf=\"selectedFiles?.length > 0\">\n\n <button\n mat-button\n (click)=\"resetFileInput()\"\n type=\"button\"\n [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n aria-label=\"Remove Selected File(s)\">\n {{config.clearFilesButtonText}}\n <mat-icon>delete</mat-icon>\n </button>\n\n <button\n *ngIf=\"!!config.uploadFiles\"\n mat-raised-button\n type=\"button\"\n color=\"accent\"\n class=\"file-input-button\"\n [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n (click)=\"uploadFiles()\"\n [attr.aria-label]=\"config.uploadButtonText\">\n {{ config.uploadButtonText }}\n </button>\n\n </div>\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-form-field .mat-form-field-infix{padding-top:0;display:flex;justify-content:center}:host .drop-info{display:flex;flex-direction:column;align-items:center}:host .drop-info .drop-icon{font-size:36px}:host .drop-info .mat-h2{margin:0}:host .button-container{display:flex;justify-content:flex-end;margin-top:-16px}:host .button-container button{margin-left:8px}:host .selected-files-container{width:100%}:host [matInput]{position:absolute;max-height:0;visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i7$1.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i7$1.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
646
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
647
- type: Component,
648
- args: [{ selector: 'crispr-file-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
649
- CommonModule,
650
- FieldContainerComponent,
651
- ReactiveFormsModule,
652
- MatIconModule,
653
- MatButtonModule,
654
- MatFormFieldModule,
655
- MatInputModule,
656
- SelectedFileComponent,
657
- FormValidationHandlerModule,
658
- FileDropzoneDirective
659
- ], template: "<crispr-field-container\n [config]=\"config\"\n [group]=\"group\">\n <mat-form-field floatLabel=\"always\"\n [color]=\"config.color\"\n appearance=\"outline\"\n [crisprFileDropzone]=\"!(disabled$ | async) && !(config.disableOnUpload && isUploaded)\"\n [formGroup]=\"group\"\n (fileDrop)=\"filesChanged($event)\">\n\n <input [formControlName]=\"config.controlName\" matInput type=\"text\"/>\n <input\n #fileInput\n type=\"file\"\n style=\"display: none\"\n [accept]=\"config.acceptedTypes\"\n [multiple]=\"config.allowMultipleFiles\"\n (change)=\"filesChanged($event.target.files)\"/>\n <mat-label>{{config.label}}</mat-label>\n\n <div *ngIf=\"!(selectedFiles?.length > 0); else selectedFileList\" class=\"drop-info\">\n <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n <h2 class=\"mat-h2\">{{config.dropZoneText}}</h2>\n or\n <button\n mat-raised-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"(disabled$ | async) || config.disableOnUpload && isUploaded\"\n (click)=\"fileInput.click()\"\n [attr.aria-label]=\"config.controlName\">\n {{config.selectButtonText}}\n </button>\n </div>\n <ng-template #selectedFileList>\n <div class=\"selected-files-container\">\n <div class=\"selected-files-list\">\n <crispr-selected-file\n *ngFor=\"let file of selectedFiles; let i = index;\"\n [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n [fileName]=\"file.name\"\n [showProgress]=\"config.showUploadProgress\"\n [progress]=\"fileProgress && (fileProgress[i] | async)\">\n </crispr-selected-file>\n </div>\n\n </div>\n </ng-template>\n <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n </mat-form-field>\n <div class=\"button-container\" *ngIf=\"selectedFiles?.length > 0\">\n\n <button\n mat-button\n (click)=\"resetFileInput()\"\n type=\"button\"\n [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n aria-label=\"Remove Selected File(s)\">\n {{config.clearFilesButtonText}}\n <mat-icon>delete</mat-icon>\n </button>\n\n <button\n *ngIf=\"!!config.uploadFiles\"\n mat-raised-button\n type=\"button\"\n color=\"accent\"\n class=\"file-input-button\"\n [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n (click)=\"uploadFiles()\"\n [attr.aria-label]=\"config.uploadButtonText\">\n {{ config.uploadButtonText }}\n </button>\n\n </div>\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-form-field .mat-form-field-infix{padding-top:0;display:flex;justify-content:center}:host .drop-info{display:flex;flex-direction:column;align-items:center}:host .drop-info .drop-icon{font-size:36px}:host .drop-info .mat-h2{margin:0}:host .button-container{display:flex;justify-content:flex-end;margin-top:-16px}:host .button-container button{margin-left:8px}:host .selected-files-container{width:100%}:host [matInput]{position:absolute;max-height:0;visibility:hidden}\n"] }]
660
- }], ctorParameters: function () { return [{ type: i2.NgControl, decorators: [{
661
- type: Optional
662
- }, {
663
- type: Self
664
- }] }]; }, propDecorators: { fileInputRef: [{
665
- type: ViewChild,
666
- args: ['fileInput']
667
- }] } });
5
+ export * from '@tft/crispr-forms/ui/info';
668
6
 
669
7
  /* eslint-disable @nrwl/nx/enforce-module-boundaries */
670
8
 
671
9
  /**
672
10
  * Generated bundle index. Do not edit.
673
11
  */
674
-
675
- export { AutocompleteChiplistFieldComponent, AutocompleteFieldComponent, ButtonComponent, CheckboxFieldComponent, DatepickerFieldComponent, DividerComponent, FileUploadFieldComponent, InputFieldComponent, OptionComponent, RadioFieldComponent, SelectFieldComponent, SliderFieldComponent, TextareaFieldComponent, UnitConversionFieldComponent };
676
12
  //# sourceMappingURL=tft-crispr-forms-ui.mjs.map