Feature/toggle selector description

angular.json

@@ -1,5 +1,8 @@
 {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "cli": {
+        "analytics": "8942b536-9719-42d1-b787-58e040246d59"
+    },
     "version": 1,
     "newProjectRoot": "projects",
     "projects": {

projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html

@@ -1,18 +1,18 @@
 <app-doc-page [importString]="importString">
     <ng-container example>
-        <sebng-toggle-selector
-            [multi]="multi"
-            [list]="list"
-            [(ngModel)]="model"
-            [disabled]="disabled"
-            [error]="error"
-            [errorMessage]="errorMessage"
-        ></sebng-toggle-selector>
+        <div class="toggle-selector-container">
+            <sebng-toggle-selector
+                [list]="list"
+                [(ngModel)]="model"
+                [multi]="extendedFormGroup.value.toggles.multi"
+                [error]="extendedFormGroup.value.toggles.error"
+                [errorMessage]="errorMessage"
+                [disabled]="extendedFormGroup.value.toggles.disabled"
+            ></sebng-toggle-selector>
+        </div>
     </ng-container>
     <ng-container code>{{ code }}</ng-container>
-    <div class="row" controls>
-        <sebng-checkbox class="w-100" label="Multi select" [(ngModel)]="multi"></sebng-checkbox>
-        <sebng-checkbox class="w-100" label="Error state" [(ngModel)]="error"></sebng-checkbox>
-        <sebng-checkbox class="w-100" label="Disable state" [(ngModel)]="disabled"></sebng-checkbox>
-    </div>
+    <ng-container controls>
+        <app-dynamic-form [extendedFormGroup]="extendedFormGroup"></app-dynamic-form>
+    </ng-container>
 </app-doc-page>

projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.ts

@@ -1,4 +1,6 @@
 import { Component } from "@angular/core";
+import { FormService } from "@common/dynamic-form/form.service";
+import { ExtendedFormGroup } from "@common/dynamic-form/model/custom-classes/extended-form-group";
 import { IToggleSelector } from "@sebgroup/ng-components/toggle-selector";
 
 @Component({
@@ -14,8 +16,13 @@ import { IToggleSelector } from "@sebgroup/ng-components/toggle-selector";
                 justify-content: center;
                 align-self: stretch;
             }
+
+            .toggle-selector-container {
+                max-width: 26.25rem;
+            }
         `,
     ],
+    providers: [FormService],
 })
 export class ToggleSelectorPageComponent {
     importString: string = require("!raw-loader!@sebgroup/ng-components/toggle-selector/toggle-selector.component");
@@ -32,21 +39,53 @@ export class ToggleSelectorPageComponent {
         {
             value: "1",
             label: "One Missisipi",
-            description: "with description",
+            description: "Option item with description.",
+        },
+        {
+            value: "2",
+            label: "Two mississipi",
+            icon: this.icon,
+            description: "Option item with longer description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
         },
-        { value: "2", label: "Two mississipi", icon: this.icon },
         { value: "3", label: "Three mississipi", icon: this.icon, iconPosition: "right" },
         { value: "4", label: "", icon: this.icon },
         { value: "5", label: "Five mississipi", disabled: true },
-        { value: "6", customLabel: ("<div class='custom-option w-100'>Six mississipi</div>" as unknown) as HTMLElement },
+        { value: "6", customLabel: "<div class='custom-option w-100'>Six mississipi</div>" as unknown as HTMLElement },
     ];
+
+    errorMessage: string = "I am an error message.";
+    extendedFormGroup: ExtendedFormGroup;
     model: IToggleSelector;
-    multi: boolean = true;
-    disabled: boolean = false;
-    error: boolean = false;
-    errorMessage: string = "i am an error";
 
-    constructor() {
+    constructor(private formService: FormService) {
         document.title = "Toggle Selector - SEB Angular Components";
+        this.extendedFormGroup = this.formService.dynamicFormSectionsToFormGroup([
+            {
+                key: "toggles",
+                items: [
+                    {
+                        key: "multi",
+                        controlType: "Checkbox",
+                        label: "Multi-select",
+                        description: "Enable selection of multiple options.",
+                        value: true,
+                    },
+                    {
+                        key: "error",
+                        controlType: "Checkbox",
+                        label: "Error State",
+                        description: "View the component in an invalid state.",
+                        value: false,
+                    },
+                    {
+                        key: "disabled",
+                        controlType: "Checkbox",
+                        label: "Disabled State",
+                        description: "View the component in a disabled state.",
+                        value: false,
+                    },
+                ],
+            },
+        ]);
     }
 }

projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.module.ts

@@ -5,9 +5,10 @@ import { ToggleSelectorPageComponent } from "./toggle-selector-page.component";
 import { ToggleSelectorModule } from "@sebgroup/ng-components/toggle-selector";
 import { ToggleSelectorPageRoutingModule } from "./toggle-selector-page.routing.module";
 import { DocPageModule } from "../../doc-page/doc-page.module";
+import { DynamicFormModule } from "@common/dynamic-form/dynamic-form.module";
 
 @NgModule({
     declarations: [ToggleSelectorPageComponent],
-    imports: [ToggleSelectorPageRoutingModule, ToggleSelectorModule, CommonModule, FormsModule, DocPageModule],
+    imports: [ToggleSelectorPageRoutingModule, ToggleSelectorModule, CommonModule, FormsModule, DocPageModule, DynamicFormModule],
 })
 export class ToggleSelectorPageModule {}

projects/ng-components/lib/toggle-selector/toggle-selector.component.html

@@ -28,6 +28,9 @@
         <label [attr.for]="item.optionItem.value" *ngIf="!item.optionItem.customLabel; customLabel">{{ item.optionItem.label }}</label>
         <div #customLabel [outerHTML]="item.optionItem.customLabel"></div>
     </div>
+    <p *ngIf="!!item.optionItem.description" class="small" [class.text-disabled]="disabled || item.optionItem.disabled">
+        {{ item.optionItem.description }}
+    </p>
 </ng-container>
 
 <span *ngIf="error" class="text-danger">{{ errorMessage }}</span>

projects/ng-components/lib/toggle-selector/toggle-selector.component.scss

@@ -77,3 +77,7 @@
         }
     }
 }
+
+.text-disabled {
+    color: $gray-400;
+}

projects/ng-components/lib/toggle-selector/toggle-selector.component.spec.ts

@@ -29,7 +29,7 @@ class ToggleSelectorTestComponent {
     constructor() {
         this.list = [
             { value: "1", label: "Four mississipi", disabled: true },
-            { value: "2", label: "Five mississipi" },
+            { value: "2", label: "Five mississipi", description: "Sample description." },
         ];
     }
 }
@@ -70,11 +70,13 @@ describe("ToggleSelectorComponent", () => {
         fixture.detectChanges();
         const container: DebugElement = fixture.debugElement.query(By.css(".disabled"));
         const elements: DebugElement[] = fixture.debugElement.queryAll(By.css(".toggle-selector input:disabled"));
+        const descriptions: DebugElement[] = fixture.debugElement.queryAll(By.css(".text-disabled"));
         expect(container).toBeDefined();
         expect(container).not.toBeNull();
         expect(elements).toBeDefined();
         expect(elements).toBeTruthy();
         expect(elements.length).toBe(component.list.length);
+        expect(descriptions.length).toBeGreaterThan(0);
     });
 
     it("Should disable one element when disabled prop is set to true", () => {

projects/ng-components/lib/toggle-selector/toggle-selector.component.ts

@@ -37,11 +37,17 @@ const TOGGLE_SELECTOR_CONTROL_VALUE_ACCESSOR: Provider = {
     providers: [TOGGLE_SELECTOR_CONTROL_VALUE_ACCESSOR],
 })
 export class ToggleSelectorComponent implements ControlValueAccessor, OnInit {
+    /** List of option items for the component */
     @Input() list: Array<IToggleSelector>;
+    /** Option item control name */
     @Input() name?: string = randomId("name");
+    /** Flag whether the component is allowed to select multiple options */
     @Input() multi?: boolean = false;
+    /** Flag whether the component is disabled */
     @Input() disabled?: boolean = false;
+    /** Flag whether the component is in an invalid state */
     @Input() error?: boolean = false;
+    /** Error message */
     @Input() errorMessage?: string;
 
     value: ToggleSelectorType = [];