@tft/crispr-forms 18.0.2 → 20.0.0

package/fesm2022/tft-crispr-forms-index-BQFuEW6x.mjs

@@ -0,0 +1,40 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i6 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import { CrisprControlComponent, observablifyOptions, FieldContainerComponent } from './tft-crispr-forms.mjs';
+
+/* eslint-disable @nx/enforce-module-boundaries */
+class RadioFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = {};
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // options$ can be passed as an array, promise that resolves array, or observable that resolves array
+        // this functions accounts for all possibilities and converts to observable that resolves array
+        this.options$ = observablifyOptions(this.config().options, this.group());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: RadioFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: RadioFieldComponent, isStandalone: true, selector: "crispr-radio-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-radio-group\n    [formControl]=\"control()\"\n    [color]=\"config().color\">\n    @for (option of options$ | async; track option) {\n      <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">\n        {{option.label}}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: RadioFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-radio-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatRadioModule,
+                        FormValidationHandlerModule,
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-radio-group\n    [formControl]=\"control()\"\n    [color]=\"config().color\">\n    @for (option of options$ | async; track option) {\n      <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">\n        {{option.label}}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"] }]
+        }] });
+
+export { RadioFieldComponent };
+//# sourceMappingURL=tft-crispr-forms-index-BQFuEW6x.mjs.map

package/fesm2022/tft-crispr-forms-index-BQFuEW6x.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tft-crispr-forms-index-BQFuEW6x.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/radio-field/radio-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/radio-field/radio-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';\nimport { Observable } from 'rxjs';\n\nimport { MatRadioModule } from '@angular/material/radio';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport { RadioFieldConfig, SelectOption, observablifyOptions } from '../../utils';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\n@Component({\n    selector: 'crispr-radio-field',\n    templateUrl: './radio-field.component.html',\n    styleUrls: ['./radio-field.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        FieldContainerComponent,\n        MatRadioModule,\n        FormValidationHandlerModule,\n    ],\n    standalone: true\n})\nexport class RadioFieldComponent extends CrisprControlComponent<RadioFieldConfig> implements OnInit {\n  defaultConfig = {};\n  options$: Observable<SelectOption[]>;\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","<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-radio-group\n    [formControl]=\"control()\"\n    [color]=\"config().color\">\n    @for (option of options$ | async; track option) {\n      <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">\n        {{option.label}}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</crispr-field-container>\n"],"names":["i3","i4"],"mappings":"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"}

package/fesm2022/tft-crispr-forms-index-BWsxn34Q.mjs

@@ -0,0 +1,2 @@
+export { A as AutocompleteFieldComponent } from './tft-crispr-forms-autocomplete-field.component-jdr2Hr6I.mjs';
+//# sourceMappingURL=tft-crispr-forms-index-BWsxn34Q.mjs.map

package/fesm2022/tft-crispr-forms-index-BWsxn34Q.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tft-crispr-forms-index-BWsxn34Q.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/fesm2022/tft-crispr-forms-index-Bh8kDfe4.mjs

@@ -0,0 +1,39 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i6 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import { CrisprControlComponent, InfoComponent, FieldContainerComponent } from './tft-crispr-forms.mjs';
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig = {
+    labelPosition: 'after',
+    inline: false,
+};
+class CheckboxFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: CheckboxFieldComponent, isStandalone: true, selector: "crispr-checkbox-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\"\n  [inlineField]=\"config().inline\">\n  <div\n    [formGroup]=\"group()\">\n    <mat-checkbox\n      [color]=\"config().color\"\n      [labelPosition]=\"config().labelPosition\"\n      [formControlName]=\"config().controlName\">\n      {{config().label}}\n      @if (config().info) {\n        <crispr-info\n          matSuffix\n          [info]=\"config().info\">\n        </crispr-info>\n      }\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"], dependencies: [{ kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { 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: 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: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-checkbox-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        InfoComponent,
+                        MatCheckboxModule,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        FormValidationHandlerModule
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\"\n  [inlineField]=\"config().inline\">\n  <div\n    [formGroup]=\"group()\">\n    <mat-checkbox\n      [color]=\"config().color\"\n      [labelPosition]=\"config().labelPosition\"\n      [formControlName]=\"config().controlName\">\n      {{config().label}}\n      @if (config().info) {\n        <crispr-info\n          matSuffix\n          [info]=\"config().info\">\n        </crispr-info>\n      }\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"] }]
+        }] });
+
+export { CheckboxFieldComponent };
+//# sourceMappingURL=tft-crispr-forms-index-Bh8kDfe4.mjs.map

package/fesm2022/tft-crispr-forms-index-Bh8kDfe4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tft-crispr-forms-index-Bh8kDfe4.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/checkbox-field/checkbox-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/checkbox-field/checkbox-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';\n\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\nimport { FieldContainerComponent } from '../field-container';\nimport {\n  CrisprFieldComponent,\n  CheckboxFieldConfig,\n} from '../../utils';\nimport { InfoComponent } from '../info';\nimport { CrisprControlComponent } from '../../utils/abstracts/crispr-control.abstract';\n\nconst defaultConfig: Partial<CheckboxFieldConfig> = {\n  labelPosition: 'after',\n  inline: false,\n};\n\n@Component({\n    selector: 'crispr-checkbox-field',\n    templateUrl: './checkbox-field.component.html',\n    styleUrls: ['./checkbox-field.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        InfoComponent,\n        MatCheckboxModule,\n        ReactiveFormsModule,\n        FieldContainerComponent,\n        FormValidationHandlerModule\n    ],\n    standalone: true\n})\nexport class CheckboxFieldComponent\n  extends CrisprControlComponent<CheckboxFieldConfig>\n  implements OnInit\n{\n  defaultConfig = defaultConfig;\n  ngOnInit() {\n    super.ngOnInit();\n  }\n}\n","<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\"\n  [inlineField]=\"config().inline\">\n  <div\n    [formGroup]=\"group()\">\n    <mat-checkbox\n      [color]=\"config().color\"\n      [labelPosition]=\"config().labelPosition\"\n      [formControlName]=\"config().controlName\">\n      {{config().label}}\n      @if (config().info) {\n        <crispr-info\n          matSuffix\n          [info]=\"config().info\">\n        </crispr-info>\n      }\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n"],"names":["i2","i3"],"mappings":"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"}

package/fesm2022/tft-crispr-forms-index-C9gYJRzb.mjs

@@ -0,0 +1,182 @@
+import * as i1$2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { ViewChild, Optional, Self, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i2 from '@angular/platform-browser';
+import imageCompression from 'browser-image-compression';
+import { Subject, combineLatest, of } from 'rxjs';
+import { shareReplay, switchMap, map, tap, startWith } from 'rxjs/operators';
+import * as i6 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import { CrisprControlComponent, convertBytesToMb, FieldContainerComponent, SelectedFileComponent, FileDropzoneDirective } from './tft-crispr-forms.mjs';
+
+/* eslint-disable @nx/enforce-module-boundaries */
+class ImageUploadFieldComponent extends CrisprControlComponent {
+    constructor(ngControl, domSanitizer, cdr) {
+        super();
+        this.ngControl = ngControl;
+        this.domSanitizer = domSanitizer;
+        this.cdr = cdr;
+        this.defaultConfig = {
+            // allowMultipleFiles: false,
+            acceptedTypes: 'image/*',
+            dropZoneText: 'DROP FILE HERE',
+            selectFilesButtonType: 'button',
+            selectButtonText: 'SELECT',
+            showClearFilesButton: true,
+            clearFilesButtonText: 'CLEAR',
+            resetFilesButtonText: 'RESET',
+            imagePreviewHeight: '250px',
+            compressImage: false,
+            targetCompressedImageFileSizeMb: 0.4,
+            minCompressionThresholdMb: 0.6,
+            useWebWorker: true,
+        };
+        this.inputImageFileSubject = new Subject();
+        this.inputImageFile$ = this.inputImageFileSubject
+            .asObservable()
+            .pipe(shareReplay(1));
+        this.compressedFile$ = this.inputImageFile$.pipe(switchMap(async (file) => {
+            if (!file || !(file instanceof File))
+                return null;
+            const { compressImage, targetCompressedImageFileSizeMb, minCompressionThresholdMb, maxWidthOrHeight, useWebWorker, } = this.config();
+            const fileSizeMb = convertBytesToMb(file.size);
+            const shouldCompress = compressImage &&
+                targetCompressedImageFileSizeMb < fileSizeMb &&
+                minCompressionThresholdMb < fileSizeMb;
+            if (shouldCompress) {
+                const options = {
+                    // Use maxWidthOrHeight if it was provided, else use target compressed size
+                    ...(maxWidthOrHeight
+                        ? { maxWidthOrHeight }
+                        : { maxSizeMB: targetCompressedImageFileSizeMb }),
+                    useWebWorker,
+                    maxIterations: 30,
+                    onProgress: (progress) => {
+                        this.progress = progress;
+                        this.cdr.detectChanges();
+                    },
+                };
+                return await imageCompression(file, options);
+            }
+            else
+                return file;
+        }), map((compressedFile) => {
+            if (!compressedFile)
+                return compressedFile;
+            const { type, name, lastModified } = compressedFile;
+            return new File([compressedFile], this.config().fileName || name, {
+                type,
+                lastModified,
+            });
+        }), tap((file) => {
+            // only set the value if there is a file because resetToInitialValue sets the control value
+            // to initial value and clears the compressed image, so setting it to null here would undo that
+            if (file) {
+                this.control().setValue(file);
+            }
+            if (file || this.value) {
+                this.control().markAsTouched();
+                setTimeout(() => {
+                    this.cdr.detectChanges();
+                }, 100);
+            }
+        }), shareReplay(1));
+        this.compressedImageUrlString$ = this.compressedFile$.pipe(switchMap(async (file) => {
+            if (!file)
+                return null;
+            const compressedStringImage = await imageCompression.getDataUrlFromFile(file);
+            return this.domSanitizer.bypassSecurityTrustResourceUrl(compressedStringImage);
+        }), shareReplay(1));
+        this.isUploaded = false;
+        if (this.ngControl != null) {
+            // Setting the value accessor directly (instead of using
+            // the providers) to avoid running into a circular import.
+            ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.imageSrcUrl$ = combineLatest([
+            this.compressedImageUrlString$.pipe(startWith(null)),
+            this.control().valueChanges.pipe(startWith(this.value), map((controlValue) => {
+                if (!controlValue)
+                    return null;
+                if (controlValue instanceof File)
+                    return null;
+                return (this.config().mapInputValueToUrl?.(controlValue) ||
+                    controlValue);
+            })),
+        ]).pipe(map(([compressedImageUrlString, controlUrl]) => {
+            return compressedImageUrlString || controlUrl || null;
+        }));
+        this.disabled$ = this.config().disabledCallback
+            ? this.config().disabledCallback(this.group())
+            : of(false);
+    }
+    filesChanged(files) {
+        if (files && files.length > 0) {
+            const imageFile = files[0];
+            // We clear the control here so that it is invalid while compressing
+            // the input pipeline will take care of resetting it
+            this.control().patchValue(null);
+            // this.control().setErrors({compressing: {loadingMessage: 'Please wait while file compresses'}});
+            this.control().markAsTouched();
+            this.inputImageFileSubject.next(imageFile);
+        }
+    }
+    clearFileInput() {
+        this.inputImageFileSubject.next(null);
+        this.fileInputRef.nativeElement.value = '';
+        this.control().patchValue(null);
+        this.control().markAsTouched();
+        this.isUploaded = false;
+    }
+    resetToInitialValue(initialValue) {
+        this.inputImageFileSubject.next(null);
+        this.control().patchValue(initialValue);
+        this.isUploaded = false;
+    }
+    writeValue(value) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) { }
+    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 }); }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ImageUploadFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-image-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FieldContainerComponent,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        SelectedFileComponent,
+                        FileDropzoneDirective,
+                        FormValidationHandlerModule,
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { fileInputRef: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+export { ImageUploadFieldComponent };
+//# sourceMappingURL=tft-crispr-forms-index-C9gYJRzb.mjs.map

package/fesm2022/tft-crispr-forms-index-C9gYJRzb.mjs.map

@@ -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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"}

package/fesm2022/tft-crispr-forms-index-ClPQl_5D.mjs

@@ -0,0 +1,137 @@
+import * as i0 from '@angular/core';
+import { ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { tap, map } from 'rxjs/operators';
+import * as i2 from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { ENTER } from '@angular/cdk/keycodes';
+import * as i5 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatOptionModule } from '@angular/material/core';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { O as OptionComponent } from './tft-crispr-forms-index-UAYeTe3L.mjs';
+import * as i2$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { DEFAULT_EMPTY_OPTIONS_MESSAGE, AbstractAutocompleteComponent, InfoComponent, FieldContainerComponent } from './tft-crispr-forms.mjs';
+import * as i6 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import * as i2$1 from '@angular/material/form-field';
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig = {
+    chipsSelectable: true,
+    areChipsRemovable: true,
+    tabToSelect: true,
+    autoActiveFirstOption: true,
+    imageUrlParam: 'image',
+    typeDebounceTime: 500,
+    allowDuplicates: false,
+    duplicateCompareFunction: (chip, option) => chip.value === option.value,
+    separatorKeyCodes: [ENTER],
+    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
+};
+class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig;
+        this.chips$ = new BehaviorSubject([]);
+        this.selectedChip = null;
+        this.controlValue$ = this.chips$.pipe(tap((chips) => {
+            this.control().setValue(chips.map((chip) => chip.value));
+        }));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.remainingOptions$ = combineLatest([this.chips$, this.options$]).pipe(map(([chips, options]) => {
+            return this.config().allowDuplicates
+                ? options
+                : options?.filter((option) => {
+                    return !chips.some((chip) => this.config().duplicateCompareFunction(chip, option));
+                });
+        }));
+    }
+    setControlValue(value) {
+        if (value) {
+            this.chips$.next(value);
+        }
+    }
+    // handles mat selecting
+    handleSelect(event) {
+        const selectedOption = event.option.value;
+        this.chips$.next([...this.chips$.value, selectedOption]);
+        this.chipInputRef.nativeElement.value = '';
+        this.autocompleteInputControl.setValue('');
+        // setTimeout needed because the panel thinks it's still open at this point
+        setTimeout(() => this.chipInput.openPanel());
+    }
+    /**
+     * To follow ARIA standards we want to select the active option on blur.
+     * matChipInputAddOnBlur should do this but it causes buggy behaviour
+     * @param event blur event that triggers the handle blur
+     */
+    handleTab(_event) {
+        if (this.chipInput.activeOption &&
+            (this.config().tabToSelect || this.config().addChipOnBlur)) {
+            const chip = this.chipInput.activeOption.value;
+            this.chips$.next([...this.chips$.value, chip]);
+        }
+    }
+    /**
+     * Handles selection via key tokens passed through separatorKeyCodes property
+     * NOTE: If TAB is used focus does not move on to next component
+     * @param event
+     */
+    handleTokenEnd(event) {
+        if (this.chipInput.activeOption) {
+            this.chipInput.activeOption.select();
+        }
+        event.chipInput?.clear();
+    }
+    mapToLabel(option) {
+        return option ? option.label : '';
+    }
+    removeChip(removedChip) {
+        const remainingChips = this.chips$.value.filter((chip) => chip !== removedChip);
+        this.chips$.next(remainingChips);
+    }
+    highlightChip(chip) {
+        if (this.config().chipsSelectable) {
+            this.selectedChip = chip;
+        }
+    }
+    blurField() {
+        this.selectedChip = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AutocompleteChiplistFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: AutocompleteChiplistFieldComponent, isStandalone: true, selector: "crispr-autocomplete-chiplist-field", viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "chipInputRef", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n\n  <mat-form-field [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n\n    <mat-chip-grid #chipList>\n      <!-- [selectable]=\"config().chipsSelectable\" -->\n      @for (chip of controlValue$ | async; track chip; let i = $index) {\n      <mat-chip-row class=\"refinement-chip\" [removable]=\"config().areChipsRemovable\"\n        [highlighted]=\"chip?.value === selectedChip?.value\" (click)=\"highlightChip(chip)\" (removed)=\"removeChip(chip)\">\n        @if (chip.imageUrl) {<img [src]=\"chip.imageUrl\" matChipAvatar alt=\"image of {{chip.label}}\">}\n        {{chip.label}}\n        @if (config().areChipsRemovable) {<mat-icon matChipRemove>cancel</mat-icon>}\n      </mat-chip-row>\n      }\n      <input class=\"hidden-error-directive-anchor\" (blur)=\"blurField()\" [formControlName]=\"config().controlName\"\n        type=\"text\" />\n\n      <input matInput [formControl]=\"autocompleteInputControl\" [placeholder]=\"config().placeholder\"\n        [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config().separatorKeyCodes\" (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\" type=\"text\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" (blur)=\"blurField()\"\n        #autoInput />\n      @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n      @if (config().info) {<crispr-info matSuffix [info]=\"config().info \"></crispr-info>}\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" [autoActiveFirstOption]=\"this.config().autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\" [displayWith]=\"mapToLabel\">\n      @if (remainingOptions$ | async; as remainingOptions) {\n      @if (remainingOptions.length > 0) {\n      @for (option of remainingOptions$ | async; track option) {\n      <mat-option [value]=\"option\">\n        <crispr-option [option]=\"option\"></crispr-option>\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n    </mat-autocomplete>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>", styles: [".refinement-chip .image-container{width:26px;height:26px;border-radius:50%;overflow:hidden;margin:-2px 4px -2px -8px}.refinement-chip .image-container img{width:100%;height:100%;object-fit:cover}.hidden-error-directive-anchor{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: "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: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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$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: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i5.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AutocompleteChiplistFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-autocomplete-chiplist-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatOptionModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        FormValidationHandlerModule,
+                    ], standalone: true, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n\n  <mat-form-field [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n\n    <mat-chip-grid #chipList>\n      <!-- [selectable]=\"config().chipsSelectable\" -->\n      @for (chip of controlValue$ | async; track chip; let i = $index) {\n      <mat-chip-row class=\"refinement-chip\" [removable]=\"config().areChipsRemovable\"\n        [highlighted]=\"chip?.value === selectedChip?.value\" (click)=\"highlightChip(chip)\" (removed)=\"removeChip(chip)\">\n        @if (chip.imageUrl) {<img [src]=\"chip.imageUrl\" matChipAvatar alt=\"image of {{chip.label}}\">}\n        {{chip.label}}\n        @if (config().areChipsRemovable) {<mat-icon matChipRemove>cancel</mat-icon>}\n      </mat-chip-row>\n      }\n      <input class=\"hidden-error-directive-anchor\" (blur)=\"blurField()\" [formControlName]=\"config().controlName\"\n        type=\"text\" />\n\n      <input matInput [formControl]=\"autocompleteInputControl\" [placeholder]=\"config().placeholder\"\n        [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config().separatorKeyCodes\" (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\" type=\"text\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" (blur)=\"blurField()\"\n        #autoInput />\n      @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n      @if (config().info) {<crispr-info matSuffix [info]=\"config().info \"></crispr-info>}\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" [autoActiveFirstOption]=\"this.config().autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\" [displayWith]=\"mapToLabel\">\n      @if (remainingOptions$ | async; as remainingOptions) {\n      @if (remainingOptions.length > 0) {\n      @for (option of remainingOptions$ | async; track option) {\n      <mat-option [value]=\"option\">\n        <crispr-option [option]=\"option\"></crispr-option>\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n    </mat-autocomplete>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>", styles: [".refinement-chip .image-container{width:26px;height:26px;border-radius:50%;overflow:hidden;margin:-2px 4px -2px -8px}.refinement-chip .image-container img{width:100%;height:100%;object-fit:cover}.hidden-error-directive-anchor{display:none}\n"] }]
+        }], propDecorators: { chipInput: [{
+                type: ViewChild,
+                args: ['autoInput', { read: MatAutocompleteTrigger }]
+            }], chipInputRef: [{
+                type: ViewChild,
+                args: ['autoInput']
+            }] } });
+
+export { AutocompleteChiplistFieldComponent };
+//# sourceMappingURL=tft-crispr-forms-index-ClPQl_5D.mjs.map

package/fesm2022/tft-crispr-forms-index-ClPQl_5D.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tft-crispr-forms-index-ClPQl_5D.mjs","sources":["../../../../libs/crispr-forms/src/lib/ui/autocomplete-chiplist-field/autocomplete-chiplist-field.component.ts","../../../../libs/crispr-forms/src/lib/ui/autocomplete-chiplist-field/autocomplete-chiplist-field.component.html"],"sourcesContent":["/* eslint-disable @nx/enforce-module-boundaries */\nimport {\n  Component,\n  OnInit,\n  ChangeDetectionStrategy,\n  ViewChild,\n  ElementRef,\n} from '@angular/core';\nimport { map, tap } from 'rxjs/operators';\nimport {\n  MatAutocompleteModule,\n  MatAutocompleteSelectedEvent,\n  MatAutocompleteTrigger,\n} from '@angular/material/autocomplete';\nimport { Observable, BehaviorSubject, combineLatest } from 'rxjs';\nimport { ENTER } from '@angular/cdk/keycodes';\n\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatOptionModule } from '@angular/material/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { OptionComponent } from '../option';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  AutocompleteChiplistFieldConfig,\n  AbstractAutocompleteComponent,\n  DEFAULT_EMPTY_OPTIONS_MESSAGE,\n  SelectOption,\n} from '../../utils';\nimport { FieldContainerComponent } from '../field-container';\nimport { InfoComponent } from '../info';\nimport { FormValidationHandlerModule } from '@tft/form-validation-handler';\n\nconst defaultConfig: Partial<AutocompleteChiplistFieldConfig> = {\n  chipsSelectable: true,\n  areChipsRemovable: true,\n  tabToSelect: true,\n  autoActiveFirstOption: true,\n  imageUrlParam: 'image',\n  typeDebounceTime: 500,\n  allowDuplicates: false,\n  duplicateCompareFunction: (chip, option) => chip.value === option.value,\n  separatorKeyCodes: [ENTER],\n  emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,\n};\n\n@Component({\n    selector: 'crispr-autocomplete-chiplist-field',\n    templateUrl: './autocomplete-chiplist-field.component.html',\n    styleUrls: ['./autocomplete-chiplist-field.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [\n        CommonModule,\n        InfoComponent,\n        OptionComponent,\n        ReactiveFormsModule,\n        FieldContainerComponent,\n        MatAutocompleteModule,\n        MatInputModule,\n        MatOptionModule,\n        MatChipsModule,\n        MatIconModule,\n        FormValidationHandlerModule,\n    ],\n    standalone: true\n})\nexport class AutocompleteChiplistFieldComponent\n  extends AbstractAutocompleteComponent<AutocompleteChiplistFieldConfig>\n  implements OnInit\n{\n  defaultConfig = defaultConfig;\n  chips$ = new BehaviorSubject<SelectOption[]>([]);\n  remainingOptions$: Observable<SelectOption[]>;\n  selectedChip: SelectOption = null;\n  controlValue$ = this.chips$.pipe(\n    tap((chips) => {\n      this.control().setValue(chips.map((chip) => chip.value));\n    })\n  );\n\n  // We need use ViewChild twice on the same template ref to access as different types\n  // - the MatAutocompleteTrigger is used to for selecting value on tab\n  // - the ElementRef<HTMLInputElement> is used to clear the value from input element on selection\n  @ViewChild('autoInput', { read: MatAutocompleteTrigger })\n  chipInput: MatAutocompleteTrigger;\n  @ViewChild('autoInput') chipInputRef: ElementRef<HTMLInputElement>;\n\n  ngOnInit() {\n    super.ngOnInit();\n    this.remainingOptions$ = combineLatest([this.chips$, this.options$]).pipe(\n      map(([chips, options]) => {\n        return this.config().allowDuplicates\n          ? options\n          : options?.filter((option) => {\n              return !chips.some((chip) =>\n                this.config().duplicateCompareFunction(chip, option)\n              );\n            });\n      })\n    );\n  }\n\n  setControlValue(value: SelectOption[]) {\n    if (value) {\n      this.chips$.next(value);\n    }\n  }\n\n  // handles mat selecting\n  handleSelect(event: MatAutocompleteSelectedEvent) {\n    const selectedOption: SelectOption = event.option.value as SelectOption;\n    this.chips$.next([...this.chips$.value, selectedOption]);\n    this.chipInputRef.nativeElement.value = '';\n    this.autocompleteInputControl.setValue('');\n    // setTimeout needed because the panel thinks it's still open at this point\n    setTimeout(() => this.chipInput.openPanel());\n  }\n\n  /**\n   * To follow ARIA standards we want to select the active option on blur.\n   * matChipInputAddOnBlur should do this but it causes buggy behaviour\n   * @param event blur event that triggers the handle blur\n   */\n  handleTab(_event: FocusEvent) {\n    if (\n      this.chipInput.activeOption &&\n      (this.config().tabToSelect || this.config().addChipOnBlur)\n    ) {\n      const chip = this.chipInput.activeOption.value;\n      this.chips$.next([...this.chips$.value, chip]);\n    }\n  }\n\n  /**\n   * Handles selection via key tokens passed through separatorKeyCodes property\n   * NOTE: If TAB is used focus does not move on to next component\n   * @param event\n   */\n  handleTokenEnd(event: MatChipInputEvent) {\n    if (this.chipInput.activeOption) {\n      this.chipInput.activeOption.select();\n    }\n    event.chipInput?.clear();\n  }\n\n  mapToLabel(option: SelectOption) {\n    return option ? option.label : '';\n  }\n\n  removeChip(removedChip: SelectOption) {\n    const remainingChips: SelectOption[] = this.chips$.value.filter(\n      (chip) => chip !== removedChip\n    );\n    this.chips$.next(remainingChips);\n  }\n\n  highlightChip(chip: SelectOption) {\n    if(this.config().chipsSelectable) {\n      this.selectedChip = chip\n    }\n  }\n  \n  blurField() {\n    this.selectedChip = null;\n  }\n}\n","<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n\n  <mat-form-field [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n\n    <mat-chip-grid #chipList>\n      <!-- [selectable]=\"config().chipsSelectable\" -->\n      @for (chip of controlValue$ | async; track chip; let i = $index) {\n      <mat-chip-row class=\"refinement-chip\" [removable]=\"config().areChipsRemovable\"\n        [highlighted]=\"chip?.value === selectedChip?.value\" (click)=\"highlightChip(chip)\" (removed)=\"removeChip(chip)\">\n        @if (chip.imageUrl) {<img [src]=\"chip.imageUrl\" matChipAvatar alt=\"image of {{chip.label}}\">}\n        {{chip.label}}\n        @if (config().areChipsRemovable) {<mat-icon matChipRemove>cancel</mat-icon>}\n      </mat-chip-row>\n      }\n      <input class=\"hidden-error-directive-anchor\" (blur)=\"blurField()\" [formControlName]=\"config().controlName\"\n        type=\"text\" />\n\n      <input matInput [formControl]=\"autocompleteInputControl\" [placeholder]=\"config().placeholder\"\n        [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config().separatorKeyCodes\" (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\" type=\"text\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" (blur)=\"blurField()\"\n        #autoInput />\n      @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n      @if (config().info) {<crispr-info matSuffix [info]=\"config().info \"></crispr-info>}\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" [autoActiveFirstOption]=\"this.config().autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\" [displayWith]=\"mapToLabel\">\n      @if (remainingOptions$ | async; as remainingOptions) {\n      @if (remainingOptions.length > 0) {\n      @for (option of remainingOptions$ | async; track option) {\n      <mat-option [value]=\"option\">\n        <crispr-option [option]=\"option\"></crispr-option>\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n    </mat-autocomplete>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>"],"names":["i4","i6","i7","i8"],"mappings":"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"}