Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TriStateCheckbox: Fix problem when click on label and updated docs #13977

Merged
merged 3 commits into from
Nov 8, 2023
Merged

TriStateCheckbox: Fix problem when click on label and updated docs #13977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0eb9dfb
fixed tristatecheckbox and added cursor pointer
SoyDiego Oct 29, 2023
a946b5f
Formatted code
SoyDiego Oct 29, 2023
19d4fc7
Merge branch 'master' into 13946-fix-tristatecheckbox
cetincakiroglu Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/app/components/tristatecheckbox/tristatecheckbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@layer primeng {
.p-tristatecheckbox-label {
cursor: pointer;
}
}
17 changes: 8 additions & 9 deletions src/app/components/tristatecheckbox/tristatecheckbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,14 @@ 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)"
[attr.data-pc-name]="'tristatecheckbox'"
[attr.data-pc-section]="'root'"
<div [ngStyle]="style"
[ngClass]="{ 'p-checkbox p-component': true, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused }"
[class]="styleClass"
(click)="onClick($event, input)"
[attr.data-pc-name]="'tristatecheckbox'"
[attr.data-pc-section]="'root'"
>
<div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'">
<div class="p-hidden-accessible">
<input
#input
[attr.id]="inputId"
Expand Down Expand Up @@ -66,7 +65,7 @@ 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,
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/tristatecheckbox/basicdoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
Expand All @@ -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: `
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>`,

Expand Down
Loading