@gravitee/ui-particles-angular 7.25.0 → 7.26.0

package/fesm2020/gravitee-ui-particles-angular.mjs

@@ -1305,6 +1305,10 @@ class GioFormHeadersComponent {
     constructor(fm, elRef) {
         this.fm = fm;
         this.elRef = elRef;
+        this.headerFieldMapper = {
+            keyName: 'key',
+            valueName: 'value',
+        };
         this.headersFormArray = new FormArray([
             new FormGroup({
                 key: new FormControl('', Validators.pattern('^\\S*$')),
@@ -1325,18 +1329,30 @@ class GioFormHeadersComponent {
         if (!value) {
             return;
         }
-        this.headers = value ?? [];
+        this.headers = [...(value ?? [])].map((header) => {
+            return {
+                key: header[this.headerFieldMapper.keyName],
+                value: header[this.headerFieldMapper.valueName],
+            };
+        });
         this.initHeadersForm();
     }
     // From ControlValueAccessor interface
     registerOnChange(fn) {
-        const adaptOutputFn = this.adaptOutputFn;
-        if (adaptOutputFn) {
-            this._onChange = (headers) => fn(adaptOutputFn(headers));
+        if (this.headerFieldMapper) {
+            this._onChange = (headers) => fn(this.toHeaders(headers));
             return;
         }
         this._onChange = fn;
     }
+    toHeaders(headers) {
+        return [...(headers ?? [])].map(header => {
+            return {
+                [this.headerFieldMapper.keyName]: header.key,
+                [this.headerFieldMapper.valueName]: header.value,
+            };
+        });
+    }
     // From ControlValueAccessor interface
     registerOnTouched(fn) {
         this._onTouched = fn;
@@ -1429,7 +1445,7 @@ class GioFormHeadersComponent {
     }
 }
 GioFormHeadersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFormHeadersComponent, deps: [{ token: i2$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GioFormHeadersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: { adaptOutputFn: "adaptOutputFn" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
+GioFormHeadersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: { headerFieldMapper: "headerFieldMapper" }, host: { properties: { "class.disabled": "this.disabled" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => GioFormHeadersComponent),
@@ -1455,7 +1471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             multi: true,
                         },
                     ], template: "<!--\n\n    Copyright (C) 2015 The Gravitee team (http://gravitee.io)\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n            http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n-->\n<table class=\"gio-form-headers__table gio-table-light\" [formGroup]=\"mainForm\">\n  <thead>\n    <tr>\n      <th>KEY</th>\n      <th>VALUE</th>\n    </tr>\n  </thead>\n  <tbody formArrayName=\"headers\">\n    <tr\n      *ngFor=\"let control of headersFormArray.controls; index as headerIndex\"\n      class=\"gio-form-headers__table__header-row\"\n      [formGroupName]=\"headerIndex\"\n    >\n      <td class=\"gio-form-headers__table__header-row__td-key\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-key__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea\n            formControlName=\"key\"\n            matInput\n            placeholder=\"Name...\"\n            cdkTextareaAutosize\n            cdkAutosizeMinRows=\"1\"\n            [matAutocomplete]=\"headerNamesAutocomplete\"\n          ></textarea>\n        </mat-form-field>\n        <mat-error *ngIf=\"control.get('key')?.hasError('pattern')\">\n          Header name must not contain spaces. (RegExp: {{ control.get('key')?.getError('pattern')?.requiredPattern }})\n        </mat-error>\n        <mat-autocomplete #headerNamesAutocomplete=\"matAutocomplete\">\n          <mat-option *ngFor=\"let headerName of getFilteredHeaderNames(headerIndex, control.value) | async\" [value]=\"headerName\">{{\n            headerName\n          }}</mat-option>\n        </mat-autocomplete>\n      </td>\n      <td class=\"gio-form-headers__table__header-row__td-value\">\n        <mat-form-field class=\"gio-form-headers__table__header-row__td-value__field\" [floatLabel]=\"'never'\" appearance=\"standard\">\n          <textarea formControlName=\"value\" matInput placeholder=\"Value...\" cdkTextareaAutosize cdkAutosizeMinRows=\"1\"></textarea>\n        </mat-form-field>\n        <button\n          class=\"gio-form-headers__table__header-row__td-value__button\"\n          *ngIf=\"headersFormArray.controls.length - 1 !== headerIndex\"\n          mat-icon-button\n          aria-label=\"Delete\"\n          (click)=\"onDeleteHeader(headerIndex)\"\n        >\n          <mat-icon svgIcon=\"gio:cancel\"></mat-icon>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden}.gio-form-headers__table{width:100%}.gio-form-headers__table__header-row__td-key,.gio-form-headers__table__header-row__td-value{position:relative;width:50%}.gio-form-headers__table__header-row__td-key__field,.gio-form-headers__table__header-row__td-value__field{display:flex;overflow:hidden;width:100%;max-height:32px;flex-direction:column;justify-content:center;padding-bottom:0}.gio-form-headers__table__header-row__td-key__field *,.gio-form-headers__table__header-row__td-value__field *{top:0;overflow:hidden;max-height:32px}.gio-form-headers__table__header-row__td-key__field:focus-within,.gio-form-headers__table__header-row__td-value__field:focus-within{z-index:100;height:auto;background-color:#fff}.gio-form-headers__table__header-row__td-key__field:focus-within *,.gio-form-headers__table__header-row__td-value__field:focus-within *{max-height:none}.gio-form-headers__table__header-row__td-key__button,.gio-form-headers__table__header-row__td-value__button{position:absolute;top:3px;right:3px;display:none}.gio-form-headers__table__header-row__td-remove{width:32px;height:32px;padding:0}.gio-form-headers__table__header-row:hover .gio-form-headers__table__header-row__td-value__button{z-index:110;display:block;background-color:#fff;opacity:.9}::ng-deep gio-form-headers .gio-form-headers__table__header-row .mat-form-field-infix{width:inherit}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$2.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { adaptOutputFn: [{
+        }], ctorParameters: function () { return [{ type: i2$2.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { headerFieldMapper: [{
                 type: Input
             }], disabled: [{
                 type: HostBinding,
@@ -4385,21 +4401,16 @@ class GioFjsHeadersTypeComponent extends FieldType {
         super(...arguments);
         this.defaultOptions = {
             props: {
-                outputConfig: {
-                    keyName: 'name',
-                    valueName: 'value',
-                },
+                outputConfig: this.outputConfig,
             },
         };
         this.collapse = false;
     }
-    get map() {
-        return (headers) => [...(headers ?? [])].map(header => {
-            return {
-                [this.props.outputConfig.keyName]: header.key,
-                [this.props.outputConfig.valueName]: header.value,
-            };
-        });
+    get outputConfig() {
+        return {
+            keyName: 'name',
+            valueName: 'value',
+        };
     }
 }
 GioFjsHeadersTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsHeadersTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -4420,10 +4431,10 @@ GioFjsHeadersTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
       <div *ngIf="!collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
-        <gio-form-headers [adaptOutputFn]="map" [formControl]="formControl"></gio-form-headers>
+        <gio-form-headers [headerFieldMapper]="outputConfig" [formControl]="formControl"></gio-form-headers>
       </div>
     </div>
-  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: ["adaptOutputFn"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"], components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { type: GioFormHeadersComponent, selector: "gio-form-headers", inputs: ["headerFieldMapper"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GioFjsHeadersTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gio-fjs-headers-type', template: `
@@ -4443,7 +4454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <formly-validation-message [field]="field"></formly-validation-message>
       </div>
       <div *ngIf="!collapse" class="wrapper__rows" [class.collapse-open]="collapse" [class.collapse-close]="!collapse">
-        <gio-form-headers [adaptOutputFn]="map" [formControl]="formControl"></gio-form-headers>
+        <gio-form-headers [headerFieldMapper]="outputConfig" [formControl]="formControl"></gio-form-headers>
       </div>
     </div>
   `, styles: [".wrapper{display:flex;flex-direction:column;padding:8px;border:1px solid #d3d5dc;border-radius:8px}.wrapper__header{display:flex}.wrapper__header__text{flex:1 1 auto}.wrapper__header__text__title{font:600 16px/24px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:.4px;margin-bottom:8px}.wrapper__header__collapse{flex:0 0 auto}.wrapper__header__collapse .collapse-open{transform:rotate(180deg);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__header__collapse .collapse-close{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.wrapper__error{font:400 12px/16px Golos UI,Roboto,Helvetica Neue,sans-serif;letter-spacing:normal;color:#ec4899}\n"] }]