@skyux/inline-form 9.0.0-alpha.0 → 9.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +25 -25
- package/package.json +3 -3
package/documentation.json
CHANGED
|
@@ -1060,29 +1060,24 @@
|
|
|
1060
1060
|
},
|
|
1061
1061
|
"codeExamples": [
|
|
1062
1062
|
{
|
|
1063
|
-
"fileName": "inline-form-demo.
|
|
1064
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/
|
|
1065
|
-
"rawContents": "
|
|
1063
|
+
"fileName": "inline-form-demo.module.ts",
|
|
1064
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/repeaters/inline-form-demo.module.ts",
|
|
1065
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyInlineFormModule } from '@skyux/inline-form';\nimport { SkyRepeaterModule } from '@skyux/lists';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { InlineFormDemoComponent } from './inline-form-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyIconModule,\n SkyInlineFormModule,\n SkyInputBoxModule,\n SkyRepeaterModule,\n SkyThemeModule,\n ],\n exports: [InlineFormDemoComponent],\n declarations: [InlineFormDemoComponent],\n})\nexport class InlineFormDemoModule {}\n"
|
|
1066
1066
|
},
|
|
1067
1067
|
{
|
|
1068
1068
|
"fileName": "inline-form-demo.component.ts",
|
|
1069
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/
|
|
1070
|
-
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n SkyInlineFormButtonLayout,\n SkyInlineFormCloseArgs,\n SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\n@Component({\n selector: 'app-inline-form-demo',\n templateUrl: './inline-form-demo.component.html',\n})\nexport class InlineFormDemoComponent {\n public
|
|
1071
|
-
},
|
|
1072
|
-
{
|
|
1073
|
-
"fileName": "inline-form-demo.module.ts",
|
|
1074
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/basic/inline-form-demo.module.ts",
|
|
1075
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyInlineFormModule } from '@skyux/inline-form';\n\nimport { InlineFormDemoComponent } from './inline-form-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyIconModule,\n SkyInlineFormModule,\n SkyInputBoxModule,\n ],\n exports: [InlineFormDemoComponent],\n declarations: [InlineFormDemoComponent],\n})\nexport class InlineFormDemoModule {}\n"
|
|
1069
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/repeaters/inline-form-demo.component.ts",
|
|
1070
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n SkyInlineFormButtonLayout,\n SkyInlineFormCloseArgs,\n SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\nimport { InlineFormDemoItem } from './inline-form-demo-item';\n\n@Component({\n selector: 'app-inline-form-demo',\n templateUrl: './inline-form-demo.component.html',\n})\nexport class InlineFormDemoComponent {\n public activeInlineFormId: string | undefined;\n\n public inlineFormConfig: SkyInlineFormConfig = {\n buttonLayout: SkyInlineFormButtonLayout.SaveCancel,\n };\n\n public items: InlineFormDemoItem[] = [\n {\n id: '1',\n title: '2019 Spring Gala',\n note: 'Gala for friends and family',\n },\n {\n id: '2',\n title: '2019 Special Winter Event',\n note: 'A special event',\n },\n {\n id: '3',\n title: '2019 Donor Appreciation Event',\n note: 'Event for all donors and families',\n },\n {\n id: '4',\n title: '2020 Spring Gala',\n note: 'Gala for friends and family',\n },\n ];\n\n public myForm: FormGroup;\n\n constructor(formBuilder: FormBuilder) {\n this.myForm = formBuilder.group({\n id: new FormControl(),\n title: new FormControl(),\n note: new FormControl(),\n });\n }\n\n public showInlineForm(item: InlineFormDemoItem): void {\n this.activeInlineFormId = item.id;\n this.myForm.patchValue({\n note: item.note,\n title: item.title,\n });\n }\n\n public onInlineFormClose(args: SkyInlineFormCloseArgs): void {\n if (args.reason === 'save') {\n const found = this.items.find(\n (item) => item.id === this.activeInlineFormId\n );\n if (found) {\n found.note = this.myForm.get('note')?.value;\n found.title = this.myForm.get('title')?.value;\n }\n }\n\n this.myForm.patchValue({\n note: undefined,\n title: undefined,\n });\n\n // Close the active form.\n this.activeInlineFormId = undefined;\n }\n}\n"
|
|
1076
1071
|
},
|
|
1077
1072
|
{
|
|
1078
1073
|
"fileName": "inline-form-demo.component.html",
|
|
1079
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/
|
|
1080
|
-
"rawContents": "<sky-
|
|
1074
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/repeaters/inline-form-demo.component.html",
|
|
1075
|
+
"rawContents": "<sky-repeater>\n <sky-repeater-item\n *ngFor=\"let item of items\"\n [inlineFormConfig]=\"inlineFormConfig\"\n [inlineFormTemplate]=\"inlineFormTemplate\"\n [showInlineForm]=\"activeInlineFormId === item.id\"\n (inlineFormClose)=\"onInlineFormClose($event)\"\n >\n <sky-repeater-item-title>\n <div class=\"sky-font-emphasized\">\n {{ item.title }}\n </div>\n </sky-repeater-item-title>\n <sky-repeater-item-context-menu>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"showInlineForm(item)\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"pencil\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"edit\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </sky-repeater-item-context-menu>\n\n <sky-repeater-item-content>\n {{ item.note }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n</sky-repeater>\n\n<ng-template #inlineFormTemplate>\n <form novalidate [formGroup]=\"myForm\">\n <sky-input-box labelTex=\"Title\" stacked=\"true\">\n <input formControlName=\"title\" type=\"text\" />\n </sky-input-box>\n <sky-input-box labelText=\"Note\">\n <input formControlName=\"note\" type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\n"
|
|
1081
1076
|
},
|
|
1082
1077
|
{
|
|
1083
|
-
"fileName": "inline-form-demo.
|
|
1084
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/
|
|
1085
|
-
"rawContents": "
|
|
1078
|
+
"fileName": "inline-form-demo-item.ts",
|
|
1079
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/repeaters/inline-form-demo-item.ts",
|
|
1080
|
+
"rawContents": "export interface InlineFormDemoItem {\n id: string;\n title: string | undefined;\n note: string | undefined;\n}\n"
|
|
1086
1081
|
},
|
|
1087
1082
|
{
|
|
1088
1083
|
"fileName": "inline-form-demo.module.ts",
|
|
@@ -1090,24 +1085,29 @@
|
|
|
1090
1085
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyInlineFormModule } from '@skyux/inline-form';\n\nimport { InlineFormDemoComponent } from './inline-form-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyIconModule,\n SkyInlineFormModule,\n SkyInputBoxModule,\n ],\n exports: [InlineFormDemoComponent],\n declarations: [InlineFormDemoComponent],\n})\nexport class InlineFormDemoModule {}\n"
|
|
1091
1086
|
},
|
|
1092
1087
|
{
|
|
1093
|
-
"fileName": "inline-form-demo
|
|
1094
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/
|
|
1095
|
-
"rawContents": "
|
|
1088
|
+
"fileName": "inline-form-demo.component.ts",
|
|
1089
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/custom-buttons/inline-form-demo.component.ts",
|
|
1090
|
+
"rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n SkyInlineFormButtonLayout,\n SkyInlineFormCloseArgs,\n SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\n@Component({\n selector: 'app-inline-form-demo',\n templateUrl: './inline-form-demo.component.html',\n})\nexport class InlineFormDemoComponent implements OnInit {\n public firstName = 'Jane';\n\n public myForm: FormGroup;\n\n public inlineFormConfig: SkyInlineFormConfig = {\n buttonLayout: SkyInlineFormButtonLayout.Custom,\n buttons: [\n {\n action: 'save',\n text: 'Save',\n styleType: 'primary',\n },\n {\n action: 'clear',\n text: 'Clear',\n styleType: 'default',\n },\n {\n action: 'reset',\n text: 'Reset',\n styleType: 'default',\n },\n {\n action: 'cancel',\n text: 'Cancel',\n styleType: 'link',\n },\n ],\n };\n\n public showForm = false;\n\n constructor(formBuilder: FormBuilder) {\n this.myForm = formBuilder.group({\n myFirstName: new FormControl(),\n });\n }\n\n public ngOnInit(): void {\n this.myForm.valueChanges.subscribe(() => {\n if (\n this.inlineFormConfig.buttons &&\n this.inlineFormConfig.buttons[0].disabled !== this.myForm.invalid\n ) {\n this.inlineFormConfig.buttons[0].disabled = this.myForm.invalid;\n this.inlineFormConfig = { ...{}, ...this.inlineFormConfig };\n }\n });\n }\n\n public onInlineFormClose(args: SkyInlineFormCloseArgs): void {\n switch (args.reason) {\n case 'save':\n this.firstName = this.myForm.get('myFirstName')?.value;\n this.showForm = false;\n break;\n case 'clear':\n this.myForm.get('myFirstName')?.patchValue(undefined);\n break;\n case 'reset':\n this.myForm.get('myFirstName')?.setValue(this.firstName);\n break;\n default:\n this.showForm = false;\n break;\n }\n }\n\n public onInlineFormOpen(): void {\n this.showForm = true;\n this.myForm.patchValue({\n myFirstName: this.firstName,\n });\n }\n}\n"
|
|
1096
1091
|
},
|
|
1097
1092
|
{
|
|
1098
1093
|
"fileName": "inline-form-demo.component.html",
|
|
1099
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/
|
|
1100
|
-
"rawContents": "<sky-
|
|
1094
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/custom-buttons/inline-form-demo.component.html",
|
|
1095
|
+
"rawContents": "<sky-inline-form\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon icon=\"pencil\"></sky-icon>\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form novalidate [formGroup]=\"myForm\">\n <div class=\"sky-form-group\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"myFirstName\" required type=\"text\" />\n </sky-input-box>\n </div>\n </form>\n</ng-template>\n"
|
|
1096
|
+
},
|
|
1097
|
+
{
|
|
1098
|
+
"fileName": "inline-form-demo.module.ts",
|
|
1099
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/basic/inline-form-demo.module.ts",
|
|
1100
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyInlineFormModule } from '@skyux/inline-form';\n\nimport { InlineFormDemoComponent } from './inline-form-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyIconModule,\n SkyInlineFormModule,\n SkyInputBoxModule,\n ],\n exports: [InlineFormDemoComponent],\n declarations: [InlineFormDemoComponent],\n})\nexport class InlineFormDemoModule {}\n"
|
|
1101
1101
|
},
|
|
1102
1102
|
{
|
|
1103
1103
|
"fileName": "inline-form-demo.component.ts",
|
|
1104
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/
|
|
1105
|
-
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n SkyInlineFormButtonLayout,\n SkyInlineFormCloseArgs,\n SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\
|
|
1104
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/basic/inline-form-demo.component.ts",
|
|
1105
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n SkyInlineFormButtonLayout,\n SkyInlineFormCloseArgs,\n SkyInlineFormConfig,\n} from '@skyux/inline-form';\n\n@Component({\n selector: 'app-inline-form-demo',\n templateUrl: './inline-form-demo.component.html',\n})\nexport class InlineFormDemoComponent {\n public firstName = 'Jane';\n\n public myForm: FormGroup;\n\n public inlineFormConfig: SkyInlineFormConfig = {\n buttonLayout: SkyInlineFormButtonLayout.SaveCancel,\n };\n\n public showForm = false;\n\n constructor(formBuilder: FormBuilder) {\n this.myForm = formBuilder.group({\n myFirstName: new FormControl(),\n });\n }\n\n public onInlineFormClose(args: SkyInlineFormCloseArgs): void {\n if (args.reason === 'save') {\n this.firstName = this.myForm.get('myFirstName')?.value;\n }\n\n this.showForm = false;\n this.myForm.patchValue({\n myFirstName: undefined,\n });\n }\n\n public onInlineFormOpen(): void {\n this.showForm = true;\n this.myForm.patchValue({\n myFirstName: this.firstName,\n });\n }\n}\n"
|
|
1106
1106
|
},
|
|
1107
1107
|
{
|
|
1108
|
-
"fileName": "inline-form-demo.
|
|
1109
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/
|
|
1110
|
-
"rawContents": "
|
|
1108
|
+
"fileName": "inline-form-demo.component.html",
|
|
1109
|
+
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/basic/inline-form-demo.component.html",
|
|
1110
|
+
"rawContents": "<sky-inline-form\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon icon=\"pencil\"></sky-icon>\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form novalidate [formGroup]=\"myForm\">\n <div class=\"sky-form-group\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"myFirstName\" type=\"text\" />\n </sky-input-box>\n </div>\n </form>\n</ng-template>\n"
|
|
1111
1111
|
}
|
|
1112
1112
|
]
|
|
1113
1113
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/inline-form",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"@angular/animations": "^16.1.7",
|
|
34
34
|
"@angular/common": "^16.1.7",
|
|
35
35
|
"@angular/core": "^16.1.7",
|
|
36
|
-
"@skyux/core": "9.0.0-alpha.
|
|
37
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
36
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
37
|
+
"@skyux/i18n": "9.0.0-alpha.1"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"tslib": "^2.5.0"
|