Skip to content

Commit

Permalink
Updated demo with configurable
Browse files Browse the repository at this point in the history
  • Loading branch information
@yerramshilpa
yerramshilpa committed Jan 10, 2025
1 parent 27a96b8 commit 47c295b
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 28 deletions.
90 changes: 64 additions & 26 deletions documentation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35610,7 +35610,7 @@
},
{
"name": "FormlyButtonConfigurableComponent",
"id": "component-FormlyButtonConfigurableComponent-045cf228f13565aed2bf4bf945ebd498ac2f093ebb10bc2a0b192ff29b76a0f015c6c22cf6de34dc35745c5a7051fb10cb72c40c4923e459b46d87eaedfbdd1a",
"id": "component-FormlyButtonConfigurableComponent-bbf0765f95d5a1da7f99b7ddd7750d97dea532d1c18e5e86c4c2ff01289a9022093becc1300bbb67f4be3be2628d5215936770c94b801f1db8adf0ea3995f1a1",
"file": "libs/documentation/src/lib/storybook/formly/formly-button/formly-button-configurable/formly-button-configurable.component.ts",
"encapsulation": [],
"entryComponents": [],
Expand All @@ -35630,9 +35630,17 @@
"name": "config",
"deprecated": false,
"deprecationMessage": "",
"line": 11,
"line": 16,
"type": "object",
"decorators": []
},
{
"name": "hasModel",
"deprecated": false,
"deprecationMessage": "",
"line": 11,
"type": "boolean",
"decorators": []
}
],
"outputsClass": [],
Expand All @@ -35645,7 +35653,7 @@
"type": "FormlyFieldConfig[]",
"optional": false,
"description": "",
"line": 39
"line": 41
},
{
"name": "form",
Expand All @@ -35655,7 +35663,7 @@
"type": "",
"optional": false,
"description": "",
"line": 36
"line": 38
},
{
"name": "inputField",
Expand All @@ -35665,7 +35673,7 @@
"type": "object",
"optional": false,
"description": "",
"line": 26
"line": 28
},
{
"name": "model",
Expand All @@ -35675,7 +35683,7 @@
"type": "any",
"optional": false,
"description": "",
"line": 37
"line": 39
},
{
"name": "options",
Expand All @@ -35685,7 +35693,7 @@
"type": "FormlyFormOptions",
"optional": false,
"description": "",
"line": 38
"line": 40
}
],
"methodsClass": [],
Expand All @@ -35698,12 +35706,42 @@
"description": "",
"rawdescription": "\n",
"type": "component",
"sourceCode": "import { Component, Input } from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';\n\n@Component({\n selector: 'sds-formly-button-configurable',\n templateUrl: './formly-button-configurable.component.html',\n})\nexport class FormlyButtonConfigurableComponent {\n @Input('config')\n set config(config: object) {\n const temp = this.fields[0];\n temp['props'] = config;\n\n if (config['enableInput']) {\n temp['props'].additionalField = this.inputField;\n } else {\n temp['props'].additionalField = null;\n this.model = {};\n }\n if (config['hasModel']) {\n this.model = { search: 'Test' };\n }\n this.fields = [temp];\n }\n inputField = {\n key: 'search',\n type: 'input',\n focus: true,\n props: {\n label: 'Search',\n placeholder: '',\n },\n };\n\n form = new FormGroup({});\n model: any = {};\n options: FormlyFormOptions = {};\n fields: FormlyFieldConfig[] = [\n {\n type: 'button',\n props: {\n text: 'Search',\n },\n },\n ];\n}\n",
"sourceCode": "import { Component, Input } from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';\n\n@Component({\n selector: 'sds-formly-button-configurable',\n templateUrl: './formly-button-configurable.component.html',\n})\nexport class FormlyButtonConfigurableComponent {\n @Input('hasModel')\n set hasModel(hasModel: boolean) {\n hasModel ? (this.model = { search: 'Test' }) : {};\n }\n\n @Input('config')\n set config(config: object) {\n const temp = this.fields[0];\n temp['props'] = config;\n\n if (config['enableInput']) {\n temp['props'].additionalField = this.inputField;\n } else {\n temp['props'].additionalField = null;\n this.model = {};\n }\n this.fields = [temp];\n }\n inputField = {\n key: 'search',\n type: 'input',\n focus: true,\n props: {\n label: 'Search',\n placeholder: '',\n },\n };\n\n form = new FormGroup({});\n model: any = {};\n options: FormlyFormOptions = {};\n fields: FormlyFieldConfig[] = [\n {\n type: 'button',\n props: {\n text: 'Search',\n },\n },\n ];\n}\n",
"assetsDirs": [],
"styleUrlsData": "",
"stylesData": "",
"extends": [],
"accessors": {
"hasModel": {
"name": "hasModel",
"setSignature": {
"name": "hasModel",
"type": "void",
"deprecated": false,
"deprecationMessage": "",
"args": [
{
"name": "hasModel",
"type": "boolean",
"deprecated": false,
"deprecationMessage": ""
}
],
"returnType": "void",
"line": 11,
"jsdoctags": [
{
"name": "hasModel",
"type": "boolean",
"deprecated": false,
"deprecationMessage": "",
"tagName": {
"text": "param"
}
}
]
}
},
"config": {
"name": "config",
"setSignature": {
Expand All @@ -35720,7 +35758,7 @@
}
],
"returnType": "void",
"line": 11,
"line": 16,
"jsdoctags": [
{
"name": "config",
Expand Down Expand Up @@ -113065,7 +113103,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args) => {\n const { text, enableInput, btnClass, hasModel } = args;\n let config = formlyConfigFunction(text, enableInput, btnClass, hasModel);\n return {\n template: '<sds-formly-button-configurable [config]=\"configObj\"></sds-formly-button-configurable>',\n props: {\n configObj: config,\n ...args,\n },\n };\n}"
"defaultValue": "(args) => {\n const { text, enableInput, btnClass, btnIcon } = args;\n\n const hasModel = args.hasModel;\n let config = formlyConfigFunction(text, enableInput, btnClass, btnIcon);\n return {\n template:\n '<sds-formly-button-configurable [hasModel]=\"hasModel\" [config]=\"configObj\"></sds-formly-button-configurable>',\n props: {\n hasModel: hasModel,\n configObj: config,\n ...args,\n },\n };\n}"
},
{
"name": "Configurable",
Expand Down Expand Up @@ -114267,7 +114305,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(text: string, enableInput: boolean, btnClass: string, hasModel: boolean) => {\n return {\n text: text ?? '',\n enableInput: enableInput ?? '',\n btnClass: btnClass ?? '',\n hasModel: hasModel ?? '',\n };\n}"
"defaultValue": "(text: string, enableInput: boolean, btnClass: string, btnIcon: string) => {\n return {\n text: text ?? '',\n enableInput: enableInput ?? '',\n btnClass: btnClass ?? '',\n btnIcon:btnIcon??''\n };\n}"
},
{
"name": "formlyConfigFunction",
Expand Down Expand Up @@ -115694,19 +115732,19 @@
"name": "require",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "libs/documentation/src/lib/documentation.module.ts",
"file": "libs/documentation/src/sandbox/sandbox-utils.ts",
"deprecated": false,
"deprecationMessage": "",
"type": "any"
"type": ""
},
{
"name": "require",
"ctype": "miscellaneous",
"subtype": "variable",
"file": "libs/documentation/src/sandbox/sandbox-utils.ts",
"file": "libs/documentation/src/lib/documentation.module.ts",
"deprecated": false,
"deprecationMessage": "",
"type": ""
"type": "any"
},
{
"name": "require",
Expand Down Expand Up @@ -118885,15 +118923,15 @@
"type": "PositioningOptions",
"deprecated": false,
"deprecationMessage": "",
"destrucuredGroupId": "76709863-0c85-4bd7-a45f-1d76e20eca1f",
"destrucuredGroupId": "60f0426d-26d8-4dec-89c9-571c65fca377",
"destructuredParameter": true
},
{
"name": "baseClass",
"type": "",
"deprecated": false,
"deprecationMessage": "",
"destrucuredGroupId": "76709863-0c85-4bd7-a45f-1d76e20eca1f",
"destrucuredGroupId": "60f0426d-26d8-4dec-89c9-571c65fca377",
"destructuredParameter": true
},
{
Expand All @@ -118910,7 +118948,7 @@
"type": "PositioningOptions",
"deprecated": false,
"deprecationMessage": "",
"destrucuredGroupId": "76709863-0c85-4bd7-a45f-1d76e20eca1f",
"destrucuredGroupId": "60f0426d-26d8-4dec-89c9-571c65fca377",
"destructuredParameter": true,
"tagName": {
"text": "param"
Expand All @@ -118921,7 +118959,7 @@
"type": "",
"deprecated": false,
"deprecationMessage": "",
"destrucuredGroupId": "76709863-0c85-4bd7-a45f-1d76e20eca1f",
"destrucuredGroupId": "60f0426d-26d8-4dec-89c9-571c65fca377",
"destructuredParameter": true,
"tagName": {
"text": "param"
Expand Down Expand Up @@ -123269,7 +123307,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(args) => {\n const { text, enableInput, btnClass, hasModel } = args;\n let config = formlyConfigFunction(text, enableInput, btnClass, hasModel);\n return {\n template: '<sds-formly-button-configurable [config]=\"configObj\"></sds-formly-button-configurable>',\n props: {\n configObj: config,\n ...args,\n },\n };\n}"
"defaultValue": "(args) => {\n const { text, enableInput, btnClass, btnIcon } = args;\n\n const hasModel = args.hasModel;\n let config = formlyConfigFunction(text, enableInput, btnClass, btnIcon);\n return {\n template:\n '<sds-formly-button-configurable [hasModel]=\"hasModel\" [config]=\"configObj\"></sds-formly-button-configurable>',\n props: {\n hasModel: hasModel,\n configObj: config,\n ...args,\n },\n };\n}"
},
{
"name": "formlyConfigFunction",
Expand All @@ -123279,7 +123317,7 @@
"deprecated": false,
"deprecationMessage": "",
"type": "",
"defaultValue": "(text: string, enableInput: boolean, btnClass: string, hasModel: boolean) => {\n return {\n text: text ?? '',\n enableInput: enableInput ?? '',\n btnClass: btnClass ?? '',\n hasModel: hasModel ?? '',\n };\n}"
"defaultValue": "(text: string, enableInput: boolean, btnClass: string, btnIcon: string) => {\n return {\n text: text ?? '',\n enableInput: enableInput ?? '',\n btnClass: btnClass ?? '',\n btnIcon:btnIcon??''\n };\n}"
},
{
"name": "Introduction",
Expand Down Expand Up @@ -129886,15 +129924,15 @@
"type": "PositioningOptions",
"deprecated": false,
"deprecationMessage": "",
"destrucuredGroupId": "76709863-0c85-4bd7-a45f-1d76e20eca1f",
"destrucuredGroupId": "60f0426d-26d8-4dec-89c9-571c65fca377",
"destructuredParameter": true
},
{
"name": "baseClass",
"type": "",
"deprecated": false,
"deprecationMessage": "",
"destrucuredGroupId": "76709863-0c85-4bd7-a45f-1d76e20eca1f",
"destrucuredGroupId": "60f0426d-26d8-4dec-89c9-571c65fca377",
"destructuredParameter": true
},
{
Expand All @@ -129911,7 +129949,7 @@
"type": "PositioningOptions",
"deprecated": false,
"deprecationMessage": "",
"destrucuredGroupId": "76709863-0c85-4bd7-a45f-1d76e20eca1f",
"destrucuredGroupId": "60f0426d-26d8-4dec-89c9-571c65fca377",
"destructuredParameter": true,
"tagName": {
"text": "param"
Expand All @@ -129922,7 +129960,7 @@
"type": "",
"deprecated": false,
"deprecationMessage": "",
"destrucuredGroupId": "76709863-0c85-4bd7-a45f-1d76e20eca1f",
"destrucuredGroupId": "60f0426d-26d8-4dec-89c9-571c65fca377",
"destructuredParameter": true,
"tagName": {
"text": "param"
Expand Down Expand Up @@ -136478,7 +136516,7 @@
"linktype": "component",
"name": "FormlyButtonConfigurableComponent",
"coveragePercent": 0,
"coverageCount": "0/7",
"coverageCount": "0/8",
"status": "low"
},
{
Expand Down
5 changes: 4 additions & 1 deletion ...book/formly/formly-button/formly-button-configurable/formly-button-configurable.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ import { FormlyButtonConfigurableComponent } from './formly-button-configurable.
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { SdsFormlyModule } from '@gsa-sam/sam-formly';
import { FormlyModule } from '@ngx-formly/core';
import { info, infoCircle, NgxBootstrapIconsModule, plusCircle } from 'ngx-bootstrap-icons';
import { IconModule } from '@gsa-sam/ngx-uswds-icons';

@NgModule({
imports: [CommonModule, ReactiveFormsModule, SdsFormlyModule, FormsModule, FormlyModule.forRoot()],
imports: [CommonModule, ReactiveFormsModule, SdsFormlyModule, FormsModule, FormlyModule.forRoot(),
IconModule,NgxBootstrapIconsModule.pick({ plusCircle, infoCircle, info })],
declarations: [FormlyButtonConfigurableComponent],
exports: [FormlyButtonConfigurableComponent],
bootstrap: [FormlyButtonConfigurableComponent],
Expand Down
8 changes: 7 additions & 1 deletion libs/documentation/src/lib/storybook/formly/formly-button/formly-button.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@ export default {
type: 'boolean',
},
},
btnIcon: {
options: ['','plus-circle','info', 'info-circle'],
control: {
type: 'select'
},
},
},
} as Meta;

Expand Down Expand Up @@ -94,7 +100,7 @@ const formlyConfigFunction = (text: string, enableInput: boolean, btnClass: stri
text: text ?? '',
enableInput: enableInput ?? '',
btnClass: btnClass ?? '',
btnIcon:btnIcon??''
btnIcon: btnIcon ?? '',
};
};

Expand Down

0 comments on commit 47c295b

Please sign in to comment.