wojtek1150 · rasiaq · Feb 27, 2023
diff --git a/packages/jsonforms-zorro-wrapper/src/complex/checkbox-group.renderer.ts b/packages/jsonforms-zorro-wrapper/src/complex/checkbox-group.renderer.ts
@@ -6,7 +6,7 @@ import { hasEnumItems, hasOneOfItems } from '../other/complex.helper';
 @Component({
   selector: 'CheckboxGroupControlRenderer',
   template: `
-    <nz-form-item *ngIf="scopedSchema" [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden && scopedSchema" [class]="additionalClasses">
       <nz-form-label *ngIf="label" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}
       </nz-form-label>
@@ -23,10 +23,6 @@ import { hasEnumItems, hasOneOfItems } from '../other/complex.helper';
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/complex/image/image.renderer.html b/packages/jsonforms-zorro-wrapper/src/complex/image/image.renderer.html
@@ -1,4 +1,4 @@
-<nz-form-item *ngIf="scopedSchema" [class.hidden]="hidden" [class]="additionalClasses">
+<nz-form-item *ngIf="!hidden && scopedSchema" [class]="additionalClasses">
   <nz-form-label *ngIf="label" [nzFor]="id" [nzNoColon]="hideColonInLabel" [nzRequired]="required"
   ><i *ngIf="labelIcon" [nzType]="labelIcon" nz-icon nzTheme="outline"></i> {{ label }}
   </nz-form-label>

diff --git a/packages/jsonforms-zorro-wrapper/src/complex/multiselect.renderer.ts b/packages/jsonforms-zorro-wrapper/src/complex/multiselect.renderer.ts
@@ -6,7 +6,7 @@ import { hasEnumItems, hasOneOfItems } from '../other/complex.helper';
 @Component({
   selector: 'MultiselectControlRenderer',
   template: `
-    <nz-form-item *ngIf="scopedSchema" [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden && scopedSchema" [class]="additionalClasses">
       <nz-form-label *ngIf="label" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}
       </nz-form-label>
@@ -31,10 +31,6 @@ import { hasEnumItems, hasOneOfItems } from '../other/complex.helper';
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/boolean.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/boolean.renderer.ts
@@ -5,7 +5,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
 @Component({
   selector: 'BooleanControlRenderer',
   template: `
-    <nz-form-item [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden" [class]="additionalClasses">
       <DescriptionRenderer [uiSchema]="uischema" [scopedSchema]="scopedSchema"></DescriptionRenderer>
       <nz-form-control [nzErrorTip]="errorMessage" [nzValidateStatus]="form.status | nzValidationStatus">
         <label nz-checkbox [id]="id" [formControl]="form" (nzCheckedChange)="onChange($event)">
@@ -19,10 +19,6 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/date.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/date.renderer.ts
@@ -6,7 +6,7 @@ import { DatePipe } from '@angular/common';
 @Component({
   selector: 'DateControlRenderer',
   template: `
-    <nz-form-item [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden" [class]="additionalClasses">
       <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
       >
@@ -31,10 +31,6 @@ import { DatePipe } from '@angular/common';
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/number.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/number.renderer.ts
@@ -5,7 +5,7 @@ import { Actions, isIntegerControl, isNumberControl, or, RankedTester, rankWith,
 @Component({
   selector: 'NumberControlRenderer',
   template: `
-    <nz-form-item [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden" [class]="additionalClasses">
       <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
       >
@@ -30,10 +30,6 @@ import { Actions, isIntegerControl, isNumberControl, or, RankedTester, rankWith,
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/radio-button.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/radio-button.renderer.ts
@@ -5,7 +5,7 @@ import { Actions, and, isEnumControl, optionIs, RankedTester, rankWith } from '@
 @Component({
   selector: 'RadioControlRenderer',
   template: `
-    <nz-form-item *ngIf="scopedSchema" [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden && scopedSchema" [class]="additionalClasses">
       <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
       >
@@ -22,10 +22,6 @@ import { Actions, and, isEnumControl, optionIs, RankedTester, rankWith } from '@
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/radio.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/radio.renderer.ts
@@ -5,27 +5,25 @@ import { Actions, and, isEnumControl, optionIs, RankedTester, rankWith } from '@
 @Component({
   selector: 'RadioControlRenderer',
   template: `
-    <nz-form-item *ngIf="scopedSchema" [class]="additionalClasses" [class.hidden]="hidden">
-      <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
-        ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
-      >
-      <DescriptionRenderer [uiSchema]="uischema" [scopedSchema]="scopedSchema"></DescriptionRenderer>
-      <nz-form-control [nzErrorTip]="errorMessage">
-        <nz-radio-group [id]="id" [formControl]="form" (ngModelChange)="onChange($event)">
-          <label nz-radio *ngFor="let option of scopedSchema.enum" [nzValue]="option">{{ option }}</label>
-        </nz-radio-group>
-      </nz-form-control>
-    </nz-form-item>
+    <ng-container *ngIf="!hidden">
+      <nz-form-item *ngIf="scopedSchema" [class]="additionalClasses">
+        <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
+          ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
+        >
+        <DescriptionRenderer [uiSchema]="uischema" [scopedSchema]="scopedSchema"></DescriptionRenderer>
+        <nz-form-control [nzErrorTip]="errorMessage">
+          <nz-radio-group [id]="id" [formControl]="form" (ngModelChange)="onChange($event)">
+            <label nz-radio *ngFor="let option of scopedSchema.enum" [nzValue]="option">{{ option }}</label>
+          </nz-radio-group>
+        </nz-form-control>
+      </nz-form-item>
+    </ng-container>
   `,
   styles: [
     `
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/range.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/range.renderer.ts
@@ -5,7 +5,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
 @Component({
   selector: 'RangeControlRenderer',
   template: `
-    <nz-form-item [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden" [class]="additionalClasses">
       <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
       >
@@ -20,10 +20,6 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/select.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/select.renderer.ts
@@ -5,7 +5,7 @@ import { Actions, isEnumControl, isOneOfControl, or, RankedTester, rankWith, Sta
 @Component({
   selector: 'SelectControlRenderer',
   template: `
-    <nz-form-item *ngIf="scopedSchema" [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden && scopedSchema" [class]="additionalClasses">
       <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
       >
@@ -30,10 +30,6 @@ import { Actions, isEnumControl, isOneOfControl, or, RankedTester, rankWith, Sta
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/text.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/text.renderer.ts
@@ -5,7 +5,7 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
 @Component({
   selector: 'TextControlRenderer',
   template: `
-    <nz-form-item [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden" [class]="additionalClasses">
       <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
       >
@@ -28,10 +28,6 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/textarea.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/textarea.renderer.ts
@@ -6,7 +6,7 @@ import { AutoSizeType } from 'ng-zorro-antd/input/autosize.directive';
 @Component({
   selector: 'TextAreaRenderer',
   template: `
-    <nz-form-item [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden" [class]="additionalClasses">
       <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
       >
@@ -29,10 +29,6 @@ import { AutoSizeType } from 'ng-zorro-antd/input/autosize.directive';
       nz-form-item {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/toggle.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/toggle.renderer.ts
@@ -5,11 +5,13 @@ import { Actions, and, isBooleanControl, optionIs, RankedTester, rankWith } from
 @Component({
   selector: 'ToggleControlRenderer',
   template: `
-    <DescriptionRenderer [uiSchema]="uischema" [scopedSchema]="scopedSchema"></DescriptionRenderer>
-    <label class="switch" [class]="additionalClasses">
-      <nz-switch [id]="id" [formControl]="form" [nzDisabled]="!isEnabled()" (ngModelChange)="onChange($event)"></nz-switch>
-      <span *ngIf="label">{{ label }}</span>
-    </label>
+    <ng-container *ngIf="!hidden">
+      <DescriptionRenderer [uiSchema]="uischema" [scopedSchema]="scopedSchema"></DescriptionRenderer>
+      <label class="switch" [class]="additionalClasses">
+        <nz-switch [id]="id" [formControl]="form" [nzDisabled]="!isEnabled()" (ngModelChange)="onChange($event)"></nz-switch>
+        <span *ngIf="label">{{ label }}</span>
+      </label>
+    </ng-container>
   `,
   styles: [
     `
@@ -22,10 +24,6 @@ import { Actions, and, isBooleanControl, optionIs, RankedTester, rankWith } from
       .switch span {
         padding-left: 8px;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/packages/jsonforms-zorro-wrapper/src/controls/wysiwyg.renderer.ts b/packages/jsonforms-zorro-wrapper/src/controls/wysiwyg.renderer.ts
@@ -6,7 +6,7 @@ import { AutoSizeType } from 'ng-zorro-antd/input/autosize.directive';
 @Component({
   selector: 'WysiwygRenderer',
   template: `
-    <nz-form-item [class]="additionalClasses" [class.hidden]="hidden">
+    <nz-form-item *ngIf="!hidden" [class]="additionalClasses">
       <nz-form-label *ngIf="label && label !== '*'" [nzFor]="id" [nzRequired]="required" [nzNoColon]="hideColonInLabel"
         ><i *ngIf="labelIcon" nz-icon [nzType]="labelIcon" nzTheme="outline"></i> {{ label }}</nz-form-label
       >
@@ -34,10 +34,6 @@ import { AutoSizeType } from 'ng-zorro-antd/input/autosize.directive';
       quill-editor {
         display: block;
       }
-
-      .hidden {
-        display: none;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,