{"__symbolic":"module","version":4,"metadata":{"QuickForm":{"makeForm":{"__symbolic":"reference","name":"ɵa"},"preProcessFormValues":{"__symbolic":"reference","name":"ɵb"}},"QuickFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"QuickFormFieldComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":31,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":32,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":33,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":34,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":35,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":36,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":37,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":38,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":39,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":40,"character":4}],"exports":[{"__symbolic":"reference","name":"QuickFormFieldComponent"}]}]}],"members":{}},"QuickFormField":{"__symbolic":"interface"},"QuickFormFieldOptionDefinition":{"__symbolic":"interface"},"QuickFormFieldType":{"__symbolic":"interface"},"CheckboxValidators":{"__symbolic":"class","members":{},"statics":{"minSelectedValues":{"__symbolic":"function","parameters":["min"],"value":{"__symbolic":"error","message":"Lambda not supported","line":14,"character":11,"module":"./lib/validators/CheckboxValidators"}}}},"QuickFormFieldComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"quick-form-field","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":22,"character":19},"member":"Default"},"host":{"[attr.grow]":"flexCell.grow === true ? true : null","[attr.shrink]":"flexCell.shrink === true ? true : null","[attr.cell-1]":"flexCell.cell === 1 ? true : null","[attr.cell-2]":"flexCell.cell === 2 ? true : null","[attr.cell-3]":"flexCell.cell === 3 ? true : null","[attr.cell-4]":"flexCell.cell === 4 ? true : null","[attr.cell-5]":"flexCell.cell === 5 ? true : null","[attr.cell-6]":"flexCell.cell === 6 ? true : null","[attr.cell-7]":"flexCell.cell === 7 ? true : null","[attr.cell-8]":"flexCell.cell === 8 ? true : null","[attr.cell-9]":"flexCell.cell === 9 ? true : null","[attr.cell-10]":"flexCell.cell === 10 ? true : null","[attr.cell-11]":"flexCell.cell === 11 ? true : null","[attr.cell-12]":"flexCell.cell === 12 ? true : null","[class]":"cssClass !== null ? cssClass : null","$quoted$":["[attr.grow]","[attr.shrink]","[attr.cell-1]","[attr.cell-2]","[attr.cell-3]","[attr.cell-4]","[attr.cell-5]","[attr.cell-6]","[attr.cell-7]","[attr.cell-8]","[attr.cell-9]","[attr.cell-10]","[attr.cell-11]","[attr.cell-12]","[class]"]},"template":"<ng-container [formGroup]=\"form\" [ngSwitch]=\"field.type\">\n    <!--text field-->\n    <mat-form-field *ngSwitchCase=\"'text'\" [floatLabel]=\"field.floatLabel\" [hintLabel]=\"getHintLabel()\" width-full>\n        <mat-icon *ngIf=\"field.suffixIcon\" matSuffix [matTooltip]=\"field.suffixIconTooltip\">\n            {{field.suffixIcon}}</mat-icon>\n        <mat-label>{{field.title}}</mat-label>\n        <input matInput [formControlName]=\"fieldId\"\n               #input\n               [readonly]=\"field.readonly\"\n               [placeholder]=\"field.placeholder ? field.placeholder : field.title\"\n               [required]=\"field.required\"\n               [maxlength]=\"field.lengthIndicator && field.lengthIndicator.maxLength > 0 ? field.lengthIndicator.maxLength : null\">\n        <mat-hint *ngIf=\"field.lengthIndicator\" align=\"end\">{{input.value?.length || 0}}/{{field.lengthIndicator.maxLength}}</mat-hint>\n        <mat-error *ngIf=\"!form.controls[fieldId].valid\">\n            {{errorMessage(form.controls[fieldId])}}\n        </mat-error>\n    </mat-form-field>\n\n    <!--autocomplete-->\n    <mat-form-field *ngSwitchCase=\"'autocomplete'\" [floatLabel]=\"field.floatLabel\" [hintLabel]=\"getHintLabel()\" width-full>\n        <mat-icon *ngIf=\"field.suffixIcon\" matSuffix [matTooltip]=\"field.suffixIconTooltip\">\n            {{field.suffixIcon}}</mat-icon>\n        <mat-label>{{field.title}}</mat-label>\n        <input matInput [formControlName]=\"fieldId\"\n               #input\n               [readonly]=\"field.readonly\"\n               [placeholder]=\"field.placeholder ? field.placeholder : field.title\"\n               [required]=\"field.required\" [matAutocomplete]=\"auto\"\n               [maxlength]=\"field.lengthIndicator && field.lengthIndicator.maxLength > 0 ? field.lengthIndicator.maxLength : null\">\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n            <mat-option *ngFor=\"let option of filteredFinalOptions | async\" [value]=\"option.value\">\n                {{option.label}}\n            </mat-option>\n        </mat-autocomplete>\n        <mat-hint *ngIf=\"field.lengthIndicator\" align=\"end\">{{input.value?.length || 0}}/{{field.lengthIndicator.maxLength}}</mat-hint>\n        <mat-error *ngIf=\"!form.controls[fieldId].valid\">\n            {{errorMessage(form.controls[fieldId])}}\n        </mat-error>\n    </mat-form-field>\n\n    <!--password-->\n    <mat-form-field *ngSwitchCase=\"'password'\" [floatLabel]=\"field.floatLabel\" [hintLabel]=\"getHintLabel()\" width-full>\n        <mat-icon *ngIf=\"field.suffixIcon\" matSuffix [matTooltip]=\"field.suffixIconTooltip\">\n            {{field.suffixIcon}}</mat-icon>\n        <mat-label>{{field.title}}</mat-label>\n        <input matInput type=\"password\" [formControlName]=\"fieldId\"\n               #input\n               [readonly]=\"field.readonly\"\n               [placeholder]=\"field.placeholder ? field.placeholder : field.title\"\n               [required]=\"field.required\"\n               [maxlength]=\"field.lengthIndicator && field.lengthIndicator.maxLength > 0 ? field.lengthIndicator.maxLength : null\">\n        <mat-hint *ngIf=\"field.lengthIndicator\" align=\"end\">{{input.value?.length || 0}}/{{field.lengthIndicator.maxLength}}</mat-hint>\n        <mat-error *ngIf=\"!form.controls[fieldId].valid\">\n            {{errorMessage(form.controls[fieldId])}}\n        </mat-error>\n    </mat-form-field>\n\n    <!--datepicker-->\n    <mat-form-field *ngSwitchCase=\"'datepicker'\" [floatLabel]=\"field.floatLabel\" [hintLabel]=\"field.hintLabel\" width-full>\n        <mat-label>{{field.title}}</mat-label>\n        <input matInput [formControlName]=\"fieldId\" [required]=\"field.required\"\n               [readonly]=\"field.readonly\"\n               [matDatepicker]=\"datePicker\"\n               [placeholder]=\"field.placeholder ? field.placeholder : field.title\">\n        <mat-icon matSuffix (click)=\"datePicker.open()\" style=\"cursor:pointer; color:#777;\">today</mat-icon>\n        <mat-datepicker #datePicker></mat-datepicker>\n        <mat-error *ngIf=\"!form.controls[fieldId].valid\">\n            {{errorMessage(form.controls[fieldId])}}\n        </mat-error>\n    </mat-form-field>\n\n    <!--textarea-->\n    <mat-form-field *ngSwitchCase=\"'textarea'\" [floatLabel]=\"field.floatLabel\" [hintLabel]=\"getHintLabel()\" width-full>\n        <mat-icon *ngIf=\"field.suffixIcon\" matSuffix [matTooltip]=\"field.suffixIconTooltip\">\n            {{field.suffixIcon}}</mat-icon>\n        <mat-label>{{field.title}}</mat-label>\n        <textarea matInput cdkTextareaAutosize [formControlName]=\"fieldId\"\n                  #input\n                  [readonly]=\"field.readonly\"\n                  [placeholder]=\"field.placeholder ? field.placeholder : field.title\"\n                  [required]=\"field.required\"\n                  [maxlength]=\"field.lengthIndicator && field.lengthIndicator.maxLength > 0 ? field.lengthIndicator.maxLength : null\">\n        </textarea>\n        <mat-hint *ngIf=\"field.lengthIndicator\" align=\"end\">{{input.value?.length || 0}}/{{field.lengthIndicator.maxLength}}</mat-hint>\n        <mat-error *ngIf=\"!form.controls[fieldId].valid\">\n            {{errorMessage(form.controls[fieldId])}}\n        </mat-error>\n    </mat-form-field>\n\n    <!--chip-->\n    <mat-form-field *ngSwitchCase=\"'chips'\" [floatLabel]=\"field.floatLabel\" [hintLabel]=\"field.hintLabel\" width-full>\n        <mat-icon *ngIf=\"field.suffixIcon\" matSuffix [matTooltip]=\"field.suffixIconTooltip\">\n            {{field.suffixIcon}}</mat-icon>\n        <mat-label>{{field.title}}</mat-label>\n        <mat-chip-list #chipList>\n            <mat-chip\n                    *ngFor=\"let chipValue of chipValues\"\n                    [selectable]=\"true\"\n                    [removable]=\"true\"\n                    (removed)=\"doRemoveChip(chipValue)\">\n                {{chipValue}}\n                <mat-icon matChipRemove *ngIf=\"true\">cancel</mat-icon>\n            </mat-chip>\n            <input #chipInput\n                   [placeholder]=\"field.placeholder ? field.placeholder : field.title\"\n                   [readonly]=\"field.readonly\"\n                   [formControl]=\"chipControl\"\n                   [matAutocomplete]=\"auto\"\n                   [matChipInputFor]=\"chipList\"\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                   [matChipInputAddOnBlur]=\"true\"\n                   (matChipInputTokenEnd)=\"doAddChip($event)\">\n        </mat-chip-list>\n        <mat-autocomplete #auto=\"matAutocomplete\"\n                          [autoActiveFirstOption]=\"true\"\n                          (optionSelected)=\"doChipSelected($event)\">\n            <ng-container *ngIf=\"chipWithGroups; else chipWithNoGroups\">\n                <mat-optgroup *ngFor=\"let chipValue of filteredChipValuesWithGroup | async\"\n                              [label]=\"chipValue.group\">\n                    <mat-option *ngFor=\"let option of chipValue.options\" [value]=\"option.value\">\n                        {{option.label}}\n                    </mat-option>\n                </mat-optgroup>\n            </ng-container>\n            <ng-template #chipWithNoGroups>\n                <mat-option\n                        *ngFor=\"let option of filteredChipValues | async\"\n                        [value]=\"option.value\">\n                    {{option.label}}\n                </mat-option>\n            </ng-template>\n        </mat-autocomplete>\n    </mat-form-field>\n\n    <!--select-->\n    <mat-form-field *ngSwitchCase=\"'select'\" [floatLabel]=\"field.floatLabel\" [hintLabel]=\"field.hintLabel\" width-full>\n        <mat-icon *ngIf=\"field.suffixIcon\" matSuffix [matTooltip]=\"field.suffixIconTooltip\">\n            {{field.suffixIcon}}</mat-icon>\n        <mat-label>{{field.title}}</mat-label>\n        <mat-select [formControlName]=\"fieldId\"\n                    [placeholder]=\"field.placeholder ? field.placeholder : field.title\"\n                    [multiple]=\"field.selectMultiple\"\n                    [required]=\"field.required\">\n            <mat-option *ngFor=\"let option of finalOptions\" [value]=\"option.value\">\n                {{option.label}}\n            </mat-option>\n        </mat-select>\n        <mat-error *ngIf=\"!form.controls[fieldId].valid\">\n            {{errorMessage(form.controls[fieldId])}}\n        </mat-error>\n    </mat-form-field>\n\n    <!--switch field-->\n    <div *ngSwitchCase=\"'switch'\" typography-body-1 width-full>\n        <mat-slide-toggle [formControlName]=\"fieldId\">{{field.title}}\n            <mat-icon *ngIf=\"field.suffixIcon\" inline=\"true\" matSuffix\n                      [matTooltip]=\"field.suffixIconTooltip\">\n                {{field.suffixIcon}}</mat-icon>\n        </mat-slide-toggle>\n    </div>\n\n    <!--radio field-->\n    <div *ngSwitchCase=\"'radio'\" width-full>\n        <mat-label>{{field.title}}\n            <mat-icon *ngIf=\"field.suffixIcon\" matSuffix inline=\"true\"\n                      [matTooltip]=\"field.suffixIconTooltip\">\n                {{field.suffixIcon}}</mat-icon></mat-label>\n        <mat-radio-group [formControlName]=\"fieldId\" [required]=\"field.required\">\n            <div flex-cell gutter padding-bottom>\n                <mat-radio-button *ngFor=\"let option of finalOptions\" [value]=\"option.value\"\n                                  [attr.cell-1]=\"cellPerOption == 1 ? true : null\"\n                                  [attr.cell-2]=\"cellPerOption == 2 ? true : null\"\n                                  [attr.cell-3]=\"cellPerOption == 3 ? true : null\"\n                                  [attr.cell-4]=\"cellPerOption == 4 ? true : null\"\n                                  [attr.cell-5]=\"cellPerOption == 5 ? true : null\"\n                                  [attr.cell-6]=\"cellPerOption == 6 ? true : null\"\n                                  [attr.cell-7]=\"cellPerOption == 7 ? true : null\"\n                                  [attr.cell-8]=\"cellPerOption == 8 ? true : null\"\n                                  [attr.cell-9]=\"cellPerOption == 9 ? true : null\"\n                                  [attr.cell-10]=\"cellPerOption == 10 ? true : null\"\n                                  [attr.cell-11]=\"cellPerOption == 11 ? true : null\"\n                                  [attr.cell-12]=\"cellPerOption == 12 ? true : null\">\n                    {{option.label}}\n                </mat-radio-button>\n            </div>\n            <div qff-error *ngIf=\"!form.controls[fieldId].valid\">\n                {{errorMessage(form.controls[fieldId])}}\n            </div>\n        </mat-radio-group>\n    </div>\n\n    <!--checkbox-->\n    <div *ngSwitchCase=\"'checkbox'\" padding-bottom width-full>\n        <label typography-caption>{{field.title}}\n            <mat-icon *ngIf=\"field.suffixIcon\" matSuffix inline=\"true\"\n                      [matTooltip]=\"field.suffixIconTooltip\">\n                {{field.suffixIcon}}</mat-icon>\n        </label>\n        <div [formArrayName]=\"'__cb-' + fieldId\" flex-cell gutter>\n            <ng-container\n                    *ngFor=\"let control of getChildControls('__cb-' + fieldId); let i = index\">\n                <ng-container [formGroupName]=\"i\">\n                    <mat-checkbox formControlName=\"cb\" #cb [value]=\"getCbOptionValue(i)\"\n                                  (change)=\"doUpdateCb(i, cb.checked)\"\n                                  [attr.cell-1]=\"cellPerOption == 1 ? true : null\"\n                                  [attr.cell-2]=\"cellPerOption == 2 ? true : null\"\n                                  [attr.cell-3]=\"cellPerOption == 3 ? true : null\"\n                                  [attr.cell-4]=\"cellPerOption == 4 ? true : null\"\n                                  [attr.cell-5]=\"cellPerOption == 5 ? true : null\"\n                                  [attr.cell-6]=\"cellPerOption == 6 ? true : null\"\n                                  [attr.cell-7]=\"cellPerOption == 7 ? true : null\"\n                                  [attr.cell-8]=\"cellPerOption == 8 ? true : null\"\n                                  [attr.cell-9]=\"cellPerOption == 9 ? true : null\"\n                                  [attr.cell-10]=\"cellPerOption == 10 ? true : null\"\n                                  [attr.cell-11]=\"cellPerOption == 11 ? true : null\"\n                                  [attr.cell-12]=\"cellPerOption == 12 ? true : null\">\n                        {{getCbOptionLabel(i)}}\n                    </mat-checkbox>\n                </ng-container>\n            </ng-container>\n        </div>\n        <div qff-error *ngIf=\"!form.controls['__cb-' + fieldId].valid\">\n            {{errorMessage(form.controls['__cb-' + fieldId])}}\n        </div>\n    </div>\n\n    <!--separator-->\n    <div *ngSwitchCase=\"'separator'\" padding-vertical width-full>\n        <label typography-subheading-1 contrast-medium-emphasis>{{field.title}}</label>\n        <div divider></div>\n    </div>\n\n    <div *ngSwitchDefault red padding-bottom width-full>\n        Unsupported form field type [{{field.type}}]\n    </div>\n\n    <div qff-custom-message typography-caption-contrast *ngIf=\"hasCustomMessage\">{{customMessage}}</div>\n</ng-container>\n","styles":["[qff-error]{color:#f44336;font-size:10.5px}[qff-custom-message]{margin-top:-16px}"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"chipInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":3},"arguments":["chipInput"]}]}],"matAutocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":62,"character":3},"arguments":["auto"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":72,"character":27}]}],"filterAutoCompleteOptions":[{"__symbolic":"method"}],"autoUnsubscribeOnChanges":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"unsubscribeOnChanges":[{"__symbolic":"method"}],"errorMessage":[{"__symbolic":"method"}],"getChildControls":[{"__symbolic":"method"}],"getCbOptionValue":[{"__symbolic":"method"}],"getCbOptionLabel":[{"__symbolic":"method"}],"doUpdateCb":[{"__symbolic":"method"}],"doAddChip":[{"__symbolic":"method"}],"doRemoveChip":[{"__symbolic":"method"}],"doChipSelected":[{"__symbolic":"method"}],"setFieldValue":[{"__symbolic":"method"}],"getHintLabel":[{"__symbolic":"method"}],"_filterWithGroups":[{"__symbolic":"method"}],"_filter":[{"__symbolic":"method"}],"isChipWithGroups":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"error","message":"Lambda not supported","line":10,"character":24,"module":"./lib/makeForm"},"ɵb":{"__symbolic":"error","message":"Lambda not supported","line":4,"character":36,"module":"./lib/preProcessFormValues"}},"origins":{"QuickForm":"./lib/QuickForm","QuickFormModule":"./lib/QuickForm.module","QuickFormField":"./lib/QuickFormField","QuickFormFieldOptionDefinition":"./lib/QuickFormFieldOptionDefinition","QuickFormFieldType":"./lib/QuickFormFieldType","CheckboxValidators":"./lib/validators/CheckboxValidators","QuickFormFieldComponent":"./lib/mat/QuickFormField.component","ɵa":"./lib/makeForm","ɵb":"./lib/preProcessFormValues"},"importAs":"ng-quick-form"}