fix(admin-ui): Correctly display checkboxes and toggles

admin-ui/src/app/login/components/login/login.component.html

@@ -18,10 +18,16 @@
                 [(ngModel)]="password"
                 [placeholder]="'common.password' | translate"
             />
-            <div class="checkbox">
-                <input type="checkbox" id="rememberme" name="rememberme" [(ngModel)]="rememberMe" />
-                <label for="rememberme">{{ 'common.remember-me' | translate }}</label>
-            </div>
+            <clr-checkbox-wrapper>
+                <input
+                    type="checkbox"
+                    clrCheckbox
+                    id="rememberme"
+                    name="rememberme"
+                    [(ngModel)]="rememberMe"
+                />
+                <label>{{ 'common.remember-me' | translate }}</label>
+            </clr-checkbox-wrapper>
             <button
                 type="submit"
                 class="btn btn-primary"

admin-ui/src/app/settings/components/channel-detail/channel-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else updateButton"
+            *ngIf="isNew$ | async; else updateButton"
             (click)="create()"
             [disabled]="!saveButtonEnabled()"
         >
@@ -31,19 +31,18 @@
         </select>
     </vdr-form-field>
     <vdr-form-field [label]="'settings.prices-include-tax' | translate" for="pricesIncludeTax">
-        <div class="toggle-switch">
-            <input type="checkbox" id="pricesIncludeTax" formControlName="pricesIncludeTax" />
-            <label for="pricesIncludeTax"></label>
-        </div>
+        <clr-toggle-wrapper>
+            <input type="checkbox" clrToggle id="pricesIncludeTax" formControlName="pricesIncludeTax" />
+        </clr-toggle-wrapper>
     </vdr-form-field>
     <vdr-form-field [label]="'settings.default-tax-zone' | translate" for="defaultTaxZoneId">
         <select clrSelect name="defaultTaxZoneId" formControlName="defaultTaxZoneId">
-            <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
+            <option *ngFor="let zone of zones$ | async" [value]="zone.id">{{ zone.name }}</option>
         </select>
     </vdr-form-field>
     <vdr-form-field [label]="'settings.default-shipping-zone' | translate" for="defaultShippingZoneId">
         <select clrSelect name="defaultShippingZoneId" formControlName="defaultShippingZoneId">
-            <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
+            <option *ngFor="let zone of zones$ | async" [value]="zone.id">{{ zone.name }}</option>
         </select>
     </vdr-form-field>
 </form>

admin-ui/src/app/settings/components/country-detail/country-detail.component.html

@@ -10,7 +10,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else updateButton"
+            *ngIf="isNew$ | async; else updateButton"
             (click)="create()"
             [disabled]="detailForm.invalid || detailForm.pristine"
         >
@@ -36,9 +36,8 @@
         <input id="name" type="text" formControlName="name" />
     </vdr-form-field>
     <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
-        <div class="toggle-switch">
-            <input type="checkbox" id="enabled" formControlName="enabled" />
-            <label for="enabled"></label>
-        </div>
+        <clr-toggle-wrapper>
+            <input type="checkbox" clrToggle id="enabled" formControlName="enabled" />
+        </clr-toggle-wrapper>
     </vdr-form-field>
 </form>

admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else updateButton"
+            *ngIf="isNew$ | async; else updateButton"
             [disabled]="detailForm.pristine || detailForm.invalid"
         >
             {{ 'common.create' | translate }}
@@ -26,10 +26,9 @@
         <input id="code" type="text" formControlName="code" />
     </vdr-form-field>
     <vdr-form-field [label]="'common.enabled' | translate" for="description">
-        <div class="toggle-switch">
-            <input type="checkbox" id="enabled" formControlName="enabled" />
-            <label for="enabled"></label>
-        </div>
+        <clr-toggle-wrapper>
+            <input type="checkbox" clrToggle id="enabled" formControlName="enabled" />
+        </clr-toggle-wrapper>
     </vdr-form-field>
 
     <div class="clr-row" formGroupName="configArgs" *ngIf="(entity$ | async).configArgs?.length">

admin-ui/src/app/settings/components/tax-rate-detail/tax-rate-detail.component.html

@@ -4,7 +4,7 @@
     <vdr-ab-right>
         <button
             class="btn btn-primary"
-            *ngIf="(isNew$ | async); else updateButton"
+            *ngIf="isNew$ | async; else updateButton"
             (click)="create()"
             [disabled]="!saveButtonEnabled()"
         >
@@ -23,10 +23,9 @@
         <input id="name" type="text" formControlName="name" />
     </vdr-form-field>
     <vdr-form-field [label]="'common.enabled' | translate" for="enabled">
-        <div class="toggle-switch">
-            <input type="checkbox" id="enabled" formControlName="enabled" />
-            <label for="enabled"></label>
-        </div>
+        <clr-toggle-wrapper>
+            <input type="checkbox" clrToggle id="enabled" formControlName="enabled" />
+        </clr-toggle-wrapper>
     </vdr-form-field>
     <vdr-form-field [label]="'settings.rate' | translate" for="value">
         <vdr-affixed-input suffix="%">
@@ -35,14 +34,14 @@
     </vdr-form-field>
     <vdr-form-field [label]="'settings.tax-category' | translate" for="taxCategoryId">
         <select clrSelect name="taxCategoryId" formControlName="taxCategoryId">
-            <option *ngFor="let taxCategory of (taxCategories$ | async)" [value]="taxCategory.id">
+            <option *ngFor="let taxCategory of taxCategories$ | async" [value]="taxCategory.id">
                 {{ taxCategory.name }}
             </option>
         </select>
     </vdr-form-field>
     <vdr-form-field [label]="'settings.zone' | translate" for="zoneId">
         <select clrSelect name="zoneId" formControlName="zoneId">
-            <option *ngFor="let zone of (zones$ | async)" [value]="zone.id">{{ zone.name }}</option>
+            <option *ngFor="let zone of zones$ | async" [value]="zone.id">{{ zone.name }}</option>
         </select>
     </vdr-form-field>
 </form>

admin-ui/src/app/shared/components/configurable-input/configurable-input.component.html

@@ -4,12 +4,9 @@
         <form [formGroup]="form" *ngIf="operation" class="operation-inputs">
             <div *ngFor="let arg of operation.args" class="arg-row">
                 <label>{{ arg.name | sentenceCase }}</label>
-                <div *ngIf="arg.type === ConfigArgType.BOOLEAN" class="checkbox">
-                    <clr-checkbox-wrapper>
-                        <input type="checkbox" clrCheckbox [formControlName]="arg.name" [id]="arg.name" />
-                        <label>{{ arg.name }}</label>
-                    </clr-checkbox-wrapper>
-                </div>
+                <clr-checkbox-wrapper *ngIf="arg.type === ConfigArgType.BOOLEAN">
+                    <input type="checkbox" clrCheckbox [formControlName]="arg.name" [id]="arg.name" />
+                </clr-checkbox-wrapper>
                 <input
                     *ngIf="arg.type === ConfigArgType.INT"
                     [name]="arg.name"

admin-ui/src/app/shared/components/custom-field-control/custom-field-control.component.html

@@ -11,10 +11,14 @@
         [id]="customField.name"
         [formControl]="formGroup.get(customField.name)"
     />
-    <div *ngIf="customField.type === 'boolean'" class="toggle-switch">
-        <input type="checkbox" [id]="customField.name" [formControl]="formGroup.get(customField.name)" />
-        <label [for]="customField.name"></label>
-    </div>
+    <clr-toggle-wrapper *ngIf="customField.type === 'boolean'">
+        <input
+            type="checkbox"
+            clrToggle
+            [id]="customField.name"
+            [formControl]="formGroup.get(customField.name)"
+        />
+    </clr-toggle-wrapper>
     <input
         *ngIf="customField.type === 'datetime'"
         type="date"

admin-ui/src/app/shared/components/form-field/form-field.component.html

@@ -1,7 +1,7 @@
 <div
     class="form-group"
     [class.no-label]="!label"
-    [class.clr-error]="formFieldControl.formControlName.invalid"
+    [class.clr-error]="formFieldControl?.formControlName.invalid"
 >
     <label *ngIf="label" [for]="for" class="clr-control-label">
         {{ label }}