{"__symbolic":"module","version":4,"metadata":{"TRANSLATION_FACTORY":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":15,"character":39},"arguments":["ngx-questionnaire-core.translate-fn"]},"TABLE_OF_CONTENTS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":16,"character":37},"arguments":["ngx-questionnaire-core.table_of_contents"]},"PERSISTENCE_SERVICE":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":17,"character":39},"arguments":["ngx-questionnaire-core.persistence_service"]},"REDIRECT":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":18,"character":28},"arguments":["ngx-questionnaire-core.redirect"]},"AUTO_SAVE_INTERNAL":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":19,"character":38},"arguments":["ngx-questionnaire-core.autosave_interval"]},"DEBUG_MODE":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":20,"character":30},"arguments":["ngx-questionnaire-core.debug_mode"]},"QuestionnaireComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":73,"character":1},"arguments":[{"selector":"lib-ngx-questionnaire","template":"<div class=\"modal-content\" *ngIf=\"showError$ | async\">\n    <div class=\"modal-header\">\n        <h4 class=\"modal-title\">{{ translate('saveError', 'header') | async }}</h4>\n    </div>\n    <div class=\"modal-body\">\n        <p>{{ translate('saveError', 'body') | async }}</p>\n        <p *ngIf=\"lastError\">{{ translate('saveError', 'error') | async }} <code>{{ lastError }}</code></p>\n    </div>\n    <div class=\"modal-footer\">\n        <button type=\"button\"\n            class=\"btn btn-outline-dark\"\n            (click)=\"dismissError()\">{{ translate('saveError', 'dismiss') | async }}</button>\n    </div>\n</div>\n\n<ng-container *ngIf=\"page$ | async; let page\">\n    <ng-container *ngIf=\"formGroup$ | async; let formGroup; else loading\">\n        <ng-container *ngIf=\"control$ | async; let controls; else loading\">\n            <ng-container *ngIf=\"(value$ | async) || {}; let persisted; else loading\">\n\n                <div *ngIf=\"(translate('pages', page, 'header') | async); let header\" [innerHTML]=\"header\"></div>\n\n                <ng-container *ngIf=\"question$ | async; let questions\">\n                    <ng-container *ngFor=\"let _field of questions;\">\n                        <ng-container *ngIf=\"_field[0]; let key\">\n                            <ng-container *ngIf=\"_field[1]; let settings\">\n                                <ng-container *ngIf=\"controls[key]; let control\">\n                                    <div [class]=\"className(key)\" *ngIf=\"showField(key, settings, controls, persisted)\">\n                                    \n                                        <div *ngIf=\"(translate('questions', key, 'prompt') | async); let prompt\" [innerHTML]=\"prompt\"></div>\n                                        \n                                        <ng-container [ngSwitch]=\"settings.type\">\n                                \n\n                                            <mat-form-field *ngSwitchCase=\"'date'\" class=\"form-field\" >\n                                                <mat-label [id]=\"key\" *ngIf=\"translate('questions', key, 'label') | async; let label\">\n                                                    {{ label }}&nbsp;<span class=\"required\" *ngIf=\"settings.required\" aria-hidden=\"true\">*</span>\n                                                </mat-label>\n                                                <input matInput \n                                                [attr.aria-labelledby]=\"key\"\n                                                [matDatepicker]=\"picker\" \n                                                [min]=\"settings.min\"\n                                                [max]=\"settings.max\"\n                                                class=\"form-control\"\n                                                [formControl]=\"control\"\n                                                [placeholder]=\"(translate('questions', key, 'placeholder') | async) || 'mm/dd/yyyy'\"\n                                                name=\"dp\" />\n                                                <mat-datepicker-toggle matSuffix [for]=\"picker\" aria-label=\"open date picker\"></mat-datepicker-toggle>\n                                                <mat-datepicker #picker></mat-datepicker>\n    \n                                                \n                                            </mat-form-field>\n    \n                                            <mat-form-field *ngSwitchCase=\"'select'\" class=\"form-field\">\n                                                <label [id]=\"key\" *ngIf=\"translate('questions', key, 'label') | async; let label\">\n                                                    {{ label }}&nbsp;<span class=\"required\" *ngIf=\"settings.required\" aria-hidden=\"true\">*</span>\n                                                </label>\n                                                <mat-select \n                                                      [attr.aria-labelledby]=\"key\"\n                                                      [formControl]=\"control\"\n                                                      type=\"text\"\n                                                      class=\"form-control\">\n                                                  <mat-option>--</mat-option>\n                                                  <mat-option *ngFor=\"let option of settings.options\"\n                                                          [value]=\"option\">\n                                                          {{ translate('questions', key, 'options', option) | async }}\n                                                  </mat-option>\n                                                </mat-select >\n                                              </mat-form-field>\n    \n                                            <div class=\"form-group\" *ngSwitchCase=\"'radio'\">\n                                                <mat-label [id]=\"key\" *ngIf=\"translate('questions', key, 'label') | async; let label\">\n                                                    {{ label }}&nbsp;<span class=\"required\" *ngIf=\"settings.required\" aria-hidden=\"true\">*</span>\n                                                </mat-label>\n                                                <mat-radio-group  [formControl]=\"control\" class=\"form-check form-check-inline\" > \n                                                    <mat-radio-button class=\"form-check-input\" *ngFor=\"let option of settings.options\"\n                                                    [name]=\"key\"\n                                                    type=\"radio\"\n                                                    [value]=\"option\">{{ translate('questions', key, 'options', option) | async }}</mat-radio-button>\n                                                </mat-radio-group>\n                                            </div>\n    \n                                            <ng-container *ngSwitchCase=\"'checkbox'\">\n    \n                                                <mat-label [id]=\"key\" *ngIf=\"translate('questions', key, 'label') | async; let label\">\n                                                    {{ label }}&nbsp;<span class=\"required\" *ngIf=\"settings.required\" aria-hidden=\"true\">*</span>\n                                                </mat-label>\n                            \n                                                <div class=\"form-check form-check-inline\" *ngFor=\"let option of settings.options\">\n                                                 <mat-checkbox class=\"form-check-input\"\n                                                            [name]=\"key\"\n                                                            type=\"checkbox\"\n                                                            [formControl]=\"settings.options.length > 1 ? control.controls[option] : control\"\n                                                            [value]=\"true\" ></mat-checkbox>\n                                                  <mat-label class=\"form-check-label form-prompt-label\">\n                                                            {{ translate('questions', key, 'options', option) | async }}\n                                                  </mat-label>\n                                                  \n                                                </div>\n                                              </ng-container>\n    \n                                            <ng-container *ngSwitchCase=\"'note'\" aria-hidden=\"true\">\n                                                <mat-label [id]=\"key\" *ngIf=\"translate('questions', key, 'label') | async; let label\">\n                                                    {{ label }}&nbsp;<span class=\"required\" *ngIf=\"settings.required\" aria-hidden=\"true\">*</span>\n                                                </mat-label>\n                                            </ng-container>\n                                            \n                                            <ng-container *ngSwitchCase=\"'pagebreak'\" aria-hidden=\"true\"></ng-container>\n\n                                            <ng-container *ngSwitchCase=\"'file'\">\n                                                <mat-file-upload \n                                                    [labelText]=\"translate('questions', key, 'label') | async\"\n                                                    [selectButtonText]=\"translate('questions', key, 'placeholder') | async\"\n                                                    [showUploadButton]=\"false\"\n                                                    [acceptedTypes]=\"settings.acceptedTypes\"\n                                                    (selectedFilesChanged)=\"onSelectedFilesChanged(key, control, $event)\">\n                                                </mat-file-upload>\n                                                <ng-container *ngIf=\"fileUploads[key] | async; let snap\">\n                                                    <mat-progress-bar mode=\"determinate\" *ngIf=\"snap.state === 'running'\" [value]=\"snap.bytesTransferred / snap.totalBytes * 100\"></mat-progress-bar>\n                                                </ng-container>\n                                                <input type=\"hidden\" [formControl]=\"control\" />\n                                            </ng-container>\n    \n                                            <mat-form-field *ngSwitchDefault class=\"form-field\">\n                                                <mat-label [id]=\"key\" *ngIf=\"translate('questions', key, 'label') | async; let label\">\n                                                    {{ label }}&nbsp;<span class=\"required\" *ngIf=\"settings.required\" aria-hidden=\"true\">*</span>\n                                                </mat-label>\n                                                <input \n                                                    matInput\n                                                    [attr.aria-labelledby]=\"key\"\n                                                    [formControl]=\"control\"\n                                                    [type]=\"settings.type || 'text'\"\n                                                    class=\"form-control\" />\n                                            </mat-form-field>\n    \n                                        </ng-container>\n\n                                        <div class=\"form-errors\" *ngIf=\"control.errors; let errors\">\n\n                                            <div class=\"form-error form-error-required\" *ngIf=\"(showRequiredError$ | async) && (errors.required || errors.pattern && (settings.type == 'checkbox'))\">\n                                                <ng-container *ngIf=\"translate('questions', key, 'requiredError') | async; let error; else defaultRequiredError\">{{ error }}</ng-container>\n                                            </div>\n\n                                            <ng-container *ngIf=\"!errors.required\">\n\n                                                <div class=\"form-error form-error-pattern\" *ngIf=\"errors.pattern && settings.type != 'checkbox'\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'patternError') | async; let error; else defaultPatternError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-confirmation\" *ngIf=\"errors.mustBeTheSame\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'mustBeTheSameError') | async; let error; else defaultMustBeTheSameError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-mindate\" *ngIf=\"errors.minDate\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'minDateError') | async; let error; else defaultMinDateError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-maxdate\" *ngIf=\"errors.maxDate\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'maxDateError') | async; let error; else defaultMaxDateError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-minlength\" *ngIf=\"errors.minlength\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'minlengthError') | async; let error; else defaultMinlengthError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-maxlength\" *ngIf=\"errors.maxlength\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'maxlengthError') | async; let error; else defaultMaxlengthError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-telephone\" *ngIf=\"errors.validPhone\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'telephoneError') | async; let error; else defaultTelephoneError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-email\" *ngIf=\"errors.email\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'emailError') | async; let error; else defaultEmailError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-min\" *ngIf=\"errors.min\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'minError') | async; let error; else defaultMinError\">{{ error }}</ng-container>\n                                                </div>\n\n                                                <div class=\"form-error form-error-max\" *ngIf=\"errors.max\">\n                                                    <ng-container *ngIf=\"translate('questions', key, 'maxError') | async; let error; else defaultMaxError\">{{ error }}</ng-container>\n                                                </div>\n\n                                            </ng-container>\n\n                                        </div>\n\n                                        <div class=\"hint\" *ngIf=\"translate('questions', key, 'hint') | async; let hint\" [innerHTML]=\"hint\"></div>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                <div *ngIf=\"(translate('pages', page, 'footer') | async); let footer\" [innerHTML]=\"footer\"></div>\n\n                <p class=\"last-saved\" *ngIf=\"persisted.savedAt\">{{ translate('lastSavedAt') | async }}{{ persisted.savedAt.toDate() | date:'short' }}</p>\n\n                <div class=\"form-errors\" *ngIf=\"!formGroup.valid && (showRequiredError$ | async)\">\n                    <div class=\"form-error\">\n                        {{ translate('fixErrors') | async }}\n                    </div>\n                </div>\n                \n                <button class=\"previous\" *ngIf=\"showPrevious$ | async\" (click)=\"previous()\" [disabled]=\"(saving$ | async)\">{{ translate('previous') | async }}</button>\n                <button class=\"next\" *ngIf=\"showNext$ | async\" (click)=\"next()\" [disabled]=\"(saving$ | async)\">{{ translate('next') | async }}</button>\n\n                <button class=\"submit\" *ngIf=\"formGroup.valid && (showSubmit$ | async)\" (click)=\"submit()\" [disabled]=\"(saving$ | async)\">{{ translate('submit') | async }}</button>\n                <button class=\"submit\" *ngIf=\"!formGroup.valid && (showSubmit$ | async)\" (click)=\"submit()\" [disabled]=\"(saving$ | async)\">{{ translate('next') | async }}</button>\n\n                <div class=\"debug-overlay\" *ngIf=\"debugMode\">\n                    <table *ngIf=\"allPage$ | async; let allPages\">\n                        <td *ngFor=\"let _page of (uniquePage$ | async)\" [class]=\"!allPages.includes(_page) ? 'skipped' : (page === _page ? 'current' : '')\">{{ _page }}</td>\n                    </table>\n                </div>\n\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #loading>{{ translate('loading') | async }}</ng-template>\n\n<ng-template #defaultRequiredError>{{ translate('defaults', 'requiredError') | async }}</ng-template>\n<ng-template #defaultPatternError>{{ translate('defaults', 'patternError') | async }}</ng-template>\n<ng-template #defaultMustBeTheSameError>{{ translate('defaults', 'mustBeTheSameError') | async }}</ng-template>\n<ng-template #defaultMinDateError>{{ translate('defaults', 'minDateError') | async }}</ng-template>\n<ng-template #defaultMaxDateError>{{ translate('defaults', 'maxDateError') | async }}</ng-template>\n<ng-template #defaultMinlengthError>{{ translate('defaults', 'minlengthError') | async }}</ng-template>\n<ng-template #defaultMaxlengthError>{{ translate('defaults', 'maxlengthError') | async }}</ng-template>\n<ng-template #defaultTelephoneError>{{ translate('defaults', 'telephoneError') | async }}</ng-template>\n<ng-template #defaultEmailError>{{ translate('defaults', 'emailError') | async }}</ng-template>\n<ng-template #defaultMinError>{{ translate('defaults', 'minError') | async }}</ng-template>\n<ng-template #defaultMaxError>{{ translate('defaults', 'maxError') | async }}</ng-template>","styles":[".debug-overlay{background-color:#b0e0e6;font-weight:700}.debug-overlay .skipped{font-weight:400;color:grey}.debug-overlay table{width:100%}.debug-overlay .current{text-decoration:underline;color:red}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":106,"character":5},"arguments":[{"__symbolic":"reference","name":"TABLE_OF_CONTENTS"}]}],null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":109,"character":5},"arguments":[{"__symbolic":"reference","name":"PERSISTENCE_SERVICE"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":110,"character":5},"arguments":[{"__symbolic":"reference","name":"REDIRECT"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":111,"character":5},"arguments":[{"__symbolic":"reference","name":"TRANSLATION_FACTORY"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":112,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":112,"character":17},"arguments":[{"__symbolic":"reference","name":"AUTO_SAVE_INTERNAL"}]}],null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":114,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":114,"character":17},"arguments":[{"__symbolic":"reference","name":"DEBUG_MODE"}]}]],"parameters":[{"__symbolic":"reference","name":"Observable","module":"rxjs","arguments":[{"__symbolic":"reference","name":"TableOfContents"}]},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":107,"character":37},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":108,"character":29},{"__symbolic":"reference","name":"PersistenceService"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"TranslationFactory"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":113,"character":34},{"__symbolic":"reference","name":"boolean"}]}],"translate":[{"__symbolic":"method"}],"urlSegmentToPage":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"showField":[{"__symbolic":"method"}],"showFieldTest":[{"__symbolic":"method"}],"answersToDelete":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"dismissError":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"submit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"className":[{"__symbolic":"method"}],"formControl":[{"__symbolic":"method"}],"onSelectedFilesChanged":[{"__symbolic":"method"}]}},"BootstrapComptDateAdapter":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MomentDateAdapter","line":22,"character":47},"members":{"deserialize":[{"__symbolic":"method"}]}},"QuestionnaireModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":34,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"QuestionnaireComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":37,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":38,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":39,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":45,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":49,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":50,"character":4},{"__symbolic":"reference","module":"mat-file-upload","name":"MatFileUploadModule","line":51,"character":4}],"exports":[{"__symbolic":"reference","name":"QuestionnaireComponent"}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MAT_MOMENT_DATE_ADAPTER_OPTIONS","line":55,"character":14},"useValue":{"useUtc":true}},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"DateAdapter","line":57,"character":15},"useClass":{"__symbolic":"reference","name":"BootstrapComptDateAdapter"},"deps":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_LOCALE","line":59,"character":13},{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MAT_MOMENT_DATE_ADAPTER_OPTIONS","line":59,"character":30}]},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":61,"character":14},"useValue":{"__symbolic":"reference","module":"@angular/material-moment-adapter","name":"MAT_MOMENT_DATE_FORMATS","line":61,"character":42}}]}]}],"members":{}}},"origins":{"TableOfContents":"./lib/types","PersistenceService":"./lib/types","PersistedDate":"./lib/types","TranslationFactory":"./lib/types","TRANSLATION_FACTORY":"./lib/questionnaire.component","TABLE_OF_CONTENTS":"./lib/questionnaire.component","PERSISTENCE_SERVICE":"./lib/questionnaire.component","REDIRECT":"./lib/questionnaire.component","AUTO_SAVE_INTERNAL":"./lib/questionnaire.component","DEBUG_MODE":"./lib/questionnaire.component","QuestionnaireComponent":"./lib/questionnaire.component","BootstrapComptDateAdapter":"./lib/questionnaire.module","QuestionnaireModule":"./lib/questionnaire.module"},"importAs":"@ngx-questionnaire/core"}