@solidev/data 0.8.2 → 0.8.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.
@@ -4642,7 +4642,7 @@ class DispeditComponent {
4642
4642
  }
4643
4643
  _setDisplayClasses() { }
4644
4644
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DispeditComponent, deps: [{ token: DATA_DISPLAY_CONFIG, optional: true }, { token: DataMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
4645
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: DispeditComponent, isStandalone: true, selector: "data-dispedit", inputs: { model: "model", field: "field", form: "form", edit: "edit", editable: "editable", mode: "mode", choices: "choices", inputClasses: "inputClasses", editor: "editor", viewer: "viewer", default: "default", placeholder: "placeholder", help: "help", hideLabel: "hideLabel", queryset: "queryset", collection: "collection", display: "display", filter: "filter" }, outputs: { changed: "changed" }, usesOnChanges: true, ngImport: i0, template: "<ng-template #titleTpl>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- TEMPLATE affichage -->\n<ng-template #dispTpl>\n @switch (realDisplay) {\n @case (\"text\") {\n <span class=\"editable disp-text\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"choice\") {\n <span class=\"editable disp-choice\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"decimal\") {\n <span class=\"editable disp-decimal\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"boolean\") {\n <span class=\"editable disp-boolean\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"fkdetails\") {\n <span class=\"editable disp-fkdetails\" (click)=\"enableEditMode()\">\n <div class=\"fkitem\">{{ txtValue }}</div></span\n >\n }\n @case (\"m2mdetails\") {\n <span class=\"editable disp-m2mdetails\" (click)=\"enableEditMode()\">\n @for (v of txtValues; track v) {\n <div class=\"m2mitem\">{{ v }}</div>\n }\n </span>\n }\n @case (\"datetime\") {\n <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n @if (dispValue) {\n {{ txtValue | date: \"short\" }}\n }\n @if (!dispValue) {\n {{ txtValue }}\n }\n </span>\n }\n @case (\"date\") {\n <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n @if (dispValue) {\n {{ txtValue | date: \"shortDate\" }}\n }\n @if (!dispValue) {\n {{ txtValue }}\n }\n </span>\n }\n }\n</ng-template>\n\n<!-- TEMPLATE \u00E9dition -->\n<ng-template #editTpl let-form=\"form\">\n @switch (realEditor) {\n @case (\"input.text\") {\n <input\n type=\"text\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.email\") {\n <input\n type=\"email\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['email']\"\n >\n Format d'email invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.password\") {\n <input\n type=\"password\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.datetime\") {\n <input\n type=\"datetime-local\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n (keyup.enter)=\"update()\"\n />\n <div class=\"form-text\">{{ realHelp }}</div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minDate']\"\n >\n Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager).min | date: \"short\" }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxDate']\"\n >\n Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager).max | date: \"short\" }}...\n </div>\n }\n @case (\"input.date\") {\n <input\n type=\"date\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n (keyup.enter)=\"update()\"\n />\n <div class=\"form-text\">{{ realHelp }}</div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minDate']\"\n >\n Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager).min | date: \"short\" }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxDate']\"\n >\n Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager).max | date: \"short\" }}...\n </div>\n }\n @case (\"input.number\") {\n <input\n type=\"number\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['min']\"\n >\n Trop petit : minimum {{ $any(manager).min }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['max']\"\n >\n Trop grand : maximum {{ $any(manager).max }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.decimal\") {\n <input\n type=\"number\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['min']\"\n >\n Trop petit : minimum {{ $any(manager).min }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['max']\"\n >\n Trop grand : maximum {{ $any(manager).max }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.checkbox\") {\n <div class=\"btn-group btn-group-sm\" role=\"group\">\n <button\n type=\"button\"\n [class]=\"form.get(field)?.value ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n (click)=\"form.get(field)?.setValue(true); update()\"\n (keyup.escape)=\"unsetEdit()\"\n >\n Oui\n </button>\n <button\n type=\"button\"\n [class]=\"!form.get(field)?.value ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n (click)=\"form.get(field)?.setValue(false); update()\"\n (keyup.escape)=\"unsetEdit()\"\n >\n Non\n </button>\n </div>\n <div class=\"form-text\">{{ realHelp }}</div>\n }\n @case (\"textarea\") {\n <textarea\n [formControl]=\"form.get(field)\"\n (keyup.escape)=\"unsetEdit()\"\n [ngClass]=\"inputClasses\"\n (keyup.control.enter)=\"update()\"\n [placeholder]=\"realPlaceholder\"\n ></textarea>\n @if (mode === \"dd\") {\n <button\n class=\"btn btn-sm btn-link w-100 dispedit-text-update-button\"\n (click)=\"update()\"\n >\n <i class=\"bi bi-save\"></i>\n </button>\n }\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"fkselect\") {\n <data-fkselect\n [collection]=\"collection\"\n [filter]=\"filter\"\n [display]=\"display\"\n (selected)=\"selectedRefItem($event)\"\n [placeholder]=\"placeholder\"\n (cancelled)=\"unsetEdit()\"\n (cleared)=\"selectedRefItem(null)\"\n ></data-fkselect>\n }\n @case (\"m2mselect\") {\n <data-m2mselect\n [collection]=\"collection\"\n [filter]=\"filter\"\n (changed)=\"update()\"\n [formControl]=\"form.get(field)\"\n (detailsChanged)=\"onM2MValuesChanges($event)\"\n [model]=\"model\"\n [field]=\"field\"\n [placeholder]=\"placeholder\"\n ></data-m2mselect>\n }\n @case (\"select\") {\n <select\n [formControl]=\"form.get(field)\"\n (keyup.escape)=\"unsetEdit()\"\n (change)=\"update()\"\n [ngClass]=\"inputClasses\"\n >\n @for (c of realChoices; track c) {\n <option [ngValue]=\"c.value !== undefined ? c.value : c\">\n {{ c.desc ? c.desc : c }}\n </option>\n }\n </select>\n <div class=\"form-text\">{{ realHelp }}</div>\n }\n }\n</ng-template>\n<!-- Disp/edit toggler-->\n<ng-template #dispeditTpl>\n @if (!edit) {\n <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n }\n @if (edit) {\n @if (fg) {\n <form [formGroup]=\"fg\" (submit)=\"update()\">\n <ng-container\n *ngTemplateOutlet=\"editTpl; context: { form: fg }\"\n ></ng-container>\n </form>\n }\n }\n</ng-template>\n<!-- DispEdit noform-->\n<ng-template #dispeditFormTpl>\n @if (!edit) {\n <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n }\n @if (edit) {\n @if (form) {\n <ng-container\n *ngTemplateOutlet=\"editTpl; context: { form: form }\"\n ></ng-container>\n }\n }\n</ng-template>\n<!-- Dd display-->\n@if (mode === \"dd\") {\n @if (!hideLabel) {\n <dt [class.required]=\"required\">\n <span class=\"editable\" (click)=\"toggleEdit()\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container\n ></span>\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n </dt>\n }\n <dd [class.mb-0]=\"hideLabel\">\n <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n </dd>\n}\n<!-- Inline display-->\n@if (mode === \"inline\") {\n @if (!hideLabel) {\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n <label [class.required]=\"required\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </label>\n }\n <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n}\n<!-- Form display-->\n@if (mode === \"form\") {\n @if (!hideLabel) {\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n <label [class.required]=\"required\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </label>\n }\n <ng-container *ngTemplateOutlet=\"dispeditFormTpl\"></ng-container>\n}\n", styles: [".editable{cursor:pointer}form.inline{display:inline-block}.required{font-weight:700}.required:after{content:\" (*)\"}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FkselectComponent, selector: "data-fkselect", inputs: ["model", "field", "edit", "value", "queryset", "collection", "update", "filter", "mode", "display", "search", "label", "placeholder", "inputClasses"], outputs: ["selected", "cancelled", "cleared"] }, { kind: "component", type: M2mselectComponent, selector: "data-m2mselect", inputs: ["model", "field", "edit", "values", "queryset", "collection", "filter", "mode", "display", "search", "label", "placeholder", "emptyLabel", "inputClasses"], outputs: ["added", "removed", "cancelled", "cleared", "detailsChanged", "changed"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
4645
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: DispeditComponent, isStandalone: true, selector: "data-dispedit", inputs: { model: "model", field: "field", form: "form", edit: "edit", editable: "editable", mode: "mode", choices: "choices", inputClasses: "inputClasses", editor: "editor", viewer: "viewer", default: "default", placeholder: "placeholder", help: "help", hideLabel: "hideLabel", queryset: "queryset", collection: "collection", display: "display", filter: "filter" }, outputs: { changed: "changed" }, usesOnChanges: true, ngImport: i0, template: "<ng-template #titleTpl>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- TEMPLATE affichage -->\n<ng-template #dispTpl>\n @switch (realDisplay) {\n @case (\"text\") {\n <span class=\"editable disp-text\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"choice\") {\n <span class=\"editable disp-choice\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"decimal\") {\n <span class=\"editable disp-decimal\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"boolean\") {\n <span class=\"editable disp-boolean\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"fkdetails\") {\n <span class=\"editable disp-fkdetails\" (click)=\"enableEditMode()\">\n <div class=\"fkitem\">{{ txtValue }}</div></span\n >\n }\n @case (\"m2mdetails\") {\n <span class=\"editable disp-m2mdetails\" (click)=\"enableEditMode()\">\n @for (v of txtValues; track v) {\n <div class=\"m2mitem\">{{ v }}</div>\n }\n </span>\n }\n @case (\"datetime\") {\n <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n @if (dispValue) {\n {{ txtValue | date: \"short\" }}\n }\n @if (!dispValue) {\n {{ txtValue }}\n }\n </span>\n }\n @case (\"date\") {\n <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n @if (dispValue) {\n {{ txtValue | date: \"shortDate\" }}\n }\n @if (!dispValue) {\n {{ txtValue }}\n }\n </span>\n }\n }\n</ng-template>\n\n<!-- TEMPLATE \u00E9dition -->\n<ng-template #editTpl let-form=\"form\">\n @switch (realEditor) {\n @case (\"input.text\") {\n <input\n type=\"text\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.email\") {\n <input\n type=\"email\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['email']\"\n >\n Format d'email invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.password\") {\n <input\n type=\"password\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.datetime\") {\n <input\n type=\"datetime-local\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n (keyup.enter)=\"update()\"\n />\n <div class=\"form-text\">{{ realHelp }}</div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minDate']\"\n >\n Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager).min | date: \"short\" }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxDate']\"\n >\n Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager).max | date: \"short\" }}...\n </div>\n }\n @case (\"input.date\") {\n <input\n type=\"date\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n (keyup.enter)=\"update()\"\n />\n <div class=\"form-text\">{{ realHelp }}</div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minDate']\"\n >\n Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager).min | date: \"short\" }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxDate']\"\n >\n Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager).max | date: \"short\" }}...\n </div>\n }\n @case (\"input.number\") {\n <input\n type=\"number\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['min']\"\n >\n Trop petit : minimum {{ $any(manager).min }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['max']\"\n >\n Trop grand : maximum {{ $any(manager).max }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.decimal\") {\n <input\n type=\"number\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['min']\"\n >\n Trop petit : minimum {{ $any(manager).min }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['max']\"\n >\n Trop grand : maximum {{ $any(manager).max }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.checkbox\") {\n @let v = $any(this.model)[this.field];\n <div class=\"btn-group btn-group-sm\" role=\"group\">\n <button\n type=\"button\"\n [class]=\"v===true ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n (click)=\"form.get(field)?.setValue(true); update()\"\n (keyup.escape)=\"unsetEdit()\"\n >\n Oui\n </button>\n <button\n type=\"button\"\n [class]=\"v===false ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n (click)=\"form.get(field)?.setValue(false); update()\"\n (keyup.escape)=\"unsetEdit()\"\n >\n Non\n </button>\n </div>\n <div class=\"form-text\">{{ realHelp }}</div>\n }\n @case (\"textarea\") {\n <textarea\n [formControl]=\"form.get(field)\"\n (keyup.escape)=\"unsetEdit()\"\n [ngClass]=\"inputClasses\"\n (keyup.control.enter)=\"update()\"\n [placeholder]=\"realPlaceholder\"\n ></textarea>\n @if (mode === \"dd\") {\n <button\n class=\"btn btn-sm btn-link w-100 dispedit-text-update-button\"\n (click)=\"update()\"\n >\n <i class=\"bi bi-save\"></i>\n </button>\n }\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"fkselect\") {\n <data-fkselect\n [collection]=\"collection\"\n [filter]=\"filter\"\n [display]=\"display\"\n (selected)=\"selectedRefItem($event)\"\n [placeholder]=\"placeholder\"\n (cancelled)=\"unsetEdit()\"\n (cleared)=\"selectedRefItem(null)\"\n ></data-fkselect>\n }\n @case (\"m2mselect\") {\n <data-m2mselect\n [collection]=\"collection\"\n [filter]=\"filter\"\n (changed)=\"update()\"\n [formControl]=\"form.get(field)\"\n (detailsChanged)=\"onM2MValuesChanges($event)\"\n [model]=\"model\"\n [field]=\"field\"\n [placeholder]=\"placeholder\"\n ></data-m2mselect>\n }\n @case (\"select\") {\n <select\n [formControl]=\"form.get(field)\"\n (keyup.escape)=\"unsetEdit()\"\n (change)=\"update()\"\n [ngClass]=\"inputClasses\"\n >\n @for (c of realChoices; track c) {\n <option [ngValue]=\"c.value !== undefined ? c.value : c\">\n {{ c.desc ? c.desc : c }}\n </option>\n }\n </select>\n <div class=\"form-text\">{{ realHelp }}</div>\n }\n }\n</ng-template>\n<!-- Disp/edit toggler-->\n<ng-template #dispeditTpl>\n @if (!edit) {\n <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n }\n @if (edit) {\n @if (fg) {\n <form [formGroup]=\"fg\" (submit)=\"update()\">\n <ng-container\n *ngTemplateOutlet=\"editTpl; context: { form: fg }\"\n ></ng-container>\n </form>\n }\n }\n</ng-template>\n<!-- DispEdit noform-->\n<ng-template #dispeditFormTpl>\n @if (!edit) {\n <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n }\n @if (edit) {\n @if (form) {\n <ng-container\n *ngTemplateOutlet=\"editTpl; context: { form: form }\"\n ></ng-container>\n }\n }\n</ng-template>\n<!-- Dd display-->\n@if (mode === \"dd\") {\n @if (!hideLabel) {\n <dt [class.required]=\"required\">\n <span class=\"editable\" (click)=\"toggleEdit()\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container\n ></span>\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n </dt>\n }\n <dd [class.mb-0]=\"hideLabel\">\n <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n </dd>\n}\n<!-- Inline display-->\n@if (mode === \"inline\") {\n @if (!hideLabel) {\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n <label [class.required]=\"required\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </label>\n }\n <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n}\n<!-- Form display-->\n@if (mode === \"form\") {\n @if (!hideLabel) {\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n <label [class.required]=\"required\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </label>\n }\n <ng-container *ngTemplateOutlet=\"dispeditFormTpl\"></ng-container>\n}\n", styles: [".editable{cursor:pointer}form.inline{display:inline-block}.required{font-weight:700}.required:after{content:\" (*)\"}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FkselectComponent, selector: "data-fkselect", inputs: ["model", "field", "edit", "value", "queryset", "collection", "update", "filter", "mode", "display", "search", "label", "placeholder", "inputClasses"], outputs: ["selected", "cancelled", "cleared"] }, { kind: "component", type: M2mselectComponent, selector: "data-m2mselect", inputs: ["model", "field", "edit", "values", "queryset", "collection", "filter", "mode", "display", "search", "label", "placeholder", "emptyLabel", "inputClasses"], outputs: ["added", "removed", "cancelled", "cleared", "detailsChanged", "changed"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
4646
4646
  }
4647
4647
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DispeditComponent, decorators: [{
4648
4648
  type: Component,
@@ -4651,7 +4651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
4651
4651
  ReactiveFormsModule,
4652
4652
  FkselectComponent,
4653
4653
  M2mselectComponent,
4654
- ], template: "<ng-template #titleTpl>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- TEMPLATE affichage -->\n<ng-template #dispTpl>\n @switch (realDisplay) {\n @case (\"text\") {\n <span class=\"editable disp-text\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"choice\") {\n <span class=\"editable disp-choice\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"decimal\") {\n <span class=\"editable disp-decimal\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"boolean\") {\n <span class=\"editable disp-boolean\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"fkdetails\") {\n <span class=\"editable disp-fkdetails\" (click)=\"enableEditMode()\">\n <div class=\"fkitem\">{{ txtValue }}</div></span\n >\n }\n @case (\"m2mdetails\") {\n <span class=\"editable disp-m2mdetails\" (click)=\"enableEditMode()\">\n @for (v of txtValues; track v) {\n <div class=\"m2mitem\">{{ v }}</div>\n }\n </span>\n }\n @case (\"datetime\") {\n <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n @if (dispValue) {\n {{ txtValue | date: \"short\" }}\n }\n @if (!dispValue) {\n {{ txtValue }}\n }\n </span>\n }\n @case (\"date\") {\n <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n @if (dispValue) {\n {{ txtValue | date: \"shortDate\" }}\n }\n @if (!dispValue) {\n {{ txtValue }}\n }\n </span>\n }\n }\n</ng-template>\n\n<!-- TEMPLATE \u00E9dition -->\n<ng-template #editTpl let-form=\"form\">\n @switch (realEditor) {\n @case (\"input.text\") {\n <input\n type=\"text\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.email\") {\n <input\n type=\"email\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['email']\"\n >\n Format d'email invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.password\") {\n <input\n type=\"password\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.datetime\") {\n <input\n type=\"datetime-local\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n (keyup.enter)=\"update()\"\n />\n <div class=\"form-text\">{{ realHelp }}</div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minDate']\"\n >\n Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager).min | date: \"short\" }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxDate']\"\n >\n Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager).max | date: \"short\" }}...\n </div>\n }\n @case (\"input.date\") {\n <input\n type=\"date\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n (keyup.enter)=\"update()\"\n />\n <div class=\"form-text\">{{ realHelp }}</div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minDate']\"\n >\n Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager).min | date: \"short\" }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxDate']\"\n >\n Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager).max | date: \"short\" }}...\n </div>\n }\n @case (\"input.number\") {\n <input\n type=\"number\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['min']\"\n >\n Trop petit : minimum {{ $any(manager).min }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['max']\"\n >\n Trop grand : maximum {{ $any(manager).max }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.decimal\") {\n <input\n type=\"number\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['min']\"\n >\n Trop petit : minimum {{ $any(manager).min }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['max']\"\n >\n Trop grand : maximum {{ $any(manager).max }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.checkbox\") {\n <div class=\"btn-group btn-group-sm\" role=\"group\">\n <button\n type=\"button\"\n [class]=\"form.get(field)?.value ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n (click)=\"form.get(field)?.setValue(true); update()\"\n (keyup.escape)=\"unsetEdit()\"\n >\n Oui\n </button>\n <button\n type=\"button\"\n [class]=\"!form.get(field)?.value ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n (click)=\"form.get(field)?.setValue(false); update()\"\n (keyup.escape)=\"unsetEdit()\"\n >\n Non\n </button>\n </div>\n <div class=\"form-text\">{{ realHelp }}</div>\n }\n @case (\"textarea\") {\n <textarea\n [formControl]=\"form.get(field)\"\n (keyup.escape)=\"unsetEdit()\"\n [ngClass]=\"inputClasses\"\n (keyup.control.enter)=\"update()\"\n [placeholder]=\"realPlaceholder\"\n ></textarea>\n @if (mode === \"dd\") {\n <button\n class=\"btn btn-sm btn-link w-100 dispedit-text-update-button\"\n (click)=\"update()\"\n >\n <i class=\"bi bi-save\"></i>\n </button>\n }\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"fkselect\") {\n <data-fkselect\n [collection]=\"collection\"\n [filter]=\"filter\"\n [display]=\"display\"\n (selected)=\"selectedRefItem($event)\"\n [placeholder]=\"placeholder\"\n (cancelled)=\"unsetEdit()\"\n (cleared)=\"selectedRefItem(null)\"\n ></data-fkselect>\n }\n @case (\"m2mselect\") {\n <data-m2mselect\n [collection]=\"collection\"\n [filter]=\"filter\"\n (changed)=\"update()\"\n [formControl]=\"form.get(field)\"\n (detailsChanged)=\"onM2MValuesChanges($event)\"\n [model]=\"model\"\n [field]=\"field\"\n [placeholder]=\"placeholder\"\n ></data-m2mselect>\n }\n @case (\"select\") {\n <select\n [formControl]=\"form.get(field)\"\n (keyup.escape)=\"unsetEdit()\"\n (change)=\"update()\"\n [ngClass]=\"inputClasses\"\n >\n @for (c of realChoices; track c) {\n <option [ngValue]=\"c.value !== undefined ? c.value : c\">\n {{ c.desc ? c.desc : c }}\n </option>\n }\n </select>\n <div class=\"form-text\">{{ realHelp }}</div>\n }\n }\n</ng-template>\n<!-- Disp/edit toggler-->\n<ng-template #dispeditTpl>\n @if (!edit) {\n <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n }\n @if (edit) {\n @if (fg) {\n <form [formGroup]=\"fg\" (submit)=\"update()\">\n <ng-container\n *ngTemplateOutlet=\"editTpl; context: { form: fg }\"\n ></ng-container>\n </form>\n }\n }\n</ng-template>\n<!-- DispEdit noform-->\n<ng-template #dispeditFormTpl>\n @if (!edit) {\n <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n }\n @if (edit) {\n @if (form) {\n <ng-container\n *ngTemplateOutlet=\"editTpl; context: { form: form }\"\n ></ng-container>\n }\n }\n</ng-template>\n<!-- Dd display-->\n@if (mode === \"dd\") {\n @if (!hideLabel) {\n <dt [class.required]=\"required\">\n <span class=\"editable\" (click)=\"toggleEdit()\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container\n ></span>\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n </dt>\n }\n <dd [class.mb-0]=\"hideLabel\">\n <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n </dd>\n}\n<!-- Inline display-->\n@if (mode === \"inline\") {\n @if (!hideLabel) {\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n <label [class.required]=\"required\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </label>\n }\n <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n}\n<!-- Form display-->\n@if (mode === \"form\") {\n @if (!hideLabel) {\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n <label [class.required]=\"required\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </label>\n }\n <ng-container *ngTemplateOutlet=\"dispeditFormTpl\"></ng-container>\n}\n", styles: [".editable{cursor:pointer}form.inline{display:inline-block}.required{font-weight:700}.required:after{content:\" (*)\"}\n"] }]
4654
+ ], template: "<ng-template #titleTpl>\n <ng-content></ng-content>\n</ng-template>\n\n<!-- TEMPLATE affichage -->\n<ng-template #dispTpl>\n @switch (realDisplay) {\n @case (\"text\") {\n <span class=\"editable disp-text\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"choice\") {\n <span class=\"editable disp-choice\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"decimal\") {\n <span class=\"editable disp-decimal\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"boolean\") {\n <span class=\"editable disp-boolean\" (click)=\"enableEditMode()\">{{\n txtValue\n }}</span>\n }\n @case (\"fkdetails\") {\n <span class=\"editable disp-fkdetails\" (click)=\"enableEditMode()\">\n <div class=\"fkitem\">{{ txtValue }}</div></span\n >\n }\n @case (\"m2mdetails\") {\n <span class=\"editable disp-m2mdetails\" (click)=\"enableEditMode()\">\n @for (v of txtValues; track v) {\n <div class=\"m2mitem\">{{ v }}</div>\n }\n </span>\n }\n @case (\"datetime\") {\n <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n @if (dispValue) {\n {{ txtValue | date: \"short\" }}\n }\n @if (!dispValue) {\n {{ txtValue }}\n }\n </span>\n }\n @case (\"date\") {\n <span class=\"editable disp-datetime\" (click)=\"enableEditMode()\">\n @if (dispValue) {\n {{ txtValue | date: \"shortDate\" }}\n }\n @if (!dispValue) {\n {{ txtValue }}\n }\n </span>\n }\n }\n</ng-template>\n\n<!-- TEMPLATE \u00E9dition -->\n<ng-template #editTpl let-form=\"form\">\n @switch (realEditor) {\n @case (\"input.text\") {\n <input\n type=\"text\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.email\") {\n <input\n type=\"email\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['email']\"\n >\n Format d'email invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.password\") {\n <input\n type=\"password\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.datetime\") {\n <input\n type=\"datetime-local\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n (keyup.enter)=\"update()\"\n />\n <div class=\"form-text\">{{ realHelp }}</div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minDate']\"\n >\n Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager).min | date: \"short\" }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxDate']\"\n >\n Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager).max | date: \"short\" }}...\n </div>\n }\n @case (\"input.date\") {\n <input\n type=\"date\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n (keyup.enter)=\"update()\"\n />\n <div class=\"form-text\">{{ realHelp }}</div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minDate']\"\n >\n Doit \u00EAtre post\u00E9rieur \u00E0 {{ $any(manager).min | date: \"short\" }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxDate']\"\n >\n Doit \u00EAtre ant\u00E9rieur \u00E0 {{ $any(manager).max | date: \"short\" }}...\n </div>\n }\n @case (\"input.number\") {\n <input\n type=\"number\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['min']\"\n >\n Trop petit : minimum {{ $any(manager).min }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['max']\"\n >\n Trop grand : maximum {{ $any(manager).max }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.decimal\") {\n <input\n type=\"number\"\n [formControl]=\"form.get(field)\"\n [ngClass]=\"inputClasses\"\n (keyup.escape)=\"unsetEdit()\"\n [placeholder]=\"realPlaceholder\"\n />\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['min']\"\n >\n Trop petit : minimum {{ $any(manager).min }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['max']\"\n >\n Trop grand : maximum {{ $any(manager).max }}...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"input.checkbox\") {\n @let v = $any(this.model)[this.field];\n <div class=\"btn-group btn-group-sm\" role=\"group\">\n <button\n type=\"button\"\n [class]=\"v===true ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n (click)=\"form.get(field)?.setValue(true); update()\"\n (keyup.escape)=\"unsetEdit()\"\n >\n Oui\n </button>\n <button\n type=\"button\"\n [class]=\"v===false ? 'btn btn-primary' : 'btn btn-outline-primary'\"\n (click)=\"form.get(field)?.setValue(false); update()\"\n (keyup.escape)=\"unsetEdit()\"\n >\n Non\n </button>\n </div>\n <div class=\"form-text\">{{ realHelp }}</div>\n }\n @case (\"textarea\") {\n <textarea\n [formControl]=\"form.get(field)\"\n (keyup.escape)=\"unsetEdit()\"\n [ngClass]=\"inputClasses\"\n (keyup.control.enter)=\"update()\"\n [placeholder]=\"realPlaceholder\"\n ></textarea>\n @if (mode === \"dd\") {\n <button\n class=\"btn btn-sm btn-link w-100 dispedit-text-update-button\"\n (click)=\"update()\"\n >\n <i class=\"bi bi-save\"></i>\n </button>\n }\n @if (realHelp) {\n <div class=\"form-text\">\n {{ realHelp }}\n @if (required) {\n <span class=\"ms-1\">(requis)</span>\n }\n </div>\n }\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['minlength']\"\n >\n Trop court : {{ $any(manager).minLength }} caract\u00E8res minimum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['maxlength']\"\n >\n Trop long : {{ $any(manager).maxLength }} caract\u00E8res maximum...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['pattern']\"\n >\n Format invalide...\n </div>\n <div\n class=\"invalid-feedback mt-0\"\n [class.d-block]=\"form &amp;&amp; !form.controls[field].pristine &amp;&amp; form.controls[field].errors?.['required']\"\n >\n Ce champ est requis...\n </div>\n }\n @case (\"fkselect\") {\n <data-fkselect\n [collection]=\"collection\"\n [filter]=\"filter\"\n [display]=\"display\"\n (selected)=\"selectedRefItem($event)\"\n [placeholder]=\"placeholder\"\n (cancelled)=\"unsetEdit()\"\n (cleared)=\"selectedRefItem(null)\"\n ></data-fkselect>\n }\n @case (\"m2mselect\") {\n <data-m2mselect\n [collection]=\"collection\"\n [filter]=\"filter\"\n (changed)=\"update()\"\n [formControl]=\"form.get(field)\"\n (detailsChanged)=\"onM2MValuesChanges($event)\"\n [model]=\"model\"\n [field]=\"field\"\n [placeholder]=\"placeholder\"\n ></data-m2mselect>\n }\n @case (\"select\") {\n <select\n [formControl]=\"form.get(field)\"\n (keyup.escape)=\"unsetEdit()\"\n (change)=\"update()\"\n [ngClass]=\"inputClasses\"\n >\n @for (c of realChoices; track c) {\n <option [ngValue]=\"c.value !== undefined ? c.value : c\">\n {{ c.desc ? c.desc : c }}\n </option>\n }\n </select>\n <div class=\"form-text\">{{ realHelp }}</div>\n }\n }\n</ng-template>\n<!-- Disp/edit toggler-->\n<ng-template #dispeditTpl>\n @if (!edit) {\n <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n }\n @if (edit) {\n @if (fg) {\n <form [formGroup]=\"fg\" (submit)=\"update()\">\n <ng-container\n *ngTemplateOutlet=\"editTpl; context: { form: fg }\"\n ></ng-container>\n </form>\n }\n }\n</ng-template>\n<!-- DispEdit noform-->\n<ng-template #dispeditFormTpl>\n @if (!edit) {\n <ng-container *ngTemplateOutlet=\"dispTpl\"></ng-container>\n }\n @if (edit) {\n @if (form) {\n <ng-container\n *ngTemplateOutlet=\"editTpl; context: { form: form }\"\n ></ng-container>\n }\n }\n</ng-template>\n<!-- Dd display-->\n@if (mode === \"dd\") {\n @if (!hideLabel) {\n <dt [class.required]=\"required\">\n <span class=\"editable\" (click)=\"toggleEdit()\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container\n ></span>\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n </dt>\n }\n <dd [class.mb-0]=\"hideLabel\">\n <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n </dd>\n}\n<!-- Inline display-->\n@if (mode === \"inline\") {\n @if (!hideLabel) {\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n <label [class.required]=\"required\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </label>\n }\n <ng-container *ngTemplateOutlet=\"dispeditTpl\"></ng-container>\n}\n<!-- Form display-->\n@if (mode === \"form\") {\n @if (!hideLabel) {\n @if (realDefault !== undefined && edit) {\n <span class=\"pointer float-end\" (click)=\"setDefault()\"\n ><i class=\"bi bi-trash ms-2\"></i\n ></span>\n }\n <label [class.required]=\"required\">\n <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n </label>\n }\n <ng-container *ngTemplateOutlet=\"dispeditFormTpl\"></ng-container>\n}\n", styles: [".editable{cursor:pointer}form.inline{display:inline-block}.required{font-weight:700}.required:after{content:\" (*)\"}\n"] }]
4655
4655
  }], ctorParameters: () => [{ type: undefined, decorators: [{
4656
4656
  type: Optional
4657
4657
  }, {