@ajsf/material 0.2.0-beta.1 → 0.4.0-beta.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.
Files changed (95) hide show
  1. package/LICENSE +21 -0
  2. package/ajsf-material.d.ts +4 -0
  3. package/ajsf-material.metadata.json +1 -0
  4. package/bundles/ajsf-material.umd.js +1431 -0
  5. package/bundles/ajsf-material.umd.js.map +1 -0
  6. package/bundles/ajsf-material.umd.min.js +16 -0
  7. package/bundles/ajsf-material.umd.min.js.map +1 -0
  8. package/esm2015/ajsf-material.js +5 -0
  9. package/esm2015/lib/angular-flex-monkey-patch.js +12 -0
  10. package/esm2015/lib/material-design-framework.component.js +101 -0
  11. package/esm2015/lib/material-design-framework.module.js +80 -0
  12. package/esm2015/lib/material-design.framework.js +54 -0
  13. package/esm2015/lib/widgets/flex-layout-root.component.js +55 -0
  14. package/esm2015/lib/widgets/flex-layout-section.component.js +221 -0
  15. package/esm2015/lib/widgets/material-add-reference.component.js +53 -0
  16. package/esm2015/lib/widgets/material-button-group.component.js +63 -0
  17. package/esm2015/lib/widgets/material-button.component.js +60 -0
  18. package/esm2015/lib/widgets/material-checkbox.component.js +109 -0
  19. package/esm2015/lib/widgets/material-checkboxes.component.js +101 -0
  20. package/esm2015/lib/widgets/material-chip-list.component.js +33 -0
  21. package/esm2015/lib/widgets/material-datepicker.component.js +101 -0
  22. package/esm2015/lib/widgets/material-file.component.js +33 -0
  23. package/esm2015/lib/widgets/material-input.component.js +95 -0
  24. package/esm2015/lib/widgets/material-number.component.js +97 -0
  25. package/esm2015/lib/widgets/material-one-of.component.js +33 -0
  26. package/esm2015/lib/widgets/material-radios.component.js +84 -0
  27. package/esm2015/lib/widgets/material-select.component.js +115 -0
  28. package/esm2015/lib/widgets/material-slider.component.js +60 -0
  29. package/esm2015/lib/widgets/material-stepper.component.js +33 -0
  30. package/esm2015/lib/widgets/material-tabs.component.js +69 -0
  31. package/esm2015/lib/widgets/material-textarea.component.js +88 -0
  32. package/esm2015/lib/widgets/public_api.js +52 -0
  33. package/esm2015/public_api.js +8 -0
  34. package/fesm2015/ajsf-material.js +1721 -0
  35. package/fesm2015/ajsf-material.js.map +1 -0
  36. package/lib/angular-flex-monkey-patch.d.ts +1 -0
  37. package/lib/material-design-framework.component.d.ts +25 -0
  38. package/lib/material-design-framework.module.d.ts +12 -0
  39. package/lib/material-design.framework.d.ts +41 -0
  40. package/lib/widgets/flex-layout-root.component.d.ts +12 -0
  41. package/lib/widgets/flex-layout-section.component.d.ts +22 -0
  42. package/lib/widgets/material-add-reference.component.d.ts +17 -0
  43. package/lib/widgets/material-button-group.component.d.ts +20 -0
  44. package/lib/widgets/material-button.component.d.ts +18 -0
  45. package/lib/widgets/material-checkbox.component.d.ts +22 -0
  46. package/lib/widgets/material-checkboxes.component.d.ts +24 -0
  47. package/lib/widgets/material-chip-list.component.d.ts +18 -0
  48. package/lib/widgets/material-datepicker.component.d.ts +22 -0
  49. package/lib/widgets/material-file.component.d.ts +18 -0
  50. package/lib/widgets/material-input.component.d.ts +20 -0
  51. package/lib/widgets/material-number.component.d.ts +23 -0
  52. package/lib/widgets/material-one-of.component.d.ts +18 -0
  53. package/lib/widgets/material-radios.component.d.ts +20 -0
  54. package/lib/widgets/material-select.component.d.ts +21 -0
  55. package/lib/widgets/material-slider.component.d.ts +22 -0
  56. package/lib/widgets/material-stepper.component.d.ts +18 -0
  57. package/lib/widgets/material-tabs.component.d.ts +17 -0
  58. package/lib/widgets/material-textarea.component.d.ts +19 -0
  59. package/{src/lib/widgets/public_api.ts → lib/widgets/public_api.d.ts} +1 -14
  60. package/package.json +25 -7
  61. package/{src/public_api.ts → public_api.d.ts} +0 -4
  62. package/karma.conf.js +0 -37
  63. package/ng-package.json +0 -16
  64. package/src/lib/angular-flex-monkey-patch.ts +0 -13
  65. package/src/lib/material-design-framework.component.html +0 -20
  66. package/src/lib/material-design-framework.component.scss +0 -51
  67. package/src/lib/material-design-framework.component.spec.ts +0 -37
  68. package/src/lib/material-design-framework.component.ts +0 -121
  69. package/src/lib/material-design-framework.module.ts +0 -84
  70. package/src/lib/material-design.framework.ts +0 -75
  71. package/src/lib/widgets/flex-layout-root.component.html +0 -11
  72. package/src/lib/widgets/flex-layout-root.component.ts +0 -52
  73. package/src/lib/widgets/flex-layout-section.component.ts +0 -216
  74. package/src/lib/widgets/material-add-reference.component.ts +0 -56
  75. package/src/lib/widgets/material-button-group.component.ts +0 -68
  76. package/src/lib/widgets/material-button.component.ts +0 -59
  77. package/src/lib/widgets/material-checkbox.component.ts +0 -112
  78. package/src/lib/widgets/material-checkboxes.component.ts +0 -109
  79. package/src/lib/widgets/material-chip-list.component.ts +0 -35
  80. package/src/lib/widgets/material-datepicker.component.ts +0 -105
  81. package/src/lib/widgets/material-file.component.ts +0 -35
  82. package/src/lib/widgets/material-input.component.ts +0 -99
  83. package/src/lib/widgets/material-number.component.ts +0 -97
  84. package/src/lib/widgets/material-one-of.component.ts +0 -35
  85. package/src/lib/widgets/material-radios.component.ts +0 -89
  86. package/src/lib/widgets/material-select.component.ts +0 -120
  87. package/src/lib/widgets/material-slider.component.ts +0 -61
  88. package/src/lib/widgets/material-stepper.component.ts +0 -35
  89. package/src/lib/widgets/material-tabs.component.ts +0 -69
  90. package/src/lib/widgets/material-textarea.component.ts +0 -90
  91. package/src/test.ts +0 -21
  92. package/tsconfig.lib.json +0 -25
  93. package/tsconfig.lib.prod.json +0 -6
  94. package/tsconfig.spec.json +0 -17
  95. package/tslint.json +0 -11
@@ -1,11 +0,0 @@
1
- <div *ngFor="let layoutNode of layout; let i = index" [class.form-flex-item]="isFlexItem"
2
- [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
3
- [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
4
- [style.flex-basis]="getFlexAttribute(layoutNode, 'flex-basis')"
5
- [style.align-self]="(layoutNode?.options || {})['align-self']" [style.order]="layoutNode?.options?.order"
6
- [fxFlex]="layoutNode?.options?.fxFlex" [fxFlexOrder]="layoutNode?.options?.fxFlexOrder"
7
- [fxFlexOffset]="layoutNode?.options?.fxFlexOffset" [fxFlexAlign]="layoutNode?.options?.fxFlexAlign">
8
- <select-framework-widget *ngIf="showWidget(layoutNode)"
9
- [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
10
- [layoutIndex]="(layoutIndex || []).concat(i)" [layoutNode]="layoutNode"></select-framework-widget>
11
- <div>
@@ -1,52 +0,0 @@
1
- import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
2
- import { JsonSchemaFormService } from '@ajsf/core';
3
-
4
-
5
- @Component({
6
- // tslint:disable-next-line:component-selector
7
- selector: 'flex-layout-root-widget',
8
- template: `
9
- <div *ngFor="let layoutNode of layout; let i = index"
10
- [class.form-flex-item]="isFlexItem"
11
- [style.flex-grow]="getFlexAttribute(layoutNode, 'flex-grow')"
12
- [style.flex-shrink]="getFlexAttribute(layoutNode, 'flex-shrink')"
13
- [style.flex-basis]="getFlexAttribute(layoutNode, 'flex-basis')"
14
- [style.align-self]="(layoutNode?.options || {})['align-self']"
15
- [style.order]="layoutNode?.options?.order"
16
- [fxFlex]="layoutNode?.options?.fxFlex"
17
- [fxFlexOrder]="layoutNode?.options?.fxFlexOrder"
18
- [fxFlexOffset]="layoutNode?.options?.fxFlexOffset"
19
- [fxFlexAlign]="layoutNode?.options?.fxFlexAlign">
20
- <select-framework-widget *ngIf="showWidget(layoutNode)"
21
- [dataIndex]="layoutNode?.arrayItem ? (dataIndex || []).concat(i) : (dataIndex || [])"
22
- [layoutIndex]="(layoutIndex || []).concat(i)"
23
- [layoutNode]="layoutNode"></select-framework-widget>
24
- <div>`,
25
- changeDetection: ChangeDetectionStrategy.Default,
26
- })
27
- export class FlexLayoutRootComponent {
28
- @Input() dataIndex: number[];
29
- @Input() layoutIndex: number[];
30
- @Input() layout: any[];
31
- @Input() isFlexItem = false;
32
-
33
- constructor(
34
- private jsf: JsonSchemaFormService
35
- ) { }
36
-
37
- removeItem(item) {
38
- this.jsf.removeItem(item);
39
- }
40
-
41
- // Set attributes for flexbox child
42
- // (container attributes are set in flex-layout-section.component)
43
- getFlexAttribute(node: any, attribute: string) {
44
- const index = ['flex-grow', 'flex-shrink', 'flex-basis'].indexOf(attribute);
45
- return ((node.options || {}).flex || '').split(/\s+/)[index] ||
46
- (node.options || {})[attribute] || ['1', '1', 'auto'][index];
47
- }
48
-
49
- showWidget(layoutNode: any): boolean {
50
- return this.jsf.evaluateCondition(layoutNode, this.dataIndex);
51
- }
52
- }
@@ -1,216 +0,0 @@
1
- import { AbstractControl } from '@angular/forms';
2
- import { Component, Input, OnInit } from '@angular/core';
3
- import { JsonSchemaFormService } from '@ajsf/core';
4
-
5
- @Component({
6
- // tslint:disable-next-line:component-selector
7
- selector: 'flex-layout-section-widget',
8
- template: `
9
- <div *ngIf="containerType === 'div'"
10
- [class]="options?.htmlClass || ''"
11
- [class.expandable]="options?.expandable && !expanded"
12
- [class.expanded]="options?.expandable && expanded">
13
- <label *ngIf="sectionTitle"
14
- [class]="'legend ' + (options?.labelHtmlClass || '')"
15
- [innerHTML]="sectionTitle"
16
- (click)="toggleExpanded()"></label>
17
- <flex-layout-root-widget *ngIf="expanded"
18
- [layout]="layoutNode.items"
19
- [dataIndex]="dataIndex"
20
- [layoutIndex]="layoutIndex"
21
- [isFlexItem]="getFlexAttribute('is-flex')"
22
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
23
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
24
- [style.display]="getFlexAttribute('display')"
25
- [style.flex-direction]="getFlexAttribute('flex-direction')"
26
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
27
- [style.justify-content]="getFlexAttribute('justify-content')"
28
- [style.align-items]="getFlexAttribute('align-items')"
29
- [style.align-content]="getFlexAttribute('align-content')"
30
- [fxLayout]="getFlexAttribute('layout')"
31
- [fxLayoutGap]="options?.fxLayoutGap"
32
- [fxLayoutAlign]="options?.fxLayoutAlign"
33
- [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
34
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
35
- [innerHTML]="options?.errorMessage"></mat-error>
36
- </div>
37
-
38
- <fieldset *ngIf="containerType === 'fieldset'"
39
- [class]="options?.htmlClass || ''"
40
- [class.expandable]="options?.expandable && !expanded"
41
- [class.expanded]="options?.expandable && expanded"
42
- [disabled]="options?.readonly">
43
- <legend *ngIf="sectionTitle"
44
- [class]="'legend ' + (options?.labelHtmlClass || '')"
45
- [innerHTML]="sectionTitle"
46
- (click)="toggleExpanded()"></legend>
47
- <flex-layout-root-widget *ngIf="expanded"
48
- [layout]="layoutNode.items"
49
- [dataIndex]="dataIndex"
50
- [layoutIndex]="layoutIndex"
51
- [isFlexItem]="getFlexAttribute('is-flex')"
52
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
53
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
54
- [style.display]="getFlexAttribute('display')"
55
- [style.flex-direction]="getFlexAttribute('flex-direction')"
56
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
57
- [style.justify-content]="getFlexAttribute('justify-content')"
58
- [style.align-items]="getFlexAttribute('align-items')"
59
- [style.align-content]="getFlexAttribute('align-content')"
60
- [fxLayout]="getFlexAttribute('layout')"
61
- [fxLayoutGap]="options?.fxLayoutGap"
62
- [fxLayoutAlign]="options?.fxLayoutAlign"
63
- [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
64
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
65
- [innerHTML]="options?.errorMessage"></mat-error>
66
- </fieldset>
67
-
68
- <mat-card *ngIf="containerType === 'card'"
69
- [ngClass]="options?.htmlClass || ''"
70
- [class.expandable]="options?.expandable && !expanded"
71
- [class.expanded]="options?.expandable && expanded">
72
- <mat-card-header *ngIf="sectionTitle">
73
- <legend
74
- [class]="'legend ' + (options?.labelHtmlClass || '')"
75
- [innerHTML]="sectionTitle"
76
- (click)="toggleExpanded()"></legend>
77
- </mat-card-header>
78
- <mat-card-content *ngIf="expanded">
79
- <fieldset [disabled]="options?.readonly">
80
- <flex-layout-root-widget *ngIf="expanded"
81
- [layout]="layoutNode.items"
82
- [dataIndex]="dataIndex"
83
- [layoutIndex]="layoutIndex"
84
- [isFlexItem]="getFlexAttribute('is-flex')"
85
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
86
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
87
- [style.display]="getFlexAttribute('display')"
88
- [style.flex-direction]="getFlexAttribute('flex-direction')"
89
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
90
- [style.justify-content]="getFlexAttribute('justify-content')"
91
- [style.align-items]="getFlexAttribute('align-items')"
92
- [style.align-content]="getFlexAttribute('align-content')"
93
- [fxLayout]="getFlexAttribute('layout')"
94
- [fxLayoutGap]="options?.fxLayoutGap"
95
- [fxLayoutAlign]="options?.fxLayoutAlign"
96
- [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
97
- </fieldset>
98
- </mat-card-content>
99
- <mat-card-footer>
100
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
101
- [innerHTML]="options?.errorMessage"></mat-error>
102
- </mat-card-footer>
103
- </mat-card>
104
-
105
- <mat-expansion-panel *ngIf="containerType === 'expansion-panel'"
106
- [expanded]="expanded"
107
- [hideToggle]="!options?.expandable">
108
- <mat-expansion-panel-header>
109
- <mat-panel-title>
110
- <legend *ngIf="sectionTitle"
111
- [class]="options?.labelHtmlClass"
112
- [innerHTML]="sectionTitle"
113
- (click)="toggleExpanded()"></legend>
114
- </mat-panel-title>
115
- </mat-expansion-panel-header>
116
- <fieldset [disabled]="options?.readonly">
117
- <flex-layout-root-widget *ngIf="expanded"
118
- [layout]="layoutNode.items"
119
- [dataIndex]="dataIndex"
120
- [layoutIndex]="layoutIndex"
121
- [isFlexItem]="getFlexAttribute('is-flex')"
122
- [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
123
- [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
124
- [style.display]="getFlexAttribute('display')"
125
- [style.flex-direction]="getFlexAttribute('flex-direction')"
126
- [style.flex-wrap]="getFlexAttribute('flex-wrap')"
127
- [style.justify-content]="getFlexAttribute('justify-content')"
128
- [style.align-items]="getFlexAttribute('align-items')"
129
- [style.align-content]="getFlexAttribute('align-content')"
130
- [fxLayout]="getFlexAttribute('layout')"
131
- [fxLayoutGap]="options?.fxLayoutGap"
132
- [fxLayoutAlign]="options?.fxLayoutAlign"
133
- [attr.fxFlexFill]="options?.fxLayoutAlign"></flex-layout-root-widget>
134
- </fieldset>
135
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
136
- [innerHTML]="options?.errorMessage"></mat-error>
137
- </mat-expansion-panel>`,
138
- styles: [`
139
- fieldset { border: 0; margin: 0; padding: 0; }
140
- .legend { font-weight: bold; }
141
- .expandable > .legend:before { content: '▶'; padding-right: .3em; }
142
- .expanded > .legend:before { content: '▼'; padding-right: .2em; }
143
- `],
144
- })
145
- export class FlexLayoutSectionComponent implements OnInit {
146
- formControl: AbstractControl;
147
- controlName: string;
148
- controlValue: any;
149
- controlDisabled = false;
150
- boundControl = false;
151
- options: any;
152
- expanded = true;
153
- containerType = 'div';
154
- @Input() layoutNode: any;
155
- @Input() layoutIndex: number[];
156
- @Input() dataIndex: number[];
157
-
158
- constructor(
159
- private jsf: JsonSchemaFormService
160
- ) { }
161
-
162
- get sectionTitle() {
163
- return this.options.notitle ? null : this.jsf.setItemTitle(this);
164
- }
165
-
166
- ngOnInit() {
167
- this.jsf.initializeControl(this);
168
- this.options = this.layoutNode.options || {};
169
- this.expanded = typeof this.options.expanded === 'boolean' ?
170
- this.options.expanded : !this.options.expandable;
171
- switch (this.layoutNode.type) {
172
- case 'section': case 'array': case 'fieldset': case 'advancedfieldset':
173
- case 'authfieldset': case 'optionfieldset': case 'selectfieldset':
174
- this.containerType = 'fieldset';
175
- break;
176
- case 'card':
177
- this.containerType = 'card';
178
- break;
179
- case 'expansion-panel':
180
- this.containerType = 'expansion-panel';
181
- break;
182
- default: // 'div', 'flex', 'tab', 'conditional', 'actions'
183
- this.containerType = 'div';
184
- }
185
- }
186
-
187
- toggleExpanded() {
188
- if (this.options.expandable) { this.expanded = !this.expanded; }
189
- }
190
-
191
- // Set attributes for flexbox container
192
- // (child attributes are set in flex-layout-root.component)
193
- getFlexAttribute(attribute: string) {
194
- const flexActive: boolean =
195
- this.layoutNode.type === 'flex' ||
196
- !!this.options.displayFlex ||
197
- this.options.display === 'flex';
198
- // if (attribute !== 'flex' && !flexActive) { return null; }
199
- switch (attribute) {
200
- case 'is-flex':
201
- return flexActive;
202
- case 'display':
203
- return flexActive ? 'flex' : 'initial';
204
- case 'flex-direction': case 'flex-wrap':
205
- const index = ['flex-direction', 'flex-wrap'].indexOf(attribute);
206
- return (this.options['flex-flow'] || '').split(/\s+/)[index] ||
207
- this.options[attribute] || ['column', 'nowrap'][index];
208
- case 'justify-content': case 'align-items': case 'align-content':
209
- return this.options[attribute];
210
- case 'layout':
211
- return (this.options.fxLayout || 'row') +
212
- this.options.fxLayoutWrap ? ' ' + this.options.fxLayoutWrap : '';
213
-
214
- }
215
- }
216
- }
@@ -1,56 +0,0 @@
1
- import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
2
- import { JsonSchemaFormService } from '@ajsf/core';
3
-
4
-
5
- @Component({
6
- // tslint:disable-next-line:component-selector
7
- selector: 'material-add-reference-widget',
8
- template: `
9
- <section [class]="options?.htmlClass || ''" align="end">
10
- <button mat-raised-button *ngIf="showAddButton"
11
- [color]="options?.color || 'accent'"
12
- [disabled]="options?.readonly"
13
- (click)="addItem($event)">
14
- <span *ngIf="options?.icon" [class]="options?.icon"></span>
15
- <span *ngIf="options?.title" [innerHTML]="buttonText"></span>
16
- </button>
17
- </section>`,
18
- changeDetection: ChangeDetectionStrategy.Default,
19
- })
20
- export class MaterialAddReferenceComponent implements OnInit {
21
- options: any;
22
- itemCount: number;
23
- previousLayoutIndex: number[];
24
- previousDataIndex: number[];
25
- @Input() layoutNode: any;
26
- @Input() layoutIndex: number[];
27
- @Input() dataIndex: number[];
28
-
29
- constructor(
30
- private jsf: JsonSchemaFormService
31
- ) { }
32
-
33
- ngOnInit() {
34
- this.options = this.layoutNode.options || {};
35
- }
36
-
37
- get showAddButton(): boolean {
38
- return !this.layoutNode.arrayItem ||
39
- this.layoutIndex[this.layoutIndex.length - 1] < this.options.maxItems;
40
- }
41
-
42
- addItem(event) {
43
- event.preventDefault();
44
- this.jsf.addItem(this);
45
- }
46
-
47
- get buttonText(): string {
48
- const parent: any = {
49
- dataIndex: this.dataIndex.slice(0, -1),
50
- layoutIndex: this.layoutIndex.slice(0, -1),
51
- layoutNode: this.jsf.getParentNode(this),
52
- };
53
- return parent.layoutNode.add ||
54
- this.jsf.setArrayItemTitle(parent, this.layoutNode, this.itemCount);
55
- }
56
- }
@@ -1,68 +0,0 @@
1
- import { AbstractControl } from '@angular/forms';
2
- import { Component, Input, OnInit } from '@angular/core';
3
- import { JsonSchemaFormService, buildTitleMap } from '@ajsf/core';
4
-
5
-
6
- @Component({
7
- // tslint:disable-next-line:component-selector
8
- selector: 'material-button-group-widget',
9
- template: `
10
- <div>
11
- <div *ngIf="options?.title">
12
- <label
13
- [attr.for]="'control' + layoutNode?._id"
14
- [class]="options?.labelHtmlClass || ''"
15
- [style.display]="options?.notitle ? 'none' : ''"
16
- [innerHTML]="options?.title"></label>
17
- </div>
18
- <mat-button-toggle-group
19
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
20
- [attr.readonly]="options?.readonly ? 'readonly' : null"
21
- [attr.required]="options?.required"
22
- [disabled]="controlDisabled || options?.readonly"
23
- [name]="controlName"
24
- [value]="controlValue"
25
- [vertical]="!!options.vertical">
26
- <mat-button-toggle *ngFor="let radioItem of radiosList"
27
- [id]="'control' + layoutNode?._id + '/' + radioItem?.name"
28
- [value]="radioItem?.value"
29
- (click)="updateValue(radioItem?.value)">
30
- <span [innerHTML]="radioItem?.name"></span>
31
- </mat-button-toggle>
32
- </mat-button-toggle-group>
33
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
34
- [innerHTML]="options?.errorMessage"></mat-error>
35
- </div>`,
36
- styles: [` mat-error { font-size: 75%; } `],
37
- })
38
- export class MaterialButtonGroupComponent implements OnInit {
39
- formControl: AbstractControl;
40
- controlName: string;
41
- controlValue: any;
42
- controlDisabled = false;
43
- boundControl = false;
44
- options: any;
45
- radiosList: any[] = [];
46
- vertical = false;
47
- @Input() layoutNode: any;
48
- @Input() layoutIndex: number[];
49
- @Input() dataIndex: number[];
50
-
51
- constructor(
52
- private jsf: JsonSchemaFormService
53
- ) { }
54
-
55
- ngOnInit() {
56
- this.options = this.layoutNode.options || {};
57
- this.radiosList = buildTitleMap(
58
- this.options.titleMap || this.options.enumNames,
59
- this.options.enum, true
60
- );
61
- this.jsf.initializeControl(this);
62
- }
63
-
64
- updateValue(value) {
65
- this.options.showErrors = true;
66
- this.jsf.updateValue(this, value);
67
- }
68
- }
@@ -1,59 +0,0 @@
1
- import { AbstractControl } from '@angular/forms';
2
- import { Component, Input, OnInit } from '@angular/core';
3
- import { JsonSchemaFormService, hasOwn } from '@ajsf/core';
4
-
5
- @Component({
6
- // tslint:disable-next-line:component-selector
7
- selector: 'material-button-widget',
8
- template: `
9
- <div class="button-row" [class]="options?.htmlClass || ''">
10
- <button mat-raised-button
11
- [attr.readonly]="options?.readonly ? 'readonly' : null"
12
- [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
13
- [color]="options?.color || 'primary'"
14
- [disabled]="controlDisabled || options?.readonly"
15
- [id]="'control' + layoutNode?._id"
16
- [name]="controlName"
17
- [type]="layoutNode?.type"
18
- [value]="controlValue"
19
- (click)="updateValue($event)">
20
- <mat-icon *ngIf="options?.icon" class="mat-24">{{options?.icon}}</mat-icon>
21
- <span *ngIf="options?.title" [innerHTML]="options?.title"></span>
22
- </button>
23
- </div>`,
24
- styles: [` button { margin-top: 10px; } `],
25
- })
26
- export class MaterialButtonComponent implements OnInit {
27
- formControl: AbstractControl;
28
- controlName: string;
29
- controlValue: any;
30
- controlDisabled = false;
31
- boundControl = false;
32
- options: any;
33
- @Input() layoutNode: any;
34
- @Input() layoutIndex: number[];
35
- @Input() dataIndex: number[];
36
-
37
- constructor(
38
- private jsf: JsonSchemaFormService
39
- ) { }
40
-
41
- ngOnInit() {
42
- this.options = this.layoutNode.options || {};
43
- this.jsf.initializeControl(this);
44
- if (hasOwn(this.options, 'disabled')) {
45
- this.controlDisabled = this.options.disabled;
46
- } else if (this.jsf.formOptions.disableInvalidSubmit) {
47
- this.controlDisabled = !this.jsf.isValid;
48
- this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);
49
- }
50
- }
51
-
52
- updateValue(event) {
53
- if (typeof this.options.onClick === 'function') {
54
- this.options.onClick(event);
55
- } else {
56
- this.jsf.updateValue(this, event.target.value);
57
- }
58
- }
59
- }
@@ -1,112 +0,0 @@
1
- import { Component, Input, OnInit } from '@angular/core';
2
- import { AbstractControl } from '@angular/forms';
3
- import { JsonSchemaFormService } from '@ajsf/core';
4
-
5
- @Component({
6
- // tslint:disable-next-line:component-selector
7
- selector: 'material-checkbox-widget',
8
- template: `
9
- <mat-checkbox *ngIf="boundControl && !showSlideToggle"
10
- [formControl]="formControl"
11
- align="left"
12
- [color]="options?.color || 'primary'"
13
- [id]="'control' + layoutNode?._id"
14
- labelPosition="after"
15
- [name]="controlName"
16
- (blur)="options.showErrors = true">
17
- <span *ngIf="options?.title"
18
- class="checkbox-name"
19
- [style.display]="options?.notitle ? 'none' : ''"
20
- [innerHTML]="options?.title"></span>
21
- </mat-checkbox>
22
- <mat-checkbox *ngIf="!boundControl && !showSlideToggle"
23
- align="left"
24
- [color]="options?.color || 'primary'"
25
- [disabled]="controlDisabled || options?.readonly"
26
- [id]="'control' + layoutNode?._id"
27
- labelPosition="after"
28
- [name]="controlName"
29
- [checked]="isChecked"
30
- (blur)="options.showErrors = true"
31
- (change)="updateValue($event)">
32
- <span *ngIf="options?.title"
33
- class="checkbox-name"
34
- [style.display]="options?.notitle ? 'none' : ''"
35
- [innerHTML]="options?.title"></span>
36
- </mat-checkbox>
37
- <mat-slide-toggle *ngIf="boundControl && showSlideToggle"
38
- [formControl]="formControl"
39
- align="left"
40
- [color]="options?.color || 'primary'"
41
- [id]="'control' + layoutNode?._id"
42
- labelPosition="after"
43
- [name]="controlName"
44
- (blur)="options.showErrors = true">
45
- <span *ngIf="options?.title"
46
- class="checkbox-name"
47
- [style.display]="options?.notitle ? 'none' : ''"
48
- [innerHTML]="options?.title"></span>
49
- </mat-slide-toggle>
50
- <mat-slide-toggle *ngIf="!boundControl && showSlideToggle"
51
- align="left"
52
- [color]="options?.color || 'primary'"
53
- [disabled]="controlDisabled || options?.readonly"
54
- [id]="'control' + layoutNode?._id"
55
- labelPosition="after"
56
- [name]="controlName"
57
- [checked]="isChecked"
58
- (blur)="options.showErrors = true"
59
- (change)="updateValue($event)">
60
- <span *ngIf="options?.title"
61
- class="checkbox-name"
62
- [style.display]="options?.notitle ? 'none' : ''"
63
- [innerHTML]="options?.title"></span>
64
- </mat-slide-toggle>
65
- <mat-error *ngIf="options?.showErrors && options?.errorMessage"
66
- [innerHTML]="options?.errorMessage"></mat-error>`,
67
- styles: [`
68
- .checkbox-name { white-space: nowrap; }
69
- mat-error { font-size: 75%; }
70
- `],
71
- })
72
- export class MaterialCheckboxComponent implements OnInit {
73
- formControl: AbstractControl;
74
- controlName: string;
75
- controlValue: any;
76
- controlDisabled = false;
77
- boundControl = false;
78
- options: any;
79
- trueValue: any = true;
80
- falseValue: any = false;
81
- showSlideToggle = false;
82
- @Input() layoutNode: any;
83
- @Input() layoutIndex: number[];
84
- @Input() dataIndex: number[];
85
-
86
- constructor(
87
- private jsf: JsonSchemaFormService
88
- ) { }
89
-
90
- ngOnInit() {
91
- this.options = this.layoutNode.options || {};
92
- this.jsf.initializeControl(this, !this.options.readonly);
93
- if (this.controlValue === null || this.controlValue === undefined) {
94
- this.controlValue = false;
95
- this.jsf.updateValue(this, this.falseValue);
96
- }
97
- if (this.layoutNode.type === 'slide-toggle' ||
98
- this.layoutNode.format === 'slide-toggle'
99
- ) {
100
- this.showSlideToggle = true;
101
- }
102
- }
103
-
104
- updateValue(event) {
105
- this.options.showErrors = true;
106
- this.jsf.updateValue(this, event.checked ? this.trueValue : this.falseValue);
107
- }
108
-
109
- get isChecked() {
110
- return this.jsf.getFormControlValue(this) === this.trueValue;
111
- }
112
- }