@tft/crispr-forms 12.2.18 → 12.2.22

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

@@ -728,11 +728,14 @@
          * @param options the array of options to search for option with corresponding value
          */
         AutocompleteFieldComponent.prototype.displayLabel = function (options) {
+            if (this.config.displayWith) {
+                return this.config.displayWith(options);
+            }
             return function (value) {
                 var _a;
-                return !!options && Array.isArray(options)
-                    ? (_a = options.find(function (option) { return option.value === value; })) === null || _a === void 0 ? void 0 : _a.label
-                    : value;
+                var label = !!options && Array.isArray(options)
+                    ? (_a = options.find(function (option) { return JSON.stringify(option.value) === JSON.stringify(value); })) === null || _a === void 0 ? void 0 : _a.label : value;
+                return label;
             };
         };
         AutocompleteFieldComponent.prototype.handleSelect = function (event) {
@@ -1216,7 +1219,7 @@
         { type: core.Component, args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: 'crispr-unit-conversion-field',
-                    template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [style.width.%]=\"config.showUnitSelect ? 60 : 100\"\n    class=\"number-field\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      type=\"number\"\n      matInput\n      [formControl]=\"displayValueControl\"\n      [placeholder]=\"config.placeholder\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\"\n      [autocomplete]=\"config.autoComplete\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"config.showUnitSelect\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\"\n    class=\"unit-field\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControl]=\"unitSelectControl\">\n\n      <mat-option\n        *ngFor=\"let option of unitOptions$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\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  </mat-form-field>\n\n\n</crispr-field-container>\n",
+                    template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [style.width.%]=\"config.showUnitSelect ? 60 : 100\"\n    class=\"number-field\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      type=\"number\"\n      matInput\n      [formControl]=\"displayValueControl\"\n      [placeholder]=\"config.placeholder\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"config.showUnitSelect\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\"\n    class=\"unit-field\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControl]=\"unitSelectControl\">\n\n      <mat-option\n        *ngFor=\"let option of unitOptions$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\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  </mat-form-field>\n\n\n</crispr-field-container>\n",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}"]
                 },] }
@@ -1462,7 +1465,7 @@
     };
 
     var defaultConfig = {
-        addItemLabel: 'ADD ITEM',
+        addButtonLabel: 'ADD ITEM',
         minListLength: 1,
     };
     var FormGroupListMixin = crisprControlMixin(CrisprFieldComponent);
@@ -1480,11 +1483,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) {
@@ -1499,7 +1504,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 && 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}"]
                 },] }