diff --git a/CHANGELOG.md b/CHANGELOG.md
index f7ddec6..12fb8d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,11 +5,17 @@ All notable changes to this project will be documented in this file.
- ...
+## [0.1.6] - 2019-06-23
+
+### Added
+
+- Proper `flex-cell` layout configuration when using forms via `withForm()`. It supports an optional `layout` property with options to configure `flexCell`, `gutter`, `growItems`, `debug`.
+
## [0.1.5] - 2019-06-23
### Changed
-- `withForm()` renders fields within form tag with these attributes `flex-cell gutter default-cell-12` to support `layout` properties of form field definitions.
+- `withForm()` renders fields within form tag with these attributes `flex-cell gutter default-cell-12` to support `layout` properties of form field definitions (quick hack, not ideal).
## [0.1.4] - 2019-06-21
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
index 861b42e..c562174 100644
--- a/projects/demo/src/app/app.component.ts
+++ b/projects/demo/src/app/app.component.ts
@@ -72,8 +72,19 @@ export class AppComponent {
doFormSimple () {
this.dialogService.withForm(
'Form (Simple)',
- [ { title: 'Name', required: true } ],
- { content: 'Tell me something about yourself...' }
+ [
+ { title: 'Name', required: true },
+ { title: 'Email', required: true },
+ { title: 'Address', type: 'textarea', required: true, layout: { cell: 8 } }
+ ],
+ {
+ content: 'Tell me something about yourself...',
+ layout: {
+ flexCell: true,
+ gutter: true,
+ growItems: true
+ }
+ }
).pipe(
filter(result => result),
concatMap(result => this.dialogService.withAlert(
diff --git a/projects/demo/src/app/sourceCodeReference.ts b/projects/demo/src/app/sourceCodeReference.ts
index 0283599..daa49b7 100644
--- a/projects/demo/src/app/sourceCodeReference.ts
+++ b/projects/demo/src/app/sourceCodeReference.ts
@@ -65,18 +65,29 @@ export const sourceCodeReference = {
' }\n' +
']\n',
- formSimple: 'this.dialogService.withForm(\n' +
- ' \'Form (Simple)\',\n' +
- ' [ { title: \'Name\', required: true } ],\n' +
- ' { content: \'Tell me something about yourself...\' }\n' +
- ').pipe(\n' +
- ' filter(result => result),\n' +
- ' concatMap(result => this.dialogService.withAlert(\n' +
- ' \'Hello!\',\n' +
- ' {\n' +
- ' content: JSON.stringify(result, null, 2)\n' +
- ' }))\n' +
- ').subscribe()\n',
+ formSimple: `this.dialogService.withForm(
+ 'Form (Simple)',
+ [
+ { title: 'Name', required: true },
+ { title: 'Email', required: true },
+ { title: 'Address', type: 'textarea', required: true, layout: { cell: 8 } }
+ ],
+ {
+ content: 'Tell me something about yourself...',
+ layout: {
+ flexCell: true,
+ gutter: true,
+ growItems: true
+ }
+ }
+ ).pipe(
+ filter(result => result),
+ concatMap(result => this.dialogService.withAlert(
+ 'Hello!',
+ {
+ content: JSON.stringify(result, null, 2)
+ }))
+ ).subscribe()`,
formMixed: 'this.dialogService.withForm(\'Form (Mixed with validators)\', this.fields).pipe(\n' +
' filter(result => result),\n' +
diff --git a/projects/dialog-service/package.json b/projects/dialog-service/package.json
index 9e65be4..c428614 100644
--- a/projects/dialog-service/package.json
+++ b/projects/dialog-service/package.json
@@ -1,6 +1,6 @@
{
"name": "dialog-service",
- "version": "0.1.5",
+ "version": "0.1.6",
"description": "Reactive Angular modal dialogs. Create alert, confirmation, progress and form based dialogs without writing component templates.",
"repository": {
"type": "git",
diff --git a/projects/dialog-service/src/lib/DialogService.ts b/projects/dialog-service/src/lib/DialogService.ts
index 66150a2..aa5a160 100644
--- a/projects/dialog-service/src/lib/DialogService.ts
+++ b/projects/dialog-service/src/lib/DialogService.ts
@@ -85,7 +85,8 @@ export abstract class DialogService {
* @param fields
* @param options Dialog options. 'content' represents content to be display in dialog;
* 'submitButton' represents label to submit form (defaults to 'Submit'); 'cancelButton'
- * represents label to cancel form (defaults to 'Cancel')
+ * represents label to cancel form (defaults to 'Cancel'); 'layout' defines the form's "flex-cell"
+ * layout attributes;
* @returns Observable with form value object on submission, or false if form was cancelled
*/
abstract withForm (
@@ -95,5 +96,11 @@ export abstract class DialogService {
content?: string
submitButton?: string
cancelButton?: string
+ layout?: {
+ flexCell?: boolean | 6 | 12
+ gutter?: boolean
+ growItems?: boolean
+ debug?: boolean
+ }
}): Observable
}
diff --git a/projects/dialog-service/src/lib/MatDialogService.ts b/projects/dialog-service/src/lib/MatDialogService.ts
index bbeb887..af42e04 100644
--- a/projects/dialog-service/src/lib/MatDialogService.ts
+++ b/projects/dialog-service/src/lib/MatDialogService.ts
@@ -76,6 +76,12 @@ export class MatDialogService extends DialogService {
submitButton?: string
cancelButton?: string
cancelMessage?: string
+ layout?: {
+ flexCell?: boolean | 6 | 12
+ gutter?: boolean
+ growItems?: boolean
+ debug?: boolean
+ }
}): Observable {
options = options || {}
options.submitButton = options.submitButton || 'Submit'
diff --git a/projects/dialog-service/src/lib/mat/Form.component.html b/projects/dialog-service/src/lib/mat/Form.component.html
index 79a4e4a..47a1a92 100644
--- a/projects/dialog-service/src/lib/mat/Form.component.html
+++ b/projects/dialog-service/src/lib/mat/Form.component.html
@@ -1,10 +1,19 @@
{{data.title}}