Merge pull request #14371 from SoyDiego/fix-checkbox-tristatecheckbox

fix(Checkbox/TriStateCheckbox): Lost margin between label and docs.
primefaces · Dec 20, 2023 · 0aeef82 · 0aeef82
2 parents 123510c + 2ce3d4d
commit 0aeef82
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts
@@ -66,7 +66,7 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
                 </ng-container>
             </div>
         </div>
-        <label class="p-tristatecheckbox-label" [ngClass]="{ 'p-checkbox-label-active': value != null, 'p-disabled': disabled, 'p-checkbox-label-focus': focused }" *ngIf="label" [attr.for]="inputId">{{ label }}</label>
+        <label class="p-checkbox-label" (click)="onClick($event, input)" [ngClass]="{ 'p-checkbox-label-active': value != null, 'p-disabled': disabled, 'p-checkbox-label-focus': focused }" *ngIf="label" [attr.for]="inputId">{{ label }}</label>
     `,
     providers: [TRISTATECHECKBOX_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/src/app/showcase/doc/checkbox/dynamicdoc.ts b/src/app/showcase/doc/checkbox/dynamicdoc.ts
@@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
         <div class="card flex justify-content-center">
             <div class="flex flex-column gap-2">
                 <div *ngFor="let category of categories" class="field-checkbox">
-                    <p-checkbox [label]="category.name" name="group" [value]="category" [(ngModel)]="selectedCategories" [inputId]="category.key"></p-checkbox>
+                    <p-checkbox [label]="category.name" name="group" [value]="category" [(ngModel)]="selectedCategories"></p-checkbox>
                 </div>
             </div>
         </div>
@@ -29,14 +29,14 @@ export class DynamicDoc {
 
     code: Code = {
         basic: `<div *ngFor="let category of categories" class="field-checkbox">
-    <p-checkbox [label]="category.name" name="group" [value]="category" [(ngModel)]="selectedCategories" [inputId]="category.key"></p-checkbox>
+    <p-checkbox [label]="category.name" name="group" [value]="category" [(ngModel)]="selectedCategories"></p-checkbox>
 </div>`,
 
         html: `
 <div class="card flex justify-content-center">
     <div class="flex flex-column gap-2">
         <div *ngFor="let category of categories" class="field-checkbox">
-        <p-checkbox [label]="category.name" name="group" [value]="category" [(ngModel)]="selectedCategories" [inputId]="category.key"></p-checkbox>
+        <p-checkbox [label]="category.name" name="group" [value]="category" [(ngModel)]="selectedCategories"></p-checkbox>
         </div>
     </div>
 </div>`,

diff --git a/src/app/showcase/doc/checkbox/multipledoc.ts b/src/app/showcase/doc/checkbox/multipledoc.ts
@@ -9,16 +9,16 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card flex flex-wrap justify-content-center gap-3">
             <div class="flex align-items-center">
-                <p-checkbox label="Cheese" name="pizza" value="Cheese" [(ngModel)]="pizza" inputId="ingredient1"></p-checkbox>
+                <p-checkbox label="Cheese" name="pizza" value="Cheese" [(ngModel)]="pizza"></p-checkbox>
             </div>
             <div class="flex align-items-center">
-                <p-checkbox label="Mushroom" name="pizza" value="Mushroom" [(ngModel)]="pizza" inputId="ingredient2"></p-checkbox>
+                <p-checkbox label="Mushroom" name="pizza" value="Mushroom" [(ngModel)]="pizza"></p-checkbox>
             </div>
             <div class="flex align-items-center">
-                <p-checkbox label="Pepper" name="pizza" value="Pepper" [(ngModel)]="pizza" inputId="ingredient3"></p-checkbox>
+                <p-checkbox label="Pepper" name="pizza" value="Pepper" [(ngModel)]="pizza"></p-checkbox>
             </div>
             <div class="flex align-items-center">
-                <p-checkbox label="Onion" name="pizza" value="Onion" [(ngModel)]="pizza" inputId="ingredient4"></p-checkbox>
+                <p-checkbox label="Onion" name="pizza" value="Onion" [(ngModel)]="pizza"></p-checkbox>
             </div>
         </div>
         <app-code [code]="code" selector="checkbox-multiple-demo"></app-code>
@@ -29,30 +29,30 @@ export class MultipleDoc {
 
     code: Code = {
         basic: `<div class="flex align-items-center">
-        <p-checkbox label="Cheese" name="pizza" value="Cheese" [(ngModel)]="pizza" inputId="ingredient1"></p-checkbox>
+        <p-checkbox label="Cheese" name="pizza" value="Cheese" [(ngModel)]="pizza"></p-checkbox>
     </div>
     <div class="flex align-items-center">
-        <p-checkbox label="Mushroom" name="pizza" value="Mushroom" [(ngModel)]="pizza" inputId="ingredient2"></p-checkbox>
+        <p-checkbox label="Mushroom" name="pizza" value="Mushroom" [(ngModel)]="pizza"></p-checkbox>
     </div>
     <div class="flex align-items-center">
-        <p-checkbox label="Pepper" name="pizza" value="Pepper" [(ngModel)]="pizza" inputId="ingredient3"></p-checkbox>
+        <p-checkbox label="Pepper" name="pizza" value="Pepper" [(ngModel)]="pizza"></p-checkbox>
     </div>
     <div class="flex align-items-center">
-        <p-checkbox label="Onion" name="pizza" value="Onion" [(ngModel)]="pizza" inputId="ingredient4"></p-checkbox>
+        <p-checkbox label="Onion" name="pizza" value="Onion" [(ngModel)]="pizza"></p-checkbox>
 </div>`,
 
         html: `<div class="card flex justify-content-center gap-3">
      <div class="flex align-items-center">
-        <p-checkbox label="Cheese" name="pizza" value="Cheese" [(ngModel)]="pizza" inputId="ingredient1"></p-checkbox>
+        <p-checkbox label="Cheese" name="pizza" value="Cheese" [(ngModel)]="pizza"></p-checkbox>
     </div>
     <div class="flex align-items-center">
-        <p-checkbox label="Mushroom" name="pizza" value="Mushroom" [(ngModel)]="pizza" inputId="ingredient2"></p-checkbox>
+        <p-checkbox label="Mushroom" name="pizza" value="Mushroom" [(ngModel)]="pizza"></p-checkbox>
     </div>
     <div class="flex align-items-center">
-        <p-checkbox label="Pepper" name="pizza" value="Pepper" [(ngModel)]="pizza" inputId="ingredient3"></p-checkbox>
+        <p-checkbox label="Pepper" name="pizza" value="Pepper" [(ngModel)]="pizza"></p-checkbox>
     </div>
     <div class="flex align-items-center">
-        <p-checkbox label="Onion" name="pizza" value="Onion" [(ngModel)]="pizza" inputId="ingredient4"></p-checkbox>
+        <p-checkbox label="Onion" name="pizza" value="Onion" [(ngModel)]="pizza"></p-checkbox>
 </div>
 </div>`,