Skip to content

Commit b1b9de1

Browse files
dschnelldavisdschnelldavis
committed
Fix bug displaying expandable sections.
1 parent 825e869 commit b1b9de1

30 files changed

+228
-221
lines changed

‎package-lock.json

Lines changed: 106 additions & 105 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular2-json-schema-form",
3-
"version": "0.6.0-alpha.4",
3+
"version": "0.6.0-alpha.5",
44
"author": {
55
"name": "David Schnell-Davis",
66
"email": "[email protected]"
@@ -71,7 +71,7 @@
7171
"devDependencies": {
7272
"@angular/animations": "^5.0.1",
7373
"@angular/cdk": "^5.0.0-rc0",
74-
"@angular/cli": "^1.5.0",
74+
"@angular/cli": "^1.5.1",
7575
"@angular/common": "^5.0.1",
7676
"@angular/compiler": "^5.0.1",
7777
"@angular/compiler-cli": "^5.0.1",
@@ -87,7 +87,7 @@
8787
"@types/ace": "^0.0.35",
8888
"@types/jasmine": "^2.8.2",
8989
"@types/jasminewd2": "~2.0.2",
90-
"@types/node": "^8.0.52",
90+
"@types/node": "^8.0.53",
9191
"brace": "^0.10.0",
9292
"camelcase": "^4.0.0",
9393
"codelyzer": "^4.0.1",
@@ -105,7 +105,7 @@
105105
"karma-jasmine-html-reporter": "^0.2.2",
106106
"protractor": "^5.2.0",
107107
"rimraf": "^2.6.1",
108-
"rollup": "^0.51.5",
108+
"rollup": "^0.51.6",
109109
"rollup-plugin-commonjs": "^8.2.6",
110110
"rollup-plugin-node-resolve": "^3.0.0",
111111
"rollup-plugin-node-resolve-angular": "^2.0.3",

‎src/demo/assets/example-schemas/ng-jsf-flex-layout.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@
5858
]
5959
},
6060
{ "key": "birthday", "type": "date" },
61-
{ "key": "notes", "type": "textarea" },
6261
{ "key": "phone_numbers",
6362
"type": "array",
6463
"listItems": 3,
@@ -75,6 +74,12 @@
7574
}
7675
]
7776
} ]
77+
},
78+
{ "type": "section",
79+
"title": "Notes",
80+
"expandable": true,
81+
"expanded": false,
82+
"items": [ { "key": "notes", "type": "textarea", "notitle": true } ]
7883
}
7984
],
8085
"data": {
@@ -90,6 +95,7 @@
9095
"phone_numbers": [
9196
{ "type": "cell", "number": "702-123-4567" },
9297
{ "type": "work", "number": "702-987-6543" }
93-
]
98+
],
99+
"notes": "(This is an example of an uninteresting note.)"
94100
}
95101
}

‎src/lib/src/framework-library/bootstrap-3-framework/bootstrap-3-framework.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
selector: 'bootstrap-3-framework',
1616
template: `
1717
<div
18-
[class]="options?.htmlClass"
18+
[class]="options?.htmlClass || ''"
1919
[class.has-feedback]="options?.feedback && options?.isInputWidget &&
2020
(formControl?.dirty || options?.feedbackOnRender)"
2121
[class.has-error]="options?.enableErrorState && formControl?.errors &&
@@ -38,7 +38,7 @@ import {
3838
3939
<label *ngIf="options?.title && layoutNode?.type !== 'tab'"
4040
[attr.for]="'control' + layoutNode?._id"
41-
[class]="options?.labelHtmlClass"
41+
[class]="options?.labelHtmlClass || ''"
4242
[class.sr-only]="options?.notitle"
4343
[innerHTML]="options?.title"></label>
4444
<p *ngIf="layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired">

‎src/lib/src/framework-library/bootstrap-4-framework/bootstrap-4-framework.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
selector: 'bootstrap-3-framework',
1616
template: `
1717
<div
18-
[class]="options?.htmlClass"
18+
[class]="options?.htmlClass || ''"
1919
[class.has-feedback]="options?.feedback && options?.isInputWidget &&
2020
(formControl?.dirty || options?.feedbackOnRender)"
2121
[class.has-error]="options?.enableErrorState && formControl?.errors &&
@@ -38,7 +38,7 @@ import {
3838
3939
<label *ngIf="options?.title && layoutNode?.type !== 'tab'"
4040
[attr.for]="'control' + layoutNode?._id"
41-
[class]="options?.labelHtmlClass"
41+
[class]="options?.labelHtmlClass || ''"
4242
[class.sr-only]="options?.notitle"
4343
[innerHTML]="options?.title"></label>
4444
<p *ngIf="layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired">

‎src/lib/src/framework-library/material-design-framework/flex-layout-section.component.ts

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
77
selector: 'flex-layout-section-widget',
88
template: `
99
<div *ngIf="containerType === 'div'"
10-
[class]="options?.htmlClass"
10+
[class]="options?.htmlClass || ''"
1111
[class.expandable]="options?.expandable && !expanded"
1212
[class.expanded]="options?.expandable && expanded">
1313
<label
14-
class="title"
15-
[class]="options?.labelHtmlClass"
14+
[class]="'legend ' + (options?.labelHtmlClass || '')"
1615
[style.display]="(options?.notitle || !options?.title) ? 'none' : ''"
1716
[innerHTML]="options?.title"
18-
(click)="toggleExpand()"></label>
17+
(click)="toggleExpanded()"></label>
1918
<flex-layout-root-widget *ngIf="expanded"
2019
[layout]="layoutNode.items"
2120
[dataIndex]="dataIndex"
@@ -39,16 +38,15 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
3938
</div>
4039
4140
<fieldset *ngIf="containerType === 'fieldset'"
42-
[class]="options?.htmlClass"
41+
[class]="options?.htmlClass || ''"
4342
[class.expandable]="options?.expandable && !expanded"
4443
[class.expanded]="options?.expandable && expanded"
4544
[disabled]="options?.readonly">
4645
<legend
47-
class="title"
48-
[class]="options?.labelHtmlClass"
46+
[class]="'legend ' + (options?.labelHtmlClass || '')"
4947
[style.display]="(options?.notitle || !options?.title) ? 'none' : ''"
5048
[innerHTML]="options?.title"
51-
(click)="toggleExpand()"></legend>
49+
(click)="toggleExpanded()"></legend>
5250
<flex-layout-root-widget *ngIf="expanded"
5351
[layout]="layoutNode.items"
5452
[dataIndex]="dataIndex"
@@ -72,16 +70,15 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
7270
</fieldset>
7371
7472
<mat-card *ngIf="containerType === 'card'"
75-
[class]="options?.htmlClass"
73+
[class]="options?.htmlClass || ''"
7674
[class.expandable]="options?.expandable && !expanded"
7775
[class.expanded]="options?.expandable && expanded">
7876
<mat-card-header>
7977
<legend
80-
class="title"
81-
[class]="options?.labelHtmlClass"
78+
[class]="'legend ' + (options?.labelHtmlClass || '')"
8279
[style.display]="(options?.notitle || !options?.title) ? 'none' : ''"
8380
[innerHTML]="options?.title"
84-
(click)="toggleExpand()">
81+
(click)="toggleExpanded()">
8582
</legend>
8683
</mat-card-header>
8784
<mat-card-content *ngIf="expanded">
@@ -114,7 +111,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
114111
</mat-card>`,
115112
styles: [`
116113
fieldset { border: 0; margin: 0; padding: 0; }
117-
.title { font-size: 150%; }
114+
.legend { font-weight: bold; }
118115
.expandable > .legend:before { content: '▶'; padding-right: .3em; }
119116
.expanded > .legend:before { content: '▼'; padding-right: .2em; }
120117
`],
@@ -138,7 +135,9 @@ export class FlexLayoutSectionComponent implements OnInit {
138135

139136
ngOnInit() {
140137
this.jsf.initializeControl(this);
141-
this.expanded = !this.options.expandable;
138+
this.options = this.layoutNode.options || {};
139+
this.expanded = typeof this.options.expanded === 'boolean' ?
140+
this.options.expanded : !this.options.expandable;
142141
switch (this.layoutNode.type) {
143142
case 'section': case 'array': case 'fieldset': case 'advancedfieldset':
144143
case 'authfieldset': case 'optionfieldset': case 'selectfieldset':
@@ -152,7 +151,7 @@ export class FlexLayoutSectionComponent implements OnInit {
152151
}
153152
}
154153

155-
toggleExpand() {
154+
toggleExpanded() {
156155
if (this.options.expandable) { this.expanded = !this.expanded; }
157156
}
158157

@@ -171,10 +170,10 @@ export class FlexLayoutSectionComponent implements OnInit {
171170
return flexActive ? 'flex' : 'initial';
172171
case 'flex-direction': case 'flex-wrap':
173172
const index = ['flex-direction', 'flex-wrap'].indexOf(attribute);
174-
return ((this.options || {})['flex-flow'] || '').split(/\s+/)[index] ||
175-
(this.options || {})[attribute] || ['column', 'nowrap'][index];
173+
return (this.options['flex-flow'] || '').split(/\s+/)[index] ||
174+
this.options[attribute] || ['column', 'nowrap'][index];
176175
case 'justify-content': case 'align-items': case 'align-content':
177-
return (this.options || {})[attribute];
176+
return this.options[attribute];
178177
}
179178
}
180179
}

‎src/lib/src/framework-library/material-design-framework/material-add-reference.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
66
@Component({
77
selector: 'material-add-reference-widget',
88
template: `
9-
<section [class]="options?.htmlClass" align="end">
9+
<section [class]="options?.htmlClass || ''" align="end">
1010
<button mat-raised-button *ngIf="showAddButton"
1111
[color]="options?.color || 'accent'"
1212
[disabled]="options?.readonly"

‎src/lib/src/framework-library/material-design-framework/material-button-group.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { buildTitleMap } from '../../shared';
1111
<div *ngIf="options?.title">
1212
<label
1313
[attr.for]="'control' + layoutNode?._id"
14-
[class]="options?.labelHtmlClass"
14+
[class]="options?.labelHtmlClass || ''"
1515
[style.display]="options?.notitle ? 'none' : ''"
1616
[innerHTML]="options?.title"></label>
1717
</div>

‎src/lib/src/framework-library/material-design-framework/material-button.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { hasOwn } from '../../shared/utility.functions';
77
@Component({
88
selector: 'material-button-widget',
99
template: `
10-
<div class="button-row" [class]="options?.htmlClass">
10+
<div class="button-row" [class]="options?.htmlClass || ''">
1111
<button mat-raised-button
1212
[attr.readonly]="options?.readonly ? 'readonly' : null"
1313
[attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"

‎src/lib/src/framework-library/material-design-framework/material-checkboxes.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ import { buildFormGroup, buildTitleMap, hasOwn, JsonPointer } from '../../shared
2323
</mat-checkbox>
2424
<label *ngIf="options?.title"
2525
class="title"
26-
[class]="options?.labelHtmlClass"
26+
[class]="options?.labelHtmlClass || ''"
2727
[style.display]="options?.notitle ? 'none' : ''"
2828
[innerHTML]="options?.title"></label>
2929
<ul class="checkbox-list" [class.horizontal-list]="horizontalList">
3030
<li *ngFor="let checkboxItem of checkboxList"
31-
[class]="options?.htmlClass">
31+
[class]="options?.htmlClass || ''">
3232
<mat-checkbox type="checkbox"
3333
[(ngModel)]="checkboxItem.checked"
3434
[color]="options?.color || 'primary'"

‎src/lib/src/framework-library/material-design-framework/material-input.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
77
selector: 'material-input-widget',
88
template: `
99
<mat-form-field
10-
[class]="options?.htmlClass || null"
10+
[class]="options?.htmlClass || ''"
1111
[floatPlaceholder]="options?.floatPlaceholder || (options?.notitle ? 'never' : 'auto')"
1212
[style.width]="'100%'">
1313
<span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"

‎src/lib/src/framework-library/material-design-framework/material-number.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
77
selector: 'material-number-widget',
88
template: `
99
<mat-form-field
10-
[class]="options?.htmlClass || null"
10+
[class]="options?.htmlClass || ''"
1111
[floatPlaceholder]="options?.floatPlaceholder || (options?.notitle ? 'never' : 'auto')"
1212
[style.width]="'100%'">
1313
<span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"

‎src/lib/src/framework-library/material-design-framework/material-radios.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { buildTitleMap } from '../../shared';
1111
<div *ngIf="options?.title">
1212
<label
1313
[attr.for]="'control' + layoutNode?._id"
14-
[class]="options?.labelHtmlClass"
14+
[class]="options?.labelHtmlClass || ''"
1515
[style.display]="options?.notitle ? 'none' : ''"
1616
[innerHTML]="options?.title"></label>
1717
</div>

‎src/lib/src/framework-library/material-design-framework/material-select.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { buildTitleMap, isArray } from '../../shared';
88
selector: 'material-select-widget',
99
template: `
1010
<mat-form-field
11-
[class]="options?.htmlClass || null"
11+
[class]="options?.htmlClass || ''"
1212
[floatPlaceholder]="options?.floatPlaceholder || (options?.notitle ? 'never' : 'auto')"
1313
[style.width]="'100%'">
1414
<span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"

‎src/lib/src/framework-library/material-design-framework/material-tabs.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
66
selector: 'material-tabs-widget',
77
template: `
88
<nav mat-tab-nav-bar
9-
[attr.aria-label]="options?.label || options?.title"
9+
[attr.aria-label]="options?.label || options?.title || ''"
1010
[style.width]="'100%'">
1111
<a mat-tab-link *ngFor="let item of layoutNode?.items; let i = index"
1212
[active]="selectedItem === i"
@@ -16,9 +16,9 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
1616
</a>
1717
</nav>
1818
<div *ngFor="let layoutItem of layoutNode?.items; let i = index"
19-
[class]="options?.htmlClass">
19+
[class]="options?.htmlClass || ''">
2020
<select-framework-widget *ngIf="selectedItem === i"
21-
[class]="options?.fieldHtmlClass + ' ' + options?.activeClass + ' ' + options?.style?.selected"
21+
[class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
2222
[dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
2323
[layoutIndex]="(layoutIndex || []).concat(i)"
2424
[layoutNode]="layoutItem"></select-framework-widget>

‎src/lib/src/framework-library/material-design-framework/material-textarea.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { JsonSchemaFormService } from '../../json-schema-form.service';
77
selector: 'material-textarea-widget',
88
template: `
99
<mat-form-field
10-
[class]="options?.htmlClass || null"
10+
[class]="options?.htmlClass || ''"
1111
[floatPlaceholder]="options?.floatPlaceholder || (options?.notitle ? 'never' : 'auto')"
1212
[style.width]="'100%'">
1313
<span matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"

‎src/lib/src/widget-library/add-reference.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { JsonSchemaFormService } from '../json-schema-form.service';
77
selector: 'add-reference-widget',
88
template: `
99
<button *ngIf="showAddButton"
10-
[class]="options?.fieldHtmlClass"
10+
[class]="options?.fieldHtmlClass || ''"
1111
[disabled]="options?.readonly"
1212
(click)="addItem($event)">
1313
<span *ngIf="options?.icon" [class]="options?.icon"></span>

‎src/lib/src/widget-library/button.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { JsonSchemaFormService } from '../json-schema-form.service';
77
selector: 'button-widget',
88
template: `
99
<div
10-
[class]="options?.htmlClass">
10+
[class]="options?.htmlClass || ''">
1111
<button
1212
[attr.readonly]="options?.readonly ? 'readonly' : null"
1313
[attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
14-
[class]="options?.fieldHtmlClass"
14+
[class]="options?.fieldHtmlClass || ''"
1515
[disabled]="controlDisabled"
1616
[name]="controlName"
1717
[type]="layoutNode?.type"

‎src/lib/src/widget-library/checkbox.component.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,23 @@ import { JsonSchemaFormService } from '../json-schema-form.service';
88
template: `
99
<label
1010
[attr.for]="'control' + layoutNode?._id"
11-
[class]="options?.itemLabelHtmlClass">
11+
[class]="options?.itemLabelHtmlClass || ''">
1212
<input *ngIf="boundControl"
1313
[formControl]="formControl"
1414
[attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
15-
[class]="options?.fieldHtmlClass + (isChecked ?
16-
(' ' + options?.activeClass + ' ' + options?.style?.selected) :
17-
(' ' + options?.style?.unselected))"
15+
[class]="(options?.fieldHtmlClass || '') + (isChecked ?
16+
(' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
17+
(' ' + (options?.style?.unselected || '')))"
1818
[id]="'control' + layoutNode?._id"
1919
[name]="controlName"
2020
[readonly]="options?.readonly ? 'readonly' : null"
2121
type="checkbox">
2222
<input *ngIf="!boundControl"
2323
[attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
2424
[checked]="isChecked ? 'checked' : null"
25-
[class]="options?.fieldHtmlClass + (isChecked ?
26-
(' ' + options?.activeClass + ' ' + options?.style?.selected) :
27-
(' ' + options?.style?.unselected))"
25+
[class]="(options?.fieldHtmlClass || '') + (isChecked ?
26+
(' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
27+
(' ' + (options?.style?.unselected || '')))"
2828
[disabled]="controlDisabled"
2929
[id]="'control' + layoutNode?._id"
3030
[name]="controlName"

0 commit comments

Comments
 (0)