@tft/crispr-forms 21.0.3 → 21.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/tft-crispr-forms-autocomplete-field.component-IB92ztLj.mjs +95 -0
- package/fesm2022/tft-crispr-forms-autocomplete-field.component-IB92ztLj.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-2ggYh_Ev.mjs +40 -0
- package/fesm2022/tft-crispr-forms-index-2ggYh_Ev.mjs.map +1 -0
- package/fesm2022/{tft-crispr-forms-index-UAYeTe3L.mjs → tft-crispr-forms-index-BIPapWdD.mjs} +2 -2
- package/fesm2022/{tft-crispr-forms-index-UAYeTe3L.mjs.map → tft-crispr-forms-index-BIPapWdD.mjs.map} +1 -1
- package/fesm2022/{tft-crispr-forms-index-kjMTlZoq.mjs → tft-crispr-forms-index-BJb-E_LR.mjs} +2 -2
- package/fesm2022/{tft-crispr-forms-index-kjMTlZoq.mjs.map → tft-crispr-forms-index-BJb-E_LR.mjs.map} +1 -1
- package/fesm2022/{tft-crispr-forms-index-joNvlmny.mjs → tft-crispr-forms-index-BN-qHciF.mjs} +2 -2
- package/fesm2022/{tft-crispr-forms-index-joNvlmny.mjs.map → tft-crispr-forms-index-BN-qHciF.mjs.map} +1 -1
- package/fesm2022/tft-crispr-forms-index-BQWfppWN.mjs +73 -0
- package/fesm2022/tft-crispr-forms-index-BQWfppWN.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-Bau6o4JD.mjs +68 -0
- package/fesm2022/tft-crispr-forms-index-Bau6o4JD.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-C6I8JpR5.mjs +39 -0
- package/fesm2022/tft-crispr-forms-index-C6I8JpR5.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-CXR7Jz3T.mjs +39 -0
- package/fesm2022/tft-crispr-forms-index-CXR7Jz3T.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-CZ8se247.mjs +179 -0
- package/fesm2022/tft-crispr-forms-index-CZ8se247.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-CjxxE8O4.mjs +2 -0
- package/fesm2022/tft-crispr-forms-index-CjxxE8O4.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-D699lPdT.mjs +40 -0
- package/fesm2022/tft-crispr-forms-index-D699lPdT.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-DOaGEZK0.mjs +36 -0
- package/fesm2022/tft-crispr-forms-index-DOaGEZK0.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-D_9DqcSv.mjs +88 -0
- package/fesm2022/tft-crispr-forms-index-D_9DqcSv.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-HP6w4mnV.mjs +181 -0
- package/fesm2022/tft-crispr-forms-index-HP6w4mnV.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-XA--BwG_.mjs +190 -0
- package/fesm2022/tft-crispr-forms-index-XA--BwG_.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-tft-crispr-forms-BFiZ8Nhn.mjs +982 -0
- package/fesm2022/tft-crispr-forms-tft-crispr-forms-BFiZ8Nhn.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms.mjs +1 -973
- package/fesm2022/tft-crispr-forms.mjs.map +1 -1
- package/package.json +1 -1
- package/types/tft-crispr-forms.d.ts +38 -16
- package/fesm2022/tft-crispr-forms-autocomplete-field.component-ChocHy3F.mjs +0 -95
- package/fesm2022/tft-crispr-forms-autocomplete-field.component-ChocHy3F.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-BQFuEW6x.mjs +0 -40
- package/fesm2022/tft-crispr-forms-index-BQFuEW6x.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-BZ9V1Ec-.mjs +0 -39
- package/fesm2022/tft-crispr-forms-index-BZ9V1Ec-.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-BkCdLt5V.mjs +0 -40
- package/fesm2022/tft-crispr-forms-index-BkCdLt5V.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-Bypm5YtY.mjs +0 -137
- package/fesm2022/tft-crispr-forms-index-Bypm5YtY.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-CFwkbxFk.mjs +0 -88
- package/fesm2022/tft-crispr-forms-index-CFwkbxFk.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-DEctfeGr.mjs +0 -2
- package/fesm2022/tft-crispr-forms-index-DEctfeGr.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-DcrZSpdk.mjs +0 -73
- package/fesm2022/tft-crispr-forms-index-DcrZSpdk.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-DmaDlaNf.mjs +0 -68
- package/fesm2022/tft-crispr-forms-index-DmaDlaNf.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-Hsgr_WHO.mjs +0 -190
- package/fesm2022/tft-crispr-forms-index-Hsgr_WHO.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-gORcx6V1.mjs +0 -36
- package/fesm2022/tft-crispr-forms-index-gORcx6V1.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-lrhnilye.mjs +0 -39
- package/fesm2022/tft-crispr-forms-index-lrhnilye.mjs.map +0 -1
- package/fesm2022/tft-crispr-forms-index-uu4CyAEP.mjs +0 -182
- package/fesm2022/tft-crispr-forms-index-uu4CyAEP.mjs.map +0 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/forms';
|
|
4
|
+
import { ReactiveFormsModule } from '@angular/forms';
|
|
5
|
+
import * as i2 from '@angular/material/form-field';
|
|
6
|
+
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
7
|
+
import * as i3 from '@angular/material/input';
|
|
8
|
+
import { MatInputModule } from '@angular/material/input';
|
|
9
|
+
import * as i6 from '@tft/form-validation-handler';
|
|
10
|
+
import { FormValidationHandlerModule } from '@tft/form-validation-handler';
|
|
11
|
+
import { a as CrisprControlComponent, I as InfoComponent, F as FieldContainerComponent } from './tft-crispr-forms-tft-crispr-forms-BFiZ8Nhn.mjs';
|
|
12
|
+
|
|
13
|
+
/* eslint-disable @nx/enforce-module-boundaries */
|
|
14
|
+
const defaultConfig = { rows: 5 };
|
|
15
|
+
class TextareaFieldComponent extends CrisprControlComponent {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(...arguments);
|
|
18
|
+
this.defaultConfig = defaultConfig;
|
|
19
|
+
}
|
|
20
|
+
ngOnInit() {
|
|
21
|
+
super.ngOnInit();
|
|
22
|
+
}
|
|
23
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: TextareaFieldComponent, isStandalone: true, selector: "crispr-textarea-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <textarea [rows]=\"config().rows\" matInput [placeholder]=\"config().placeholder\"\n [formControlName]=\"config().controlName\">\n </textarea>\n @if (config().info) {<crispr-info [info]=\"config().info\"></crispr-info>}\n @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().hint && control().valid) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n\n</crispr-field-container>", styles: ["crispr-info{position:absolute;top:.75em;right:-.25em}\n"], dependencies: [{ kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
|
|
25
|
+
}
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TextareaFieldComponent, decorators: [{
|
|
27
|
+
type: Component,
|
|
28
|
+
args: [{ selector: 'crispr-textarea-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
29
|
+
InfoComponent,
|
|
30
|
+
ReactiveFormsModule,
|
|
31
|
+
FieldContainerComponent,
|
|
32
|
+
MatFormFieldModule,
|
|
33
|
+
MatInputModule,
|
|
34
|
+
FormValidationHandlerModule
|
|
35
|
+
], standalone: true, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <textarea [rows]=\"config().rows\" matInput [placeholder]=\"config().placeholder\"\n [formControlName]=\"config().controlName\">\n </textarea>\n @if (config().info) {<crispr-info [info]=\"config().info\"></crispr-info>}\n @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().hint && control().valid) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n\n</crispr-field-container>", styles: ["crispr-info{position:absolute;top:.75em;right:-.25em}\n"] }]
|
|
36
|
+
}] });
|
|
37
|
+
|
|
38
|
+
export { TextareaFieldComponent };
|
|
39
|
+
//# sourceMappingURL=tft-crispr-forms-index-CXR7Jz3T.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tft-crispr-forms-index-CXR7Jz3T.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/textarea-field/textarea-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/textarea-field/textarea-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport { InfoComponent } from '../info';\nimport {\n TextareaFieldConfig,\n} from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\nconst defaultConfig: Partial<TextareaFieldConfig> = { rows: 5 };\n\n@Component({\n selector: 'crispr-textarea-field',\n templateUrl: './textarea-field.component.html',\n styleUrls: ['./textarea-field.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n InfoComponent,\n ReactiveFormsModule,\n FieldContainerComponent,\n MatFormFieldModule,\n MatInputModule,\n FormValidationHandlerModule\n ],\n standalone: true\n})\nexport class TextareaFieldComponent\n extends CrisprControlComponent<TextareaFieldConfig>\n implements OnInit\n{\n defaultConfig = defaultConfig;\n\n ngOnInit() {\n super.ngOnInit();\n }\n}\n","<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <textarea [rows]=\"config().rows\" matInput [placeholder]=\"config().placeholder\"\n [formControlName]=\"config().controlName\">\n </textarea>\n @if (config().info) {<crispr-info [info]=\"config().info\"></crispr-info>}\n @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().hint && control().valid) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n\n</crispr-field-container>"],"names":["i4"],"mappings":"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"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import * as i1$2 from '@angular/common';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { inject, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
|
+
import * as i1 from '@angular/forms';
|
|
6
|
+
import { NgControl, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import * as i1$1 from '@angular/material/button';
|
|
8
|
+
import { MatButtonModule } from '@angular/material/button';
|
|
9
|
+
import * as i2$1 from '@angular/material/form-field';
|
|
10
|
+
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
|
+
import * as i2 from '@angular/material/icon';
|
|
12
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
13
|
+
import * as i3 from '@angular/material/input';
|
|
14
|
+
import { MatInputModule } from '@angular/material/input';
|
|
15
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
16
|
+
import imageCompression from 'browser-image-compression';
|
|
17
|
+
import { Subject, combineLatest, of } from 'rxjs';
|
|
18
|
+
import { shareReplay, switchMap, map, tap, startWith } from 'rxjs/operators';
|
|
19
|
+
import * as i6 from '@tft/form-validation-handler';
|
|
20
|
+
import { FormValidationHandlerModule } from '@tft/form-validation-handler';
|
|
21
|
+
import { a as CrisprControlComponent, e as convertBytesToMb, F as FieldContainerComponent, S as SelectedFileComponent, f as FileDropzoneDirective } from './tft-crispr-forms-tft-crispr-forms-BFiZ8Nhn.mjs';
|
|
22
|
+
|
|
23
|
+
/* eslint-disable @nx/enforce-module-boundaries */
|
|
24
|
+
class ImageUploadFieldComponent extends CrisprControlComponent {
|
|
25
|
+
constructor() {
|
|
26
|
+
super();
|
|
27
|
+
this.ngControl = inject(NgControl, { optional: true, self: true });
|
|
28
|
+
this.domSanitizer = inject(DomSanitizer);
|
|
29
|
+
this.cdr = inject(ChangeDetectorRef);
|
|
30
|
+
this.defaultConfig = {
|
|
31
|
+
// allowMultipleFiles: false,
|
|
32
|
+
acceptedTypes: 'image/*',
|
|
33
|
+
dropZoneText: 'DROP FILE HERE',
|
|
34
|
+
selectFilesButtonType: 'button',
|
|
35
|
+
selectButtonText: 'SELECT',
|
|
36
|
+
showClearFilesButton: true,
|
|
37
|
+
clearFilesButtonText: 'CLEAR',
|
|
38
|
+
resetFilesButtonText: 'RESET',
|
|
39
|
+
imagePreviewHeight: '250px',
|
|
40
|
+
compressImage: false,
|
|
41
|
+
targetCompressedImageFileSizeMb: 0.4,
|
|
42
|
+
minCompressionThresholdMb: 0.6,
|
|
43
|
+
useWebWorker: true,
|
|
44
|
+
};
|
|
45
|
+
this.inputImageFileSubject = new Subject();
|
|
46
|
+
this.inputImageFile$ = this.inputImageFileSubject
|
|
47
|
+
.asObservable()
|
|
48
|
+
.pipe(shareReplay(1));
|
|
49
|
+
this.compressedFile$ = this.inputImageFile$.pipe(switchMap(async (file) => {
|
|
50
|
+
if (!file || !(file instanceof File))
|
|
51
|
+
return null;
|
|
52
|
+
const { compressImage, targetCompressedImageFileSizeMb, minCompressionThresholdMb, maxWidthOrHeight, useWebWorker, } = this.config();
|
|
53
|
+
const fileSizeMb = convertBytesToMb(file.size);
|
|
54
|
+
const shouldCompress = compressImage &&
|
|
55
|
+
targetCompressedImageFileSizeMb < fileSizeMb &&
|
|
56
|
+
minCompressionThresholdMb < fileSizeMb;
|
|
57
|
+
if (shouldCompress) {
|
|
58
|
+
const options = {
|
|
59
|
+
// Use maxWidthOrHeight if it was provided, else use target compressed size
|
|
60
|
+
...(maxWidthOrHeight
|
|
61
|
+
? { maxWidthOrHeight }
|
|
62
|
+
: { maxSizeMB: targetCompressedImageFileSizeMb }),
|
|
63
|
+
useWebWorker,
|
|
64
|
+
maxIterations: 30,
|
|
65
|
+
onProgress: (progress) => {
|
|
66
|
+
this.progress = progress;
|
|
67
|
+
this.cdr.detectChanges();
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
return await imageCompression(file, options);
|
|
71
|
+
}
|
|
72
|
+
else
|
|
73
|
+
return file;
|
|
74
|
+
}), map((compressedFile) => {
|
|
75
|
+
if (!compressedFile)
|
|
76
|
+
return compressedFile;
|
|
77
|
+
const { type, name, lastModified } = compressedFile;
|
|
78
|
+
return new File([compressedFile], this.config().fileName || name, {
|
|
79
|
+
type,
|
|
80
|
+
lastModified,
|
|
81
|
+
});
|
|
82
|
+
}), tap((file) => {
|
|
83
|
+
// only set the value if there is a file because resetToInitialValue sets the control value
|
|
84
|
+
// to initial value and clears the compressed image, so setting it to null here would undo that
|
|
85
|
+
if (file) {
|
|
86
|
+
this.control().setValue(file);
|
|
87
|
+
}
|
|
88
|
+
if (file || this.value) {
|
|
89
|
+
this.control().markAsTouched();
|
|
90
|
+
setTimeout(() => {
|
|
91
|
+
this.cdr.detectChanges();
|
|
92
|
+
}, 100);
|
|
93
|
+
}
|
|
94
|
+
}), shareReplay(1));
|
|
95
|
+
this.compressedImageUrlString$ = this.compressedFile$.pipe(switchMap(async (file) => {
|
|
96
|
+
if (!file)
|
|
97
|
+
return null;
|
|
98
|
+
const compressedStringImage = await imageCompression.getDataUrlFromFile(file);
|
|
99
|
+
return this.domSanitizer.bypassSecurityTrustResourceUrl(compressedStringImage);
|
|
100
|
+
}), shareReplay(1));
|
|
101
|
+
this.isUploaded = false;
|
|
102
|
+
const ngControl = this.ngControl;
|
|
103
|
+
if (this.ngControl != null) {
|
|
104
|
+
// Setting the value accessor directly (instead of using
|
|
105
|
+
// the providers) to avoid running into a circular import.
|
|
106
|
+
ngControl.valueAccessor = this;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
ngOnInit() {
|
|
110
|
+
super.ngOnInit();
|
|
111
|
+
this.imageSrcUrl$ = combineLatest([
|
|
112
|
+
this.compressedImageUrlString$.pipe(startWith(null)),
|
|
113
|
+
this.control().valueChanges.pipe(startWith(this.value()), map((controlValue) => {
|
|
114
|
+
if (!controlValue)
|
|
115
|
+
return null;
|
|
116
|
+
if (controlValue instanceof File)
|
|
117
|
+
return null;
|
|
118
|
+
return (this.config().mapInputValueToUrl?.(controlValue) ||
|
|
119
|
+
controlValue);
|
|
120
|
+
})),
|
|
121
|
+
]).pipe(map(([compressedImageUrlString, controlUrl]) => {
|
|
122
|
+
return compressedImageUrlString || controlUrl || null;
|
|
123
|
+
}));
|
|
124
|
+
this.disabled$ = this.config().disabledCallback
|
|
125
|
+
? this.config().disabledCallback(this.group())
|
|
126
|
+
: of(false);
|
|
127
|
+
}
|
|
128
|
+
filesChanged(files) {
|
|
129
|
+
if (files && files.length > 0) {
|
|
130
|
+
const imageFile = files[0];
|
|
131
|
+
// We clear the control here so that it is invalid while compressing
|
|
132
|
+
// the input pipeline will take care of resetting it
|
|
133
|
+
this.control().patchValue(null);
|
|
134
|
+
// this.control().setErrors({compressing: {loadingMessage: 'Please wait while file compresses'}});
|
|
135
|
+
this.control().markAsTouched();
|
|
136
|
+
this.inputImageFileSubject.next(imageFile);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
clearFileInput() {
|
|
140
|
+
this.inputImageFileSubject.next(null);
|
|
141
|
+
this.fileInputRef.nativeElement.value = '';
|
|
142
|
+
this.control().patchValue(null);
|
|
143
|
+
this.control().markAsTouched();
|
|
144
|
+
this.isUploaded = false;
|
|
145
|
+
}
|
|
146
|
+
resetToInitialValue(initialValue) {
|
|
147
|
+
this.inputImageFileSubject.next(null);
|
|
148
|
+
this.control().patchValue(initialValue);
|
|
149
|
+
this.isUploaded = false;
|
|
150
|
+
}
|
|
151
|
+
writeValue(value) { }
|
|
152
|
+
registerOnChange(fn) {
|
|
153
|
+
this.onChange = fn;
|
|
154
|
+
}
|
|
155
|
+
registerOnTouched(fn) { }
|
|
156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ImageUploadFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ImageUploadFieldComponent, isStandalone: true, selector: "crispr-image-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\n <mat-form-field floatLabel=\"always\"\n [attr.data-testid]=\"testId()\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n <mat-label>{{config().label}}</mat-label>\n <input [formControlName]=\"config().controlName\" matInput type=\"text\"/>\n <input\n #fileInput\n type=\"file\"\n [accept]=\"config().acceptedTypes\"\n (change)=\"filesChanged($event.target.files)\"/>\n <div class=\"ui-container\">\n\n <div class=\"image-preview\" [style.height]=\"config().imagePreviewHeight\">\n @if ((progress < 100) && inputImageFile$ | async; as file) {\n <crispr-selected-file\n [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n [fileName]=\"'Compressing: ' + file.name\"\n [showProgress]=\"true\"\n [progress]=\"progress\">\n </crispr-selected-file>\n } @else {\n <!-- <img *ngIf=\"(initialUrlString$ | async) as initialUrlString;\" [src]=\"initialUrlString\" alt=\"\"> -->\n @if (imageSrcUrl$ | async; as srcUrl) {\n <img [src]=\"srcUrl\" alt=\"\">\n } @else {\n <div class=\"drop-container\"\n [crisprFileDropzone]=\"!(disabled$ | async)\"\n (fileDrop)=\"filesChanged($event)\">\n <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n <h2 class=\"mat-h2\">{{config().dropZoneText}}</h2>\n </div>\n }\n }\n\n </div>\n\n\n\n <!-- </ng-template> -->\n @if (true) {\n <div class=\"button-container\">\n <button\n mat-button\n (click)=\"clearFileInput()\"\n type=\"button\"\n [disabled]=\"(disabled$ | async)\"\n aria-label=\"Remove Selected File(s)\">\n <mat-icon>delete</mat-icon>\n {{config().clearFilesButtonText}}\n </button>\n @if (value()) {\n <button\n mat-button\n (click)=\"resetToInitialValue(value())\"\n type=\"button\"\n [disabled]=\"(disabled$ | async)\"\n aria-label=\"Remove Selected File(s)\">\n <mat-icon>replay</mat-icon>\n {{config().resetFilesButtonText}}\n </button>\n }\n <button\n mat-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"(disabled$ | async)\"\n (click)=\"fileInput.click()\"\n [attr.aria-label]=\"config().controlName\">\n <mat-icon>\n camera\n </mat-icon>\n SELECT\n </button>\n </div>\n }\n </div>\n\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n</mat-form-field>\n\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:0}:host ::ng-deep .mat-mdc-form-field .mat-button-wrapper{display:flex;flex-direction:column;align-items:center;padding-top:8px}:host .ui-container{display:flex;flex-direction:column}:host .ui-container .image-preview{display:flex;flex-direction:column;align-content:space-between;justify-content:center;align-items:center;margin:8px 0;flex-grow:1}:host .ui-container .image-preview crispr-selected-file{width:100%}:host .ui-container .image-preview .drop-container{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;border:3px dashed gray;height:100%;width:100%;align-content:center;justify-content:center;border-radius:8px}:host .ui-container .image-preview .drop-container .drop-icon{height:32px;width:32px;font-size:36px}:host .ui-container .image-preview .drop-container .mat-h2{margin:0}:host .ui-container .image-preview img{height:inherit;max-width:100%}:host .ui-container .button-container{display:flex;flex-direction:var(--image-upload-button-container-direction);justify-content:flex-end}:host .ui-container .button-container button{margin-left:8px}:host input{position:absolute;max-height:0;visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
|
|
158
|
+
}
|
|
159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ImageUploadFieldComponent, decorators: [{
|
|
160
|
+
type: Component,
|
|
161
|
+
args: [{ selector: 'crispr-image-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
162
|
+
CommonModule,
|
|
163
|
+
FieldContainerComponent,
|
|
164
|
+
ReactiveFormsModule,
|
|
165
|
+
MatIconModule,
|
|
166
|
+
MatButtonModule,
|
|
167
|
+
MatFormFieldModule,
|
|
168
|
+
MatInputModule,
|
|
169
|
+
SelectedFileComponent,
|
|
170
|
+
FileDropzoneDirective,
|
|
171
|
+
FormValidationHandlerModule,
|
|
172
|
+
], standalone: true, template: "<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n\n <mat-form-field floatLabel=\"always\"\n [attr.data-testid]=\"testId()\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n <mat-label>{{config().label}}</mat-label>\n <input [formControlName]=\"config().controlName\" matInput type=\"text\"/>\n <input\n #fileInput\n type=\"file\"\n [accept]=\"config().acceptedTypes\"\n (change)=\"filesChanged($event.target.files)\"/>\n <div class=\"ui-container\">\n\n <div class=\"image-preview\" [style.height]=\"config().imagePreviewHeight\">\n @if ((progress < 100) && inputImageFile$ | async; as file) {\n <crispr-selected-file\n [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n [fileName]=\"'Compressing: ' + file.name\"\n [showProgress]=\"true\"\n [progress]=\"progress\">\n </crispr-selected-file>\n } @else {\n <!-- <img *ngIf=\"(initialUrlString$ | async) as initialUrlString;\" [src]=\"initialUrlString\" alt=\"\"> -->\n @if (imageSrcUrl$ | async; as srcUrl) {\n <img [src]=\"srcUrl\" alt=\"\">\n } @else {\n <div class=\"drop-container\"\n [crisprFileDropzone]=\"!(disabled$ | async)\"\n (fileDrop)=\"filesChanged($event)\">\n <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n <h2 class=\"mat-h2\">{{config().dropZoneText}}</h2>\n </div>\n }\n }\n\n </div>\n\n\n\n <!-- </ng-template> -->\n @if (true) {\n <div class=\"button-container\">\n <button\n mat-button\n (click)=\"clearFileInput()\"\n type=\"button\"\n [disabled]=\"(disabled$ | async)\"\n aria-label=\"Remove Selected File(s)\">\n <mat-icon>delete</mat-icon>\n {{config().clearFilesButtonText}}\n </button>\n @if (value()) {\n <button\n mat-button\n (click)=\"resetToInitialValue(value())\"\n type=\"button\"\n [disabled]=\"(disabled$ | async)\"\n aria-label=\"Remove Selected File(s)\">\n <mat-icon>replay</mat-icon>\n {{config().resetFilesButtonText}}\n </button>\n }\n <button\n mat-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"(disabled$ | async)\"\n (click)=\"fileInput.click()\"\n [attr.aria-label]=\"config().controlName\">\n <mat-icon>\n camera\n </mat-icon>\n SELECT\n </button>\n </div>\n }\n </div>\n\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n</mat-form-field>\n\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:0}:host ::ng-deep .mat-mdc-form-field .mat-button-wrapper{display:flex;flex-direction:column;align-items:center;padding-top:8px}:host .ui-container{display:flex;flex-direction:column}:host .ui-container .image-preview{display:flex;flex-direction:column;align-content:space-between;justify-content:center;align-items:center;margin:8px 0;flex-grow:1}:host .ui-container .image-preview crispr-selected-file{width:100%}:host .ui-container .image-preview .drop-container{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;border:3px dashed gray;height:100%;width:100%;align-content:center;justify-content:center;border-radius:8px}:host .ui-container .image-preview .drop-container .drop-icon{height:32px;width:32px;font-size:36px}:host .ui-container .image-preview .drop-container .mat-h2{margin:0}:host .ui-container .image-preview img{height:inherit;max-width:100%}:host .ui-container .button-container{display:flex;flex-direction:var(--image-upload-button-container-direction);justify-content:flex-end}:host .ui-container .button-container button{margin-left:8px}:host input{position:absolute;max-height:0;visibility:hidden}\n"] }]
|
|
173
|
+
}], ctorParameters: () => [], propDecorators: { fileInputRef: [{
|
|
174
|
+
type: ViewChild,
|
|
175
|
+
args: ['fileInput']
|
|
176
|
+
}] } });
|
|
177
|
+
|
|
178
|
+
export { ImageUploadFieldComponent };
|
|
179
|
+
//# sourceMappingURL=tft-crispr-forms-index-CZ8se247.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tft-crispr-forms-index-CZ8se247.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/image-upload-field/image-upload-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/image-upload-field/image-upload-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { CommonModule } from '@angular/common';\nimport { Component, ElementRef, ViewChild, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';\nimport {\n ControlValueAccessor,\n NgControl,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport imageCompression from 'browser-image-compression';\nimport { combineLatest, Observable, of, Subject } from 'rxjs';\nimport { map, shareReplay, startWith, switchMap, tap } from 'rxjs/operators';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FileDropzoneDirective } from '../file-dropzone';\nimport { SelectedFileComponent } from '../selected-file';\nimport { FieldContainerComponent } from '../field-container';\nimport {\n convertBytesToMb,\n ImageUploadFieldConfig,\n} from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\n@Component({\n selector: 'crispr-image-upload-field',\n templateUrl: './image-upload-field.component.html',\n styleUrls: ['./image-upload-field.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n CommonModule,\n FieldContainerComponent,\n ReactiveFormsModule,\n MatIconModule,\n MatButtonModule,\n MatFormFieldModule,\n MatInputModule,\n SelectedFileComponent,\n FileDropzoneDirective,\n FormValidationHandlerModule,\n ],\n standalone: true\n})\nexport class ImageUploadFieldComponent\n extends CrisprControlComponent<ImageUploadFieldConfig>\n implements OnInit, ControlValueAccessor\n{\n ngControl = inject(NgControl, { optional: true, self: true });\n private domSanitizer = inject(DomSanitizer);\n private cdr = inject(ChangeDetectorRef);\n\n onChange: () => void;\n\n defaultConfig: Partial<ImageUploadFieldConfig> = {\n // allowMultipleFiles: false,\n acceptedTypes: 'image/*',\n dropZoneText: 'DROP FILE HERE',\n selectFilesButtonType: 'button',\n selectButtonText: 'SELECT',\n showClearFilesButton: true,\n clearFilesButtonText: 'CLEAR',\n resetFilesButtonText: 'RESET',\n imagePreviewHeight: '250px',\n compressImage: false,\n targetCompressedImageFileSizeMb: 0.4,\n minCompressionThresholdMb: 0.6,\n useWebWorker: true,\n };\n\n private inputImageFileSubject = new Subject<File | null>();\n inputImageFile$ = this.inputImageFileSubject\n .asObservable()\n .pipe(shareReplay(1));\n /**\n * the compression progress\n */\n progress: number | undefined;\n\n compressedFile$: Observable<File> = this.inputImageFile$.pipe(\n switchMap(async (file) => {\n if (!file || !(file instanceof File)) return null;\n const {\n compressImage,\n targetCompressedImageFileSizeMb,\n minCompressionThresholdMb,\n maxWidthOrHeight,\n useWebWorker,\n } = this.config();\n const fileSizeMb = convertBytesToMb(file.size);\n const shouldCompress =\n compressImage &&\n targetCompressedImageFileSizeMb < fileSizeMb &&\n minCompressionThresholdMb < fileSizeMb;\n if (shouldCompress) {\n const options = {\n // Use maxWidthOrHeight if it was provided, else use target compressed size\n ...(maxWidthOrHeight\n ? { maxWidthOrHeight }\n : { maxSizeMB: targetCompressedImageFileSizeMb }),\n useWebWorker,\n maxIterations: 30,\n onProgress: (progress: number) => {\n this.progress = progress;\n this.cdr.detectChanges();\n },\n };\n return await imageCompression(file, options);\n } else return file;\n }),\n map((compressedFile: File) => {\n if (!compressedFile) return compressedFile;\n const { type, name, lastModified } = compressedFile;\n return new File([compressedFile], this.config().fileName || name, {\n type,\n lastModified,\n });\n }),\n tap((file) => {\n // only set the value if there is a file because resetToInitialValue sets the control value\n // to initial value and clears the compressed image, so setting it to null here would undo that\n if (file) {\n this.control().setValue(file);\n }\n if (file || this.value) {\n this.control().markAsTouched();\n setTimeout(() => {\n this.cdr.detectChanges();\n }, 100);\n }\n }),\n shareReplay(1)\n );\n\n compressedImageUrlString$: Observable<string | null> =\n this.compressedFile$.pipe(\n switchMap(async (file) => {\n if (!file) return null;\n const compressedStringImage = await imageCompression.getDataUrlFromFile(\n file\n );\n return this.domSanitizer.bypassSecurityTrustResourceUrl(\n compressedStringImage\n ) as string;\n }),\n shareReplay(1)\n );\n\n // This is what is displayed by the image preview\n imageSrcUrl$: Observable<string | null>;\n\n @ViewChild('fileInput') fileInputRef: ElementRef;\n\n selectedFiles: FileList;\n\n isUploaded = false;\n\n disabled$: Observable<boolean>;\n\n constructor() {\n super();\n const ngControl = this.ngControl;\n\n if (this.ngControl != null) {\n // Setting the value accessor directly (instead of using\n // the providers) to avoid running into a circular import.\n ngControl.valueAccessor = this;\n }\n }\n\n ngOnInit() {\n super.ngOnInit();\n this.imageSrcUrl$ = combineLatest([\n this.compressedImageUrlString$.pipe(startWith(null)),\n this.control().valueChanges.pipe(\n startWith(this.value()),\n map((controlValue): string => {\n if (!controlValue) return null;\n if (controlValue instanceof File) return null;\n return (\n this.config().mapInputValueToUrl?.(controlValue) ||\n (controlValue as string)\n );\n })\n ),\n ]).pipe(\n map(([compressedImageUrlString, controlUrl]) => {\n return compressedImageUrlString || controlUrl || null;\n })\n );\n this.disabled$ = this.config().disabledCallback\n ? this.config().disabledCallback(this.group())\n : of(false);\n }\n\n filesChanged(files: FileList): void {\n if (files && files.length > 0) {\n const imageFile = files[0];\n // We clear the control here so that it is invalid while compressing\n // the input pipeline will take care of resetting it\n this.control().patchValue(null);\n // this.control().setErrors({compressing: {loadingMessage: 'Please wait while file compresses'}});\n this.control().markAsTouched();\n this.inputImageFileSubject.next(imageFile);\n }\n }\n\n clearFileInput(): void {\n this.inputImageFileSubject.next(null);\n this.fileInputRef.nativeElement.value = '';\n this.control().patchValue(null);\n this.control().markAsTouched();\n this.isUploaded = false;\n }\n\n resetToInitialValue(initialValue: string): void {\n this.inputImageFileSubject.next(null);\n this.control().patchValue(initialValue);\n this.isUploaded = false;\n }\n\n writeValue(value: null) {}\n\n registerOnChange(fn: () => void) {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void) {}\n}\n","<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n\n <mat-form-field floatLabel=\"always\"\n [attr.data-testid]=\"testId()\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n <mat-label>{{config().label}}</mat-label>\n <input [formControlName]=\"config().controlName\" matInput type=\"text\"/>\n <input\n #fileInput\n type=\"file\"\n [accept]=\"config().acceptedTypes\"\n (change)=\"filesChanged($event.target.files)\"/>\n <div class=\"ui-container\">\n\n <div class=\"image-preview\" [style.height]=\"config().imagePreviewHeight\">\n @if ((progress < 100) && inputImageFile$ | async; as file) {\n <crispr-selected-file\n [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n [fileName]=\"'Compressing: ' + file.name\"\n [showProgress]=\"true\"\n [progress]=\"progress\">\n </crispr-selected-file>\n } @else {\n <!-- <img *ngIf=\"(initialUrlString$ | async) as initialUrlString;\" [src]=\"initialUrlString\" alt=\"\"> -->\n @if (imageSrcUrl$ | async; as srcUrl) {\n <img [src]=\"srcUrl\" alt=\"\">\n } @else {\n <div class=\"drop-container\"\n [crisprFileDropzone]=\"!(disabled$ | async)\"\n (fileDrop)=\"filesChanged($event)\">\n <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n <h2 class=\"mat-h2\">{{config().dropZoneText}}</h2>\n </div>\n }\n }\n\n </div>\n\n\n\n <!-- </ng-template> -->\n @if (true) {\n <div class=\"button-container\">\n <button\n mat-button\n (click)=\"clearFileInput()\"\n type=\"button\"\n [disabled]=\"(disabled$ | async)\"\n aria-label=\"Remove Selected File(s)\">\n <mat-icon>delete</mat-icon>\n {{config().clearFilesButtonText}}\n </button>\n @if (value()) {\n <button\n mat-button\n (click)=\"resetToInitialValue(value())\"\n type=\"button\"\n [disabled]=\"(disabled$ | async)\"\n aria-label=\"Remove Selected File(s)\">\n <mat-icon>replay</mat-icon>\n {{config().resetFilesButtonText}}\n </button>\n }\n <button\n mat-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"(disabled$ | async)\"\n (click)=\"fileInput.click()\"\n [attr.aria-label]=\"config().controlName\">\n <mat-icon>\n camera\n </mat-icon>\n SELECT\n </button>\n </div>\n }\n </div>\n\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n</mat-form-field>\n\n</crispr-field-container>\n"],"names":["i3","i4","i7"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tft-crispr-forms-index-CjxxE8O4.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import * as i3 from '@angular/material/input';
|
|
4
|
+
import { MatInputModule } from '@angular/material/input';
|
|
5
|
+
import * as i1 from '@angular/forms';
|
|
6
|
+
import { ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import * as i2 from '@angular/material/form-field';
|
|
8
|
+
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
9
|
+
import * as i6 from '@tft/form-validation-handler';
|
|
10
|
+
import { FormValidationHandlerModule } from '@tft/form-validation-handler';
|
|
11
|
+
import { a as CrisprControlComponent, I as InfoComponent, F as FieldContainerComponent } from './tft-crispr-forms-tft-crispr-forms-BFiZ8Nhn.mjs';
|
|
12
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
13
|
+
|
|
14
|
+
/* eslint-disable @nx/enforce-module-boundaries */
|
|
15
|
+
class InputFieldComponent extends CrisprControlComponent {
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
this.defaultConfig = { inputType: 'text' };
|
|
19
|
+
}
|
|
20
|
+
ngOnInit() {
|
|
21
|
+
super.ngOnInit();
|
|
22
|
+
}
|
|
23
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", 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 [attr.data-testid]=\"testId()\"\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 @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().info) {<crispr-info matSuffix [info]=\"config().info\"></crispr-info>}\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n\n\n</crispr-field-container>\n", styles: ["crispr-info[matSuffix]{margin-right:.75em}\n"], dependencies: [{ kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
|
|
25
|
+
}
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InputFieldComponent, decorators: [{
|
|
27
|
+
type: Component,
|
|
28
|
+
args: [{ selector: 'crispr-input-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
29
|
+
InfoComponent,
|
|
30
|
+
ReactiveFormsModule,
|
|
31
|
+
FieldContainerComponent,
|
|
32
|
+
MatFormFieldModule,
|
|
33
|
+
MatInputModule,
|
|
34
|
+
FormValidationHandlerModule,
|
|
35
|
+
MatIconModule
|
|
36
|
+
], template: "<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n <mat-form-field\n [attr.data-testid]=\"testId()\"\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 @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().info) {<crispr-info matSuffix [info]=\"config().info\"></crispr-info>}\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n\n\n</crispr-field-container>\n", styles: ["crispr-info[matSuffix]{margin-right:.75em}\n"] }]
|
|
37
|
+
}], ctorParameters: () => [] });
|
|
38
|
+
|
|
39
|
+
export { InputFieldComponent };
|
|
40
|
+
//# sourceMappingURL=tft-crispr-forms-index-D699lPdT.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tft-crispr-forms-index-D699lPdT.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/input-field/input-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/input-field/input-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport { InfoComponent } from '../info';\nimport { InputFieldConfig } from '../../utils';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\n@Component({\n selector: 'crispr-input-field',\n templateUrl: './input-field.component.html',\n styleUrls: ['./input-field.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n InfoComponent,\n ReactiveFormsModule,\n FieldContainerComponent,\n MatFormFieldModule,\n MatInputModule,\n FormValidationHandlerModule,\n MatIconModule\n ]\n})\nexport class InputFieldComponent extends CrisprControlComponent<InputFieldConfig> implements OnInit {\n\n defaultConfig: Partial<InputFieldConfig> = {inputType: 'text'};\n constructor() {\n super();\n }\n\n ngOnInit() {\n super.ngOnInit();\n }\n}\n","<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n <mat-form-field\n [attr.data-testid]=\"testId()\"\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 @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().info) {<crispr-info matSuffix [info]=\"config().info\"></crispr-info>}\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n\n\n</crispr-field-container>\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import * as i2 from '@angular/material/slider';
|
|
4
|
+
import { MatSliderModule } from '@angular/material/slider';
|
|
5
|
+
import * as i1 from '@angular/forms';
|
|
6
|
+
import { ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import { a as CrisprControlComponent, I as InfoComponent, F as FieldContainerComponent } from './tft-crispr-forms-tft-crispr-forms-BFiZ8Nhn.mjs';
|
|
8
|
+
|
|
9
|
+
/* eslint-disable @nx/enforce-module-boundaries */
|
|
10
|
+
const defaultConfig = {
|
|
11
|
+
displayLimits: true,
|
|
12
|
+
displayWith: (val) => val,
|
|
13
|
+
};
|
|
14
|
+
class SliderFieldComponent extends CrisprControlComponent {
|
|
15
|
+
constructor() {
|
|
16
|
+
super();
|
|
17
|
+
this.defaultConfig = defaultConfig;
|
|
18
|
+
}
|
|
19
|
+
ngOnInit() {
|
|
20
|
+
super.ngOnInit();
|
|
21
|
+
}
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SliderFieldComponent, isStandalone: true, selector: "crispr-slider-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n @if (config().label) {\n <label>\n {{config().label}}\n @if (config().info) {\n <crispr-info [info]=\"config().info\">\n </crispr-info>\n }\n </label>\n }\n <div class=\"slider-container\">\n @if (config().displayLimits) {\n <span>\n {{config().min}}\n </span>\n }\n <mat-slider [attr.data-testid]=\"testId()\" [discrete]=\"config().discrete\"\n [displayWith]=\"config().displayWith\" class=\"example-margin\" [formGroup]=\"group()\" [max]=\"config().max\"\n [min]=\"config().min\" [step]=\"config().step\">\n <input matSliderThumb [formControlName]=\"config().controlName\">\n </mat-slider>\n @if (config().displayLimits) {\n <span>\n {{config().max}}\n </span>\n }\n </div>\n\n</crispr-field-container>", styles: [".slider-container{display:flex;align-items:center}.slider-container mat-slider{flex:1}\n"], dependencies: [{ 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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
|
|
24
|
+
}
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SliderFieldComponent, decorators: [{
|
|
26
|
+
type: Component,
|
|
27
|
+
args: [{ selector: 'crispr-slider-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
28
|
+
InfoComponent,
|
|
29
|
+
FieldContainerComponent,
|
|
30
|
+
ReactiveFormsModule,
|
|
31
|
+
MatSliderModule
|
|
32
|
+
], template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n @if (config().label) {\n <label>\n {{config().label}}\n @if (config().info) {\n <crispr-info [info]=\"config().info\">\n </crispr-info>\n }\n </label>\n }\n <div class=\"slider-container\">\n @if (config().displayLimits) {\n <span>\n {{config().min}}\n </span>\n }\n <mat-slider [attr.data-testid]=\"testId()\" [discrete]=\"config().discrete\"\n [displayWith]=\"config().displayWith\" class=\"example-margin\" [formGroup]=\"group()\" [max]=\"config().max\"\n [min]=\"config().min\" [step]=\"config().step\">\n <input matSliderThumb [formControlName]=\"config().controlName\">\n </mat-slider>\n @if (config().displayLimits) {\n <span>\n {{config().max}}\n </span>\n }\n </div>\n\n</crispr-field-container>", styles: [".slider-container{display:flex;align-items:center}.slider-container mat-slider{flex:1}\n"] }]
|
|
33
|
+
}], ctorParameters: () => [] });
|
|
34
|
+
|
|
35
|
+
export { SliderFieldComponent };
|
|
36
|
+
//# sourceMappingURL=tft-crispr-forms-index-DOaGEZK0.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tft-crispr-forms-index-DOaGEZK0.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/slider-field/slider-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/slider-field/slider-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';\nimport { MatSliderModule } from '@angular/material/slider';\n\nimport { ReactiveFormsModule } from '@angular/forms';\n// import { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport { InfoComponent } from '../info';\nimport {\n SliderFieldConfig\n} from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\nconst defaultConfig: Partial<SliderFieldConfig> = { \n displayLimits: true,\n displayWith: (val) => val,\n};\n\n\n@Component({\n selector: 'crispr-slider-field',\n templateUrl: './slider-field.component.html',\n styleUrls: ['./slider-field.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n InfoComponent,\n FieldContainerComponent,\n ReactiveFormsModule,\n MatSliderModule\n ]\n})\nexport class SliderFieldComponent extends CrisprControlComponent<SliderFieldConfig> implements OnInit {\n defaultConfig = defaultConfig;\n constructor() {\n super();\n }\n\n ngOnInit() {\n super.ngOnInit();\n }\n}\n","<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n @if (config().label) {\n <label>\n {{config().label}}\n @if (config().info) {\n <crispr-info [info]=\"config().info\">\n </crispr-info>\n }\n </label>\n }\n <div class=\"slider-container\">\n @if (config().displayLimits) {\n <span>\n {{config().min}}\n </span>\n }\n <mat-slider [attr.data-testid]=\"testId()\" [discrete]=\"config().discrete\"\n [displayWith]=\"config().displayWith\" class=\"example-margin\" [formGroup]=\"group()\" [max]=\"config().max\"\n [min]=\"config().min\" [step]=\"config().step\">\n <input matSliderThumb [formControlName]=\"config().controlName\">\n </mat-slider>\n @if (config().displayLimits) {\n <span>\n {{config().max}}\n </span>\n }\n </div>\n\n</crispr-field-container>"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import * as i1$1 from '@angular/common';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from '@angular/core';
|
|
4
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
|
+
import * as i1 from '@angular/forms';
|
|
6
|
+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import { MatOptionModule } from '@angular/material/core';
|
|
8
|
+
import * as i3 from '@angular/material/input';
|
|
9
|
+
import { MatInputModule } from '@angular/material/input';
|
|
10
|
+
import * as i3$1 from '@angular/material/select';
|
|
11
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
12
|
+
import { combineLatest } from 'rxjs';
|
|
13
|
+
import { startWith } from 'rxjs/operators';
|
|
14
|
+
import { O as OptionComponent } from './tft-crispr-forms-index-BIPapWdD.mjs';
|
|
15
|
+
import * as i6 from '@tft/form-validation-handler';
|
|
16
|
+
import { FormValidationHandlerModule } from '@tft/form-validation-handler';
|
|
17
|
+
import { a as CrisprControlComponent, o as observablifyOptions, I as InfoComponent, F as FieldContainerComponent } from './tft-crispr-forms-tft-crispr-forms-BFiZ8Nhn.mjs';
|
|
18
|
+
import * as i2 from '@angular/material/form-field';
|
|
19
|
+
import * as i2$1 from '@angular/material/autocomplete';
|
|
20
|
+
|
|
21
|
+
/* eslint-disable @nx/enforce-module-boundaries */
|
|
22
|
+
const defaultConfig = {};
|
|
23
|
+
class UnitConversionFieldComponent extends CrisprControlComponent {
|
|
24
|
+
constructor() {
|
|
25
|
+
super(...arguments);
|
|
26
|
+
this.defaultConfig = defaultConfig;
|
|
27
|
+
this.displayValueControl = new FormControl();
|
|
28
|
+
this.unitSelectControl = new FormControl();
|
|
29
|
+
}
|
|
30
|
+
ngOnInit() {
|
|
31
|
+
const config = this.config();
|
|
32
|
+
super.ngOnInit();
|
|
33
|
+
// TODO: Validators need work. validation is tricky because the input needs to be validated against but the validator will compare against the controls value
|
|
34
|
+
// this.displayValueControl.setValidators(this.config.validators);
|
|
35
|
+
const controlValuePipeline = [
|
|
36
|
+
this.displayValueControl.valueChanges.pipe(startWith(this.displayValueControl.value)),
|
|
37
|
+
];
|
|
38
|
+
// setup all required pieces when showing a field for selecting units
|
|
39
|
+
if (config.showUnitSelect === true) {
|
|
40
|
+
this.unitOptions$ = observablifyOptions(config.selectableUnits, this.group());
|
|
41
|
+
controlValuePipeline.push(this.unitSelectControl.valueChanges.pipe(startWith(config?.initialDisplayUnit || null)));
|
|
42
|
+
this.unitSelectControl.setValue(config?.initialDisplayUnit || null);
|
|
43
|
+
}
|
|
44
|
+
this.transformationSubscription = combineLatest(controlValuePipeline).subscribe(([displayValue, unitValue]) => {
|
|
45
|
+
const computedValue = this.config().storedValueConversion(displayValue, unitValue);
|
|
46
|
+
this.control().setValue(computedValue);
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
ngOnDestroy() {
|
|
50
|
+
this.transformationSubscription.unsubscribe();
|
|
51
|
+
}
|
|
52
|
+
setInitialDisplayValue(storedValue, unit) {
|
|
53
|
+
const initialDisplayValue = this.config().initialDisplayValueConversion(storedValue || null, unit);
|
|
54
|
+
this.displayValueControl.setValue(initialDisplayValue);
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* We override the 'setControlValue' we inherited from crisprControlMixin and add our custom logic,
|
|
58
|
+
* This function gets called onInit because were object oriented. it's so great, so great that I'm
|
|
59
|
+
* typing a paragraph to explain what the hell is going on...
|
|
60
|
+
* @param value the initial value for the control passed down from the form components input
|
|
61
|
+
*/
|
|
62
|
+
setControlValue(value) {
|
|
63
|
+
const config = this.config();
|
|
64
|
+
const initialUnitValue = config.showUnitSelect
|
|
65
|
+
? config?.initialDisplayUnit
|
|
66
|
+
: null;
|
|
67
|
+
this.setInitialDisplayValue(value, initialUnitValue);
|
|
68
|
+
}
|
|
69
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: UnitConversionFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
70
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: UnitConversionFieldComponent, isStandalone: true, selector: "crispr-unit-conversion-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n <mat-form-field [attr.data-testid]=\"testId()\" [style.width.%]=\"config().showUnitSelect ? 60 : 100\" class=\"number-field\" [color]=\"config().color\"\n [appearance]=\"config().appearance\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <input type=\"number\" matInput [formControl]=\"displayValueControl\" [placeholder]=\"config().placeholder\"\n [min]=\"config().min\" [max]=\"config().max\" [step]=\"config().step\" [autofocus]=\"config().autofocus\">\n @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().info) {<crispr-info matSuffix [info]=\"config().info\"></crispr-info>}\n </mat-form-field>\n\n @if (config().showUnitSelect) {\n <mat-form-field [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\" class=\"unit-field\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <mat-select #selectField [formControl]=\"unitSelectControl\">\n @for (option of unitOptions$ | async; track option) {\n <mat-option [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n }\n </mat-select>\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n </mat-form-field>\n }\n\n</crispr-field-container>", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
|
|
71
|
+
}
|
|
72
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: UnitConversionFieldComponent, decorators: [{
|
|
73
|
+
type: Component,
|
|
74
|
+
args: [{ selector: 'crispr-unit-conversion-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
75
|
+
CommonModule,
|
|
76
|
+
InfoComponent,
|
|
77
|
+
OptionComponent,
|
|
78
|
+
ReactiveFormsModule,
|
|
79
|
+
FieldContainerComponent,
|
|
80
|
+
MatInputModule,
|
|
81
|
+
MatSelectModule,
|
|
82
|
+
MatOptionModule,
|
|
83
|
+
FormValidationHandlerModule,
|
|
84
|
+
], standalone: true, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n <mat-form-field [attr.data-testid]=\"testId()\" [style.width.%]=\"config().showUnitSelect ? 60 : 100\" class=\"number-field\" [color]=\"config().color\"\n [appearance]=\"config().appearance\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <input type=\"number\" matInput [formControl]=\"displayValueControl\" [placeholder]=\"config().placeholder\"\n [min]=\"config().min\" [max]=\"config().max\" [step]=\"config().step\" [autofocus]=\"config().autofocus\">\n @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().info) {<crispr-info matSuffix [info]=\"config().info\"></crispr-info>}\n </mat-form-field>\n\n @if (config().showUnitSelect) {\n <mat-form-field [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\" class=\"unit-field\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <mat-select #selectField [formControl]=\"unitSelectControl\">\n @for (option of unitOptions$ | async; track option) {\n <mat-option [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n }\n </mat-select>\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n </mat-form-field>\n }\n\n</crispr-field-container>", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"] }]
|
|
85
|
+
}] });
|
|
86
|
+
|
|
87
|
+
export { UnitConversionFieldComponent };
|
|
88
|
+
//# sourceMappingURL=tft-crispr-forms-index-D_9DqcSv.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tft-crispr-forms-index-D_9DqcSv.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/unit-conversion-field/unit-conversion-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/unit-conversion-field/unit-conversion-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { CommonModule } from '@angular/common';\nimport {\n Component,\n OnInit,\n ChangeDetectionStrategy,\n OnDestroy,\n} from '@angular/core';\nimport { ReactiveFormsModule, FormControl } from '@angular/forms';\nimport { MatOptionModule } from '@angular/material/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { combineLatest, Observable, Subscription } from 'rxjs';\nimport { startWith } from 'rxjs/operators';\nimport { OptionComponent } from '../option';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport { InfoComponent } from '../info';\nimport {\n observablifyOptions,\n SelectOption,\n UnitConversionFieldConfig,\n} from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\nconst defaultConfig: Partial<UnitConversionFieldConfig> = {};\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'crispr-unit-conversion-field',\n templateUrl: './unit-conversion-field.component.html',\n styleUrls: ['./unit-conversion-field.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n CommonModule,\n InfoComponent,\n OptionComponent,\n ReactiveFormsModule,\n FieldContainerComponent,\n MatInputModule,\n MatSelectModule,\n MatOptionModule,\n FormValidationHandlerModule,\n ],\n standalone: true\n})\nexport class UnitConversionFieldComponent\n extends CrisprControlComponent<UnitConversionFieldConfig>\n implements OnInit, OnDestroy\n{\n defaultConfig = defaultConfig;\n\n displayValueControl = new FormControl();\n unitSelectControl = new FormControl();\n unitOptions$: Observable<SelectOption[]>;\n\n transformationSubscription: Subscription;\n\n ngOnInit() {\n const config = this.config();\n super.ngOnInit();\n // TODO: Validators need work. validation is tricky because the input needs to be validated against but the validator will compare against the controls value\n // this.displayValueControl.setValidators(this.config.validators);\n\n const controlValuePipeline: Observable<string>[] = [\n this.displayValueControl.valueChanges.pipe(\n startWith(this.displayValueControl.value)\n ),\n ];\n // setup all required pieces when showing a field for selecting units\n if (config.showUnitSelect === true) {\n this.unitOptions$ = observablifyOptions(\n config.selectableUnits,\n this.group()\n );\n controlValuePipeline.push(\n this.unitSelectControl.valueChanges.pipe(\n startWith(config?.initialDisplayUnit || null)\n )\n );\n this.unitSelectControl.setValue(config?.initialDisplayUnit || null);\n }\n\n this.transformationSubscription = combineLatest(\n controlValuePipeline\n ).subscribe(([displayValue, unitValue]) => {\n const computedValue = this.config().storedValueConversion(\n displayValue,\n unitValue\n );\n this.control().setValue(computedValue);\n });\n }\n\n ngOnDestroy() {\n this.transformationSubscription.unsubscribe();\n }\n\n setInitialDisplayValue(storedValue: any, unit: unknown) {\n const initialDisplayValue = this.config().initialDisplayValueConversion(\n storedValue || null,\n unit\n );\n this.displayValueControl.setValue(initialDisplayValue);\n }\n\n /**\n * We override the 'setControlValue' we inherited from crisprControlMixin and add our custom logic,\n * This function gets called onInit because were object oriented. it's so great, so great that I'm\n * typing a paragraph to explain what the hell is going on...\n * @param value the initial value for the control passed down from the form components input\n */\n setControlValue(value) {\n const config = this.config();\n const initialUnitValue = config.showUnitSelect\n ? config?.initialDisplayUnit\n : null;\n this.setInitialDisplayValue(value, initialUnitValue);\n }\n}\n","<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n <mat-form-field [attr.data-testid]=\"testId()\" [style.width.%]=\"config().showUnitSelect ? 60 : 100\" class=\"number-field\" [color]=\"config().color\"\n [appearance]=\"config().appearance\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <input type=\"number\" matInput [formControl]=\"displayValueControl\" [placeholder]=\"config().placeholder\"\n [min]=\"config().min\" [max]=\"config().max\" [step]=\"config().step\" [autofocus]=\"config().autofocus\">\n @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n @if (config().info) {<crispr-info matSuffix [info]=\"config().info\"></crispr-info>}\n </mat-form-field>\n\n @if (config().showUnitSelect) {\n <mat-form-field [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\" class=\"unit-field\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <mat-select #selectField [formControl]=\"unitSelectControl\">\n @for (option of unitOptions$ | async; track option) {\n <mat-option [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n }\n </mat-select>\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n </mat-form-field>\n }\n\n</crispr-field-container>"],"names":["i2","i3","i4","i5","i7"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAyBA,MAAM,aAAa,GAAuC,EAAE;AAqBtD,MAAO,4BACX,SAAQ,sBAAiD,CAAA;AApB3D,IAAA,WAAA,GAAA;;QAuBE,IAAA,CAAA,aAAa,GAAG,aAAa;AAE7B,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,WAAW,EAAE;AACvC,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,WAAW,EAAE;AAkEtC,IAAA;IA7DC,QAAQ,GAAA;AACN,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;QAC5B,KAAK,CAAC,QAAQ,EAAE;;;AAIhB,QAAA,MAAM,oBAAoB,GAAyB;AACjD,YAAA,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,IAAI,CACxC,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAC1C;SACF;;AAED,QAAA,IAAI,MAAM,CAAC,cAAc,KAAK,IAAI,EAAE;AAClC,YAAA,IAAI,CAAC,YAAY,GAAG,mBAAmB,CACrC,MAAM,CAAC,eAAe,EACtB,IAAI,CAAC,KAAK,EAAE,CACb;YACD,oBAAoB,CAAC,IAAI,CACvB,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,IAAI,CACtC,SAAS,CAAC,MAAM,EAAE,kBAAkB,IAAI,IAAI,CAAC,CAC9C,CACF;YACD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,MAAM,EAAE,kBAAkB,IAAI,IAAI,CAAC;QACrE;AAEA,QAAA,IAAI,CAAC,0BAA0B,GAAG,aAAa,CAC7C,oBAAoB,CACrB,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,KAAI;AACxC,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,qBAAqB,CACvD,YAAY,EACZ,SAAS,CACV;YACD,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC;AACxC,QAAA,CAAC,CAAC;IACJ;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,0BAA0B,CAAC,WAAW,EAAE;IAC/C;IAEA,sBAAsB,CAAC,WAAgB,EAAE,IAAa,EAAA;AACpD,QAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,6BAA6B,CACrE,WAAW,IAAI,IAAI,EACnB,IAAI,CACL;AACD,QAAA,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,mBAAmB,CAAC;IACxD;AAEA;;;;;AAKG;AACH,IAAA,eAAe,CAAC,KAAK,EAAA;AACnB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC;cAC5B,MAAM,EAAE;cACR,IAAI;AACR,QAAA,IAAI,CAAC,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACtD;8GAxEW,4BAA4B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,+GC9CzC,26CAyByB,EAAA,MAAA,EAAA,CAAA,yFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDSjB,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,aAAa,0EACb,eAAe,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,iGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,sGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gHAAA,EAAA,MAAA,EAAA,CAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gHAAA,EAAA,MAAA,EAAA,CAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,uBAAuB,8GACvB,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACd,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,kBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,eAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,YAAA,EAAA,0BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,eAAe,8BACf,2BAA2B,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,8BAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,mBAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FAItB,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAnBxC,SAAS;AAEI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,EAAA,eAAA,EAGvB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACL,YAAY;wBACZ,aAAa;wBACb,eAAe;wBACf,mBAAmB;wBACnB,uBAAuB;wBACvB,cAAc;wBACd,eAAe;wBACf,eAAe;wBACf,2BAA2B;AAC9B,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,QAAA,EAAA,26CAAA,EAAA,MAAA,EAAA,CAAA,yFAAA,CAAA,EAAA;;;;;"}
|