npm - @ajf/material - Versions diffs - 16.1.5 → 16.1.8 - Mend

@ajf/material 16.1.5 → 16.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/esm2022/forms/field.mjs +2 -2
package/esm2022/forms/form.mjs +2 -2
package/esm2022/forms/table-field.mjs +3 -3
package/esm2022/reports/widget.mjs +6 -3
package/fesm2022/ajf-material-forms.mjs +6 -6
package/fesm2022/ajf-material-forms.mjs.map +1 -1
package/fesm2022/ajf-material-reports.mjs +5 -2
package/fesm2022/ajf-material-reports.mjs.map +1 -1
package/package.json +2 -2
package/reports/widget.d.ts +1 -0

package/esm2022/forms/field.mjs CHANGED Viewed

@@ -43,10 +43,10 @@ export class AjfFormField extends CoreFormField {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AjfFormField, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AjfFormField, selector: "ajf-field,ajf-form-field", usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"instance\"\n    [ngClass]=\"'ajf-field-' + (instance|ajfNodeCompleteName)\"\n    [class.ajf-validated]=\"instance.validationResults|ajfFieldIsValid\"\n    (keydown)=\"tabEvent($event, instance)\"\n>\n  <ng-template ajf-field-host></ng-template>\n</div>\n<ng-container *ngIf=\"instance && instance.node && instance.node.attachments\">\n  <a *ngFor=\"let attachment of instance.node.attachments\"\n    [href]=\"attachment.value\" target=\"_blank\">{{attachment.label | transloco}}</a>\n</ng-container>\n<div *ngIf=\"!readonly && instance && instance.validationResults\" class=\"ajf-errors\">\n  <ng-container *ngFor=\"let res of instance.validationResults\">\n    <div class=\"error\" *ngIf=\"!res.result\">\n      {{ res.error|transloco }}\n    </div>\n  </ng-container>\n</div>\n", styles: ["ajf-field .ajf-choices-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch}ajf-field .ajf-choices-container ajf-checkbox-group-item{width:100%}ajf-field .ajf-choices-container ajf-checkbox-group-item .mat-mdc-button{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ajf-field .ajf-item-container{position:relative}ajf-field .ajf-errors{font-style:italic;padding:5px}ajf-field tr.ajf-row-odd{background-color:gray}table{border-collapse:collapse;border-spacing:0}table tr td{position:relative}table tr td span,table tr td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;display:inline-block;border-top:solid 1px #cccccc;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px #cccccc;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center}table tr td:last-child span,table tr td:last-child input{border-right-color:#ccc}table tr:last-of-type td span,table tr:last-of-type td input{border-bottom-color:#ccc}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.AjfFieldHost, selector: "[ajf-field-host]" }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i3.AjfFieldIsValidPipe, name: "ajfFieldIsValid" }, { kind: "pipe", type: i3.AjfNodeCompleteNamePipe, name: "ajfNodeCompleteName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AjfFormField, selector: "ajf-field,ajf-form-field", usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"instance\"\n    [ngClass]=\"'ajf-field-' + (instance|ajfNodeCompleteName)\"\n    [class.ajf-validated]=\"instance.validationResults|ajfFieldIsValid\"\n    (keydown)=\"tabEvent($event, instance)\"\n>\n  <ng-template ajf-field-host></ng-template>\n</div>\n<ng-container *ngIf=\"instance && instance.node && instance.node.attachments\">\n  <a *ngFor=\"let attachment of instance.node.attachments\"\n    [href]=\"attachment.value\" target=\"_blank\">{{attachment.label | transloco}}</a>\n</ng-container>\n<div *ngIf=\"!readonly && instance && instance.validationResults\" class=\"ajf-errors\">\n  <ng-container *ngFor=\"let res of instance.validationResults\">\n    <div class=\"error\" *ngIf=\"!res.result\">\n      {{ res.error|transloco }}\n    </div>\n  </ng-container>\n</div>\n", styles: ["ajf-field .ajf-choices-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch}ajf-field .ajf-choices-container ajf-checkbox-group-item{width:100%}ajf-field .ajf-choices-container ajf-checkbox-group-item .mat-mdc-button{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ajf-field .ajf-item-container{position:relative}ajf-field .ajf-errors{font-style:italic;padding:5px}table{border-collapse:collapse;border-spacing:0}table tr td{position:relative}table tr td span,table tr td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;display:inline-block;border-top:solid 1px #cccccc;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px #cccccc;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center}table tr td:last-child span,table tr td:last-child input{border-right-color:#ccc}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.AjfFieldHost, selector: "[ajf-field-host]" }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i3.AjfFieldIsValidPipe, name: "ajfFieldIsValid" }, { kind: "pipe", type: i3.AjfNodeCompleteNamePipe, name: "ajfNodeCompleteName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AjfFormField, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-field,ajf-form-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    *ngIf=\"instance\"\n    [ngClass]=\"'ajf-field-' + (instance|ajfNodeCompleteName)\"\n    [class.ajf-validated]=\"instance.validationResults|ajfFieldIsValid\"\n    (keydown)=\"tabEvent($event, instance)\"\n>\n  <ng-template ajf-field-host></ng-template>\n</div>\n<ng-container *ngIf=\"instance && instance.node && instance.node.attachments\">\n  <a *ngFor=\"let attachment of instance.node.attachments\"\n    [href]=\"attachment.value\" target=\"_blank\">{{attachment.label | transloco}}</a>\n</ng-container>\n<div *ngIf=\"!readonly && instance && instance.validationResults\" class=\"ajf-errors\">\n  <ng-container *ngFor=\"let res of instance.validationResults\">\n    <div class=\"error\" *ngIf=\"!res.result\">\n      {{ res.error|transloco }}\n    </div>\n  </ng-container>\n</div>\n", styles: ["ajf-field .ajf-choices-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch}ajf-field .ajf-choices-container ajf-checkbox-group-item{width:100%}ajf-field .ajf-choices-container ajf-checkbox-group-item .mat-mdc-button{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ajf-field .ajf-item-container{position:relative}ajf-field .ajf-errors{font-style:italic;padding:5px}ajf-field tr.ajf-row-odd{background-color:gray}table{border-collapse:collapse;border-spacing:0}table tr td{position:relative}table tr td span,table tr td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;display:inline-block;border-top:solid 1px #cccccc;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px #cccccc;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center}table tr td:last-child span,table tr td:last-child input{border-right-color:#ccc}table tr:last-of-type td span,table tr:last-of-type td input{border-bottom-color:#ccc}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+            args: [{ selector: 'ajf-field,ajf-form-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    *ngIf=\"instance\"\n    [ngClass]=\"'ajf-field-' + (instance|ajfNodeCompleteName)\"\n    [class.ajf-validated]=\"instance.validationResults|ajfFieldIsValid\"\n    (keydown)=\"tabEvent($event, instance)\"\n>\n  <ng-template ajf-field-host></ng-template>\n</div>\n<ng-container *ngIf=\"instance && instance.node && instance.node.attachments\">\n  <a *ngFor=\"let attachment of instance.node.attachments\"\n    [href]=\"attachment.value\" target=\"_blank\">{{attachment.label | transloco}}</a>\n</ng-container>\n<div *ngIf=\"!readonly && instance && instance.validationResults\" class=\"ajf-errors\">\n  <ng-container *ngFor=\"let res of instance.validationResults\">\n    <div class=\"error\" *ngIf=\"!res.result\">\n      {{ res.error|transloco }}\n    </div>\n  </ng-container>\n</div>\n", styles: ["ajf-field .ajf-choices-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch}ajf-field .ajf-choices-container ajf-checkbox-group-item{width:100%}ajf-field .ajf-choices-container ajf-checkbox-group-item .mat-mdc-button{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ajf-field .ajf-item-container{position:relative}ajf-field .ajf-errors{font-style:italic;padding:5px}table{border-collapse:collapse;border-spacing:0}table tr td{position:relative}table tr td span,table tr td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;display:inline-block;border-top:solid 1px #cccccc;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px #cccccc;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center}table tr td:last-child span,table tr td:last-child input{border-right-color:#ccc}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFieldService }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC9mb3Jtcy9zcmMvZmllbGQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC9mb3Jtcy9zcmMvZmllbGQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQkc7QUFFSCxPQUFPLEVBR0wsWUFBWSxJQUFJLGFBQWEsR0FDOUIsTUFBTSxpQkFBaUIsQ0FBQztBQUV6QixPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7Ozs7OztBQVd2QixNQUFNLE9BQU8sWUFBYSxTQUFRLGFBQWE7SUFHN0MsWUFBWSxHQUFzQixFQUFFLFlBQTZCO1FBQy9ELEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNYLElBQUksQ0FBQyxhQUFhLEdBQUcsWUFBWSxDQUFDLGFBQWEsQ0FBQztJQUNsRCxDQUFDO0lBRUQsUUFBUSxDQUFDLEdBQWtCLEVBQUUsUUFBMEI7UUFDckQsSUFBSSxHQUFHLENBQUMsSUFBSSxJQUFJLEtBQUs7WUFBRSxPQUFPO1FBQzlCLE1BQU0sVUFBVSxHQUFZLEdBQUcsQ0FBQyxRQUFRLENBQUM7UUFDekMsTUFBTSxVQUFVLEdBQUcsY0FBYyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBRS9GLE1BQU0sYUFBYSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsSUFBSSxVQUFVLEVBQUUsQ0FBZ0IsQ0FBQztRQUU5RSxJQUFJLGFBQWEsSUFBSSxJQUFJLElBQUksUUFBUSxJQUFJLElBQUksRUFBRTtZQUM3QyxHQUFHLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDckIsR0FBRyxDQUFDLGVBQWUsRUFBRSxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQzsrR0FuQlUsWUFBWTttR0FBWixZQUFZLHVGQzVDekIsK3hCQW1CQTs7NEZEeUJhLFlBQVk7a0JBUHhCLFNBQVM7K0JBQ0UsMEJBQTBCLG1CQUduQix1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IChDKSBHbnVjb29wIHNvYy4gY29vcC5cbiAqXG4gKiBUaGlzIGZpbGUgaXMgcGFydCBvZiB0aGUgQWR2YW5jZWQgSlNPTiBmb3JtcyAoYWpmKS5cbiAqXG4gKiBBZHZhbmNlZCBKU09OIGZvcm1zIChhamYpIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vclxuICogbW9kaWZ5IGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEFmZmVybyBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGFzXG4gKiBwdWJsaXNoZWQgYnkgdGhlIEZyZWUgU29mdHdhcmUgRm91bmRhdGlvbiwgZWl0aGVyIHZlcnNpb24gMyBvZiB0aGUgTGljZW5zZSxcbiAqIG9yIChhdCB5b3VyIG9wdGlvbikgYW55IGxhdGVyIHZlcnNpb24uXG4gKlxuICogQWR2YW5jZWQgSlNPTiBmb3JtcyAoYWpmKSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZSBHTlUgQWZmZXJvXG4gKiBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEFmZmVybyBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlXG4gKiBhbG9uZyB3aXRoIEFkdmFuY2VkIEpTT04gZm9ybXMgKGFqZikuXG4gKiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG5pbXBvcnQge1xuICBBamZGaWVsZENvbXBvbmVudHNNYXAsXG4gIEFqZkZpZWxkSW5zdGFuY2UsXG4gIEFqZkZvcm1GaWVsZCBhcyBDb3JlRm9ybUZpZWxkLFxufSBmcm9tICdAYWpmL2NvcmUvZm9ybXMnO1xuaW1wb3J0IHtCb29sZWFuSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2Nkay9jb2VyY2lvbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQge0FqZkZpZWxkU2VydmljZX0gZnJvbSAnLi9maWVsZC1zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYWpmLWZpZWxkLGFqZi1mb3JtLWZpZWxkJyxcbiAgdGVtcGxhdGVVcmw6ICdmaWVsZC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2ZpZWxkLnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIEFqZkZvcm1GaWVsZCBleHRlbmRzIENvcmVGb3JtRmllbGQge1xuICByZWFkb25seSBjb21wb25lbnRzTWFwOiBBamZGaWVsZENvbXBvbmVudHNNYXA7XG5cbiAgY29uc3RydWN0b3IoY2RyOiBDaGFuZ2VEZXRlY3RvclJlZiwgZmllbGRTZXJ2aWNlOiBBamZGaWVsZFNlcnZpY2UpIHtcbiAgICBzdXBlcihjZHIpO1xuICAgIHRoaXMuY29tcG9uZW50c01hcCA9IGZpZWxkU2VydmljZS5jb21wb25lbnRzTWFwO1xuICB9XG5cbiAgdGFiRXZlbnQoZXZ0OiBLZXlib2FyZEV2ZW50LCBpbnN0YW5jZTogQWpmRmllbGRJbnN0YW5jZSkge1xuICAgIGlmIChldnQuY29kZSAhPSAnVGFiJykgcmV0dXJuO1xuICAgIGNvbnN0IGlzU2hpZnRLZXk6IGJvb2xlYW4gPSBldnQuc2hpZnRLZXk7XG4gICAgY29uc3QgY2FyZElkTmV4dCA9ICdmaWVsZF9lbnRyeV8nICsgKGlzU2hpZnRLZXkgPyBpbnN0YW5jZS5ub2RlLmlkIC0gMSA6IGluc3RhbmNlLm5vZGUuaWQgKyAxKTtcblxuICAgIGNvbnN0IHRhcmdldEVsZW1lbnQgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKGAjJHtjYXJkSWROZXh0fWApIGFzIEhUTUxFbGVtZW50O1xuXG4gICAgaWYgKHRhcmdldEVsZW1lbnQgPT0gbnVsbCB8fCBpbnN0YW5jZSA9PSBudWxsKSB7XG4gICAgICBldnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGV2dC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB9XG4gIH1cblxuICBzdGF0aWMgbmdBY2NlcHRJbnB1dFR5cGVfcmVhZG9ubHk6IEJvb2xlYW5JbnB1dDtcbn1cbiIsIjxkaXZcbiAgICAqbmdJZj1cImluc3RhbmNlXCJcbiAgICBbbmdDbGFzc109XCInYWpmLWZpZWxkLScgKyAoaW5zdGFuY2V8YWpmTm9kZUNvbXBsZXRlTmFtZSlcIlxuICAgIFtjbGFzcy5hamYtdmFsaWRhdGVkXT1cImluc3RhbmNlLnZhbGlkYXRpb25SZXN1bHRzfGFqZkZpZWxkSXNWYWxpZFwiXG4gICAgKGtleWRvd24pPVwidGFiRXZlbnQoJGV2ZW50LCBpbnN0YW5jZSlcIlxuPlxuICA8bmctdGVtcGxhdGUgYWpmLWZpZWxkLWhvc3Q+PC9uZy10ZW1wbGF0ZT5cbjwvZGl2PlxuPG5nLWNvbnRhaW5lciAqbmdJZj1cImluc3RhbmNlICYmIGluc3RhbmNlLm5vZGUgJiYgaW5zdGFuY2Uubm9kZS5hdHRhY2htZW50c1wiPlxuICA8YSAqbmdGb3I9XCJsZXQgYXR0YWNobWVudCBvZiBpbnN0YW5jZS5ub2RlLmF0dGFjaG1lbnRzXCJcbiAgICBbaHJlZl09XCJhdHRhY2htZW50LnZhbHVlXCIgdGFyZ2V0PVwiX2JsYW5rXCI+e3thdHRhY2htZW50LmxhYmVsIHwgdHJhbnNsb2NvfX08L2E+XG48L25nLWNvbnRhaW5lcj5cbjxkaXYgKm5nSWY9XCIhcmVhZG9ubHkgJiYgaW5zdGFuY2UgJiYgaW5zdGFuY2UudmFsaWRhdGlvblJlc3VsdHNcIiBjbGFzcz1cImFqZi1lcnJvcnNcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgcmVzIG9mIGluc3RhbmNlLnZhbGlkYXRpb25SZXN1bHRzXCI+XG4gICAgPGRpdiBjbGFzcz1cImVycm9yXCIgKm5nSWY9XCIhcmVzLnJlc3VsdFwiPlxuICAgICAge3sgcmVzLmVycm9yfHRyYW5zbG9jbyB9fVxuICAgIDwvZGl2PlxuICA8L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuIl19

package/esm2022/forms/form.mjs CHANGED Viewed

@@ -43,11 +43,11 @@ export class AjfFormRenderer extends CoreFormRenderer {
         this.maxColumns = 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AjfFormRenderer, deps: [{ token: i1.AjfFormRendererService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AjfFormRenderer, selector: "ajf-form", inputs: { topBar: "topBar", centeredFieldsContent: "centeredFieldsContent", maxColumns: "maxColumns" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroup|async as fg\">\n  <form [class.ajf-form-readonly]=\"readonly\" novalidate [formGroup]=\"fg!\">\n    <div class=\"ajf-form-container\">\n      <mat-toolbar *ngIf=\"!hideTopToolbar && topBar\" class=\"ajf-btn-strip\">\n        <mat-button-toggle-group>\n          <ng-container\n            *ngFor=\"let slideInstance of (slides|async); let idx = index; trackBy: trackNodeById\"\n          >\n            <mat-button-toggle\n              *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n              class=\"ajf-topbar-button\"\n              (click)=\"scrollToSlide(slideInstance)\"\n              [checked]=\"isSlideToggleChecked(slideInstance, formSlider.currentPage)\"\n              [disabled]=\"slideInstance.visible === false\"\n            >\n              {{slideInstance.node.label | transloco}} {{ getRepeatingSlideRepIndex(slideInstance,\n              formSlider.currentPage)|async}}\n              <mat-icon\n                *ngIf=\"!slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-warning\"\n                >warning</mat-icon\n              >\n              <mat-icon\n                *ngIf=\"slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-success\"\n                >check</mat-icon\n              >\n            </mat-button-toggle>\n          </ng-container>\n        </mat-button-toggle-group>\n      </mat-toolbar>\n      <mat-toolbar *ngIf=\"!hideTopToolbar\">\n        {{ title }}\n        <span class=\"ajf-spacer\"></span>\n        <!-- this content projection allow to add buttons on toolbar -->\n        <ng-content select=\"[ajfFormTopToolbarButtons]\"></ng-content>\n        <!-- apply a default save button only when ajfFormSaveButton is empty -->\n        <span *ngIf=\"!saveDisabled\" (click)=\"onSave($event)\">\n          <span #saveButton><ng-content select=\"[ajfFormSaveButton]\"></ng-content></span>\n          <button\n            *ngIf=\"saveButton && saveButton.childNodes && saveButton.childNodes.length === 0\"\n            mat-button\n            default\n          >\n            {{'Save'|transloco}}\n          </button>\n        </span>\n      </mat-toolbar>\n      <div class=\"ajf-slider-container\">\n        <ajf-page-slider\n          (orientationChange)=\"orientationChangeHandler($event)\"\n          [fixedOrientation]=\"fixedOrientation\"\n          [hideNavigationButtons]=\"hideNavigationButtons\"\n          [orientation]=\"orientation\"\n          #formSlider\n        >\n          <ng-container *ngIf=\"(slides|async) as curSlides\">\n            <ng-container *ngIf=\"curSlides!.length > 0 && hasStartMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span class=\"ajf-form-header-number\"> 1 &rarr; </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormStartMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormStartMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n            <ng-container *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\">\n              <!-- non repeating slides -->\n              <ng-container *ngIf=\"slideInstance.visible\">\n                <ng-container *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item>\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position + (hasStartMessage | ajfBoolToInt) }}\n                                &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!slideInstance.valid\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"slideInstance.valid\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.flatNodes\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors|transloco)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n                <!-- repeating slides -->\n                <ng-container *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item\n                    *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n                    [isRepeating]=\"true\"\n                    [isRepeatingLast]=\"lastSlide\"\n                  >\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position|ajfIncrement:idx + (hasStartMessage |\n                                ajfBoolToInt) }} &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <div *ngIf=\"lastSlide && !readonly\" class=\"ajf-group-actions\">\n                            <button\n                              (click)=\"addGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canAdd || ((slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval && !slideInstance.valid)\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>add</mat-icon>\n                            </button>\n                            <button\n                              (click)=\"removeGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canRemove || (slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>remove</mat-icon>\n                            </button>\n                          </div>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.slideNodes[idx]\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span *ngIf=\"(slidesNum|async) as snum\" class=\"ajf-form-header-number\">\n                            {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }} &rarr;\n                          </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormEndMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormEndMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n          </ng-container>\n          <div ajfPageSliderBar *ngIf=\"!hideBottomToolbar\">\n            <div class=\"ajf-left-bar\">\n              <div class=\"ajf-errors\" *ngIf=\"((errors | async) || 0) > 0\">\n                <button mat-button (click)=\"goToPrevError()\" danger>\n                  <mat-icon>arrow_upward</mat-icon>\n                </button>\n                <button mat-button (click)=\"goToNextError()\" danger>\n                  <mat-icon>arrow_downward</mat-icon>\n                </button>\n              </div>\n              <div class=\"ajf-info-box ajf-error\">\n                <div class=\"ajf-title\">{{'Errors'|transloco}}</div>\n                <div class=\"ajf-content\">{{ errors | async }} / {{ slidesNum|async }}</div>\n              </div>\n            </div>\n          </div>\n        </ajf-page-slider>\n      </div>\n    </div>\n  </form>\n</ng-container>\n", styles: ["ajf-form{display:block}ajf-form .ajf-form-readonly .ajf-field-entry>label{font-weight:700}ajf-form .ajf-form-container{display:flex;flex-direction:column;position:absolute;inset:0}ajf-form .ajf-form-container mat-toolbar.ajf-hidden{opacity:0}ajf-form .ajf-form-container .ajf-btn-strip .mat-button-toggle-group{overflow-x:auto}ajf-form .ajf-form-container .ajf-topbar-button{font-size:.8em}ajf-form .ajf-form-container mat-icon.ajf-warning{color:#f53d3d}ajf-form .ajf-form-container mat-icon.ajf-success{color:#32db64}ajf-form .ajf-form-container>.ajf-slider-container{flex:1;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider{height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content{padding:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page{flex:1;max-height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card{margin:1em 0 3em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content{display:flex;flex-wrap:wrap;flex-direction:row;align-content:flex-start;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content .ajf-group-actions{position:absolute;right:0;top:-30px;padding:15px;z-index:10}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry{padding-right:10px;min-width:350px;display:flex;flex-direction:column;margin:5px;border-left:3px solid;border-radius:5px;min-height:30vh;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-icon{vertical-align:bottom;margin-left:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-1{flex:1 0 100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-2{flex:1 0 45%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-3{flex:1 0 30%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-normal{width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-small{width:50%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-smaller{width:33%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-tiny{width:25%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-mini{width:20%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions{position:absolute;bottom:0;width:100%;display:flex;justify-content:flex-start;align-items:center;align-content:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-valid-field{background-color:#32db6433}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field{background-color:#f53d3d33}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field .ajf-field-error-message{margin-left:8px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions .mat-icon{margin-left:auto}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-radio-button,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry ajf-checkbox-group-item .mat-mdc-button{background-color:inherit!important}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header{margin-bottom:15px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header .ajf-tooltip-icon{align-self:center}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content{position:relative;flex:1;flex-flow:row wrap;justify-content:flex-start;align-items:flex-start;padding-top:2%;padding-bottom:10%;overflow-y:auto;max-width:95%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-select{margin:20px 0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group{display:flex;flex-flow:column wrap;justify-content:space-between}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 30%;padding:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .ajf-errors .error{display:none}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-content,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-header{justify-content:center;text-align:center}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .ajf-choices-container .mat-mdc-radio-button{text-align:start}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .ajf-field-range{margin-top:30px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header{display:flex;align-items:center;width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2{flex:1}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2>.ajf-form-header-number{margin-right:.5em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header h2>.ajf-title{display:inline-block;margin-right:40px;white-space:normal;vertical-align:top}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar{display:flex;align-items:flex-start;flex-direction:row;position:absolute;bottom:0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-right-button{float:right}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-button-icon-only ion-icon{padding:0 .1em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box{height:40px;padding:4px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div{height:16px;line-height:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div.ajf-content{font-weight:700}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box.ajf-error{order:2;color:red}ajf-form .ajf-form-container .ajf-spacer{flex:1 0 auto}\n"], dependencies: [{ kind: "component", type: i2.AjfPageSliderItem, selector: "ajf-page-slider-item", inputs: ["isRepeating", "isRepeatingLast"], outputs: ["scroll"] }, { kind: "component", type: i3.AjfPageSlider, selector: "ajf-page-slider" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i11.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i12.AjfFormField, selector: "ajf-field,ajf-form-field" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AjfAsFieldInstancePipe, name: "ajfAsFieldInstance" }, { kind: "pipe", type: i1.AjfAsFieldInstanceErrorsPipe, name: "ajfAsFieldInstanceErrors" }, { kind: "pipe", type: i1.AjfAsRepeatingSlideInstancePipe, name: "ajfAsRepeatingSlideInstance" }, { kind: "pipe", type: i1.AjfBoolToIntPipe, name: "ajfBoolToInt" }, { kind: "pipe", type: i1.AjfFieldIconPipe, name: "ajfFieldIcon" }, { kind: "pipe", type: i1.AjfIncrementPipe, name: "ajfIncrement" }, { kind: "pipe", type: i1.AjfIsRepeatingSlideInstancePipe, name: "ajfIsRepeatingSlideInstance" }, { kind: "pipe", type: i1.AjfRangePipe, name: "ajfRange" }, { kind: "pipe", type: i1.AjfValidSlidePipe, name: "ajfValidSlide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AjfFormRenderer, selector: "ajf-form", inputs: { topBar: "topBar", centeredFieldsContent: "centeredFieldsContent", maxColumns: "maxColumns" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroup|async as fg\">\n  <form [class.ajf-form-readonly]=\"readonly\" novalidate [formGroup]=\"fg!\">\n    <div class=\"ajf-form-container\">\n      <mat-toolbar *ngIf=\"!hideTopToolbar && topBar\" class=\"ajf-btn-strip\">\n        <mat-button-toggle-group>\n          <ng-container\n            *ngFor=\"let slideInstance of (slides|async); let idx = index; trackBy: trackNodeById\"\n          >\n            <mat-button-toggle\n              *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n              class=\"ajf-topbar-button\"\n              (click)=\"scrollToSlide(slideInstance)\"\n              [checked]=\"isSlideToggleChecked(slideInstance, formSlider.currentPage)\"\n              [disabled]=\"slideInstance.visible === false\"\n            >\n              {{slideInstance.node.label | transloco}} {{ getRepeatingSlideRepIndex(slideInstance,\n              formSlider.currentPage)|async}}\n              <mat-icon\n                *ngIf=\"!slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-warning\"\n                >warning</mat-icon\n              >\n              <mat-icon\n                *ngIf=\"slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-success\"\n                >check</mat-icon\n              >\n            </mat-button-toggle>\n          </ng-container>\n        </mat-button-toggle-group>\n      </mat-toolbar>\n      <mat-toolbar *ngIf=\"!hideTopToolbar\">\n        {{ title }}\n        <span class=\"ajf-spacer\"></span>\n        <!-- this content projection allow to add buttons on toolbar -->\n        <ng-content select=\"[ajfFormTopToolbarButtons]\"></ng-content>\n        <!-- apply a default save button only when ajfFormSaveButton is empty -->\n        <span *ngIf=\"!saveDisabled\" (click)=\"onSave($event)\">\n          <span #saveButton><ng-content select=\"[ajfFormSaveButton]\"></ng-content></span>\n          <button\n            *ngIf=\"saveButton && saveButton.childNodes && saveButton.childNodes.length === 0\"\n            mat-button\n            default\n          >\n            {{'Save'|transloco}}\n          </button>\n        </span>\n      </mat-toolbar>\n      <div class=\"ajf-slider-container\">\n        <ajf-page-slider\n          (orientationChange)=\"orientationChangeHandler($event)\"\n          [fixedOrientation]=\"fixedOrientation\"\n          [hideNavigationButtons]=\"hideNavigationButtons\"\n          [orientation]=\"orientation\"\n          #formSlider\n        >\n          <ng-container *ngIf=\"(slides|async) as curSlides\">\n            <ng-container *ngIf=\"curSlides!.length > 0 && hasStartMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span class=\"ajf-form-header-number\"> 1 &rarr; </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormStartMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormStartMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n            <ng-container *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\">\n              <!-- non repeating slides -->\n              <ng-container *ngIf=\"slideInstance.visible\">\n                <ng-container *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item>\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position + (hasStartMessage | ajfBoolToInt) }}\n                                &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!slideInstance.valid\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"slideInstance.valid\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.flatNodes\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors|transloco)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n                <!-- repeating slides -->\n                <ng-container *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item\n                    *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n                    [isRepeating]=\"true\"\n                    [isRepeatingLast]=\"lastSlide\"\n                  >\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position|ajfIncrement:idx + (hasStartMessage |\n                                ajfBoolToInt) }} &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <div *ngIf=\"lastSlide && !readonly\" class=\"ajf-group-actions\">\n                            <button\n                              (click)=\"addGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canAdd || ((slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval && !slideInstance.valid)\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>add</mat-icon>\n                            </button>\n                            <button\n                              (click)=\"removeGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canRemove || (slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>remove</mat-icon>\n                            </button>\n                          </div>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.slideNodes[idx]\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span *ngIf=\"(slidesNum|async) as snum\" class=\"ajf-form-header-number\">\n                            {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }} &rarr;\n                          </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormEndMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormEndMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n          </ng-container>\n          <div ajfPageSliderBar *ngIf=\"!hideBottomToolbar\">\n            <div class=\"ajf-left-bar\">\n              <div class=\"ajf-errors\" *ngIf=\"((errors | async) || 0) > 0\">\n                <button mat-button (click)=\"goToPrevError()\" danger>\n                  <mat-icon>arrow_upward</mat-icon>\n                </button>\n                <button mat-button (click)=\"goToNextError()\" danger>\n                  <mat-icon>arrow_downward</mat-icon>\n                </button>\n              </div>\n              <div class=\"ajf-info-box ajf-error\">\n                <div class=\"ajf-title\">{{'Errors'|transloco}}</div>\n                <div class=\"ajf-content\">{{ errors | async }} / {{ slidesNum|async }}</div>\n              </div>\n            </div>\n          </div>\n        </ajf-page-slider>\n      </div>\n    </div>\n  </form>\n</ng-container>\n", styles: ["ajf-form{display:block}ajf-form .ajf-form-readonly .ajf-field-entry>label{font-weight:700}ajf-form .ajf-form-container{display:flex;flex-direction:column;position:absolute;inset:0}ajf-form .ajf-form-container mat-toolbar.ajf-hidden{opacity:0}ajf-form .ajf-form-container .ajf-btn-strip .mat-button-toggle-group{overflow-x:auto}ajf-form .ajf-form-container .ajf-topbar-button{font-size:.8em}ajf-form .ajf-form-container mat-icon.ajf-warning{color:#f53d3d}ajf-form .ajf-form-container mat-icon.ajf-success{color:#32db64}ajf-form .ajf-form-container>.ajf-slider-container{flex:1;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider{height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content{padding:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page{flex:1;max-height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card{margin:1em 0 3em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content{display:flex;flex-wrap:wrap;flex-direction:row;align-content:flex-start;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content .ajf-group-actions{position:absolute;right:0;top:-30px;padding:15px;z-index:10}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry{padding-right:10px;min-width:350px;display:flex;flex-direction:column;margin:5px;border-left:3px solid;border-radius:5px;min-height:30vh;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-icon{vertical-align:bottom;margin-left:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-1{flex:1 0 100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-2{flex:1 0 45%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-3{flex:1 0 30%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-normal{width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-small{width:50%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-smaller{width:33%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-tiny{width:25%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-mini{width:20%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions{position:absolute;bottom:0;width:100%;display:flex;justify-content:flex-start;align-items:center;align-content:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-valid-field{background-color:#32db6433}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field{background-color:#f53d3d33}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field .ajf-field-error-message{margin-left:8px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions .mat-icon{margin-left:auto}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-radio-button,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry ajf-checkbox-group-item .mat-mdc-button{background-color:inherit!important}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header{margin-bottom:15px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header .ajf-tooltip-icon{align-self:center;min-width:24px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content{position:relative;flex:1;flex-flow:row wrap;justify-content:flex-start;align-items:flex-start;padding-top:2%;padding-bottom:10%;overflow-y:auto;max-width:95%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-select{margin:20px 0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group{display:flex;flex-flow:column wrap;justify-content:space-between}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 30%;padding:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .ajf-errors .error{display:none}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-content,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-header{justify-content:center;text-align:center}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .ajf-choices-container .mat-mdc-radio-button{text-align:start}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .ajf-field-range{margin-top:30px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header{display:flex;align-items:center;width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2{flex:1}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2>.ajf-form-header-number{margin-right:.5em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header h2>.ajf-title{display:inline-block;margin-right:40px;white-space:normal;vertical-align:top}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar{display:flex;align-items:flex-start;flex-direction:row;position:absolute;bottom:0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-right-button{float:right}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-button-icon-only ion-icon{padding:0 .1em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box{height:40px;padding:4px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div{height:16px;line-height:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div.ajf-content{font-weight:700}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box.ajf-error{order:2;color:red}ajf-form .ajf-form-container .ajf-spacer{flex:1 0 auto}\n"], dependencies: [{ kind: "component", type: i2.AjfPageSliderItem, selector: "ajf-page-slider-item", inputs: ["isRepeating", "isRepeatingLast"], outputs: ["scroll"] }, { kind: "component", type: i3.AjfPageSlider, selector: "ajf-page-slider" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i11.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i12.AjfFormField, selector: "ajf-field,ajf-form-field" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AjfAsFieldInstancePipe, name: "ajfAsFieldInstance" }, { kind: "pipe", type: i1.AjfAsFieldInstanceErrorsPipe, name: "ajfAsFieldInstanceErrors" }, { kind: "pipe", type: i1.AjfAsRepeatingSlideInstancePipe, name: "ajfAsRepeatingSlideInstance" }, { kind: "pipe", type: i1.AjfBoolToIntPipe, name: "ajfBoolToInt" }, { kind: "pipe", type: i1.AjfFieldIconPipe, name: "ajfFieldIcon" }, { kind: "pipe", type: i1.AjfIncrementPipe, name: "ajfIncrement" }, { kind: "pipe", type: i1.AjfIsRepeatingSlideInstancePipe, name: "ajfIsRepeatingSlideInstance" }, { kind: "pipe", type: i1.AjfRangePipe, name: "ajfRange" }, { kind: "pipe", type: i1.AjfValidSlidePipe, name: "ajfValidSlide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AjfFormRenderer, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-form', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"formGroup|async as fg\">\n  <form [class.ajf-form-readonly]=\"readonly\" novalidate [formGroup]=\"fg!\">\n    <div class=\"ajf-form-container\">\n      <mat-toolbar *ngIf=\"!hideTopToolbar && topBar\" class=\"ajf-btn-strip\">\n        <mat-button-toggle-group>\n          <ng-container\n            *ngFor=\"let slideInstance of (slides|async); let idx = index; trackBy: trackNodeById\"\n          >\n            <mat-button-toggle\n              *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n              class=\"ajf-topbar-button\"\n              (click)=\"scrollToSlide(slideInstance)\"\n              [checked]=\"isSlideToggleChecked(slideInstance, formSlider.currentPage)\"\n              [disabled]=\"slideInstance.visible === false\"\n            >\n              {{slideInstance.node.label | transloco}} {{ getRepeatingSlideRepIndex(slideInstance,\n              formSlider.currentPage)|async}}\n              <mat-icon\n                *ngIf=\"!slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-warning\"\n                >warning</mat-icon\n              >\n              <mat-icon\n                *ngIf=\"slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-success\"\n                >check</mat-icon\n              >\n            </mat-button-toggle>\n          </ng-container>\n        </mat-button-toggle-group>\n      </mat-toolbar>\n      <mat-toolbar *ngIf=\"!hideTopToolbar\">\n        {{ title }}\n        <span class=\"ajf-spacer\"></span>\n        <!-- this content projection allow to add buttons on toolbar -->\n        <ng-content select=\"[ajfFormTopToolbarButtons]\"></ng-content>\n        <!-- apply a default save button only when ajfFormSaveButton is empty -->\n        <span *ngIf=\"!saveDisabled\" (click)=\"onSave($event)\">\n          <span #saveButton><ng-content select=\"[ajfFormSaveButton]\"></ng-content></span>\n          <button\n            *ngIf=\"saveButton && saveButton.childNodes && saveButton.childNodes.length === 0\"\n            mat-button\n            default\n          >\n            {{'Save'|transloco}}\n          </button>\n        </span>\n      </mat-toolbar>\n      <div class=\"ajf-slider-container\">\n        <ajf-page-slider\n          (orientationChange)=\"orientationChangeHandler($event)\"\n          [fixedOrientation]=\"fixedOrientation\"\n          [hideNavigationButtons]=\"hideNavigationButtons\"\n          [orientation]=\"orientation\"\n          #formSlider\n        >\n          <ng-container *ngIf=\"(slides|async) as curSlides\">\n            <ng-container *ngIf=\"curSlides!.length > 0 && hasStartMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span class=\"ajf-form-header-number\"> 1 &rarr; </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormStartMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormStartMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n            <ng-container *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\">\n              <!-- non repeating slides -->\n              <ng-container *ngIf=\"slideInstance.visible\">\n                <ng-container *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item>\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position + (hasStartMessage | ajfBoolToInt) }}\n                                &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!slideInstance.valid\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"slideInstance.valid\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.flatNodes\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors|transloco)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n                <!-- repeating slides -->\n                <ng-container *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item\n                    *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n                    [isRepeating]=\"true\"\n                    [isRepeatingLast]=\"lastSlide\"\n                  >\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position|ajfIncrement:idx + (hasStartMessage |\n                                ajfBoolToInt) }} &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <div *ngIf=\"lastSlide && !readonly\" class=\"ajf-group-actions\">\n                            <button\n                              (click)=\"addGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canAdd || ((slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval && !slideInstance.valid)\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>add</mat-icon>\n                            </button>\n                            <button\n                              (click)=\"removeGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canRemove || (slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>remove</mat-icon>\n                            </button>\n                          </div>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.slideNodes[idx]\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span *ngIf=\"(slidesNum|async) as snum\" class=\"ajf-form-header-number\">\n                            {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }} &rarr;\n                          </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormEndMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormEndMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n          </ng-container>\n          <div ajfPageSliderBar *ngIf=\"!hideBottomToolbar\">\n            <div class=\"ajf-left-bar\">\n              <div class=\"ajf-errors\" *ngIf=\"((errors | async) || 0) > 0\">\n                <button mat-button (click)=\"goToPrevError()\" danger>\n                  <mat-icon>arrow_upward</mat-icon>\n                </button>\n                <button mat-button (click)=\"goToNextError()\" danger>\n                  <mat-icon>arrow_downward</mat-icon>\n                </button>\n              </div>\n              <div class=\"ajf-info-box ajf-error\">\n                <div class=\"ajf-title\">{{'Errors'|transloco}}</div>\n                <div class=\"ajf-content\">{{ errors | async }} / {{ slidesNum|async }}</div>\n              </div>\n            </div>\n          </div>\n        </ajf-page-slider>\n      </div>\n    </div>\n  </form>\n</ng-container>\n", styles: ["ajf-form{display:block}ajf-form .ajf-form-readonly .ajf-field-entry>label{font-weight:700}ajf-form .ajf-form-container{display:flex;flex-direction:column;position:absolute;inset:0}ajf-form .ajf-form-container mat-toolbar.ajf-hidden{opacity:0}ajf-form .ajf-form-container .ajf-btn-strip .mat-button-toggle-group{overflow-x:auto}ajf-form .ajf-form-container .ajf-topbar-button{font-size:.8em}ajf-form .ajf-form-container mat-icon.ajf-warning{color:#f53d3d}ajf-form .ajf-form-container mat-icon.ajf-success{color:#32db64}ajf-form .ajf-form-container>.ajf-slider-container{flex:1;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider{height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content{padding:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page{flex:1;max-height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card{margin:1em 0 3em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content{display:flex;flex-wrap:wrap;flex-direction:row;align-content:flex-start;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content .ajf-group-actions{position:absolute;right:0;top:-30px;padding:15px;z-index:10}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry{padding-right:10px;min-width:350px;display:flex;flex-direction:column;margin:5px;border-left:3px solid;border-radius:5px;min-height:30vh;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-icon{vertical-align:bottom;margin-left:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-1{flex:1 0 100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-2{flex:1 0 45%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-3{flex:1 0 30%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-normal{width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-small{width:50%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-smaller{width:33%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-tiny{width:25%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-mini{width:20%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions{position:absolute;bottom:0;width:100%;display:flex;justify-content:flex-start;align-items:center;align-content:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-valid-field{background-color:#32db6433}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field{background-color:#f53d3d33}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field .ajf-field-error-message{margin-left:8px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions .mat-icon{margin-left:auto}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-radio-button,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry ajf-checkbox-group-item .mat-mdc-button{background-color:inherit!important}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header{margin-bottom:15px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header .ajf-tooltip-icon{align-self:center}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content{position:relative;flex:1;flex-flow:row wrap;justify-content:flex-start;align-items:flex-start;padding-top:2%;padding-bottom:10%;overflow-y:auto;max-width:95%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-select{margin:20px 0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group{display:flex;flex-flow:column wrap;justify-content:space-between}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 30%;padding:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .ajf-errors .error{display:none}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-content,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-header{justify-content:center;text-align:center}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .ajf-choices-container .mat-mdc-radio-button{text-align:start}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .ajf-field-range{margin-top:30px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header{display:flex;align-items:center;width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2{flex:1}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2>.ajf-form-header-number{margin-right:.5em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header h2>.ajf-title{display:inline-block;margin-right:40px;white-space:normal;vertical-align:top}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar{display:flex;align-items:flex-start;flex-direction:row;position:absolute;bottom:0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-right-button{float:right}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-button-icon-only ion-icon{padding:0 .1em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box{height:40px;padding:4px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div{height:16px;line-height:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div.ajf-content{font-weight:700}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box.ajf-error{order:2;color:red}ajf-form .ajf-form-container .ajf-spacer{flex:1 0 auto}\n"] }]
+            args: [{ selector: 'ajf-form', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"formGroup|async as fg\">\n  <form [class.ajf-form-readonly]=\"readonly\" novalidate [formGroup]=\"fg!\">\n    <div class=\"ajf-form-container\">\n      <mat-toolbar *ngIf=\"!hideTopToolbar && topBar\" class=\"ajf-btn-strip\">\n        <mat-button-toggle-group>\n          <ng-container\n            *ngFor=\"let slideInstance of (slides|async); let idx = index; trackBy: trackNodeById\"\n          >\n            <mat-button-toggle\n              *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n              class=\"ajf-topbar-button\"\n              (click)=\"scrollToSlide(slideInstance)\"\n              [checked]=\"isSlideToggleChecked(slideInstance, formSlider.currentPage)\"\n              [disabled]=\"slideInstance.visible === false\"\n            >\n              {{slideInstance.node.label | transloco}} {{ getRepeatingSlideRepIndex(slideInstance,\n              formSlider.currentPage)|async}}\n              <mat-icon\n                *ngIf=\"!slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-warning\"\n                >warning</mat-icon\n              >\n              <mat-icon\n                *ngIf=\"slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-success\"\n                >check</mat-icon\n              >\n            </mat-button-toggle>\n          </ng-container>\n        </mat-button-toggle-group>\n      </mat-toolbar>\n      <mat-toolbar *ngIf=\"!hideTopToolbar\">\n        {{ title }}\n        <span class=\"ajf-spacer\"></span>\n        <!-- this content projection allow to add buttons on toolbar -->\n        <ng-content select=\"[ajfFormTopToolbarButtons]\"></ng-content>\n        <!-- apply a default save button only when ajfFormSaveButton is empty -->\n        <span *ngIf=\"!saveDisabled\" (click)=\"onSave($event)\">\n          <span #saveButton><ng-content select=\"[ajfFormSaveButton]\"></ng-content></span>\n          <button\n            *ngIf=\"saveButton && saveButton.childNodes && saveButton.childNodes.length === 0\"\n            mat-button\n            default\n          >\n            {{'Save'|transloco}}\n          </button>\n        </span>\n      </mat-toolbar>\n      <div class=\"ajf-slider-container\">\n        <ajf-page-slider\n          (orientationChange)=\"orientationChangeHandler($event)\"\n          [fixedOrientation]=\"fixedOrientation\"\n          [hideNavigationButtons]=\"hideNavigationButtons\"\n          [orientation]=\"orientation\"\n          #formSlider\n        >\n          <ng-container *ngIf=\"(slides|async) as curSlides\">\n            <ng-container *ngIf=\"curSlides!.length > 0 && hasStartMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span class=\"ajf-form-header-number\"> 1 &rarr; </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormStartMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormStartMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n            <ng-container *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\">\n              <!-- non repeating slides -->\n              <ng-container *ngIf=\"slideInstance.visible\">\n                <ng-container *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item>\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position + (hasStartMessage | ajfBoolToInt) }}\n                                &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!slideInstance.valid\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"slideInstance.valid\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.flatNodes\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors|transloco)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n                <!-- repeating slides -->\n                <ng-container *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item\n                    *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n                    [isRepeating]=\"true\"\n                    [isRepeatingLast]=\"lastSlide\"\n                  >\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position|ajfIncrement:idx + (hasStartMessage |\n                                ajfBoolToInt) }} &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <div *ngIf=\"lastSlide && !readonly\" class=\"ajf-group-actions\">\n                            <button\n                              (click)=\"addGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canAdd || ((slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval && !slideInstance.valid)\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>add</mat-icon>\n                            </button>\n                            <button\n                              (click)=\"removeGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canRemove || (slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>remove</mat-icon>\n                            </button>\n                          </div>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.slideNodes[idx]\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span *ngIf=\"(slidesNum|async) as snum\" class=\"ajf-form-header-number\">\n                            {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }} &rarr;\n                          </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormEndMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormEndMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n          </ng-container>\n          <div ajfPageSliderBar *ngIf=\"!hideBottomToolbar\">\n            <div class=\"ajf-left-bar\">\n              <div class=\"ajf-errors\" *ngIf=\"((errors | async) || 0) > 0\">\n                <button mat-button (click)=\"goToPrevError()\" danger>\n                  <mat-icon>arrow_upward</mat-icon>\n                </button>\n                <button mat-button (click)=\"goToNextError()\" danger>\n                  <mat-icon>arrow_downward</mat-icon>\n                </button>\n              </div>\n              <div class=\"ajf-info-box ajf-error\">\n                <div class=\"ajf-title\">{{'Errors'|transloco}}</div>\n                <div class=\"ajf-content\">{{ errors | async }} / {{ slidesNum|async }}</div>\n              </div>\n            </div>\n          </div>\n        </ajf-page-slider>\n      </div>\n    </div>\n  </form>\n</ng-container>\n", styles: ["ajf-form{display:block}ajf-form .ajf-form-readonly .ajf-field-entry>label{font-weight:700}ajf-form .ajf-form-container{display:flex;flex-direction:column;position:absolute;inset:0}ajf-form .ajf-form-container mat-toolbar.ajf-hidden{opacity:0}ajf-form .ajf-form-container .ajf-btn-strip .mat-button-toggle-group{overflow-x:auto}ajf-form .ajf-form-container .ajf-topbar-button{font-size:.8em}ajf-form .ajf-form-container mat-icon.ajf-warning{color:#f53d3d}ajf-form .ajf-form-container mat-icon.ajf-success{color:#32db64}ajf-form .ajf-form-container>.ajf-slider-container{flex:1;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider{height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content{padding:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page{flex:1;max-height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card{margin:1em 0 3em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content{display:flex;flex-wrap:wrap;flex-direction:row;align-content:flex-start;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content .ajf-group-actions{position:absolute;right:0;top:-30px;padding:15px;z-index:10}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry{padding-right:10px;min-width:350px;display:flex;flex-direction:column;margin:5px;border-left:3px solid;border-radius:5px;min-height:30vh;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-icon{vertical-align:bottom;margin-left:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-1{flex:1 0 100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-2{flex:1 0 45%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-3{flex:1 0 30%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-normal{width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-small{width:50%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-smaller{width:33%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-tiny{width:25%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-mini{width:20%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions{position:absolute;bottom:0;width:100%;display:flex;justify-content:flex-start;align-items:center;align-content:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-valid-field{background-color:#32db6433}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field{background-color:#f53d3d33}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field .ajf-field-error-message{margin-left:8px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions .mat-icon{margin-left:auto}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-radio-button,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry ajf-checkbox-group-item .mat-mdc-button{background-color:inherit!important}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header{margin-bottom:15px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header .ajf-tooltip-icon{align-self:center;min-width:24px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content{position:relative;flex:1;flex-flow:row wrap;justify-content:flex-start;align-items:flex-start;padding-top:2%;padding-bottom:10%;overflow-y:auto;max-width:95%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-select{margin:20px 0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group{display:flex;flex-flow:column wrap;justify-content:space-between}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 30%;padding:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .ajf-errors .error{display:none}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-content,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-header{justify-content:center;text-align:center}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .ajf-choices-container .mat-mdc-radio-button{text-align:start}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .ajf-field-range{margin-top:30px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header{display:flex;align-items:center;width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2{flex:1}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2>.ajf-form-header-number{margin-right:.5em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header h2>.ajf-title{display:inline-block;margin-right:40px;white-space:normal;vertical-align:top}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar{display:flex;align-items:flex-start;flex-direction:row;position:absolute;bottom:0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-right-button{float:right}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-button-icon-only ion-icon{padding:0 .1em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box{height:40px;padding:4px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div{height:16px;line-height:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div.ajf-content{font-weight:700}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box.ajf-error{order:2;color:red}ajf-form .ajf-form-container .ajf-spacer{flex:1 0 auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AjfFormRendererService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { topBar: [{
                 type: Input
             }], centeredFieldsContent: [{

package/esm2022/forms/table-field.mjs CHANGED Viewed

@@ -32,13 +32,13 @@ export class AjfTableFieldComponent extends CoreTableFieldComponent {
         super(cdr, service, was);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AjfTableFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AjfTableFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<table *ngIf=\"instance\" class=\"ajf-table-field\">\n  <ng-container *ngIf=\"instance.node as node\">\n    <ng-container *ngFor=\"let columns of instance.controls; let row = index\">\n      <tr [ngClass]=\"row | ajfTableRowClass\">\n        <td>\n          <ng-container *ngIf=\"columns.length > 0 && columns[0]\">\n            {{ columns[0] | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n          </ng-container>\n        </td>\n        <ng-container *ngIf=\"columns.length > 1\">\n          <td *ngFor=\"let c of columns[1]; let column = index\">\n            <ng-container *ngIf=\"row === 0; else controlCell\">\n              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n            </ng-container>\n            <ng-template #controlCell>\n              <ng-container *ngIf=\"c|ajfGetTableCellControl as contr\">\n                <ng-container *ngIf=\"contr\">\n                  <ng-container\n                    *ngIf=\"contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell\"\n                  >\n                    <ng-container *ngIf=\"contr.type === 'number';else genericInput\">\n                      <input\n                        (focusout)=\"contr!.show = false\"\n                        type=\"number\"\n                        [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\"\n                        autofocus\n                      />\n                    </ng-container>\n                    <ng-template #genericInput>\n                      <input\n                        (focusout)=\"contr!.show = false\"\n                        [type]=\"contr.type\"\n                        [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\"\n                        autofocus\n                      />\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-template #plainTextCell>\n                    <span class=\"ajf-table-cell\" (click)=\"goToCell(row, column)\"\n                      >{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber: '.0-2'\n                      }}</span\n                    >\n                  </ng-template>\n                </ng-container>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </ng-container>\n</table>\n", styles: ["table.ajf-table-field{border-collapse:collapse;border-spacing:0;width:100%}table.ajf-table-field tr td{position:relative;min-width:2em;border-top:solid 1px #cccccc;border-left:solid 1px #cccccc}table.ajf-table-field tr td span,table.ajf-table-field tr td input{cursor:text;width:100%;box-sizing:border-box;outline:none;display:inline-block;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center;position:relative;min-height:22px;border:none}table.ajf-table-field tr td:last-child span,table.ajf-table-field tr td:last-child input{border-right-color:#ccc}table.ajf-table-field tr:last-of-type td span,table.ajf-table-field tr:last-of-type td input{border-bottom-color:#ccc}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.FormatIfNumber, name: "ajfFormatIfNumber" }, { kind: "pipe", type: i4.TranslateIfString, name: "ajfTranslateIfString" }, { kind: "pipe", type: i1.AjfGetTableCellControlPipe, name: "ajfGetTableCellControl" }, { kind: "pipe", type: i1.AjfIsCellEditablePipe, name: "ajfIsCellEditable" }, { kind: "pipe", type: i1.AjfTableRowClass, name: "ajfTableRowClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AjfTableFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<table *ngIf=\"instance\" class=\"ajf-table-field\">\n  <ng-container *ngIf=\"instance.node as node\">\n    <ng-container *ngFor=\"let columns of instance.controls; let row = index\">\n      <tr [ngClass]=\"row | ajfTableRowClass\">\n        <td>\n          <ng-container *ngIf=\"columns.length > 0 && columns[0]\">\n            {{ columns[0] | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n          </ng-container>\n        </td>\n        <ng-container *ngIf=\"columns.length > 1\">\n          <td *ngFor=\"let c of columns[1]; let column = index\">\n            <ng-container *ngIf=\"row === 0; else controlCell\">\n              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n            </ng-container>\n            <ng-template #controlCell>\n              <ng-container *ngIf=\"c|ajfGetTableCellControl as contr\">\n                <ng-container *ngIf=\"contr\">\n                  <ng-container *ngIf=\"contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell\">\n                    <ng-container *ngIf=\"contr.type === 'number';else genericInput\">\n                      <input (focusout)=\"contr!.show = false\" type=\"number\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-container>\n                    <ng-template #genericInput>\n                      <input (focusout)=\"contr!.show = false\" [type]=\"contr.type\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-template #plainTextCell>\n                    <span (click)=\"goToCell(row, column)\">{{ contr.control!.value |\n                      ajfTranslateIfString | ajfFormatIfNumber: '.0-2'\n                      }}</span>\n                  </ng-template>\n                </ng-container>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </ng-container>\n</table>", styles: ["table.ajf-table-field{width:100%;border-collapse:collapse}table.ajf-table-field .ajf-header-row{font-weight:700;background-color:#f9f9f9}table.ajf-table-field th,table.ajf-table-field td{padding:12px 15px;text-align:left;border-bottom:1px solid #ddd}table.ajf-table-field th span,table.ajf-table-field th input,table.ajf-table-field td span,table.ajf-table-field td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;display:inline-block;border-top:solid 1px transparent;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px #cccccc;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center;padding:12px 15px}table.ajf-table-field tr:hover{background-color:#f1f1f1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.FormatIfNumber, name: "ajfFormatIfNumber" }, { kind: "pipe", type: i4.TranslateIfString, name: "ajfTranslateIfString" }, { kind: "pipe", type: i1.AjfGetTableCellControlPipe, name: "ajfGetTableCellControl" }, { kind: "pipe", type: i1.AjfIsCellEditablePipe, name: "ajfIsCellEditable" }, { kind: "pipe", type: i1.AjfTableRowClass, name: "ajfTableRowClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AjfTableFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<table *ngIf=\"instance\" class=\"ajf-table-field\">\n  <ng-container *ngIf=\"instance.node as node\">\n    <ng-container *ngFor=\"let columns of instance.controls; let row = index\">\n      <tr [ngClass]=\"row | ajfTableRowClass\">\n        <td>\n          <ng-container *ngIf=\"columns.length > 0 && columns[0]\">\n            {{ columns[0] | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n          </ng-container>\n        </td>\n        <ng-container *ngIf=\"columns.length > 1\">\n          <td *ngFor=\"let c of columns[1]; let column = index\">\n            <ng-container *ngIf=\"row === 0; else controlCell\">\n              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n            </ng-container>\n            <ng-template #controlCell>\n              <ng-container *ngIf=\"c|ajfGetTableCellControl as contr\">\n                <ng-container *ngIf=\"contr\">\n                  <ng-container\n                    *ngIf=\"contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell\"\n                  >\n                    <ng-container *ngIf=\"contr.type === 'number';else genericInput\">\n                      <input\n                        (focusout)=\"contr!.show = false\"\n                        type=\"number\"\n                        [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\"\n                        autofocus\n                      />\n                    </ng-container>\n                    <ng-template #genericInput>\n                      <input\n                        (focusout)=\"contr!.show = false\"\n                        [type]=\"contr.type\"\n                        [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\"\n                        autofocus\n                      />\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-template #plainTextCell>\n                    <span class=\"ajf-table-cell\" (click)=\"goToCell(row, column)\"\n                      >{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber: '.0-2'\n                      }}</span\n                    >\n                  </ng-template>\n                </ng-container>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </ng-container>\n</table>\n", styles: ["table.ajf-table-field{border-collapse:collapse;border-spacing:0;width:100%}table.ajf-table-field tr td{position:relative;min-width:2em;border-top:solid 1px #cccccc;border-left:solid 1px #cccccc}table.ajf-table-field tr td span,table.ajf-table-field tr td input{cursor:text;width:100%;box-sizing:border-box;outline:none;display:inline-block;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center;position:relative;min-height:22px;border:none}table.ajf-table-field tr td:last-child span,table.ajf-table-field tr td:last-child input{border-right-color:#ccc}table.ajf-table-field tr:last-of-type td span,table.ajf-table-field tr:last-of-type td input{border-bottom-color:#ccc}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<table *ngIf=\"instance\" class=\"ajf-table-field\">\n  <ng-container *ngIf=\"instance.node as node\">\n    <ng-container *ngFor=\"let columns of instance.controls; let row = index\">\n      <tr [ngClass]=\"row | ajfTableRowClass\">\n        <td>\n          <ng-container *ngIf=\"columns.length > 0 && columns[0]\">\n            {{ columns[0] | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n          </ng-container>\n        </td>\n        <ng-container *ngIf=\"columns.length > 1\">\n          <td *ngFor=\"let c of columns[1]; let column = index\">\n            <ng-container *ngIf=\"row === 0; else controlCell\">\n              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n            </ng-container>\n            <ng-template #controlCell>\n              <ng-container *ngIf=\"c|ajfGetTableCellControl as contr\">\n                <ng-container *ngIf=\"contr\">\n                  <ng-container *ngIf=\"contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell\">\n                    <ng-container *ngIf=\"contr.type === 'number';else genericInput\">\n                      <input (focusout)=\"contr!.show = false\" type=\"number\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-container>\n                    <ng-template #genericInput>\n                      <input (focusout)=\"contr!.show = false\" [type]=\"contr.type\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-template #plainTextCell>\n                    <span (click)=\"goToCell(row, column)\">{{ contr.control!.value |\n                      ajfTranslateIfString | ajfFormatIfNumber: '.0-2'\n                      }}</span>\n                  </ng-template>\n                </ng-container>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </ng-container>\n</table>", styles: ["table.ajf-table-field{width:100%;border-collapse:collapse}table.ajf-table-field .ajf-header-row{font-weight:700;background-color:#f9f9f9}table.ajf-table-field th,table.ajf-table-field td{padding:12px 15px;text-align:left;border-bottom:1px solid #ddd}table.ajf-table-field th span,table.ajf-table-field th input,table.ajf-table-field td span,table.ajf-table-field td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;display:inline-block;border-top:solid 1px transparent;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px #cccccc;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center;padding:12px 15px}table.ajf-table-field tr:hover{background-color:#f1f1f1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: i5.AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtZmllbGQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC9mb3Jtcy9zcmMvdGFibGUtZmllbGQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC9mb3Jtcy9zcmMvdGFibGUtZmllbGQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQkc7QUFFSCxPQUFPLEVBQ0wseUJBQXlCLEVBRXpCLHNCQUFzQixJQUFJLHVCQUF1QixHQUNsRCxNQUFNLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULE1BQU0sRUFDTixpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFVdkIsTUFBTSxPQUFPLHNCQUF1QixTQUFRLHVCQUF1QjtJQUNqRSxZQUNFLEdBQXNCLEVBQ3RCLE9BQStCLEVBQ0ksR0FBMkI7UUFFOUQsS0FBSyxDQUFDLEdBQUcsRUFBRSxPQUFPLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDM0IsQ0FBQzsrR0FQVSxzQkFBc0IseUZBSXZCLHlCQUF5QjttR0FKeEIsc0JBQXNCLDJFQzNDbkMsazdFQXVEQTs7NEZEWmEsc0JBQXNCO2tCQU5sQyxTQUFTO3NDQUdTLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7OzBCQU1sQyxNQUFNOzJCQUFDLHlCQUF5QiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCAoQykgR251Y29vcCBzb2MuIGNvb3AuXG4gKlxuICogVGhpcyBmaWxlIGlzIHBhcnQgb2YgdGhlIEFkdmFuY2VkIEpTT04gZm9ybXMgKGFqZikuXG4gKlxuICogQWR2YW5jZWQgSlNPTiBmb3JtcyAoYWpmKSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3JcbiAqIG1vZGlmeSBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBBZmZlcm8gR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhc1xuICogcHVibGlzaGVkIGJ5IHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsXG4gKiBvciAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIEFkdmFuY2VkIEpTT04gZm9ybXMgKGFqZikgaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGUgR05VIEFmZmVyb1xuICogR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBBZmZlcm8gR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCBBZHZhbmNlZCBKU09OIGZvcm1zIChhamYpLlxuICogSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuaW1wb3J0IHtcbiAgQUpGX1dBUk5JTkdfQUxFUlRfU0VSVklDRSxcbiAgQWpmRm9ybVJlbmRlcmVyU2VydmljZSxcbiAgQWpmVGFibGVGaWVsZENvbXBvbmVudCBhcyBDb3JlVGFibGVGaWVsZENvbXBvbmVudCxcbn0gZnJvbSAnQGFqZi9jb3JlL2Zvcm1zJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBJbmplY3QsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHtBamZXYXJuaW5nQWxlcnRTZXJ2aWNlfSBmcm9tICcuL3dhcm5pbmctYWxlcnQtc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICB0ZW1wbGF0ZVVybDogJ3RhYmxlLWZpZWxkLmh0bWwnLFxuICBzdHlsZVVybHM6IFsndGFibGUtZmllbGQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgQWpmVGFibGVGaWVsZENvbXBvbmVudCBleHRlbmRzIENvcmVUYWJsZUZpZWxkQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IoXG4gICAgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBzZXJ2aWNlOiBBamZGb3JtUmVuZGVyZXJTZXJ2aWNlLFxuICAgIEBJbmplY3QoQUpGX1dBUk5JTkdfQUxFUlRfU0VSVklDRSkgd2FzOiBBamZXYXJuaW5nQWxlcnRTZXJ2aWNlLFxuICApIHtcbiAgICBzdXBlcihjZHIsIHNlcnZpY2UsIHdhcyk7XG4gIH1cbn1cbiIsIjx0YWJsZSAqbmdJZj1cImluc3RhbmNlXCIgY2xhc3M9XCJhamYtdGFibGUtZmllbGRcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImluc3RhbmNlLm5vZGUgYXMgbm9kZVwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGNvbHVtbnMgb2YgaW5zdGFuY2UuY29udHJvbHM7IGxldCByb3cgPSBpbmRleFwiPlxuICAgICAgPHRyIFtuZ0NsYXNzXT1cInJvdyB8IGFqZlRhYmxlUm93Q2xhc3NcIj5cbiAgICAgICAgPHRkPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjb2x1bW5zLmxlbmd0aCA+IDAgJiYgY29sdW1uc1swXVwiPlxuICAgICAgICAgICAge3sgY29sdW1uc1swXSB8IGFqZlRyYW5zbGF0ZUlmU3RyaW5nIHwgYWpmRm9ybWF0SWZOdW1iZXI6ICcuMC0yJyB9fVxuICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L3RkPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29sdW1ucy5sZW5ndGggPiAxXCI+XG4gICAgICAgICAgPHRkICpuZ0Zvcj1cImxldCBjIG9mIGNvbHVtbnNbMV07IGxldCBjb2x1bW4gPSBpbmRleFwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInJvdyA9PT0gMDsgZWxzZSBjb250cm9sQ2VsbFwiPlxuICAgICAgICAgICAgICB7eyBjIHwgYWpmVHJhbnNsYXRlSWZTdHJpbmcgfCBhamZGb3JtYXRJZk51bWJlcjogJy4wLTInIH19XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjY29udHJvbENlbGw+XG4gICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjfGFqZkdldFRhYmxlQ2VsbENvbnRyb2wgYXMgY29udHJcIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29udHJcIj5cbiAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJjb250ciEuc2hvdyAmJiAobm9kZS5yb3dzW3Jvdy0xXVtjb2x1bW5dfGFqZklzQ2VsbEVkaXRhYmxlKTsgZWxzZSBwbGFpblRleHRDZWxsXCJcbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImNvbnRyLnR5cGUgPT09ICdudW1iZXInO2Vsc2UgZ2VuZXJpY0lucHV0XCI+XG4gICAgICAgICAgICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgICAgICAgICAgICAoZm9jdXNvdXQpPVwiY29udHIhLnNob3cgPSBmYWxzZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtmb3JtQ29udHJvbF09XCJjb250ci5jb250cm9sXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIChrZXlkb3duLnRhYik9XCJnb1RvTmV4dENlbGwoJGV2ZW50LCByb3csIGNvbHVtbilcIlxuICAgICAgICAgICAgICAgICAgICAgICAgYXV0b2ZvY3VzXG4gICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjZ2VuZXJpY0lucHV0PlxuICAgICAgICAgICAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICAgICAgICAgICAgKGZvY3Vzb3V0KT1cImNvbnRyIS5zaG93ID0gZmFsc2VcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW3R5cGVdPVwiY29udHIudHlwZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHIuY29udHJvbFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAoa2V5ZG93bi50YWIpPVwiZ29Ub05leHRDZWxsKCRldmVudCwgcm93LCBjb2x1bW4pXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIGF1dG9mb2N1c1xuICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgICAgICAgICAgICAgPG5nLXRlbXBsYXRlICNwbGFpblRleHRDZWxsPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImFqZi10YWJsZS1jZWxsXCIgKGNsaWNrKT1cImdvVG9DZWxsKHJvdywgY29sdW1uKVwiXG4gICAgICAgICAgICAgICAgICAgICAgPnt7IGNvbnRyLmNvbnRyb2whLnZhbHVlIHwgYWpmVHJhbnNsYXRlSWZTdHJpbmcgfCBhamZGb3JtYXRJZk51bWJlcjogJy4wLTInXG4gICAgICAgICAgICAgICAgICAgICAgfX08L3NwYW5cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDwvdGQ+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC90cj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgPC9uZy1jb250YWluZXI+XG48L3RhYmxlPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtZmllbGQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC9mb3Jtcy9zcmMvdGFibGUtZmllbGQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC9mb3Jtcy9zcmMvdGFibGUtZmllbGQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQkc7QUFFSCxPQUFPLEVBQ0wseUJBQXlCLEVBRXpCLHNCQUFzQixJQUFJLHVCQUF1QixHQUNsRCxNQUFNLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULE1BQU0sRUFDTixpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFVdkIsTUFBTSxPQUFPLHNCQUF1QixTQUFRLHVCQUF1QjtJQUNqRSxZQUNFLEdBQXNCLEVBQ3RCLE9BQStCLEVBQ0ksR0FBMkI7UUFFOUQsS0FBSyxDQUFDLEdBQUcsRUFBRSxPQUFPLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDM0IsQ0FBQzsrR0FQVSxzQkFBc0IseUZBSXZCLHlCQUF5QjttR0FKeEIsc0JBQXNCLDJFQzNDbkMsaW1FQXlDUTs7NEZERUssc0JBQXNCO2tCQU5sQyxTQUFTO3NDQUdTLHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUk7OzBCQU1sQyxNQUFNOzJCQUFDLHlCQUF5QiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCAoQykgR251Y29vcCBzb2MuIGNvb3AuXG4gKlxuICogVGhpcyBmaWxlIGlzIHBhcnQgb2YgdGhlIEFkdmFuY2VkIEpTT04gZm9ybXMgKGFqZikuXG4gKlxuICogQWR2YW5jZWQgSlNPTiBmb3JtcyAoYWpmKSBpcyBmcmVlIHNvZnR3YXJlOiB5b3UgY2FuIHJlZGlzdHJpYnV0ZSBpdCBhbmQvb3JcbiAqIG1vZGlmeSBpdCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIEdOVSBBZmZlcm8gR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhc1xuICogcHVibGlzaGVkIGJ5IHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsXG4gKiBvciAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIEFkdmFuY2VkIEpTT04gZm9ybXMgKGFqZikgaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGUgR05VIEFmZmVyb1xuICogR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBmb3IgbW9yZSBkZXRhaWxzLlxuICpcbiAqIFlvdSBzaG91bGQgaGF2ZSByZWNlaXZlZCBhIGNvcHkgb2YgdGhlIEdOVSBBZmZlcm8gR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCBBZHZhbmNlZCBKU09OIGZvcm1zIChhamYpLlxuICogSWYgbm90LCBzZWUgaHR0cDovL3d3dy5nbnUub3JnL2xpY2Vuc2VzLy5cbiAqXG4gKi9cblxuaW1wb3J0IHtcbiAgQUpGX1dBUk5JTkdfQUxFUlRfU0VSVklDRSxcbiAgQWpmRm9ybVJlbmRlcmVyU2VydmljZSxcbiAgQWpmVGFibGVGaWVsZENvbXBvbmVudCBhcyBDb3JlVGFibGVGaWVsZENvbXBvbmVudCxcbn0gZnJvbSAnQGFqZi9jb3JlL2Zvcm1zJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBJbmplY3QsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHtBamZXYXJuaW5nQWxlcnRTZXJ2aWNlfSBmcm9tICcuL3dhcm5pbmctYWxlcnQtc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICB0ZW1wbGF0ZVVybDogJ3RhYmxlLWZpZWxkLmh0bWwnLFxuICBzdHlsZVVybHM6IFsndGFibGUtZmllbGQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgQWpmVGFibGVGaWVsZENvbXBvbmVudCBleHRlbmRzIENvcmVUYWJsZUZpZWxkQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IoXG4gICAgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBzZXJ2aWNlOiBBamZGb3JtUmVuZGVyZXJTZXJ2aWNlLFxuICAgIEBJbmplY3QoQUpGX1dBUk5JTkdfQUxFUlRfU0VSVklDRSkgd2FzOiBBamZXYXJuaW5nQWxlcnRTZXJ2aWNlLFxuICApIHtcbiAgICBzdXBlcihjZHIsIHNlcnZpY2UsIHdhcyk7XG4gIH1cbn1cbiIsIjx0YWJsZSAqbmdJZj1cImluc3RhbmNlXCIgY2xhc3M9XCJhamYtdGFibGUtZmllbGRcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImluc3RhbmNlLm5vZGUgYXMgbm9kZVwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGNvbHVtbnMgb2YgaW5zdGFuY2UuY29udHJvbHM7IGxldCByb3cgPSBpbmRleFwiPlxuICAgICAgPHRyIFtuZ0NsYXNzXT1cInJvdyB8IGFqZlRhYmxlUm93Q2xhc3NcIj5cbiAgICAgICAgPHRkPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjb2x1bW5zLmxlbmd0aCA+IDAgJiYgY29sdW1uc1swXVwiPlxuICAgICAgICAgICAge3sgY29sdW1uc1swXSB8IGFqZlRyYW5zbGF0ZUlmU3RyaW5nIHwgYWpmRm9ybWF0SWZOdW1iZXI6ICcuMC0yJyB9fVxuICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L3RkPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29sdW1ucy5sZW5ndGggPiAxXCI+XG4gICAgICAgICAgPHRkICpuZ0Zvcj1cImxldCBjIG9mIGNvbHVtbnNbMV07IGxldCBjb2x1bW4gPSBpbmRleFwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInJvdyA9PT0gMDsgZWxzZSBjb250cm9sQ2VsbFwiPlxuICAgICAgICAgICAgICB7eyBjIHwgYWpmVHJhbnNsYXRlSWZTdHJpbmcgfCBhamZGb3JtYXRJZk51bWJlcjogJy4wLTInIH19XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjY29udHJvbENlbGw+XG4gICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjfGFqZkdldFRhYmxlQ2VsbENvbnRyb2wgYXMgY29udHJcIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29udHJcIj5cbiAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjb250ciEuc2hvdyAmJiAobm9kZS5yb3dzW3Jvdy0xXVtjb2x1bW5dfGFqZklzQ2VsbEVkaXRhYmxlKTsgZWxzZSBwbGFpblRleHRDZWxsXCI+XG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjb250ci50eXBlID09PSAnbnVtYmVyJztlbHNlIGdlbmVyaWNJbnB1dFwiPlxuICAgICAgICAgICAgICAgICAgICAgIDxpbnB1dCAoZm9jdXNvdXQpPVwiY29udHIhLnNob3cgPSBmYWxzZVwiIHR5cGU9XCJudW1iZXJcIiBbZm9ybUNvbnRyb2xdPVwiY29udHIuY29udHJvbFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAoa2V5ZG93bi50YWIpPVwiZ29Ub05leHRDZWxsKCRldmVudCwgcm93LCBjb2x1bW4pXCIgYXV0b2ZvY3VzIC8+XG4gICAgICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgICAgICA8bmctdGVtcGxhdGUgI2dlbmVyaWNJbnB1dD5cbiAgICAgICAgICAgICAgICAgICAgICA8aW5wdXQgKGZvY3Vzb3V0KT1cImNvbnRyIS5zaG93ID0gZmFsc2VcIiBbdHlwZV09XCJjb250ci50eXBlXCIgW2Zvcm1Db250cm9sXT1cImNvbnRyLmNvbnRyb2xcIlxuICAgICAgICAgICAgICAgICAgICAgICAgKGtleWRvd24udGFiKT1cImdvVG9OZXh0Q2VsbCgkZXZlbnQsIHJvdywgY29sdW1uKVwiIGF1dG9mb2N1cyAvPlxuICAgICAgICAgICAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgICAgICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjcGxhaW5UZXh0Q2VsbD5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gKGNsaWNrKT1cImdvVG9DZWxsKHJvdywgY29sdW1uKVwiPnt7IGNvbnRyLmNvbnRyb2whLnZhbHVlIHxcbiAgICAgICAgICAgICAgICAgICAgICBhamZUcmFuc2xhdGVJZlN0cmluZyB8IGFqZkZvcm1hdElmTnVtYmVyOiAnLjAtMidcbiAgICAgICAgICAgICAgICAgICAgICB9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgICA8L3RkPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvdHI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuPC90YWJsZT4iXX0=