@skyux/inline-form 7.20.0 → 7.21.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 +5 -10
- package/package.json +3 -3
package/documentation.json
CHANGED
|
@@ -1082,7 +1082,7 @@
|
|
|
1082
1082
|
{
|
|
1083
1083
|
"fileName": "inline-form-demo.component.html",
|
|
1084
1084
|
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/basic/inline-form-demo.component.html",
|
|
1085
|
-
"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-
|
|
1085
|
+
"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>\n <label class=\"sky-control-label\" [for]=\"firstNameInput.id\">\n First name\n </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"myFirstName\"\n skyId\n type=\"text\"\n #firstNameInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n </form>\n</ng-template>\n"
|
|
1086
1086
|
},
|
|
1087
1087
|
{
|
|
1088
1088
|
"fileName": "inline-form-demo.component.ts",
|
|
@@ -1097,7 +1097,7 @@
|
|
|
1097
1097
|
{
|
|
1098
1098
|
"fileName": "inline-form-demo.component.html",
|
|
1099
1099
|
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/custom-buttons/inline-form-demo.component.html",
|
|
1100
|
-
"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-
|
|
1100
|
+
"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>\n <label\n class=\"sky-control-label sky-control-label-required\"\n [for]=\"firstNameInput.id\"\n >\n First name\n </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"myFirstName\"\n required\n skyId\n type=\"text\"\n #firstNameInput=\"skyId\"\n />\n </sky-input-box>\n </div>\n </form>\n</ng-template>\n"
|
|
1101
1101
|
},
|
|
1102
1102
|
{
|
|
1103
1103
|
"fileName": "inline-form-demo.component.ts",
|
|
@@ -1117,22 +1117,17 @@
|
|
|
1117
1117
|
{
|
|
1118
1118
|
"fileName": "inline-form-demo.component.html",
|
|
1119
1119
|
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/repeaters/inline-form-demo.component.html",
|
|
1120
|
-
"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
|
|
1121
|
-
},
|
|
1122
|
-
{
|
|
1123
|
-
"fileName": "inline-form-demo.component.scss",
|
|
1124
|
-
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/repeaters/inline-form-demo.component.scss",
|
|
1125
|
-
"rawContents": ".demo-repeater-flex {\n display: flex;\n flex-wrap: wrap;\n\n .demo-repeater-item-title {\n flex-grow: 1;\n }\n}\n"
|
|
1120
|
+
"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 <div class=\"sky-form-group\">\n <sky-input-box>\n <label class=\"sky-control-label\" [for]=\"myTitle.id\"> Title </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"title\"\n skyId\n type=\"text\"\n #myTitle=\"skyId\"\n />\n </sky-input-box>\n </div>\n <div class=\"sky-form-group\">\n <sky-input-box>\n <label class=\"sky-control-label\" [for]=\"myNote.id\"> Note </label>\n <input\n class=\"sky-form-control\"\n formControlName=\"note\"\n skyId\n type=\"text\"\n #myNote=\"skyId\"\n />\n </sky-input-box>\n </div>\n </form>\n</ng-template>\n"
|
|
1126
1121
|
},
|
|
1127
1122
|
{
|
|
1128
1123
|
"fileName": "inline-form-demo.component.ts",
|
|
1129
1124
|
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/repeaters/inline-form-demo.component.ts",
|
|
1130
|
-
"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
|
|
1125
|
+
"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"
|
|
1131
1126
|
},
|
|
1132
1127
|
{
|
|
1133
1128
|
"fileName": "inline-form-demo.module.ts",
|
|
1134
1129
|
"filePath": "/projects/inline-form/documentation/code-examples/inline-form/repeaters/inline-form-demo.module.ts",
|
|
1135
|
-
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyInlineFormModule } from '@skyux/inline-form';\nimport { SkyRepeaterModule } from '@skyux/lists';\n\nimport { InlineFormDemoComponent } from './inline-form-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n SkyIconModule,\n SkyIdModule,\n SkyInlineFormModule,\n SkyInputBoxModule,\n SkyRepeaterModule,\n ],\n exports: [InlineFormDemoComponent],\n declarations: [InlineFormDemoComponent],\n})\nexport class InlineFormDemoModule {}\n"
|
|
1130
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\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 SkyIdModule,\n SkyInlineFormModule,\n SkyInputBoxModule,\n SkyRepeaterModule,\n SkyThemeModule,\n ],\n exports: [InlineFormDemoComponent],\n declarations: [InlineFormDemoComponent],\n})\nexport class InlineFormDemoModule {}\n"
|
|
1136
1131
|
}
|
|
1137
1132
|
]
|
|
1138
1133
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/inline-form",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.21.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"@angular/animations": "^14.2.11",
|
|
36
36
|
"@angular/common": "^14.2.11",
|
|
37
37
|
"@angular/core": "^14.2.11",
|
|
38
|
-
"@skyux/core": "7.
|
|
39
|
-
"@skyux/i18n": "7.
|
|
38
|
+
"@skyux/core": "7.21.1",
|
|
39
|
+
"@skyux/i18n": "7.21.1"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"tslib": "^2.3.1"
|