@tft/crispr-forms 12.2.13 → 12.2.17

package/fesm2015/tft-crispr-forms.js

@@ -4,6 +4,7 @@ import { map, startWith, debounceTime, distinctUntilChanged, switchMap, tap } fr
 import { Directive, Component, ChangeDetectionStrategy, ViewChild, Optional, Self, Input, EventEmitter, Output, HostListener, NgModule, ComponentFactoryResolver, ViewContainerRef, Renderer2, Pipe } from '@angular/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { ENTER } from '@angular/cdk/keycodes';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -183,7 +184,7 @@ function callOptionsIfFunction(options, parentGroup, searchString) {
  * @param options the options passed in from the config
  * @param emptyMessageOption the message to display when the array is empty
  */
-function observablifyOptions(options, parentGroup, searchString, emptyOptionsMessage) {
+function observablifyOptions(options, parentGroup, searchString) {
     const calledOptions = callOptionsIfFunction(options, parentGroup, searchString);
     // if options are a promise
     return calledOptions instanceof Promise
@@ -197,13 +198,8 @@ function observablifyOptions(options, parentGroup, searchString, emptyOptionsMes
             : isObservable(calledOptions)
                 // return it
                 ? calledOptions
-                // else return empty option
-                : of([
-                    {
-                        label: emptyOptionsMessage || DEFAULT_EMPTY_OPTIONS_MESSAGE,
-                        value: null
-                    }
-                ]);
+                // else an empty array
+                : of([]);
 }
 /**
  * Determines if the field config is for a form control (not a divider, heading or other non-control field)
@@ -309,9 +305,9 @@ class AbstractAutocompleteComponent extends AbstractAutocompleteFieldMixin {
         super.ngOnInit();
         this.group.addControl(this.config.controlName, new FormControl());
         // filter options by the search string using either the default filter function or one passed in through config
-        this.options$ = this.autocompleteInputControl.valueChanges.pipe(debounceTime(this.config.typeDebounceTime), distinctUntilChanged(), map(searchText => searchText || ''), switchMap((searchText) => {
-            return observablifyOptions(this.config.options, this.group, searchText, this.config.emptyOptionsMessage);
-        }));
+        this.options$ = this.autocompleteInputControl.valueChanges.pipe(
+        // this is needed to have the options panel to open on focus
+        startWith(''), debounceTime(this.config.typeDebounceTime), distinctUntilChanged(), map(searchText => searchText || ''), switchMap((searchText) => observablifyOptions(this.config.options, this.group, searchText)));
     }
 }
 AbstractAutocompleteComponent.decorators = [
@@ -386,7 +382,8 @@ SelectFieldComponent.propDecorators = {
 
 const defaultConfig$8 = {
     autoActiveFirstOption: true,
-    typeDebounceTime: 500
+    typeDebounceTime: 500,
+    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE
 };
 class AutocompleteFieldComponent extends AbstractAutocompleteComponent {
     constructor() {
@@ -395,13 +392,12 @@ class AutocompleteFieldComponent extends AbstractAutocompleteComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.setControlValue(this.value);
     }
     setControlValue(value) {
-        if (value && this.control) {
+        if (this.control && value) {
             // sets the initial value on the control if one is passed
-            this.control.setValue(value.value); // value.value :)
-            this.autocompleteInputControl.setValue(value.label);
+            this.control.setValue(value.value || '');
+            this.autocompleteInputControl.setValue(value.label || '');
         }
     }
     /**
@@ -423,22 +419,11 @@ class AutocompleteFieldComponent extends AbstractAutocompleteComponent {
         this.control.setValue(event.option.value);
         this.autoInputRef.nativeElement.blur();
     }
-    /**
-     * To follow ARIA standards we want to select the active option on blur.
-     * We do this by selecting the MatAutoCompleteTrigger, which triggers the select event
-     * @param event blur event that triggers the handle blur, TODO: remove this parameter if not used by 7/4/19
-     */
-    handleTab(_event) {
-        if (this.autoInput.activeOption) {
-            this.autoInput.activeOption.select();
-            this.control.setValue(this.autoInput.activeOption.value);
-        }
-    }
 }
 AutocompleteFieldComponent.decorators = [
     { type: Component, args: [{
                 selector: 'crispr-autocomplete-field',
-                template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      matInput\n      [formControl]=\"autocompleteInputControl\"\n      [placeholder]=\"config.placeholder\"\n      [matAutocomplete]=\"auto\"\n      (keydown.tab)=\"handleTab($event)\"\n      role=\"textbox\"\n      type=\"textbox\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      #autoInput>\n\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info \">\n    </crispr-info>\n\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"displayLabel(options$ | async)\">\n\n      <mat-option\n        *ngFor=\"let option of options$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\"></crispr-option>\n      </mat-option>\n\n    </mat-autocomplete>\n  </mat-form-field>\n</crispr-field-container>\n",
+                template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      matInput\n      [formControl]=\"autocompleteInputControl\"\n      [placeholder]=\"config.placeholder\"\n      [matAutocomplete]=\"auto\"\n      role=\"textbox\"\n      type=\"textbox\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      #autoInput>\n\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info \">\n    </crispr-info>\n\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"displayLabel(options$ | async)\">\n\n      <ng-container *ngIf=\"options$ | async as options; else emptyOption\">\n        <ng-container *ngIf=\"options.length > 0; else emptyOption\">\n          <mat-option\n            *ngFor=\"let option of options$ | async\"\n            [value]=\"option.value\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n\n    </mat-autocomplete>\n  </mat-form-field>\n</crispr-field-container>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -448,14 +433,18 @@ AutocompleteFieldComponent.propDecorators = {
     autoInputRef: [{ type: ViewChild, args: ['autoInput',] }]
 };
 
+const ɵ0 = (chip, option) => chip.value === option.value;
 const defaultConfig$7 = {
     chipsSelectable: true,
     areChipsRemovable: true,
-    addChipOnBlur: true,
+    tabToSelect: true,
     autoActiveFirstOption: true,
     imageUrlParam: 'image',
     typeDebounceTime: 500,
-    allowDuplicates: false
+    allowDuplicates: false,
+    duplicateCompareFunction: ɵ0,
+    separatorKeyCodes: [ENTER],
+    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
 };
 class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
     constructor() {
@@ -474,8 +463,8 @@ class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
         ]).pipe(map(([chips, options]) => {
             return this.config.allowDuplicates
                 ? options
-                : options.filter(option => {
-                    return !chips.some(chip => chip.value === option.value);
+                : options === null || options === void 0 ? void 0 : options.filter(option => {
+                    return !chips.some(chip => this.config.duplicateCompareFunction(chip, option));
                 });
         }));
     }
@@ -484,20 +473,37 @@ class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
             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.
-     * @param event blur event that triggers the handle blur, TODO: remove this parameter if not used by 7/4/19
+     * 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 propert
+     * NOTE: If TAB is used focus does not move on to next component
+     * @param event
+     */
+    handleTokenEnd(event) {
+        var _a;
         if (this.chipInput.activeOption) {
             this.chipInput.activeOption.select();
         }
+        (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.clear();
     }
     mapToLabel(option) {
         return option ? option.label : '';
@@ -506,16 +512,13 @@ class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
         const remainingChips = this.chips$.value.filter(chip => chip !== removedChip);
         this.chips$.next(remainingChips);
     }
-    inputFilter(stringToCheck, searchString) {
-        return stringToCheck.toLowerCase().includes(searchString.trim().toLowerCase());
-    }
 }
 AutocompleteChiplistFieldComponent.decorators = [
     { type: Component, args: [{
                 selector: 'crispr-autocomplete-chiplist-field',
-                template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n\n    <mat-chip-list\n      #chipList>\n      <mat-chip\n        class=\"refinement-chip\"\n        *ngFor=\"let chip of controlValue$ | async\"\n        [selectable]=\"config.chipsSelectable\"\n        [removable]=\"config.areChipsRemovable\"\n        (removed)=\"removeChip(chip)\">\n        {{chip.label}}\n        <mat-icon\n          matChipRemove\n          *ngIf=\"config.areChipsRemovable\">\n          cancel\n        </mat-icon>\n      </mat-chip>\n\n      <input\n        matInput\n        [formControl]=\"autocompleteInputControl\"\n        [placeholder]=\"config.placeholder\"\n        [matChipInputFor]=\"chipList\"\n        [matAutocomplete]=\"auto\"\n        (keydown.tab)=\"handleTab($event)\"\n        role=\"textbox\"\n        type=\"text\"\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        #autoInput/>\n      <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n      <crispr-info\n        *ngIf=\"config.info\"\n        matSuffix\n        [info]=\"config.info \">\n      </crispr-info>\n\n    </mat-chip-list>\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"this.config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"mapToLabel\">\n\n      <mat-option\n        *ngFor=\"let option of remainingOptions$ | async\"\n        [value]=\"option\">\n\n        <img\n          *ngIf=\"option[config.imageUrlParam]\"\n          [src]=\"option[config.imageUrlParam]\"\n          style=\"vertical-align:middle;\"\n          aria-hidden\n          height=\"25\"/>\n        {{ option.label }}\n      </mat-option>\n    </mat-autocomplete>\n\n\n  </mat-form-field>\n</crispr-field-container>\n",
+                template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n\n    <mat-chip-list\n      #chipList>\n      <mat-chip\n        class=\"refinement-chip\"\n        *ngFor=\"let chip of controlValue$ | async\"\n        [selectable]=\"config.chipsSelectable\"\n        [removable]=\"config.areChipsRemovable\"\n        (removed)=\"removeChip(chip)\">\n        <span *ngIf=\"chip.imageUrl as imageUrl\" class=\"image-container\">\n          <img [src]=\"imageUrl\" alt=\"image of {{chip.label}}\">\n        </span>\n        {{chip.label}}\n        <mat-icon\n          matChipRemove\n          *ngIf=\"config.areChipsRemovable\">\n          cancel\n        </mat-icon>\n      </mat-chip>\n\n      <input\n        matInput\n        [formControl]=\"autocompleteInputControl\"\n        [placeholder]=\"config.placeholder\"\n        [matChipInputFor]=\"chipList\"\n        [matAutocomplete]=\"auto\"\n        (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeyCodes\"\n        (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\"\n        type=\"text\"\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        #autoInput/>\n      <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n      <crispr-info\n        *ngIf=\"config.info\"\n        matSuffix\n        [info]=\"config.info \">\n      </crispr-info>\n\n    </mat-chip-list>\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"this.config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"mapToLabel\">\n      <ng-container *ngIf=\"remainingOptions$ | async as remainingOptions; else emptyOption\">\n        <ng-container *ngIf=\"remainingOptions.length > 0; else emptyOption\">\n           <mat-option\n            *ngFor=\"let option of remainingOptions$ | async\"\n            [value]=\"option\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n    </mat-autocomplete>\n\n\n  </mat-form-field>\n</crispr-field-container>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
+                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%;-o-object-fit:cover;object-fit:cover}"]
             },] }
 ];
 AutocompleteChiplistFieldComponent.propDecorators = {
@@ -923,7 +926,7 @@ class OptionComponent {
 OptionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'crispr-option',
-                template: "<img\n  *ngIf=\"option.imageUrl\"\n  [src]=\"option.imageUrl\"\n  style=\"vertical-align:middle;\"\n  aria-hidden\n  height=\"25\"/>\n{{ option.label }}\n",
+                template: "<img\n  *ngIf=\"option.imageUrl\"\n  [src]=\"option.imageUrl\"\n  alt=\"image of {{option.label}}\"\n  style=\"vertical-align:middle;\"\n  aria-hidden\n  height=\"25\"/>\n{{ option.label }}\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -1112,9 +1115,9 @@ class FormGroupListComponent extends FormGroupListMixin {
 FormGroupListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'crispr-form-group-list',
-                template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- TODO: add sortBy function -->\n    <div *ngFor=\"let control of formArray?.controls; let i = index;\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <span class=\"mat-h3\" *ngIf=\"config.itemLabelBuilder\"> {{  config.itemLabelBuilder(i) }} </span>\n      <button\n        mat-icon-button\n        *ngIf=\"i + 1 > config.minListLength\">\n        <mat-icon (click)=\"deleteGroup(i)\">delete</mat-icon>\n      </button>\n      <div\n        [formGroupName]=\"i\">\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [config]=\"field\"\n          [value]=\"value[i] | initialControlValue : field\"\n          [group]=\"control\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <button\n    type=\"button\"\n    mat-raised-button\n    (click)=\"addGroup()\">\n    {{config.addItemLabel}}\n  </button>\n\n</crispr-field-container>\n",
+                template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- TODO: add sortBy function -->\n    <div *ngFor=\"let control of formArray?.controls; let i = index;\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\" *ngIf=\"config.itemLabelBuilder\"> {{  config.itemLabelBuilder(i) }} </span>\n        <button\n          mat-icon-button\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"deleteGroup(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroupName]=\"i\">\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [config]=\"field\"\n          [value]=\"value[i] | initialControlValue : field\"\n          [group]=\"control\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"addGroup()\">\n      {{config.addItemLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
+                styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}"]
             },] }
 ];
 
@@ -1254,5 +1257,5 @@ CrisprFormsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractAutocompleteComponent, AutocompleteChiplistFieldComponent, AutocompleteFieldComponent, ButtonComponent, CheckboxFieldComponent, ControlType, CrisprFieldComponent, CrisprFormComponent, CrisprFormsModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, DatepickerFieldComponent, DividerComponent, FileUploadComponent, HeadingComponent, InputFieldComponent, RadioFieldComponent, SelectFieldComponent, SliderFieldComponent, TextareaFieldComponent, UnitConversionFieldComponent, buildFormGroupFromConfig, callOptionsIfFunction, checkControlForValues, checkControlsForValues, computeValueFromFields, createControlForType, crisprControlMixin, filterOptionsByLabel, isControlConfig, observablifyOptions, MaterialModule as ɵa, FieldContainerComponent as ɵb, InputFieldComponent as ɵc, SelectFieldComponent as ɵd, RadioFieldComponent as ɵe, AutocompleteFieldComponent as ɵf, AbstractAutocompleteComponent as ɵg, AutocompleteChiplistFieldComponent as ɵh, CheckboxFieldComponent as ɵi, TextareaFieldComponent as ɵj, DatepickerFieldComponent as ɵk, SliderFieldComponent as ɵl, ButtonComponent as ɵm, CrisprFieldComponent as ɵn, HeadingComponent as ɵo, DividerComponent as ɵp, FileUploadComponent as ɵq, UnitConversionFieldComponent as ɵr, InfoComponent as ɵs, OptionComponent as ɵt, SelectedFileComponent as ɵu, FileDropzoneDirective as ɵv, CrisprFieldDirective as ɵw, FormGroupListComponent as ɵx, InitialControlValuePipe as ɵy, SubGroupComponent as ɵz };
+export { AbstractAutocompleteComponent, AutocompleteChiplistFieldComponent, AutocompleteFieldComponent, ButtonComponent, CheckboxFieldComponent, ControlType, CrisprFieldComponent, CrisprFormComponent, CrisprFormsModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, DatepickerFieldComponent, DividerComponent, FileUploadComponent, HeadingComponent, InputFieldComponent, RadioFieldComponent, SelectFieldComponent, SliderFieldComponent, TextareaFieldComponent, UnitConversionFieldComponent, buildFormGroupFromConfig, callOptionsIfFunction, checkControlForValues, checkControlsForValues, computeValueFromFields, createControlForType, crisprControlMixin, filterOptionsByLabel, isControlConfig, observablifyOptions, ɵ0, MaterialModule as ɵa, FieldContainerComponent as ɵb, InputFieldComponent as ɵc, SelectFieldComponent as ɵd, RadioFieldComponent as ɵe, AutocompleteFieldComponent as ɵf, AbstractAutocompleteComponent as ɵg, AutocompleteChiplistFieldComponent as ɵh, CheckboxFieldComponent as ɵi, TextareaFieldComponent as ɵj, DatepickerFieldComponent as ɵk, SliderFieldComponent as ɵl, ButtonComponent as ɵm, CrisprFieldComponent as ɵn, HeadingComponent as ɵo, DividerComponent as ɵp, FileUploadComponent as ɵq, UnitConversionFieldComponent as ɵr, InfoComponent as ɵs, OptionComponent as ɵt, SelectedFileComponent as ɵu, FileDropzoneDirective as ɵv, CrisprFieldDirective as ɵw, FormGroupListComponent as ɵx, InitialControlValuePipe as ɵy, SubGroupComponent as ɵz };
 //# sourceMappingURL=tft-crispr-forms.js.map