From 0eb9dfbc2672426a7b5de79c9afa966bc94898c6 Mon Sep 17 00:00:00 2001
From: Diego Franchina <diegofranchina@gmail.com>
Date: Sun, 29 Oct 2023 22:53:33 +0100
Subject: [PATCH 1/2] fixed tristatecheckbox and added cursor pointer

---
 .../tristatecheckbox/tristatecheckbox.css         |  5 +++++
 .../tristatecheckbox/tristatecheckbox.ts          | 15 ++++++++-------
 src/app/showcase/doc/tristatecheckbox/basicdoc.ts |  6 +++---
 .../doc/tristatecheckbox/reactiveformsdoc.ts      |  6 +++---
 4 files changed, 19 insertions(+), 13 deletions(-)
 create mode 100644 src/app/components/tristatecheckbox/tristatecheckbox.css

diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.css b/src/app/components/tristatecheckbox/tristatecheckbox.css
new file mode 100644
index 00000000000..11d05e8bd90
--- /dev/null
+++ b/src/app/components/tristatecheckbox/tristatecheckbox.css
@@ -0,0 +1,5 @@
+@layer primeng {
+    .p-tristatecheckbox-label {
+        cursor: pointer;
+    }
+}
diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts
index 26d1e0cb2e4..23ed54a66f7 100755
--- a/src/app/components/tristatecheckbox/tristatecheckbox.ts
+++ b/src/app/components/tristatecheckbox/tristatecheckbox.ts
@@ -19,7 +19,7 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
 @Component({
     selector: 'p-triStateCheckbox',
     template: `
-        <div [ngStyle]="style" [ngClass]="{ 'p-checkbox p-component': true, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused }" [class]="styleClass">
+        <div [ngStyle]="style" [ngClass]="{ 'p-checkbox p-component': true, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused }" [class]="styleClass" (click)="onClick($event, input)" >
             <div class="p-hidden-accessible">
                 <input
                     #input
@@ -37,7 +37,7 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
                     inputmode="none"
                 />
             </div>
-            <div class="p-checkbox-box" (click)="onClick($event, input)" role="checkbox" [attr.aria-checked]="value === true" [ngClass]="{ 'p-highlight': value != null, 'p-disabled': disabled, 'p-focus': focused }">
+            <div class="p-checkbox-box" role="checkbox" [attr.aria-checked]="value === true" [ngClass]="{ 'p-highlight': value != null, 'p-disabled': disabled, 'p-focus': focused }">
                 <ng-container *ngIf="value === true">
                     <span *ngIf="checkboxTrueIcon" [ngClass]="checkboxTrueIcon" class="p-checkbox-icon"></span>
                     <ng-container *ngIf="!checkboxTrueIcon">
@@ -58,17 +58,18 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
                 </ng-container>
             </div>
         </div>
-        <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>
+        <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>
     `,
     providers: [TRISTATECHECKBOX_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./tristatecheckbox.css'],
     host: {
         class: 'p-element'
     }
 })
 export class TriStateCheckbox implements ControlValueAccessor {
-    constructor(private cd: ChangeDetectorRef) {}
+    constructor(private cd: ChangeDetectorRef) { }
     /**
      * When present, it specifies that the element should be disabled.
      * @group Props
@@ -141,9 +142,9 @@ export class TriStateCheckbox implements ControlValueAccessor {
 
     value: Nullable<boolean>;
 
-    onModelChange: Function = () => {};
+    onModelChange: Function = () => { };
 
-    onModelTouched: Function = () => {};
+    onModelTouched: Function = () => { };
 
     onClick(event: Event, input: HTMLInputElement) {
         if (!this.disabled && !this.readonly) {
@@ -225,4 +226,4 @@ export class TriStateCheckbox implements ControlValueAccessor {
     exports: [TriStateCheckbox, SharedModule],
     declarations: [TriStateCheckbox]
 })
-export class TriStateCheckboxModule {}
+export class TriStateCheckboxModule { }
diff --git a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
index e366a891bd1..f76cb44852f 100644
--- a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
+++ b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts
@@ -9,7 +9,7 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card flex flex-column gap-3 align-items-center">
             <p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>
-            <label for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+            <label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
         </div>
         <app-code [code]="code" selector="tri-state-checkbox-basic-demo"></app-code>
     </section>`
@@ -23,12 +23,12 @@ export class BasicDoc {
 
     code: Code = {
         basic: `
-<p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
+<p-triStateCheckbox class="p-tristatecheckbox-label" [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>`,
 
         html: `
 <div class="card flex flex-column gap-3 align-items-center">
     <p-triStateCheckbox [(ngModel)]="value" inputId="tricheckbox"></p-triStateCheckbox>
-    <label for="tricheckbox">{{ value === null ? 'null' : value }}</label>
+    <label class="p-tristatecheckbox-label" for="tricheckbox">{{ value === null ? 'null' : value }}</label>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
index 5e75a3ddece..2b0c8262c75 100644
--- a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
+++ b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
@@ -11,7 +11,7 @@ import { Code } from '../../domain/code';
         <div class="card flex justify-content-center">
             <form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
                 <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-                <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+                <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
             </form>
         </div>
         <app-code [code]="code" selector="tri-state-checkbox-reactive-forms-demo"></app-code>
@@ -34,14 +34,14 @@ export class ReactiveFormsDoc implements OnInit {
         basic: `
 <form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
     <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-    <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+    <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
 </form>`,
 
         html: `
 <div class="card flex justify-content-center">
     <form [formGroup]="formGroup" class="flex flex-column align-items-center gap-3">
         <p-triStateCheckbox formControlName="checked" inputId="checked"></p-triStateCheckbox>
-        <label for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
+        <label class="p-tristatecheckbox-label" for="checked">{{ formGroup.value.checked === null ? 'null' : formGroup.value.checked }}</label>
     </form>
 </div>`,
 

From a946b5f7841e6752eac0aff8d651c80e35010787 Mon Sep 17 00:00:00 2001
From: Diego Franchina <diegofranchina@gmail.com>
Date: Sun, 29 Oct 2023 22:54:01 +0100
Subject: [PATCH 2/2] Formatted code

---
 src/app/components/accordion/accordion.ts              |  2 +-
 .../components/tristatecheckbox/tristatecheckbox.ts    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts
index eb1f4677344..f11af7c0759 100755
--- a/src/app/components/accordion/accordion.ts
+++ b/src/app/components/accordion/accordion.ts
@@ -422,7 +422,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
      */
     @Output() activeIndexChange: EventEmitter<number | number[]> = new EventEmitter<number | number[]>();
 
-    @ContentChildren(AccordionTab, {descendants: true}) tabList: QueryList<AccordionTab> | undefined;
+    @ContentChildren(AccordionTab, { descendants: true }) tabList: QueryList<AccordionTab> | undefined;
 
     tabListSubscription: Subscription | null = null;
 
diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts
index 23ed54a66f7..92c0eb5d425 100755
--- a/src/app/components/tristatecheckbox/tristatecheckbox.ts
+++ b/src/app/components/tristatecheckbox/tristatecheckbox.ts
@@ -19,7 +19,7 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
 @Component({
     selector: 'p-triStateCheckbox',
     template: `
-        <div [ngStyle]="style" [ngClass]="{ 'p-checkbox p-component': true, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused }" [class]="styleClass" (click)="onClick($event, input)" >
+        <div [ngStyle]="style" [ngClass]="{ 'p-checkbox p-component': true, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused }" [class]="styleClass" (click)="onClick($event, input)">
             <div class="p-hidden-accessible">
                 <input
                     #input
@@ -69,7 +69,7 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = {
     }
 })
 export class TriStateCheckbox implements ControlValueAccessor {
-    constructor(private cd: ChangeDetectorRef) { }
+    constructor(private cd: ChangeDetectorRef) {}
     /**
      * When present, it specifies that the element should be disabled.
      * @group Props
@@ -142,9 +142,9 @@ export class TriStateCheckbox implements ControlValueAccessor {
 
     value: Nullable<boolean>;
 
-    onModelChange: Function = () => { };
+    onModelChange: Function = () => {};
 
-    onModelTouched: Function = () => { };
+    onModelTouched: Function = () => {};
 
     onClick(event: Event, input: HTMLInputElement) {
         if (!this.disabled && !this.readonly) {
@@ -226,4 +226,4 @@ export class TriStateCheckbox implements ControlValueAccessor {
     exports: [TriStateCheckbox, SharedModule],
     declarations: [TriStateCheckbox]
 })
-export class TriStateCheckboxModule { }
+export class TriStateCheckboxModule {}