@openmrs/ngx-formentry 3.2.1-pre.278 → 3.2.1-pre.280

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm2020/form-entry/form-factory/question.factory.mjs +3 -1
  2. package/esm2020/form-entry/form-renderer/form-renderer.component.mjs +3 -3
  3. package/esm2020/form-entry/value-adapters/diagnosis.adapter.mjs +100 -15
  4. package/esm2020/form-entry/value-adapters/encounter.adapter.mjs +1 -1
  5. package/fesm2015/openmrs-ngx-formentry.mjs +105 -16
  6. package/fesm2015/openmrs-ngx-formentry.mjs.map +1 -1
  7. package/fesm2020/openmrs-ngx-formentry.mjs +101 -16
  8. package/fesm2020/openmrs-ngx-formentry.mjs.map +1 -1
  9. package/form-entry/value-adapters/diagnosis.adapter.d.ts +3 -0
  10. package/package.json +1 -1
package/fesm2020/openmrs-ngx-formentry.mjs CHANGED
@@ -8693,10 +8693,10 @@ class FormRendererComponent {
8693
8693
  }
8694
8694
  }
8695
8695
  FormRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: i4.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
8696
- FormRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap", controlId: "controlId" }, usesOnChanges: true, ngImport: i0, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n <ofe-tab\n [tabTitle]=\"question.label | translate\"\n *ngFor=\"let question of node.question.questions; let i = index\"\n >\n <ofe-form-renderer\n [node]=\"node.children[question.key] | translate\"\n [parentComponent]=\"this\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n >\n </ofe-form-renderer>\n </ofe-tab>\n <div *ngIf=\"showErrors()\" class=\"container\">\n <div\n data-notification\n *ngFor=\"let errorNode of errorNodes\"\n class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n role=\"alert\"\n (click)=\"announceErrorField(errorNode)\"\n >\n <div class=\"cds--inline-notification__details\">\n <div class=\"cds--inline-notification__text-wrapper\">\n <p class=\"cds--inline-notification__title\">\n {{ errorNode.question.label | translate }}\n </p>\n <p class=\"cds--inline-notification__subtitle\">\n {{ getControlError(errorNode | translate) }}\n </p>\n </div>\n </div>\n <button\n tabindex=\"0\"\n class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n type=\"button\"\n >\n {{ 'fix' | translate }}\n </button>\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n style=\"will-change: transform\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"cds--inline-notification__icon\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n ></path>\n <path\n d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n data-icon-path=\"inner-path\"\n opacity=\"0\"\n ></path>\n </svg>\n </div>\n </div>\n </ofe-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n <!--Page Components-->\n <ofe-custom-component-wrapper\n [dark]=\"theme === 'light'\"\n [componentConfigs]=\"node.question.componentConfigs\"\n >\n </ofe-custom-component-wrapper>\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"parentGroup\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n <div class=\"cds--layout\">\n <ul class=\"cds--accordion cds--accordion--end\">\n <li\n class=\"cds--accordion__item accordion-content-override\"\n [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\"\n >\n <button\n type=\"button\"\n aria-controls=\"accordion-item-:r27:\"\n aria-expanded=\"false\"\n (click)=\"isCollapsed = !isCollapsed\"\n class=\"cds--accordion__heading\"\n >\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n class=\"cds--accordion__arrow\"\n >\n <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n </svg>\n <div class=\"cds--accordion__title\">\n {{ node.question.label | translate }}\n </div>\n </button>\n <div id=\"accordion-item-:r27:\" class=\"cds--accordion__content\">\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"parentGroup\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n </li>\n </ul>\n </div>\n</div>\n\n<!-- MESSAGES -->\n<div\n *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n class=\"alert alert-warning\"\n>\n <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n<div\n *ngIf=\"node.question.controlType === 0\"\n [formGroup]=\"parentGroup\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <ofe-custom-component-wrapper\n [dark]=\"!(theme === 'light')\"\n [componentConfigs]=\"node.question.componentConfigs\"\n >\n </ofe-custom-component-wrapper>\n <div class=\"cds--form-item\">\n <!--LEAF CONTROL-->\n <div class=\"question-area\">\n <a\n class=\"form-tooltip pull-right\"\n (click)=\"toggleInformation(node.question.extras.id)\"\n data-placement=\"right\"\n *ngIf=\"\n node.question &&\n node.question.extras.questionInfo &&\n node.question.extras.questionInfo !== '' &&\n node.question.extras.questionInfo !== ' '\n \"\n >\n <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n </a>\n\n <label\n *ngIf=\"node.question.label\"\n [style.color]=\"hasErrors() ? 'red' : ''\"\n class=\"cds--label\"\n [attr.for]=\"node.question.key | translate\"\n >\n {{ node.question.required ? '*' : '' }}\n {{ node.question.prefix ? node.question.prefix + ' ' : '' }}\n {{ node.question.label | translate }}\n </label>\n\n <div\n *ngIf=\"\n node.question.extras.questionOptions.customControl;\n else nativeControls\n \"\n >\n <ofe-custom-control-wrapper\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n [question]=\"node.question\"\n >\n </ofe-custom-control-wrapper>\n </div>\n\n <ng-template #nativeControls>\n <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n <ofe-select\n [theme]=\"theme\"\n *ngSwitchCase=\"'select'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n >\n <option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </option>\n </ofe-select>\n\n <div *ngSwitchCase=\"'file'\">\n <ofe-file-upload\n [dataSource]=\"dataSource\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n (fileChanged)=\"upload($event)\"\n >\n </ofe-file-upload>\n </div>\n\n <textarea\n [theme]=\"theme\"\n ofeTextAreaInput\n [ngClass]=\"{\n 'cds--text-area--light': theme === 'light',\n 'cds--text-area--invalid': !node.control.valid\n }\"\n [placeholder]=\"node.question.placeholder | translate\"\n [rows]=\"node.question.rows\"\n class=\"cds--text-area\"\n *ngSwitchCase=\"'textarea'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n [readOnly]=\"node.question.extras.readOnly\"\n >\n </textarea>\n\n <ofe-remote-select\n [theme]=\"theme\"\n *ngSwitchCase=\"'remote-select'\"\n [placeholder]=\"node.question.placeholder | translate\"\n tabindex=\"0\"\n [dataSource]=\"dataSource\"\n [componentID]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n ></ofe-remote-select>\n\n <ofe-ngx-date-time-picker\n [weeks]=\"node.question.extras.questionOptions.weeksList\"\n [showWeeks]=\"node.question.showWeeksAdder\"\n [theme]=\"theme\"\n [id]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n *ngSwitchCase=\"'date'\"\n [datePickerFormat]=\"node.question.datePickerFormat\"\n >\n </ofe-ngx-date-time-picker>\n <ng-select\n [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'multi-select'\"\n [multiple]=\"true\"\n [appendTo]=\"'form'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n >\n <ng-option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </ng-option>\n </ng-select>\n\n <ng-select\n [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'single-select'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n >\n <ng-option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </ng-option>\n </ng-select>\n\n <ofe-number-input\n [theme]=\"theme\"\n *ngSwitchCase=\"'number'\"\n [id]=\"node.question.key + 'id'\"\n [min]=\"node.question.extras.questionOptions.min\"\n [max]=\"node.question.extras.questionOptions.max\"\n [maxlength]=\"node.question.extras.questionOptions.maxLength\"\n [minlength]=\"node.question.extras.questionOptions.minLength\"\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n >\n </ofe-number-input>\n\n <input\n [theme]=\"theme\"\n class=\"cds--text-input\"\n ofeTextInput\n *ngSwitchDefault\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n [type]=\"node.question.renderingType\"\n [id]=\"node.question.key + 'id'\"\n [readOnly]=\"node.question.extras.readOnly\"\n />\n\n <div *ngSwitchCase=\"'radio'\">\n <ofe-radio-button\n [id]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n [options]=\"node.question.options\"\n [allowUnselect]=\"node.question.allowUnselect\"\n [selected]=\"node.control.value\"\n [orientation]=\"node.question.orientation\"\n ></ofe-radio-button>\n </div>\n\n <div *ngSwitchCase=\"'checkbox'\">\n <ofe-checkbox\n [id]=\"node.question.key + 'id' + controlId\"\n [formControlName]=\"node.question.key\"\n [options]=\"node.question.options\"\n [selected]=\"node.control.value\"\n ></ofe-checkbox>\n </div>\n\n <div\n *ngIf=\"\n node.question.enableHistoricalValue &&\n node.question.historicalDisplay\n \"\n style=\"margin-top: 2px\"\n >\n <div class=\"container-fluid\">\n <div class=\"use-value\">\n <div class=\"col-xs-9\">\n <span class=\"text-warning\"\n >{{ 'previousValue' | translate }}:\n </span>\n <strong>{{ node.question.historicalDisplay?.text }}</strong>\n <span *ngIf=\"node.question.showHistoricalValueDate\">\n <span> | </span>\n <strong class=\"text-primary\"\n >{{ node.question.historicalDisplay?._date | date }}\n </strong>\n <span\n class=\"text-primary\"\n *ngIf=\"\n node.question.historicalDisplay &&\n node.question.historicalDisplay._date\n \"\n >\n ({{\n node.question.historicalDisplay._date | timeAgo\n }})</span\n >\n </span>\n </div>\n <button\n type=\"button\"\n [name]=\"'historyValue'\"\n class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\"\n >\n {{ 'useValue' | translate }}\n </button>\n </div>\n </div>\n </div>\n <ofe-appointments-overview [node]=\"node\"></ofe-appointments-overview>\n <div *ngIf=\"hasErrors()\">\n <div *ngFor=\"let e of errors()\">\n <span class=\"text-danger\">{{ e }}</span>\n </div>\n </div>\n </div>\n </ng-template>\n\n <div\n class=\"question-info col-md-12 col-lg-12 col-sm-12\"\n id=\"{{ node.question.extras.id }}\"\n *ngIf=\"\n node.question &&\n node.question.extras.questionInfo &&\n node.question.extras.questionInfo !== '' &&\n node.question.extras.questionInfo !== ' '\n \"\n >\n {{ node.question.extras.questionInfo | translate }}\n </div>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"node.question.controlType === 1\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <!--ARRAY CONTROL-->\n <div [ngSwitch]=\"node.question.renderingType\">\n <div class=\"well\" style=\"padding: 2px\" *ngSwitchCase=\"'repeating'\">\n <h4 style=\"margin: 2px; font-weight: bold\">\n {{ node.question.label | translate }}\n </h4>\n <div>\n <label\n class=\"cds--label\"\n *ngIf=\"node.question.extras.questionOptions.min\"\n style=\"margin-right: 2px\"\n >min: {{ node.question.extras.questionOptions.min }}</label\n >\n <label\n class=\"cds--label\"\n *ngIf=\"node.question.extras.questionOptions.max\"\n >max: {{ node.question.extras.questionOptions.max }}</label\n >\n </div>\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 2px;\n \"\n />\n <div [ngSwitch]=\"node.question.extras.type\">\n <div *ngSwitchCase=\"'testOrder'\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n <div>{{ child.orderNumber }}</div>\n <div class=\"cds--layout\">\n <button\n type=\"button \"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n </div>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n\n <div *ngSwitchCase=\"'diagnosis'\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n <button\n type=\"button \"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n\n <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n [controlId]=\"i\"\n ></ofe-form-renderer>\n <button\n type=\"button\"\n style=\"width: 100px\"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n </div>\n <button\n type=\"button\"\n class=\"cds--btn cds--btn--primary cds--btn--sm\"\n (click)=\"node.createChildNode()\"\n [ngClass]=\"{\n disabled:\n node.children.length >= node.question.extras.questionOptions.max\n }\"\n >\n {{ 'add' | translate }}\n </button>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"node.question.controlType === 2\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <!--GROUP-->\n <div [ngSwitch]=\"node.question.renderingType\">\n <div *ngSwitchCase=\"'group'\">\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n <div\n *ngSwitchCase=\"'field-set'\"\n style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n >\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n </div>\n</div>\n", styles: [".slider{width:auto;margin:30px}.slick-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:700}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transition-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:.125rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box;border-bottom:none;padding:0;text-wrap:wrap}.accordion-content-override:hover{opacity:unset;border-bottom:none}.question-area{width:18rem;max-width:18rem}.question-area>label{text-wrap:wrap}.in-line{display:inline-block;padding-right:.5rem}.use-value{text-wrap:wrap}.custom-text-area{width:100%}\n"], components: [{ type: TabSetComponent, selector: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["tabSelect"] }, { type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: i13.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i13.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }, { type: NumberInputComponent, selector: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "maxlength", "minlength", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect", "orientation"] }, { type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: ["node"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i20.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i20.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: ["theme", "invalid", "skeleton"] }, { type: i20.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i20.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "translate": i4.TranslatePipe, "date": i1.DatePipe, "timeAgo": TimeAgoPipe } });
8696
+ FormRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: { parentComponent: "parentComponent", node: "node", parentGroup: "parentGroup", theme: "theme", labelMap: "labelMap", controlId: "controlId" }, usesOnChanges: true, ngImport: i0, template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n <ofe-tab\n [tabTitle]=\"question.label | translate\"\n *ngFor=\"let question of node.question.questions; let i = index\"\n >\n <ofe-form-renderer\n [node]=\"node.children[question.key] | translate\"\n [parentComponent]=\"this\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n >\n </ofe-form-renderer>\n </ofe-tab>\n <div *ngIf=\"showErrors()\" class=\"container\">\n <div\n data-notification\n *ngFor=\"let errorNode of errorNodes\"\n class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n role=\"alert\"\n (click)=\"announceErrorField(errorNode)\"\n >\n <div class=\"cds--inline-notification__details\">\n <div class=\"cds--inline-notification__text-wrapper\">\n <p class=\"cds--inline-notification__title\">\n {{ errorNode.question.label | translate }}\n </p>\n <p class=\"cds--inline-notification__subtitle\">\n {{ getControlError(errorNode | translate) }}\n </p>\n </div>\n </div>\n <button\n tabindex=\"0\"\n class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n type=\"button\"\n >\n {{ 'fix' | translate }}\n </button>\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n style=\"will-change: transform\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"cds--inline-notification__icon\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n ></path>\n <path\n d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n data-icon-path=\"inner-path\"\n opacity=\"0\"\n ></path>\n </svg>\n </div>\n </div>\n </ofe-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n <!--Page Components-->\n <ofe-custom-component-wrapper\n [dark]=\"theme === 'light'\"\n [componentConfigs]=\"node.question.componentConfigs\"\n >\n </ofe-custom-component-wrapper>\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"parentGroup\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n <div class=\"cds--layout\">\n <ul class=\"cds--accordion cds--accordion--end\">\n <li\n class=\"cds--accordion__item accordion-content-override\"\n [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\"\n >\n <button\n type=\"button\"\n aria-controls=\"accordion-item-:r27:\"\n aria-expanded=\"false\"\n (click)=\"isCollapsed = !isCollapsed\"\n class=\"cds--accordion__heading\"\n >\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n class=\"cds--accordion__arrow\"\n >\n <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n </svg>\n <div class=\"cds--accordion__title\">\n {{ node.question.label | translate }}\n </div>\n </button>\n <div id=\"accordion-item-:r27:\" class=\"cds--accordion__content\">\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"parentGroup\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n </li>\n </ul>\n </div>\n</div>\n\n<!-- MESSAGES -->\n<div\n *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n class=\"alert alert-warning\"\n>\n <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n<div\n *ngIf=\"node.question.controlType === 0\"\n [formGroup]=\"parentGroup\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <ofe-custom-component-wrapper\n [dark]=\"!(theme === 'light')\"\n [componentConfigs]=\"node.question.componentConfigs\"\n >\n </ofe-custom-component-wrapper>\n <div class=\"cds--form-item\">\n <!--LEAF CONTROL-->\n <div class=\"question-area\">\n <a\n class=\"form-tooltip pull-right\"\n (click)=\"toggleInformation(node.question.extras.id)\"\n data-placement=\"right\"\n *ngIf=\"\n node.question &&\n node.question.extras.questionInfo &&\n node.question.extras.questionInfo !== '' &&\n node.question.extras.questionInfo !== ' '\n \"\n >\n <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n </a>\n\n <label\n *ngIf=\"node.question.label\"\n [style.color]=\"hasErrors() ? 'red' : ''\"\n class=\"cds--label\"\n [attr.for]=\"node.question.key | translate\"\n >\n {{ node.question.required ? '*' : '' }}\n {{ node.question.prefix ? node.question.prefix + ' ' : '' }}\n {{ node.question.label | translate }}\n </label>\n\n <div\n *ngIf=\"\n node.question.extras.questionOptions.customControl;\n else nativeControls\n \"\n >\n <ofe-custom-control-wrapper\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n [question]=\"node.question\"\n >\n </ofe-custom-control-wrapper>\n </div>\n\n <ng-template #nativeControls>\n <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n <ofe-select\n [theme]=\"theme\"\n *ngSwitchCase=\"'select'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n >\n <option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </option>\n </ofe-select>\n\n <div *ngSwitchCase=\"'file'\">\n <ofe-file-upload\n [dataSource]=\"dataSource\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n (fileChanged)=\"upload($event)\"\n >\n </ofe-file-upload>\n </div>\n\n <textarea\n [theme]=\"theme\"\n ofeTextAreaInput\n [ngClass]=\"{\n 'cds--text-area--light': theme === 'light',\n 'cds--text-area--invalid': !node.control.valid\n }\"\n [placeholder]=\"node.question.placeholder | translate\"\n [rows]=\"node.question.rows\"\n class=\"cds--text-area\"\n *ngSwitchCase=\"'textarea'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n [readOnly]=\"node.question.extras.readOnly\"\n >\n </textarea>\n\n <ofe-remote-select\n [theme]=\"theme\"\n *ngSwitchCase=\"'remote-select'\"\n [placeholder]=\"node.question.placeholder | translate\"\n tabindex=\"0\"\n [dataSource]=\"dataSource\"\n [componentID]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n ></ofe-remote-select>\n\n <ofe-ngx-date-time-picker\n [weeks]=\"node.question.extras.questionOptions.weeksList\"\n [showWeeks]=\"node.question.showWeeksAdder\"\n [theme]=\"theme\"\n [id]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n *ngSwitchCase=\"'date'\"\n [datePickerFormat]=\"node.question.datePickerFormat\"\n >\n </ofe-ngx-date-time-picker>\n <ng-select\n [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'multi-select'\"\n [multiple]=\"true\"\n [appendTo]=\"'form'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n >\n <ng-option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </ng-option>\n </ng-select>\n\n <ng-select\n [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'single-select'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n >\n <ng-option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </ng-option>\n </ng-select>\n\n <ofe-number-input\n [theme]=\"theme\"\n *ngSwitchCase=\"'number'\"\n [id]=\"node.question.key + 'id'\"\n [min]=\"node.question.extras.questionOptions.min\"\n [max]=\"node.question.extras.questionOptions.max\"\n [maxlength]=\"node.question.extras.questionOptions.maxLength\"\n [minlength]=\"node.question.extras.questionOptions.minLength\"\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n >\n </ofe-number-input>\n\n <input\n [theme]=\"theme\"\n class=\"cds--text-input\"\n ofeTextInput\n *ngSwitchDefault\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n [type]=\"node.question.renderingType\"\n [id]=\"node.question.key + 'id'\"\n [readOnly]=\"node.question.extras.readOnly\"\n />\n\n <div *ngSwitchCase=\"'radio'\">\n <ofe-radio-button\n [id]=\"node.question.key + 'id' + controlId\"\n [formControlName]=\"node.question.key\"\n [options]=\"node.question.options\"\n [allowUnselect]=\"node.question.allowUnselect\"\n [selected]=\"node.control.value\"\n [orientation]=\"node.question.orientation\"\n ></ofe-radio-button>\n </div>\n\n <div *ngSwitchCase=\"'checkbox'\">\n <ofe-checkbox\n [id]=\"node.question.key + 'id' + controlId\"\n [formControlName]=\"node.question.key\"\n [options]=\"node.question.options\"\n [selected]=\"node.control.value\"\n ></ofe-checkbox>\n </div>\n\n <div\n *ngIf=\"\n node.question.enableHistoricalValue &&\n node.question.historicalDisplay\n \"\n style=\"margin-top: 2px\"\n >\n <div class=\"container-fluid\">\n <div class=\"use-value\">\n <div class=\"col-xs-9\">\n <span class=\"text-warning\"\n >{{ 'previousValue' | translate }}:\n </span>\n <strong>{{ node.question.historicalDisplay?.text }}</strong>\n <span *ngIf=\"node.question.showHistoricalValueDate\">\n <span> | </span>\n <strong class=\"text-primary\"\n >{{ node.question.historicalDisplay?._date | date }}\n </strong>\n <span\n class=\"text-primary\"\n *ngIf=\"\n node.question.historicalDisplay &&\n node.question.historicalDisplay._date\n \"\n >\n ({{\n node.question.historicalDisplay._date | timeAgo\n }})</span\n >\n </span>\n </div>\n <button\n type=\"button\"\n [name]=\"'historyValue'\"\n class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\"\n >\n {{ 'useValue' | translate }}\n </button>\n </div>\n </div>\n </div>\n <ofe-appointments-overview [node]=\"node\"></ofe-appointments-overview>\n <div *ngIf=\"hasErrors()\">\n <div *ngFor=\"let e of errors()\">\n <span class=\"text-danger\">{{ e }}</span>\n </div>\n </div>\n </div>\n </ng-template>\n\n <div\n class=\"question-info col-md-12 col-lg-12 col-sm-12\"\n id=\"{{ node.question.extras.id }}\"\n *ngIf=\"\n node.question &&\n node.question.extras.questionInfo &&\n node.question.extras.questionInfo !== '' &&\n node.question.extras.questionInfo !== ' '\n \"\n >\n {{ node.question.extras.questionInfo | translate }}\n </div>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"node.question.controlType === 1\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <!--ARRAY CONTROL-->\n <div [ngSwitch]=\"node.question.renderingType\">\n <div class=\"well\" style=\"padding: 2px\" *ngSwitchCase=\"'repeating'\">\n <h4 style=\"margin: 2px; font-weight: bold\">\n {{ node.question.label | translate }}\n </h4>\n <div>\n <label\n class=\"cds--label\"\n *ngIf=\"node.question.extras.questionOptions.min\"\n style=\"margin-right: 2px\"\n >min: {{ node.question.extras.questionOptions.min }}</label\n >\n <label\n class=\"cds--label\"\n *ngIf=\"node.question.extras.questionOptions.max\"\n >max: {{ node.question.extras.questionOptions.max }}</label\n >\n </div>\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 2px;\n \"\n />\n <div [ngSwitch]=\"node.question.extras.type\">\n <div *ngSwitchCase=\"'testOrder'\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n <div>{{ child.orderNumber }}</div>\n <div class=\"cds--layout\">\n <button\n type=\"button \"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n </div>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n\n <div *ngSwitchCase=\"'diagnosis'\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n <button\n type=\"button \"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n\n <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n [controlId]=\"i\"\n ></ofe-form-renderer>\n <button\n type=\"button\"\n style=\"width: 100px\"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n <div *ngSwitchCase=\"'diagnosisGroup'\" style=\"margin-bottom: 20px\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n [controlId]=\"i\"\n ></ofe-form-renderer>\n <button\n type=\"button\"\n style=\"width: 100px\"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n </div>\n <button\n type=\"button\"\n class=\"cds--btn cds--btn--primary cds--btn--sm\"\n (click)=\"node.createChildNode()\"\n [ngClass]=\"{\n disabled:\n node.children.length >= node.question.extras.questionOptions.max\n }\"\n >\n {{ 'add' | translate }}\n </button>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"node.question.controlType === 2\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <!--GROUP-->\n <div [ngSwitch]=\"node.question.renderingType\">\n <div *ngSwitchCase=\"'group'\">\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n <div\n *ngSwitchCase=\"'field-set'\"\n style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n >\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n </div>\n</div>\n", styles: [".slider{width:auto;margin:30px}.slick-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:700}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transition-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:.125rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box;border-bottom:none;padding:0;text-wrap:wrap}.accordion-content-override:hover{opacity:unset;border-bottom:none}.question-area{width:18rem;max-width:18rem}.question-area>label{text-wrap:wrap}.in-line{display:inline-block;padding-right:.5rem}.use-value{text-wrap:wrap}.custom-text-area{width:100%}\n"], components: [{ type: TabSetComponent, selector: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex"], outputs: ["tabSelect"] }, { type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "dataSource"], outputs: ["done"] }, { type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { type: i13.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i13.ɵr, selector: "ng-option", inputs: ["disabled", "value"] }, { type: NumberInputComponent, selector: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "size", "required", "value", "min", "max", "maxlength", "minlength", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect", "orientation"] }, { type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: ["node"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i20.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i20.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i20.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: ["theme", "invalid", "skeleton"] }, { type: i20.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i20.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }], pipes: { "translate": i4.TranslatePipe, "date": i1.DatePipe, "timeAgo": TimeAgoPipe } });
8697
8697
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormRendererComponent, decorators: [{
8698
8698
  type: Component,
8699
- args: [{ selector: 'ofe-form-renderer', template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n <ofe-tab\n [tabTitle]=\"question.label | translate\"\n *ngFor=\"let question of node.question.questions; let i = index\"\n >\n <ofe-form-renderer\n [node]=\"node.children[question.key] | translate\"\n [parentComponent]=\"this\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n >\n </ofe-form-renderer>\n </ofe-tab>\n <div *ngIf=\"showErrors()\" class=\"container\">\n <div\n data-notification\n *ngFor=\"let errorNode of errorNodes\"\n class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n role=\"alert\"\n (click)=\"announceErrorField(errorNode)\"\n >\n <div class=\"cds--inline-notification__details\">\n <div class=\"cds--inline-notification__text-wrapper\">\n <p class=\"cds--inline-notification__title\">\n {{ errorNode.question.label | translate }}\n </p>\n <p class=\"cds--inline-notification__subtitle\">\n {{ getControlError(errorNode | translate) }}\n </p>\n </div>\n </div>\n <button\n tabindex=\"0\"\n class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n type=\"button\"\n >\n {{ 'fix' | translate }}\n </button>\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n style=\"will-change: transform\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"cds--inline-notification__icon\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n ></path>\n <path\n d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n data-icon-path=\"inner-path\"\n opacity=\"0\"\n ></path>\n </svg>\n </div>\n </div>\n </ofe-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n <!--Page Components-->\n <ofe-custom-component-wrapper\n [dark]=\"theme === 'light'\"\n [componentConfigs]=\"node.question.componentConfigs\"\n >\n </ofe-custom-component-wrapper>\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"parentGroup\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n <div class=\"cds--layout\">\n <ul class=\"cds--accordion cds--accordion--end\">\n <li\n class=\"cds--accordion__item accordion-content-override\"\n [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\"\n >\n <button\n type=\"button\"\n aria-controls=\"accordion-item-:r27:\"\n aria-expanded=\"false\"\n (click)=\"isCollapsed = !isCollapsed\"\n class=\"cds--accordion__heading\"\n >\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n class=\"cds--accordion__arrow\"\n >\n <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n </svg>\n <div class=\"cds--accordion__title\">\n {{ node.question.label | translate }}\n </div>\n </button>\n <div id=\"accordion-item-:r27:\" class=\"cds--accordion__content\">\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"parentGroup\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n </li>\n </ul>\n </div>\n</div>\n\n<!-- MESSAGES -->\n<div\n *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n class=\"alert alert-warning\"\n>\n <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n<div\n *ngIf=\"node.question.controlType === 0\"\n [formGroup]=\"parentGroup\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <ofe-custom-component-wrapper\n [dark]=\"!(theme === 'light')\"\n [componentConfigs]=\"node.question.componentConfigs\"\n >\n </ofe-custom-component-wrapper>\n <div class=\"cds--form-item\">\n <!--LEAF CONTROL-->\n <div class=\"question-area\">\n <a\n class=\"form-tooltip pull-right\"\n (click)=\"toggleInformation(node.question.extras.id)\"\n data-placement=\"right\"\n *ngIf=\"\n node.question &&\n node.question.extras.questionInfo &&\n node.question.extras.questionInfo !== '' &&\n node.question.extras.questionInfo !== ' '\n \"\n >\n <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n </a>\n\n <label\n *ngIf=\"node.question.label\"\n [style.color]=\"hasErrors() ? 'red' : ''\"\n class=\"cds--label\"\n [attr.for]=\"node.question.key | translate\"\n >\n {{ node.question.required ? '*' : '' }}\n {{ node.question.prefix ? node.question.prefix + ' ' : '' }}\n {{ node.question.label | translate }}\n </label>\n\n <div\n *ngIf=\"\n node.question.extras.questionOptions.customControl;\n else nativeControls\n \"\n >\n <ofe-custom-control-wrapper\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n [question]=\"node.question\"\n >\n </ofe-custom-control-wrapper>\n </div>\n\n <ng-template #nativeControls>\n <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n <ofe-select\n [theme]=\"theme\"\n *ngSwitchCase=\"'select'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n >\n <option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </option>\n </ofe-select>\n\n <div *ngSwitchCase=\"'file'\">\n <ofe-file-upload\n [dataSource]=\"dataSource\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n (fileChanged)=\"upload($event)\"\n >\n </ofe-file-upload>\n </div>\n\n <textarea\n [theme]=\"theme\"\n ofeTextAreaInput\n [ngClass]=\"{\n 'cds--text-area--light': theme === 'light',\n 'cds--text-area--invalid': !node.control.valid\n }\"\n [placeholder]=\"node.question.placeholder | translate\"\n [rows]=\"node.question.rows\"\n class=\"cds--text-area\"\n *ngSwitchCase=\"'textarea'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n [readOnly]=\"node.question.extras.readOnly\"\n >\n </textarea>\n\n <ofe-remote-select\n [theme]=\"theme\"\n *ngSwitchCase=\"'remote-select'\"\n [placeholder]=\"node.question.placeholder | translate\"\n tabindex=\"0\"\n [dataSource]=\"dataSource\"\n [componentID]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n ></ofe-remote-select>\n\n <ofe-ngx-date-time-picker\n [weeks]=\"node.question.extras.questionOptions.weeksList\"\n [showWeeks]=\"node.question.showWeeksAdder\"\n [theme]=\"theme\"\n [id]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n *ngSwitchCase=\"'date'\"\n [datePickerFormat]=\"node.question.datePickerFormat\"\n >\n </ofe-ngx-date-time-picker>\n <ng-select\n [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'multi-select'\"\n [multiple]=\"true\"\n [appendTo]=\"'form'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n >\n <ng-option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </ng-option>\n </ng-select>\n\n <ng-select\n [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'single-select'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n >\n <ng-option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </ng-option>\n </ng-select>\n\n <ofe-number-input\n [theme]=\"theme\"\n *ngSwitchCase=\"'number'\"\n [id]=\"node.question.key + 'id'\"\n [min]=\"node.question.extras.questionOptions.min\"\n [max]=\"node.question.extras.questionOptions.max\"\n [maxlength]=\"node.question.extras.questionOptions.maxLength\"\n [minlength]=\"node.question.extras.questionOptions.minLength\"\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n >\n </ofe-number-input>\n\n <input\n [theme]=\"theme\"\n class=\"cds--text-input\"\n ofeTextInput\n *ngSwitchDefault\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n [type]=\"node.question.renderingType\"\n [id]=\"node.question.key + 'id'\"\n [readOnly]=\"node.question.extras.readOnly\"\n />\n\n <div *ngSwitchCase=\"'radio'\">\n <ofe-radio-button\n [id]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n [options]=\"node.question.options\"\n [allowUnselect]=\"node.question.allowUnselect\"\n [selected]=\"node.control.value\"\n [orientation]=\"node.question.orientation\"\n ></ofe-radio-button>\n </div>\n\n <div *ngSwitchCase=\"'checkbox'\">\n <ofe-checkbox\n [id]=\"node.question.key + 'id' + controlId\"\n [formControlName]=\"node.question.key\"\n [options]=\"node.question.options\"\n [selected]=\"node.control.value\"\n ></ofe-checkbox>\n </div>\n\n <div\n *ngIf=\"\n node.question.enableHistoricalValue &&\n node.question.historicalDisplay\n \"\n style=\"margin-top: 2px\"\n >\n <div class=\"container-fluid\">\n <div class=\"use-value\">\n <div class=\"col-xs-9\">\n <span class=\"text-warning\"\n >{{ 'previousValue' | translate }}:\n </span>\n <strong>{{ node.question.historicalDisplay?.text }}</strong>\n <span *ngIf=\"node.question.showHistoricalValueDate\">\n <span> | </span>\n <strong class=\"text-primary\"\n >{{ node.question.historicalDisplay?._date | date }}\n </strong>\n <span\n class=\"text-primary\"\n *ngIf=\"\n node.question.historicalDisplay &&\n node.question.historicalDisplay._date\n \"\n >\n ({{\n node.question.historicalDisplay._date | timeAgo\n }})</span\n >\n </span>\n </div>\n <button\n type=\"button\"\n [name]=\"'historyValue'\"\n class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\"\n >\n {{ 'useValue' | translate }}\n </button>\n </div>\n </div>\n </div>\n <ofe-appointments-overview [node]=\"node\"></ofe-appointments-overview>\n <div *ngIf=\"hasErrors()\">\n <div *ngFor=\"let e of errors()\">\n <span class=\"text-danger\">{{ e }}</span>\n </div>\n </div>\n </div>\n </ng-template>\n\n <div\n class=\"question-info col-md-12 col-lg-12 col-sm-12\"\n id=\"{{ node.question.extras.id }}\"\n *ngIf=\"\n node.question &&\n node.question.extras.questionInfo &&\n node.question.extras.questionInfo !== '' &&\n node.question.extras.questionInfo !== ' '\n \"\n >\n {{ node.question.extras.questionInfo | translate }}\n </div>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"node.question.controlType === 1\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <!--ARRAY CONTROL-->\n <div [ngSwitch]=\"node.question.renderingType\">\n <div class=\"well\" style=\"padding: 2px\" *ngSwitchCase=\"'repeating'\">\n <h4 style=\"margin: 2px; font-weight: bold\">\n {{ node.question.label | translate }}\n </h4>\n <div>\n <label\n class=\"cds--label\"\n *ngIf=\"node.question.extras.questionOptions.min\"\n style=\"margin-right: 2px\"\n >min: {{ node.question.extras.questionOptions.min }}</label\n >\n <label\n class=\"cds--label\"\n *ngIf=\"node.question.extras.questionOptions.max\"\n >max: {{ node.question.extras.questionOptions.max }}</label\n >\n </div>\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 2px;\n \"\n />\n <div [ngSwitch]=\"node.question.extras.type\">\n <div *ngSwitchCase=\"'testOrder'\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n <div>{{ child.orderNumber }}</div>\n <div class=\"cds--layout\">\n <button\n type=\"button \"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n </div>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n\n <div *ngSwitchCase=\"'diagnosis'\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n <button\n type=\"button \"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n\n <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n [controlId]=\"i\"\n ></ofe-form-renderer>\n <button\n type=\"button\"\n style=\"width: 100px\"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n </div>\n <button\n type=\"button\"\n class=\"cds--btn cds--btn--primary cds--btn--sm\"\n (click)=\"node.createChildNode()\"\n [ngClass]=\"{\n disabled:\n node.children.length >= node.question.extras.questionOptions.max\n }\"\n >\n {{ 'add' | translate }}\n </button>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"node.question.controlType === 2\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <!--GROUP-->\n <div [ngSwitch]=\"node.question.renderingType\">\n <div *ngSwitchCase=\"'group'\">\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n <div\n *ngSwitchCase=\"'field-set'\"\n style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n >\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n </div>\n</div>\n", styles: [".slider{width:auto;margin:30px}.slick-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:700}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transition-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:.125rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box;border-bottom:none;padding:0;text-wrap:wrap}.accordion-content-override:hover{opacity:unset;border-bottom:none}.question-area{width:18rem;max-width:18rem}.question-area>label{text-wrap:wrap}.in-line{display:inline-block;padding-right:.5rem}.use-value{text-wrap:wrap}.custom-text-area{width:100%}\n"] }]
8699
+ args: [{ selector: 'ofe-form-renderer', template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n <ofe-tab-set (tabSelect)=\"tabSelected($event)\" [selectedIndex]=\"activeTab\">\n <ofe-tab\n [tabTitle]=\"question.label | translate\"\n *ngFor=\"let question of node.question.questions; let i = index\"\n >\n <ofe-form-renderer\n [node]=\"node.children[question.key] | translate\"\n [parentComponent]=\"this\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n >\n </ofe-form-renderer>\n </ofe-tab>\n <div *ngIf=\"showErrors()\" class=\"container\">\n <div\n data-notification\n *ngFor=\"let errorNode of errorNodes\"\n class=\"cds--inline-notification cds--inline-notification--error cds--inline-notification--low-contrast pointer\"\n role=\"alert\"\n (click)=\"announceErrorField(errorNode)\"\n >\n <div class=\"cds--inline-notification__details\">\n <div class=\"cds--inline-notification__text-wrapper\">\n <p class=\"cds--inline-notification__title\">\n {{ errorNode.question.label | translate }}\n </p>\n <p class=\"cds--inline-notification__subtitle\">\n {{ getControlError(errorNode | translate) }}\n </p>\n </div>\n </div>\n <button\n tabindex=\"0\"\n class=\"cds--inline-notification__action-button cds--btn cds--btn--sm cds--btn--ghost\"\n type=\"button\"\n >\n {{ 'fix' | translate }}\n </button>\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n style=\"will-change: transform\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"cds--inline-notification__icon\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n ></path>\n <path\n d=\"M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z\"\n data-icon-path=\"inner-path\"\n opacity=\"0\"\n ></path>\n </svg>\n </div>\n </div>\n </ofe-tab-set>\n</div>\n<div *ngIf=\"node.question.renderingType === 'page'\">\n <!--Page Components-->\n <ofe-custom-component-wrapper\n [dark]=\"theme === 'light'\"\n [componentConfigs]=\"node.question.componentConfigs\"\n >\n </ofe-custom-component-wrapper>\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"parentGroup\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n</div>\n<div *ngIf=\"node.question.renderingType === 'section' && checkSection(node)\">\n <div class=\"cds--layout\">\n <ul class=\"cds--accordion cds--accordion--end\">\n <li\n class=\"cds--accordion__item accordion-content-override\"\n [ngClass]=\"{ 'cds--accordion__item--active': !isCollapsed }\"\n >\n <button\n type=\"button\"\n aria-controls=\"accordion-item-:r27:\"\n aria-expanded=\"false\"\n (click)=\"isCollapsed = !isCollapsed\"\n class=\"cds--accordion__heading\"\n >\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n class=\"cds--accordion__arrow\"\n >\n <path d=\"M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z\"></path>\n </svg>\n <div class=\"cds--accordion__title\">\n {{ node.question.label | translate }}\n </div>\n </button>\n <div id=\"accordion-item-:r27:\" class=\"cds--accordion__content\">\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"parentGroup\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n </li>\n </ul>\n </div>\n</div>\n\n<!-- MESSAGES -->\n<div\n *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n class=\"alert alert-warning\"\n>\n <a class=\"close\" data-dismiss=\"alert\">&times;</a> {{ node.control.alert }}\n</div>\n\n<!--CONTROLS-->\n\n<div\n *ngIf=\"node.question.controlType === 0\"\n [formGroup]=\"parentGroup\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <ofe-custom-component-wrapper\n [dark]=\"!(theme === 'light')\"\n [componentConfigs]=\"node.question.componentConfigs\"\n >\n </ofe-custom-component-wrapper>\n <div class=\"cds--form-item\">\n <!--LEAF CONTROL-->\n <div class=\"question-area\">\n <a\n class=\"form-tooltip pull-right\"\n (click)=\"toggleInformation(node.question.extras.id)\"\n data-placement=\"right\"\n *ngIf=\"\n node.question &&\n node.question.extras.questionInfo &&\n node.question.extras.questionInfo !== '' &&\n node.question.extras.questionInfo !== ' '\n \"\n >\n <i class=\"glyphicon glyphicon-question-sign\" aria-hidden=\"true\"></i>\n </a>\n\n <label\n *ngIf=\"node.question.label\"\n [style.color]=\"hasErrors() ? 'red' : ''\"\n class=\"cds--label\"\n [attr.for]=\"node.question.key | translate\"\n >\n {{ node.question.required ? '*' : '' }}\n {{ node.question.prefix ? node.question.prefix + ' ' : '' }}\n {{ node.question.label | translate }}\n </label>\n\n <div\n *ngIf=\"\n node.question.extras.questionOptions.customControl;\n else nativeControls\n \"\n >\n <ofe-custom-control-wrapper\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n [question]=\"node.question\"\n >\n </ofe-custom-control-wrapper>\n </div>\n\n <ng-template #nativeControls>\n <div class=\"afe-control\" [ngSwitch]=\"node.question.renderingType\">\n <ofe-select\n [theme]=\"theme\"\n *ngSwitchCase=\"'select'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n >\n <option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </option>\n </ofe-select>\n\n <div *ngSwitchCase=\"'file'\">\n <ofe-file-upload\n [dataSource]=\"dataSource\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n (fileChanged)=\"upload($event)\"\n >\n </ofe-file-upload>\n </div>\n\n <textarea\n [theme]=\"theme\"\n ofeTextAreaInput\n [ngClass]=\"{\n 'cds--text-area--light': theme === 'light',\n 'cds--text-area--invalid': !node.control.valid\n }\"\n [placeholder]=\"node.question.placeholder | translate\"\n [rows]=\"node.question.rows\"\n class=\"cds--text-area\"\n *ngSwitchCase=\"'textarea'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n [readOnly]=\"node.question.extras.readOnly\"\n >\n </textarea>\n\n <ofe-remote-select\n [theme]=\"theme\"\n *ngSwitchCase=\"'remote-select'\"\n [placeholder]=\"node.question.placeholder | translate\"\n tabindex=\"0\"\n [dataSource]=\"dataSource\"\n [componentID]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n [id]=\"node.question.key + 'id'\"\n ></ofe-remote-select>\n\n <ofe-ngx-date-time-picker\n [weeks]=\"node.question.extras.questionOptions.weeksList\"\n [showWeeks]=\"node.question.showWeeksAdder\"\n [theme]=\"theme\"\n [id]=\"node.question.key + 'id'\"\n [formControlName]=\"node.question.key\"\n *ngSwitchCase=\"'date'\"\n [datePickerFormat]=\"node.question.datePickerFormat\"\n >\n </ofe-ngx-date-time-picker>\n <ng-select\n [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'multi-select'\"\n [multiple]=\"true\"\n [appendTo]=\"'form'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n >\n <ng-option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </ng-option>\n </ng-select>\n\n <ng-select\n [ngClass]=\"{ 'afe-custom': theme === 'light' }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'single-select'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n >\n <ng-option\n *ngFor=\"let option of node.question.options\"\n [value]=\"option.value\"\n >\n {{ option.label | translate }}\n </ng-option>\n </ng-select>\n\n <ofe-number-input\n [theme]=\"theme\"\n *ngSwitchCase=\"'number'\"\n [id]=\"node.question.key + 'id'\"\n [min]=\"node.question.extras.questionOptions.min\"\n [max]=\"node.question.extras.questionOptions.max\"\n [maxlength]=\"node.question.extras.questionOptions.maxLength\"\n [minlength]=\"node.question.extras.questionOptions.minLength\"\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n >\n </ofe-number-input>\n\n <input\n [theme]=\"theme\"\n class=\"cds--text-input\"\n ofeTextInput\n *ngSwitchDefault\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n [type]=\"node.question.renderingType\"\n [id]=\"node.question.key + 'id'\"\n [readOnly]=\"node.question.extras.readOnly\"\n />\n\n <div *ngSwitchCase=\"'radio'\">\n <ofe-radio-button\n [id]=\"node.question.key + 'id' + controlId\"\n [formControlName]=\"node.question.key\"\n [options]=\"node.question.options\"\n [allowUnselect]=\"node.question.allowUnselect\"\n [selected]=\"node.control.value\"\n [orientation]=\"node.question.orientation\"\n ></ofe-radio-button>\n </div>\n\n <div *ngSwitchCase=\"'checkbox'\">\n <ofe-checkbox\n [id]=\"node.question.key + 'id' + controlId\"\n [formControlName]=\"node.question.key\"\n [options]=\"node.question.options\"\n [selected]=\"node.control.value\"\n ></ofe-checkbox>\n </div>\n\n <div\n *ngIf=\"\n node.question.enableHistoricalValue &&\n node.question.historicalDisplay\n \"\n style=\"margin-top: 2px\"\n >\n <div class=\"container-fluid\">\n <div class=\"use-value\">\n <div class=\"col-xs-9\">\n <span class=\"text-warning\"\n >{{ 'previousValue' | translate }}:\n </span>\n <strong>{{ node.question.historicalDisplay?.text }}</strong>\n <span *ngIf=\"node.question.showHistoricalValueDate\">\n <span> | </span>\n <strong class=\"text-primary\"\n >{{ node.question.historicalDisplay?._date | date }}\n </strong>\n <span\n class=\"text-primary\"\n *ngIf=\"\n node.question.historicalDisplay &&\n node.question.historicalDisplay._date\n \"\n >\n ({{\n node.question.historicalDisplay._date | timeAgo\n }})</span\n >\n </span>\n </div>\n <button\n type=\"button\"\n [name]=\"'historyValue'\"\n class=\"cds--btn cds--btn--primary cds--btn--sm col-xs-3\"\n >\n {{ 'useValue' | translate }}\n </button>\n </div>\n </div>\n </div>\n <ofe-appointments-overview [node]=\"node\"></ofe-appointments-overview>\n <div *ngIf=\"hasErrors()\">\n <div *ngFor=\"let e of errors()\">\n <span class=\"text-danger\">{{ e }}</span>\n </div>\n </div>\n </div>\n </ng-template>\n\n <div\n class=\"question-info col-md-12 col-lg-12 col-sm-12\"\n id=\"{{ node.question.extras.id }}\"\n *ngIf=\"\n node.question &&\n node.question.extras.questionInfo &&\n node.question.extras.questionInfo !== '' &&\n node.question.extras.questionInfo !== ' '\n \"\n >\n {{ node.question.extras.questionInfo | translate }}\n </div>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"node.question.controlType === 1\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <!--ARRAY CONTROL-->\n <div [ngSwitch]=\"node.question.renderingType\">\n <div class=\"well\" style=\"padding: 2px\" *ngSwitchCase=\"'repeating'\">\n <h4 style=\"margin: 2px; font-weight: bold\">\n {{ node.question.label | translate }}\n </h4>\n <div>\n <label\n class=\"cds--label\"\n *ngIf=\"node.question.extras.questionOptions.min\"\n style=\"margin-right: 2px\"\n >min: {{ node.question.extras.questionOptions.min }}</label\n >\n <label\n class=\"cds--label\"\n *ngIf=\"node.question.extras.questionOptions.max\"\n >max: {{ node.question.extras.questionOptions.max }}</label\n >\n </div>\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 2px;\n \"\n />\n <div [ngSwitch]=\"node.question.extras.type\">\n <div *ngSwitchCase=\"'testOrder'\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n <div>{{ child.orderNumber }}</div>\n <div class=\"cds--layout\">\n <button\n type=\"button \"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n </div>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n\n <div *ngSwitchCase=\"'diagnosis'\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n <button\n type=\"button \"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n\n <div *ngSwitchCase=\"'obsGroup'\" style=\"margin-bottom: 20px\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n [controlId]=\"i\"\n ></ofe-form-renderer>\n <button\n type=\"button\"\n style=\"width: 100px\"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n <div *ngSwitchCase=\"'diagnosisGroup'\" style=\"margin-bottom: 20px\">\n <div *ngFor=\"let child of node.children; let i = index\">\n <ofe-form-renderer\n *ngFor=\"let question of child.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"child.children[question.key]\"\n [parentGroup]=\"child.control\"\n [labelMap]=\"labelMap\"\n [controlId]=\"i\"\n ></ofe-form-renderer>\n <button\n type=\"button\"\n style=\"width: 100px\"\n class=\"cds--btn cds--btn--danger cds--btn--sm\"\n (click)=\"node.removeAt(i)\"\n >\n {{ 'remove' | translate }}\n </button>\n <br />\n <hr\n style=\"\n margin-left: -2px;\n margin-right: -2px;\n margin-bottom: 4px;\n margin-top: 8px;\n border-width: 1px;\n \"\n />\n </div>\n </div>\n </div>\n <button\n type=\"button\"\n class=\"cds--btn cds--btn--primary cds--btn--sm\"\n (click)=\"node.createChildNode()\"\n [ngClass]=\"{\n disabled:\n node.children.length >= node.question.extras.questionOptions.max\n }\"\n >\n {{ 'add' | translate }}\n </button>\n </div>\n </div>\n</div>\n<div\n *ngIf=\"node.question.controlType === 2\"\n [hidden]=\"node.control.hidden\"\n [ngClass]=\"{ disabled: node.control.disabled }\"\n>\n <!--GROUP-->\n <div [ngSwitch]=\"node.question.renderingType\">\n <div *ngSwitchCase=\"'group'\">\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n <div\n *ngSwitchCase=\"'field-set'\"\n style=\"border: 1px solid #eeeeee; padding: 2px; margin: 2px\"\n >\n <ofe-form-renderer\n *ngFor=\"let question of node.question.questions\"\n [parentComponent]=\"this\"\n [node]=\"node.children[question.key]\"\n [parentGroup]=\"node.control\"\n [labelMap]=\"labelMap\"\n ></ofe-form-renderer>\n </div>\n </div>\n</div>\n", styles: [".slider{width:auto;margin:30px}.slick-prev:before,.slick-next:before{color:#337ab7}.slick-dots{bottom:-40px}.slick-slide{outline:none}\n", "a{color:#fff;text-decoration:none;font-size:12px;text-transform:uppercase}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;white-space:nowrap;transition:all .3s ease-in;border-bottom:4px solid transparent}li:hover{border-bottom:4px solid white;opacity:.7;cursor:pointer}.owl-theme .owl-controls .owl-nav{position:absolute;width:100%;top:0}.owl-theme .owl-controls .owl-nav [class*=owl-]{position:absolute;background:none;color:#000}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:none;color:#000}.owl-theme .owl-controls .owl-nav .owl-next{right:0;transform:translate(120%)}.owl-theme .owl-controls .owl-nav .owl-prev{left:0;transform:translate(-120%)}.slick-initialized .swipe-tab-content{position:relative;min-height:365px}@media screen and (min-width: 767px){.slick-initialized .swipe-tab-content{min-height:500px}}.slick-initialized .swipe-tab{display:flex;align-items:center;justify-content:center;height:50px;background:none;border:0;color:#757575;cursor:pointer;text-align:center;border-bottom:2px solid rgba(51,122,183,0);transition:all .5s}.slick-initialized .swipe-tab:hover{color:#337ab7}.slick-initialized .swipe-tab.active-tab{border-bottom-color:#337ab7;color:#337ab7;font-weight:700}.disabled{opacity:.5;pointer-events:none}.select2-container{margin-top:-5px}.btn{padding:0 12px!important}.form-tooltip{color:#337ab7;display:inline-block}.question-info{opacity:0;height:0px;display:none;transition-duration:opacity 1s ease-out;transition-delay:.5s;padding-top:2px;padding-bottom:2px;color:#696969;border-style:ridge;border-width:1px;border-color:#337ab7;margin-top:2px}.hide-info{display:none;height:0px}.form-tooltip:hover~.question-info{display:block;opacity:1;height:auto}.form-tooltip .tooltipcontent:after{content:\" \";position:absolute;bottom:100%;right:0%;margin-left:-5px;border-width:5px;border-style:solid;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#337ab7;border-left-color:transparent}ng-select.form-control{padding-top:0;height:auto;padding-bottom:0}.forms-dropdown-menu{max-height:450px;overflow-y:scroll}.no-border{border:0;box-shadow:none}.text-danger{color:var(--cds-support-01, #da1e28)}.error{margin-bottom:3rem}.afe-control{margin-bottom:.125rem}[hidden]{display:none!important}.accordion-content-dark{background-color:#f4f4f4;padding-right:1rem}.accordion-content-override{box-sizing:content-box;border-bottom:none;padding:0;text-wrap:wrap}.accordion-content-override:hover{opacity:unset;border-bottom:none}.question-area{width:18rem;max-width:18rem}.question-area>label{text-wrap:wrap}.in-line{display:inline-block;padding-right:.5rem}.use-value{text-wrap:wrap}.custom-text-area{width:100%}\n"] }]
8700
8700
  }], ctorParameters: function () { return [{ type: ValidationFactory }, { type: DataSources }, { type: FormErrorsService }, { type: i4.TranslateService }, { type: undefined, decorators: [{
8701
8701
  type: Inject,
8702
8702
  args: [DOCUMENT]
@@ -11970,6 +11970,8 @@ class QuestionFactory {
11970
11970
  renderType = 'field-set';
11971
11971
  }
11972
11972
  switch (renderType) {
11973
+ case 'diagnosis':
11974
+ return this.toDiagnosisQuestion(schema);
11973
11975
  case 'select':
11974
11976
  return this.toSelectQuestion(schema);
11975
11977
  case 'single-select':
@@ -13622,19 +13624,57 @@ class DiagnosisValueAdapter {
13622
13624
  this._findDiagnosisQuestionNodes(form.rootNode);
13623
13625
  this._setDiagnosesValues(this.formDiagnosisNodes, form.existingDiagnoses, 1);
13624
13626
  this._setDiagnosesValues(this.formDiagnosisNodes, form.existingDiagnoses, 2);
13627
+ this.setDiagnosisGroupValue(this.formDiagnosisNodes, form.existingDiagnoses);
13625
13628
  }
13626
13629
  _createDiagnosesPayload(diagnosisNodes, existingDiagnoses) {
13627
13630
  const payload = [];
13628
13631
  let deletedDiagnoses = [];
13629
13632
  diagnosisNodes?.forEach((node) => {
13630
- node.control.value
13631
- .filter((v) => v[node.question.key])
13632
- .forEach((value) => {
13633
- // Create Payload
13634
- const payloadDiagnosis = this._createPayloadDiagnosis(value[node.question.key], node.question.extras);
13635
- // Validate if is new value
13636
- payload.push(payloadDiagnosis);
13637
- });
13633
+ if (node instanceof ArrayNode) {
13634
+ node.control.value
13635
+ .filter((v) => v[node.question.key])
13636
+ .forEach((value) => {
13637
+ // Create Payload
13638
+ const payloadDiagnosis = this._createPayloadDiagnosis(value[node.question.key], node.question.extras);
13639
+ // Validate if is new value
13640
+ payload.push(payloadDiagnosis);
13641
+ });
13642
+ }
13643
+ if (node instanceof ArrayNode) {
13644
+ const groupNodeArray = node.children;
13645
+ groupNodeArray.forEach((groupNode) => {
13646
+ if (this.hasDiagnosisNodeChanged(groupNode)) {
13647
+ const diagnosisPayload = {};
13648
+ Object.values(groupNode.children).forEach((childNode) => {
13649
+ const { diagnosisType } = childNode.question.extras.questionOptions;
13650
+ switch (diagnosisType) {
13651
+ case 'rank':
13652
+ diagnosisPayload.rank =
13653
+ parseInt(childNode.control.value, 10) ?? 1;
13654
+ break;
13655
+ case 'certainty':
13656
+ diagnosisPayload.certainty = childNode.control.value;
13657
+ break;
13658
+ case 'diagnosis':
13659
+ diagnosisPayload.diagnosis = {
13660
+ coded: childNode.control.value
13661
+ };
13662
+ break;
13663
+ default:
13664
+ break;
13665
+ }
13666
+ });
13667
+ if (_.isEmpty(diagnosisPayload)) {
13668
+ return null;
13669
+ }
13670
+ if (groupNode.question.defaultValue?.uuid) {
13671
+ diagnosisPayload.uuid = groupNode.question.defaultValue.uuid;
13672
+ }
13673
+ diagnosisPayload.voided = false;
13674
+ payload.push(diagnosisPayload);
13675
+ }
13676
+ });
13677
+ }
13638
13678
  });
13639
13679
  this._updatedOldDiagnoses(payload, existingDiagnoses);
13640
13680
  deletedDiagnoses = this._getDeletedDiagnoses(payload, existingDiagnoses);
@@ -13690,6 +13730,33 @@ class DiagnosisValueAdapter {
13690
13730
  });
13691
13731
  });
13692
13732
  }
13733
+ setDiagnosisGroupValue(formDiagnosisNodes, existingDiagnoses) {
13734
+ for (const diagnosis of existingDiagnoses) {
13735
+ for (const diagnosisNode of formDiagnosisNodes) {
13736
+ if (diagnosisNode.question.extras.type !== 'diagnosisGroup')
13737
+ break;
13738
+ const groupNode = diagnosisNode.createChildNode();
13739
+ groupNode.question.defaultValue = { uuid: diagnosis.uuid };
13740
+ for (const child of Object.values(groupNode.children)) {
13741
+ const diagnosisType = child.question.extras.questionOptions.diagnosisType;
13742
+ switch (diagnosisType) {
13743
+ case 'diagnosis':
13744
+ child.initialValue = diagnosis.diagnosis.coded?.uuid;
13745
+ child.control.setValue(diagnosis.diagnosis.coded?.uuid);
13746
+ break;
13747
+ case 'rank':
13748
+ child.initialValue = diagnosis.rank;
13749
+ child.control.setValue(diagnosis.rank);
13750
+ break;
13751
+ case 'certainty':
13752
+ child.initialValue = diagnosis.certainty;
13753
+ child.control.setValue(diagnosis.certainty);
13754
+ break;
13755
+ }
13756
+ }
13757
+ }
13758
+ }
13759
+ }
13693
13760
  _findDiagnosisQuestionNodes(formNode) {
13694
13761
  if (formNode.children) {
13695
13762
  if (formNode.children instanceof Object) {
@@ -13707,15 +13774,24 @@ class DiagnosisValueAdapter {
13707
13774
  break;
13708
13775
  case 'repeating':
13709
13776
  if (formNode.children) {
13777
+ const { children } = formNode;
13778
+ // Condition for diagnosisGroup nodes
13710
13779
  for (const node in formNode.children) {
13711
- const question = formNode.children[node].question;
13712
- const index = formNode.children[node].nodeIndex;
13713
- if (question.extras &&
13714
- question.extras.type === 'diagnosis' &&
13715
- !this.formDiagnosisNodes.some((x) => index === x.nodeIndex)) {
13716
- this.formDiagnosisNodes.push(formNode.children[node]);
13780
+ const questionExtras = formNode.children[node].question.extras;
13781
+ if (questionExtras.type === 'diagnosisGroup') {
13782
+ const arrayNode = formNode.children[node];
13783
+ this.formDiagnosisNodes.push(arrayNode);
13784
+ break;
13717
13785
  }
13718
13786
  }
13787
+ // Condition for diagnosis nodes
13788
+ Object.values(children).forEach((child) => {
13789
+ const { question, nodeIndex } = child;
13790
+ if (question.extras?.type === 'diagnosis' &&
13791
+ !this.formDiagnosisNodes.some((x) => x.nodeIndex === nodeIndex)) {
13792
+ this.formDiagnosisNodes.push(child);
13793
+ }
13794
+ });
13719
13795
  }
13720
13796
  break;
13721
13797
  default:
@@ -13740,6 +13816,15 @@ class DiagnosisValueAdapter {
13740
13816
  voided: diagnosis.voided
13741
13817
  };
13742
13818
  }
13819
+ hasDiagnosisNodeChanged(nodeAsGroup) {
13820
+ const childrenNodes = Object.values(nodeAsGroup.children);
13821
+ for (let childNode of childrenNodes) {
13822
+ if (childNode.control.value !== childNode.initialValue) {
13823
+ return true;
13824
+ }
13825
+ }
13826
+ return false;
13827
+ }
13743
13828
  }
13744
13829
  DiagnosisValueAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DiagnosisValueAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
13745
13830
  DiagnosisValueAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DiagnosisValueAdapter });