primeng: toggle wrapper

* Fixes the default value for the array in the editor.

Co-Authored-by: Johnny Mariéthoz <[email protected]>

Author: jma

projects/rero/ng-core/assets/scss/_theme.scss

@@ -44,11 +44,11 @@ a:hover:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) {
 dl.metadata {
   @extend .grid, .my-0, .w-full, .p-2;
   dt {
-    @extend .font-bold, .col-12, .py-0;
+    @extend .font-bold, .col-12, .py-0, .mx-0, .my-1;
     @include styleclass('md:col-4');
   }
   dd {
-    @extend .col-12, .py-0, .m-0;
+    @extend .col-12, .py-0, .mx-0, .my-1;
     @include styleclass('md:col-8');
   }
 }
@@ -66,21 +66,3 @@ legend {
   @extend .text-base;
   width: auto;
 }
-
-// CALLOUT
-.callout {
-  border: 1px solid var(--surface-300);
-  border-left: 5px solid var(--surface-300);
-  border-radius: 5px;
-}
-
-@each $variant in $callout-variants {
-  .callout-#{$variant} {
-    border: 1px solid rgba(var(--callout-color-#{$variant}), 0.3);
-    border-left: 5px solid rgb(var(--callout-color-#{$variant}));
-  }
-
-  .callout-bg-#{$variant} {
-    background-color: rgba(var(--callout-color-#{$variant}), 0.05);
-  }
-}

projects/rero/ng-core/src/lib/record/editor/services/jsonschema.service.ts

@@ -45,7 +45,7 @@ export class JSONSchemaService {
   processField(field: FormlyFieldConfig, jsonSchema: JSONSchema7) {
     // initial population of arrays with a minItems constraints
     if (field.type === 'array' && jsonSchema.minItems && !jsonSchema.hasOwnProperty('default')) {
-      field.defaultValue = new Array(jsonSchema.minItems);
+      field.defaultValue = new Array(jsonSchema.minItems).fill(null);
     }
     // If 'format' is defined into the jsonSchema, use it as props to try a validation on this field.
     // See: `email.validator.ts` file

projects/rero/ng-core/src/lib/record/editor/wrappers/toggle-wrapper/toggle-wrappers.component.ts

@@ -21,18 +21,16 @@ import { isEmpty, removeEmptyValues } from '../../utils';
 @Component({
   selector: 'ng-core-editor-formly-toggle-wrapper',
   template: `
-    <div class='toggle-wrapper'>
-        <div class="custom-control custom-switch">
-          <input class="custom-control-input" type="checkbox" id="toggle-switch-{{ field.id }}"
-            (change)="toggle($event)" [checked]="tsOptions.enabled">
+        <div class="flex gap-2">
+          <p-inputSwitch  id="toggle-switch-{{ field.id }}"
+            (onChange)="toggle($event)" [ngModel]="tsOptions.enabled" />
           <label class="custom-control-label" for="toggle-switch-{{ field.id }}"
             [pTooltip]="tsOptions.description|translate" tooltipPosition="top"
           >{{ tsOptions.label | translate }}</label>
         </div>
       @if (tsOptions.enabled) {
         <ng-container #fieldComponent></ng-container>
       }
-    </div>
   `
 })
 export class ToggleWrapperComponent extends FieldWrapper implements OnInit {
@@ -72,10 +70,12 @@ export class ToggleWrapperComponent extends FieldWrapper implements OnInit {
 
   toggle(event: any) {
     if (this.tsOptions.enabled === true) {
+    // if (event.checked === false) {
       // toggle switch will became 'false', so just reset the field.
       //   Resetting the field will change its value and so the `valueChanges` Observer will be called. The toggle `enabled` value will
       //   be update (to false) by this method.
-      this.field.formControl.reset();  // reset all children fields
+      this.field.formControl.setErrors(null);
+      this.field.formControl.reset(this.field.defaultValue);  // reset all children fields
     } else {
       this.tsOptions.enabled = true;
       this.field.formControl.enable({emitEvent: false});