@tft/crispr-forms 12.2.11 → 12.2.15

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: [""]
             },] }
@@ -451,11 +436,13 @@ AutocompleteFieldComponent.propDecorators = {
 const defaultConfig$7 = {
     chipsSelectable: true,
     areChipsRemovable: true,
-    addChipOnBlur: true,
-    autoActiveFirstOption: true,
+    tabToSelect: true,
+    autoActiveFirstOption: false,
     imageUrlParam: 'image',
     typeDebounceTime: 500,
-    allowDuplicates: false
+    allowDuplicates: false,
+    separatorKeyCodes: [ENTER],
+    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
 };
 class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
     constructor() {
@@ -474,7 +461,7 @@ class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
         ]).pipe(map(([chips, options]) => {
             return this.config.allowDuplicates
                 ? options
-                : options.filter(option => {
+                : options === null || options === void 0 ? void 0 : options.filter(option => {
                     return !chips.some(chip => chip.value === option.value);
                 });
         }));
@@ -484,20 +471,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 +510,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=\"\">\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 = {
@@ -625,6 +626,12 @@ class DatepickerFieldComponent extends DatepickerFieldMixin {
     constructor() {
         super(...arguments);
         this.defaultConfig = defaultConfig$3;
+        // handleSelectedChange(event, picker: MatDatepicker<unknown>) {
+        //   console.log({event, picker})
+        //   if(this.config.selectedChange) {
+        //     this.config.selectedChange(event, picker);
+        //   }
+        // }
     }
     ngOnInit() {
         var _a, _b;
@@ -638,15 +645,15 @@ class DatepickerFieldComponent extends DatepickerFieldMixin {
         this.dateClass$ = this.config.dateClass ? (_b = this.config) === null || _b === void 0 ? void 0 : _b.dateClass(this.group) : of(() => '');
     }
     ngAfterContentInit() {
-        if (this.config.calendarFooterComponent) {
-            this.calendarFooterPortal = new ComponentPortal(this.config.calendarFooterComponent);
+        if (this.config.datepickerActions) {
+            this.calendarFooterPortal = new ComponentPortal(this.config.datepickerActions);
         }
     }
 }
 DatepickerFieldComponent.decorators = [
     { type: Component, args: [{
                 selector: 'crispr-datepicker-field',
-                template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n      <input\n        matInput\n        [formControlName]=\"config.controlName\"\n        [min]=\"config.min\"\n        [max]=\"config.max\"\n        [matDatepicker]=\"picker\"\n        [matDatepickerFilter]=\"config.datepickerFilter\">\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [touchUi]=\"config.touchUi\"\n        [startView]=\"config.startView\"\n        [startAt]=\"startAt$ | async\"\n        [dateClass]=\"dateClass || (dateClass$ | async)\"\n        #picker>\n        <mat-datepicker-actions>\n          <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n        </mat-datepicker-actions>\n      </mat-datepicker>\n\n  </mat-form-field>\n</crispr-field-container>\n\n",
+                template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n      <input\n        matInput\n        [formControlName]=\"config.controlName\"\n        [min]=\"config.min\"\n        [max]=\"config.max\"\n        [matDatepicker]=\"picker\"\n        [matDatepickerFilter]=\"config.datepickerFilter\">\n      <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [touchUi]=\"config.touchUi\"\n        [startView]=\"config.startView\"\n        [startAt]=\"startAt$ | async\"\n        [dateClass]=\"dateClass || (dateClass$ | async)\"\n        #picker>\n        <mat-datepicker-actions *ngIf=\"calendarFooterPortal\">\n          <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n        </mat-datepicker-actions>\n      </mat-datepicker>\n\n  </mat-form-field>\n</crispr-field-container>\n\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -1106,7 +1113,7 @@ 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 | 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      <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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -1205,8 +1212,8 @@ CrisprFieldDirective.propDecorators = {
 class InitialControlValuePipe {
     // TODO: does changing any to unknown break anything?
     transform(initialFormValue, fieldConfig) {
-        return initialFormValue && isControlConfig(fieldConfig) && initialFormValue[fieldConfig.controlName]
-            ? initialFormValue[fieldConfig.controlName]
+        return (initialFormValue && isControlConfig(fieldConfig))
+            ? initialFormValue[fieldConfig.controlName] || null
             : null;
     }
 }