From f70767c4102f3481afef98d1df201fb6976b45ea Mon Sep 17 00:00:00 2001 From: s6111f Date: Wed, 22 Jun 2022 17:25:13 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20option=20to=20add=20?= =?UTF-8?q?descriptions=20to=20each=20option=20item?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: #625 --- angular.json | 3 ++ .../toggle-selector-page.component.html | 26 +++++----- .../toggle-selector-page.component.ts | 51 ++++++++++++++++--- .../toggle-selector-page.module.ts | 3 +- .../toggle-selector.component.html | 3 ++ .../toggle-selector.component.scss | 4 ++ .../toggle-selector.component.spec.ts | 4 +- .../toggle-selector.component.ts | 6 +++ 8 files changed, 77 insertions(+), 23 deletions(-) diff --git a/angular.json b/angular.json index 9d161698..233026e2 100644 --- a/angular.json +++ b/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": { diff --git a/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html b/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html index 5f045a01..2d76a6e4 100644 --- a/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html +++ b/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html @@ -1,18 +1,18 @@ - +
+ +
{{ code }} -
- - - -
+ + + diff --git a/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.ts b/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.ts index 2d58dc71..9bf9631a 100644 --- a/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.ts +++ b/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({ @@ -16,6 +18,7 @@ import { IToggleSelector } from "@sebgroup/ng-components/toggle-selector"; } `, ], + providers: [FormService], }) export class ToggleSelectorPageComponent { importString: string = require("!raw-loader!@sebgroup/ng-components/toggle-selector/toggle-selector.component"); @@ -32,21 +35,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: ("
Six mississipi
" as unknown) as HTMLElement }, + { value: "6", customLabel: "
Six mississipi
" 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, + }, + ], + }, + ]); } } diff --git a/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.module.ts b/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.module.ts index eda4b12c..46ce86f2 100644 --- a/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.module.ts +++ b/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 {} diff --git a/projects/ng-components/lib/toggle-selector/toggle-selector.component.html b/projects/ng-components/lib/toggle-selector/toggle-selector.component.html index fab3e080..c24a3625 100644 --- a/projects/ng-components/lib/toggle-selector/toggle-selector.component.html +++ b/projects/ng-components/lib/toggle-selector/toggle-selector.component.html @@ -28,6 +28,9 @@
+

+ {{ item.optionItem.description }} +

{{ errorMessage }} diff --git a/projects/ng-components/lib/toggle-selector/toggle-selector.component.scss b/projects/ng-components/lib/toggle-selector/toggle-selector.component.scss index f63304bf..96ba7e8f 100644 --- a/projects/ng-components/lib/toggle-selector/toggle-selector.component.scss +++ b/projects/ng-components/lib/toggle-selector/toggle-selector.component.scss @@ -77,3 +77,7 @@ } } } + +.text-disabled { + color: $gray-400; +} diff --git a/projects/ng-components/lib/toggle-selector/toggle-selector.component.spec.ts b/projects/ng-components/lib/toggle-selector/toggle-selector.component.spec.ts index b2745d6d..c1e715f7 100644 --- a/projects/ng-components/lib/toggle-selector/toggle-selector.component.spec.ts +++ b/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", () => { diff --git a/projects/ng-components/lib/toggle-selector/toggle-selector.component.ts b/projects/ng-components/lib/toggle-selector/toggle-selector.component.ts index 48f8b375..807ce98e 100644 --- a/projects/ng-components/lib/toggle-selector/toggle-selector.component.ts +++ b/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; + /** 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 = []; From 209dd44960e16880a2479ab5ef8ae428a37f361a Mon Sep 17 00:00:00 2001 From: s6111f Date: Wed, 22 Jun 2022 17:29:10 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=20adjust=20width=20in?= =?UTF-8?q?=20pages=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../toggle-selector-page/toggle-selector-page.component.html | 2 +- .../toggle-selector-page/toggle-selector-page.component.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html b/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html index 2d76a6e4..77dc7f29 100644 --- a/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html +++ b/projects/docs/src/app/docs-wrapper/pages/toggle-selector-page/toggle-selector-page.component.html @@ -1,6 +1,6 @@ -
+