@tft/crispr-forms 12.2.11 → 12.2.15

package/bundles/tft-crispr-forms.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('@angular/forms'), require('rxjs/operators'), require('@angular/core'), require('@angular/material/autocomplete'), require('@angular/cdk/portal'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/button-toggle'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slide-toggle'), require('@angular/material/slider'), require('@angular/material/tooltip'), require('@angular/material/divider'), require('@angular/material/progress-bar'), require('@tft/form-validation-handler'), require('@angular/material-moment-adapter')) :
-    typeof define === 'function' && define.amd ? define('@tft/crispr-forms', ['exports', 'rxjs', '@angular/forms', 'rxjs/operators', '@angular/core', '@angular/material/autocomplete', '@angular/cdk/portal', '@angular/common', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/radio', '@angular/material/select', '@angular/material/slide-toggle', '@angular/material/slider', '@angular/material/tooltip', '@angular/material/divider', '@angular/material/progress-bar', '@tft/form-validation-handler', '@angular/material-moment-adapter'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.tft = global.tft || {}, global.tft['crispr-forms'] = {}), global.rxjs, global.ng.forms, global.rxjs.operators, global.ng.core, global.ng.material.autocomplete, global.ng.cdk.portal, global.ng.common, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.radio, global.ng.material.select, global.ng.material.slideToggle, global.ng.material.slider, global.ng.material.tooltip, global.ng.material.divider, global.ng.material.progressBar, global.formValidationHandler, global.ng.materialMomentAdapter));
-}(this, (function (exports, rxjs, forms, operators, core, autocomplete, portal, common, button, buttonToggle, checkbox, chips, datepicker, formField, icon, input, radio, select, slideToggle, slider, tooltip, divider, progressBar, formValidationHandler, materialMomentAdapter) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('@angular/forms'), require('rxjs/operators'), require('@angular/core'), require('@angular/material/autocomplete'), require('@angular/cdk/keycodes'), require('@angular/cdk/portal'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/button-toggle'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slide-toggle'), require('@angular/material/slider'), require('@angular/material/tooltip'), require('@angular/material/divider'), require('@angular/material/progress-bar'), require('@tft/form-validation-handler'), require('@angular/material-moment-adapter')) :
+    typeof define === 'function' && define.amd ? define('@tft/crispr-forms', ['exports', 'rxjs', '@angular/forms', 'rxjs/operators', '@angular/core', '@angular/material/autocomplete', '@angular/cdk/keycodes', '@angular/cdk/portal', '@angular/common', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/radio', '@angular/material/select', '@angular/material/slide-toggle', '@angular/material/slider', '@angular/material/tooltip', '@angular/material/divider', '@angular/material/progress-bar', '@tft/form-validation-handler', '@angular/material-moment-adapter'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.tft = global.tft || {}, global.tft['crispr-forms'] = {}), global.rxjs, global.ng.forms, global.rxjs.operators, global.ng.core, global.ng.material.autocomplete, global.ng.cdk.keycodes, global.ng.cdk.portal, global.ng.common, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.radio, global.ng.material.select, global.ng.material.slideToggle, global.ng.material.slider, global.ng.material.tooltip, global.ng.material.divider, global.ng.material.progressBar, global.formValidationHandler, global.ng.materialMomentAdapter));
+}(this, (function (exports, rxjs, forms, operators, core, autocomplete, keycodes, portal, common, button, buttonToggle, checkbox, chips, datepicker, formField, icon, input, radio, select, slideToggle, slider, tooltip, divider, progressBar, formValidationHandler, materialMomentAdapter) { 'use strict';
 
     var DEFAULT_EMPTY_OPTIONS_MESSAGE = 'No Items';
 
@@ -164,7 +164,7 @@
      * @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) {
         var calledOptions = callOptionsIfFunction(options, parentGroup, searchString);
         // if options are a promise
         return calledOptions instanceof Promise
@@ -178,13 +178,8 @@
                 : rxjs.isObservable(calledOptions)
                     // return it
                     ? calledOptions
-                    // else return empty option
-                    : rxjs.of([
-                        {
-                            label: emptyOptionsMessage || DEFAULT_EMPTY_OPTIONS_MESSAGE,
-                            value: null
-                        }
-                    ]);
+                    // else an empty array
+                    : rxjs.of([]);
     }
     /**
      * Determines if the field config is for a form control (not a divider, heading or other non-control field)
@@ -621,9 +616,9 @@
             _super.prototype.ngOnInit.call(this);
             this.group.addControl(this.config.controlName, new forms.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(operators.debounceTime(this.config.typeDebounceTime), operators.distinctUntilChanged(), operators.map(function (searchText) { return searchText || ''; }), operators.switchMap(function (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
+            operators.startWith(''), operators.debounceTime(this.config.typeDebounceTime), operators.distinctUntilChanged(), operators.map(function (searchText) { return searchText || ''; }), operators.switchMap(function (searchText) { return observablifyOptions(_this.config.options, _this.group, searchText); }));
         };
         return AbstractAutocompleteComponent;
     }(AbstractAutocompleteFieldMixin));
@@ -705,7 +700,8 @@
 
     var defaultConfig$8 = {
         autoActiveFirstOption: true,
-        typeDebounceTime: 500
+        typeDebounceTime: 500,
+        emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE
     };
     var AutocompleteFieldComponent = /** @class */ (function (_super) {
         __extends(AutocompleteFieldComponent, _super);
@@ -716,13 +712,12 @@
         }
         AutocompleteFieldComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
-            this.setControlValue(this.value);
         };
         AutocompleteFieldComponent.prototype.setControlValue = function (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 || '');
             }
         };
         /**
@@ -744,23 +739,12 @@
             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
-         */
-        AutocompleteFieldComponent.prototype.handleTab = function (_event) {
-            if (this.autoInput.activeOption) {
-                this.autoInput.activeOption.select();
-                this.control.setValue(this.autoInput.activeOption.value);
-            }
-        };
         return AutocompleteFieldComponent;
     }(AbstractAutocompleteComponent));
     AutocompleteFieldComponent.decorators = [
         { type: core.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: core.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -773,11 +757,13 @@
     var defaultConfig$7 = {
         chipsSelectable: true,
         areChipsRemovable: true,
-        addChipOnBlur: true,
-        autoActiveFirstOption: true,
+        tabToSelect: true,
+        autoActiveFirstOption: false,
         imageUrlParam: 'image',
         typeDebounceTime: 500,
-        allowDuplicates: false
+        allowDuplicates: false,
+        separatorKeyCodes: [keycodes.ENTER],
+        emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
     };
     var AutocompleteChiplistFieldComponent = /** @class */ (function (_super) {
         __extends(AutocompleteChiplistFieldComponent, _super);
@@ -796,11 +782,11 @@
             this.remainingOptions$ = rxjs.combineLatest([
                 this.chips$,
                 this.options$
-            ]).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), chips = _b[0], options = _b[1];
+            ]).pipe(operators.map(function (_b) {
+                var _c = __read(_b, 2), chips = _c[0], options = _c[1];
                 return _this.config.allowDuplicates
                     ? options
-                    : options.filter(function (option) {
+                    : options === null || options === void 0 ? void 0 : options.filter(function (option) {
                         return !chips.some(function (chip) { return chip.value === option.value; });
                     });
             }));
@@ -810,20 +796,38 @@
                 this.chips$.next(value);
             }
         };
+        // handles mat selecting
         AutocompleteChiplistFieldComponent.prototype.handleSelect = function (event) {
+            var _this = this;
             var selectedOption = event.option.value;
             this.chips$.next(__spreadArray(__spreadArray([], __read(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(function () { return _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
          */
         AutocompleteChiplistFieldComponent.prototype.handleTab = function (_event) {
+            if (this.chipInput.activeOption && (this.config.tabToSelect || this.config.addChipOnBlur)) {
+                var chip = this.chipInput.activeOption.value;
+                this.chips$.next(__spreadArray(__spreadArray([], __read(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
+         */
+        AutocompleteChiplistFieldComponent.prototype.handleTokenEnd = function (event) {
+            var _a;
             if (this.chipInput.activeOption) {
                 this.chipInput.activeOption.select();
             }
+            (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.clear();
         };
         AutocompleteChiplistFieldComponent.prototype.mapToLabel = function (option) {
             return option ? option.label : '';
@@ -832,17 +836,14 @@
             var remainingChips = this.chips$.value.filter(function (chip) { return chip !== removedChip; });
             this.chips$.next(remainingChips);
         };
-        AutocompleteChiplistFieldComponent.prototype.inputFilter = function (stringToCheck, searchString) {
-            return stringToCheck.toLowerCase().includes(searchString.trim().toLowerCase());
-        };
         return AutocompleteChiplistFieldComponent;
     }(AbstractAutocompleteComponent));
     AutocompleteChiplistFieldComponent.decorators = [
         { type: core.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: core.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 = {
@@ -974,6 +975,12 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.defaultConfig = defaultConfig$3;
             return _this;
+            // handleSelectedChange(event, picker: MatDatepicker<unknown>) {
+            //   console.log({event, picker})
+            //   if(this.config.selectedChange) {
+            //     this.config.selectedChange(event, picker);
+            //   }
+            // }
         }
         DatepickerFieldComponent.prototype.ngOnInit = function () {
             var _a, _b;
@@ -987,8 +994,8 @@
             this.dateClass$ = this.config.dateClass ? (_b = this.config) === null || _b === void 0 ? void 0 : _b.dateClass(this.group) : rxjs.of(function () { return ''; });
         };
         DatepickerFieldComponent.prototype.ngAfterContentInit = function () {
-            if (this.config.calendarFooterComponent) {
-                this.calendarFooterPortal = new portal.ComponentPortal(this.config.calendarFooterComponent);
+            if (this.config.datepickerActions) {
+                this.calendarFooterPortal = new portal.ComponentPortal(this.config.datepickerActions);
             }
         };
         return DatepickerFieldComponent;
@@ -996,7 +1003,7 @@
     DatepickerFieldComponent.decorators = [
         { type: core.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: core.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -1490,7 +1497,7 @@
     FormGroupListComponent.decorators = [
         { type: core.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: core.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -1598,8 +1605,8 @@
         }
         // TODO: does changing any to unknown break anything?
         InitialControlValuePipe.prototype.transform = function (initialFormValue, fieldConfig) {
-            return initialFormValue && isControlConfig(fieldConfig) && initialFormValue[fieldConfig.controlName]
-                ? initialFormValue[fieldConfig.controlName]
+            return (initialFormValue && isControlConfig(fieldConfig))
+                ? initialFormValue[fieldConfig.controlName] || null
                 : null;
         };
         return InitialControlValuePipe;