ngx-render-material-forms 0.0.9 → 1.0.0

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 (9) hide show
  1. package/esm2020/lib/components/select/select.component.mjs +3 -2
  2. package/esm2020/lib/const/{ButtonsThemes.mjs → ButtonsThemes.js} +0 -0
  3. package/esm2020/lib/const/{LabelPositions.mjs → LabelPositions.js} +0 -0
  4. package/esm2020/lib/directives/{mask.directive.mjs → mask.directive.js} +0 -0
  5. package/fesm2015/ngx-render-material-forms.js +1506 -1505
  6. package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
  7. package/fesm2020/{ngx-render-material-forms.js → ngx-render-material-forms.mjs} +2 -1
  8. package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
  9. package/package.json +1 -1
package/fesm2015/ngx-render-material-forms.js CHANGED
@@ -1,100 +1,101 @@
1
- import * as i0 from '@angular/core';
2
- import { Injectable, Component, Input, ViewChild, ViewContainerRef, ViewChildren, EventEmitter, Output, forwardRef, Directive, Optional, NgModule } from '@angular/core';
3
- import * as i1 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
5
- import * as i2 from '@angular/forms';
6
- import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
7
- import * as i4$3 from '@angular/material/input';
8
- import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
9
- import * as i2$1 from '@angular/material/button';
10
- import { MatButtonModule } from '@angular/material/button';
11
- import * as i3 from '@angular/material/form-field';
12
- import { MatFormFieldModule } from '@angular/material/form-field';
13
- import * as i4$6 from '@angular/material/checkbox';
14
- import { MatCheckboxModule } from '@angular/material/checkbox';
15
- import * as i4$7 from '@angular/material/radio';
16
- import { MatRadioModule } from '@angular/material/radio';
17
- import * as i4$4 from '@angular/material/select';
18
- import { MatSelectModule } from '@angular/material/select';
19
- import { MatListModule } from '@angular/material/list';
20
- import * as i4$5 from '@angular/material/chips';
21
- import { MatChipsModule } from '@angular/material/chips';
22
- import * as i2$2 from '@angular/material/expansion';
23
- import { MatExpansionModule } from '@angular/material/expansion';
24
- import * as i4 from '@angular/material/card';
25
- import { MatCardModule } from '@angular/material/card';
26
- import * as i2$3 from '@angular/material/tabs';
27
- import { MatTabsModule } from '@angular/material/tabs';
28
- import * as i3$2 from '@angular/material/table';
29
- import { MatTableDataSource, MatTableModule } from '@angular/material/table';
30
- import * as i5$2 from '@angular/material/datepicker';
31
- import { MatDatepickerModule } from '@angular/material/datepicker';
32
- import * as i3$4 from '@angular/material/progress-spinner';
33
- import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
34
- import * as i4$1 from '@angular/material/icon';
35
- import { MatIconModule } from '@angular/material/icon';
36
- import * as i5$1 from '@angular/material/core';
37
- import { MatNativeDateModule } from '@angular/material/core';
38
- import Webform from 'formiojs/Webform.js';
39
- import FormioComponent$2 from 'formiojs/components/_classes/component/Component.js';
40
- import TextFieldComponent from 'formiojs/components/textfield/TextField.js';
41
- import Validator from 'formiojs/validator/Validator.js';
42
- import unescape from 'lodash/unescape';
43
- import get from 'lodash/get';
44
- import * as i5 from '@angular/flex-layout/flex';
45
- import * as i4$2 from '@angular/flex-layout/extended';
46
- import * as i3$1 from '@angular/material/tooltip';
47
- import { MatTooltipModule } from '@angular/material/tooltip';
48
- import PasswordComponent from 'formiojs/components/password/Password.js';
49
- import EmailComponent from 'formiojs/components/email/Email.js';
50
- import UrlComponent from 'formiojs/components/url/Url.js';
51
- import PhoneNumberComponent from 'formiojs/components/phonenumber/PhoneNumber.js';
52
- import NumberComponent from 'formiojs/components/number/Number.js';
53
- import _, { get as get$1 } from 'lodash';
54
- import CurrencyComponent from 'formiojs/components/currency/Currency.js';
55
- import DayComponent from 'formiojs/components/day/Day.js';
56
- import { momentDate } from 'formiojs/utils/utils.js';
57
- import HiddenComponent from 'formiojs/components/hidden/Hidden.js';
58
- import HtmlComponent from 'formiojs/components/html/HTML.js';
59
- import { ENTER, COMMA } from '@angular/cdk/keycodes';
60
- import TagsComponent from 'formiojs/components/tags/Tags.js';
61
- import ButtonComponent from 'formiojs/components/button/Button.js';
62
- import TextAreaComponent from 'formiojs/components/textarea/TextArea.js';
63
- import isNil from 'lodash/isNil';
64
- import PanelComponent from 'formiojs/components/panel/Panel.js';
65
- import ColumnsComponent from 'formiojs/components/columns/Columns.js';
66
- import ContainerComponent from 'formiojs/components/container/Container.js';
67
- import TabsComponent from 'formiojs/components/tabs/Tabs.js';
68
- import DateTimeComponent from 'formiojs/components/datetime/DateTime.js';
69
- import TimeComponent from 'formiojs/components/time/Time.js';
70
- import * as moment_ from 'moment';
71
- import CheckboxComponent from 'formiojs/components/checkbox/Checkbox.js';
72
- import FieldsetComponent from 'formiojs/components/fieldset/Fieldset.js';
73
- import ContentComponent from 'formiojs/components/content/Content.js';
74
- import SignatureComponent from 'formiojs/components/signature/Signature.js';
75
- import SurveyComponent from 'formiojs/components/survey/Survey.js';
76
- import RadioComponent from 'formiojs/components/radio/Radio.js';
77
- import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js';
78
- import SelectComponent from 'formiojs/components/select/Select.js';
79
- import { Subject, takeUntil } from 'rxjs';
80
- import * as i7 from 'ngx-mat-select-search';
81
- import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
82
- import WellComponent from 'formiojs/components/well/Well.js';
83
- import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
84
- import * as i7$1 from '@angular/cdk/drag-drop';
85
- import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
86
- import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
87
- import Components$2 from 'formiojs/components/Components';
88
- import isString from 'lodash/isString';
89
- import TableComponent from 'formiojs/components/table/Table.js';
90
- import Wizard from 'formiojs/Wizard';
91
- import Displays from 'formiojs/displays/Displays';
92
- import * as i3$3 from '@angular/material/stepper';
93
- import { MatStepperModule } from '@angular/material/stepper';
94
- import * as i1$1 from '@formio/angular';
95
- import { FormioBaseComponent } from '@formio/angular';
96
- import { FlexLayoutModule } from '@angular/flex-layout';
97
-
1
+ import * as i0 from '@angular/core';
2
+ import { Injectable, Component, Input, ViewChild, ViewContainerRef, ViewChildren, EventEmitter, Output, forwardRef, Directive, Optional, NgModule } from '@angular/core';
3
+ import * as i1 from '@angular/common';
4
+ import { CommonModule } from '@angular/common';
5
+ import * as i2 from '@angular/forms';
6
+ import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
7
+ import * as i4$3 from '@angular/material/input';
8
+ import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
9
+ import * as i2$1 from '@angular/material/button';
10
+ import { MatButtonModule } from '@angular/material/button';
11
+ import * as i3 from '@angular/material/form-field';
12
+ import { MatFormFieldModule } from '@angular/material/form-field';
13
+ import * as i4$6 from '@angular/material/checkbox';
14
+ import { MatCheckboxModule } from '@angular/material/checkbox';
15
+ import * as i4$7 from '@angular/material/radio';
16
+ import { MatRadioModule } from '@angular/material/radio';
17
+ import * as i4$4 from '@angular/material/select';
18
+ import { MatSelectModule } from '@angular/material/select';
19
+ import { MatListModule } from '@angular/material/list';
20
+ import * as i4$5 from '@angular/material/chips';
21
+ import { MatChipsModule } from '@angular/material/chips';
22
+ import * as i2$2 from '@angular/material/expansion';
23
+ import { MatExpansionModule } from '@angular/material/expansion';
24
+ import * as i4 from '@angular/material/card';
25
+ import { MatCardModule } from '@angular/material/card';
26
+ import * as i2$3 from '@angular/material/tabs';
27
+ import { MatTabsModule } from '@angular/material/tabs';
28
+ import * as i3$2 from '@angular/material/table';
29
+ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
30
+ import * as i5$2 from '@angular/material/datepicker';
31
+ import { MatDatepickerModule } from '@angular/material/datepicker';
32
+ import * as i3$4 from '@angular/material/progress-spinner';
33
+ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
34
+ import * as i4$1 from '@angular/material/icon';
35
+ import { MatIconModule } from '@angular/material/icon';
36
+ import * as i5$1 from '@angular/material/core';
37
+ import { MatNativeDateModule } from '@angular/material/core';
38
+ import Webform from 'formiojs/Webform.js';
39
+ import FormioComponent$2 from 'formiojs/components/_classes/component/Component.js';
40
+ import TextFieldComponent from 'formiojs/components/textfield/TextField.js';
41
+ import Validator from 'formiojs/validator/Validator.js';
42
+ import unescape from 'lodash/unescape';
43
+ import get from 'lodash/get';
44
+ import * as i5 from '@angular/flex-layout/flex';
45
+ import * as i4$2 from '@angular/flex-layout/extended';
46
+ import * as i3$1 from '@angular/material/tooltip';
47
+ import { MatTooltipModule } from '@angular/material/tooltip';
48
+ import PasswordComponent from 'formiojs/components/password/Password.js';
49
+ import EmailComponent from 'formiojs/components/email/Email.js';
50
+ import UrlComponent from 'formiojs/components/url/Url.js';
51
+ import PhoneNumberComponent from 'formiojs/components/phonenumber/PhoneNumber.js';
52
+ import NumberComponent from 'formiojs/components/number/Number.js';
53
+ import _, { get as get$1 } from 'lodash';
54
+ import CurrencyComponent from 'formiojs/components/currency/Currency.js';
55
+ import DayComponent from 'formiojs/components/day/Day.js';
56
+ import { momentDate } from 'formiojs/utils/utils.js';
57
+ import HiddenComponent from 'formiojs/components/hidden/Hidden.js';
58
+ import HtmlComponent from 'formiojs/components/html/HTML.js';
59
+ import { ENTER, COMMA } from '@angular/cdk/keycodes';
60
+ import TagsComponent from 'formiojs/components/tags/Tags.js';
61
+ import ButtonComponent from 'formiojs/components/button/Button.js';
62
+ import TextAreaComponent from 'formiojs/components/textarea/TextArea.js';
63
+ import isNil from 'lodash/isNil';
64
+ import PanelComponent from 'formiojs/components/panel/Panel.js';
65
+ import ColumnsComponent from 'formiojs/components/columns/Columns.js';
66
+ import ContainerComponent from 'formiojs/components/container/Container.js';
67
+ import TabsComponent from 'formiojs/components/tabs/Tabs.js';
68
+ import DateTimeComponent from 'formiojs/components/datetime/DateTime.js';
69
+ import TimeComponent from 'formiojs/components/time/Time.js';
70
+ import * as moment_ from 'moment';
71
+ import CheckboxComponent from 'formiojs/components/checkbox/Checkbox.js';
72
+ import FieldsetComponent from 'formiojs/components/fieldset/Fieldset.js';
73
+ import ContentComponent from 'formiojs/components/content/Content.js';
74
+ import SignatureComponent from 'formiojs/components/signature/Signature.js';
75
+ import SurveyComponent from 'formiojs/components/survey/Survey.js';
76
+ import RadioComponent from 'formiojs/components/radio/Radio.js';
77
+ import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js';
78
+ import SelectComponent from 'formiojs/components/select/Select.js';
79
+ import { Subject } from 'rxjs';
80
+ import { takeUntil } from 'rxjs/operators';
81
+ import * as i7 from 'ngx-mat-select-search';
82
+ import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
83
+ import WellComponent from 'formiojs/components/well/Well.js';
84
+ import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
85
+ import * as i7$1 from '@angular/cdk/drag-drop';
86
+ import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
87
+ import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
88
+ import Components$2 from 'formiojs/components/Components';
89
+ import isString from 'lodash/isString';
90
+ import TableComponent from 'formiojs/components/table/Table.js';
91
+ import Wizard from 'formiojs/Wizard';
92
+ import Displays from 'formiojs/displays/Displays';
93
+ import * as i3$3 from '@angular/material/stepper';
94
+ import { MatStepperModule } from '@angular/material/stepper';
95
+ import * as i1$1 from '@formio/angular';
96
+ import { FormioBaseComponent } from '@formio/angular';
97
+ import { FlexLayoutModule } from '@angular/flex-layout';
98
+
98
99
  class NgxRenderMaterialFormsService {
99
100
  constructor() { }
100
101
  }
@@ -105,28 +106,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
105
106
  args: [{
106
107
  providedIn: 'root'
107
108
  }]
108
- }], ctorParameters: function () { return []; } });
109
-
109
+ }], ctorParameters: function () { return []; } });
110
+
110
111
  class NgxRenderMaterialFormsComponent {
111
112
  constructor() { }
112
113
  ngOnInit() {
113
114
  }
114
115
  }
115
116
  NgxRenderMaterialFormsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxRenderMaterialFormsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
116
- NgxRenderMaterialFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: NgxRenderMaterialFormsComponent, selector: "NgxMat-NgxRenderMaterialForms", ngImport: i0, template: `
117
- <p>
118
- ngx-render-material-forms works!
119
- </p>
117
+ NgxRenderMaterialFormsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: NgxRenderMaterialFormsComponent, selector: "NgxMat-NgxRenderMaterialForms", ngImport: i0, template: `
118
+ <p>
119
+ ngx-render-material-forms works!
120
+ </p>
120
121
  `, isInline: true });
121
122
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxRenderMaterialFormsComponent, decorators: [{
122
123
  type: Component,
123
- args: [{ selector: 'NgxMat-NgxRenderMaterialForms', template: `
124
- <p>
125
- ngx-render-material-forms works!
126
- </p>
124
+ args: [{ selector: 'NgxMat-NgxRenderMaterialForms', template: `
125
+ <p>
126
+ ngx-render-material-forms works!
127
+ </p>
127
128
  ` }]
128
- }], ctorParameters: function () { return []; } });
129
-
129
+ }], ctorParameters: function () { return []; } });
130
+
130
131
  console.log('Webform=>', Webform);
131
132
  Webform.prototype.redraw = function () {
132
133
  return this.render();
@@ -143,8 +144,8 @@ Webform.prototype.render = function () {
143
144
  this.renderComponents();
144
145
  this.setValue(this._submission);
145
146
  }
146
- };
147
-
147
+ };
148
+
148
149
  var FormioComponent$1 = (() => {
149
150
  const beforeSubmit = FormioComponent$2.prototype.beforeSubmit;
150
151
  FormioComponent$2.prototype.beforeSubmit = function (...args) {
@@ -174,8 +175,8 @@ var FormioComponent$1 = (() => {
174
175
  }
175
176
  });
176
177
  return FormioComponent$2;
177
- })();
178
-
178
+ })();
179
+
179
180
  // @dynamic
180
181
  class FormioControl extends FormControl {
181
182
  constructor(...args) {
@@ -208,8 +209,8 @@ class FormioControl extends FormControl {
208
209
  }
209
210
  };
210
211
  }
211
- }
212
-
212
+ }
213
+
213
214
  class MaterialComponent {
214
215
  constructor(element, ref) {
215
216
  this.element = element;
@@ -345,8 +346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
345
346
  }], control: [{
346
347
  type: Input
347
348
  }] } });
348
- FormioComponent$1.MaterialComponent = MaterialComponent;
349
-
349
+ FormioComponent$1.MaterialComponent = MaterialComponent;
350
+
350
351
  var LabelPositions;
351
352
  (function (LabelPositions) {
352
353
  LabelPositions["RIGHT_RIGHT"] = "right-right";
@@ -355,8 +356,8 @@ var LabelPositions;
355
356
  LabelPositions["LEFT_RIGHT"] = "left-right";
356
357
  LabelPositions["BOTTOM"] = "bottom";
357
358
  LabelPositions["TOP"] = "top";
358
- })(LabelPositions || (LabelPositions = {}));
359
-
359
+ })(LabelPositions || (LabelPositions = {}));
360
+
360
361
  class LabelComponent {
361
362
  }
362
363
  LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -366,8 +367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
366
367
  args: [{ selector: 'span[matFormioLabel]', template: "<ng-container *ngIf=\"instance\">\n {{ instance.component.label }}<span class=\"required-star\" *ngIf=\"instance.component.validate.required\">*</span>\n <mat-icon *ngIf=\"instance.component.tooltip\" style=\"font-size: 1rem;\"\n matTooltip=\"{{ instance.component.tooltip }}\" matSuffix\n >\n info\n </mat-icon>\n</ng-container>\n", styles: [":host{pointer-events:all;display:block}.required-star{margin-left:.2rem;color:red;font-size:.8rem;vertical-align:top}\n"] }]
367
368
  }], propDecorators: { instance: [{
368
369
  type: Input
369
- }] } });
370
-
370
+ }] } });
371
+
371
372
  class FormioFormFieldComponent {
372
373
  constructor() {
373
374
  this.labelPositions = LabelPositions;
@@ -416,38 +417,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
416
417
  args: ['instance']
417
418
  }], componentTemplate: [{
418
419
  type: Input
419
- }] } });
420
-
421
- const TEXTFIELD_TEMPLATE = `
422
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
423
- <ng-template #componentTemplate let-hasLabel>
424
- <mat-form-field [appearance]="getFormFieldAppearance()" fxFill>
425
-
426
- <mat-label *ngIf="hasLabel">
427
- <span [instance]="instance" matFormioLabel></span>
428
- </mat-label>
429
-
430
- <span *ngIf="instance.component.prefix && instance.type !== 'currency'"
431
- matPrefix
432
- >
433
- {{ instance.component.prefix }}&nbsp;
434
- </span>
435
- <input matInput
436
- type="{{ inputType }}"
437
- [formControl]="control"
438
- [placeholder]="instance.component.placeholder"
439
- (input)="onChange()" #input
440
- >
441
- <span *ngIf="instance.component.suffix" matSuffix>{{ instance.component.suffix }}</span>
442
-
443
- <mat-hint *ngIf="instance.component.showWordCount || instance.component.showCharCount">
444
- {{ getHint() }}
445
- </mat-hint>
446
-
447
- <br/>
448
- <mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
449
- </mat-form-field>
450
- </ng-template>
420
+ }] } });
421
+
422
+ const TEXTFIELD_TEMPLATE = `
423
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
424
+ <ng-template #componentTemplate let-hasLabel>
425
+ <mat-form-field [appearance]="getFormFieldAppearance()" fxFill>
426
+
427
+ <mat-label *ngIf="hasLabel">
428
+ <span [instance]="instance" matFormioLabel></span>
429
+ </mat-label>
430
+
431
+ <span *ngIf="instance.component.prefix && instance.type !== 'currency'"
432
+ matPrefix
433
+ >
434
+ {{ instance.component.prefix }}&nbsp;
435
+ </span>
436
+ <input matInput
437
+ type="{{ inputType }}"
438
+ [formControl]="control"
439
+ [placeholder]="instance.component.placeholder"
440
+ (input)="onChange()" #input
441
+ >
442
+ <span *ngIf="instance.component.suffix" matSuffix>{{ instance.component.suffix }}</span>
443
+
444
+ <mat-hint *ngIf="instance.component.showWordCount || instance.component.showCharCount">
445
+ {{ getHint() }}
446
+ </mat-hint>
447
+
448
+ <br/>
449
+ <mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
450
+ </mat-form-field>
451
+ </ng-template>
451
452
  `;
452
453
  class MaterialTextfieldComponent extends MaterialComponent {
453
454
  constructor() {
@@ -512,8 +513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
512
513
  template: TEXTFIELD_TEMPLATE
513
514
  }]
514
515
  }] });
515
- TextFieldComponent.MaterialComponent = MaterialTextfieldComponent;
516
-
516
+ TextFieldComponent.MaterialComponent = MaterialTextfieldComponent;
517
+
517
518
  class MaterialPasswordComponent extends MaterialTextfieldComponent {
518
519
  constructor() {
519
520
  super(...arguments);
@@ -529,8 +530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
529
530
  template: TEXTFIELD_TEMPLATE
530
531
  }]
531
532
  }] });
532
- PasswordComponent.MaterialComponent = MaterialPasswordComponent;
533
-
533
+ PasswordComponent.MaterialComponent = MaterialPasswordComponent;
534
+
534
535
  class MaterialEmailComponent extends MaterialTextfieldComponent {
535
536
  constructor() {
536
537
  super(...arguments);
@@ -546,8 +547,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
546
547
  template: TEXTFIELD_TEMPLATE
547
548
  }]
548
549
  }] });
549
- EmailComponent.MaterialComponent = MaterialEmailComponent;
550
-
550
+ EmailComponent.MaterialComponent = MaterialEmailComponent;
551
+
551
552
  class MaterialUrlComponent extends MaterialTextfieldComponent {
552
553
  constructor() {
553
554
  super(...arguments);
@@ -563,8 +564,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
563
564
  template: TEXTFIELD_TEMPLATE
564
565
  }]
565
566
  }] });
566
- UrlComponent.MaterialComponent = MaterialUrlComponent;
567
-
567
+ UrlComponent.MaterialComponent = MaterialUrlComponent;
568
+
568
569
  class MaterialPhoneNumberComponent extends MaterialTextfieldComponent {
569
570
  constructor() {
570
571
  super(...arguments);
@@ -580,8 +581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
580
581
  template: TEXTFIELD_TEMPLATE
581
582
  }]
582
583
  }] });
583
- PhoneNumberComponent.MaterialComponent = MaterialPhoneNumberComponent;
584
-
584
+ PhoneNumberComponent.MaterialComponent = MaterialPhoneNumberComponent;
585
+
585
586
  class MaterialNumberComponent extends MaterialTextfieldComponent {
586
587
  constructor(element, ref, renderer) {
587
588
  super(element, ref);
@@ -633,8 +634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
633
634
  template: TEXTFIELD_TEMPLATE
634
635
  }]
635
636
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });
636
- NumberComponent.MaterialComponent = MaterialNumberComponent;
637
-
637
+ NumberComponent.MaterialComponent = MaterialNumberComponent;
638
+
638
639
  class MaterialCurrencyComponent extends MaterialNumberComponent {
639
640
  constructor() {
640
641
  super(...arguments);
@@ -654,8 +655,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
654
655
  template: TEXTFIELD_TEMPLATE
655
656
  }]
656
657
  }] });
657
- CurrencyComponent.MaterialComponent = MaterialCurrencyComponent;
658
-
658
+ CurrencyComponent.MaterialComponent = MaterialCurrencyComponent;
659
+
659
660
  DayComponent.prototype.getFieldValue = function (name) {
660
661
  return this.refs[name] ? this.refs[name].value : '';
661
662
  };
@@ -706,96 +707,96 @@ class MaterialDayComponent extends MaterialComponent {
706
707
  }
707
708
  }
708
709
  MaterialDayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
709
- MaterialDayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDayComponent, selector: "mat-formio-day", usesInheritance: true, ngImport: i0, template: `
710
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
711
- <ng-template #componentTemplate let-hasLabel>
712
- <mat-label *ngIf="hasLabel">
713
- <span [instance]="instance" matFormioLabel></span>
714
- </mat-label>
715
- <mat-form-field *ngIf="instance.dayFirst && instance.showDay">
716
- <mat-label *ngIf="!instance.component.hideInputLabels">Day</mat-label>
717
- <mat-select [formControl]="dayControl" (selectionChange)="onChange()" [required]="instance.dayRequired">
718
- <mat-option *ngFor="let day of instance.days" [value]="day.value">
719
- {{day.label}}
720
- </mat-option>
721
- </mat-select>
722
- </mat-form-field>
723
- <mat-form-field *ngIf="instance.showMonth">
724
- <mat-label *ngIf="!instance.component.hideInputLabels">Month</mat-label>
725
- <mat-select [formControl]="monthControl" (selectionChange)="onChange()" [required]="instance.monthRequired">
726
- <mat-option *ngFor="let month of instance.months" [value]="month.value">
727
- {{month.label}}
728
- </mat-option>
729
- </mat-select>
730
- </mat-form-field>
731
- <mat-form-field *ngIf="!instance.dayFirst && instance.showDay">
732
- <mat-label *ngIf="!instance.component.hideInputLabels">Day</mat-label>
733
- <mat-select [formControl]="dayControl" (selectionChange)="onChange()" [required]="instance.dayRequired">
734
- <mat-option *ngFor="let day of instance.days" [value]="day.value">
735
- {{day.label}}
736
- </mat-option>
737
- </mat-select>
738
- </mat-form-field>
739
- <mat-form-field *ngIf="instance.showYear">
740
- <mat-label *ngIf="!instance.component.hideInputLabels">Year</mat-label>
741
- <mat-select [formControl]="yearControl" (selectionChange)="onChange()" [required]="instance.yearRequired">
742
- <mat-option *ngFor="let year of instance.years" [value]="year.value">
743
- {{year.label}}
744
- </mat-option>
745
- </mat-select>
746
- </mat-form-field>
747
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
748
- </ng-template>
710
+ MaterialDayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDayComponent, selector: "mat-formio-day", usesInheritance: true, ngImport: i0, template: `
711
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
712
+ <ng-template #componentTemplate let-hasLabel>
713
+ <mat-label *ngIf="hasLabel">
714
+ <span [instance]="instance" matFormioLabel></span>
715
+ </mat-label>
716
+ <mat-form-field *ngIf="instance.dayFirst && instance.showDay">
717
+ <mat-label *ngIf="!instance.component.hideInputLabels">Day</mat-label>
718
+ <mat-select [formControl]="dayControl" (selectionChange)="onChange()" [required]="instance.dayRequired">
719
+ <mat-option *ngFor="let day of instance.days" [value]="day.value">
720
+ {{day.label}}
721
+ </mat-option>
722
+ </mat-select>
723
+ </mat-form-field>
724
+ <mat-form-field *ngIf="instance.showMonth">
725
+ <mat-label *ngIf="!instance.component.hideInputLabels">Month</mat-label>
726
+ <mat-select [formControl]="monthControl" (selectionChange)="onChange()" [required]="instance.monthRequired">
727
+ <mat-option *ngFor="let month of instance.months" [value]="month.value">
728
+ {{month.label}}
729
+ </mat-option>
730
+ </mat-select>
731
+ </mat-form-field>
732
+ <mat-form-field *ngIf="!instance.dayFirst && instance.showDay">
733
+ <mat-label *ngIf="!instance.component.hideInputLabels">Day</mat-label>
734
+ <mat-select [formControl]="dayControl" (selectionChange)="onChange()" [required]="instance.dayRequired">
735
+ <mat-option *ngFor="let day of instance.days" [value]="day.value">
736
+ {{day.label}}
737
+ </mat-option>
738
+ </mat-select>
739
+ </mat-form-field>
740
+ <mat-form-field *ngIf="instance.showYear">
741
+ <mat-label *ngIf="!instance.component.hideInputLabels">Year</mat-label>
742
+ <mat-select [formControl]="yearControl" (selectionChange)="onChange()" [required]="instance.yearRequired">
743
+ <mat-option *ngFor="let year of instance.years" [value]="year.value">
744
+ {{year.label}}
745
+ </mat-option>
746
+ </mat-select>
747
+ </mat-form-field>
748
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
749
+ </ng-template>
749
750
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
750
751
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDayComponent, decorators: [{
751
752
  type: Component,
752
753
  args: [{
753
754
  selector: 'mat-formio-day',
754
- template: `
755
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
756
- <ng-template #componentTemplate let-hasLabel>
757
- <mat-label *ngIf="hasLabel">
758
- <span [instance]="instance" matFormioLabel></span>
759
- </mat-label>
760
- <mat-form-field *ngIf="instance.dayFirst && instance.showDay">
761
- <mat-label *ngIf="!instance.component.hideInputLabels">Day</mat-label>
762
- <mat-select [formControl]="dayControl" (selectionChange)="onChange()" [required]="instance.dayRequired">
763
- <mat-option *ngFor="let day of instance.days" [value]="day.value">
764
- {{day.label}}
765
- </mat-option>
766
- </mat-select>
767
- </mat-form-field>
768
- <mat-form-field *ngIf="instance.showMonth">
769
- <mat-label *ngIf="!instance.component.hideInputLabels">Month</mat-label>
770
- <mat-select [formControl]="monthControl" (selectionChange)="onChange()" [required]="instance.monthRequired">
771
- <mat-option *ngFor="let month of instance.months" [value]="month.value">
772
- {{month.label}}
773
- </mat-option>
774
- </mat-select>
775
- </mat-form-field>
776
- <mat-form-field *ngIf="!instance.dayFirst && instance.showDay">
777
- <mat-label *ngIf="!instance.component.hideInputLabels">Day</mat-label>
778
- <mat-select [formControl]="dayControl" (selectionChange)="onChange()" [required]="instance.dayRequired">
779
- <mat-option *ngFor="let day of instance.days" [value]="day.value">
780
- {{day.label}}
781
- </mat-option>
782
- </mat-select>
783
- </mat-form-field>
784
- <mat-form-field *ngIf="instance.showYear">
785
- <mat-label *ngIf="!instance.component.hideInputLabels">Year</mat-label>
786
- <mat-select [formControl]="yearControl" (selectionChange)="onChange()" [required]="instance.yearRequired">
787
- <mat-option *ngFor="let year of instance.years" [value]="year.value">
788
- {{year.label}}
789
- </mat-option>
790
- </mat-select>
791
- </mat-form-field>
792
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
793
- </ng-template>
755
+ template: `
756
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
757
+ <ng-template #componentTemplate let-hasLabel>
758
+ <mat-label *ngIf="hasLabel">
759
+ <span [instance]="instance" matFormioLabel></span>
760
+ </mat-label>
761
+ <mat-form-field *ngIf="instance.dayFirst && instance.showDay">
762
+ <mat-label *ngIf="!instance.component.hideInputLabels">Day</mat-label>
763
+ <mat-select [formControl]="dayControl" (selectionChange)="onChange()" [required]="instance.dayRequired">
764
+ <mat-option *ngFor="let day of instance.days" [value]="day.value">
765
+ {{day.label}}
766
+ </mat-option>
767
+ </mat-select>
768
+ </mat-form-field>
769
+ <mat-form-field *ngIf="instance.showMonth">
770
+ <mat-label *ngIf="!instance.component.hideInputLabels">Month</mat-label>
771
+ <mat-select [formControl]="monthControl" (selectionChange)="onChange()" [required]="instance.monthRequired">
772
+ <mat-option *ngFor="let month of instance.months" [value]="month.value">
773
+ {{month.label}}
774
+ </mat-option>
775
+ </mat-select>
776
+ </mat-form-field>
777
+ <mat-form-field *ngIf="!instance.dayFirst && instance.showDay">
778
+ <mat-label *ngIf="!instance.component.hideInputLabels">Day</mat-label>
779
+ <mat-select [formControl]="dayControl" (selectionChange)="onChange()" [required]="instance.dayRequired">
780
+ <mat-option *ngFor="let day of instance.days" [value]="day.value">
781
+ {{day.label}}
782
+ </mat-option>
783
+ </mat-select>
784
+ </mat-form-field>
785
+ <mat-form-field *ngIf="instance.showYear">
786
+ <mat-label *ngIf="!instance.component.hideInputLabels">Year</mat-label>
787
+ <mat-select [formControl]="yearControl" (selectionChange)="onChange()" [required]="instance.yearRequired">
788
+ <mat-option *ngFor="let year of instance.years" [value]="year.value">
789
+ {{year.label}}
790
+ </mat-option>
791
+ </mat-select>
792
+ </mat-form-field>
793
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
794
+ </ng-template>
794
795
  `
795
796
  }]
796
797
  }] });
797
- DayComponent.MaterialComponent = MaterialDayComponent;
798
-
798
+ DayComponent.MaterialComponent = MaterialDayComponent;
799
+
799
800
  class MaterialHiddenComponent extends MaterialComponent {
800
801
  }
801
802
  MaterialHiddenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialHiddenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -807,8 +808,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
807
808
  template: `<input matInput type="hidden" [formControl]="control" #input>`
808
809
  }]
809
810
  }] });
810
- HiddenComponent.MaterialComponent = MaterialHiddenComponent;
811
-
811
+ HiddenComponent.MaterialComponent = MaterialHiddenComponent;
812
+
812
813
  class MaterialHtmlComponent extends MaterialComponent {
813
814
  ngAfterViewInit() {
814
815
  super.ngAfterViewInit();
@@ -831,8 +832,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
831
832
  type: ViewChild,
832
833
  args: ['htmlBody']
833
834
  }] } });
834
- HtmlComponent.MaterialComponent = MaterialHtmlComponent;
835
-
835
+ HtmlComponent.MaterialComponent = MaterialHtmlComponent;
836
+
836
837
  class MaterialTagsComponent extends MaterialComponent {
837
838
  constructor() {
838
839
  super(...arguments);
@@ -870,72 +871,72 @@ class MaterialTagsComponent extends MaterialComponent {
870
871
  }
871
872
  }
872
873
  MaterialTagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTagsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
873
- MaterialTagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTagsComponent, selector: "mat-formio-tags", usesInheritance: true, ngImport: i0, template: `
874
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
875
- <ng-template #componentTemplate let-hasLabel>
876
- <mat-form-field class="example-chip-list" fxFill>
877
-
878
- <mat-label *ngIf="hasLabel">
879
- <span [instance]="instance" matFormioLabel></span>
880
- </mat-label>
881
-
882
- <mat-chip-list #chipList [attr.aria-label]="instance.component.label">
883
- <mat-chip *ngFor="let tag of tags; index as i;"
884
- [selectable]="true"
885
- [removable]="true"
886
- (removed)="remove(i)"
887
- >
888
- {{tag}}
889
- <mat-icon matChipRemove>cancel</mat-icon>
890
- </mat-chip>
891
-
892
- <input [formControl]="control"
893
- [matChipInputFor]="chipList"
894
- [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
895
- [matChipInputAddOnBlur]="true"
896
- (matChipInputTokenEnd)="add($event)"
897
- >
898
- </mat-chip-list>
899
- </mat-form-field>
900
- </ng-template>
874
+ MaterialTagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTagsComponent, selector: "mat-formio-tags", usesInheritance: true, ngImport: i0, template: `
875
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
876
+ <ng-template #componentTemplate let-hasLabel>
877
+ <mat-form-field class="example-chip-list" fxFill>
878
+
879
+ <mat-label *ngIf="hasLabel">
880
+ <span [instance]="instance" matFormioLabel></span>
881
+ </mat-label>
882
+
883
+ <mat-chip-list #chipList [attr.aria-label]="instance.component.label">
884
+ <mat-chip *ngFor="let tag of tags; index as i;"
885
+ [selectable]="true"
886
+ [removable]="true"
887
+ (removed)="remove(i)"
888
+ >
889
+ {{tag}}
890
+ <mat-icon matChipRemove>cancel</mat-icon>
891
+ </mat-chip>
892
+
893
+ <input [formControl]="control"
894
+ [matChipInputFor]="chipList"
895
+ [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
896
+ [matChipInputAddOnBlur]="true"
897
+ (matChipInputTokenEnd)="add($event)"
898
+ >
899
+ </mat-chip-list>
900
+ </mat-form-field>
901
+ </ng-template>
901
902
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$5.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i4$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4$5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
902
903
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTagsComponent, decorators: [{
903
904
  type: Component,
904
905
  args: [{
905
906
  selector: 'mat-formio-tags',
906
- template: `
907
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
908
- <ng-template #componentTemplate let-hasLabel>
909
- <mat-form-field class="example-chip-list" fxFill>
910
-
911
- <mat-label *ngIf="hasLabel">
912
- <span [instance]="instance" matFormioLabel></span>
913
- </mat-label>
914
-
915
- <mat-chip-list #chipList [attr.aria-label]="instance.component.label">
916
- <mat-chip *ngFor="let tag of tags; index as i;"
917
- [selectable]="true"
918
- [removable]="true"
919
- (removed)="remove(i)"
920
- >
921
- {{tag}}
922
- <mat-icon matChipRemove>cancel</mat-icon>
923
- </mat-chip>
924
-
925
- <input [formControl]="control"
926
- [matChipInputFor]="chipList"
927
- [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
928
- [matChipInputAddOnBlur]="true"
929
- (matChipInputTokenEnd)="add($event)"
930
- >
931
- </mat-chip-list>
932
- </mat-form-field>
933
- </ng-template>
907
+ template: `
908
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
909
+ <ng-template #componentTemplate let-hasLabel>
910
+ <mat-form-field class="example-chip-list" fxFill>
911
+
912
+ <mat-label *ngIf="hasLabel">
913
+ <span [instance]="instance" matFormioLabel></span>
914
+ </mat-label>
915
+
916
+ <mat-chip-list #chipList [attr.aria-label]="instance.component.label">
917
+ <mat-chip *ngFor="let tag of tags; index as i;"
918
+ [selectable]="true"
919
+ [removable]="true"
920
+ (removed)="remove(i)"
921
+ >
922
+ {{tag}}
923
+ <mat-icon matChipRemove>cancel</mat-icon>
924
+ </mat-chip>
925
+
926
+ <input [formControl]="control"
927
+ [matChipInputFor]="chipList"
928
+ [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
929
+ [matChipInputAddOnBlur]="true"
930
+ (matChipInputTokenEnd)="add($event)"
931
+ >
932
+ </mat-chip-list>
933
+ </mat-form-field>
934
+ </ng-template>
934
935
  `
935
936
  }]
936
937
  }] });
937
- TagsComponent.MaterialComponent = MaterialTagsComponent;
938
-
938
+ TagsComponent.MaterialComponent = MaterialTagsComponent;
939
+
939
940
  var ButtonsThemes;
940
941
  (function (ButtonsThemes) {
941
942
  ButtonsThemes["PRIMARY"] = "primary";
@@ -951,8 +952,8 @@ var AngularButtonsThemes;
951
952
  AngularButtonsThemes["PRIMARY"] = "primary";
952
953
  AngularButtonsThemes["BASIC"] = "basic";
953
954
  AngularButtonsThemes["ACCENT"] = "accent";
954
- })(AngularButtonsThemes || (AngularButtonsThemes = {}));
955
-
955
+ })(AngularButtonsThemes || (AngularButtonsThemes = {}));
956
+
956
957
  class MaterialButtonComponent extends MaterialComponent {
957
958
  constructor() {
958
959
  super(...arguments);
@@ -1032,8 +1033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
1032
1033
  type: Component,
1033
1034
  args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance\"\n [ngClass]=\"buttonClass\"\n type=\"{{ instance.component.action }}\"\n mat-raised-button [color]=\"color\"\n [disabled]=\"disabled\"\n (click)=\"instance.onClick($event)\"\n>\n <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\n <mat-icon *ngIf=\"done\">done</mat-icon>\n <mat-icon *ngIf=\"error\">close</mat-icon>\n <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\n {{ instance.component.label }}\n <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\n</button>\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
1034
1035
  }] });
1035
- ButtonComponent.MaterialComponent = MaterialButtonComponent;
1036
-
1036
+ ButtonComponent.MaterialComponent = MaterialButtonComponent;
1037
+
1037
1038
  class MaterialTextareaComponent extends MaterialComponent {
1038
1039
  ngAfterViewInit() {
1039
1040
  // Attach the element so the wysiwyg will work.
@@ -1044,64 +1045,64 @@ class MaterialTextareaComponent extends MaterialComponent {
1044
1045
  }
1045
1046
  }
1046
1047
  MaterialTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1047
- MaterialTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTextareaComponent, selector: "mat-formio-textarea", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
1048
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1049
- <ng-template #componentTemplate let-hasLabel>
1050
- <mat-form-field class="mat-formio-textarea"
1051
- [ngClass]="{'editor-enabled': !!instance.component.editor}"
1052
- fxFill
1053
- fxFlexAlign="center"
1054
- >
1055
- <mat-label fxFill *ngIf="hasLabel">
1056
- <span [instance]="instance" matFormioLabel></span>
1057
- </mat-label>
1058
- <span *ngIf="instance.component.prefix" matPrefix>{{ instance.component.prefix }}&nbsp;</span>
1059
- <textarea matInput
1060
- [placeholder]="instance.component.placeholder"
1061
- [formControl]="control"
1062
- [rows]="(instance.component.rows || 3)"
1063
- (input)="onChange()"
1064
- #textarea
1065
- >
1066
- </textarea>
1067
- <span *ngIf="instance.component.suffix" matSuffix>{{ instance.component.suffix }}</span>
1068
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1069
- </mat-form-field>
1070
- </ng-template>
1048
+ MaterialTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTextareaComponent, selector: "mat-formio-textarea", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
1049
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1050
+ <ng-template #componentTemplate let-hasLabel>
1051
+ <mat-form-field class="mat-formio-textarea"
1052
+ [ngClass]="{'editor-enabled': !!instance.component.editor}"
1053
+ fxFill
1054
+ fxFlexAlign="center"
1055
+ >
1056
+ <mat-label fxFill *ngIf="hasLabel">
1057
+ <span [instance]="instance" matFormioLabel></span>
1058
+ </mat-label>
1059
+ <span *ngIf="instance.component.prefix" matPrefix>{{ instance.component.prefix }}&nbsp;</span>
1060
+ <textarea matInput
1061
+ [placeholder]="instance.component.placeholder"
1062
+ [formControl]="control"
1063
+ [rows]="(instance.component.rows || 3)"
1064
+ (input)="onChange()"
1065
+ #textarea
1066
+ >
1067
+ </textarea>
1068
+ <span *ngIf="instance.component.suffix" matSuffix>{{ instance.component.suffix }}</span>
1069
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1070
+ </mat-form-field>
1071
+ </ng-template>
1071
1072
  `, isInline: true, styles: [".mat-input-element{min-height:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5.DefaultFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
1072
1073
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTextareaComponent, decorators: [{
1073
1074
  type: Component,
1074
- args: [{ selector: 'mat-formio-textarea', template: `
1075
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1076
- <ng-template #componentTemplate let-hasLabel>
1077
- <mat-form-field class="mat-formio-textarea"
1078
- [ngClass]="{'editor-enabled': !!instance.component.editor}"
1079
- fxFill
1080
- fxFlexAlign="center"
1081
- >
1082
- <mat-label fxFill *ngIf="hasLabel">
1083
- <span [instance]="instance" matFormioLabel></span>
1084
- </mat-label>
1085
- <span *ngIf="instance.component.prefix" matPrefix>{{ instance.component.prefix }}&nbsp;</span>
1086
- <textarea matInput
1087
- [placeholder]="instance.component.placeholder"
1088
- [formControl]="control"
1089
- [rows]="(instance.component.rows || 3)"
1090
- (input)="onChange()"
1091
- #textarea
1092
- >
1093
- </textarea>
1094
- <span *ngIf="instance.component.suffix" matSuffix>{{ instance.component.suffix }}</span>
1095
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1096
- </mat-form-field>
1097
- </ng-template>
1075
+ args: [{ selector: 'mat-formio-textarea', template: `
1076
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1077
+ <ng-template #componentTemplate let-hasLabel>
1078
+ <mat-form-field class="mat-formio-textarea"
1079
+ [ngClass]="{'editor-enabled': !!instance.component.editor}"
1080
+ fxFill
1081
+ fxFlexAlign="center"
1082
+ >
1083
+ <mat-label fxFill *ngIf="hasLabel">
1084
+ <span [instance]="instance" matFormioLabel></span>
1085
+ </mat-label>
1086
+ <span *ngIf="instance.component.prefix" matPrefix>{{ instance.component.prefix }}&nbsp;</span>
1087
+ <textarea matInput
1088
+ [placeholder]="instance.component.placeholder"
1089
+ [formControl]="control"
1090
+ [rows]="(instance.component.rows || 3)"
1091
+ (input)="onChange()"
1092
+ #textarea
1093
+ >
1094
+ </textarea>
1095
+ <span *ngIf="instance.component.suffix" matSuffix>{{ instance.component.suffix }}</span>
1096
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1097
+ </mat-form-field>
1098
+ </ng-template>
1098
1099
  `, styles: [".mat-input-element{min-height:16px}\n"] }]
1099
1100
  }], propDecorators: { textarea: [{
1100
1101
  type: ViewChild,
1101
1102
  args: ['textarea']
1102
1103
  }] } });
1103
- TextAreaComponent.MaterialComponent = MaterialTextareaComponent;
1104
-
1104
+ TextAreaComponent.MaterialComponent = MaterialTextareaComponent;
1105
+
1105
1106
  class MaterialNestedComponent extends MaterialComponent {
1106
1107
  setInstance(instance) {
1107
1108
  instance.viewContainer = () => {
@@ -1135,56 +1136,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
1135
1136
  }], propDecorators: { components: [{
1136
1137
  type: ViewChildren,
1137
1138
  args: ['components', { read: ViewContainerRef }]
1138
- }] } });
1139
-
1139
+ }] } });
1140
+
1140
1141
  class MaterialPanelComponent extends MaterialNestedComponent {
1141
1142
  }
1142
1143
  MaterialPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1143
- MaterialPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialPanelComponent, selector: "mat-formio-panel", usesInheritance: true, ngImport: i0, template: `
1144
- <mat-card *ngIf="!instance.component.collapsible">
1145
- <mat-card-title *ngIf="instance?.component?.title">
1146
- {{ instance.component.title }}
1147
- </mat-card-title>
1148
- <mat-card-content fxLayout="column" fxLayoutGap="1em">
1149
- <ng-template #components></ng-template>
1150
- </mat-card-content>
1151
- </mat-card>
1152
- <mat-expansion-panel *ngIf="instance.component.collapsible"
1153
- [expanded]="!instance.component.collapsed"
1154
- >
1155
- <mat-expansion-panel-header *ngIf="instance?.component?.title">
1156
- <mat-panel-title>
1157
- {{ instance.component.title }}
1158
- </mat-panel-title>
1159
- </mat-expansion-panel-header>
1160
- <ng-template #components></ng-template>
1161
- </mat-expansion-panel>
1144
+ MaterialPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialPanelComponent, selector: "mat-formio-panel", usesInheritance: true, ngImport: i0, template: `
1145
+ <mat-card *ngIf="!instance.component.collapsible">
1146
+ <mat-card-title *ngIf="instance?.component?.title">
1147
+ {{ instance.component.title }}
1148
+ </mat-card-title>
1149
+ <mat-card-content fxLayout="column" fxLayoutGap="1em">
1150
+ <ng-template #components></ng-template>
1151
+ </mat-card-content>
1152
+ </mat-card>
1153
+ <mat-expansion-panel *ngIf="instance.component.collapsible"
1154
+ [expanded]="!instance.component.collapsed"
1155
+ >
1156
+ <mat-expansion-panel-header *ngIf="instance?.component?.title">
1157
+ <mat-panel-title>
1158
+ {{ instance.component.title }}
1159
+ </mat-panel-title>
1160
+ </mat-expansion-panel-header>
1161
+ <ng-template #components></ng-template>
1162
+ </mat-expansion-panel>
1162
1163
  `, isInline: true, styles: [":host{margin-bottom:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] });
1163
1164
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialPanelComponent, decorators: [{
1164
1165
  type: Component,
1165
- args: [{ selector: 'mat-formio-panel', template: `
1166
- <mat-card *ngIf="!instance.component.collapsible">
1167
- <mat-card-title *ngIf="instance?.component?.title">
1168
- {{ instance.component.title }}
1169
- </mat-card-title>
1170
- <mat-card-content fxLayout="column" fxLayoutGap="1em">
1171
- <ng-template #components></ng-template>
1172
- </mat-card-content>
1173
- </mat-card>
1174
- <mat-expansion-panel *ngIf="instance.component.collapsible"
1175
- [expanded]="!instance.component.collapsed"
1176
- >
1177
- <mat-expansion-panel-header *ngIf="instance?.component?.title">
1178
- <mat-panel-title>
1179
- {{ instance.component.title }}
1180
- </mat-panel-title>
1181
- </mat-expansion-panel-header>
1182
- <ng-template #components></ng-template>
1183
- </mat-expansion-panel>
1166
+ args: [{ selector: 'mat-formio-panel', template: `
1167
+ <mat-card *ngIf="!instance.component.collapsible">
1168
+ <mat-card-title *ngIf="instance?.component?.title">
1169
+ {{ instance.component.title }}
1170
+ </mat-card-title>
1171
+ <mat-card-content fxLayout="column" fxLayoutGap="1em">
1172
+ <ng-template #components></ng-template>
1173
+ </mat-card-content>
1174
+ </mat-card>
1175
+ <mat-expansion-panel *ngIf="instance.component.collapsible"
1176
+ [expanded]="!instance.component.collapsed"
1177
+ >
1178
+ <mat-expansion-panel-header *ngIf="instance?.component?.title">
1179
+ <mat-panel-title>
1180
+ {{ instance.component.title }}
1181
+ </mat-panel-title>
1182
+ </mat-expansion-panel-header>
1183
+ <ng-template #components></ng-template>
1184
+ </mat-expansion-panel>
1184
1185
  `, styles: [":host{margin-bottom:1em}\n"] }]
1185
1186
  }] });
1186
- PanelComponent.MaterialComponent = MaterialPanelComponent;
1187
-
1187
+ PanelComponent.MaterialComponent = MaterialPanelComponent;
1188
+
1188
1189
  class MaterialColumnsComponent extends MaterialNestedComponent {
1189
1190
  constructor() {
1190
1191
  super(...arguments);
@@ -1208,64 +1209,64 @@ class MaterialColumnsComponent extends MaterialNestedComponent {
1208
1209
  }
1209
1210
  }
1210
1211
  MaterialColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialColumnsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1211
- MaterialColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialColumnsComponent, selector: "mat-formio-columns", usesInheritance: true, ngImport: i0, template: `
1212
- <div class="container"
1213
- fxLayout="row"
1214
- fxLayout.xs="column"
1215
- fxLayoutWrap
1216
- fxLayoutGap="{{ flexGap }}%"
1217
- fxLayoutAlign="center"
1218
- >
1219
- <div
1220
- *ngFor="let column of instance.component.columns; let i = index"
1221
- [fxFlex]="flexWidth(column, i)"
1222
- fxLayout="column"
1223
- fxLayoutGap="1em">
1224
- <ng-template #components></ng-template>
1225
- </div>
1226
- </div>
1212
+ MaterialColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialColumnsComponent, selector: "mat-formio-columns", usesInheritance: true, ngImport: i0, template: `
1213
+ <div class="container"
1214
+ fxLayout="row"
1215
+ fxLayout.xs="column"
1216
+ fxLayoutWrap
1217
+ fxLayoutGap="{{ flexGap }}%"
1218
+ fxLayoutAlign="center"
1219
+ >
1220
+ <div
1221
+ *ngFor="let column of instance.component.columns; let i = index"
1222
+ [fxFlex]="flexWidth(column, i)"
1223
+ fxLayout="column"
1224
+ fxLayoutGap="1em">
1225
+ <ng-template #components></ng-template>
1226
+ </div>
1227
+ </div>
1227
1228
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
1228
1229
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialColumnsComponent, decorators: [{
1229
1230
  type: Component,
1230
- args: [{ selector: 'mat-formio-columns', template: `
1231
- <div class="container"
1232
- fxLayout="row"
1233
- fxLayout.xs="column"
1234
- fxLayoutWrap
1235
- fxLayoutGap="{{ flexGap }}%"
1236
- fxLayoutAlign="center"
1237
- >
1238
- <div
1239
- *ngFor="let column of instance.component.columns; let i = index"
1240
- [fxFlex]="flexWidth(column, i)"
1241
- fxLayout="column"
1242
- fxLayoutGap="1em">
1243
- <ng-template #components></ng-template>
1244
- </div>
1245
- </div>
1231
+ args: [{ selector: 'mat-formio-columns', template: `
1232
+ <div class="container"
1233
+ fxLayout="row"
1234
+ fxLayout.xs="column"
1235
+ fxLayoutWrap
1236
+ fxLayoutGap="{{ flexGap }}%"
1237
+ fxLayoutAlign="center"
1238
+ >
1239
+ <div
1240
+ *ngFor="let column of instance.component.columns; let i = index"
1241
+ [fxFlex]="flexWidth(column, i)"
1242
+ fxLayout="column"
1243
+ fxLayoutGap="1em">
1244
+ <ng-template #components></ng-template>
1245
+ </div>
1246
+ </div>
1246
1247
  ` }]
1247
1248
  }] });
1248
- ColumnsComponent.MaterialComponent = MaterialColumnsComponent;
1249
-
1249
+ ColumnsComponent.MaterialComponent = MaterialColumnsComponent;
1250
+
1250
1251
  class MaterialContainerComponent extends MaterialNestedComponent {
1251
1252
  }
1252
1253
  MaterialContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1253
- MaterialContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialContainerComponent, selector: "mat-formio-container", usesInheritance: true, ngImport: i0, template: `
1254
- <div fxLayout="column" fxLayoutGap="1em">
1255
- <ng-template #components></ng-template>
1254
+ MaterialContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialContainerComponent, selector: "mat-formio-container", usesInheritance: true, ngImport: i0, template: `
1255
+ <div fxLayout="column" fxLayoutGap="1em">
1256
+ <ng-template #components></ng-template>
1256
1257
  </div>`, isInline: true, dependencies: [{ kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }] });
1257
1258
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialContainerComponent, decorators: [{
1258
1259
  type: Component,
1259
1260
  args: [{
1260
1261
  selector: 'mat-formio-container',
1261
- template: `
1262
- <div fxLayout="column" fxLayoutGap="1em">
1263
- <ng-template #components></ng-template>
1262
+ template: `
1263
+ <div fxLayout="column" fxLayoutGap="1em">
1264
+ <ng-template #components></ng-template>
1264
1265
  </div>`
1265
1266
  }]
1266
1267
  }] });
1267
- ContainerComponent.MaterialComponent = MaterialContainerComponent;
1268
-
1268
+ ContainerComponent.MaterialComponent = MaterialContainerComponent;
1269
+
1269
1270
  class MaterialTabsComponent extends MaterialNestedComponent {
1270
1271
  setInstance(instance) {
1271
1272
  super.setInstance(instance);
@@ -1275,32 +1276,32 @@ class MaterialTabsComponent extends MaterialNestedComponent {
1275
1276
  }
1276
1277
  }
1277
1278
  MaterialTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1278
- MaterialTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTabsComponent, selector: "mat-formio-tabs", usesInheritance: true, ngImport: i0, template: `
1279
- <mat-tab-group>
1280
- <mat-tab *ngFor="let tab of instance.component.components" [label]="tab.label">
1281
- <div fxLayout="column" fxLayoutGap="1em" style="border: 1px dotted rgba(0, 0, 0, 0.125)">
1282
- <ng-template #components></ng-template>
1283
- </div>
1284
- </mat-tab>
1285
- </mat-tab-group>
1279
+ MaterialTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTabsComponent, selector: "mat-formio-tabs", usesInheritance: true, ngImport: i0, template: `
1280
+ <mat-tab-group>
1281
+ <mat-tab *ngFor="let tab of instance.component.components" [label]="tab.label">
1282
+ <div fxLayout="column" fxLayoutGap="1em" style="border: 1px dotted rgba(0, 0, 0, 0.125)">
1283
+ <ng-template #components></ng-template>
1284
+ </div>
1285
+ </mat-tab>
1286
+ </mat-tab-group>
1286
1287
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }] });
1287
1288
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTabsComponent, decorators: [{
1288
1289
  type: Component,
1289
1290
  args: [{
1290
1291
  selector: 'mat-formio-tabs',
1291
- template: `
1292
- <mat-tab-group>
1293
- <mat-tab *ngFor="let tab of instance.component.components" [label]="tab.label">
1294
- <div fxLayout="column" fxLayoutGap="1em" style="border: 1px dotted rgba(0, 0, 0, 0.125)">
1295
- <ng-template #components></ng-template>
1296
- </div>
1297
- </mat-tab>
1298
- </mat-tab-group>
1292
+ template: `
1293
+ <mat-tab-group>
1294
+ <mat-tab *ngFor="let tab of instance.component.components" [label]="tab.label">
1295
+ <div fxLayout="column" fxLayoutGap="1em" style="border: 1px dotted rgba(0, 0, 0, 0.125)">
1296
+ <ng-template #components></ng-template>
1297
+ </div>
1298
+ </mat-tab>
1299
+ </mat-tab-group>
1299
1300
  `
1300
1301
  }]
1301
1302
  }] });
1302
- TabsComponent.MaterialComponent = MaterialTabsComponent;
1303
-
1303
+ TabsComponent.MaterialComponent = MaterialTabsComponent;
1304
+
1304
1305
  class MaterialTimeComponent extends MaterialComponent {
1305
1306
  constructor() {
1306
1307
  super(...arguments);
@@ -1368,117 +1369,117 @@ class MaterialTimeComponent extends MaterialComponent {
1368
1369
  }
1369
1370
  }
1370
1371
  MaterialTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1371
- MaterialTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTimeComponent, selector: "mat-formio-time", inputs: { hourStep: "hourStep", minuteStep: "minuteStep", secondStep: "secondStep", renderElementOnly: "renderElementOnly" }, outputs: { selectedEvent: "selectedEvent" }, usesInheritance: true, ngImport: i0, template: `
1372
- <mat-formio-form-field
1373
- [instance]="instance"
1374
- [componentTemplate]="componentTemplate"
1375
- [renderElementOnly]="renderElementOnly"
1376
- ></mat-formio-form-field>
1377
- <ng-template #componentTemplate let-hasLabel>
1378
- <mat-label fxFill *ngIf="hasLabel">
1379
- <span [instance]="instance" matFormioLabel></span>
1380
- </mat-label>
1381
-
1382
- <div style="display: block">
1383
- <div fxLayout="row" fxLayoutGap="5%">
1384
- <input
1385
- [formControl]="hourControl"
1386
- [step]="hourStep"
1387
- [min]="0"
1388
- [max]="12"
1389
- type="number"
1390
- fxFlex="25%"
1391
- (input)="onChange()"
1392
- >
1393
- <input
1394
- [formControl]="minuteControl"
1395
- [step]="minuteStep"
1396
- [min]="0"
1397
- [max]="59"
1398
- type="number"
1399
- fxFlex="25%"
1400
- (input)="onChange()"
1401
- >
1402
- <input
1403
- [formControl]="secondControl"
1404
- [step]="secondStep"
1405
- [min]="0"
1406
- [max]="59"
1407
- type="number"
1408
- fxFlex="25%"
1409
- (input)="onChange()"
1410
- *ngIf="instance?.component?.dataFormat === 'HH:mm:ss' ||
1411
- instance?.component?.dataFormat === 'HH:mm:ss.SSS'"
1412
- >
1413
- <button
1414
- [disabled]="instance?.component?.disabled"
1415
- fxFlex="25%"
1416
- (click)="changePeriod()"
1417
- >
1418
- {{period}}
1419
- </button>
1420
- </div>
1421
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1422
- </div>
1423
- </ng-template>
1372
+ MaterialTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTimeComponent, selector: "mat-formio-time", inputs: { hourStep: "hourStep", minuteStep: "minuteStep", secondStep: "secondStep", renderElementOnly: "renderElementOnly" }, outputs: { selectedEvent: "selectedEvent" }, usesInheritance: true, ngImport: i0, template: `
1373
+ <mat-formio-form-field
1374
+ [instance]="instance"
1375
+ [componentTemplate]="componentTemplate"
1376
+ [renderElementOnly]="renderElementOnly"
1377
+ ></mat-formio-form-field>
1378
+ <ng-template #componentTemplate let-hasLabel>
1379
+ <mat-label fxFill *ngIf="hasLabel">
1380
+ <span [instance]="instance" matFormioLabel></span>
1381
+ </mat-label>
1382
+
1383
+ <div style="display: block">
1384
+ <div fxLayout="row" fxLayoutGap="5%">
1385
+ <input
1386
+ [formControl]="hourControl"
1387
+ [step]="hourStep"
1388
+ [min]="0"
1389
+ [max]="12"
1390
+ type="number"
1391
+ fxFlex="25%"
1392
+ (input)="onChange()"
1393
+ >
1394
+ <input
1395
+ [formControl]="minuteControl"
1396
+ [step]="minuteStep"
1397
+ [min]="0"
1398
+ [max]="59"
1399
+ type="number"
1400
+ fxFlex="25%"
1401
+ (input)="onChange()"
1402
+ >
1403
+ <input
1404
+ [formControl]="secondControl"
1405
+ [step]="secondStep"
1406
+ [min]="0"
1407
+ [max]="59"
1408
+ type="number"
1409
+ fxFlex="25%"
1410
+ (input)="onChange()"
1411
+ *ngIf="instance?.component?.dataFormat === 'HH:mm:ss' ||
1412
+ instance?.component?.dataFormat === 'HH:mm:ss.SSS'"
1413
+ >
1414
+ <button
1415
+ [disabled]="instance?.component?.disabled"
1416
+ fxFlex="25%"
1417
+ (click)="changePeriod()"
1418
+ >
1419
+ {{period}}
1420
+ </button>
1421
+ </div>
1422
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1423
+ </div>
1424
+ </ng-template>
1424
1425
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
1425
1426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTimeComponent, decorators: [{
1426
1427
  type: Component,
1427
1428
  args: [{
1428
1429
  selector: 'mat-formio-time',
1429
- template: `
1430
- <mat-formio-form-field
1431
- [instance]="instance"
1432
- [componentTemplate]="componentTemplate"
1433
- [renderElementOnly]="renderElementOnly"
1434
- ></mat-formio-form-field>
1435
- <ng-template #componentTemplate let-hasLabel>
1436
- <mat-label fxFill *ngIf="hasLabel">
1437
- <span [instance]="instance" matFormioLabel></span>
1438
- </mat-label>
1439
-
1440
- <div style="display: block">
1441
- <div fxLayout="row" fxLayoutGap="5%">
1442
- <input
1443
- [formControl]="hourControl"
1444
- [step]="hourStep"
1445
- [min]="0"
1446
- [max]="12"
1447
- type="number"
1448
- fxFlex="25%"
1449
- (input)="onChange()"
1450
- >
1451
- <input
1452
- [formControl]="minuteControl"
1453
- [step]="minuteStep"
1454
- [min]="0"
1455
- [max]="59"
1456
- type="number"
1457
- fxFlex="25%"
1458
- (input)="onChange()"
1459
- >
1460
- <input
1461
- [formControl]="secondControl"
1462
- [step]="secondStep"
1463
- [min]="0"
1464
- [max]="59"
1465
- type="number"
1466
- fxFlex="25%"
1467
- (input)="onChange()"
1468
- *ngIf="instance?.component?.dataFormat === 'HH:mm:ss' ||
1469
- instance?.component?.dataFormat === 'HH:mm:ss.SSS'"
1470
- >
1471
- <button
1472
- [disabled]="instance?.component?.disabled"
1473
- fxFlex="25%"
1474
- (click)="changePeriod()"
1475
- >
1476
- {{period}}
1477
- </button>
1478
- </div>
1479
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1480
- </div>
1481
- </ng-template>
1430
+ template: `
1431
+ <mat-formio-form-field
1432
+ [instance]="instance"
1433
+ [componentTemplate]="componentTemplate"
1434
+ [renderElementOnly]="renderElementOnly"
1435
+ ></mat-formio-form-field>
1436
+ <ng-template #componentTemplate let-hasLabel>
1437
+ <mat-label fxFill *ngIf="hasLabel">
1438
+ <span [instance]="instance" matFormioLabel></span>
1439
+ </mat-label>
1440
+
1441
+ <div style="display: block">
1442
+ <div fxLayout="row" fxLayoutGap="5%">
1443
+ <input
1444
+ [formControl]="hourControl"
1445
+ [step]="hourStep"
1446
+ [min]="0"
1447
+ [max]="12"
1448
+ type="number"
1449
+ fxFlex="25%"
1450
+ (input)="onChange()"
1451
+ >
1452
+ <input
1453
+ [formControl]="minuteControl"
1454
+ [step]="minuteStep"
1455
+ [min]="0"
1456
+ [max]="59"
1457
+ type="number"
1458
+ fxFlex="25%"
1459
+ (input)="onChange()"
1460
+ >
1461
+ <input
1462
+ [formControl]="secondControl"
1463
+ [step]="secondStep"
1464
+ [min]="0"
1465
+ [max]="59"
1466
+ type="number"
1467
+ fxFlex="25%"
1468
+ (input)="onChange()"
1469
+ *ngIf="instance?.component?.dataFormat === 'HH:mm:ss' ||
1470
+ instance?.component?.dataFormat === 'HH:mm:ss.SSS'"
1471
+ >
1472
+ <button
1473
+ [disabled]="instance?.component?.disabled"
1474
+ fxFlex="25%"
1475
+ (click)="changePeriod()"
1476
+ >
1477
+ {{period}}
1478
+ </button>
1479
+ </div>
1480
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1481
+ </div>
1482
+ </ng-template>
1482
1483
  `
1483
1484
  }]
1484
1485
  }], propDecorators: { selectedEvent: [{
@@ -1492,8 +1493,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
1492
1493
  }], renderElementOnly: [{
1493
1494
  type: Input
1494
1495
  }] } });
1495
- TimeComponent.MaterialComponent = MaterialTimeComponent;
1496
-
1496
+ TimeComponent.MaterialComponent = MaterialTimeComponent;
1497
+
1497
1498
  class MaterialCalendarComponent extends MaterialComponent {
1498
1499
  constructor() {
1499
1500
  super(...arguments);
@@ -1531,65 +1532,65 @@ class MaterialCalendarComponent extends MaterialComponent {
1531
1532
  }
1532
1533
  }
1533
1534
  MaterialCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1534
- MaterialCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialCalendarComponent, selector: "mat-formio-calendar", inputs: { enableDate: "enableDate", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", hourStep: "hourStep", minuteStep: "minuteStep" }, outputs: { timeSelectEvent: "timeSelectEvent", dateSelectEvent: "dateSelectEvent" }, viewQueries: [{ propertyName: "time", first: true, predicate: ["time"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
1535
- <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="0.5%">
1536
- <div [ngStyle]="getPopupStyles()">
1537
- <mat-card style="padding: 0;">
1538
- <mat-calendar
1539
- [dateFilter]="dateFilter"
1540
- [maxDate]="maxDate"
1541
- [minDate]="minDate"
1542
- [selected]="selectedDate"
1543
- (selectedChange)="onDate($event)"
1544
- class="calendar"
1545
- *ngIf="enableDate !== false"
1546
- >
1547
- </mat-calendar>
1548
- <mat-formio-time
1549
- #time
1550
- [hourStep]="hourStep"
1551
- [instance]="instance"
1552
- [renderElementOnly]="true"
1553
- [minuteStep]="minuteStep"
1554
- (selectedEvent)="onTime($event)"
1555
- class="ml-3 formio-time"
1556
- *ngIf="enableTime"
1557
- >
1558
- </mat-formio-time>
1559
- </mat-card>
1560
- </div>
1561
- </div>
1535
+ MaterialCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialCalendarComponent, selector: "mat-formio-calendar", inputs: { enableDate: "enableDate", enableTime: "enableTime", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", hourStep: "hourStep", minuteStep: "minuteStep" }, outputs: { timeSelectEvent: "timeSelectEvent", dateSelectEvent: "dateSelectEvent" }, viewQueries: [{ propertyName: "time", first: true, predicate: ["time"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
1536
+ <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="0.5%">
1537
+ <div [ngStyle]="getPopupStyles()">
1538
+ <mat-card style="padding: 0;">
1539
+ <mat-calendar
1540
+ [dateFilter]="dateFilter"
1541
+ [maxDate]="maxDate"
1542
+ [minDate]="minDate"
1543
+ [selected]="selectedDate"
1544
+ (selectedChange)="onDate($event)"
1545
+ class="calendar"
1546
+ *ngIf="enableDate !== false"
1547
+ >
1548
+ </mat-calendar>
1549
+ <mat-formio-time
1550
+ #time
1551
+ [hourStep]="hourStep"
1552
+ [instance]="instance"
1553
+ [renderElementOnly]="true"
1554
+ [minuteStep]="minuteStep"
1555
+ (selectedEvent)="onTime($event)"
1556
+ class="ml-3 formio-time"
1557
+ *ngIf="enableTime"
1558
+ >
1559
+ </mat-formio-time>
1560
+ </mat-card>
1561
+ </div>
1562
+ </div>
1562
1563
  `, isInline: true, styles: [".calendar,.formio-time{padding:16px;background-color:#fff;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.formio-time{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5$2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection"], exportAs: ["matCalendar"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4$2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "component", type: MaterialTimeComponent, selector: "mat-formio-time", inputs: ["hourStep", "minuteStep", "secondStep", "renderElementOnly"], outputs: ["selectedEvent"] }] });
1563
1564
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialCalendarComponent, decorators: [{
1564
1565
  type: Component,
1565
- args: [{ selector: 'mat-formio-calendar', template: `
1566
- <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="0.5%">
1567
- <div [ngStyle]="getPopupStyles()">
1568
- <mat-card style="padding: 0;">
1569
- <mat-calendar
1570
- [dateFilter]="dateFilter"
1571
- [maxDate]="maxDate"
1572
- [minDate]="minDate"
1573
- [selected]="selectedDate"
1574
- (selectedChange)="onDate($event)"
1575
- class="calendar"
1576
- *ngIf="enableDate !== false"
1577
- >
1578
- </mat-calendar>
1579
- <mat-formio-time
1580
- #time
1581
- [hourStep]="hourStep"
1582
- [instance]="instance"
1583
- [renderElementOnly]="true"
1584
- [minuteStep]="minuteStep"
1585
- (selectedEvent)="onTime($event)"
1586
- class="ml-3 formio-time"
1587
- *ngIf="enableTime"
1588
- >
1589
- </mat-formio-time>
1590
- </mat-card>
1591
- </div>
1592
- </div>
1566
+ args: [{ selector: 'mat-formio-calendar', template: `
1567
+ <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="0.5%">
1568
+ <div [ngStyle]="getPopupStyles()">
1569
+ <mat-card style="padding: 0;">
1570
+ <mat-calendar
1571
+ [dateFilter]="dateFilter"
1572
+ [maxDate]="maxDate"
1573
+ [minDate]="minDate"
1574
+ [selected]="selectedDate"
1575
+ (selectedChange)="onDate($event)"
1576
+ class="calendar"
1577
+ *ngIf="enableDate !== false"
1578
+ >
1579
+ </mat-calendar>
1580
+ <mat-formio-time
1581
+ #time
1582
+ [hourStep]="hourStep"
1583
+ [instance]="instance"
1584
+ [renderElementOnly]="true"
1585
+ [minuteStep]="minuteStep"
1586
+ (selectedEvent)="onTime($event)"
1587
+ class="ml-3 formio-time"
1588
+ *ngIf="enableTime"
1589
+ >
1590
+ </mat-formio-time>
1591
+ </mat-card>
1592
+ </div>
1593
+ </div>
1593
1594
  `, styles: [".calendar,.formio-time{padding:16px;background-color:#fff;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.formio-time{display:flex}\n"] }]
1594
1595
  }], propDecorators: { time: [{
1595
1596
  type: ViewChild,
@@ -1612,8 +1613,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
1612
1613
  type: Output
1613
1614
  }], dateSelectEvent: [{
1614
1615
  type: Output
1615
- }] } });
1616
-
1616
+ }] } });
1617
+
1617
1618
  class MaskDirective {
1618
1619
  constructor(elementRef) {
1619
1620
  this.elementRef = elementRef;
@@ -1673,8 +1674,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
1673
1674
  }], value: [{
1674
1675
  type: Input,
1675
1676
  args: ['value']
1676
- }] } });
1677
-
1677
+ }] } });
1678
+
1678
1679
  class MaterialDateComponent extends MaterialComponent {
1679
1680
  constructor() {
1680
1681
  super(...arguments);
@@ -1852,63 +1853,63 @@ class MaterialDateComponent extends MaterialComponent {
1852
1853
  }
1853
1854
  }
1854
1855
  MaterialDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1855
- MaterialDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDateComponent, selector: "mat-formio-date", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
1856
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1857
- <ng-template #componentTemplate let-hasLabel>
1858
- <mat-label *ngIf="hasLabel" fxFill>
1859
- <span [instance]="instance" matFormioLabel></span>
1860
- </mat-label>
1861
-
1862
- <form class="example-form">
1863
- <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1864
- <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1865
- </mat-datepicker-toggle>
1866
- <mat-form-field class="example-full-width">
1867
- <input
1868
- *ngIf="enableTime && enableDate"
1869
- matInput
1870
- type="datetime-local"
1871
- [placeholder]="instance.component.placeholder"
1872
- [formControl]="displayControl"
1873
- (input)="onChangeInput()"
1874
- [readonly]="!allowManualInput"
1875
- >
1876
- <input
1877
- *ngIf="enableTime && !enableDate"
1878
- matInput
1879
- [placeholder]="instance.component.placeholder"
1880
- [formControl]="displayControl"
1881
- [matMask]="formatTime"
1882
- (input)="onChangeInput()"
1883
- [readonly]="!allowManualInput"
1884
- >
1885
- <input
1886
- *ngIf="!enableTime && enableDate"
1887
- matInput
1888
- [placeholder]="instance.component.placeholder"
1889
- [formControl]="displayControl"
1890
- (input)="onChangeInput()"
1891
- [readonly]="!allowManualInput"
1892
- >
1893
- </mat-form-field>
1894
-
1895
- <mat-formio-calendar
1896
- #calendar
1897
- [minDate]="instance.component.datePicker.minDate || ''"
1898
- [maxDate]="instance.component.datePicker.maxDate || ''"
1899
- [dateFilter]="dateFilter"
1900
- [hidden]="!isPickerOpened"
1901
- (dateSelectEvent)="onChangeDate($event)"
1902
- (timeSelectEvent)="onChangeTime($event)"
1903
- [enableDate]="enableDate"
1904
- [enableTime]="enableTime"
1905
- [hourStep]="instance.component.timePicker.hourStep"
1906
- [minuteStep]="instance.component.timePicker.minuteStep"
1907
- [instance]="instance"
1908
- ></mat-formio-calendar>
1909
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1910
- </form>
1911
- </ng-template>
1856
+ MaterialDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDateComponent, selector: "mat-formio-date", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
1857
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1858
+ <ng-template #componentTemplate let-hasLabel>
1859
+ <mat-label *ngIf="hasLabel" fxFill>
1860
+ <span [instance]="instance" matFormioLabel></span>
1861
+ </mat-label>
1862
+
1863
+ <form class="example-form">
1864
+ <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1865
+ <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1866
+ </mat-datepicker-toggle>
1867
+ <mat-form-field class="example-full-width">
1868
+ <input
1869
+ *ngIf="enableTime && enableDate"
1870
+ matInput
1871
+ type="datetime-local"
1872
+ [placeholder]="instance.component.placeholder"
1873
+ [formControl]="displayControl"
1874
+ (input)="onChangeInput()"
1875
+ [readonly]="!allowManualInput"
1876
+ >
1877
+ <input
1878
+ *ngIf="enableTime && !enableDate"
1879
+ matInput
1880
+ [placeholder]="instance.component.placeholder"
1881
+ [formControl]="displayControl"
1882
+ [matMask]="formatTime"
1883
+ (input)="onChangeInput()"
1884
+ [readonly]="!allowManualInput"
1885
+ >
1886
+ <input
1887
+ *ngIf="!enableTime && enableDate"
1888
+ matInput
1889
+ [placeholder]="instance.component.placeholder"
1890
+ [formControl]="displayControl"
1891
+ (input)="onChangeInput()"
1892
+ [readonly]="!allowManualInput"
1893
+ >
1894
+ </mat-form-field>
1895
+
1896
+ <mat-formio-calendar
1897
+ #calendar
1898
+ [minDate]="instance.component.datePicker.minDate || ''"
1899
+ [maxDate]="instance.component.datePicker.maxDate || ''"
1900
+ [dateFilter]="dateFilter"
1901
+ [hidden]="!isPickerOpened"
1902
+ (dateSelectEvent)="onChangeDate($event)"
1903
+ (timeSelectEvent)="onChangeTime($event)"
1904
+ [enableDate]="enableDate"
1905
+ [enableTime]="enableTime"
1906
+ [hourStep]="instance.component.timePicker.hourStep"
1907
+ [minuteStep]="instance.component.timePicker.minuteStep"
1908
+ [instance]="instance"
1909
+ ></mat-formio-calendar>
1910
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1911
+ </form>
1912
+ </ng-template>
1912
1913
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: MaterialCalendarComponent, selector: "mat-formio-calendar", inputs: ["enableDate", "enableTime", "minDate", "maxDate", "dateFilter", "hourStep", "minuteStep"], outputs: ["timeSelectEvent", "dateSelectEvent"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "directive", type: MaskDirective, selector: "input[matMask]", inputs: ["matMask", "value"] }] });
1913
1914
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDateComponent, decorators: [{
1914
1915
  type: Component,
@@ -1917,150 +1918,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
1917
1918
  host: {
1918
1919
  '(document:click)': 'clickOutside($event)',
1919
1920
  },
1920
- template: `
1921
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1922
- <ng-template #componentTemplate let-hasLabel>
1923
- <mat-label *ngIf="hasLabel" fxFill>
1924
- <span [instance]="instance" matFormioLabel></span>
1925
- </mat-label>
1926
-
1927
- <form class="example-form">
1928
- <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1929
- <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1930
- </mat-datepicker-toggle>
1931
- <mat-form-field class="example-full-width">
1932
- <input
1933
- *ngIf="enableTime && enableDate"
1934
- matInput
1935
- type="datetime-local"
1936
- [placeholder]="instance.component.placeholder"
1937
- [formControl]="displayControl"
1938
- (input)="onChangeInput()"
1939
- [readonly]="!allowManualInput"
1940
- >
1941
- <input
1942
- *ngIf="enableTime && !enableDate"
1943
- matInput
1944
- [placeholder]="instance.component.placeholder"
1945
- [formControl]="displayControl"
1946
- [matMask]="formatTime"
1947
- (input)="onChangeInput()"
1948
- [readonly]="!allowManualInput"
1949
- >
1950
- <input
1951
- *ngIf="!enableTime && enableDate"
1952
- matInput
1953
- [placeholder]="instance.component.placeholder"
1954
- [formControl]="displayControl"
1955
- (input)="onChangeInput()"
1956
- [readonly]="!allowManualInput"
1957
- >
1958
- </mat-form-field>
1959
-
1960
- <mat-formio-calendar
1961
- #calendar
1962
- [minDate]="instance.component.datePicker.minDate || ''"
1963
- [maxDate]="instance.component.datePicker.maxDate || ''"
1964
- [dateFilter]="dateFilter"
1965
- [hidden]="!isPickerOpened"
1966
- (dateSelectEvent)="onChangeDate($event)"
1967
- (timeSelectEvent)="onChangeTime($event)"
1968
- [enableDate]="enableDate"
1969
- [enableTime]="enableTime"
1970
- [hourStep]="instance.component.timePicker.hourStep"
1971
- [minuteStep]="instance.component.timePicker.minuteStep"
1972
- [instance]="instance"
1973
- ></mat-formio-calendar>
1974
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1975
- </form>
1976
- </ng-template>
1921
+ template: `
1922
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1923
+ <ng-template #componentTemplate let-hasLabel>
1924
+ <mat-label *ngIf="hasLabel" fxFill>
1925
+ <span [instance]="instance" matFormioLabel></span>
1926
+ </mat-label>
1927
+
1928
+ <form class="example-form">
1929
+ <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1930
+ <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1931
+ </mat-datepicker-toggle>
1932
+ <mat-form-field class="example-full-width">
1933
+ <input
1934
+ *ngIf="enableTime && enableDate"
1935
+ matInput
1936
+ type="datetime-local"
1937
+ [placeholder]="instance.component.placeholder"
1938
+ [formControl]="displayControl"
1939
+ (input)="onChangeInput()"
1940
+ [readonly]="!allowManualInput"
1941
+ >
1942
+ <input
1943
+ *ngIf="enableTime && !enableDate"
1944
+ matInput
1945
+ [placeholder]="instance.component.placeholder"
1946
+ [formControl]="displayControl"
1947
+ [matMask]="formatTime"
1948
+ (input)="onChangeInput()"
1949
+ [readonly]="!allowManualInput"
1950
+ >
1951
+ <input
1952
+ *ngIf="!enableTime && enableDate"
1953
+ matInput
1954
+ [placeholder]="instance.component.placeholder"
1955
+ [formControl]="displayControl"
1956
+ (input)="onChangeInput()"
1957
+ [readonly]="!allowManualInput"
1958
+ >
1959
+ </mat-form-field>
1960
+
1961
+ <mat-formio-calendar
1962
+ #calendar
1963
+ [minDate]="instance.component.datePicker.minDate || ''"
1964
+ [maxDate]="instance.component.datePicker.maxDate || ''"
1965
+ [dateFilter]="dateFilter"
1966
+ [hidden]="!isPickerOpened"
1967
+ (dateSelectEvent)="onChangeDate($event)"
1968
+ (timeSelectEvent)="onChangeTime($event)"
1969
+ [enableDate]="enableDate"
1970
+ [enableTime]="enableTime"
1971
+ [hourStep]="instance.component.timePicker.hourStep"
1972
+ [minuteStep]="instance.component.timePicker.minuteStep"
1973
+ [instance]="instance"
1974
+ ></mat-formio-calendar>
1975
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1976
+ </form>
1977
+ </ng-template>
1977
1978
  `
1978
1979
  }]
1979
1980
  }], propDecorators: { calendar: [{
1980
1981
  type: ViewChild,
1981
1982
  args: ['calendar']
1982
1983
  }] } });
1983
- DateTimeComponent.MaterialComponent = MaterialDateComponent;
1984
-
1984
+ DateTimeComponent.MaterialComponent = MaterialDateComponent;
1985
+
1985
1986
  class MaterialCheckboxComponent extends MaterialComponent {
1986
1987
  getValue() {
1987
1988
  return _.isNil(this.control.value) ? '' : this.control.value;
1988
1989
  }
1989
1990
  }
1990
1991
  MaterialCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1991
- MaterialCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialCheckboxComponent, selector: "mat-formio-checkbox", usesInheritance: true, ngImport: i0, template: `
1992
- <mat-checkbox (change)="onChange()" [ngClass]="{'validation-error' : !!instance.error}"
1993
- [formControl]="control"
1994
- >
1995
- <span matFormioLabel [instance]="instance"></span>
1996
- <mat-icon *ngIf="instance.component.tooltip" matSuffix
1997
- matTooltip="{{ instance.component.tooltip }}" style="font-size: 1rem;">info
1998
- </mat-icon>
1999
- </mat-checkbox>
2000
- <mat-hint>
2001
- {{ instance.component.description }}
2002
- </mat-hint>
2003
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1992
+ MaterialCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialCheckboxComponent, selector: "mat-formio-checkbox", usesInheritance: true, ngImport: i0, template: `
1993
+ <mat-checkbox (change)="onChange()" [ngClass]="{'validation-error' : !!instance.error}"
1994
+ [formControl]="control"
1995
+ >
1996
+ <span matFormioLabel [instance]="instance"></span>
1997
+ <mat-icon *ngIf="instance.component.tooltip" matSuffix
1998
+ matTooltip="{{ instance.component.tooltip }}" style="font-size: 1rem;">info
1999
+ </mat-icon>
2000
+ </mat-checkbox>
2001
+ <mat-hint>
2002
+ {{ instance.component.description }}
2003
+ </mat-hint>
2004
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2004
2005
  `, isInline: true, styles: ["::ng-deep .mat-checkbox.validation-error .mat-checkbox-frame{border-color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
2005
2006
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialCheckboxComponent, decorators: [{
2006
2007
  type: Component,
2007
- args: [{ selector: 'mat-formio-checkbox', template: `
2008
- <mat-checkbox (change)="onChange()" [ngClass]="{'validation-error' : !!instance.error}"
2009
- [formControl]="control"
2010
- >
2011
- <span matFormioLabel [instance]="instance"></span>
2012
- <mat-icon *ngIf="instance.component.tooltip" matSuffix
2013
- matTooltip="{{ instance.component.tooltip }}" style="font-size: 1rem;">info
2014
- </mat-icon>
2015
- </mat-checkbox>
2016
- <mat-hint>
2017
- {{ instance.component.description }}
2018
- </mat-hint>
2019
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2008
+ args: [{ selector: 'mat-formio-checkbox', template: `
2009
+ <mat-checkbox (change)="onChange()" [ngClass]="{'validation-error' : !!instance.error}"
2010
+ [formControl]="control"
2011
+ >
2012
+ <span matFormioLabel [instance]="instance"></span>
2013
+ <mat-icon *ngIf="instance.component.tooltip" matSuffix
2014
+ matTooltip="{{ instance.component.tooltip }}" style="font-size: 1rem;">info
2015
+ </mat-icon>
2016
+ </mat-checkbox>
2017
+ <mat-hint>
2018
+ {{ instance.component.description }}
2019
+ </mat-hint>
2020
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2020
2021
  `, styles: ["::ng-deep .mat-checkbox.validation-error .mat-checkbox-frame{border-color:red}\n"] }]
2021
2022
  }] });
2022
- CheckboxComponent.MaterialComponent = MaterialCheckboxComponent;
2023
-
2023
+ CheckboxComponent.MaterialComponent = MaterialCheckboxComponent;
2024
+
2024
2025
  class MaterialFieldsetComponent extends MaterialNestedComponent {
2025
2026
  }
2026
2027
  MaterialFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2027
- MaterialFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialFieldsetComponent, selector: "mat-formio-fieldset", usesInheritance: true, ngImport: i0, template: `
2028
- <fieldset>
2029
- <legend [attr.ref]="'header'">
2030
- {{ instance.component.legend }}
2031
- <mat-icon *ngIf="instance.component.tooltip"
2032
- matSuffix
2033
- matTooltip="{{ instance.component.tooltip }}"
2034
- >
2035
- info
2036
- </mat-icon>
2037
- </legend>
2038
- <div class="fieldset-body" [attr.ref]="instance.component.key" fxLayout="column" fxLayoutGap="1em">
2039
- <ng-template #components></ng-template>
2040
- </div>
2041
- </fieldset>
2028
+ MaterialFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialFieldsetComponent, selector: "mat-formio-fieldset", usesInheritance: true, ngImport: i0, template: `
2029
+ <fieldset>
2030
+ <legend [attr.ref]="'header'">
2031
+ {{ instance.component.legend }}
2032
+ <mat-icon *ngIf="instance.component.tooltip"
2033
+ matSuffix
2034
+ matTooltip="{{ instance.component.tooltip }}"
2035
+ >
2036
+ info
2037
+ </mat-icon>
2038
+ </legend>
2039
+ <div class="fieldset-body" [attr.ref]="instance.component.key" fxLayout="column" fxLayoutGap="1em">
2040
+ <ng-template #components></ng-template>
2041
+ </div>
2042
+ </fieldset>
2042
2043
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }] });
2043
2044
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialFieldsetComponent, decorators: [{
2044
2045
  type: Component,
2045
- args: [{ selector: 'mat-formio-fieldset', template: `
2046
- <fieldset>
2047
- <legend [attr.ref]="'header'">
2048
- {{ instance.component.legend }}
2049
- <mat-icon *ngIf="instance.component.tooltip"
2050
- matSuffix
2051
- matTooltip="{{ instance.component.tooltip }}"
2052
- >
2053
- info
2054
- </mat-icon>
2055
- </legend>
2056
- <div class="fieldset-body" [attr.ref]="instance.component.key" fxLayout="column" fxLayoutGap="1em">
2057
- <ng-template #components></ng-template>
2058
- </div>
2059
- </fieldset>
2046
+ args: [{ selector: 'mat-formio-fieldset', template: `
2047
+ <fieldset>
2048
+ <legend [attr.ref]="'header'">
2049
+ {{ instance.component.legend }}
2050
+ <mat-icon *ngIf="instance.component.tooltip"
2051
+ matSuffix
2052
+ matTooltip="{{ instance.component.tooltip }}"
2053
+ >
2054
+ info
2055
+ </mat-icon>
2056
+ </legend>
2057
+ <div class="fieldset-body" [attr.ref]="instance.component.key" fxLayout="column" fxLayoutGap="1em">
2058
+ <ng-template #components></ng-template>
2059
+ </div>
2060
+ </fieldset>
2060
2061
  ` }]
2061
2062
  }] });
2062
- FieldsetComponent.MaterialComponent = MaterialFieldsetComponent;
2063
-
2063
+ FieldsetComponent.MaterialComponent = MaterialFieldsetComponent;
2064
+
2064
2065
  class MaterialContentComponent extends MaterialComponent {
2065
2066
  }
2066
2067
  MaterialContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -2072,8 +2073,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
2072
2073
  template: `<div [innerHTML]="instance.content"></div>`
2073
2074
  }]
2074
2075
  }] });
2075
- ContentComponent.MaterialComponent = MaterialContentComponent;
2076
-
2076
+ ContentComponent.MaterialComponent = MaterialContentComponent;
2077
+
2077
2078
  class MaterialSignatureComponent extends MaterialComponent {
2078
2079
  renderComponents() {
2079
2080
  if (this.signatureElement) {
@@ -2085,85 +2086,85 @@ class MaterialSignatureComponent extends MaterialComponent {
2085
2086
  }
2086
2087
  }
2087
2088
  MaterialSignatureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSignatureComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2088
- MaterialSignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSignatureComponent, selector: "mat-formio-signature", viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
2089
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2090
- <ng-template #componentTemplate let-hasLabel>
2091
- <div #signature>
2092
-
2093
- <mat-label *ngIf="hasLabel">
2094
- <span [instance]="instance" matFormioLabel></span>
2095
- </mat-label>
2096
-
2097
- <button mat-icon-button [ngStyle]="{position: 'absolute'}" ref="refresh">
2098
- <mat-icon>refresh</mat-icon>
2099
- </button>
2100
-
2101
- <div class="signature-pad-body"
2102
- [ngStyle]="{width: instance.component.width, height: instance.component.height, padding: 0, margin: 0}"
2103
- [attr.tabindex]="instance.component.tabindex || 0"
2104
- ref="padBody"
2105
- >
2106
- <canvas class="signature-pad-canvas"
2107
- [attr.height]="instance.component.height"
2108
- ref="canvas"
2109
- ></canvas>
2110
- <img fxFlexFill [ngStyle]="{display: 'none' }" ref="signatureImage">
2111
- </div>
2112
- <div *ngIf="instance.component.footer"
2113
- class="signature-pad-footer"
2114
- fxLayout="row"
2115
- fxLayoutAlign="center center"
2116
- >
2117
- <mat-hint>{{ instance.t(instance.component.footer) }}</mat-hint>
2118
- </div>
2119
- </div>
2120
- </ng-template>
2089
+ MaterialSignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSignatureComponent, selector: "mat-formio-signature", viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
2090
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2091
+ <ng-template #componentTemplate let-hasLabel>
2092
+ <div #signature>
2093
+
2094
+ <mat-label *ngIf="hasLabel">
2095
+ <span [instance]="instance" matFormioLabel></span>
2096
+ </mat-label>
2097
+
2098
+ <button mat-icon-button [ngStyle]="{position: 'absolute'}" ref="refresh">
2099
+ <mat-icon>refresh</mat-icon>
2100
+ </button>
2101
+
2102
+ <div class="signature-pad-body"
2103
+ [ngStyle]="{width: instance.component.width, height: instance.component.height, padding: 0, margin: 0}"
2104
+ [attr.tabindex]="instance.component.tabindex || 0"
2105
+ ref="padBody"
2106
+ >
2107
+ <canvas class="signature-pad-canvas"
2108
+ [attr.height]="instance.component.height"
2109
+ ref="canvas"
2110
+ ></canvas>
2111
+ <img fxFlexFill [ngStyle]="{display: 'none' }" ref="signatureImage">
2112
+ </div>
2113
+ <div *ngIf="instance.component.footer"
2114
+ class="signature-pad-footer"
2115
+ fxLayout="row"
2116
+ fxLayoutAlign="center center"
2117
+ >
2118
+ <mat-hint>{{ instance.t(instance.component.footer) }}</mat-hint>
2119
+ </div>
2120
+ </div>
2121
+ </ng-template>
2121
2122
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i4$2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
2122
2123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSignatureComponent, decorators: [{
2123
2124
  type: Component,
2124
2125
  args: [{
2125
2126
  selector: 'mat-formio-signature',
2126
- template: `
2127
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2128
- <ng-template #componentTemplate let-hasLabel>
2129
- <div #signature>
2130
-
2131
- <mat-label *ngIf="hasLabel">
2132
- <span [instance]="instance" matFormioLabel></span>
2133
- </mat-label>
2134
-
2135
- <button mat-icon-button [ngStyle]="{position: 'absolute'}" ref="refresh">
2136
- <mat-icon>refresh</mat-icon>
2137
- </button>
2138
-
2139
- <div class="signature-pad-body"
2140
- [ngStyle]="{width: instance.component.width, height: instance.component.height, padding: 0, margin: 0}"
2141
- [attr.tabindex]="instance.component.tabindex || 0"
2142
- ref="padBody"
2143
- >
2144
- <canvas class="signature-pad-canvas"
2145
- [attr.height]="instance.component.height"
2146
- ref="canvas"
2147
- ></canvas>
2148
- <img fxFlexFill [ngStyle]="{display: 'none' }" ref="signatureImage">
2149
- </div>
2150
- <div *ngIf="instance.component.footer"
2151
- class="signature-pad-footer"
2152
- fxLayout="row"
2153
- fxLayoutAlign="center center"
2154
- >
2155
- <mat-hint>{{ instance.t(instance.component.footer) }}</mat-hint>
2156
- </div>
2157
- </div>
2158
- </ng-template>
2127
+ template: `
2128
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2129
+ <ng-template #componentTemplate let-hasLabel>
2130
+ <div #signature>
2131
+
2132
+ <mat-label *ngIf="hasLabel">
2133
+ <span [instance]="instance" matFormioLabel></span>
2134
+ </mat-label>
2135
+
2136
+ <button mat-icon-button [ngStyle]="{position: 'absolute'}" ref="refresh">
2137
+ <mat-icon>refresh</mat-icon>
2138
+ </button>
2139
+
2140
+ <div class="signature-pad-body"
2141
+ [ngStyle]="{width: instance.component.width, height: instance.component.height, padding: 0, margin: 0}"
2142
+ [attr.tabindex]="instance.component.tabindex || 0"
2143
+ ref="padBody"
2144
+ >
2145
+ <canvas class="signature-pad-canvas"
2146
+ [attr.height]="instance.component.height"
2147
+ ref="canvas"
2148
+ ></canvas>
2149
+ <img fxFlexFill [ngStyle]="{display: 'none' }" ref="signatureImage">
2150
+ </div>
2151
+ <div *ngIf="instance.component.footer"
2152
+ class="signature-pad-footer"
2153
+ fxLayout="row"
2154
+ fxLayoutAlign="center center"
2155
+ >
2156
+ <mat-hint>{{ instance.t(instance.component.footer) }}</mat-hint>
2157
+ </div>
2158
+ </div>
2159
+ </ng-template>
2159
2160
  `
2160
2161
  }]
2161
2162
  }], propDecorators: { signatureElement: [{
2162
2163
  type: ViewChild,
2163
2164
  args: ['signature']
2164
2165
  }] } });
2165
- SignatureComponent.MaterialComponent = MaterialSignatureComponent;
2166
-
2166
+ SignatureComponent.MaterialComponent = MaterialSignatureComponent;
2167
+
2167
2168
  class MaterialSurveyComponent extends MaterialComponent {
2168
2169
  constructor() {
2169
2170
  super(...arguments);
@@ -2210,114 +2211,114 @@ class MaterialSurveyComponent extends MaterialComponent {
2210
2211
  }
2211
2212
  }
2212
2213
  MaterialSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSurveyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2213
- MaterialSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSurveyComponent, selector: "mat-formio-survey", usesInheritance: true, ngImport: i0, template: `
2214
-
2215
- <mat-formio-form-field
2216
- [instance]="instance"
2217
- [componentTemplate]="componentTemplate"
2218
- [showDescription]="false"
2219
- ></mat-formio-form-field>
2220
- <ng-template #componentTemplate let-hasLabel>
2221
-
2222
- <table class="mat-elevation-z8 mat-table" fxFill>
2223
- <thead>
2224
- <tr class="mat-header-row">
2225
- <th class="mat-header-cell">
2226
- <h2 *ngIf="hasLabel">
2227
- <span [instance]="instance" matFormioLabel></span>
2228
- </h2>
2229
- </th>
2230
- <th class="mat-header-cell"
2231
- *ngFor="let value of instance.component.values"
2232
- style="text-align: center;"
2233
- >
2234
- {{ value.label }}
2235
- </th>
2236
- </tr>
2237
- </thead>
2238
-
2239
- <tbody>
2240
- <tr class="mat-row" *ngFor="let question of instance.component.questions; index as i;">
2241
- <td class="mat-cell">{{ question.label }}</td>
2242
- <td class="mat-cell"
2243
- *ngFor="let value of instance.component.values; index as j;"
2244
- style="text-align: center;"
2245
- >
2246
- <mat-radio-group (change)="onChange()"
2247
- [formControl]="getFormControl(question.value)"
2248
- [name]="getUniqueName(question.value)"
2249
- >
2250
- <mat-radio-button [value]="value.value"></mat-radio-button>
2251
- </mat-radio-group>
2252
- </td>
2253
- </tr>
2254
- <mat-hint *ngIf="instance.component.description" class="mat-formio-component-description">
2255
- {{ instance.component.description }}
2256
- </mat-hint>
2257
- </tbody>
2258
-
2259
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2260
- </table>
2261
- </ng-template>
2214
+ MaterialSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSurveyComponent, selector: "mat-formio-survey", usesInheritance: true, ngImport: i0, template: `
2215
+
2216
+ <mat-formio-form-field
2217
+ [instance]="instance"
2218
+ [componentTemplate]="componentTemplate"
2219
+ [showDescription]="false"
2220
+ ></mat-formio-form-field>
2221
+ <ng-template #componentTemplate let-hasLabel>
2222
+
2223
+ <table class="mat-elevation-z8 mat-table" fxFill>
2224
+ <thead>
2225
+ <tr class="mat-header-row">
2226
+ <th class="mat-header-cell">
2227
+ <h2 *ngIf="hasLabel">
2228
+ <span [instance]="instance" matFormioLabel></span>
2229
+ </h2>
2230
+ </th>
2231
+ <th class="mat-header-cell"
2232
+ *ngFor="let value of instance.component.values"
2233
+ style="text-align: center;"
2234
+ >
2235
+ {{ value.label }}
2236
+ </th>
2237
+ </tr>
2238
+ </thead>
2239
+
2240
+ <tbody>
2241
+ <tr class="mat-row" *ngFor="let question of instance.component.questions; index as i;">
2242
+ <td class="mat-cell">{{ question.label }}</td>
2243
+ <td class="mat-cell"
2244
+ *ngFor="let value of instance.component.values; index as j;"
2245
+ style="text-align: center;"
2246
+ >
2247
+ <mat-radio-group (change)="onChange()"
2248
+ [formControl]="getFormControl(question.value)"
2249
+ [name]="getUniqueName(question.value)"
2250
+ >
2251
+ <mat-radio-button [value]="value.value"></mat-radio-button>
2252
+ </mat-radio-group>
2253
+ </td>
2254
+ </tr>
2255
+ <mat-hint *ngIf="instance.component.description" class="mat-formio-component-description">
2256
+ {{ instance.component.description }}
2257
+ </mat-hint>
2258
+ </tbody>
2259
+
2260
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2261
+ </table>
2262
+ </ng-template>
2262
2263
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
2263
2264
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSurveyComponent, decorators: [{
2264
2265
  type: Component,
2265
2266
  args: [{
2266
2267
  selector: 'mat-formio-survey',
2267
- template: `
2268
-
2269
- <mat-formio-form-field
2270
- [instance]="instance"
2271
- [componentTemplate]="componentTemplate"
2272
- [showDescription]="false"
2273
- ></mat-formio-form-field>
2274
- <ng-template #componentTemplate let-hasLabel>
2275
-
2276
- <table class="mat-elevation-z8 mat-table" fxFill>
2277
- <thead>
2278
- <tr class="mat-header-row">
2279
- <th class="mat-header-cell">
2280
- <h2 *ngIf="hasLabel">
2281
- <span [instance]="instance" matFormioLabel></span>
2282
- </h2>
2283
- </th>
2284
- <th class="mat-header-cell"
2285
- *ngFor="let value of instance.component.values"
2286
- style="text-align: center;"
2287
- >
2288
- {{ value.label }}
2289
- </th>
2290
- </tr>
2291
- </thead>
2292
-
2293
- <tbody>
2294
- <tr class="mat-row" *ngFor="let question of instance.component.questions; index as i;">
2295
- <td class="mat-cell">{{ question.label }}</td>
2296
- <td class="mat-cell"
2297
- *ngFor="let value of instance.component.values; index as j;"
2298
- style="text-align: center;"
2299
- >
2300
- <mat-radio-group (change)="onChange()"
2301
- [formControl]="getFormControl(question.value)"
2302
- [name]="getUniqueName(question.value)"
2303
- >
2304
- <mat-radio-button [value]="value.value"></mat-radio-button>
2305
- </mat-radio-group>
2306
- </td>
2307
- </tr>
2308
- <mat-hint *ngIf="instance.component.description" class="mat-formio-component-description">
2309
- {{ instance.component.description }}
2310
- </mat-hint>
2311
- </tbody>
2312
-
2313
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2314
- </table>
2315
- </ng-template>
2268
+ template: `
2269
+
2270
+ <mat-formio-form-field
2271
+ [instance]="instance"
2272
+ [componentTemplate]="componentTemplate"
2273
+ [showDescription]="false"
2274
+ ></mat-formio-form-field>
2275
+ <ng-template #componentTemplate let-hasLabel>
2276
+
2277
+ <table class="mat-elevation-z8 mat-table" fxFill>
2278
+ <thead>
2279
+ <tr class="mat-header-row">
2280
+ <th class="mat-header-cell">
2281
+ <h2 *ngIf="hasLabel">
2282
+ <span [instance]="instance" matFormioLabel></span>
2283
+ </h2>
2284
+ </th>
2285
+ <th class="mat-header-cell"
2286
+ *ngFor="let value of instance.component.values"
2287
+ style="text-align: center;"
2288
+ >
2289
+ {{ value.label }}
2290
+ </th>
2291
+ </tr>
2292
+ </thead>
2293
+
2294
+ <tbody>
2295
+ <tr class="mat-row" *ngFor="let question of instance.component.questions; index as i;">
2296
+ <td class="mat-cell">{{ question.label }}</td>
2297
+ <td class="mat-cell"
2298
+ *ngFor="let value of instance.component.values; index as j;"
2299
+ style="text-align: center;"
2300
+ >
2301
+ <mat-radio-group (change)="onChange()"
2302
+ [formControl]="getFormControl(question.value)"
2303
+ [name]="getUniqueName(question.value)"
2304
+ >
2305
+ <mat-radio-button [value]="value.value"></mat-radio-button>
2306
+ </mat-radio-group>
2307
+ </td>
2308
+ </tr>
2309
+ <mat-hint *ngIf="instance.component.description" class="mat-formio-component-description">
2310
+ {{ instance.component.description }}
2311
+ </mat-hint>
2312
+ </tbody>
2313
+
2314
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2315
+ </table>
2316
+ </ng-template>
2316
2317
  `
2317
2318
  }]
2318
2319
  }] });
2319
- SurveyComponent.MaterialComponent = MaterialSurveyComponent;
2320
-
2320
+ SurveyComponent.MaterialComponent = MaterialSurveyComponent;
2321
+
2321
2322
  class MaterialRadioComponent extends MaterialComponent {
2322
2323
  getLayout() {
2323
2324
  return this.instance.component.inline ? 'row' : 'column';
@@ -2338,70 +2339,70 @@ class MaterialRadioComponent extends MaterialComponent {
2338
2339
  }
2339
2340
  }
2340
2341
  MaterialRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2341
- MaterialRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialRadioComponent, selector: "mat-formio-radio", usesInheritance: true, ngImport: i0, template: `
2342
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2343
- <ng-template #componentTemplate let-hasLabel>
2344
- <div fxLayout="column">
2345
- <mat-label *ngIf="hasLabel">
2346
- <span [instance]="instance" matFormioLabel></span>
2347
- </mat-label>
2348
-
2349
- <mat-radio-group
2350
- (change)="onChange()"
2351
- [formControl]="control"
2352
- fxFlexOffset="10px"
2353
- fxLayout="{{ getLayout() }}"
2354
- fxLayoutGap="10px"
2355
- >
2356
- <mat-radio-button *ngFor="let option of instance.component.values"
2357
- value="{{ option.value }}"
2358
- [checked]="isRadioChecked(option)"
2359
- (keyup.space)="clearValue($event, option)"
2360
- (click)="clearValue($event, option)"
2361
- >
2362
- {{ option.label }}
2363
- </mat-radio-button>
2364
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2365
- </mat-radio-group>
2366
- </div>
2367
- </ng-template>
2342
+ MaterialRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialRadioComponent, selector: "mat-formio-radio", usesInheritance: true, ngImport: i0, template: `
2343
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2344
+ <ng-template #componentTemplate let-hasLabel>
2345
+ <div fxLayout="column">
2346
+ <mat-label *ngIf="hasLabel">
2347
+ <span [instance]="instance" matFormioLabel></span>
2348
+ </mat-label>
2349
+
2350
+ <mat-radio-group
2351
+ (change)="onChange()"
2352
+ [formControl]="control"
2353
+ fxFlexOffset="10px"
2354
+ fxLayout="{{ getLayout() }}"
2355
+ fxLayoutGap="10px"
2356
+ >
2357
+ <mat-radio-button *ngFor="let option of instance.component.values"
2358
+ value="{{ option.value }}"
2359
+ [checked]="isRadioChecked(option)"
2360
+ (keyup.space)="clearValue($event, option)"
2361
+ (click)="clearValue($event, option)"
2362
+ >
2363
+ {{ option.label }}
2364
+ </mat-radio-button>
2365
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2366
+ </mat-radio-group>
2367
+ </div>
2368
+ </ng-template>
2368
2369
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexOffsetDirective, selector: " [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md], [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md], [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm], [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
2369
2370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialRadioComponent, decorators: [{
2370
2371
  type: Component,
2371
2372
  args: [{
2372
2373
  selector: 'mat-formio-radio',
2373
- template: `
2374
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2375
- <ng-template #componentTemplate let-hasLabel>
2376
- <div fxLayout="column">
2377
- <mat-label *ngIf="hasLabel">
2378
- <span [instance]="instance" matFormioLabel></span>
2379
- </mat-label>
2380
-
2381
- <mat-radio-group
2382
- (change)="onChange()"
2383
- [formControl]="control"
2384
- fxFlexOffset="10px"
2385
- fxLayout="{{ getLayout() }}"
2386
- fxLayoutGap="10px"
2387
- >
2388
- <mat-radio-button *ngFor="let option of instance.component.values"
2389
- value="{{ option.value }}"
2390
- [checked]="isRadioChecked(option)"
2391
- (keyup.space)="clearValue($event, option)"
2392
- (click)="clearValue($event, option)"
2393
- >
2394
- {{ option.label }}
2395
- </mat-radio-button>
2396
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2397
- </mat-radio-group>
2398
- </div>
2399
- </ng-template>
2374
+ template: `
2375
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2376
+ <ng-template #componentTemplate let-hasLabel>
2377
+ <div fxLayout="column">
2378
+ <mat-label *ngIf="hasLabel">
2379
+ <span [instance]="instance" matFormioLabel></span>
2380
+ </mat-label>
2381
+
2382
+ <mat-radio-group
2383
+ (change)="onChange()"
2384
+ [formControl]="control"
2385
+ fxFlexOffset="10px"
2386
+ fxLayout="{{ getLayout() }}"
2387
+ fxLayoutGap="10px"
2388
+ >
2389
+ <mat-radio-button *ngFor="let option of instance.component.values"
2390
+ value="{{ option.value }}"
2391
+ [checked]="isRadioChecked(option)"
2392
+ (keyup.space)="clearValue($event, option)"
2393
+ (click)="clearValue($event, option)"
2394
+ >
2395
+ {{ option.label }}
2396
+ </mat-radio-button>
2397
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2398
+ </mat-radio-group>
2399
+ </div>
2400
+ </ng-template>
2400
2401
  `
2401
2402
  }]
2402
2403
  }] });
2403
- RadioComponent.MaterialComponent = MaterialRadioComponent;
2404
-
2404
+ RadioComponent.MaterialComponent = MaterialRadioComponent;
2405
+
2405
2406
  class MaterialSelectBoxesComponent extends MaterialRadioComponent {
2406
2407
  constructor() {
2407
2408
  super(...arguments);
@@ -2434,64 +2435,64 @@ class MaterialSelectBoxesComponent extends MaterialRadioComponent {
2434
2435
  }
2435
2436
  }
2436
2437
  MaterialSelectBoxesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectBoxesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2437
- MaterialSelectBoxesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectBoxesComponent, selector: "mat-formio-selectboxes", usesInheritance: true, ngImport: i0, template: `
2438
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2439
- <ng-template #componentTemplate let-hasLabel>
2440
- <div fxLayout="column">
2441
- <mat-label *ngIf="hasLabel">
2442
- <span [instance]="instance" matFormioLabel></span>
2443
- </mat-label>
2444
- <div
2445
- fxFlexOffset="10px"
2446
- fxLayout="{{ getLayout() }}"
2447
- fxLayoutGap="10px"
2448
- >
2449
- <mat-checkbox
2450
- *ngFor="let option of instance.component.values"
2451
- (change)="onChange()"
2452
- [(ngModel)]="value[option.value]"
2453
- [disabled]="disabled"
2454
- >
2455
- {{ option.label }}
2456
- </mat-checkbox>
2457
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2458
- </div>
2459
- </div>
2460
- </ng-template>
2438
+ MaterialSelectBoxesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectBoxesComponent, selector: "mat-formio-selectboxes", usesInheritance: true, ngImport: i0, template: `
2439
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2440
+ <ng-template #componentTemplate let-hasLabel>
2441
+ <div fxLayout="column">
2442
+ <mat-label *ngIf="hasLabel">
2443
+ <span [instance]="instance" matFormioLabel></span>
2444
+ </mat-label>
2445
+ <div
2446
+ fxFlexOffset="10px"
2447
+ fxLayout="{{ getLayout() }}"
2448
+ fxLayoutGap="10px"
2449
+ >
2450
+ <mat-checkbox
2451
+ *ngFor="let option of instance.component.values"
2452
+ (change)="onChange()"
2453
+ [(ngModel)]="value[option.value]"
2454
+ [disabled]="disabled"
2455
+ >
2456
+ {{ option.label }}
2457
+ </mat-checkbox>
2458
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2459
+ </div>
2460
+ </div>
2461
+ </ng-template>
2461
2462
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexOffsetDirective, selector: " [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md], [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md], [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm], [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
2462
2463
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectBoxesComponent, decorators: [{
2463
2464
  type: Component,
2464
2465
  args: [{
2465
2466
  selector: 'mat-formio-selectboxes',
2466
- template: `
2467
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2468
- <ng-template #componentTemplate let-hasLabel>
2469
- <div fxLayout="column">
2470
- <mat-label *ngIf="hasLabel">
2471
- <span [instance]="instance" matFormioLabel></span>
2472
- </mat-label>
2473
- <div
2474
- fxFlexOffset="10px"
2475
- fxLayout="{{ getLayout() }}"
2476
- fxLayoutGap="10px"
2477
- >
2478
- <mat-checkbox
2479
- *ngFor="let option of instance.component.values"
2480
- (change)="onChange()"
2481
- [(ngModel)]="value[option.value]"
2482
- [disabled]="disabled"
2483
- >
2484
- {{ option.label }}
2485
- </mat-checkbox>
2486
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2487
- </div>
2488
- </div>
2489
- </ng-template>
2467
+ template: `
2468
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2469
+ <ng-template #componentTemplate let-hasLabel>
2470
+ <div fxLayout="column">
2471
+ <mat-label *ngIf="hasLabel">
2472
+ <span [instance]="instance" matFormioLabel></span>
2473
+ </mat-label>
2474
+ <div
2475
+ fxFlexOffset="10px"
2476
+ fxLayout="{{ getLayout() }}"
2477
+ fxLayoutGap="10px"
2478
+ >
2479
+ <mat-checkbox
2480
+ *ngFor="let option of instance.component.values"
2481
+ (change)="onChange()"
2482
+ [(ngModel)]="value[option.value]"
2483
+ [disabled]="disabled"
2484
+ >
2485
+ {{ option.label }}
2486
+ </mat-checkbox>
2487
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2488
+ </div>
2489
+ </div>
2490
+ </ng-template>
2490
2491
  `
2491
2492
  }]
2492
2493
  }] });
2493
- SelectBoxesComponent.MaterialComponent = MaterialSelectBoxesComponent;
2494
-
2494
+ SelectBoxesComponent.MaterialComponent = MaterialSelectBoxesComponent;
2495
+
2495
2496
  class MaterialSelectComponent extends MaterialComponent {
2496
2497
  constructor() {
2497
2498
  super(...arguments);
@@ -2550,101 +2551,101 @@ class MaterialSelectComponent extends MaterialComponent {
2550
2551
  }
2551
2552
  }
2552
2553
  MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2553
- MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
2554
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2555
- <ng-template #componentTemplate let-hasLabel>
2556
- <mat-form-field fxFill>
2557
-
2558
- <mat-label *ngIf="hasLabel">
2559
- <span [instance]="instance" matFormioLabel></span>
2560
- </mat-label>
2561
-
2562
- <span *ngIf="instance.component.prefix" matPrefix>
2563
- {{ instance.component.prefix }}&nbsp;
2564
- </span>
2565
- <mat-select
2566
- [multiple]="instance.component.multiple"
2567
- [formControl]="control"
2568
- [placeholder]="instance.component.placeholder"
2569
- (selectionChange)="onChange()"
2570
- [compareWith]="compareObjects"
2571
- >
2572
-
2573
- <mat-option>
2574
- <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2575
- </mat-option>
2576
-
2577
- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2578
- <span [innerHTML]="option.label"></span>
2579
- </mat-option>
2580
-
2581
- <!-- <div class="mat-option">
2582
- <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2583
- </div> -->
2584
- <mat-option *ngIf="!filteredOptionsLength" disabled>
2585
- <span>Nothing was found</span>
2586
- </mat-option>
2587
- <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2588
- <span [innerHTML]="option.label"></span>
2589
- </mat-option> -->
2590
- </mat-select>
2591
-
2592
- <span *ngIf="instance.component.suffix" matSuffix>
2593
- {{ instance.component.suffix }}
2594
- </span>
2595
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2596
- </mat-form-field>
2597
- </ng-template>
2554
+ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
2555
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2556
+ <ng-template #componentTemplate let-hasLabel>
2557
+ <mat-form-field fxFill>
2558
+
2559
+ <mat-label *ngIf="hasLabel">
2560
+ <span [instance]="instance" matFormioLabel></span>
2561
+ </mat-label>
2562
+
2563
+ <span *ngIf="instance.component.prefix" matPrefix>
2564
+ {{ instance.component.prefix }}&nbsp;
2565
+ </span>
2566
+ <mat-select
2567
+ [multiple]="instance.component.multiple"
2568
+ [formControl]="control"
2569
+ [placeholder]="instance.component.placeholder"
2570
+ (selectionChange)="onChange()"
2571
+ [compareWith]="compareObjects"
2572
+ >
2573
+
2574
+ <mat-option>
2575
+ <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2576
+ </mat-option>
2577
+
2578
+ <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2579
+ <span [innerHTML]="option.label"></span>
2580
+ </mat-option>
2581
+
2582
+ <!-- <div class="mat-option">
2583
+ <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2584
+ </div> -->
2585
+ <mat-option *ngIf="!filteredOptionsLength" disabled>
2586
+ <span>Nothing was found</span>
2587
+ </mat-option>
2588
+ <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2589
+ <span [innerHTML]="option.label"></span>
2590
+ </mat-option> -->
2591
+ </mat-select>
2592
+
2593
+ <span *ngIf="instance.component.suffix" matSuffix>
2594
+ {{ instance.component.suffix }}
2595
+ </span>
2596
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2597
+ </mat-form-field>
2598
+ </ng-template>
2598
2599
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
2599
2600
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
2600
2601
  type: Component,
2601
2602
  args: [{
2602
2603
  selector: 'mat-formio-select',
2603
- template: `
2604
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2605
- <ng-template #componentTemplate let-hasLabel>
2606
- <mat-form-field fxFill>
2607
-
2608
- <mat-label *ngIf="hasLabel">
2609
- <span [instance]="instance" matFormioLabel></span>
2610
- </mat-label>
2611
-
2612
- <span *ngIf="instance.component.prefix" matPrefix>
2613
- {{ instance.component.prefix }}&nbsp;
2614
- </span>
2615
- <mat-select
2616
- [multiple]="instance.component.multiple"
2617
- [formControl]="control"
2618
- [placeholder]="instance.component.placeholder"
2619
- (selectionChange)="onChange()"
2620
- [compareWith]="compareObjects"
2621
- >
2622
-
2623
- <mat-option>
2624
- <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2625
- </mat-option>
2626
-
2627
- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2628
- <span [innerHTML]="option.label"></span>
2629
- </mat-option>
2630
-
2631
- <!-- <div class="mat-option">
2632
- <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2633
- </div> -->
2634
- <mat-option *ngIf="!filteredOptionsLength" disabled>
2635
- <span>Nothing was found</span>
2636
- </mat-option>
2637
- <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2638
- <span [innerHTML]="option.label"></span>
2639
- </mat-option> -->
2640
- </mat-select>
2641
-
2642
- <span *ngIf="instance.component.suffix" matSuffix>
2643
- {{ instance.component.suffix }}
2644
- </span>
2645
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2646
- </mat-form-field>
2647
- </ng-template>
2604
+ template: `
2605
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2606
+ <ng-template #componentTemplate let-hasLabel>
2607
+ <mat-form-field fxFill>
2608
+
2609
+ <mat-label *ngIf="hasLabel">
2610
+ <span [instance]="instance" matFormioLabel></span>
2611
+ </mat-label>
2612
+
2613
+ <span *ngIf="instance.component.prefix" matPrefix>
2614
+ {{ instance.component.prefix }}&nbsp;
2615
+ </span>
2616
+ <mat-select
2617
+ [multiple]="instance.component.multiple"
2618
+ [formControl]="control"
2619
+ [placeholder]="instance.component.placeholder"
2620
+ (selectionChange)="onChange()"
2621
+ [compareWith]="compareObjects"
2622
+ >
2623
+
2624
+ <mat-option>
2625
+ <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2626
+ </mat-option>
2627
+
2628
+ <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2629
+ <span [innerHTML]="option.label"></span>
2630
+ </mat-option>
2631
+
2632
+ <!-- <div class="mat-option">
2633
+ <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2634
+ </div> -->
2635
+ <mat-option *ngIf="!filteredOptionsLength" disabled>
2636
+ <span>Nothing was found</span>
2637
+ </mat-option>
2638
+ <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2639
+ <span [innerHTML]="option.label"></span>
2640
+ </mat-option> -->
2641
+ </mat-select>
2642
+
2643
+ <span *ngIf="instance.component.suffix" matSuffix>
2644
+ {{ instance.component.suffix }}
2645
+ </span>
2646
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2647
+ </mat-form-field>
2648
+ </ng-template>
2648
2649
  `
2649
2650
  }]
2650
2651
  }], propDecorators: { multiSelect: [{
@@ -2659,42 +2660,42 @@ SelectComponent.prototype.setItems = function (...args) {
2659
2660
  if (this.materialComponent && this.materialComponent.selectOptionsResolve) {
2660
2661
  this.materialComponent.selectOptionsResolve(this.selectOptions);
2661
2662
  }
2662
- };
2663
-
2663
+ };
2664
+
2664
2665
  class MaterialWellComponent extends MaterialNestedComponent {
2665
2666
  }
2666
2667
  MaterialWellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2667
- MaterialWellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialWellComponent, selector: "mat-formio-well", usesInheritance: true, ngImport: i0, template: `
2668
- <mat-card>
2669
- <mat-card-content fxLayout="column"
2670
- fxLayoutGap="1em"
2671
- [ngStyle]="{
2672
- 'background-color':'#f5f5f5',
2673
- 'padding': '1.5em'
2674
- }"
2675
- >
2676
- <ng-template #components></ng-template>
2677
- </mat-card-content>
2678
- </mat-card>
2668
+ MaterialWellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialWellComponent, selector: "mat-formio-well", usesInheritance: true, ngImport: i0, template: `
2669
+ <mat-card>
2670
+ <mat-card-content fxLayout="column"
2671
+ fxLayoutGap="1em"
2672
+ [ngStyle]="{
2673
+ 'background-color':'#f5f5f5',
2674
+ 'padding': '1.5em'
2675
+ }"
2676
+ >
2677
+ <ng-template #components></ng-template>
2678
+ </mat-card-content>
2679
+ </mat-card>
2679
2680
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4$2.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }] });
2680
2681
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWellComponent, decorators: [{
2681
2682
  type: Component,
2682
- args: [{ selector: 'mat-formio-well', template: `
2683
- <mat-card>
2684
- <mat-card-content fxLayout="column"
2685
- fxLayoutGap="1em"
2686
- [ngStyle]="{
2687
- 'background-color':'#f5f5f5',
2688
- 'padding': '1.5em'
2689
- }"
2690
- >
2691
- <ng-template #components></ng-template>
2692
- </mat-card-content>
2693
- </mat-card>
2683
+ args: [{ selector: 'mat-formio-well', template: `
2684
+ <mat-card>
2685
+ <mat-card-content fxLayout="column"
2686
+ fxLayoutGap="1em"
2687
+ [ngStyle]="{
2688
+ 'background-color':'#f5f5f5',
2689
+ 'padding': '1.5em'
2690
+ }"
2691
+ >
2692
+ <ng-template #components></ng-template>
2693
+ </mat-card-content>
2694
+ </mat-card>
2694
2695
  ` }]
2695
2696
  }] });
2696
- WellComponent.MaterialComponent = MaterialWellComponent;
2697
-
2697
+ WellComponent.MaterialComponent = MaterialWellComponent;
2698
+
2698
2699
  class MaterialDataGridComponent extends MaterialNestedComponent {
2699
2700
  constructor() {
2700
2701
  super(...arguments);
@@ -2774,155 +2775,155 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
2774
2775
  }
2775
2776
  }
2776
2777
  MaterialDataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2777
- MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDataGridComponent, selector: "mat-formio-datagrid", usesInheritance: true, ngImport: i0, template: `
2778
- <mat-formio-form-field [instance]="instance"
2779
- [componentTemplate]="componentTemplate"
2780
- [labelTemplate]="labelTemplate"
2781
- ></mat-formio-form-field>
2782
- <ng-template #componentTemplate let-hasLabel>
2783
- <mat-card fxFill>
2784
- <ng-container *ngIf="hasLabel">
2785
- <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
2786
- </ng-container>
2787
- <mat-card-content>
2788
- <mat-card-actions
2789
- *ngIf="instance.hasAddButton() && (instance.component.addAnotherPosition === 'both' || instance.component.addAnotherPosition === 'top')">
2790
- <button mat-raised-button color="primary" (click)="addAnother()">
2791
- <mat-icon>add</mat-icon>
2792
- {{instance.component.addAnother || 'Add Another'}}
2793
- </button>
2794
- </mat-card-actions>
2795
- <table
2796
- mat-table
2797
- [dataSource]="dataSource"
2798
- class="mat-elevation-z8"
2799
- fxFill
2800
- cdkDropList
2801
- [cdkDropListData]="dataSource"
2802
- (cdkDropListDropped)="dropTable($event)">
2803
- >
2804
- <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
2805
- <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
2806
- <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
2807
- <ng-template #components></ng-template>
2808
- </td>
2809
- </ng-container>
2810
- <ng-container matColumnDef="__removeRow">
2811
- <th mat-header-cell *matHeaderCellDef></th>
2812
- <td mat-cell *matCellDef="let i = index;">
2813
- <button mat-button *ngIf="instance.hasRemoveButtons()" (click)="removeRow(i)">
2814
- <mat-icon aria-hidden="false" aria-label="Remove row">delete</mat-icon>
2815
- </button>
2816
- </td>
2817
- </ng-container>
2818
- <ng-container matColumnDef="position" *ngIf="instance.component.reorder">
2819
- <th mat-header-cell *matHeaderCellDef> No.</th>
2820
- <td mat-cell *matCellDef="let element">
2821
- <mat-icon cdkDragHandle>reorder</mat-icon>
2822
- </td>
2823
- </ng-container>
2824
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
2825
- <div *ngIf="instance?.component?.reorder">
2826
- <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag
2827
- [cdkDragData]="row"></tr>
2828
- </div>
2829
- <div *ngIf="!instance?.component?.reorder">
2830
- <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
2831
- </div>
2832
- </table>
2833
- </mat-card-content>
2834
- <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
2835
- <button mat-raised-button color="primary" (click)="addAnother()">
2836
- <mat-icon>add</mat-icon>
2837
- {{instance.component.addAnother || 'Add Another'}}
2838
- </button>
2839
- </mat-card-actions>
2840
- </mat-card>
2841
- </ng-template>
2842
-
2843
- <ng-template #labelTemplate>
2844
- <mat-card-title>
2845
- <span [instance]="instance" matFormioLabel></span>
2846
- </mat-card-title>
2847
- </ng-template>
2778
+ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDataGridComponent, selector: "mat-formio-datagrid", usesInheritance: true, ngImport: i0, template: `
2779
+ <mat-formio-form-field [instance]="instance"
2780
+ [componentTemplate]="componentTemplate"
2781
+ [labelTemplate]="labelTemplate"
2782
+ ></mat-formio-form-field>
2783
+ <ng-template #componentTemplate let-hasLabel>
2784
+ <mat-card fxFill>
2785
+ <ng-container *ngIf="hasLabel">
2786
+ <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
2787
+ </ng-container>
2788
+ <mat-card-content>
2789
+ <mat-card-actions
2790
+ *ngIf="instance.hasAddButton() && (instance.component.addAnotherPosition === 'both' || instance.component.addAnotherPosition === 'top')">
2791
+ <button mat-raised-button color="primary" (click)="addAnother()">
2792
+ <mat-icon>add</mat-icon>
2793
+ {{instance.component.addAnother || 'Add Another'}}
2794
+ </button>
2795
+ </mat-card-actions>
2796
+ <table
2797
+ mat-table
2798
+ [dataSource]="dataSource"
2799
+ class="mat-elevation-z8"
2800
+ fxFill
2801
+ cdkDropList
2802
+ [cdkDropListData]="dataSource"
2803
+ (cdkDropListDropped)="dropTable($event)">
2804
+ >
2805
+ <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
2806
+ <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
2807
+ <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
2808
+ <ng-template #components></ng-template>
2809
+ </td>
2810
+ </ng-container>
2811
+ <ng-container matColumnDef="__removeRow">
2812
+ <th mat-header-cell *matHeaderCellDef></th>
2813
+ <td mat-cell *matCellDef="let i = index;">
2814
+ <button mat-button *ngIf="instance.hasRemoveButtons()" (click)="removeRow(i)">
2815
+ <mat-icon aria-hidden="false" aria-label="Remove row">delete</mat-icon>
2816
+ </button>
2817
+ </td>
2818
+ </ng-container>
2819
+ <ng-container matColumnDef="position" *ngIf="instance.component.reorder">
2820
+ <th mat-header-cell *matHeaderCellDef> No.</th>
2821
+ <td mat-cell *matCellDef="let element">
2822
+ <mat-icon cdkDragHandle>reorder</mat-icon>
2823
+ </td>
2824
+ </ng-container>
2825
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
2826
+ <div *ngIf="instance?.component?.reorder">
2827
+ <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag
2828
+ [cdkDragData]="row"></tr>
2829
+ </div>
2830
+ <div *ngIf="!instance?.component?.reorder">
2831
+ <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
2832
+ </div>
2833
+ </table>
2834
+ </mat-card-content>
2835
+ <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
2836
+ <button mat-raised-button color="primary" (click)="addAnother()">
2837
+ <mat-icon>add</mat-icon>
2838
+ {{instance.component.addAnother || 'Add Another'}}
2839
+ </button>
2840
+ </mat-card-actions>
2841
+ </mat-card>
2842
+ </ng-template>
2843
+
2844
+ <ng-template #labelTemplate>
2845
+ <mat-card-title>
2846
+ <span [instance]="instance" matFormioLabel></span>
2847
+ </mat-card-title>
2848
+ </ng-template>
2848
2849
  `, isInline: true, styles: [".datagrid-row{height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
2849
2850
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, decorators: [{
2850
2851
  type: Component,
2851
- args: [{ selector: 'mat-formio-datagrid', template: `
2852
- <mat-formio-form-field [instance]="instance"
2853
- [componentTemplate]="componentTemplate"
2854
- [labelTemplate]="labelTemplate"
2855
- ></mat-formio-form-field>
2856
- <ng-template #componentTemplate let-hasLabel>
2857
- <mat-card fxFill>
2858
- <ng-container *ngIf="hasLabel">
2859
- <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
2860
- </ng-container>
2861
- <mat-card-content>
2862
- <mat-card-actions
2863
- *ngIf="instance.hasAddButton() && (instance.component.addAnotherPosition === 'both' || instance.component.addAnotherPosition === 'top')">
2864
- <button mat-raised-button color="primary" (click)="addAnother()">
2865
- <mat-icon>add</mat-icon>
2866
- {{instance.component.addAnother || 'Add Another'}}
2867
- </button>
2868
- </mat-card-actions>
2869
- <table
2870
- mat-table
2871
- [dataSource]="dataSource"
2872
- class="mat-elevation-z8"
2873
- fxFill
2874
- cdkDropList
2875
- [cdkDropListData]="dataSource"
2876
- (cdkDropListDropped)="dropTable($event)">
2877
- >
2878
- <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
2879
- <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
2880
- <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
2881
- <ng-template #components></ng-template>
2882
- </td>
2883
- </ng-container>
2884
- <ng-container matColumnDef="__removeRow">
2885
- <th mat-header-cell *matHeaderCellDef></th>
2886
- <td mat-cell *matCellDef="let i = index;">
2887
- <button mat-button *ngIf="instance.hasRemoveButtons()" (click)="removeRow(i)">
2888
- <mat-icon aria-hidden="false" aria-label="Remove row">delete</mat-icon>
2889
- </button>
2890
- </td>
2891
- </ng-container>
2892
- <ng-container matColumnDef="position" *ngIf="instance.component.reorder">
2893
- <th mat-header-cell *matHeaderCellDef> No.</th>
2894
- <td mat-cell *matCellDef="let element">
2895
- <mat-icon cdkDragHandle>reorder</mat-icon>
2896
- </td>
2897
- </ng-container>
2898
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
2899
- <div *ngIf="instance?.component?.reorder">
2900
- <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag
2901
- [cdkDragData]="row"></tr>
2902
- </div>
2903
- <div *ngIf="!instance?.component?.reorder">
2904
- <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
2905
- </div>
2906
- </table>
2907
- </mat-card-content>
2908
- <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
2909
- <button mat-raised-button color="primary" (click)="addAnother()">
2910
- <mat-icon>add</mat-icon>
2911
- {{instance.component.addAnother || 'Add Another'}}
2912
- </button>
2913
- </mat-card-actions>
2914
- </mat-card>
2915
- </ng-template>
2916
-
2917
- <ng-template #labelTemplate>
2918
- <mat-card-title>
2919
- <span [instance]="instance" matFormioLabel></span>
2920
- </mat-card-title>
2921
- </ng-template>
2852
+ args: [{ selector: 'mat-formio-datagrid', template: `
2853
+ <mat-formio-form-field [instance]="instance"
2854
+ [componentTemplate]="componentTemplate"
2855
+ [labelTemplate]="labelTemplate"
2856
+ ></mat-formio-form-field>
2857
+ <ng-template #componentTemplate let-hasLabel>
2858
+ <mat-card fxFill>
2859
+ <ng-container *ngIf="hasLabel">
2860
+ <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
2861
+ </ng-container>
2862
+ <mat-card-content>
2863
+ <mat-card-actions
2864
+ *ngIf="instance.hasAddButton() && (instance.component.addAnotherPosition === 'both' || instance.component.addAnotherPosition === 'top')">
2865
+ <button mat-raised-button color="primary" (click)="addAnother()">
2866
+ <mat-icon>add</mat-icon>
2867
+ {{instance.component.addAnother || 'Add Another'}}
2868
+ </button>
2869
+ </mat-card-actions>
2870
+ <table
2871
+ mat-table
2872
+ [dataSource]="dataSource"
2873
+ class="mat-elevation-z8"
2874
+ fxFill
2875
+ cdkDropList
2876
+ [cdkDropListData]="dataSource"
2877
+ (cdkDropListDropped)="dropTable($event)">
2878
+ >
2879
+ <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
2880
+ <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
2881
+ <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
2882
+ <ng-template #components></ng-template>
2883
+ </td>
2884
+ </ng-container>
2885
+ <ng-container matColumnDef="__removeRow">
2886
+ <th mat-header-cell *matHeaderCellDef></th>
2887
+ <td mat-cell *matCellDef="let i = index;">
2888
+ <button mat-button *ngIf="instance.hasRemoveButtons()" (click)="removeRow(i)">
2889
+ <mat-icon aria-hidden="false" aria-label="Remove row">delete</mat-icon>
2890
+ </button>
2891
+ </td>
2892
+ </ng-container>
2893
+ <ng-container matColumnDef="position" *ngIf="instance.component.reorder">
2894
+ <th mat-header-cell *matHeaderCellDef> No.</th>
2895
+ <td mat-cell *matCellDef="let element">
2896
+ <mat-icon cdkDragHandle>reorder</mat-icon>
2897
+ </td>
2898
+ </ng-container>
2899
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
2900
+ <div *ngIf="instance?.component?.reorder">
2901
+ <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag
2902
+ [cdkDragData]="row"></tr>
2903
+ </div>
2904
+ <div *ngIf="!instance?.component?.reorder">
2905
+ <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
2906
+ </div>
2907
+ </table>
2908
+ </mat-card-content>
2909
+ <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
2910
+ <button mat-raised-button color="primary" (click)="addAnother()">
2911
+ <mat-icon>add</mat-icon>
2912
+ {{instance.component.addAnother || 'Add Another'}}
2913
+ </button>
2914
+ </mat-card-actions>
2915
+ </mat-card>
2916
+ </ng-template>
2917
+
2918
+ <ng-template #labelTemplate>
2919
+ <mat-card-title>
2920
+ <span [instance]="instance" matFormioLabel></span>
2921
+ </mat-card-title>
2922
+ </ng-template>
2922
2923
  `, styles: [".datagrid-row{height:auto}\n"] }]
2923
2924
  }] });
2924
- DataGridComponent.MaterialComponent = MaterialDataGridComponent;
2925
-
2925
+ DataGridComponent.MaterialComponent = MaterialDataGridComponent;
2926
+
2926
2927
  var EditRowState;
2927
2928
  (function (EditRowState) {
2928
2929
  EditRowState["NEW"] = "new";
@@ -2966,29 +2967,29 @@ EditGridComponent.prototype.checkRow = function (data, editRow, flags = {}) {
2966
2967
  /* tslint:enable only-arrow-functions */
2967
2968
  const DEFAULT_HEADER_TEMPLATES = [
2968
2969
  hashCode(EditGridComponent.defaultHeaderTemplate),
2969
- hashCode(`
2970
- <div class="row">
2971
- {% (components || []).forEach(function(component) { %}
2972
- <div class="col-sm-2">{{ component.label }}</div>
2973
- {% }) %}
2970
+ hashCode(`
2971
+ <div class="row">
2972
+ {% (components || []).forEach(function(component) { %}
2973
+ <div class="col-sm-2">{{ component.label }}</div>
2974
+ {% }) %}
2974
2975
  </div>`)
2975
2976
  ];
2976
2977
  const DEFAULT_ROW_TEMPLATES = [
2977
2978
  hashCode(EditGridComponent.defaultRowTemplate),
2978
- hashCode(`<div class="row">
2979
- {% util.eachComponent(components, function(component) { %}
2980
- <div class="col-sm-2">
2981
- {{ getView(component, row[component.key]) }}
2982
- </div>
2983
- {% }) %}
2984
- {% if (!instance.options.readOnly) { %}
2985
- <div class="col-sm-2">
2986
- <div class="btn-group pull-right">
2987
- <button class="btn btn-default btn-sm editRow">Edit</button>
2988
- <button class="btn btn-danger btn-sm removeRow">Delete</button>
2989
- </div>
2990
- </div>
2991
- {% } %}
2979
+ hashCode(`<div class="row">
2980
+ {% util.eachComponent(components, function(component) { %}
2981
+ <div class="col-sm-2">
2982
+ {{ getView(component, row[component.key]) }}
2983
+ </div>
2984
+ {% }) %}
2985
+ {% if (!instance.options.readOnly) { %}
2986
+ <div class="col-sm-2">
2987
+ <div class="btn-group pull-right">
2988
+ <button class="btn btn-default btn-sm editRow">Edit</button>
2989
+ <button class="btn btn-danger btn-sm removeRow">Delete</button>
2990
+ </div>
2991
+ </div>
2992
+ {% } %}
2992
2993
  </div>`)
2993
2994
  ];
2994
2995
  class MaterialEditGridComponent extends MaterialNestedComponent {
@@ -3000,12 +3001,12 @@ class MaterialEditGridComponent extends MaterialNestedComponent {
3000
3001
  this.RowStates = EditRowState;
3001
3002
  }
3002
3003
  getRowTemplate(content) {
3003
- return `<mat-list style="display: flex;">
3004
- {% (components || []).forEach(function(component) { %}
3005
- {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
3006
- <mat-list-item style="width: {{ colWidth }}%; margin: 0 0.8rem">${content}</mat-list-item>
3007
- {% } %}
3008
- {% }) %}
3004
+ return `<mat-list style="display: flex;">
3005
+ {% (components || []).forEach(function(component) { %}
3006
+ {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
3007
+ <mat-list-item style="width: {{ colWidth }}%; margin: 0 0.8rem">${content}</mat-list-item>
3008
+ {% } %}
3009
+ {% }) %}
3009
3010
  </mat-list>`;
3010
3011
  }
3011
3012
  validate(index) {
@@ -3157,8 +3158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
3157
3158
  type: ViewChildren,
3158
3159
  args: ['forms']
3159
3160
  }] } });
3160
- EditGridComponent.MaterialComponent = MaterialEditGridComponent;
3161
-
3161
+ EditGridComponent.MaterialComponent = MaterialEditGridComponent;
3162
+
3162
3163
  class MaterialTableComponent extends MaterialNestedComponent {
3163
3164
  setInstance(instance) {
3164
3165
  super.setInstance(instance);
@@ -3177,75 +3178,75 @@ class MaterialTableComponent extends MaterialNestedComponent {
3177
3178
  }
3178
3179
  }
3179
3180
  MaterialTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3180
- MaterialTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTableComponent, selector: "mat-formio-table", usesInheritance: true, ngImport: i0, template: `
3181
- <table class="mat-table" style="width: 100%;" [ngClass]="{'is-bordered' : instance.component.bordered}">
3182
- <thead>
3183
- <tr class="mat-header-row">
3184
- <th *ngFor="let header of instance.component.header"
3185
- class="mat-header-cell"
3186
- >
3187
- {{ instance.t(header) }}
3188
- </th>
3189
- </tr>
3190
- </thead>
3191
-
3192
- <tbody>
3193
- <tr *ngFor="let row of instance.table; let i = index"
3194
- role="row"
3195
- class="mat-row"
3196
- [ngClass]="{
3197
- 'is-hover': instance.component.hover,
3198
- 'is-striped': instance.component.striped && i % 2 === 0
3199
- }"
3200
- >
3201
- <td *ngFor="let col of row"
3202
- role="gridcell"
3203
- class="mat-cell"
3204
- [ngClass]="getTableColClasses()"
3205
- >
3206
- <ng-template #components></ng-template>
3207
- </td>
3208
- </tr>
3209
- </tbody>
3210
- </table>
3181
+ MaterialTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialTableComponent, selector: "mat-formio-table", usesInheritance: true, ngImport: i0, template: `
3182
+ <table class="mat-table" style="width: 100%;" [ngClass]="{'is-bordered' : instance.component.bordered}">
3183
+ <thead>
3184
+ <tr class="mat-header-row">
3185
+ <th *ngFor="let header of instance.component.header"
3186
+ class="mat-header-cell"
3187
+ >
3188
+ {{ instance.t(header) }}
3189
+ </th>
3190
+ </tr>
3191
+ </thead>
3192
+
3193
+ <tbody>
3194
+ <tr *ngFor="let row of instance.table; let i = index"
3195
+ role="row"
3196
+ class="mat-row"
3197
+ [ngClass]="{
3198
+ 'is-hover': instance.component.hover,
3199
+ 'is-striped': instance.component.striped && i % 2 === 0
3200
+ }"
3201
+ >
3202
+ <td *ngFor="let col of row"
3203
+ role="gridcell"
3204
+ class="mat-cell"
3205
+ [ngClass]="getTableColClasses()"
3206
+ >
3207
+ <ng-template #components></ng-template>
3208
+ </td>
3209
+ </tr>
3210
+ </tbody>
3211
+ </table>
3211
3212
  `, isInline: true, styles: [".mat-table.is-bordered{border:1px solid #ddd}.mat-row.is-hover:hover{background-color:#f5f5f5}.mat-cell{padding:8px}.mat-cell.is-condensed{padding:3px}.mat-row.is-striped{background-color:#eee}.mat-cell.center{text-align:center}.mat-cell.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
3212
3213
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialTableComponent, decorators: [{
3213
3214
  type: Component,
3214
- args: [{ selector: 'mat-formio-table', template: `
3215
- <table class="mat-table" style="width: 100%;" [ngClass]="{'is-bordered' : instance.component.bordered}">
3216
- <thead>
3217
- <tr class="mat-header-row">
3218
- <th *ngFor="let header of instance.component.header"
3219
- class="mat-header-cell"
3220
- >
3221
- {{ instance.t(header) }}
3222
- </th>
3223
- </tr>
3224
- </thead>
3225
-
3226
- <tbody>
3227
- <tr *ngFor="let row of instance.table; let i = index"
3228
- role="row"
3229
- class="mat-row"
3230
- [ngClass]="{
3231
- 'is-hover': instance.component.hover,
3232
- 'is-striped': instance.component.striped && i % 2 === 0
3233
- }"
3234
- >
3235
- <td *ngFor="let col of row"
3236
- role="gridcell"
3237
- class="mat-cell"
3238
- [ngClass]="getTableColClasses()"
3239
- >
3240
- <ng-template #components></ng-template>
3241
- </td>
3242
- </tr>
3243
- </tbody>
3244
- </table>
3215
+ args: [{ selector: 'mat-formio-table', template: `
3216
+ <table class="mat-table" style="width: 100%;" [ngClass]="{'is-bordered' : instance.component.bordered}">
3217
+ <thead>
3218
+ <tr class="mat-header-row">
3219
+ <th *ngFor="let header of instance.component.header"
3220
+ class="mat-header-cell"
3221
+ >
3222
+ {{ instance.t(header) }}
3223
+ </th>
3224
+ </tr>
3225
+ </thead>
3226
+
3227
+ <tbody>
3228
+ <tr *ngFor="let row of instance.table; let i = index"
3229
+ role="row"
3230
+ class="mat-row"
3231
+ [ngClass]="{
3232
+ 'is-hover': instance.component.hover,
3233
+ 'is-striped': instance.component.striped && i % 2 === 0
3234
+ }"
3235
+ >
3236
+ <td *ngFor="let col of row"
3237
+ role="gridcell"
3238
+ class="mat-cell"
3239
+ [ngClass]="getTableColClasses()"
3240
+ >
3241
+ <ng-template #components></ng-template>
3242
+ </td>
3243
+ </tr>
3244
+ </tbody>
3245
+ </table>
3245
3246
  `, styles: [".mat-table.is-bordered{border:1px solid #ddd}.mat-row.is-hover:hover{background-color:#f5f5f5}.mat-cell{padding:8px}.mat-cell.is-condensed{padding:3px}.mat-row.is-striped{background-color:#eee}.mat-cell.center{text-align:center}.mat-cell.right{text-align:right}\n"] }]
3246
3247
  }] });
3247
- TableComponent.MaterialComponent = MaterialTableComponent;
3248
-
3248
+ TableComponent.MaterialComponent = MaterialTableComponent;
3249
+
3249
3250
  class MaterialWizardComponent extends MaterialNestedComponent {
3250
3251
  constructor() {
3251
3252
  super(...arguments);
@@ -3292,39 +3293,39 @@ class MaterialWizardComponent extends MaterialNestedComponent {
3292
3293
  }
3293
3294
  }
3294
3295
  MaterialWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWizardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
3295
- MaterialWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialWizardComponent, selector: "mat-formio-wizard", viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
3296
- <mat-horizontal-stepper [linear]="isLinear" #stepper>
3297
- <mat-step *ngFor="let page of instance.pages" [label]="page.component.title">
3298
- <ng-template #components></ng-template>
3299
- <div class="navigation-button-row">
3300
- <button *ngIf="instance.hasButton('cancel')" mat-raised-button (click)="resetWizard()">Cancel</button>
3301
- <button *ngIf="instance.hasButton('previous')" mat-raised-button color="primary" (click)="prevPage()">Previous</button>
3302
- <button *ngIf="instance.hasButton('next')" mat-raised-button color="primary" (click)="nextPage()">Next</button>
3303
- <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
3304
- </div>
3305
- </mat-step>
3306
- </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i3$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper"] }] });
3296
+ MaterialWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialWizardComponent, selector: "mat-formio-wizard", viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
3297
+ <mat-horizontal-stepper [linear]="isLinear" #stepper>
3298
+ <mat-step *ngFor="let page of instance.pages" [label]="page.component.title">
3299
+ <ng-template #components></ng-template>
3300
+ <div class="navigation-button-row">
3301
+ <button *ngIf="instance.hasButton('cancel')" mat-raised-button (click)="resetWizard()">Cancel</button>
3302
+ <button *ngIf="instance.hasButton('previous')" mat-raised-button color="primary" (click)="prevPage()">Previous</button>
3303
+ <button *ngIf="instance.hasButton('next')" mat-raised-button color="primary" (click)="nextPage()">Next</button>
3304
+ <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
3305
+ </div>
3306
+ </mat-step>
3307
+ </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i3$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
3307
3308
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWizardComponent, decorators: [{
3308
3309
  type: Component,
3309
- args: [{ selector: 'mat-formio-wizard', template: `
3310
- <mat-horizontal-stepper [linear]="isLinear" #stepper>
3311
- <mat-step *ngFor="let page of instance.pages" [label]="page.component.title">
3312
- <ng-template #components></ng-template>
3313
- <div class="navigation-button-row">
3314
- <button *ngIf="instance.hasButton('cancel')" mat-raised-button (click)="resetWizard()">Cancel</button>
3315
- <button *ngIf="instance.hasButton('previous')" mat-raised-button color="primary" (click)="prevPage()">Previous</button>
3316
- <button *ngIf="instance.hasButton('next')" mat-raised-button color="primary" (click)="nextPage()">Next</button>
3317
- <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
3318
- </div>
3319
- </mat-step>
3310
+ args: [{ selector: 'mat-formio-wizard', template: `
3311
+ <mat-horizontal-stepper [linear]="isLinear" #stepper>
3312
+ <mat-step *ngFor="let page of instance.pages" [label]="page.component.title">
3313
+ <ng-template #components></ng-template>
3314
+ <div class="navigation-button-row">
3315
+ <button *ngIf="instance.hasButton('cancel')" mat-raised-button (click)="resetWizard()">Cancel</button>
3316
+ <button *ngIf="instance.hasButton('previous')" mat-raised-button color="primary" (click)="prevPage()">Previous</button>
3317
+ <button *ngIf="instance.hasButton('next')" mat-raised-button color="primary" (click)="nextPage()">Next</button>
3318
+ <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
3319
+ </div>
3320
+ </mat-step>
3320
3321
  </mat-horizontal-stepper>`, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"] }]
3321
3322
  }], propDecorators: { stepper: [{
3322
3323
  type: ViewChild,
3323
3324
  args: ['stepper', { static: true }]
3324
3325
  }] } });
3325
3326
  Wizard.MaterialComponent = MaterialWizardComponent;
3326
- Displays.addDisplay('wizard', Wizard);
3327
-
3327
+ Displays.addDisplay('wizard', Wizard);
3328
+
3328
3329
  const Components$1 = require('formiojs/components/Components').default;
3329
3330
  // Set the components.
3330
3331
  const components = {
@@ -3414,8 +3415,8 @@ function registerComponent(name, CompClass) {
3414
3415
  return setValue.call(this, ...args);
3415
3416
  });
3416
3417
  Components$1.addComponent(name, formIOComp);
3417
- }
3418
-
3418
+ }
3419
+
3419
3420
  const Components = require('formiojs/components/Components').default;
3420
3421
  const Formio = require('formiojs/Formio').default;
3421
3422
  const Form = require('formiojs/Form').default;
@@ -3424,8 +3425,8 @@ function initRenderer() {
3424
3425
  Components.setComponents(getComponents());
3425
3426
  Formio.Components = Components;
3426
3427
  Formio.Templates = {};
3427
- }
3428
-
3428
+ }
3429
+
3429
3430
  class FormioComponent extends FormioBaseComponent {
3430
3431
  constructor(resolver, cd, ngZone, config) {
3431
3432
  super(ngZone, config);
@@ -3460,35 +3461,35 @@ class FormioComponent extends FormioBaseComponent {
3460
3461
  }
3461
3462
  }
3462
3463
  FormioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormioComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.FormioAppConfig, optional: true }], target: i0.ɵɵFactoryTarget.Component });
3463
- FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: FormioComponent, selector: "mat-formio", viewQueries: [{ propertyName: "formioViewContainer", first: true, predicate: ["formio"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
3464
- <mat-spinner *ngIf="isLoading"></mat-spinner>
3465
- <div *ngIf="!this.options?.disableAlerts">
3466
- <div *ngFor="let alert of alerts.alerts"
3467
- class="alert alert-{{ alert.type }}"
3468
- role="alert"
3469
- >
3470
- {{ alert.message }}
3471
- </div>
3472
- </div>
3473
- <div fxLayout="column" fxLayoutGap="1em">
3474
- <ng-template #formio></ng-template>
3475
- </div>
3464
+ FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: FormioComponent, selector: "mat-formio", viewQueries: [{ propertyName: "formioViewContainer", first: true, predicate: ["formio"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
3465
+ <mat-spinner *ngIf="isLoading"></mat-spinner>
3466
+ <div *ngIf="!this.options?.disableAlerts">
3467
+ <div *ngFor="let alert of alerts.alerts"
3468
+ class="alert alert-{{ alert.type }}"
3469
+ role="alert"
3470
+ >
3471
+ {{ alert.message }}
3472
+ </div>
3473
+ </div>
3474
+ <div fxLayout="column" fxLayoutGap="1em">
3475
+ <ng-template #formio></ng-template>
3476
+ </div>
3476
3477
  `, isInline: true, styles: [".alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:.5rem;border:1px solid transparent;border-radius:.25rem}::ng-deep mat-card{box-sizing:border-box;-moz-box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }] });
3477
3478
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormioComponent, decorators: [{
3478
3479
  type: Component,
3479
- args: [{ selector: 'mat-formio', template: `
3480
- <mat-spinner *ngIf="isLoading"></mat-spinner>
3481
- <div *ngIf="!this.options?.disableAlerts">
3482
- <div *ngFor="let alert of alerts.alerts"
3483
- class="alert alert-{{ alert.type }}"
3484
- role="alert"
3485
- >
3486
- {{ alert.message }}
3487
- </div>
3488
- </div>
3489
- <div fxLayout="column" fxLayoutGap="1em">
3490
- <ng-template #formio></ng-template>
3491
- </div>
3480
+ args: [{ selector: 'mat-formio', template: `
3481
+ <mat-spinner *ngIf="isLoading"></mat-spinner>
3482
+ <div *ngIf="!this.options?.disableAlerts">
3483
+ <div *ngFor="let alert of alerts.alerts"
3484
+ class="alert alert-{{ alert.type }}"
3485
+ role="alert"
3486
+ >
3487
+ {{ alert.message }}
3488
+ </div>
3489
+ </div>
3490
+ <div fxLayout="column" fxLayoutGap="1em">
3491
+ <ng-template #formio></ng-template>
3492
+ </div>
3492
3493
  `, styles: [".alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:.5rem;border:1px solid transparent;border-radius:.25rem}::ng-deep mat-card{box-sizing:border-box;-moz-box-sizing:border-box}\n"] }]
3493
3494
  }], ctorParameters: function () {
3494
3495
  return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.FormioAppConfig, decorators: [{
@@ -3497,8 +3498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
3497
3498
  }, propDecorators: { formioViewContainer: [{
3498
3499
  type: ViewChild,
3499
3500
  args: ['formio', { static: true, read: ViewContainerRef }]
3500
- }] } });
3501
-
3501
+ }] } });
3502
+
3502
3503
  class NgxRenderMaterialFormsModule {
3503
3504
  constructor() {
3504
3505
  initRenderer();
@@ -3773,15 +3774,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
3773
3774
  MaterialWizardComponent
3774
3775
  ]
3775
3776
  }]
3776
- }], ctorParameters: function () { return []; } });
3777
-
3777
+ }], ctorParameters: function () { return []; } });
3778
+
3778
3779
  /*
3779
3780
  * Public API Surface of ngx-render-material-forms
3780
- */
3781
-
3781
+ */
3782
+
3782
3783
  /**
3783
3784
  * Generated bundle index. Do not edit.
3784
- */
3785
-
3786
- export { Components, Form, Formio, FormioComponent, MaterialButtonComponent, MaterialCheckboxComponent, MaterialColumnsComponent, MaterialComponent, MaterialContainerComponent, MaterialContentComponent, MaterialCurrencyComponent, MaterialDataGridComponent, MaterialDateComponent, MaterialDayComponent, MaterialEditGridComponent, MaterialEmailComponent, MaterialFieldsetComponent, MaterialHiddenComponent, MaterialHtmlComponent, MaterialNestedComponent, MaterialNumberComponent, MaterialPanelComponent, MaterialPasswordComponent, MaterialPhoneNumberComponent, MaterialRadioComponent, MaterialSelectBoxesComponent, MaterialSelectComponent, MaterialSignatureComponent, MaterialSurveyComponent, MaterialTableComponent, MaterialTabsComponent, MaterialTagsComponent, MaterialTextareaComponent, MaterialTextfieldComponent, MaterialTimeComponent, MaterialUrlComponent, MaterialWellComponent, NgxRenderMaterialFormsComponent, NgxRenderMaterialFormsModule, NgxRenderMaterialFormsService, Utils, initRenderer, registerComponent };
3787
- //# sourceMappingURL=ngx-render-material-forms.mjs.map
3785
+ */
3786
+
3787
+ export { Components, Form, Formio, FormioComponent, MaterialButtonComponent, MaterialCheckboxComponent, MaterialColumnsComponent, MaterialComponent, MaterialContainerComponent, MaterialContentComponent, MaterialCurrencyComponent, MaterialDataGridComponent, MaterialDateComponent, MaterialDayComponent, MaterialEditGridComponent, MaterialEmailComponent, MaterialFieldsetComponent, MaterialHiddenComponent, MaterialHtmlComponent, MaterialNestedComponent, MaterialNumberComponent, MaterialPanelComponent, MaterialPasswordComponent, MaterialPhoneNumberComponent, MaterialRadioComponent, MaterialSelectBoxesComponent, MaterialSelectComponent, MaterialSignatureComponent, MaterialSurveyComponent, MaterialTableComponent, MaterialTabsComponent, MaterialTagsComponent, MaterialTextareaComponent, MaterialTextfieldComponent, MaterialTimeComponent, MaterialUrlComponent, MaterialWellComponent, NgxRenderMaterialFormsComponent, NgxRenderMaterialFormsModule, NgxRenderMaterialFormsService, Utils, initRenderer, registerComponent };
3788
+ //# sourceMappingURL=ngx-render-material-forms.mjs.map