@ajf/material 13.1.0 → 13.1.3
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.
- package/checkbox-group/checkbox-group-item.d.ts +2 -2
- package/checkbox-group/checkbox-group-module.d.ts +3 -3
- package/esm2020/checkbox-group/checkbox-group-item.mjs +3 -3
- package/esm2020/checkbox-group/checkbox-group-module.mjs +6 -6
- package/esm2020/form-builder/form-builder-service.mjs +50 -49
- package/esm2020/form-builder/form-builder-utils.mjs +1 -1
- package/esm2020/form-builder/node-properties.mjs +52 -45
- package/esm2020/forms/field.mjs +5 -5
- package/esm2020/forms/form.mjs +5 -5
- package/esm2020/forms/forms-module.mjs +5 -5
- package/esm2020/forms/table-field.mjs +3 -3
- package/esm2020/image/image.mjs +3 -3
- package/esm2020/node-icon/node-icon.mjs +3 -3
- package/esm2020/page-slider/page-slider-module.mjs +6 -22
- package/esm2020/page-slider/page-slider.mjs +3 -3
- package/esm2020/reports/filter-widget.mjs +22 -1
- package/esm2020/reports/report.mjs +3 -3
- package/esm2020/reports/widget.mjs +5 -5
- package/fesm2015/ajf-material-checkbox-group.mjs +4 -4
- package/fesm2015/ajf-material-checkbox-group.mjs.map +1 -1
- package/fesm2015/ajf-material-form-builder.mjs +98 -90
- package/fesm2015/ajf-material-form-builder.mjs.map +1 -1
- package/fesm2015/ajf-material-forms.mjs +9 -9
- package/fesm2015/ajf-material-forms.mjs.map +1 -1
- package/fesm2015/ajf-material-image.mjs.map +1 -1
- package/fesm2015/ajf-material-node-icon.mjs.map +1 -1
- package/fesm2015/ajf-material-page-slider.mjs +3 -19
- package/fesm2015/ajf-material-page-slider.mjs.map +1 -1
- package/fesm2015/ajf-material-reports.mjs +25 -4
- package/fesm2015/ajf-material-reports.mjs.map +1 -1
- package/fesm2020/ajf-material-checkbox-group.mjs +4 -4
- package/fesm2020/ajf-material-checkbox-group.mjs.map +1 -1
- package/fesm2020/ajf-material-form-builder.mjs +98 -90
- package/fesm2020/ajf-material-form-builder.mjs.map +1 -1
- package/fesm2020/ajf-material-forms.mjs +9 -9
- package/fesm2020/ajf-material-forms.mjs.map +1 -1
- package/fesm2020/ajf-material-image.mjs.map +1 -1
- package/fesm2020/ajf-material-node-icon.mjs.map +1 -1
- package/fesm2020/ajf-material-page-slider.mjs +3 -19
- package/fesm2020/ajf-material-page-slider.mjs.map +1 -1
- package/fesm2020/ajf-material-reports.mjs +25 -4
- package/fesm2020/ajf-material-reports.mjs.map +1 -1
- package/form-builder/node-properties.d.ts +5 -4
- package/forms/field.d.ts +2 -2
- package/forms/form.d.ts +2 -2
- package/forms/forms-module.d.ts +7 -7
- package/forms/table-field.d.ts +2 -2
- package/image/image.d.ts +2 -2
- package/node-icon/node-icon.d.ts +2 -2
- package/package.json +2 -2
- package/page-slider/page-slider-module.d.ts +3 -3
- package/page-slider/page-slider.d.ts +2 -2
- package/reports/filter-widget.d.ts +21 -0
- package/reports/report.d.ts +2 -2
- package/reports/widget.d.ts +2 -2
|
@@ -754,17 +754,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
|
|
|
754
754
|
*
|
|
755
755
|
*/
|
|
756
756
|
class AjfFormField extends AjfFormField$1 {
|
|
757
|
-
constructor(cdr,
|
|
758
|
-
super(cdr
|
|
757
|
+
constructor(cdr, fieldService) {
|
|
758
|
+
super(cdr);
|
|
759
759
|
this.componentsMap = fieldService.componentsMap;
|
|
760
760
|
}
|
|
761
761
|
}
|
|
762
|
-
AjfFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AjfFormField, deps: [{ token: i0.ChangeDetectorRef }, { token:
|
|
762
|
+
AjfFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AjfFormField, deps: [{ token: i0.ChangeDetectorRef }, { token: AjfFieldService }], target: i0.ɵɵFactoryTarget.Component });
|
|
763
763
|
AjfFormField.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", 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>\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-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;top:0;right:0;bottom:0;left: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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.AjfFieldHost, selector: "[ajf-field-host]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "ajfNodeCompleteName": i1$1.AjfNodeCompleteNamePipe, "ajfFieldIsValid": i1$1.AjfFieldIsValidPipe, "transloco": i3$1.TranslocoPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
764
764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AjfFormField, decorators: [{
|
|
765
765
|
type: Component,
|
|
766
766
|
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>\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-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;top:0;right:0;bottom:0;left: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"] }]
|
|
767
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type:
|
|
767
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AjfFieldService }]; } });
|
|
768
768
|
|
|
769
769
|
/**
|
|
770
770
|
* @license
|
|
@@ -794,10 +794,10 @@ class AjfFormRenderer extends AjfFormRenderer$1 {
|
|
|
794
794
|
}
|
|
795
795
|
}
|
|
796
796
|
AjfFormRenderer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AjfFormRenderer, deps: [{ token: i1$1.AjfFormRendererService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
797
|
-
AjfFormRenderer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: AjfFormRenderer, selector: "ajf-form", inputs: { topBar: "topBar" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroup|async as fg\">\n <form 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 *ngFor=\"let slideInstance of (slides|async); trackBy: trackNodeById\">\n <mat-button-toggle\n *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n class=\"ajf-topbar-button\"\n (click)=\"scrollToSlide(slideInstance)\"\n >\n {{slideInstance.node.label | transloco}}\n <mat-icon *ngIf=\"!slideInstance.valid\" class=\"ajf-warning\">warning</mat-icon>\n <mat-icon *ngIf=\"slideInstance.valid\" class=\"ajf-success\">check</mat-icon>\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\n ><ng-content select=\"[ajfFormSaveButton]\"></ng-content\n ></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>\n <mat-card-header>\n <div class=\"ajf-page-slider-item-header\">\n <h2>\n <span class=\"ajf-form-header-number\"> 1 → </span>\n <span class=\"ajf-title\">\n <ng-content\n select=\"[ajfFormStartMessageTitle]\"\n ></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\n *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\"\n >\n <!-- non repeating slides -->\n <ng-container *ngIf=\"slideInstance.visible\">\n <ng-container\n *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\"\n >\n <ajf-page-slider-item>\n <div class=\"ajf-form-page\">\n <mat-card>\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 |\n ajfBoolToInt) }} →</span\n >\n <span\n [innerHTML]=\"slideInstance.node.label | transloco\"\n ></span>\n </h2>\n <mat-icon\n class=\"ajf-warning\"\n *ngIf=\"!slideInstance.valid\"\n >warning</mat-icon\n >\n <mat-icon\n class=\"ajf-success\"\n *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 <div\n [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size\"\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 {{\n ((fieldInstance|ajfAsFieldInstance).node.description\n || '') | transloco }}\n </p>\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-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 >\n <ajf-field\n [instance]=\"fieldInstance|ajfAsFieldInstance\"\n [readonly]=\"readonly || !slideInstance.editable\"\n >\n </ajf-field>\n </div>\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\n *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\"\n >\n <ajf-page-slider-item\n *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n >\n <div class=\"ajf-form-page\">\n <mat-card>\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 +\n (hasStartMessage | ajfBoolToInt) }} →</span\n >\n <span\n [innerHTML]=\"slideInstance.node.label | transloco\"\n ></span>\n </h2>\n <mat-icon\n class=\"ajf-warning\"\n *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n >warning</mat-icon\n >\n <mat-icon\n class=\"ajf-success\"\n *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n >check</mat-icon\n >\n </div>\n </mat-card-header>\n <mat-card-content>\n <div\n *ngIf=\"lastSlide && !readonly\"\n class=\"ajf-group-actions\"\n >\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 <div\n [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size\"\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 {{\n ((fieldInstance|ajfAsFieldInstance).node.description\n || '') | transloco }}\n </p>\n <label\n [attr.id]=\"fieldInstance.node.name\"\n [innerHTML]=\"fieldInstance.node.label | transloco\"\n ></label>\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 >\n <ajf-field\n [instance]=\"fieldInstance|ajfAsFieldInstance\"\n [readonly]=\"readonly || (!lastSlide && (slideInstance|ajfAsRepeatingSlideInstance).node?.disableRemoval)\"\n >\n </ajf-field>\n </div>\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\n *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\"\n >\n <ajf-page-slider-item>\n <div class=\"ajf-form-page\">\n <mat-card>\n <mat-card-header>\n <div class=\"ajf-page-slider-item-header\">\n <h2>\n <span\n *ngIf=\"(slidesNum|async) as snum\"\n class=\"ajf-form-header-number\"\n >\n {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }}\n →\n </span>\n <span class=\"ajf-title\">\n <ng-content\n select=\"[ajfFormEndMessageTitle]\"\n ></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\">\n {{ errors | async }} / {{ slidesNum|async }}\n </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-container{display:flex;flex-direction:column;position:absolute;top:0;right:0;bottom:0;left: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{flex:1 0 auto;padding-left:10px;padding-right:10px;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 .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-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-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"], components: [{ type: i2$9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i4$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.AjfPageSlider, selector: "ajf-page-slider" }, { type: i7$1.AjfPageSliderItem, selector: "ajf-page-slider-item", outputs: ["scroll"] }, { type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i8.MatCardHeader, selector: "mat-card-header" }, { type: AjfFormField, selector: "ajf-field,ajf-form-field" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i3.AsyncPipe, "transloco": i3$1.TranslocoPipe, "ajfIsRepeatingSlideInstance": i1$1.AjfIsRepeatingSlideInstancePipe, "ajfBoolToInt": i1$1.AjfBoolToIntPipe, "ajfAsFieldInstance": i1$1.AjfAsFieldInstancePipe, "ajfFieldIcon": i1$1.AjfFieldIconPipe, "ajfRange": i1$1.AjfRangePipe, "ajfAsRepeatingSlideInstance": i1$1.AjfAsRepeatingSlideInstancePipe, "ajfIncrement": i1$1.AjfIncrementPipe, "ajfValidSlide": i1$1.AjfValidSlidePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
797
|
+
AjfFormRenderer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: AjfFormRenderer, selector: "ajf-form", inputs: { topBar: "topBar" }, 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 *ngFor=\"let slideInstance of (slides|async); trackBy: trackNodeById\">\n <mat-button-toggle\n *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n class=\"ajf-topbar-button\"\n (click)=\"scrollToSlide(slideInstance)\"\n >\n {{slideInstance.node.label | transloco}}\n <mat-icon *ngIf=\"!slideInstance.valid\" class=\"ajf-warning\">warning</mat-icon>\n <mat-icon *ngIf=\"slideInstance.valid\" class=\"ajf-success\">check</mat-icon>\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\n ><ng-content select=\"[ajfFormSaveButton]\"></ng-content\n ></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>\n <mat-card-header>\n <div class=\"ajf-page-slider-item-header\">\n <h2>\n <span class=\"ajf-form-header-number\"> 1 → </span>\n <span class=\"ajf-title\">\n <ng-content\n select=\"[ajfFormStartMessageTitle]\"\n ></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\n *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\"\n >\n <!-- non repeating slides -->\n <ng-container *ngIf=\"slideInstance.visible\">\n <ng-container\n *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\"\n >\n <ajf-page-slider-item>\n <div class=\"ajf-form-page\">\n <mat-card>\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 |\n ajfBoolToInt) }} →</span\n >\n <span\n [innerHTML]=\"slideInstance.node.label | transloco\"\n ></span>\n </h2>\n <mat-icon\n class=\"ajf-warning\"\n *ngIf=\"!slideInstance.valid\"\n >warning</mat-icon\n >\n <mat-icon\n class=\"ajf-success\"\n *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 <div\n [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size\"\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 {{\n ((fieldInstance|ajfAsFieldInstance).node.description\n || '') | transloco }}\n </p>\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-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 >\n <ajf-field\n [instance]=\"fieldInstance|ajfAsFieldInstance\"\n [readonly]=\"readonly || !slideInstance.editable\"\n >\n </ajf-field>\n </div>\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\n *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\"\n >\n <ajf-page-slider-item\n *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n >\n <div class=\"ajf-form-page\">\n <mat-card>\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 +\n (hasStartMessage | ajfBoolToInt) }} →</span\n >\n <span\n [innerHTML]=\"slideInstance.node.label | transloco\"\n ></span>\n </h2>\n <mat-icon\n class=\"ajf-warning\"\n *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n >warning</mat-icon\n >\n <mat-icon\n class=\"ajf-success\"\n *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n >check</mat-icon\n >\n </div>\n </mat-card-header>\n <mat-card-content>\n <div\n *ngIf=\"lastSlide && !readonly\"\n class=\"ajf-group-actions\"\n >\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 <div\n [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size\"\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 {{\n ((fieldInstance|ajfAsFieldInstance).node.description\n || '') | transloco }}\n </p>\n <label\n [attr.id]=\"fieldInstance.node.name\"\n [innerHTML]=\"fieldInstance.node.label | transloco\"\n ></label>\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 >\n <ajf-field\n [instance]=\"fieldInstance|ajfAsFieldInstance\"\n [readonly]=\"readonly || (!lastSlide && (slideInstance|ajfAsRepeatingSlideInstance).node?.disableRemoval)\"\n >\n </ajf-field>\n </div>\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\n *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\"\n >\n <ajf-page-slider-item>\n <div class=\"ajf-form-page\">\n <mat-card>\n <mat-card-header>\n <div class=\"ajf-page-slider-item-header\">\n <h2>\n <span\n *ngIf=\"(slidesNum|async) as snum\"\n class=\"ajf-form-header-number\"\n >\n {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }}\n →\n </span>\n <span class=\"ajf-title\">\n <ng-content\n select=\"[ajfFormEndMessageTitle]\"\n ></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\">\n {{ errors | async }} / {{ slidesNum|async }}\n </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;top:0;right:0;bottom:0;left: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{flex:1 0 auto;padding-left:10px;padding-right:10px;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 .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-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-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"], components: [{ type: i2$9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3$4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i4$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.AjfPageSlider, selector: "ajf-page-slider" }, { type: i7$1.AjfPageSliderItem, selector: "ajf-page-slider-item", outputs: ["scroll"] }, { type: i8.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i8.MatCardHeader, selector: "mat-card-header" }, { type: AjfFormField, selector: "ajf-field,ajf-form-field" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i3.AsyncPipe, "transloco": i3$1.TranslocoPipe, "ajfIsRepeatingSlideInstance": i1$1.AjfIsRepeatingSlideInstancePipe, "ajfBoolToInt": i1$1.AjfBoolToIntPipe, "ajfAsFieldInstance": i1$1.AjfAsFieldInstancePipe, "ajfFieldIcon": i1$1.AjfFieldIconPipe, "ajfRange": i1$1.AjfRangePipe, "ajfAsRepeatingSlideInstance": i1$1.AjfAsRepeatingSlideInstancePipe, "ajfIncrement": i1$1.AjfIncrementPipe, "ajfValidSlide": i1$1.AjfValidSlidePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
798
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: AjfFormRenderer, decorators: [{
|
|
799
799
|
type: Component,
|
|
800
|
-
args: [{ selector: 'ajf-form', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"formGroup|async as fg\">\n <form 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 *ngFor=\"let slideInstance of (slides|async); trackBy: trackNodeById\">\n <mat-button-toggle\n *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n class=\"ajf-topbar-button\"\n (click)=\"scrollToSlide(slideInstance)\"\n >\n {{slideInstance.node.label | transloco}}\n <mat-icon *ngIf=\"!slideInstance.valid\" class=\"ajf-warning\">warning</mat-icon>\n <mat-icon *ngIf=\"slideInstance.valid\" class=\"ajf-success\">check</mat-icon>\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\n ><ng-content select=\"[ajfFormSaveButton]\"></ng-content\n ></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>\n <mat-card-header>\n <div class=\"ajf-page-slider-item-header\">\n <h2>\n <span class=\"ajf-form-header-number\"> 1 → </span>\n <span class=\"ajf-title\">\n <ng-content\n select=\"[ajfFormStartMessageTitle]\"\n ></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\n *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\"\n >\n <!-- non repeating slides -->\n <ng-container *ngIf=\"slideInstance.visible\">\n <ng-container\n *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\"\n >\n <ajf-page-slider-item>\n <div class=\"ajf-form-page\">\n <mat-card>\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 |\n ajfBoolToInt) }} →</span\n >\n <span\n [innerHTML]=\"slideInstance.node.label | transloco\"\n ></span>\n </h2>\n <mat-icon\n class=\"ajf-warning\"\n *ngIf=\"!slideInstance.valid\"\n >warning</mat-icon\n >\n <mat-icon\n class=\"ajf-success\"\n *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 <div\n [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size\"\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 {{\n ((fieldInstance|ajfAsFieldInstance).node.description\n || '') | transloco }}\n </p>\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-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 >\n <ajf-field\n [instance]=\"fieldInstance|ajfAsFieldInstance\"\n [readonly]=\"readonly || !slideInstance.editable\"\n >\n </ajf-field>\n </div>\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\n *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\"\n >\n <ajf-page-slider-item\n *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n >\n <div class=\"ajf-form-page\">\n <mat-card>\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 +\n (hasStartMessage | ajfBoolToInt) }} →</span\n >\n <span\n [innerHTML]=\"slideInstance.node.label | transloco\"\n ></span>\n </h2>\n <mat-icon\n class=\"ajf-warning\"\n *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n >warning</mat-icon\n >\n <mat-icon\n class=\"ajf-success\"\n *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n >check</mat-icon\n >\n </div>\n </mat-card-header>\n <mat-card-content>\n <div\n *ngIf=\"lastSlide && !readonly\"\n class=\"ajf-group-actions\"\n >\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 <div\n [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size\"\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 {{\n ((fieldInstance|ajfAsFieldInstance).node.description\n || '') | transloco }}\n </p>\n <label\n [attr.id]=\"fieldInstance.node.name\"\n [innerHTML]=\"fieldInstance.node.label | transloco\"\n ></label>\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 >\n <ajf-field\n [instance]=\"fieldInstance|ajfAsFieldInstance\"\n [readonly]=\"readonly || (!lastSlide && (slideInstance|ajfAsRepeatingSlideInstance).node?.disableRemoval)\"\n >\n </ajf-field>\n </div>\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\n *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\"\n >\n <ajf-page-slider-item>\n <div class=\"ajf-form-page\">\n <mat-card>\n <mat-card-header>\n <div class=\"ajf-page-slider-item-header\">\n <h2>\n <span\n *ngIf=\"(slidesNum|async) as snum\"\n class=\"ajf-form-header-number\"\n >\n {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }}\n →\n </span>\n <span class=\"ajf-title\">\n <ng-content\n select=\"[ajfFormEndMessageTitle]\"\n ></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\">\n {{ errors | async }} / {{ slidesNum|async }}\n </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-container{display:flex;flex-direction:column;position:absolute;top:0;right:0;bottom:0;left: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{flex:1 0 auto;padding-left:10px;padding-right:10px;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 .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-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-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"] }]
|
|
800
|
+
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 *ngFor=\"let slideInstance of (slides|async); trackBy: trackNodeById\">\n <mat-button-toggle\n *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n class=\"ajf-topbar-button\"\n (click)=\"scrollToSlide(slideInstance)\"\n >\n {{slideInstance.node.label | transloco}}\n <mat-icon *ngIf=\"!slideInstance.valid\" class=\"ajf-warning\">warning</mat-icon>\n <mat-icon *ngIf=\"slideInstance.valid\" class=\"ajf-success\">check</mat-icon>\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\n ><ng-content select=\"[ajfFormSaveButton]\"></ng-content\n ></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>\n <mat-card-header>\n <div class=\"ajf-page-slider-item-header\">\n <h2>\n <span class=\"ajf-form-header-number\"> 1 → </span>\n <span class=\"ajf-title\">\n <ng-content\n select=\"[ajfFormStartMessageTitle]\"\n ></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\n *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\"\n >\n <!-- non repeating slides -->\n <ng-container *ngIf=\"slideInstance.visible\">\n <ng-container\n *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\"\n >\n <ajf-page-slider-item>\n <div class=\"ajf-form-page\">\n <mat-card>\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 |\n ajfBoolToInt) }} →</span\n >\n <span\n [innerHTML]=\"slideInstance.node.label | transloco\"\n ></span>\n </h2>\n <mat-icon\n class=\"ajf-warning\"\n *ngIf=\"!slideInstance.valid\"\n >warning</mat-icon\n >\n <mat-icon\n class=\"ajf-success\"\n *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 <div\n [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size\"\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 {{\n ((fieldInstance|ajfAsFieldInstance).node.description\n || '') | transloco }}\n </p>\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-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 >\n <ajf-field\n [instance]=\"fieldInstance|ajfAsFieldInstance\"\n [readonly]=\"readonly || !slideInstance.editable\"\n >\n </ajf-field>\n </div>\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\n *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\"\n >\n <ajf-page-slider-item\n *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n >\n <div class=\"ajf-form-page\">\n <mat-card>\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 +\n (hasStartMessage | ajfBoolToInt) }} →</span\n >\n <span\n [innerHTML]=\"slideInstance.node.label | transloco\"\n ></span>\n </h2>\n <mat-icon\n class=\"ajf-warning\"\n *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n >warning</mat-icon\n >\n <mat-icon\n class=\"ajf-success\"\n *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n >check</mat-icon\n >\n </div>\n </mat-card-header>\n <mat-card-content>\n <div\n *ngIf=\"lastSlide && !readonly\"\n class=\"ajf-group-actions\"\n >\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 <div\n [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size\"\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 {{\n ((fieldInstance|ajfAsFieldInstance).node.description\n || '') | transloco }}\n </p>\n <label\n [attr.id]=\"fieldInstance.node.name\"\n [innerHTML]=\"fieldInstance.node.label | transloco\"\n ></label>\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 >\n <ajf-field\n [instance]=\"fieldInstance|ajfAsFieldInstance\"\n [readonly]=\"readonly || (!lastSlide && (slideInstance|ajfAsRepeatingSlideInstance).node?.disableRemoval)\"\n >\n </ajf-field>\n </div>\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\n *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\"\n >\n <ajf-page-slider-item>\n <div class=\"ajf-form-page\">\n <mat-card>\n <mat-card-header>\n <div class=\"ajf-page-slider-item-header\">\n <h2>\n <span\n *ngIf=\"(slidesNum|async) as snum\"\n class=\"ajf-form-header-number\"\n >\n {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }}\n →\n </span>\n <span class=\"ajf-title\">\n <ng-content\n select=\"[ajfFormEndMessageTitle]\"\n ></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\">\n {{ errors | async }} / {{ slidesNum|async }}\n </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;top:0;right:0;bottom:0;left: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{flex:1 0 auto;padding-left:10px;padding-right:10px;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 .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-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-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"] }]
|
|
801
801
|
}], ctorParameters: function () { return [{ type: i1$1.AjfFormRendererService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { topBar: [{
|
|
802
802
|
type: Input
|
|
803
803
|
}] } });
|
|
@@ -850,12 +850,12 @@ AjfFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
850
850
|
AjfVideoUrlFieldComponent], imports: [AjfBarcodeModule,
|
|
851
851
|
AjfCalendarModule,
|
|
852
852
|
AjfCommonModule,
|
|
853
|
-
AjfFormsModule$1,
|
|
854
853
|
AjfCheckboxGroupModule,
|
|
855
854
|
AjfPageSliderModule,
|
|
856
855
|
AjfTimeModule,
|
|
857
856
|
AjfTranslocoModule,
|
|
858
857
|
CommonModule,
|
|
858
|
+
AjfFormsModule$1,
|
|
859
859
|
MatButtonModule,
|
|
860
860
|
MatButtonToggleModule,
|
|
861
861
|
MatCardModule,
|
|
@@ -878,12 +878,12 @@ AjfFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
878
878
|
AjfBarcodeModule,
|
|
879
879
|
AjfCalendarModule,
|
|
880
880
|
AjfCommonModule,
|
|
881
|
-
AjfFormsModule$1,
|
|
882
881
|
AjfCheckboxGroupModule,
|
|
883
882
|
AjfPageSliderModule,
|
|
884
883
|
AjfTimeModule,
|
|
885
884
|
AjfTranslocoModule,
|
|
886
885
|
CommonModule,
|
|
886
|
+
AjfFormsModule$1,
|
|
887
887
|
MatButtonModule,
|
|
888
888
|
MatButtonToggleModule,
|
|
889
889
|
MatCardModule,
|
|
@@ -907,12 +907,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImpor
|
|
|
907
907
|
AjfBarcodeModule,
|
|
908
908
|
AjfCalendarModule,
|
|
909
909
|
AjfCommonModule,
|
|
910
|
-
AjfFormsModule$1,
|
|
911
910
|
AjfCheckboxGroupModule,
|
|
912
911
|
AjfPageSliderModule,
|
|
913
912
|
AjfTimeModule,
|
|
914
913
|
AjfTranslocoModule,
|
|
915
914
|
CommonModule,
|
|
915
|
+
AjfFormsModule$1,
|
|
916
916
|
MatButtonModule,
|
|
917
917
|
MatButtonToggleModule,
|
|
918
918
|
MatCardModule,
|