From e667f8257da465f519f07042e61aadf8eb4f5ee1 Mon Sep 17 00:00:00 2001 From: Laszlo Ilonka Date: Wed, 19 Aug 2026 12:12:28 +0200 Subject: [PATCH] feat(checkbox): add checkbox samples fix(checkbox): displaying error message if markedAsTouched IDS-2315 --- .../checkbox-disabled-example.component.html | 5 + .../checkbox-disabled-example.component.ts | 9 ++ .../checkbox/checkbox-examples.ts | 109 ++++++++++++++++++ ...eckbox-form-control-example.component.html | 10 ++ ...checkbox-form-control-example.component.ts | 26 +++++ ...x-form-control-name-example.component.html | 10 ++ ...box-form-control-name-example.component.ts | 27 +++++ .../checkbox-hint-example.component.html | 4 + .../checkbox-hint-example.component.ts | 13 +++ .../checkbox-ng-model-example.component.html | 10 ++ .../checkbox-ng-model-example.component.ts | 25 ++++ .../checkbox-size-example.component.html | 6 + .../checkbox-size-example.component.ts | 9 ++ .../checkbox-states-example.component.html | 5 + .../checkbox-states-example.component.ts | 9 ++ .../checkbox-variants-example.component.html | 5 + .../checkbox-variants-example.component.ts | 9 ++ .../checkbox/checkbox-demo.component.html | 6 + .../pages/checkbox/checkbox-demo.component.ts | 4 + projects/demo/src/assets/i18n/en.json | 34 ++++++ projects/demo/src/assets/i18n/hu.json | 34 ++++++ .../widgets/checkbox/checkbox.component.html | 2 +- .../widgets/checkbox/checkbox.component.ts | 6 +- 23 files changed, 374 insertions(+), 3 deletions(-) create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-examples.ts create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.html create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.html create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.ts create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.html create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.ts create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.html create mode 100644 projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html new file mode 100644 index 00000000..58f8efff --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html @@ -0,0 +1,5 @@ +
+ Disabled + Disabled checked + Readonly +
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts new file mode 100644 index 00000000..c2271d20 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; + +@Component({ + selector: 'app-checkbox-disabled-example', + imports: [IdsCheckboxComponent], + templateUrl: './checkbox-disabled-example.component.html', +}) +export class CheckboxDisabledExampleComponent {} diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-examples.ts b/projects/demo/src/app/components-example/checkbox/checkbox-examples.ts new file mode 100644 index 00000000..1397740f --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-examples.ts @@ -0,0 +1,109 @@ +import { CheckboxDisabledExampleComponent } from './checkbox-disabled-example/checkbox-disabled-example.component'; +import { CheckboxFormControlExampleComponent } from './checkbox-form-control-example/checkbox-form-control-example.component'; +import { CheckboxFormControlNameExampleComponent } from './checkbox-form-control-name-example/checkbox-form-control-name-example.component'; +import { CheckboxHintExampleComponent } from './checkbox-hint-example/checkbox-hint-example.component'; +import { CheckboxNgModelExampleComponent } from './checkbox-ng-model-example/checkbox-ng-model-example.component'; +import { CheckboxSizeExampleComponent } from './checkbox-size-example/checkbox-size-example.component'; +import { CheckboxStatesExampleComponent } from './checkbox-states-example/checkbox-states-example.component'; +import { CheckboxVariantsExampleComponent } from './checkbox-variants-example/checkbox-variants-example.component'; + +import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model'; + +export const CHECKBOX_EXAMPLES: IdsExampleDef[] = [ + { + id: 'checkbox-variants', + title: 'EXAMPLES.CHECKBOX.VARIANTS.TITLE', + description: 'EXAMPLES.CHECKBOX.VARIANTS.DESCRIPTION', + component: CheckboxVariantsExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/checkbox/checkbox-variants-example/checkbox-variants-example.component.html', + TSpath: 'assets/examples/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts', + }, + ], + }, + { + id: 'checkbox-sizes', + title: 'EXAMPLES.CHECKBOX.SIZES.TITLE', + description: 'EXAMPLES.CHECKBOX.SIZES.DESCRIPTION', + component: CheckboxSizeExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/checkbox/checkbox-size-example/checkbox-size-example.component.html', + TSpath: 'assets/examples/checkbox/checkbox-size-example/checkbox-size-example.component.ts', + }, + ], + }, + { + id: 'checkbox-states', + title: 'EXAMPLES.CHECKBOX.STATES.TITLE', + description: 'EXAMPLES.CHECKBOX.STATES.DESCRIPTION', + component: CheckboxStatesExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/checkbox/checkbox-states-example/checkbox-states-example.component.html', + TSpath: 'assets/examples/checkbox/checkbox-states-example/checkbox-states-example.component.ts', + }, + ], + }, + { + id: 'checkbox-disabled', + title: 'EXAMPLES.CHECKBOX.DISABLED.TITLE', + description: 'EXAMPLES.CHECKBOX.DISABLED.DESCRIPTION', + component: CheckboxDisabledExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html', + TSpath: 'assets/examples/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts', + }, + ], + }, + { + id: 'checkbox-hint', + title: 'EXAMPLES.CHECKBOX.HINT.TITLE', + description: 'EXAMPLES.CHECKBOX.HINT.DESCRIPTION', + component: CheckboxHintExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/checkbox/checkbox-hint-example/checkbox-hint-example.component.html', + TSpath: 'assets/examples/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts', + }, + ], + }, + { + id: 'checkbox-ng-model', + title: 'EXAMPLES.CHECKBOX.NG_MODEL.TITLE', + description: 'EXAMPLES.CHECKBOX.NG_MODEL.DESCRIPTION', + component: CheckboxNgModelExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html', + TSpath: 'assets/examples/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts', + }, + ], + }, + { + id: 'checkbox-form-control', + title: 'EXAMPLES.CHECKBOX.FORM_CONTROL.TITLE', + description: 'EXAMPLES.CHECKBOX.FORM_CONTROL.DESCRIPTION', + component: CheckboxFormControlExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html', + TSpath: 'assets/examples/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts', + }, + ], + }, + { + id: 'checkbox-form-control-name', + title: 'EXAMPLES.CHECKBOX.FORM_CONTROL_NAME.TITLE', + description: 'EXAMPLES.CHECKBOX.FORM_CONTROL_NAME.DESCRIPTION', + component: CheckboxFormControlNameExampleComponent, + files: [ + { + HTMLpath: 'assets/examples/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html', + TSpath: 'assets/examples/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts', + }, + ], + }, +]; diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html new file mode 100644 index 00000000..318719f7 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html @@ -0,0 +1,10 @@ +
+ I accept the marketing materials + + I accept the terms and conditions + + Terms and conditions is required. + + + +
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts new file mode 100644 index 00000000..5bdfdfd3 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; +import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms'; +import { IdsButtonComponent } from '@i-cell/ids-angular/button'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; +import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms'; + +@Component({ + selector: 'app-checkbox-form-control-example', + imports: [ + IdsButtonComponent, + IdsCheckboxComponent, + IdsErrorDefinitionDirective, + IdsErrorMessageComponent, + ReactiveFormsModule, + ], + templateUrl: './checkbox-form-control-example.component.html', +}) +export class CheckboxFormControlExampleComponent { + public marketing = new FormControl(false); + public accepted = new FormControl(false, { validators: [Validators.requiredTrue] }); + + public onSubmit(event: Event): void { + event.preventDefault(); + this.accepted.markAsTouched(); + } +} diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html new file mode 100644 index 00000000..42bf8e16 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html @@ -0,0 +1,10 @@ +
+ I accept the marketing materials + + I accept the terms and conditions + + Terms and conditions is required. + + + +
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts new file mode 100644 index 00000000..e53e9e91 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { IdsButtonComponent } from '@i-cell/ids-angular/button'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; +import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms'; + +@Component({ + selector: 'app-checkbox-form-control-name-example', + imports: [ + IdsButtonComponent, + IdsCheckboxComponent, + IdsErrorDefinitionDirective, + IdsErrorMessageComponent, + ReactiveFormsModule, + ], + templateUrl: './checkbox-form-control-name-example.component.html', +}) +export class CheckboxFormControlNameExampleComponent { + public form = new FormGroup({ + marketing: new FormControl(false), + accepted: new FormControl(false, { validators: [Validators.requiredTrue] }), + }); + + public onSubmit(): void { + this.form.controls.accepted.markAsTouched(); + } +} diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.html new file mode 100644 index 00000000..ff345aee --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.html @@ -0,0 +1,4 @@ + + I accept the terms and conditions + Accept the terms and conditions + diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts new file mode 100644 index 00000000..b2976832 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; +import { IdsHintMessageComponent } from '@i-cell/ids-angular/forms'; + +@Component({ + selector: 'app-checkbox-hint-example', + imports: [ + IdsCheckboxComponent, + IdsHintMessageComponent, + ], + templateUrl: './checkbox-hint-example.component.html', +}) +export class CheckboxHintExampleComponent {} diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html new file mode 100644 index 00000000..bcb1f6f7 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html @@ -0,0 +1,10 @@ +
+ I accept the marketing materials + + I accept the terms and conditions + + Terms and conditions is required. + + + +
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts new file mode 100644 index 00000000..77df245d --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import { FormsModule, NgModel } from '@angular/forms'; +import { IdsButtonComponent } from '@i-cell/ids-angular/button'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; +import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms'; + +@Component({ + selector: 'app-checkbox-ng-model-example', + imports: [ + FormsModule, + IdsButtonComponent, + IdsCheckboxComponent, + IdsErrorDefinitionDirective, + IdsErrorMessageComponent, + ], + templateUrl: './checkbox-ng-model-example.component.html', +}) +export class CheckboxNgModelExampleComponent { + public marketing = false; + public accepted = false; + + public onSubmit(accepted: NgModel): void { + accepted.control.markAsTouched(); + } +} diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.html new file mode 100644 index 00000000..cad1b943 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.html @@ -0,0 +1,6 @@ +
+ Dense + Compact + Comfortable + Spacious +
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.ts new file mode 100644 index 00000000..4aa5e2c0 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; + +@Component({ + selector: 'app-checkbox-size-example', + imports: [IdsCheckboxComponent], + templateUrl: './checkbox-size-example.component.html', +}) +export class CheckboxSizeExampleComponent {} diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.html new file mode 100644 index 00000000..4bb950d8 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.html @@ -0,0 +1,5 @@ +
+ Unchecked + Checked + Indeterminate +
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.ts new file mode 100644 index 00000000..58a5f194 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; + +@Component({ + selector: 'app-checkbox-states-example', + imports: [IdsCheckboxComponent], + templateUrl: './checkbox-states-example.component.html', +}) +export class CheckboxStatesExampleComponent {} diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.html new file mode 100644 index 00000000..a437d95a --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.html @@ -0,0 +1,5 @@ +
+ Surface + Light + Dark +
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts new file mode 100644 index 00000000..b3d24106 --- /dev/null +++ b/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; + +@Component({ + selector: 'app-checkbox-variants-example', + imports: [IdsCheckboxComponent], + templateUrl: './checkbox-variants-example.component.html', +}) +export class CheckboxVariantsExampleComponent {} diff --git a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html index a5263643..065ec98d 100644 --- a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html +++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html @@ -139,3 +139,9 @@

{{ "COMMON.STANDALONE" | translate }}

+ +
+ @for (example of checkboxExamples; track example.id) { + + } +
diff --git a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts index 11532065..8815db51 100644 --- a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts +++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts @@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component'; import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component'; import { TryoutComponent } from '../../components/tryout/tryout.component'; +import { CHECKBOX_EXAMPLES } from '../../components-example/checkbox/checkbox-examples'; +import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component'; import { Component, inject } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @@ -25,6 +27,7 @@ import { TranslateModule } from '@ngx-translate/core'; DemoAndCodeComponent, TryoutControlComponent, ControlTableComponent, + IdsExampleViewerComponent, ], templateUrl: './checkbox-demo.component.html', styleUrls: [ @@ -34,4 +37,5 @@ import { TranslateModule } from '@ngx-translate/core'; }) export class CheckboxDemoComponent { protected _checkboxDemoService = inject(CheckboxDemoService); + public readonly checkboxExamples = CHECKBOX_EXAMPLES; } diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json index 3ffa9882..c1a61831 100644 --- a/projects/demo/src/assets/i18n/en.json +++ b/projects/demo/src/assets/i18n/en.json @@ -294,6 +294,40 @@ "FOOTER_BUTTON": "Learn more" } } + }, + "CHECKBOX": { + "VARIANTS": { + "TITLE": "Checkbox variants", + "DESCRIPTION": "Checkboxes with different color variants: surface (default), light, and dark." + }, + "SIZES": { + "TITLE": "Checkbox sizes", + "DESCRIPTION": "Checkboxes with different sizes: dense, compact (default), comfortable and spacious." + }, + "STATES": { + "TITLE": "Checkbox states", + "DESCRIPTION": "Checkboxes can be unchecked, checked, or indeterminate." + }, + "DISABLED": { + "TITLE": "Disabled and readonly", + "DESCRIPTION": "Disabled checkboxes cannot be changed. Readonly checkboxes keep their value but are not interactive." + }, + "HINT": { + "TITLE": "Checkbox with hint", + "DESCRIPTION": "Checkboxes can project a hint message below the label." + }, + "NG_MODEL": { + "TITLE": "Checkbox with ngModel", + "DESCRIPTION": "Bind checkboxes with Angular template-driven forms using ngModel. Use the required input to add a requiredTrue validator." + }, + "FORM_CONTROL": { + "TITLE": "Checkbox with FormControl", + "DESCRIPTION": "Bind checkboxes with Angular reactive forms using FormControl. Use Validators.requiredTrue for a required checkbox." + }, + "FORM_CONTROL_NAME": { + "TITLE": "Checkbox with formControlName", + "DESCRIPTION": "Bind checkboxes inside a FormGroup using formControlName. Use Validators.requiredTrue on the control; the required input cannot be used with formControlName." + } } } } diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json index 5ffa1001..f3b82408 100644 --- a/projects/demo/src/assets/i18n/hu.json +++ b/projects/demo/src/assets/i18n/hu.json @@ -290,6 +290,40 @@ "FOOTER_BUTTON": "Tudj meg többet" } } + }, + "CHECKBOX": { + "VARIANTS": { + "TITLE": "Checkbox változatai", + "DESCRIPTION": "A checkbox komponens különböző változatai: surface (alapértelmezett), light és dark." + }, + "SIZES": { + "TITLE": "Checkbox méretei", + "DESCRIPTION": "A checkbox komponens különböző méretei: dense, compact (alapértelmezett), comfortable és spacious." + }, + "STATES": { + "TITLE": "Checkbox állapotai", + "DESCRIPTION": "A checkbox lehet unchecked, checked vagy indeterminate." + }, + "DISABLED": { + "TITLE": "Disabled és readonly", + "DESCRIPTION": "A letiltott checkbox nem módosítható. A readonly checkbox megtartja az értékét, de nem interaktív." + }, + "HINT": { + "TITLE": "Checkbox hint üzenettel", + "DESCRIPTION": "A checkbox label alá hint üzenet projektálható." + }, + "NG_MODEL": { + "TITLE": "Checkbox ngModel-lel", + "DESCRIPTION": "A checkboxok Angular template-driven formokhoz ngModel-lel köthetők. A required input requiredTrue validatort ad a checkboxhoz." + }, + "FORM_CONTROL": { + "TITLE": "Checkbox FormControl-lal", + "DESCRIPTION": "A checkboxok Angular reactive formokhoz FormControl-lal köthetők. Kötelező checkboxhoz a Validators.requiredTrue validatort használja." + }, + "FORM_CONTROL_NAME": { + "TITLE": "Checkbox formControlName-mel", + "DESCRIPTION": "A checkboxok egy FormGroup-on belül formControlName-mel köthetők. Kötelező checkboxhoz a Validators.requiredTrue validatort használja; a required input formControlName-mel nem használható." + } } } diff --git a/projects/widgets/checkbox/checkbox.component.html b/projects/widgets/checkbox/checkbox.component.html index 3f99dfec..cf79bd1d 100644 --- a/projects/widgets/checkbox/checkbox.component.html +++ b/projects/widgets/checkbox/checkbox.component.html @@ -40,7 +40,7 @@ - @let messages = displayedMessages; + @let messages = _displayedMessages(); @if (messages) {
@switch (messages) { diff --git a/projects/widgets/checkbox/checkbox.component.ts b/projects/widgets/checkbox/checkbox.component.ts index 5843f613..6a0731df 100644 --- a/projects/widgets/checkbox/checkbox.component.ts +++ b/projects/widgets/checkbox/checkbox.component.ts @@ -288,7 +288,9 @@ export class IdsCheckboxComponent } } - public get displayedMessages(): 'error' | 'hint' | undefined { + protected _displayedMessages = computed((): 'error' | 'hint' | undefined => { + this._controlState(); + const control = this.controlDir()?.control; if ( this._errorMessages().length > 0 && @@ -303,7 +305,7 @@ export class IdsCheckboxComponent return 'hint'; } return undefined; - } + }); private _assertRequiredInputIsSupported(): void { if (this.required() && this.controlDir() instanceof FormControlName) {