@tft/crispr-forms 21.0.2 → 21.0.4
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-CpEWI7bT.mjs +95 -0
- package/fesm2022/tft-crispr-forms-autocomplete-field.component-CpEWI7bT.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-BICpK-GR.mjs +2 -0
- package/fesm2022/tft-crispr-forms-index-BICpK-GR.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-CG3cLos3.mjs +88 -0
- package/fesm2022/tft-crispr-forms-index-CG3cLos3.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-CLJ89Dev.mjs +73 -0
- package/fesm2022/tft-crispr-forms-index-CLJ89Dev.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-CvTUJeC6.mjs +39 -0
- package/fesm2022/tft-crispr-forms-index-CvTUJeC6.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-D6cKptyg.mjs +36 -0
- package/fesm2022/tft-crispr-forms-index-D6cKptyg.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-DAx6Am4i.mjs +40 -0
- package/fesm2022/tft-crispr-forms-index-DAx6Am4i.mjs.map +1 -0
- package/fesm2022/{tft-crispr-forms-index-BQFuEW6x.mjs → tft-crispr-forms-index-DEu5NqmR.mjs} +3 -3
- package/fesm2022/tft-crispr-forms-index-DEu5NqmR.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-DOpDpDdt.mjs +179 -0
- package/fesm2022/tft-crispr-forms-index-DOpDpDdt.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-DW1QGkrv.mjs +137 -0
- package/fesm2022/tft-crispr-forms-index-DW1QGkrv.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-DuvnSHLl.mjs +39 -0
- package/fesm2022/tft-crispr-forms-index-DuvnSHLl.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-DvrD-Lli.mjs +190 -0
- package/fesm2022/tft-crispr-forms-index-DvrD-Lli.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms-index-usD7jUs3.mjs +68 -0
- package/fesm2022/tft-crispr-forms-index-usD7jUs3.mjs.map +1 -0
- package/fesm2022/tft-crispr-forms.mjs +60 -53
- package/fesm2022/tft-crispr-forms.mjs.map +1 -1
- package/package.json +1 -1
- package/types/tft-crispr-forms.d.ts +14 -14
- 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.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-C9gYJRzb.mjs +0 -182
- package/fesm2022/tft-crispr-forms-index-C9gYJRzb.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
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
import * as i1$2 from '@angular/common';
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
3
|
-
import * as i0 from '@angular/core';
|
|
4
|
-
import { ViewChild, Optional, Self, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
|
-
import * as i1 from '@angular/forms';
|
|
6
|
-
import { ReactiveFormsModule } from '@angular/forms';
|
|
7
|
-
import * as i1$1 from '@angular/material/button';
|
|
8
|
-
import { MatButtonModule } from '@angular/material/button';
|
|
9
|
-
import * as i2$2 from '@angular/material/form-field';
|
|
10
|
-
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
|
-
import * as i2$1 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 * as i2 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 { CrisprControlComponent, convertBytesToMb, FieldContainerComponent, SelectedFileComponent, FileDropzoneDirective } from './tft-crispr-forms.mjs';
|
|
22
|
-
|
|
23
|
-
/* eslint-disable @nx/enforce-module-boundaries */
|
|
24
|
-
class ImageUploadFieldComponent extends CrisprControlComponent {
|
|
25
|
-
constructor(ngControl, domSanitizer, cdr) {
|
|
26
|
-
super();
|
|
27
|
-
this.ngControl = ngControl;
|
|
28
|
-
this.domSanitizer = domSanitizer;
|
|
29
|
-
this.cdr = cdr;
|
|
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
|
-
if (this.ngControl != null) {
|
|
103
|
-
// Setting the value accessor directly (instead of using
|
|
104
|
-
// the providers) to avoid running into a circular import.
|
|
105
|
-
ngControl.valueAccessor = this;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
ngOnInit() {
|
|
109
|
-
super.ngOnInit();
|
|
110
|
-
this.imageSrcUrl$ = combineLatest([
|
|
111
|
-
this.compressedImageUrlString$.pipe(startWith(null)),
|
|
112
|
-
this.control().valueChanges.pipe(startWith(this.value), map((controlValue) => {
|
|
113
|
-
if (!controlValue)
|
|
114
|
-
return null;
|
|
115
|
-
if (controlValue instanceof File)
|
|
116
|
-
return null;
|
|
117
|
-
return (this.config().mapInputValueToUrl?.(controlValue) ||
|
|
118
|
-
controlValue);
|
|
119
|
-
})),
|
|
120
|
-
]).pipe(map(([compressedImageUrlString, controlUrl]) => {
|
|
121
|
-
return compressedImageUrlString || controlUrl || null;
|
|
122
|
-
}));
|
|
123
|
-
this.disabled$ = this.config().disabledCallback
|
|
124
|
-
? this.config().disabledCallback(this.group())
|
|
125
|
-
: of(false);
|
|
126
|
-
}
|
|
127
|
-
filesChanged(files) {
|
|
128
|
-
if (files && files.length > 0) {
|
|
129
|
-
const imageFile = files[0];
|
|
130
|
-
// We clear the control here so that it is invalid while compressing
|
|
131
|
-
// the input pipeline will take care of resetting it
|
|
132
|
-
this.control().patchValue(null);
|
|
133
|
-
// this.control().setErrors({compressing: {loadingMessage: 'Please wait while file compresses'}});
|
|
134
|
-
this.control().markAsTouched();
|
|
135
|
-
this.inputImageFileSubject.next(imageFile);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
clearFileInput() {
|
|
139
|
-
this.inputImageFileSubject.next(null);
|
|
140
|
-
this.fileInputRef.nativeElement.value = '';
|
|
141
|
-
this.control().patchValue(null);
|
|
142
|
-
this.control().markAsTouched();
|
|
143
|
-
this.isUploaded = false;
|
|
144
|
-
}
|
|
145
|
-
resetToInitialValue(initialValue) {
|
|
146
|
-
this.inputImageFileSubject.next(null);
|
|
147
|
-
this.control().patchValue(initialValue);
|
|
148
|
-
this.isUploaded = false;
|
|
149
|
-
}
|
|
150
|
-
writeValue(value) { }
|
|
151
|
-
registerOnChange(fn) {
|
|
152
|
-
this.onChange = fn;
|
|
153
|
-
}
|
|
154
|
-
registerOnTouched(fn) { }
|
|
155
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ImageUploadFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
156
|
-
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 [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$1.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.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 }); }
|
|
157
|
-
}
|
|
158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ImageUploadFieldComponent, decorators: [{
|
|
159
|
-
type: Component,
|
|
160
|
-
args: [{ selector: 'crispr-image-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
161
|
-
CommonModule,
|
|
162
|
-
FieldContainerComponent,
|
|
163
|
-
ReactiveFormsModule,
|
|
164
|
-
MatIconModule,
|
|
165
|
-
MatButtonModule,
|
|
166
|
-
MatFormFieldModule,
|
|
167
|
-
MatInputModule,
|
|
168
|
-
SelectedFileComponent,
|
|
169
|
-
FileDropzoneDirective,
|
|
170
|
-
FormValidationHandlerModule,
|
|
171
|
-
], standalone: true, template: "<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n\n <mat-form-field floatLabel=\"always\"\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"] }]
|
|
172
|
-
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
173
|
-
type: Optional
|
|
174
|
-
}, {
|
|
175
|
-
type: Self
|
|
176
|
-
}] }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { fileInputRef: [{
|
|
177
|
-
type: ViewChild,
|
|
178
|
-
args: ['fileInput']
|
|
179
|
-
}] } });
|
|
180
|
-
|
|
181
|
-
export { ImageUploadFieldComponent };
|
|
182
|
-
//# sourceMappingURL=tft-crispr-forms-index-C9gYJRzb.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tft-crispr-forms-index-C9gYJRzb.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 {\n Component,\n ElementRef,\n ViewChild,\n OnInit,\n ChangeDetectionStrategy,\n Optional,\n Self,\n ChangeDetectorRef,\n} 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 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 @Optional() @Self() public ngControl: NgControl,\n private domSanitizer: DomSanitizer,\n private cdr: ChangeDetectorRef\n ) {\n super();\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 [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":["i4","i5","i7","i8"],"mappings":"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"}
|
|
@@ -1,88 +0,0 @@
|
|
|
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-UAYeTe3L.mjs';
|
|
15
|
-
import * as i6 from '@tft/form-validation-handler';
|
|
16
|
-
import { FormValidationHandlerModule } from '@tft/form-validation-handler';
|
|
17
|
-
import { CrisprControlComponent, observablifyOptions, InfoComponent, FieldContainerComponent } from './tft-crispr-forms.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]=\"config().controlName\" [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]=\"config().controlName\" [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-CFwkbxFk.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tft-crispr-forms-index-CFwkbxFk.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]=\"config().controlName\" [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":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tft-crispr-forms-index-DEctfeGr.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import * as i3 from '@angular/material/select';
|
|
4
|
-
import { MatSelectModule } from '@angular/material/select';
|
|
5
|
-
import * as i1$2 from '@angular/common';
|
|
6
|
-
import { CommonModule } from '@angular/common';
|
|
7
|
-
import * as i1 from '@angular/material/checkbox';
|
|
8
|
-
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
9
|
-
import * as i1$1 from '@angular/forms';
|
|
10
|
-
import { ReactiveFormsModule } from '@angular/forms';
|
|
11
|
-
import * as i2 from '@angular/material/form-field';
|
|
12
|
-
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
13
|
-
import { O as OptionComponent } from './tft-crispr-forms-index-UAYeTe3L.mjs';
|
|
14
|
-
import * as i6 from '@tft/form-validation-handler';
|
|
15
|
-
import { FormValidationHandlerModule } from '@tft/form-validation-handler';
|
|
16
|
-
import { CrisprControlComponent, observablifyOptions, InfoComponent, FieldContainerComponent } from './tft-crispr-forms.mjs';
|
|
17
|
-
import * as i2$1 from '@angular/material/autocomplete';
|
|
18
|
-
|
|
19
|
-
/* eslint-disable @nx/enforce-module-boundaries */
|
|
20
|
-
class SelectFieldComponent extends CrisprControlComponent {
|
|
21
|
-
constructor() {
|
|
22
|
-
super(...arguments);
|
|
23
|
-
this.defaultConfig = {
|
|
24
|
-
enableToggleAll: false,
|
|
25
|
-
color: 'primary',
|
|
26
|
-
};
|
|
27
|
-
this.allSelected = false;
|
|
28
|
-
}
|
|
29
|
-
ngOnInit() {
|
|
30
|
-
super.ngOnInit();
|
|
31
|
-
// options$ can be passed as an array, promise that resolves array, or observable that resolves array
|
|
32
|
-
// this functions accounts for all possibilities and converts to observable that resolves array
|
|
33
|
-
this.options$ = observablifyOptions(this.config().options, this.group());
|
|
34
|
-
}
|
|
35
|
-
ngAfterViewInit() {
|
|
36
|
-
if (this.config().multiple &&
|
|
37
|
-
this.config().enableToggleAll &&
|
|
38
|
-
this.selectField.options?.length === this.value()?.length) {
|
|
39
|
-
this.allSelected = true;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
toggleAll(isSelected) {
|
|
43
|
-
if (isSelected) {
|
|
44
|
-
this.selectField.options.forEach((option) => option.deselect());
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
this.selectField.options.forEach((option) => option.select());
|
|
48
|
-
}
|
|
49
|
-
this.allSelected = !this.allSelected;
|
|
50
|
-
}
|
|
51
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
52
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", 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 [attr.data-testid]=\"config().controlName\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <mat-select\n #selectField\n [formControlName]=\"config().controlName\"\n [placeholder]=\"config().placeholder\"\n [multiple]=\"config().multiple\">\n\n @if (config()?.multiple && config().enableToggleAll) {\n <mat-checkbox\n [color]=\"config().color\"\n [checked]=\"allSelected\"\n (click)=\"toggleAll(allSelected)\">\n Select All\n </mat-checkbox>\n }\n @for (option of options$ | async; track option) {\n <mat-option\n [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n }\n\n </mat-select>\n\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</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\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: MatCheckboxModule }, { kind: "component", type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSelectModule }, { 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: "component", type: i3.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: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
|
|
53
|
-
}
|
|
54
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
|
|
55
|
-
type: Component,
|
|
56
|
-
args: [{ selector: 'crispr-select-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
57
|
-
CommonModule,
|
|
58
|
-
InfoComponent,
|
|
59
|
-
OptionComponent,
|
|
60
|
-
MatCheckboxModule,
|
|
61
|
-
MatSelectModule,
|
|
62
|
-
ReactiveFormsModule,
|
|
63
|
-
FormValidationHandlerModule,
|
|
64
|
-
FieldContainerComponent,
|
|
65
|
-
MatFormFieldModule,
|
|
66
|
-
], standalone: true, template: "<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n\n <mat-form-field\n [attr.data-testid]=\"config().controlName\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <mat-select\n #selectField\n [formControlName]=\"config().controlName\"\n [placeholder]=\"config().placeholder\"\n [multiple]=\"config().multiple\">\n\n @if (config()?.multiple && config().enableToggleAll) {\n <mat-checkbox\n [color]=\"config().color\"\n [checked]=\"allSelected\"\n (click)=\"toggleAll(allSelected)\">\n Select All\n </mat-checkbox>\n }\n @for (option of options$ | async; track option) {\n <mat-option\n [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n }\n\n </mat-select>\n\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</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"] }]
|
|
67
|
-
}], propDecorators: { selectField: [{
|
|
68
|
-
type: ViewChild,
|
|
69
|
-
args: ['selectField']
|
|
70
|
-
}] } });
|
|
71
|
-
|
|
72
|
-
export { SelectFieldComponent };
|
|
73
|
-
//# sourceMappingURL=tft-crispr-forms-index-DcrZSpdk.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tft-crispr-forms-index-DcrZSpdk.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/select-field/select-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/select-field/select-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport {\n Component,\n OnInit,\n ChangeDetectionStrategy,\n ViewChild,\n AfterViewInit,\n} from '@angular/core';\nimport { Observable } from 'rxjs';\n\nimport { MatSelect, MatSelectModule } from '@angular/material/select';\nimport { ThemePalette } from '@angular/material/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OptionComponent } from '../option';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { InfoComponent } from '../info';\nimport { FieldContainerComponent } from '../field-container';\nimport {\n observablifyOptions,\n SelectFieldConfig,\n SelectOption,\n} from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\n@Component({\n selector: 'crispr-select-field',\n templateUrl: './select-field.component.html',\n styleUrls: ['./select-field.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n CommonModule,\n InfoComponent,\n OptionComponent,\n MatCheckboxModule,\n MatSelectModule,\n ReactiveFormsModule,\n FormValidationHandlerModule,\n FieldContainerComponent,\n MatFormFieldModule,\n ],\n standalone: true\n})\nexport class SelectFieldComponent\n extends CrisprControlComponent<SelectFieldConfig>\n implements OnInit, AfterViewInit\n{\n defaultConfig = {\n enableToggleAll: false,\n color: 'primary' as ThemePalette,\n };\n options$: Observable<SelectOption[]>;\n allSelected = false;\n\n @ViewChild('selectField') selectField: MatSelect;\n\n ngOnInit() {\n super.ngOnInit();\n // options$ can be passed as an array, promise that resolves array, or observable that resolves array\n // this functions accounts for all possibilities and converts to observable that resolves array\n this.options$ = observablifyOptions(this.config().options, this.group());\n }\n\n ngAfterViewInit() {\n if (\n this.config().multiple &&\n this.config().enableToggleAll &&\n this.selectField.options?.length === (this.value() as any[])?.length\n ) {\n this.allSelected = true;\n }\n }\n\n toggleAll(isSelected: boolean) {\n if (isSelected) {\n this.selectField.options.forEach((option) => option.deselect());\n } else {\n this.selectField.options.forEach((option) => option.select());\n }\n this.allSelected = !this.allSelected;\n }\n}\n","<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n\n <mat-form-field\n [attr.data-testid]=\"config().controlName\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n <mat-select\n #selectField\n [formControlName]=\"config().controlName\"\n [placeholder]=\"config().placeholder\"\n [multiple]=\"config().multiple\">\n\n @if (config()?.multiple && config().enableToggleAll) {\n <mat-checkbox\n [color]=\"config().color\"\n [checked]=\"allSelected\"\n (click)=\"toggleAll(allSelected)\">\n Select All\n </mat-checkbox>\n }\n @for (option of options$ | async; track option) {\n <mat-option\n [value]=\"option.value\">\n <crispr-option [option]=\"option\">\n </crispr-option>\n </mat-option>\n }\n\n </mat-select>\n\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</crispr-field-container>\n"],"names":["i5","i7"],"mappings":"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"}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import * as i1 from '@angular/material/datepicker';
|
|
4
|
-
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
5
|
-
import { MatDateFnsModule } from '@angular/material-date-fns-adapter';
|
|
6
|
-
import { of } from 'rxjs';
|
|
7
|
-
import * as i5 from '@angular/cdk/portal';
|
|
8
|
-
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
9
|
-
import * as i2 from '@angular/material/form-field';
|
|
10
|
-
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
|
-
import * as i1$2 from '@angular/common';
|
|
12
|
-
import { CommonModule } from '@angular/common';
|
|
13
|
-
import * as i1$1 from '@angular/forms';
|
|
14
|
-
import { ReactiveFormsModule } from '@angular/forms';
|
|
15
|
-
import * as i3 from '@angular/material/input';
|
|
16
|
-
import { MatInputModule } from '@angular/material/input';
|
|
17
|
-
import * as i6 from '@tft/form-validation-handler';
|
|
18
|
-
import { FormValidationHandlerModule } from '@tft/form-validation-handler';
|
|
19
|
-
import { CrisprControlComponent, FieldContainerComponent } from './tft-crispr-forms.mjs';
|
|
20
|
-
|
|
21
|
-
/* eslint-disable @nx/enforce-module-boundaries */
|
|
22
|
-
const defaultConfig = {
|
|
23
|
-
startView: 'month',
|
|
24
|
-
};
|
|
25
|
-
class DatepickerFieldComponent extends CrisprControlComponent {
|
|
26
|
-
constructor() {
|
|
27
|
-
super(...arguments);
|
|
28
|
-
this.defaultConfig = defaultConfig;
|
|
29
|
-
}
|
|
30
|
-
ngOnInit() {
|
|
31
|
-
super.ngOnInit();
|
|
32
|
-
const config = this.config();
|
|
33
|
-
this.startAt$ =
|
|
34
|
-
config.startAt instanceof Date
|
|
35
|
-
? of(config.startAt)
|
|
36
|
-
: config.startAt instanceof Function
|
|
37
|
-
? config.startAt(this.group())
|
|
38
|
-
: of(null);
|
|
39
|
-
this.dateClass = config?.cellClassFunction || null;
|
|
40
|
-
this.dateClass$ = config.dateClass
|
|
41
|
-
? config?.dateClass(this.group())
|
|
42
|
-
: of(() => '');
|
|
43
|
-
}
|
|
44
|
-
ngAfterContentInit() {
|
|
45
|
-
if (this.config().datepickerActions) {
|
|
46
|
-
this.calendarFooterPortal = new ComponentPortal(this.config().datepickerActions);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DatepickerFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", 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 [attr.data-testid]=\"config().controlName\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</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 @if (calendarFooterPortal) {\n <mat-datepicker-actions>\n <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n </mat-datepicker-actions>\n }\n </mat-datepicker>\n\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: MatDateFnsModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { 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 }); }
|
|
51
|
-
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DatepickerFieldComponent, decorators: [{
|
|
53
|
-
type: Component,
|
|
54
|
-
args: [{ selector: 'crispr-datepicker-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
55
|
-
CommonModule,
|
|
56
|
-
FieldContainerComponent,
|
|
57
|
-
MatDatepickerModule,
|
|
58
|
-
MatFormFieldModule,
|
|
59
|
-
ReactiveFormsModule,
|
|
60
|
-
MatInputModule,
|
|
61
|
-
MatDateFnsModule,
|
|
62
|
-
PortalModule,
|
|
63
|
-
FormValidationHandlerModule,
|
|
64
|
-
], standalone: true, template: "<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n <mat-form-field\n [attr.data-testid]=\"config().controlName\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</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 @if (calendarFooterPortal) {\n <mat-datepicker-actions>\n <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n </mat-datepicker-actions>\n }\n </mat-datepicker>\n\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n</crispr-field-container>\n\n" }]
|
|
65
|
-
}] });
|
|
66
|
-
|
|
67
|
-
export { DatepickerFieldComponent };
|
|
68
|
-
//# sourceMappingURL=tft-crispr-forms-index-DmaDlaNf.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tft-crispr-forms-index-DmaDlaNf.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/datepicker-field/datepicker-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/datepicker-field/datepicker-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport {\n Component,\n OnInit,\n ChangeDetectionStrategy,\n AfterContentInit,\n} from '@angular/core';\nimport {\n MatCalendarCellClassFunction,\n MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { MatDateFnsModule } from '@angular/material-date-fns-adapter';\nimport { Observable, of } from 'rxjs';\nimport { ComponentPortal, Portal, PortalModule } from '@angular/cdk/portal';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport {\n DatepickerFieldConfig,\n} from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\nconst defaultConfig: Partial<DatepickerFieldConfig> = {\n startView: 'month',\n};\n\n@Component({\n selector: 'crispr-datepicker-field',\n templateUrl: './datepicker-field.component.html',\n styleUrls: ['./datepicker-field.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n CommonModule,\n FieldContainerComponent,\n MatDatepickerModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n MatInputModule,\n MatDateFnsModule,\n PortalModule,\n FormValidationHandlerModule,\n ],\n standalone: true\n})\nexport class DatepickerFieldComponent\n extends CrisprControlComponent<DatepickerFieldConfig>\n implements OnInit, AfterContentInit\n{\n defaultConfig = defaultConfig;\n\n dateClass: MatCalendarCellClassFunction<Date>;\n dateClass$: Observable<MatCalendarCellClassFunction<Date>>;\n startAt$: Observable<Date>;\n\n /** A portal containing the footer component type for this calendar. */\n calendarFooterPortal: Portal<any>;\n\n ngOnInit() {\n super.ngOnInit();\n const config = this.config();\n this.startAt$ =\n config.startAt instanceof Date\n ? of(config.startAt)\n : config.startAt instanceof Function\n ? config.startAt(this.group())\n : of(null);\n this.dateClass = config?.cellClassFunction || null;\n this.dateClass$ = config.dateClass\n ? config?.dateClass(this.group())\n : of(() => '');\n }\n\n ngAfterContentInit() {\n if (this.config().datepickerActions) {\n this.calendarFooterPortal = new ComponentPortal(\n this.config().datepickerActions\n );\n }\n }\n\n // handleSelectedChange(event, picker: MatDatepicker<unknown>) {\n // console.log({event, picker})\n // if(this.config.selectedChange) {\n // this.config.selectedChange(event, picker);\n // }\n // }\n}\n","<crispr-field-container\n [config]=\"config()\"\n [group]=\"group()\">\n <mat-form-field\n [attr.data-testid]=\"config().controlName\"\n [color]=\"config().color\"\n [appearance]=\"config().appearance\"\n [formGroup]=\"group()\">\n @if (config().label) {<mat-label>{{config().label}}</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 @if (calendarFooterPortal) {\n <mat-datepicker-actions>\n <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n </mat-datepicker-actions>\n }\n </mat-datepicker>\n\n @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n </mat-form-field>\n</crispr-field-container>\n\n"],"names":["i4","i7"],"mappings":"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"}
|