@tft/crispr-forms 12.2.16 → 12.2.20

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

@@ -754,14 +754,16 @@
         autoInputRef: [{ type: core.ViewChild, args: ['autoInput',] }]
     };
 
+    var ɵ0 = function (chip, option) { return chip.value === option.value; };
     var defaultConfig$7 = {
         chipsSelectable: true,
         areChipsRemovable: true,
         tabToSelect: true,
-        autoActiveFirstOption: false,
+        autoActiveFirstOption: true,
         imageUrlParam: 'image',
         typeDebounceTime: 500,
         allowDuplicates: false,
+        duplicateCompareFunction: ɵ0,
         separatorKeyCodes: [keycodes.ENTER],
         emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
     };
@@ -787,7 +789,7 @@
                 return _this.config.allowDuplicates
                     ? options
                     : options === null || options === void 0 ? void 0 : options.filter(function (option) {
-                        return !chips.some(function (chip) { return chip.value === option.value; });
+                        return !chips.some(function (chip) { return _this.config.duplicateCompareFunction(chip, option); });
                     });
             }));
         };
@@ -841,7 +843,7 @@
     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        <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",
+                    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: core.ChangeDetectionStrategy.OnPush,
                     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}"]
                 },] }
@@ -1300,7 +1302,7 @@
     OptionComponent.decorators = [
         { type: core.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: core.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -1460,7 +1462,7 @@
     };
 
     var defaultConfig = {
-        addItemLabel: 'ADD ITEM',
+        addButtonLabel: 'ADD ITEM',
         minListLength: 1,
     };
     var FormGroupListMixin = crisprControlMixin(CrisprFieldComponent);
@@ -1478,11 +1480,13 @@
         };
         FormGroupListComponent.prototype.setControlValue = function (values) {
             var _this = this;
-            if (values && this.control) {
-                values.forEach(function (value) { return _this.addGroup(value); });
-            }
-            else if (this.config.minListLength > 0) {
-                this.addGroup();
+            if (this.control) {
+                if ((values === null || values === void 0 ? void 0 : values.length) > 0) {
+                    values.forEach(function (value) { return _this.addGroup(value); });
+                }
+                else if (this.config.displayInitialItem) {
+                    this.addGroup();
+                }
             }
         };
         FormGroupListComponent.prototype.addGroup = function (value) {
@@ -1497,7 +1501,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      <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",
+                    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 && 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 || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}"]
                 },] }
@@ -1681,6 +1685,7 @@
     exports.filterOptionsByLabel = filterOptionsByLabel;
     exports.isControlConfig = isControlConfig;
     exports.observablifyOptions = observablifyOptions;
+    exports.ɵ0 = ɵ0;
     exports.ɵa = MaterialModule;
     exports.ɵb = FieldContainerComponent;
     exports.ɵc = InputFieldComponent;