From b32e66217af6b43cf565fadfec245486c01ab992 Mon Sep 17 00:00:00 2001 From: Pipicz Petra Date: Mon, 27 Jul 2026 13:44:35 +0200 Subject: [PATCH] feat(checkbox): Separate the checkbox group from the checkbox into a separate component --- projects/demo/src/app/app.routes.ts | 4 + .../checkbox-group-demo.component.html | 122 +++++++++++++ .../checkbox-group-demo.component.scss | 21 +++ .../checkbox-group-demo.component.ts | 38 +++++ .../checkbox-group-demo.service.ts | 158 +++++++++++++++++ .../checkbox/checkbox-demo.component.html | 148 +++------------- .../pages/checkbox/checkbox-demo.component.ts | 3 +- .../pages/checkbox/checkbox-demo.service.ts | 160 +----------------- projects/demo/src/assets/i18n/en.json | 1 + projects/demo/src/assets/i18n/hu.json | 1 + 10 files changed, 375 insertions(+), 281 deletions(-) create mode 100644 projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.html create mode 100644 projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.scss create mode 100644 projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.ts create mode 100644 projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.service.ts diff --git a/projects/demo/src/app/app.routes.ts b/projects/demo/src/app/app.routes.ts index 9765529f..26eb9f51 100644 --- a/projects/demo/src/app/app.routes.ts +++ b/projects/demo/src/app/app.routes.ts @@ -7,6 +7,7 @@ import { BreadcrumbDemoService } from './pages/breadcrumb/breadcrumb-demo.servic import { ButtonDemoService } from './pages/button/button-demo.service'; import { CardDemoService } from './pages/card/card-demo.service'; import { CheckboxDemoService } from './pages/checkbox/checkbox-demo.service'; +import { CheckboxGroupDemoService } from './pages/checkbox-group/checkbox-group-demo.service'; import { ChipDemoService } from './pages/chip/chip-demo.service'; import { ComponentDetailsComponent } from './pages/components/component-details/component-details.component'; import { DatepickerDemoService } from './pages/datepicker/datepicker-demo.service'; @@ -49,6 +50,8 @@ const DEMO_IMPORTS: Record Promise>> = { button: () => import('./pages/button/button-demo.component').then((module) => module.ButtonDemoComponent), card: () => import('./pages/card/card-demo.component').then((module) => module.CardDemoComponent), checkbox: () => import('./pages/checkbox/checkbox-demo.component').then((module) => module.CheckboxDemoComponent), + 'checkbox-group': () => + import('./pages/checkbox-group/checkbox-group-demo.component').then((module) => module.CheckboxGroupDemoComponent), chip: () => import('./pages/chip/chip-demo.component').then((module) => module.ChipDemoComponent), 'date-picker': () => import('./pages/datepicker/datepicker-demo.component').then((module) => module.DatepickerDemoComponent), dialog: () => import('./pages/dialog/dialog-demo.component').then((module) => module.DialogDemoComponent), @@ -138,6 +141,7 @@ export const routes: Routes = [ buildComponentRoute('button', ButtonDemoService), buildComponentRoute('card', CardDemoService), buildComponentRoute('checkbox', CheckboxDemoService), + buildComponentRoute('checkbox-group', CheckboxGroupDemoService), buildComponentRoute('chip', ChipDemoService), buildComponentRoute('date-picker', DatepickerDemoService), buildComponentRoute('dialog', DialogDemoService), diff --git a/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.html b/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.html new file mode 100644 index 00000000..84727f44 --- /dev/null +++ b/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.html @@ -0,0 +1,122 @@ + +
+ + +
+
+

{{ "COMMON.GROUPED" | translate }}

+ + @if (_checkboxGroupDemoService.helperModel.allowHint) { + Select at least two todos + } + + Tooth brushing + + + Bath + + + Sleep + + + @if (_checkboxGroupDemoService.model.showAsterisk) { + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: "Options" } }} + + } + +
+
+

{{ "CHECKBOX.GROUPED_WITH_VALIDATOR" | translate }}

+
+
+ + @if (_checkboxGroupDemoService.helperModel.allowHint) { + Select at least two toppings + } + Cheese + Ham + Corn + Mushrooms + + + {{ "CHECKBOX.ERROR.MINIMUM_COUNT_SELECTED" | translate: { minimumCount: 2 } }} + + +
+
+ + @if (_checkboxGroupDemoService.helperModel.allowHint) { + Select at least one cheese + } + Cheddar + Mozzarella + Parmesan + + + {{ "CHECKBOX.ERROR.MINIMUM_COUNT_SELECTED" | translate: { minimumCount: 1 } }} + + +
+
+
+
+ + +
+ +
+ + + + + +
+ diff --git a/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.scss b/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.scss new file mode 100644 index 00000000..1b7c8e3d --- /dev/null +++ b/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.scss @@ -0,0 +1,21 @@ +ul { + list-style: none; + margin: 0; + padding: 0; + + li { + line-height: 1.5; + } +} + +form { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.checkbox-grid { + display: flex; + flex-direction: column; + gap: 1rem; +} diff --git a/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.ts b/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.ts new file mode 100644 index 00000000..7739bf4a --- /dev/null +++ b/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.ts @@ -0,0 +1,38 @@ +import { CheckboxGroupDemoService } from './checkbox-group-demo.service'; + +import { ControlTableComponent } from '../../components/control-table/control-table.component'; +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 { Component, inject } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { IdsCheckboxComponent, IdsCheckboxGroupComponent } from '@i-cell/ids-angular/checkbox'; +import { IdsErrorDefinitionDirective, IdsErrorMessageComponent, IdsHintMessageComponent } from '@i-cell/ids-angular/forms'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-checkbox-group-demo', + imports: [ + TryoutComponent, + IdsCheckboxComponent, + IdsCheckboxGroupComponent, + ReactiveFormsModule, + FormsModule, + IdsHintMessageComponent, + IdsErrorMessageComponent, + IdsErrorDefinitionDirective, + TranslateModule, + DemoAndCodeComponent, + TryoutControlComponent, + ControlTableComponent, + ], + templateUrl: './checkbox-group-demo.component.html', + styleUrls: [ + '../demo-page.scss', + './checkbox-group-demo.component.scss', + ], +}) +export class CheckboxGroupDemoComponent { + protected _checkboxGroupDemoService = inject(CheckboxGroupDemoService); +} diff --git a/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.service.ts b/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.service.ts new file mode 100644 index 00000000..7ec2ca8e --- /dev/null +++ b/projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.service.ts @@ -0,0 +1,158 @@ +import { Injectable } from '@angular/core'; +import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms'; +import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; +import { DemoMethodConfig } from '@demo-types/demo-method.type'; +import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; +import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; +import { IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY, IdsCheckboxVariant, IdsCheckboxVariantType } from '@i-cell/ids-angular/checkbox'; +import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; + +const defaultGroupConfig = IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY(); + +type CheckboxGroupInputControls = { + groupLabel: string; + allowParent: boolean; + parentLabel: string; + size: IdsSizeType; + variant: IdsCheckboxVariantType; + orientation: IdsOrientationType; + showAsterisk: boolean; +}; + +type CheckboxGroupHelperControls = { + allowHint: boolean; +}; + +@Injectable() +export class CheckboxGroupDemoService { + public formGroup = new FormGroup({ + toppings: new FormGroup( + { + cheese: new FormControl(false, []), + ham: new FormControl(false, []), + corn: new FormControl(false, []), + mushrooms: new FormControl(false, []), + }, + { validators: this._minimumCountSelectedValidator(2) }, + ), + cheeses: new FormGroup( + { + cheddar: new FormControl(false, []), + mozzarella: new FormControl(false, []), + parmesan: new FormControl(false, []), + }, + { validators: this._minimumCountSelectedValidator(1) }, + ), + }); + + private _minimumCountSelectedValidator(minimumCount: number): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const group = control as FormGroup; + + const checkedCount = Object.values(group.controls).filter((control) => control.value === true).length; + + return checkedCount >= minimumCount ? null : { minimumCountSelected: true }; + }; + } + + public readonly groupInputControlConfig: DemoControlConfig = { + groupLabel: { + description: 'Checkbox group\'s label.', + type: 'string', + default: '-', + demoDefault: 'Options', + }, + allowParent: { + description: 'Whether to allow parent checkbox or not.', + type: 'boolean', + default: defaultGroupConfig.allowParent, + control: DemoControl.SWITCH, + }, + parentLabel: { + description: 'Parent checkbox label.', + type: 'string', + default: '-', + demoDefault: 'Parent options', + }, + size: { + description: 'Checkbox group size.', + type: 'IdsSizeType', + default: defaultGroupConfig.size, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsSize), + }, + variant: { + description: 'Checkbox group variant.', + type: 'IdsCheckboxVariantType', + default: defaultGroupConfig.variant, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsCheckboxVariant), + }, + orientation: { + description: 'Checkbox group variant.', + type: 'IdsOrientationType', + default: defaultGroupConfig.orientation, + control: DemoControl.SELECT, + list: convertEnumToStringArray(IdsOrientation), + }, + showAsterisk: { + description: 'Whether to show an asterisk before to the checkbox group label or not. IMPORTANT: This is only for display purposes.', + type: 'boolean', + default: false, + control: DemoControl.SWITCH, + }, + }; + + public readonly helperControlConfig: DemoControlConfig = { + allowHint: { + description: 'Allow hint message', + type: 'boolean', + default: true, + control: DemoControl.SWITCH, + }, + }; + + public readonly methodControlConfig: DemoMethodConfig = [ + { + name: 'selectAllChild()', + description: 'Selects all child checkboxes in the checkbox-group.', + returnType: 'void', + }, + { + name: 'deselectAllChild()', + description: 'Deselects all child checkboxes in the checkbox-group.', + returnType: 'void', + }, + ]; + + public defaults = getDefaultFromDemoConfig(this.groupInputControlConfig); + public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); + + public model: CheckboxGroupInputControls = { ...this.defaults }; + public helperModel: CheckboxGroupHelperControls = { ...this.helperDefaults }; + + public group = { + toothBrushing: true, + bath: true, + sleep: false, + }; + + public reset(): void { + this.model = { ...this.defaults }; + this.helperModel = { ...this.helperDefaults }; + + this.group = { + toothBrushing: true, + bath: true, + sleep: false, + }; + } + + public getMethodConfig(): DemoMethodConfig[] { + return [this.methodControlConfig]; + } + + public getApiConfig(): DemoControlConfig[] { + return [this.groupInputControlConfig]; + } +} 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 8b207f04..a5263643 100644 --- a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html +++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html @@ -2,7 +2,7 @@
@@ -10,47 +10,44 @@

{{ "CHECKBOX.FORMGROUP" | translate }}

- + I accept the terms and conditions @if (_checkboxDemoService.helperModel.allowHint) { Accept the terms and conditions } - {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: 'Terms and conditions' } }} + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: "Terms and conditions" } }} - + I accept the privacy policy @if (_checkboxDemoService.helperModel.allowHint) { Accept the privacy policy } - {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: 'Privacy policy' } }} + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: "Privacy policy" } }} - + I accept the marketing materials @if (_checkboxDemoService.helperModel.allowHint) { Accept the marketing materials } - {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: 'Marketing materials' } }} + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: "Marketing materials" } }} -
-
+
+

{{ "COMMON.STANDALONE" | translate }}

  • @@ -67,7 +64,9 @@

    {{ "COMMON.STANDALONE" | translate }}

    Accept the terms and conditions } - {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: 'Terms and conditions' } }} + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: "Terms and conditions" } }}
    • @@ -86,7 +85,9 @@

    {{ "COMMON.STANDALONE" | translate }}

    Accept the privacy policy } - {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: 'Privacy policy' } }} + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: "Privacy policy" } }} @@ -104,97 +105,14 @@

    {{ "COMMON.STANDALONE" | translate }}

    Accept the marketing materials } - {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: 'Marketing materials' } }} + + {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: "Marketing materials" } }}
- -
-

{{ "COMMON.GROUPED" | translate }}

- - @if (_checkboxDemoService.groupInputHelperModel.allowHint) { - Select at least two todos - } - - Tooth brushing - - - Bath - - - Sleep - - - @if (_checkboxDemoService.groupModel.showAsterisk) { - - {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: 'Options' } }} - - } - -
-
-

{{ "CHECKBOX.GROUPED_WITH_VALIDATOR" | translate }}

-
-
- - @if (_checkboxDemoService.groupInputHelperModel.allowHint) { - Select at least two toppings - } - Cheese - Ham - Corn - Mushrooms - - {{ "CHECKBOX.ERROR.MINIMUM_COUNT_SELECTED" | translate: { minimumCount: 2 } }} - - -
-
- - @if (_checkboxDemoService.groupInputHelperModel.allowHint) { - Select at least one cheese - } - Cheddar - Mozzarella - Parmesan - - {{ "CHECKBOX.ERROR.MINIMUM_COUNT_SELECTED" | translate: { minimumCount: 1 } }} - - -
-
-
@@ -218,24 +136,6 @@

{{ "CHECKBOX.GROUPED_WITH_VALIDATOR" | translate }}

[(model)]="_checkboxDemoService.helperModel" (resetted)="_checkboxDemoService.reset()" /> - - - - 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 7c595b43..11532065 100644 --- a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts +++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts @@ -7,7 +7,7 @@ import { TryoutComponent } from '../../components/tryout/tryout.component'; import { Component, inject } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { IdsCheckboxComponent, IdsCheckboxGroupComponent } from '@i-cell/ids-angular/checkbox'; +import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox'; import { IdsErrorDefinitionDirective, IdsErrorMessageComponent, IdsHintMessageComponent } from '@i-cell/ids-angular/forms'; import { TranslateModule } from '@ngx-translate/core'; @@ -16,7 +16,6 @@ import { TranslateModule } from '@ngx-translate/core'; imports: [ TryoutComponent, IdsCheckboxComponent, - IdsCheckboxGroupComponent, ReactiveFormsModule, FormsModule, IdsHintMessageComponent, diff --git a/projects/demo/src/app/pages/checkbox/checkbox-demo.service.ts b/projects/demo/src/app/pages/checkbox/checkbox-demo.service.ts index 4286f1d4..3357d752 100644 --- a/projects/demo/src/app/pages/checkbox/checkbox-demo.service.ts +++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.service.ts @@ -1,19 +1,13 @@ import { Injectable } from '@angular/core'; -import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type'; import { DemoMethodConfig } from '@demo-types/demo-method.type'; import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array'; import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config'; -import { - IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY, - IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY, - IdsCheckboxVariant, - IdsCheckboxVariantType, -} from '@i-cell/ids-angular/checkbox'; -import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; +import { IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY, IdsCheckboxVariant, IdsCheckboxVariantType } from '@i-cell/ids-angular/checkbox'; +import { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core'; const defaultConfig = IDS_CHECKBOX_DEFAULT_CONFIG_FACTORY(); -const defaultGroupConfig = IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY(); type CheckboxInputControls = { size: IdsSizeType; @@ -27,16 +21,6 @@ type CheckboxHelperControls = { allowHint: boolean; }; -type CheckboxGroupInputControls = { - groupLabel: string; - allowParent: boolean; - parentLabel: string; - size: IdsSizeType; - variant: IdsCheckboxVariantType; - orientation: IdsOrientationType; - showAsterisk: boolean; -}; - @Injectable() export class CheckboxDemoService { public form = new FormGroup({ @@ -45,34 +29,6 @@ export class CheckboxDemoService { marketing_materials: new FormControl(false, []), }); - public formGroup = new FormGroup({ - toppings: new FormGroup({ - cheese: new FormControl(false, []), - ham: new FormControl(false, []), - corn: new FormControl(false, []), - mushrooms: new FormControl(false, []), - }, { validators: this._minimumCountSelectedValidator(2) }), - cheeses: new FormGroup({ - cheddar: new FormControl(false, []), - mozzarella: new FormControl(false, []), - parmesan: new FormControl(false, []), - }, { validators: this._minimumCountSelectedValidator(1) }), - }); - - private _minimumCountSelectedValidator(minimumCount: number): ValidatorFn { - return (control: AbstractControl): ValidationErrors | null => { - const group = control as FormGroup; - - const checkedCount = Object.values(group.controls) - .filter((control) => control.value === true) - .length; - - return checkedCount >= minimumCount - ? null - : { minimumCountSelected: true }; - }; - } - public readonly inputControlConfig: DemoControlConfig = { size: { description: 'Checkbox size.', @@ -124,16 +80,10 @@ export class CheckboxDemoService { this.form.controls.terms_and_conditions.disable(); this.form.controls.privacy_policy.disable(); this.form.controls.marketing_materials.disable(); - this.formGroup.controls.toppings.controls.cheese.disable(); - this.formGroup.controls.toppings.controls.ham.disable(); - this.formGroup.controls.cheeses.disable(); } else { this.form.controls.terms_and_conditions.enable(); this.form.controls.privacy_policy.enable(); this.form.controls.marketing_materials.enable(); - this.formGroup.controls.toppings.controls.cheese.enable(); - this.formGroup.controls.toppings.controls.ham.enable(); - this.formGroup.controls.cheeses.enable(); } }, }, @@ -148,63 +98,6 @@ export class CheckboxDemoService { }, }; - public readonly groupInputControlConfig: DemoControlConfig = { - groupLabel: { - description: 'Checkbox group\'s label.', - type: 'string', - default: '-', - demoDefault: 'Options', - }, - allowParent: { - description: 'Whether to allow parent checkbox or not.', - type: 'boolean', - default: defaultGroupConfig.allowParent, - control: DemoControl.SWITCH, - }, - parentLabel: { - description: 'Parent checkbox label.', - type: 'string', - default: '-', - demoDefault: 'Parent options', - }, - size: { - description: 'Checkbox group size.', - type: 'IdsSizeType', - default: defaultGroupConfig.size, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsSize), - }, - variant: { - description: 'Checkbox group variant.', - type: 'IdsCheckboxVariantType', - default: defaultGroupConfig.variant, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsCheckboxVariant), - }, - orientation: { - description: 'Checkbox group variant.', - type: 'IdsOrientationType', - default: defaultGroupConfig.orientation, - control: DemoControl.SELECT, - list: convertEnumToStringArray(IdsOrientation), - }, - showAsterisk: { - description: 'Whether to show an asterisk before to the checkbox group label or not. IMPORTANT: This is only for display purposes.', - type: 'boolean', - default: false, - control: DemoControl.SWITCH, - }, - }; - - public readonly groupInputHelperControlConfig: DemoControlConfig = { - allowHint: { - description: 'Allow hint message', - type: 'boolean', - default: true, - control: DemoControl.SWITCH, - }, - }; - public readonly methodControlConfig: DemoMethodConfig = [ { name: 'toggle()', @@ -280,45 +173,21 @@ export class CheckboxDemoService { }, ]; - public readonly groupMethodControlConfig: DemoMethodConfig = [ - { - name: 'selectAllChild()', - description: 'Selects all child checkboxes in the checkbox-group.', - returnType: 'void', - }, - { - name: 'deselectAllChild()', - description: 'Deselects all child checkboxes in the checkbox-group.', - returnType: 'void', - }, - ]; - public defaults = getDefaultFromDemoConfig(this.inputControlConfig); public helperDefaults = getDefaultFromDemoConfig(this.helperControlConfig); - public groupDefaults = getDefaultFromDemoConfig(this.groupInputControlConfig); - public groupInputHelperDefaults = getDefaultFromDemoConfig(this.groupInputHelperControlConfig); public model: CheckboxInputControls = { ...this.defaults }; public helperModel: CheckboxHelperControls = { ...this.helperDefaults }; - public groupModel: CheckboxGroupInputControls = { ...this.groupDefaults }; - public groupInputHelperModel: CheckboxHelperControls = { ...this.groupInputHelperDefaults }; public reset(): void { this.model = { ...this.defaults }; this.helperModel = { ...this.helperDefaults }; - this.groupModel = { ...this.groupDefaults }; - this.groupInputHelperModel = { ...this.groupInputHelperDefaults }; this.standalone = { unselected: false, indeterminate: false, selected: true, }; - this.group = { - toothBrushing: true, - bath: true, - sleep: false, - }; } public standalone = { @@ -327,30 +196,11 @@ export class CheckboxDemoService { selected: true, }; - public group = { - toothBrushing: true, - bath: true, - sleep: false, - }; - public getMethodConfig(): DemoMethodConfig[] { - return [ - this.methodControlConfig, - this.groupMethodControlConfig, - ]; - } - - public getMethodTitles(): string[] { - return [ - 'Standalone Checkbox Methods', - 'Checkbox Group Methods', - ]; + return [this.methodControlConfig]; } public getApiConfig(): DemoControlConfig[] { - return [ - this.inputControlConfig, - this.groupInputControlConfig, - ]; + return [this.inputControlConfig]; } } diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json index c8f01d5e..f5b414f1 100644 --- a/projects/demo/src/assets/i18n/en.json +++ b/projects/demo/src/assets/i18n/en.json @@ -18,6 +18,7 @@ "BUTTON": "Button", "CARD": "Card", "CHECKBOX": "Checkbox", + "CHECKBOX_GROUP": "Checkbox group", "CHIP": "Chip", "DATEPICKER": "Date picker", "DIALOG": "Dialog", diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json index cdca4f44..f42c1667 100644 --- a/projects/demo/src/assets/i18n/hu.json +++ b/projects/demo/src/assets/i18n/hu.json @@ -18,6 +18,7 @@ "BUTTON": "Button", "CARD": "Card", "CHECKBOX": "Checkbox", + "CHECKBOX_GROUP": "Checkbox csoport", "CHIP": "Chip", "DATEPICKER": "Date picker", "DIALOG": "Dialog",