From 87c709cc1ed4d98efa4c10f149e39842732b72c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 3 Sep 2024 11:46:47 +0300 Subject: [PATCH] Remove triStateCheckbox component, fixes #15721 --- .../tristatecheckbox/ng-package.json | 6 - .../components/tristatecheckbox/public_api.ts | 2 - .../tristatecheckbox.interface.ts | 32 -- .../tristatecheckbox/tristatecheckbox.spec.ts | 204 ------------ .../tristatecheckbox/tristatecheckbox.ts | 290 ------------------ .../doc/tristatecheckbox/accessibilitydoc.ts | 58 ---- .../showcase/doc/tristatecheckbox/basicdoc.ts | 42 --- .../doc/tristatecheckbox/disableddoc.ts | 42 --- .../doc/tristatecheckbox/filleddoc.ts | 49 --- .../doc/tristatecheckbox/importdoc.ts | 12 - .../doc/tristatecheckbox/invaliddoc.ts | 53 ---- .../doc/tristatecheckbox/reactiveformsdoc.ts | 70 ----- .../showcase/doc/tristatecheckbox/styledoc.ts | 39 --- .../tristatecheckboxdoc.module.ts | 22 -- .../tristatecheckboxdemo-routing.module.ts | 9 - .../tristatecheckboxdemo.html | 1 - .../tristatecheckboxdemo.module.ts | 11 - .../tristatecheckbox/tristatecheckboxdemo.ts | 57 ---- 18 files changed, 999 deletions(-) delete mode 100644 src/app/components/tristatecheckbox/ng-package.json delete mode 100644 src/app/components/tristatecheckbox/public_api.ts delete mode 100644 src/app/components/tristatecheckbox/tristatecheckbox.interface.ts delete mode 100755 src/app/components/tristatecheckbox/tristatecheckbox.spec.ts delete mode 100755 src/app/components/tristatecheckbox/tristatecheckbox.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/accessibilitydoc.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/basicdoc.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/disableddoc.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/filleddoc.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/importdoc.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/invaliddoc.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/styledoc.ts delete mode 100644 src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts delete mode 100755 src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo-routing.module.ts delete mode 100755 src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.html delete mode 100755 src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.module.ts delete mode 100755 src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts diff --git a/src/app/components/tristatecheckbox/ng-package.json b/src/app/components/tristatecheckbox/ng-package.json deleted file mode 100644 index ab5467eb7e4..00000000000 --- a/src/app/components/tristatecheckbox/ng-package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "$schema": "ng-packagr/ng-package.schema.json", - "lib": { - "entryFile": "public_api.ts" - } - } \ No newline at end of file diff --git a/src/app/components/tristatecheckbox/public_api.ts b/src/app/components/tristatecheckbox/public_api.ts deleted file mode 100644 index 7954cd18f2e..00000000000 --- a/src/app/components/tristatecheckbox/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './tristatecheckbox'; -export * from './tristatecheckbox.interface'; diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.interface.ts b/src/app/components/tristatecheckbox/tristatecheckbox.interface.ts deleted file mode 100644 index 2b80c58e106..00000000000 --- a/src/app/components/tristatecheckbox/tristatecheckbox.interface.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TemplateRef } from '@angular/core'; -import { TriStateCheckbox } from './tristatecheckbox'; - -/** - * Defines valid templates in TriStateCheckbox. - * @group Templates - */ -export interface TriStateCheckboxTemplates { - /** - * Custom check icon template. - */ - checkicon(): TemplateRef; - /** - * Custom uncheck icon template. - */ - uncheckicon(): TemplateRef; -} -/** - * Custom change event. - * @see {@link TriStateCheckbox.onChange} - * @group Events - */ -export interface TriStateCheckboxChangeEvent { - /** - * Browser event. - */ - originalEvent: Event; - /** - * Value of the checkbox. - */ - value: boolean | null; -} diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.spec.ts b/src/app/components/tristatecheckbox/tristatecheckbox.spec.ts deleted file mode 100755 index 51a0957e550..00000000000 --- a/src/app/components/tristatecheckbox/tristatecheckbox.spec.ts +++ /dev/null @@ -1,204 +0,0 @@ -import { TestBed, ComponentFixture } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { TriStateCheckbox } from './tristatecheckbox'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { CheckIcon } from 'primeng/icons/check'; -import { TimesIcon } from 'primeng/icons/times'; - -describe('TriStateCheckbox', () => { - let tristate: TriStateCheckbox; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, CheckIcon, TimesIcon], - declarations: [TriStateCheckbox] - }); - - fixture = TestBed.createComponent(TriStateCheckbox); - tristate = fixture.componentInstance; - }); - - it('should created by default', () => { - fixture.detectChanges(); - - const tristatecheckboxEl = fixture.debugElement.query(By.css('div')); - expect(tristatecheckboxEl).toBeTruthy(); - }); - - it('should disabled', () => { - tristate.disabled = true; - tristate.label = 'Primeng!'; - fixture.detectChanges(); - - const toggleSpy = spyOn(tristate, 'toggle').and.callThrough(); - const helperInputEl = fixture.debugElement.query(By.css('.p-hidden-accessible')).children[0].nativeElement; - const checkBoxEl = fixture.debugElement.query(By.css('.p-checkbox-box')).nativeElement; - const labelEl = fixture.debugElement.query(By.css('label')).nativeElement; - checkBoxEl.click(); - fixture.detectChanges(); - - expect(helperInputEl.disabled).toEqual(true); - expect(checkBoxEl.className).toContain('p-disabled'); - expect(labelEl.className).toContain('p-disabled'); - expect(toggleSpy).not.toHaveBeenCalled(); - }); - - it('should get a label', () => { - tristate.label = 'Primeng!'; - fixture.detectChanges(); - - const labelEl = fixture.debugElement.query(By.css('label')).nativeElement; - expect(labelEl.textContent).toContain('Primeng!'); - }); - - it('should change stlye and styleClass', () => { - tristate.styleClass = 'Primeng ROCKS!'; - tristate.style = { height: '300px' }; - fixture.detectChanges(); - - const tristatecheckboxEl = fixture.debugElement.query(By.css('div')).nativeElement; - expect(tristatecheckboxEl.className).toContain('Primeng ROCKS!'); - expect(tristatecheckboxEl.style.height).toContain('300px'); - }); - - it('should get a name inputId and tabIndex', () => { - tristate.label = 'Primeng!'; - tristate.tabindex = 5; - tristate.inputId = 'Primeng'; - tristate.name = 'Primeng ROCKS!'; - fixture.detectChanges(); - - const helperInputEl = fixture.debugElement.query(By.css('input')).nativeElement; - const labelEl = fixture.debugElement.query(By.css('label')).nativeElement; - expect(helperInputEl.tabIndex).toEqual(5); - expect(helperInputEl.id).toEqual('Primeng'); - expect(helperInputEl.name).toEqual('Primeng ROCKS!'); - expect(labelEl.htmlFor).toEqual('Primeng'); - }); - - it('should value is true when click and listen onChange', () => { - tristate.label = 'Primeng'; - fixture.detectChanges(); - - let value; - tristate.onChange.subscribe((data) => (value = data)); - const onClickSpy = spyOn(tristate, 'onClick').and.callThrough(); - const checkBoxEl = fixture.debugElement.query(By.css('.p-checkbox-box')).nativeElement; - const labeEl = fixture.debugElement.query(By.css('label')).nativeElement; - checkBoxEl.click(); - fixture.detectChanges(); - - expect(tristate.value).toEqual(true); - expect(value.value).toEqual(tristate.value); - expect(checkBoxEl.className).toContain('p-highlight'); - - const checkBoxIconEl = checkBoxEl.children[0]; - expect(checkBoxIconEl.tagName.toLowerCase()).toEqual('checkicon'); - expect(labeEl.className).toContain('p-checkbox-label-active'); - expect(onClickSpy).toHaveBeenCalled(); - }); - - it('should value is true when click to label', () => { - tristate.label = 'Primeng'; - fixture.detectChanges(); - - let value; - tristate.onChange.subscribe((data) => (value = data)); - const onClickSpy = spyOn(tristate, 'onClick').and.callThrough(); - const checkBoxEl = fixture.debugElement.query(By.css('.p-checkbox-box')).nativeElement; - const labeEl = fixture.debugElement.query(By.css('label')).nativeElement; - labeEl.click(); - fixture.detectChanges(); - - expect(tristate.value).toEqual(true); - expect(value.value).toEqual(tristate.value); - expect(checkBoxEl.className).toContain('p-highlight'); - - const checkBoxIconEl = checkBoxEl.children[0]; - expect(checkBoxIconEl.tagName.toLowerCase()).toEqual('checkicon'); - expect(labeEl.className).toContain('p-checkbox-label-active'); - expect(onClickSpy).toHaveBeenCalled(); - }); - - it('should value is false when click twice', () => { - tristate.label = 'Primeng'; - fixture.detectChanges(); - - let value; - tristate.onChange.subscribe((data) => (value = data)); - const onClickSpy = spyOn(tristate, 'onClick').and.callThrough(); - const checkBoxEl = fixture.debugElement.query(By.css('.p-checkbox-box')).nativeElement; - const labeEl = fixture.debugElement.query(By.css('label')).nativeElement; - checkBoxEl.click(); - checkBoxEl.click(); - fixture.detectChanges(); - - expect(tristate.value).toEqual(false); - expect(value.value).toEqual(tristate.value); - expect(checkBoxEl.className).toContain('p-highlight'); - - const checkBoxIconEl = checkBoxEl.children[0]; - expect(checkBoxIconEl.tagName.toLowerCase()).toEqual('timesicon'); - expect(labeEl.className).toContain('p-checkbox-label-active'); - expect(onClickSpy).toHaveBeenCalledTimes(2); - }); - - it('should value is null when click three time', () => { - tristate.label = 'Primeng'; - fixture.detectChanges(); - - let value; - tristate.onChange.subscribe((data) => (value = data)); - const onClickSpy = spyOn(tristate, 'onClick').and.callThrough(); - const checkBoxEl = fixture.debugElement.query(By.css('.p-checkbox-box')).nativeElement; - const labeEl = fixture.debugElement.query(By.css('label')).nativeElement; - checkBoxEl.click(); - checkBoxEl.click(); - checkBoxEl.click(); - fixture.detectChanges(); - - expect(tristate.value).toEqual(null); - expect(value.value).toEqual(tristate.value); - expect(checkBoxEl.className).not.toContain('p-highlight'); - expect(labeEl.className).not.toContain('p-checkbox-label-active'); - expect(onClickSpy).toHaveBeenCalledTimes(3); - }); - - it('should call onFocus', () => { - tristate.label = 'Primeng'; - fixture.detectChanges(); - - let value; - tristate.onChange.subscribe((data) => (value = data)); - const onFocusSpy = spyOn(tristate, 'onFocus').and.callThrough(); - const onBlurSpy = spyOn(tristate, 'onBlur').and.callThrough(); - const inputEl = fixture.debugElement.query(By.css('input')); - const checkBoxEl = fixture.debugElement.query(By.css('.p-checkbox-box')); - inputEl.nativeElement.dispatchEvent(new Event('focus')); - fixture.detectChanges(); - - expect(onFocusSpy).toHaveBeenCalled(); - expect(checkBoxEl.nativeElement.className).toContain('p-focus'); - inputEl.nativeElement.dispatchEvent(new Event('blur')); - fixture.detectChanges(); - - expect(onBlurSpy).toHaveBeenCalled(); - expect(checkBoxEl.nativeElement.className).not.toContain('p-focus'); - }); - - it('should call onKeyDown', () => { - tristate.label = 'Primeng'; - fixture.detectChanges(); - - let value; - tristate.onChange.subscribe((data) => (value = data)); - const onKeyDownSpy = spyOn(tristate, 'onKeyDown').and.callThrough(); - const inputEl = fixture.debugElement.query(By.css('input')); - inputEl.nativeElement.dispatchEvent(new Event('keydown')); - fixture.detectChanges(); - - expect(onKeyDownSpy).toHaveBeenCalled(); - expect(tristate.value).toBeUndefined(); - }); -}); diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts deleted file mode 100755 index 508024c7f89..00000000000 --- a/src/app/components/tristatecheckbox/tristatecheckbox.ts +++ /dev/null @@ -1,290 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChildren, - EventEmitter, - Input, - NgModule, - Output, - QueryList, - TemplateRef, - ViewEncapsulation, - booleanAttribute, - forwardRef, - numberAttribute, -} from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; -import { CheckIcon } from 'primeng/icons/check'; -import { TimesIcon } from 'primeng/icons/times'; -import { Nullable } from 'primeng/ts-helpers'; -import { AutoFocusModule } from 'primeng/autofocus'; -import { TriStateCheckboxChangeEvent } from './tristatecheckbox.interface'; - -export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => TriStateCheckbox), - multi: true, -}; -/** - * TriStateCheckbox is used to select either 'true', 'false' or 'null' as the value. - * @group Components - */ -@Component({ - selector: 'p-triStateCheckbox', - template: ` -
-
- -
- -
- - `, - providers: [TRISTATECHECKBOX_VALUE_ACCESSOR], - changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, -}) -export class TriStateCheckbox implements ControlValueAccessor { - constructor( - private cd: ChangeDetectorRef, - public config: PrimeNGConfig, - ) {} - /** - * When present, it specifies that the element should be disabled. - * @group Props - */ - @Input({ transform: booleanAttribute }) disabled: boolean | undefined; - /** - * Name of the component. - * @group Props - */ - @Input() name: string | undefined; - /** - * Defines a string that labels the input for accessibility. - * @group Props - */ - @Input() ariaLabel: string | undefined; - /** - * Establishes relationships between the component and label(s) where its value should be one or more element IDs. - * @group Props - */ - @Input() ariaLabelledBy: string | undefined; - /** - * Specifies the input variant of the component. - * @group Props - */ - @Input() variant: 'filled' | 'outlined' = 'outlined'; - /** - * Index of the element in tabbing order. - * @group Props - */ - @Input({ transform: numberAttribute }) tabindex: number | undefined; - /** - * Identifier of the focus input to match a label defined for the component. - * @group Props - */ - @Input() inputId: string | undefined; - /** - * Inline style of the component. - * @group Props - */ - @Input() style: { [klass: string]: any } | null | undefined; - /** - * Style class of the component. - * @group Props - */ - @Input() styleClass: string | undefined; - /** - * Label of the checkbox. - * @group Props - */ - @Input() label: string | undefined; - /** - * When present, it specifies that the component cannot be edited. - * @group Props - */ - @Input({ transform: booleanAttribute }) readonly: boolean | undefined; - /** - * Specifies the icon for checkbox true value. - * @group Props - */ - @Input() checkboxTrueIcon: string | undefined; - /** - * Specifies the icon for checkbox false value. - * @group Props - */ - @Input() checkboxFalseIcon: string | undefined; - /** - * When present, it specifies that the component should automatically get focus on load. - * @group Props - */ - @Input({ transform: booleanAttribute }) autofocus: boolean | undefined; - /** - * Callback to invoke on value change. - * @param {TriStateCheckboxChangeEvent} event - Custom change event. - * @group Emits - */ - @Output() onChange: EventEmitter = new EventEmitter(); - - @ContentChildren(PrimeTemplate) templates!: QueryList; - - checkIconTemplate: Nullable>; - - uncheckIconTemplate: Nullable>; - - focused: Nullable; - - value: Nullable; - - onModelChange: Function = () => {}; - - onModelTouched: Function = () => {}; - - onClick(event: Event, input: HTMLInputElement) { - if (!this.disabled && !this.readonly) { - this.toggle(event); - this.focused = true; - input.focus(); - } - } - - onKeyDown(event: KeyboardEvent) { - if (event.key === 'Enter') { - this.toggle(event); - event.preventDefault(); - } - } - - toggle(event: Event) { - if (this.value == null || this.value == undefined) this.value = true; - else if (this.value == true) this.value = false; - else if (this.value == false) this.value = null; - - this.onModelChange(this.value); - this.onChange.emit({ - originalEvent: event, - value: this.value, - }); - } - - ngAfterContentInit() { - this.templates.forEach((item) => { - switch (item.getType()) { - case 'checkicon': - this.checkIconTemplate = item.template; - break; - - case 'uncheckicon': - this.uncheckIconTemplate = item.template; - break; - } - }); - } - - onFocus() { - this.focused = true; - } - - onBlur() { - this.focused = false; - this.onModelTouched(); - } - - registerOnChange(fn: Function): void { - this.onModelChange = fn; - } - - registerOnTouched(fn: Function): void { - this.onModelTouched = fn; - } - - writeValue(value: any): void { - this.value = value; - this.cd.markForCheck(); - } - - setDisabledState(disabled: boolean): void { - this.disabled = disabled; - this.cd.markForCheck(); - } -} - -@NgModule({ - imports: [CommonModule, SharedModule, AutoFocusModule, CheckIcon, TimesIcon], - exports: [TriStateCheckbox, SharedModule], - declarations: [TriStateCheckbox], -}) -export class TriStateCheckboxModule {} diff --git a/src/app/showcase/doc/tristatecheckbox/accessibilitydoc.ts b/src/app/showcase/doc/tristatecheckbox/accessibilitydoc.ts deleted file mode 100644 index 44670c964c3..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/accessibilitydoc.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '@domain/code'; - -@Component({ - selector: 'accessibility-doc', - template: `
- -

Screen Reader

-

- TriStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. Component adds an element with - aria-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the trueLabel, falseLabel and nullLabel keys of the aria property from the - locale API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification. -

- - - - -

Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the checkbox.
- space - Toggles between the values.
- enter - Toggles between the values.
-
-
` -}) -export class AccessibilityDoc { - code: Code = { - basic: `Remember Me - - -` - }; -} diff --git a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts deleted file mode 100644 index b6cb05bf9e7..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '@domain/code'; - -@Component({ - selector: 'basic-doc', - template: ` - -

A model can be bound using the standard ngModel directive.

- -
- - -
- - ` -}) -export class BasicDoc { - value: boolean | null = null; - - code: Code = { - basic: ``, - - html: `
- - -
`, - - typescript: `import { Component } from '@angular/core'; -import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'tri-state-checkbox-basic-demo', - templateUrl: './tri-state-checkbox-basic-demo.html', - standalone: true, - imports: [FormsModule, TriStateCheckboxModule] -}) -export class TriStateCheckboxBasicDemo { - value: boolean | null = null; -}` - }; -} diff --git a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts deleted file mode 100644 index f37e1979362..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '@domain/code'; - -@Component({ - selector: 'disabled-doc', - template: ` - -

When disabled is present, the element cannot be edited and focused.

- -
- - -
- - ` -}) -export class DisabledDoc { - value!: string; - - code: Code = { - basic: ``, - - html: `
- - -
`, - - typescript: `import { Component } from '@angular/core'; -import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'tri-state-checkbox-disabled-demo', - templateUrl: './tri-state-checkbox-disabled-demo.html', - standalone: true, - imports: [FormsModule, TriStateCheckboxModule] -}) -export class TriStateCheckboxDisabledDemo { - value!: string; -}` - }; -} diff --git a/src/app/showcase/doc/tristatecheckbox/filleddoc.ts b/src/app/showcase/doc/tristatecheckbox/filleddoc.ts deleted file mode 100644 index 44f53a3be86..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/filleddoc.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '@domain/code'; - -@Component({ - selector: 'filled-doc', - template: ` - -

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

- -
- -
- - ` -}) -export class FilledDoc { - value: boolean | null = null; - - code: Code = { - basic: ``, - - html: `
- - -
`, - - typescript: `import { Component } from '@angular/core'; -import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'tri-state-checkbox-filled-demo', - templateUrl: './tri-state-checkbox-filled-demo.html', - standalone: true, - imports: [FormsModule, TriStateCheckboxModule] -}) -export class TriStateCheckboxFilledDemo { - value: boolean | null = null; -}` - }; -} diff --git a/src/app/showcase/doc/tristatecheckbox/importdoc.ts b/src/app/showcase/doc/tristatecheckbox/importdoc.ts deleted file mode 100644 index 682847d92c8..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/importdoc.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '@domain/code'; - -@Component({ - selector: 'import-doc', - template: ` ` -}) -export class ImportDoc { - code: Code = { - typescript: `import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';` - }; -} diff --git a/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts b/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts deleted file mode 100644 index 7ef47cdbe4d..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '@domain/code'; - -@Component({ - selector: 'invalid-doc', - template: ` - -

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.

- -
- - -
- - ` -}) -export class InvalidDoc { - value: boolean | null = null; - - code: Code = { - basic: ` -`, - - html: `
- - -
`, - - typescript: `import { Component } from '@angular/core'; -import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'tri-state-checkbox-invalid-demo', - templateUrl: './tri-state-checkbox-invalid-demo.html', - standalone: true, - imports: [FormsModule, TriStateCheckboxModule] -}) -export class TriStateCheckboxInvalidDemo { - value: boolean | null = null; -}` - }; -} diff --git a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts deleted file mode 100644 index be981616875..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '@domain/code'; - -@Component({ - selector: 'reactive-forms-doc', - template: ` - -

TriStateCheckbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

- -
-
- - - -
- - ` -}) -export class ReactiveFormsDoc implements OnInit { - formGroup!: FormGroup; - - ngOnInit() { - this.formGroup = new FormGroup({ - checked: new FormControl(null) - }); - } - - code: Code = { - basic: `
- - -`, - - html: `
-
- - - -
`, - - typescript: `import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; -import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; - -@Component({ - selector: 'tri-state-checkbox-reactive-forms-demo', - templateUrl: './tri-state-checkbox-reactive-forms-demo.html', - standalone: true, - imports: [ReactiveFormsModule, TriStateCheckboxModule] -}) -export class TriStateCheckboxReactiveFormsDemo implements OnInit { - formGroup!: FormGroup; - - ngOnInit() { - this.formGroup = new FormGroup({ - checked: new FormControl(null) - }); - } -}` - }; -} diff --git a/src/app/showcase/doc/tristatecheckbox/styledoc.ts b/src/app/showcase/doc/tristatecheckbox/styledoc.ts deleted file mode 100644 index 8a839344a34..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/styledoc.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'style-doc', - template: ` - -

Following is the list of structural style classes, for theming classes visit theming page.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-checkboxContainer element
p-tristatechkboxContainer element
p-checkbox-boxContainer of icon.
p-checkbox-iconIcon element.
-
- ` -}) -export class StyleDoc {} diff --git a/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts b/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts deleted file mode 100644 index ee8211a8d4b..00000000000 --- a/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; -import { BasicDoc } from './basicdoc'; -import { InvalidDoc } from './invaliddoc'; -import { ImportDoc } from './importdoc'; -import { DisabledDoc } from './disableddoc'; -import { StyleDoc } from './styledoc'; -import { RouterModule } from '@angular/router'; -import { AccessibilityDoc } from './accessibilitydoc'; -import { ReactiveFormsDoc } from './reactiveformsdoc'; -import { FilledDoc } from './filleddoc'; - -@NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, TriStateCheckboxModule, FormsModule, ReactiveFormsModule, RouterModule], - exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] -}) -export class TristatecheckboxDocModule {} diff --git a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo-routing.module.ts b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo-routing.module.ts deleted file mode 100755 index f5b8ce9e047..00000000000 --- a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo-routing.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { TriStateCheckboxDemo } from './tristatecheckboxdemo'; - -@NgModule({ - imports: [RouterModule.forChild([{ path: '', component: TriStateCheckboxDemo }])], - exports: [RouterModule] -}) -export class TriStateCheckboxDemoRoutingModule {} diff --git a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.html b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.html deleted file mode 100755 index fec5df261ba..00000000000 --- a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.module.ts b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.module.ts deleted file mode 100755 index da0072d09a2..00000000000 --- a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { TristatecheckboxDocModule } from '@doc/tristatecheckbox/tristatecheckboxdoc.module'; -import { TriStateCheckboxDemo } from './tristatecheckboxdemo'; -import { TriStateCheckboxDemoRoutingModule } from './tristatecheckboxdemo-routing.module'; - -@NgModule({ - imports: [CommonModule, TriStateCheckboxDemoRoutingModule, TristatecheckboxDocModule], - declarations: [TriStateCheckboxDemo] -}) -export class TriStateCheckboxDemoModule {} diff --git a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts deleted file mode 100755 index 2c76160a328..00000000000 --- a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { Component } from '@angular/core'; -import { BasicDoc } from '@doc/tristatecheckbox/basicdoc'; -import { InvalidDoc } from '@doc/tristatecheckbox/invaliddoc'; -import { ImportDoc } from '@doc/tristatecheckbox/importdoc'; -import { DisabledDoc } from '@doc/tristatecheckbox/disableddoc'; -import { StyleDoc } from '@doc/tristatecheckbox/styledoc'; -import { AccessibilityDoc } from '@doc/tristatecheckbox/accessibilitydoc'; -import { ReactiveFormsDoc } from '@doc/tristatecheckbox/reactiveformsdoc'; -import { FilledDoc } from '@doc/tristatecheckbox/filleddoc'; - -@Component({ - templateUrl: './tristatecheckboxdemo.html' -}) -export class TriStateCheckboxDemo { - docs = [ - { - id: 'import', - label: 'Import', - component: ImportDoc - }, - { - id: 'basic', - label: 'Basic', - component: BasicDoc - }, - { - id: 'reactive-forms', - label: 'Reactive Forms', - component: ReactiveFormsDoc - }, - { - id: 'filled', - label: 'Filled', - component: FilledDoc - }, - { - id: 'invalid', - label: 'Invalid', - component: InvalidDoc - }, - { - id: 'disabled', - label: 'Disabled', - component: DisabledDoc - }, - { - id: 'style', - label: 'Style', - component: StyleDoc - }, - { - id: 'accessibility', - label: 'Accessibility', - component: AccessibilityDoc - } - ]; -}