Skip to content

Commit

Permalink
Fix checkbox and tristatecheckbox and docs
Browse files Browse the repository at this point in the history
  • Loading branch information
SoyDiego committed Dec 14, 2023
1 parent b5d5c27 commit ed1c24a
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 25 deletions.
8 changes: 4 additions & 4 deletions src/app/components/checkbox/checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -203,13 +203,13 @@ export class Checkbox implements ControlValueAccessor {

model: any;

onModelChange: Function = () => {};
onModelChange: Function = () => { };

onModelTouched: Function = () => {};
onModelTouched: Function = () => { };

focused: boolean = false;

constructor(public cd: ChangeDetectorRef) {}
constructor(public cd: ChangeDetectorRef) { }

ngAfterContentInit() {
(this.templates as QueryList<PrimeTemplate>).forEach((item) => {
Expand Down Expand Up @@ -285,4 +285,4 @@ export class Checkbox implements ControlValueAccessor {
exports: [Checkbox, SharedModule],
declarations: [Checkbox]
})
export class CheckboxModule {}
export class CheckboxModule { }
10 changes: 5 additions & 5 deletions src/app/components/tristatecheckbox/tristatecheckbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -76,7 +76,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
Expand Down Expand Up @@ -154,9 +154,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) {
Expand Down Expand Up @@ -232,4 +232,4 @@ export class TriStateCheckbox implements ControlValueAccessor {
exports: [TriStateCheckbox, SharedModule],
declarations: [TriStateCheckbox]
})
export class TriStateCheckboxModule {}
export class TriStateCheckboxModule { }
6 changes: 3 additions & 3 deletions src/app/showcase/doc/checkbox/dynamicdoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>`,
Expand Down
24 changes: 12 additions & 12 deletions src/app/showcase/doc/checkbox/multipledoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>`,

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ import { StyleDoc } from './styledoc';
import { RouterModule } from '@angular/router';
import { AccessibilityDoc } from './accessibilitydoc';
import { ReactiveFormsDoc } from './reactiveformsdoc';
import { CheckboxModule } from 'primeng/checkbox';

@NgModule({
imports: [CommonModule, AppCodeModule, AppDocModule, TriStateCheckboxModule, FormsModule, ReactiveFormsModule, RouterModule],
exports: [AppDocModule],
declarations: [ImportDoc, BasicDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc]
})
export class TristatecheckboxDocModule {}
export class TristatecheckboxDocModule { }

0 comments on commit ed1c24a

Please sign in to comment.