ngx-render-material-forms 0.0.1

package/esm2020/lib/components/select/select.component.mjs

@@ -0,0 +1,186 @@
+import { Component, ViewChild } from '@angular/core';
+import { MaterialComponent } from '../MaterialComponent';
+import SelectComponent from 'formiojs/components/select/Select.js';
+import _ from 'lodash';
+import { FormControl } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/material/form-field";
+import * as i4 from "@angular/material/select";
+import * as i5 from "@angular/material/core";
+import * as i6 from "@angular/flex-layout/flex";
+import * as i7 from "ngx-mat-select-search";
+import * as i8 from "../formio-form-field/formio-form-field.component";
+import * as i9 from "../label/label.component";
+export class MaterialSelectComponent extends MaterialComponent {
+    constructor() {
+        super(...arguments);
+        this.websiteMultiCtrl = new FormControl();
+        this.websiteMultiFilterCtrl = new FormControl();
+        this._onDestroy = new Subject();
+    }
+    filterWebsiteMulti() {
+        if (!this.selectOptions) {
+            return;
+        }
+        let search = this.websiteMultiFilterCtrl.value;
+        search = search.toLowerCase();
+        this.filteredOptions = this.selectOptions.then((options) => {
+            const filtered = options.filter((option) => option.label.toLowerCase().indexOf(search) !== -1);
+            this.filteredOptionsLength = filtered.length;
+            return filtered;
+        });
+    }
+    ngOnDestroy() {
+        this._onDestroy.next('');
+        this._onDestroy.complete();
+    }
+    /*End*/
+    setInstance(instance) {
+        super.setInstance(instance);
+        this.instance.triggerUpdate();
+    }
+    ngOnInit() {
+        /*new logic */
+        //this.websiteMultiCtrl.setValue(this.websites[1]);
+        //this.filteredOptions.next(this.websites.slice());
+        this.websiteMultiFilterCtrl.valueChanges
+            .pipe(takeUntil(this._onDestroy))
+            .subscribe(() => {
+            this.filterWebsiteMulti();
+        });
+        /*End */
+        this.selectOptions = new Promise((resolve) => {
+            this.selectOptionsResolve = resolve;
+        });
+        this.selectOptions.then((options) => {
+            this.filteredOptionsLength = options.length;
+        });
+        this.filteredOptions = this.selectOptions;
+    }
+    // onFilter(value) {
+    //   this.filteredOptions = this.selectOptions.then((options) => {
+    //     const filtered = options.filter((option) => option.label.toLowerCase().indexOf(value.toLowerCase()) !== -1);
+    //     this.filteredOptionsLength = filtered.length;
+    //     return filtered;
+    //   })
+    // }
+    compareObjects(o1, o2) {
+        return _.isEqual(o1, o2);
+    }
+}
+MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <mat-form-field fxFill>
+
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+
+        <span *ngIf="instance.component.prefix" matPrefix>
+          {{ instance.component.prefix }}&nbsp;
+        </span>
+        <mat-select
+                [multiple]="instance.component.multiple"
+                [formControl]="control"
+                [placeholder]="instance.component.placeholder"
+                (selectionChange)="onChange()"
+                [compareWith]="compareObjects"
+        >
+
+        <mat-option>
+        <ngx-mat-select-search placeholderLabel="Find country..." [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
+      </mat-option>
+      
+      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
+        <span [innerHTML]="option.label"></span>
+      </mat-option>
+
+          <!-- <div class="mat-option">
+            <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
+          </div> -->
+          <mat-option *ngIf="!filteredOptionsLength" disabled>
+            <span>Nothing was found</span>
+          </mat-option>
+          <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
+            <span [innerHTML]="option.label"></span>
+          </mat-option> -->
+        </mat-select>
+
+        <span *ngIf="instance.component.suffix" matSuffix>
+          {{ instance.component.suffix }}
+        </span>
+        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+      </mat-form-field>
+    </ng-template>
+  `, 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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i6.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: i8.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i9.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mat-formio-select',
+                    template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <mat-form-field fxFill>
+
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+
+        <span *ngIf="instance.component.prefix" matPrefix>
+          {{ instance.component.prefix }}&nbsp;
+        </span>
+        <mat-select
+                [multiple]="instance.component.multiple"
+                [formControl]="control"
+                [placeholder]="instance.component.placeholder"
+                (selectionChange)="onChange()"
+                [compareWith]="compareObjects"
+        >
+
+        <mat-option>
+        <ngx-mat-select-search placeholderLabel="Find country..." [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
+      </mat-option>
+      
+      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
+        <span [innerHTML]="option.label"></span>
+      </mat-option>
+
+          <!-- <div class="mat-option">
+            <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
+          </div> -->
+          <mat-option *ngIf="!filteredOptionsLength" disabled>
+            <span>Nothing was found</span>
+          </mat-option>
+          <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
+            <span [innerHTML]="option.label"></span>
+          </mat-option> -->
+        </mat-select>
+
+        <span *ngIf="instance.component.suffix" matSuffix>
+          {{ instance.component.suffix }}
+        </span>
+        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+      </mat-form-field>
+    </ng-template>
+  `
+                }]
+        }], propDecorators: { multiSelect: [{
+                type: ViewChild,
+                args: ['multiSelect', { static: true }]
+            }] } });
+SelectComponent.MaterialComponent = MaterialSelectComponent;
+// Make sure we detect changes when new items make their way into the select dropdown.
+const setItems = SelectComponent.prototype.setItems;
+SelectComponent.prototype.setItems = function (...args) {
+    setItems.call(this, ...args);
+    if (this.materialComponent && this.materialComponent.selectOptionsResolve) {
+        this.materialComponent.selectOptionsResolve(this.selectOptions);
+    }
+};
+export { SelectComponent };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1yZW5kZXItbWF0ZXJpYWwtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFxQixTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDekQsT0FBTyxlQUFlLE1BQU0sc0NBQXNDLENBQUM7QUFDbkUsT0FBTyxDQUFDLE1BQU0sUUFBUSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQWlCLE9BQU8sRUFBUSxTQUFTLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7Ozs7Ozs7O0FBb0QvRCxNQUFNLE9BQU8sdUJBQXdCLFNBQVEsaUJBQWlCO0lBakQ5RDs7UUEwRFMscUJBQWdCLEdBQWdCLElBQUksV0FBVyxFQUFFLENBQUM7UUFDbEQsMkJBQXNCLEdBQWdCLElBQUksV0FBVyxFQUFFLENBQUM7UUFHckQsZUFBVSxHQUFHLElBQUksT0FBTyxFQUFFLENBQUM7S0EwRHRDO0lBeERDLGtCQUFrQjtRQUNoQixJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN2QixPQUFPO1NBQ1I7UUFDRCxJQUFJLE1BQU0sR0FBRyxJQUFJLENBQUMsc0JBQXNCLENBQUMsS0FBSyxDQUFDO1FBQy9DLE1BQU0sR0FBRyxNQUFNLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDOUIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFO1lBQ3pELE1BQU0sUUFBUSxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDL0YsSUFBSSxDQUFDLHFCQUFxQixHQUFHLFFBQVEsQ0FBQyxNQUFNLENBQUM7WUFDN0MsT0FBTyxRQUFRLENBQUM7UUFDbEIsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0lBQ0QsV0FBVztRQUNULElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUdELE9BQU87SUFDUCxXQUFXLENBQUMsUUFBYTtRQUN2QixLQUFLLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzVCLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDaEMsQ0FBQztJQUVELFFBQVE7UUFDTixjQUFjO1FBQ2QsbURBQW1EO1FBQ25ELG1EQUFtRDtRQUVuRCxJQUFJLENBQUMsc0JBQXNCLENBQUMsWUFBWTthQUNyQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQzthQUNoQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7UUFDNUIsQ0FBQyxDQUFDLENBQUM7UUFDTCxRQUFRO1FBQ1IsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLE9BQU8sQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFO1lBQzNDLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxPQUFPLENBQUM7UUFDdEMsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFO1lBQ2xDLElBQUksQ0FBQyxxQkFBcUIsR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDO1FBQzlDLENBQUMsQ0FBQyxDQUFBO1FBRUYsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQzVDLENBQUM7SUFFRCxvQkFBb0I7SUFDcEIsa0VBQWtFO0lBQ2xFLG1IQUFtSDtJQUNuSCxvREFBb0Q7SUFDcEQsdUJBQXVCO0lBQ3ZCLE9BQU87SUFDUCxJQUFJO0lBRUosY0FBYyxDQUFDLEVBQU8sRUFBRSxFQUFPO1FBQzdCLE9BQU8sQ0FBQyxDQUFDLE9BQU8sQ0FBQyxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDM0IsQ0FBQzs7b0hBdEVVLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLDBNQS9DeEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTZDVDsyRkFFVSx1QkFBdUI7a0JBakRuQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxtQkFBbUI7b0JBQzdCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkNUO2lCQUNGOzhCQWE2QyxXQUFXO3NCQUF0RCxTQUFTO3VCQUFDLGFBQWEsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7O0FBNEQ1QyxlQUFlLENBQUMsaUJBQWlCLEdBQUcsdUJBQXVCLENBQUM7QUFFNUQsc0ZBQXNGO0FBQ3RGLE1BQU0sUUFBUSxHQUFHLGVBQWUsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDO0FBQ3BELGVBQWUsQ0FBQyxTQUFTLENBQUMsUUFBUSxHQUFHLFVBQVUsR0FBRyxJQUFJO0lBQ3BELFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEdBQUcsSUFBSSxDQUFDLENBQUM7SUFDN0IsSUFBSSxJQUFJLENBQUMsaUJBQWlCLElBQUksSUFBSSxDQUFDLGlCQUFpQixDQUFDLG9CQUFvQixFQUFFO1FBQ3pFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7S0FDakU7QUFDSCxDQUFDLENBQUM7QUFFRixPQUFPLEVBQUUsZUFBZSxFQUFFLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIE9uRGVzdHJveSwgT25Jbml0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdGVyaWFsQ29tcG9uZW50IH0gZnJvbSAnLi4vTWF0ZXJpYWxDb21wb25lbnQnO1xuaW1wb3J0IFNlbGVjdENvbXBvbmVudCBmcm9tICdmb3JtaW9qcy9jb21wb25lbnRzL3NlbGVjdC9TZWxlY3QuanMnO1xuaW1wb3J0IF8gZnJvbSAnbG9kYXNoJztcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgUmVwbGF5U3ViamVjdCwgU3ViamVjdCwgdGFrZSwgdGFrZVVudGlsIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBNYXRTZWxlY3QgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zZWxlY3QnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtYXQtZm9ybWlvLXNlbGVjdCcsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1mb3JtaW8tZm9ybS1maWVsZCBbaW5zdGFuY2VdPVwiaW5zdGFuY2VcIiBbY29tcG9uZW50VGVtcGxhdGVdPVwiY29tcG9uZW50VGVtcGxhdGVcIj48L21hdC1mb3JtaW8tZm9ybS1maWVsZD5cbiAgICA8bmctdGVtcGxhdGUgI2NvbXBvbmVudFRlbXBsYXRlIGxldC1oYXNMYWJlbD5cbiAgICAgIDxtYXQtZm9ybS1maWVsZCBmeEZpbGw+XG5cbiAgICAgICAgPG1hdC1sYWJlbCAqbmdJZj1cImhhc0xhYmVsXCI+XG4gICAgICAgICAgPHNwYW4gW2luc3RhbmNlXT1cImluc3RhbmNlXCIgbWF0Rm9ybWlvTGFiZWw+PC9zcGFuPlxuICAgICAgICA8L21hdC1sYWJlbD5cblxuICAgICAgICA8c3BhbiAqbmdJZj1cImluc3RhbmNlLmNvbXBvbmVudC5wcmVmaXhcIiBtYXRQcmVmaXg+XG4gICAgICAgICAge3sgaW5zdGFuY2UuY29tcG9uZW50LnByZWZpeCB9fSZuYnNwO1xuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxtYXQtc2VsZWN0XG4gICAgICAgICAgICAgICAgW211bHRpcGxlXT1cImluc3RhbmNlLmNvbXBvbmVudC5tdWx0aXBsZVwiXG4gICAgICAgICAgICAgICAgW2Zvcm1Db250cm9sXT1cImNvbnRyb2xcIlxuICAgICAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJpbnN0YW5jZS5jb21wb25lbnQucGxhY2Vob2xkZXJcIlxuICAgICAgICAgICAgICAgIChzZWxlY3Rpb25DaGFuZ2UpPVwib25DaGFuZ2UoKVwiXG4gICAgICAgICAgICAgICAgW2NvbXBhcmVXaXRoXT1cImNvbXBhcmVPYmplY3RzXCJcbiAgICAgICAgPlxuXG4gICAgICAgIDxtYXQtb3B0aW9uPlxuICAgICAgICA8bmd4LW1hdC1zZWxlY3Qtc2VhcmNoIHBsYWNlaG9sZGVyTGFiZWw9XCJGaW5kIGNvdW50cnkuLi5cIiBbZm9ybUNvbnRyb2xdPVwid2Vic2l0ZU11bHRpRmlsdGVyQ3RybFwiPjwvbmd4LW1hdC1zZWxlY3Qtc2VhcmNoPlxuICAgICAgPC9tYXQtb3B0aW9uPlxuICAgICAgXG4gICAgICA8bWF0LW9wdGlvbiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGZpbHRlcmVkT3B0aW9ucyB8IGFzeW5jXCIgW3ZhbHVlXT1cIm9wdGlvbi52YWx1ZVwiPlxuICAgICAgICA8c3BhbiBbaW5uZXJIVE1MXT1cIm9wdGlvbi5sYWJlbFwiPjwvc3Bhbj5cbiAgICAgIDwvbWF0LW9wdGlvbj5cblxuICAgICAgICAgIDwhLS0gPGRpdiBjbGFzcz1cIm1hdC1vcHRpb25cIj5cbiAgICAgICAgICAgIDxpbnB1dCBjbGFzcz1cIm1hdC1pbnB1dC1lbGVtZW50XCIgcGxhY2Vob2xkZXI9XCJUeXBlIHRvIHNlYXJjaCB0aGUgcmlza1wiIChpbnB1dCk9XCJvbkZpbHRlcigkZXZlbnQudGFyZ2V0LnZhbHVlKVwiPlxuICAgICAgICAgIDwvZGl2PiAtLT5cbiAgICAgICAgICA8bWF0LW9wdGlvbiAqbmdJZj1cIiFmaWx0ZXJlZE9wdGlvbnNMZW5ndGhcIiBkaXNhYmxlZD5cbiAgICAgICAgICAgIDxzcGFuPk5vdGhpbmcgd2FzIGZvdW5kPC9zcGFuPlxuICAgICAgICAgIDwvbWF0LW9wdGlvbj5cbiAgICAgICAgICA8IS0tIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBvcHRpb24gb2YgZmlsdGVyZWRPcHRpb25zIHwgYXN5bmNcIiBbdmFsdWVdPVwib3B0aW9uLnZhbHVlXCI+XG4gICAgICAgICAgICA8c3BhbiBbaW5uZXJIVE1MXT1cIm9wdGlvbi5sYWJlbFwiPjwvc3Bhbj5cbiAgICAgICAgICA8L21hdC1vcHRpb24+IC0tPlxuICAgICAgICA8L21hdC1zZWxlY3Q+XG5cbiAgICAgICAgPHNwYW4gKm5nSWY9XCJpbnN0YW5jZS5jb21wb25lbnQuc3VmZml4XCIgbWF0U3VmZml4PlxuICAgICAgICAgIHt7IGluc3RhbmNlLmNvbXBvbmVudC5zdWZmaXggfX1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8bWF0LWVycm9yICpuZ0lmPVwiaW5zdGFuY2UuZXJyb3JcIj57eyBpbnN0YW5jZS5lcnJvci5tZXNzYWdlIH19PC9tYXQtZXJyb3I+XG4gICAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIGBcbn0pXG5leHBvcnQgY2xhc3MgTWF0ZXJpYWxTZWxlY3RDb21wb25lbnQgZXh0ZW5kcyBNYXRlcmlhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcblxuICBzZWxlY3RPcHRpb25zOiBQcm9taXNlPGFueVtdPjtcbiAgZmlsdGVyZWRPcHRpb25zOiBQcm9taXNlPGFueVtdPjtcblxuICBmaWx0ZXJlZE9wdGlvbnNMZW5ndGg6IG51bWJlcjtcblxuICBzZWxlY3RPcHRpb25zUmVzb2x2ZTogYW55O1xuXG4gIHB1YmxpYyB3ZWJzaXRlTXVsdGlDdHJsOiBGb3JtQ29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuICBwdWJsaWMgd2Vic2l0ZU11bHRpRmlsdGVyQ3RybDogRm9ybUNvbnRyb2wgPSBuZXcgRm9ybUNvbnRyb2woKTtcblxuICBAVmlld0NoaWxkKCdtdWx0aVNlbGVjdCcsIHsgc3RhdGljOiB0cnVlIH0pIG11bHRpU2VsZWN0OiBNYXRTZWxlY3Q7XG4gIHByb3RlY3RlZCBfb25EZXN0cm95ID0gbmV3IFN1YmplY3QoKTtcblxuICBmaWx0ZXJXZWJzaXRlTXVsdGkoKSB7XG4gICAgaWYgKCF0aGlzLnNlbGVjdE9wdGlvbnMpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgbGV0IHNlYXJjaCA9IHRoaXMud2Vic2l0ZU11bHRpRmlsdGVyQ3RybC52YWx1ZTtcbiAgICBzZWFyY2ggPSBzZWFyY2gudG9Mb3dlckNhc2UoKTtcbiAgICB0aGlzLmZpbHRlcmVkT3B0aW9ucyA9IHRoaXMuc2VsZWN0T3B0aW9ucy50aGVuKChvcHRpb25zKSA9PiB7XG4gICAgICBjb25zdCBmaWx0ZXJlZCA9IG9wdGlvbnMuZmlsdGVyKChvcHRpb24pID0+IG9wdGlvbi5sYWJlbC50b0xvd2VyQ2FzZSgpLmluZGV4T2Yoc2VhcmNoKSAhPT0gLTEpO1xuICAgICAgdGhpcy5maWx0ZXJlZE9wdGlvbnNMZW5ndGggPSBmaWx0ZXJlZC5sZW5ndGg7XG4gICAgICByZXR1cm4gZmlsdGVyZWQ7XG4gICAgfSlcbiAgfVxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLl9vbkRlc3Ryb3kubmV4dCgnJyk7XG4gICAgdGhpcy5fb25EZXN0cm95LmNvbXBsZXRlKCk7XG4gIH1cblxuXG4gIC8qRW5kKi9cbiAgc2V0SW5zdGFuY2UoaW5zdGFuY2U6IGFueSkge1xuICAgIHN1cGVyLnNldEluc3RhbmNlKGluc3RhbmNlKTtcbiAgICB0aGlzLmluc3RhbmNlLnRyaWdnZXJVcGRhdGUoKTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIC8qbmV3IGxvZ2ljICovXG4gICAgLy90aGlzLndlYnNpdGVNdWx0aUN0cmwuc2V0VmFsdWUodGhpcy53ZWJzaXRlc1sxXSk7XG4gICAgLy90aGlzLmZpbHRlcmVkT3B0aW9ucy5uZXh0KHRoaXMud2Vic2l0ZXMuc2xpY2UoKSk7XG5cbiAgICB0aGlzLndlYnNpdGVNdWx0aUZpbHRlckN0cmwudmFsdWVDaGFuZ2VzXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5fb25EZXN0cm95KSlcbiAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICB0aGlzLmZpbHRlcldlYnNpdGVNdWx0aSgpO1xuICAgICAgfSk7XG4gICAgLypFbmQgKi9cbiAgICB0aGlzLnNlbGVjdE9wdGlvbnMgPSBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4ge1xuICAgICAgdGhpcy5zZWxlY3RPcHRpb25zUmVzb2x2ZSA9IHJlc29sdmU7XG4gICAgfSk7XG4gICAgdGhpcy5zZWxlY3RPcHRpb25zLnRoZW4oKG9wdGlvbnMpID0+IHtcbiAgICAgIHRoaXMuZmlsdGVyZWRPcHRpb25zTGVuZ3RoID0gb3B0aW9ucy5sZW5ndGg7XG4gICAgfSlcblxuICAgIHRoaXMuZmlsdGVyZWRPcHRpb25zID0gdGhpcy5zZWxlY3RPcHRpb25zO1xuICB9XG5cbiAgLy8gb25GaWx0ZXIodmFsdWUpIHtcbiAgLy8gICB0aGlzLmZpbHRlcmVkT3B0aW9ucyA9IHRoaXMuc2VsZWN0T3B0aW9ucy50aGVuKChvcHRpb25zKSA9PiB7XG4gIC8vICAgICBjb25zdCBmaWx0ZXJlZCA9IG9wdGlvbnMuZmlsdGVyKChvcHRpb24pID0+IG9wdGlvbi5sYWJlbC50b0xvd2VyQ2FzZSgpLmluZGV4T2YodmFsdWUudG9Mb3dlckNhc2UoKSkgIT09IC0xKTtcbiAgLy8gICAgIHRoaXMuZmlsdGVyZWRPcHRpb25zTGVuZ3RoID0gZmlsdGVyZWQubGVuZ3RoO1xuICAvLyAgICAgcmV0dXJuIGZpbHRlcmVkO1xuICAvLyAgIH0pXG4gIC8vIH1cblxuICBjb21wYXJlT2JqZWN0cyhvMTogYW55LCBvMjogYW55KTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIF8uaXNFcXVhbChvMSwgbzIpO1xuICB9XG59XG5TZWxlY3RDb21wb25lbnQuTWF0ZXJpYWxDb21wb25lbnQgPSBNYXRlcmlhbFNlbGVjdENvbXBvbmVudDtcblxuLy8gTWFrZSBzdXJlIHdlIGRldGVjdCBjaGFuZ2VzIHdoZW4gbmV3IGl0ZW1zIG1ha2UgdGhlaXIgd2F5IGludG8gdGhlIHNlbGVjdCBkcm9wZG93bi5cbmNvbnN0IHNldEl0ZW1zID0gU2VsZWN0Q29tcG9uZW50LnByb3RvdHlwZS5zZXRJdGVtcztcblNlbGVjdENvbXBvbmVudC5wcm90b3R5cGUuc2V0SXRlbXMgPSBmdW5jdGlvbiAoLi4uYXJncykge1xuICBzZXRJdGVtcy5jYWxsKHRoaXMsIC4uLmFyZ3MpO1xuICBpZiAodGhpcy5tYXRlcmlhbENvbXBvbmVudCAmJiB0aGlzLm1hdGVyaWFsQ29tcG9uZW50LnNlbGVjdE9wdGlvbnNSZXNvbHZlKSB7XG4gICAgdGhpcy5tYXRlcmlhbENvbXBvbmVudC5zZWxlY3RPcHRpb25zUmVzb2x2ZSh0aGlzLnNlbGVjdE9wdGlvbnMpO1xuICB9XG59O1xuXG5leHBvcnQgeyBTZWxlY3RDb21wb25lbnQgfTtcbiJdfQ==

package/esm2020/lib/components/selectboxes/selectboxes.component.mjs

@@ -0,0 +1,102 @@
+import { Component } from '@angular/core';
+import { MaterialRadioComponent } from '../radio/radio.component';
+import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/material/form-field";
+import * as i4 from "@angular/material/checkbox";
+import * as i5 from "@angular/flex-layout/flex";
+import * as i6 from "../formio-form-field/formio-form-field.component";
+import * as i7 from "../label/label.component";
+export class MaterialSelectBoxesComponent extends MaterialRadioComponent {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this.disabled = false;
+    }
+    setInstance(instance) {
+        instance.component.values.forEach((option) => {
+            this.value[option.value] = false;
+        });
+        super.setInstance(instance);
+    }
+    getValue() {
+        return this.value;
+    }
+    setValue(value) {
+        const normalizedValue = this.instance.normalizeValue(value);
+        for (const prop in normalizedValue) {
+            if (normalizedValue.hasOwnProperty(prop)) {
+                this.value[prop] = normalizedValue[prop];
+            }
+        }
+    }
+    setDisabled(disabled) {
+        this.disabled = !!disabled;
+    }
+    onChange() {
+        this.instance.updateValue(this.getValue(), { modified: true });
+        this.instance.triggerChange({ modified: true });
+    }
+}
+MaterialSelectBoxesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialSelectBoxesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MaterialSelectBoxesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: MaterialSelectBoxesComponent, selector: "mat-formio-selectboxes", usesInheritance: true, ngImport: i0, template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <div fxLayout="column">
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+        <div
+                fxFlexOffset="10px"
+                fxLayout="{{ getLayout() }}"
+                fxLayoutGap="10px"
+        >
+          <mat-checkbox
+                  *ngFor="let option of instance.component.values"
+                  (change)="onChange()"
+                  [(ngModel)]="value[option.value]"
+                  [disabled]="disabled"
+          >
+            {{ option.label }}
+          </mat-checkbox>
+          <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+        </div>
+      </div>
+    </ng-template>
+  `, 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.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: i6.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i7.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialSelectBoxesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mat-formio-selectboxes',
+                    template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <div fxLayout="column">
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+        <div
+                fxFlexOffset="10px"
+                fxLayout="{{ getLayout() }}"
+                fxLayoutGap="10px"
+        >
+          <mat-checkbox
+                  *ngFor="let option of instance.component.values"
+                  (change)="onChange()"
+                  [(ngModel)]="value[option.value]"
+                  [disabled]="disabled"
+          >
+            {{ option.label }}
+          </mat-checkbox>
+          <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+        </div>
+      </div>
+    </ng-template>
+  `
+                }]
+        }] });
+SelectBoxesComponent.MaterialComponent = MaterialSelectBoxesComponent;
+export { SelectBoxesComponent };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0Ym94ZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJlbmRlci1tYXRlcmlhbC1mb3Jtcy9zcmMvbGliL2NvbXBvbmVudHMvc2VsZWN0Ym94ZXMvc2VsZWN0Ym94ZXMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDbEUsT0FBTyxvQkFBb0IsTUFBTSxnREFBZ0QsQ0FBQzs7Ozs7Ozs7O0FBNkJsRixNQUFNLE9BQU8sNEJBQTZCLFNBQVEsc0JBQXNCO0lBNUJ4RTs7UUE2QlMsVUFBSyxHQUFRLEVBQUUsQ0FBQztRQUNoQixhQUFRLEdBQUcsS0FBSyxDQUFDO0tBOEJ6QjtJQTVCQyxXQUFXLENBQUMsUUFBUTtRQUNsQixRQUFRLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRTtZQUMzQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxLQUFLLENBQUM7UUFDbkMsQ0FBQyxDQUFDLENBQUM7UUFDSCxLQUFLLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFFRCxRQUFRO1FBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBSztRQUNaLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzVELEtBQUssTUFBTSxJQUFJLElBQUksZUFBZSxFQUFFO1lBQ2xDLElBQUksZUFBZSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRTtnQkFDeEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxlQUFlLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDMUM7U0FDRjtJQUNILENBQUM7SUFFRCxXQUFXLENBQUMsUUFBUTtRQUNsQixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsQ0FBQyxRQUFRLENBQUM7SUFDN0IsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQUUsRUFBQyxRQUFRLEVBQUUsSUFBSSxFQUFDLENBQUMsQ0FBQztRQUM3RCxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxFQUFDLFFBQVEsRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDO0lBQ2hELENBQUM7O3lIQS9CVSw0QkFBNEI7NkdBQTVCLDRCQUE0QixxRkExQjdCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3QlQ7MkZBRVUsNEJBQTRCO2tCQTVCeEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsd0JBQXdCO29CQUNsQyxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXdCVDtpQkFDRjs7QUFrQ0Qsb0JBQW9CLENBQUMsaUJBQWlCLEdBQUcsNEJBQTRCLENBQUM7QUFDdEUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdGVyaWFsUmFkaW9Db21wb25lbnQgfSBmcm9tICcuLi9yYWRpby9yYWRpby5jb21wb25lbnQnO1xuaW1wb3J0IFNlbGVjdEJveGVzQ29tcG9uZW50IGZyb20gJ2Zvcm1pb2pzL2NvbXBvbmVudHMvc2VsZWN0Ym94ZXMvU2VsZWN0Qm94ZXMuanMnO1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWF0LWZvcm1pby1zZWxlY3Rib3hlcycsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1mb3JtaW8tZm9ybS1maWVsZCBbaW5zdGFuY2VdPVwiaW5zdGFuY2VcIiBbY29tcG9uZW50VGVtcGxhdGVdPVwiY29tcG9uZW50VGVtcGxhdGVcIj48L21hdC1mb3JtaW8tZm9ybS1maWVsZD5cbiAgICA8bmctdGVtcGxhdGUgI2NvbXBvbmVudFRlbXBsYXRlIGxldC1oYXNMYWJlbD5cbiAgICAgIDxkaXYgZnhMYXlvdXQ9XCJjb2x1bW5cIj5cbiAgICAgICAgPG1hdC1sYWJlbCAqbmdJZj1cImhhc0xhYmVsXCI+XG4gICAgICAgICAgPHNwYW4gW2luc3RhbmNlXT1cImluc3RhbmNlXCIgbWF0Rm9ybWlvTGFiZWw+PC9zcGFuPlxuICAgICAgICA8L21hdC1sYWJlbD5cbiAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgIGZ4RmxleE9mZnNldD1cIjEwcHhcIlxuICAgICAgICAgICAgICAgIGZ4TGF5b3V0PVwie3sgZ2V0TGF5b3V0KCkgfX1cIlxuICAgICAgICAgICAgICAgIGZ4TGF5b3V0R2FwPVwiMTBweFwiXG4gICAgICAgID5cbiAgICAgICAgICA8bWF0LWNoZWNrYm94XG4gICAgICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGluc3RhbmNlLmNvbXBvbmVudC52YWx1ZXNcIlxuICAgICAgICAgICAgICAgICAgKGNoYW5nZSk9XCJvbkNoYW5nZSgpXCJcbiAgICAgICAgICAgICAgICAgIFsobmdNb2RlbCldPVwidmFsdWVbb3B0aW9uLnZhbHVlXVwiXG4gICAgICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIHt7IG9wdGlvbi5sYWJlbCB9fVxuICAgICAgICAgIDwvbWF0LWNoZWNrYm94PlxuICAgICAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJpbnN0YW5jZS5lcnJvclwiPnt7IGluc3RhbmNlLmVycm9yLm1lc3NhZ2UgfX08L21hdC1lcnJvcj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIE1hdGVyaWFsU2VsZWN0Qm94ZXNDb21wb25lbnQgZXh0ZW5kcyBNYXRlcmlhbFJhZGlvQ29tcG9uZW50IHtcbiAgcHVibGljIHZhbHVlOiBhbnkgPSB7fTtcbiAgcHVibGljIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgc2V0SW5zdGFuY2UoaW5zdGFuY2UpIHtcbiAgICBpbnN0YW5jZS5jb21wb25lbnQudmFsdWVzLmZvckVhY2goKG9wdGlvbikgPT4ge1xuICAgICAgdGhpcy52YWx1ZVtvcHRpb24udmFsdWVdID0gZmFsc2U7XG4gICAgfSk7XG4gICAgc3VwZXIuc2V0SW5zdGFuY2UoaW5zdGFuY2UpO1xuICB9XG5cbiAgZ2V0VmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMudmFsdWU7XG4gIH1cblxuICBzZXRWYWx1ZSh2YWx1ZSkge1xuICAgIGNvbnN0IG5vcm1hbGl6ZWRWYWx1ZSA9IHRoaXMuaW5zdGFuY2Uubm9ybWFsaXplVmFsdWUodmFsdWUpO1xuICAgIGZvciAoY29uc3QgcHJvcCBpbiBub3JtYWxpemVkVmFsdWUpIHtcbiAgICAgIGlmIChub3JtYWxpemVkVmFsdWUuaGFzT3duUHJvcGVydHkocHJvcCkpIHtcbiAgICAgICAgdGhpcy52YWx1ZVtwcm9wXSA9IG5vcm1hbGl6ZWRWYWx1ZVtwcm9wXTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBzZXREaXNhYmxlZChkaXNhYmxlZCkge1xuICAgIHRoaXMuZGlzYWJsZWQgPSAhIWRpc2FibGVkO1xuICB9XG5cbiAgb25DaGFuZ2UoKSB7XG4gICAgdGhpcy5pbnN0YW5jZS51cGRhdGVWYWx1ZSh0aGlzLmdldFZhbHVlKCksIHttb2RpZmllZDogdHJ1ZX0pO1xuICAgIHRoaXMuaW5zdGFuY2UudHJpZ2dlckNoYW5nZSh7bW9kaWZpZWQ6IHRydWV9KTtcbiAgfVxufVxuU2VsZWN0Qm94ZXNDb21wb25lbnQuTWF0ZXJpYWxDb21wb25lbnQgPSBNYXRlcmlhbFNlbGVjdEJveGVzQ29tcG9uZW50O1xuZXhwb3J0IHsgU2VsZWN0Qm94ZXNDb21wb25lbnQgfTtcbiJdfQ==

package/esm2020/lib/components/signature/signature.component.mjs

@@ -0,0 +1,103 @@
+import { Component, ViewChild } from '@angular/core';
+import { MaterialComponent } from '../MaterialComponent';
+import SignatureComponent from 'formiojs/components/signature/Signature.js';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/material/form-field";
+import * as i3 from "@angular/material/button";
+import * as i4 from "@angular/material/icon";
+import * as i5 from "@angular/flex-layout/flex";
+import * as i6 from "@angular/flex-layout/extended";
+import * as i7 from "../formio-form-field/formio-form-field.component";
+import * as i8 from "../label/label.component";
+export class MaterialSignatureComponent extends MaterialComponent {
+    renderComponents() {
+        if (this.signatureElement) {
+            this.instance.attach(this.signatureElement.nativeElement);
+        }
+    }
+    ngAfterViewInit() {
+        this.renderComponents();
+    }
+}
+MaterialSignatureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialSignatureComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MaterialSignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: MaterialSignatureComponent, selector: "mat-formio-signature", viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <div #signature>
+
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+
+        <button mat-icon-button [ngStyle]="{position: 'absolute'}" ref="refresh">
+          <mat-icon>refresh</mat-icon>
+        </button>
+
+        <div class="signature-pad-body"
+             [ngStyle]="{width: instance.component.width, height: instance.component.height, padding: 0, margin: 0}"
+             [attr.tabindex]="instance.component.tabindex || 0"
+             ref="padBody"
+        >
+          <canvas class="signature-pad-canvas"
+                  [attr.height]="instance.component.height"
+                  ref="canvas"
+          ></canvas>
+          <img fxFlexFill [ngStyle]="{display: 'none' }" ref="signatureImage">
+        </div>
+        <div *ngIf="instance.component.footer"
+             class="signature-pad-footer"
+             fxLayout="row"
+             fxLayoutAlign="center center"
+        >
+          <mat-hint>{{ instance.t(instance.component.footer) }}</mat-hint>
+        </div>
+      </div>
+    </ng-template>
+  `, 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: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.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.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: i6.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: i7.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i8.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialSignatureComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mat-formio-signature',
+                    template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <div #signature>
+
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+
+        <button mat-icon-button [ngStyle]="{position: 'absolute'}" ref="refresh">
+          <mat-icon>refresh</mat-icon>
+        </button>
+
+        <div class="signature-pad-body"
+             [ngStyle]="{width: instance.component.width, height: instance.component.height, padding: 0, margin: 0}"
+             [attr.tabindex]="instance.component.tabindex || 0"
+             ref="padBody"
+        >
+          <canvas class="signature-pad-canvas"
+                  [attr.height]="instance.component.height"
+                  ref="canvas"
+          ></canvas>
+          <img fxFlexFill [ngStyle]="{display: 'none' }" ref="signatureImage">
+        </div>
+        <div *ngIf="instance.component.footer"
+             class="signature-pad-footer"
+             fxLayout="row"
+             fxLayoutAlign="center center"
+        >
+          <mat-hint>{{ instance.t(instance.component.footer) }}</mat-hint>
+        </div>
+      </div>
+    </ng-template>
+  `
+                }]
+        }], propDecorators: { signatureElement: [{
+                type: ViewChild,
+                args: ['signature']
+            }] } });
+SignatureComponent.MaterialComponent = MaterialSignatureComponent;
+export { SignatureComponent };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lnbmF0dXJlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1yZW5kZXItbWF0ZXJpYWwtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL3NpZ25hdHVyZS9zaWduYXR1cmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUE2QixNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN6RCxPQUFPLGtCQUFrQixNQUFNLDRDQUE0QyxDQUFDOzs7Ozs7Ozs7O0FBc0M1RSxNQUFNLE9BQU8sMEJBQTJCLFNBQVEsaUJBQWlCO0lBRy9ELGdCQUFnQjtRQUNkLElBQUksSUFBSSxDQUFDLGdCQUFnQixFQUFFO1lBQ3pCLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUMzRDtJQUNILENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQzs7dUhBWFUsMEJBQTBCOzJHQUExQiwwQkFBMEIsa01BbkMzQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUNUOzJGQUVVLDBCQUEwQjtrQkFyQ3RDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQ1Q7aUJBQ0Y7OEJBRXlCLGdCQUFnQjtzQkFBdkMsU0FBUzt1QkFBQyxXQUFXOztBQVl4QixrQkFBa0IsQ0FBQyxpQkFBaUIsR0FBRywwQkFBMEIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0NoaWxkLCBFbGVtZW50UmVmLCBBZnRlclZpZXdJbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRlcmlhbENvbXBvbmVudCB9IGZyb20gJy4uL01hdGVyaWFsQ29tcG9uZW50JztcbmltcG9ydCBTaWduYXR1cmVDb21wb25lbnQgZnJvbSAnZm9ybWlvanMvY29tcG9uZW50cy9zaWduYXR1cmUvU2lnbmF0dXJlLmpzJztcbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21hdC1mb3JtaW8tc2lnbmF0dXJlJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bWF0LWZvcm1pby1mb3JtLWZpZWxkIFtpbnN0YW5jZV09XCJpbnN0YW5jZVwiIFtjb21wb25lbnRUZW1wbGF0ZV09XCJjb21wb25lbnRUZW1wbGF0ZVwiPjwvbWF0LWZvcm1pby1mb3JtLWZpZWxkPlxuICAgIDxuZy10ZW1wbGF0ZSAjY29tcG9uZW50VGVtcGxhdGUgbGV0LWhhc0xhYmVsPlxuICAgICAgPGRpdiAjc2lnbmF0dXJlPlxuXG4gICAgICAgIDxtYXQtbGFiZWwgKm5nSWY9XCJoYXNMYWJlbFwiPlxuICAgICAgICAgIDxzcGFuIFtpbnN0YW5jZV09XCJpbnN0YW5jZVwiIG1hdEZvcm1pb0xhYmVsPjwvc3Bhbj5cbiAgICAgICAgPC9tYXQtbGFiZWw+XG5cbiAgICAgICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gW25nU3R5bGVdPVwie3Bvc2l0aW9uOiAnYWJzb2x1dGUnfVwiIHJlZj1cInJlZnJlc2hcIj5cbiAgICAgICAgICA8bWF0LWljb24+cmVmcmVzaDwvbWF0LWljb24+XG4gICAgICAgIDwvYnV0dG9uPlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzaWduYXR1cmUtcGFkLWJvZHlcIlxuICAgICAgICAgICAgIFtuZ1N0eWxlXT1cInt3aWR0aDogaW5zdGFuY2UuY29tcG9uZW50LndpZHRoLCBoZWlnaHQ6IGluc3RhbmNlLmNvbXBvbmVudC5oZWlnaHQsIHBhZGRpbmc6IDAsIG1hcmdpbjogMH1cIlxuICAgICAgICAgICAgIFthdHRyLnRhYmluZGV4XT1cImluc3RhbmNlLmNvbXBvbmVudC50YWJpbmRleCB8fCAwXCJcbiAgICAgICAgICAgICByZWY9XCJwYWRCb2R5XCJcbiAgICAgICAgPlxuICAgICAgICAgIDxjYW52YXMgY2xhc3M9XCJzaWduYXR1cmUtcGFkLWNhbnZhc1wiXG4gICAgICAgICAgICAgICAgICBbYXR0ci5oZWlnaHRdPVwiaW5zdGFuY2UuY29tcG9uZW50LmhlaWdodFwiXG4gICAgICAgICAgICAgICAgICByZWY9XCJjYW52YXNcIlxuICAgICAgICAgID48L2NhbnZhcz5cbiAgICAgICAgICA8aW1nIGZ4RmxleEZpbGwgW25nU3R5bGVdPVwie2Rpc3BsYXk6ICdub25lJyB9XCIgcmVmPVwic2lnbmF0dXJlSW1hZ2VcIj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgKm5nSWY9XCJpbnN0YW5jZS5jb21wb25lbnQuZm9vdGVyXCJcbiAgICAgICAgICAgICBjbGFzcz1cInNpZ25hdHVyZS1wYWQtZm9vdGVyXCJcbiAgICAgICAgICAgICBmeExheW91dD1cInJvd1wiXG4gICAgICAgICAgICAgZnhMYXlvdXRBbGlnbj1cImNlbnRlciBjZW50ZXJcIlxuICAgICAgICA+XG4gICAgICAgICAgPG1hdC1oaW50Pnt7IGluc3RhbmNlLnQoaW5zdGFuY2UuY29tcG9uZW50LmZvb3RlcikgfX08L21hdC1oaW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIGBcbn0pXG5leHBvcnQgY2xhc3MgTWF0ZXJpYWxTaWduYXR1cmVDb21wb25lbnQgZXh0ZW5kcyBNYXRlcmlhbENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBAVmlld0NoaWxkKCdzaWduYXR1cmUnKSBzaWduYXR1cmVFbGVtZW50OiBFbGVtZW50UmVmO1xuXG4gIHJlbmRlckNvbXBvbmVudHMoKSB7XG4gICAgaWYgKHRoaXMuc2lnbmF0dXJlRWxlbWVudCkge1xuICAgICAgdGhpcy5pbnN0YW5jZS5hdHRhY2godGhpcy5zaWduYXR1cmVFbGVtZW50Lm5hdGl2ZUVsZW1lbnQpO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLnJlbmRlckNvbXBvbmVudHMoKTtcbiAgfVxufVxuU2lnbmF0dXJlQ29tcG9uZW50Lk1hdGVyaWFsQ29tcG9uZW50ID0gTWF0ZXJpYWxTaWduYXR1cmVDb21wb25lbnQ7XG5leHBvcnQgeyBTaWduYXR1cmVDb21wb25lbnQgfTtcbiJdfQ==

package/esm2020/lib/components/survey/survey.component.mjs

@@ -0,0 +1,167 @@
+import { Component } from '@angular/core';
+import { MaterialComponent } from '../MaterialComponent';
+import SurveyComponent from 'formiojs/components/survey/Survey.js';
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/material/form-field";
+import * as i4 from "@angular/material/radio";
+import * as i5 from "@angular/flex-layout/flex";
+import * as i6 from "../formio-form-field/formio-form-field.component";
+import * as i7 from "../label/label.component";
+export class MaterialSurveyComponent extends MaterialComponent {
+    constructor() {
+        super(...arguments);
+        this.controls = {};
+    }
+    getFormControl(question) {
+        if (!this.controls[question]) {
+            this.controls[question] = new FormControl();
+            if (this.instance.shouldDisabled) {
+                this.controls[question].disable();
+            }
+        }
+        return this.controls[question];
+    }
+    setDisabled(disabled) {
+        const method = disabled ? 'disable' : 'enable';
+        for (const question in this.controls) {
+            if (this.controls.hasOwnProperty(question)) {
+                this.controls[question][method]();
+            }
+        }
+    }
+    getValue() {
+        const values = {};
+        for (const question in this.controls) {
+            if (this.controls.hasOwnProperty(question)) {
+                values[question] = this.controls[question].value || false;
+            }
+        }
+        return values;
+    }
+    setValue(value) {
+        for (const question in value) {
+            if (value.hasOwnProperty(question)) {
+                const control = this.getFormControl(question);
+                if (control) {
+                    control.setValue(value[question] || false);
+                }
+            }
+        }
+    }
+    getUniqueName(question) {
+        return `${this.instance.id}-${question}`;
+    }
+}
+MaterialSurveyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialSurveyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+MaterialSurveyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: MaterialSurveyComponent, selector: "mat-formio-survey", usesInheritance: true, ngImport: i0, template: `
+
+      <mat-formio-form-field
+              [instance]="instance"
+              [componentTemplate]="componentTemplate"
+              [showDescription]="false"
+      ></mat-formio-form-field>
+      <ng-template #componentTemplate let-hasLabel>
+
+        <table class="mat-elevation-z8 mat-table" fxFill>
+          <thead>
+          <tr class="mat-header-row">
+            <th class="mat-header-cell">
+              <h2 *ngIf="hasLabel">
+                <span [instance]="instance" matFormioLabel></span>
+              </h2>
+            </th>
+            <th class="mat-header-cell"
+                *ngFor="let value of instance.component.values"
+                style="text-align: center;"
+            >
+              {{ value.label }}
+            </th>
+          </tr>
+          </thead>
+
+          <tbody>
+          <tr class="mat-row" *ngFor="let question of instance.component.questions; index as i;">
+            <td class="mat-cell">{{ question.label }}</td>
+            <td class="mat-cell"
+                *ngFor="let value of instance.component.values; index as j;"
+                style="text-align: center;"
+            >
+              <mat-radio-group (change)="onChange()"
+                               [formControl]="getFormControl(question.value)"
+                               [name]="getUniqueName(question.value)"
+              >
+                <mat-radio-button [value]="value.value"></mat-radio-button>
+              </mat-radio-group>
+            </td>
+          </tr>
+          <mat-hint *ngIf="instance.component.description" class="mat-formio-component-description">
+            {{ instance.component.description }}
+          </mat-hint>
+          </tbody>
+
+          <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+        </table>
+      </ng-template>
+    `, 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.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i6.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i7.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialSurveyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mat-formio-survey',
+                    template: `
+
+      <mat-formio-form-field
+              [instance]="instance"
+              [componentTemplate]="componentTemplate"
+              [showDescription]="false"
+      ></mat-formio-form-field>
+      <ng-template #componentTemplate let-hasLabel>
+
+        <table class="mat-elevation-z8 mat-table" fxFill>
+          <thead>
+          <tr class="mat-header-row">
+            <th class="mat-header-cell">
+              <h2 *ngIf="hasLabel">
+                <span [instance]="instance" matFormioLabel></span>
+              </h2>
+            </th>
+            <th class="mat-header-cell"
+                *ngFor="let value of instance.component.values"
+                style="text-align: center;"
+            >
+              {{ value.label }}
+            </th>
+          </tr>
+          </thead>
+
+          <tbody>
+          <tr class="mat-row" *ngFor="let question of instance.component.questions; index as i;">
+            <td class="mat-cell">{{ question.label }}</td>
+            <td class="mat-cell"
+                *ngFor="let value of instance.component.values; index as j;"
+                style="text-align: center;"
+            >
+              <mat-radio-group (change)="onChange()"
+                               [formControl]="getFormControl(question.value)"
+                               [name]="getUniqueName(question.value)"
+              >
+                <mat-radio-button [value]="value.value"></mat-radio-button>
+              </mat-radio-group>
+            </td>
+          </tr>
+          <mat-hint *ngIf="instance.component.description" class="mat-formio-component-description">
+            {{ instance.component.description }}
+          </mat-hint>
+          </tbody>
+
+          <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+        </table>
+      </ng-template>
+    `
+                }]
+        }] });
+SurveyComponent.MaterialComponent = MaterialSurveyComponent;
+export { SurveyComponent };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VydmV5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1yZW5kZXItbWF0ZXJpYWwtZm9ybXMvc3JjL2xpYi9jb21wb25lbnRzL3N1cnZleS9zdXJ2ZXkuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDekQsT0FBTyxlQUFlLE1BQU0sc0NBQXNDLENBQUM7QUFDbkUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7Ozs7QUF1RDdDLE1BQU0sT0FBTyx1QkFBd0IsU0FBUSxpQkFBaUI7SUFyRDlEOztRQXNEUyxhQUFRLEdBQVEsRUFBRSxDQUFDO0tBNEMzQjtJQTNDQyxjQUFjLENBQUMsUUFBUTtRQUNyQixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsRUFBRTtZQUM1QixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxHQUFHLElBQUksV0FBVyxFQUFFLENBQUM7WUFDNUMsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsRUFBRTtnQkFDaEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxPQUFPLEVBQUUsQ0FBQzthQUNuQztTQUNGO1FBQ0QsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2pDLENBQUM7SUFFRCxXQUFXLENBQUMsUUFBUTtRQUNsQixNQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO1FBQy9DLEtBQUssTUFBTSxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNwQyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLFFBQVEsQ0FBQyxFQUFFO2dCQUMxQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUM7YUFDbkM7U0FDRjtJQUNILENBQUM7SUFFRCxRQUFRO1FBQ04sTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO1FBQ2xCLEtBQUssTUFBTSxRQUFRLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNwQyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLFFBQVEsQ0FBQyxFQUFFO2dCQUMxQyxNQUFNLENBQUMsUUFBUSxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxLQUFLLElBQUksS0FBSyxDQUFDO2FBQzNEO1NBQ0Y7UUFDRCxPQUFPLE1BQU0sQ0FBQztJQUNoQixDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQUs7UUFDWixLQUFLLE1BQU0sUUFBUSxJQUFJLEtBQUssRUFBRTtZQUM1QixJQUFJLEtBQUssQ0FBQyxjQUFjLENBQUMsUUFBUSxDQUFDLEVBQUU7Z0JBQ2xDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUSxDQUFDLENBQUM7Z0JBQzlDLElBQUksT0FBTyxFQUFFO29CQUNYLE9BQU8sQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxJQUFJLEtBQUssQ0FBQyxDQUFDO2lCQUM1QzthQUNGO1NBQ0Y7SUFDSCxDQUFDO0lBRUQsYUFBYSxDQUFDLFFBQVE7UUFDcEIsT0FBTyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsRUFBRSxJQUFJLFFBQVEsRUFBRSxDQUFDO0lBQzNDLENBQUM7O29IQTVDVSx1QkFBdUI7d0dBQXZCLHVCQUF1QixnRkFuRHRCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBaURUOzJGQUVRLHVCQUF1QjtrQkFyRG5DLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBaURUO2lCQUNKOztBQStDRCxlQUFlLENBQUMsaUJBQWlCLEdBQUcsdUJBQXVCLENBQUM7QUFDNUQsT0FBTyxFQUFFLGVBQWUsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRlcmlhbENvbXBvbmVudCB9IGZyb20gJy4uL01hdGVyaWFsQ29tcG9uZW50JztcbmltcG9ydCBTdXJ2ZXlDb21wb25lbnQgZnJvbSAnZm9ybWlvanMvY29tcG9uZW50cy9zdXJ2ZXkvU3VydmV5LmpzJztcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ21hdC1mb3JtaW8tc3VydmV5JyxcbiAgICB0ZW1wbGF0ZTogYFxuXG4gICAgICA8bWF0LWZvcm1pby1mb3JtLWZpZWxkXG4gICAgICAgICAgICAgIFtpbnN0YW5jZV09XCJpbnN0YW5jZVwiXG4gICAgICAgICAgICAgIFtjb21wb25lbnRUZW1wbGF0ZV09XCJjb21wb25lbnRUZW1wbGF0ZVwiXG4gICAgICAgICAgICAgIFtzaG93RGVzY3JpcHRpb25dPVwiZmFsc2VcIlxuICAgICAgPjwvbWF0LWZvcm1pby1mb3JtLWZpZWxkPlxuICAgICAgPG5nLXRlbXBsYXRlICNjb21wb25lbnRUZW1wbGF0ZSBsZXQtaGFzTGFiZWw+XG5cbiAgICAgICAgPHRhYmxlIGNsYXNzPVwibWF0LWVsZXZhdGlvbi16OCBtYXQtdGFibGVcIiBmeEZpbGw+XG4gICAgICAgICAgPHRoZWFkPlxuICAgICAgICAgIDx0ciBjbGFzcz1cIm1hdC1oZWFkZXItcm93XCI+XG4gICAgICAgICAgICA8dGggY2xhc3M9XCJtYXQtaGVhZGVyLWNlbGxcIj5cbiAgICAgICAgICAgICAgPGgyICpuZ0lmPVwiaGFzTGFiZWxcIj5cbiAgICAgICAgICAgICAgICA8c3BhbiBbaW5zdGFuY2VdPVwiaW5zdGFuY2VcIiBtYXRGb3JtaW9MYWJlbD48L3NwYW4+XG4gICAgICAgICAgICAgIDwvaDI+XG4gICAgICAgICAgICA8L3RoPlxuICAgICAgICAgICAgPHRoIGNsYXNzPVwibWF0LWhlYWRlci1jZWxsXCJcbiAgICAgICAgICAgICAgICAqbmdGb3I9XCJsZXQgdmFsdWUgb2YgaW5zdGFuY2UuY29tcG9uZW50LnZhbHVlc1wiXG4gICAgICAgICAgICAgICAgc3R5bGU9XCJ0ZXh0LWFsaWduOiBjZW50ZXI7XCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3sgdmFsdWUubGFiZWwgfX1cbiAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgPC90cj5cbiAgICAgICAgICA8L3RoZWFkPlxuXG4gICAgICAgICAgPHRib2R5PlxuICAgICAgICAgIDx0ciBjbGFzcz1cIm1hdC1yb3dcIiAqbmdGb3I9XCJsZXQgcXVlc3Rpb24gb2YgaW5zdGFuY2UuY29tcG9uZW50LnF1ZXN0aW9uczsgaW5kZXggYXMgaTtcIj5cbiAgICAgICAgICAgIDx0ZCBjbGFzcz1cIm1hdC1jZWxsXCI+e3sgcXVlc3Rpb24ubGFiZWwgfX08L3RkPlxuICAgICAgICAgICAgPHRkIGNsYXNzPVwibWF0LWNlbGxcIlxuICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCB2YWx1ZSBvZiBpbnN0YW5jZS5jb21wb25lbnQudmFsdWVzOyBpbmRleCBhcyBqO1wiXG4gICAgICAgICAgICAgICAgc3R5bGU9XCJ0ZXh0LWFsaWduOiBjZW50ZXI7XCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPG1hdC1yYWRpby1ncm91cCAoY2hhbmdlKT1cIm9uQ2hhbmdlKClcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtmb3JtQ29udHJvbF09XCJnZXRGb3JtQ29udHJvbChxdWVzdGlvbi52YWx1ZSlcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuYW1lXT1cImdldFVuaXF1ZU5hbWUocXVlc3Rpb24udmFsdWUpXCJcbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxtYXQtcmFkaW8tYnV0dG9uIFt2YWx1ZV09XCJ2YWx1ZS52YWx1ZVwiPjwvbWF0LXJhZGlvLWJ1dHRvbj5cbiAgICAgICAgICAgICAgPC9tYXQtcmFkaW8tZ3JvdXA+XG4gICAgICAgICAgICA8L3RkPlxuICAgICAgICAgIDwvdHI+XG4gICAgICAgICAgPG1hdC1oaW50ICpuZ0lmPVwiaW5zdGFuY2UuY29tcG9uZW50LmRlc2NyaXB0aW9uXCIgY2xhc3M9XCJtYXQtZm9ybWlvLWNvbXBvbmVudC1kZXNjcmlwdGlvblwiPlxuICAgICAgICAgICAge3sgaW5zdGFuY2UuY29tcG9uZW50LmRlc2NyaXB0aW9uIH19XG4gICAgICAgICAgPC9tYXQtaGludD5cbiAgICAgICAgICA8L3Rib2R5PlxuXG4gICAgICAgICAgPG1hdC1lcnJvciAqbmdJZj1cImluc3RhbmNlLmVycm9yXCI+e3sgaW5zdGFuY2UuZXJyb3IubWVzc2FnZSB9fTwvbWF0LWVycm9yPlxuICAgICAgICA8L3RhYmxlPlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICBgXG59KVxuZXhwb3J0IGNsYXNzIE1hdGVyaWFsU3VydmV5Q29tcG9uZW50IGV4dGVuZHMgTWF0ZXJpYWxDb21wb25lbnQge1xuICBwdWJsaWMgY29udHJvbHM6IGFueSA9IHt9O1xuICBnZXRGb3JtQ29udHJvbChxdWVzdGlvbikge1xuICAgIGlmICghdGhpcy5jb250cm9sc1txdWVzdGlvbl0pIHtcbiAgICAgIHRoaXMuY29udHJvbHNbcXVlc3Rpb25dID0gbmV3IEZvcm1Db250cm9sKCk7XG4gICAgICBpZiAodGhpcy5pbnN0YW5jZS5zaG91bGREaXNhYmxlZCkge1xuICAgICAgICB0aGlzLmNvbnRyb2xzW3F1ZXN0aW9uXS5kaXNhYmxlKCk7XG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiB0aGlzLmNvbnRyb2xzW3F1ZXN0aW9uXTtcbiAgfVxuXG4gIHNldERpc2FibGVkKGRpc2FibGVkKSB7XG4gICAgY29uc3QgbWV0aG9kID0gZGlzYWJsZWQgPyAnZGlzYWJsZScgOiAnZW5hYmxlJztcbiAgICBmb3IgKGNvbnN0IHF1ZXN0aW9uIGluIHRoaXMuY29udHJvbHMpIHtcbiAgICAgIGlmICh0aGlzLmNvbnRyb2xzLmhhc093blByb3BlcnR5KHF1ZXN0aW9uKSkge1xuICAgICAgICB0aGlzLmNvbnRyb2xzW3F1ZXN0aW9uXVttZXRob2RdKCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgZ2V0VmFsdWUoKSB7XG4gICAgY29uc3QgdmFsdWVzID0ge307XG4gICAgZm9yIChjb25zdCBxdWVzdGlvbiBpbiB0aGlzLmNvbnRyb2xzKSB7XG4gICAgICBpZiAodGhpcy5jb250cm9scy5oYXNPd25Qcm9wZXJ0eShxdWVzdGlvbikpIHtcbiAgICAgICAgdmFsdWVzW3F1ZXN0aW9uXSA9IHRoaXMuY29udHJvbHNbcXVlc3Rpb25dLnZhbHVlIHx8IGZhbHNlO1xuICAgICAgfVxuICAgIH1cbiAgICByZXR1cm4gdmFsdWVzO1xuICB9XG5cbiAgc2V0VmFsdWUodmFsdWUpIHtcbiAgICBmb3IgKGNvbnN0IHF1ZXN0aW9uIGluIHZhbHVlKSB7XG4gICAgICBpZiAodmFsdWUuaGFzT3duUHJvcGVydHkocXVlc3Rpb24pKSB7XG4gICAgICAgIGNvbnN0IGNvbnRyb2wgPSB0aGlzLmdldEZvcm1Db250cm9sKHF1ZXN0aW9uKTtcbiAgICAgICAgaWYgKGNvbnRyb2wpIHtcbiAgICAgICAgICBjb250cm9sLnNldFZhbHVlKHZhbHVlW3F1ZXN0aW9uXSB8fCBmYWxzZSk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBnZXRVbmlxdWVOYW1lKHF1ZXN0aW9uKSB7XG4gICAgcmV0dXJuIGAke3RoaXMuaW5zdGFuY2UuaWR9LSR7cXVlc3Rpb259YDtcbiAgfVxufVxuU3VydmV5Q29tcG9uZW50Lk1hdGVyaWFsQ29tcG9uZW50ID0gTWF0ZXJpYWxTdXJ2ZXlDb21wb25lbnQ7XG5leHBvcnQgeyBTdXJ2ZXlDb21wb25lbnQgfTtcbiJdfQ==