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

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/fesm2015/openmrs-ngx-formentry.mjs CHANGED
@@ -8718,10 +8718,10 @@ class FormRendererComponent {
8718
8718
  }
8719
8719
  }
8720
8720
  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 });
8721
- 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 } });
8721
+ 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 } });
8722
8722
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FormRendererComponent, decorators: [{
8723
8723
  type: Component,
8724
- 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"] }]
8724
+ 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"] }]
8725
8725
  }], ctorParameters: function () {
8726
8726
  return [{ type: ValidationFactory }, { type: DataSources }, { type: FormErrorsService }, { type: i4.TranslateService }, { type: undefined, decorators: [{
8727
8727
  type: Inject,
@@ -12002,6 +12002,8 @@ class QuestionFactory {
12002
12002
  renderType = 'field-set';
12003
12003
  }
12004
12004
  switch (renderType) {
12005
+ case 'diagnosis':
12006
+ return this.toDiagnosisQuestion(schema);
12005
12007
  case 'select':
12006
12008
  return this.toSelectQuestion(schema);
12007
12009
  case 'single-select':
@@ -12591,19 +12593,59 @@ class DiagnosisValueAdapter {
12591
12593
  this._findDiagnosisQuestionNodes(form.rootNode);
12592
12594
  this._setDiagnosesValues(this.formDiagnosisNodes, form.existingDiagnoses, 1);
12593
12595
  this._setDiagnosesValues(this.formDiagnosisNodes, form.existingDiagnoses, 2);
12596
+ this.setDiagnosisGroupValue(this.formDiagnosisNodes, form.existingDiagnoses);
12594
12597
  }
12595
12598
  _createDiagnosesPayload(diagnosisNodes, existingDiagnoses) {
12596
12599
  const payload = [];
12597
12600
  let deletedDiagnoses = [];
12598
12601
  diagnosisNodes === null || diagnosisNodes === void 0 ? void 0 : diagnosisNodes.forEach((node) => {
12599
- node.control.value
12600
- .filter((v) => v[node.question.key])
12601
- .forEach((value) => {
12602
- // Create Payload
12603
- const payloadDiagnosis = this._createPayloadDiagnosis(value[node.question.key], node.question.extras);
12604
- // Validate if is new value
12605
- payload.push(payloadDiagnosis);
12606
- });
12602
+ if (node instanceof ArrayNode) {
12603
+ node.control.value
12604
+ .filter((v) => v[node.question.key])
12605
+ .forEach((value) => {
12606
+ // Create Payload
12607
+ const payloadDiagnosis = this._createPayloadDiagnosis(value[node.question.key], node.question.extras);
12608
+ // Validate if is new value
12609
+ payload.push(payloadDiagnosis);
12610
+ });
12611
+ }
12612
+ if (node instanceof ArrayNode) {
12613
+ const groupNodeArray = node.children;
12614
+ groupNodeArray.forEach((groupNode) => {
12615
+ var _a;
12616
+ if (this.hasDiagnosisNodeChanged(groupNode)) {
12617
+ const diagnosisPayload = {};
12618
+ Object.values(groupNode.children).forEach((childNode) => {
12619
+ var _a;
12620
+ const { diagnosisType } = childNode.question.extras.questionOptions;
12621
+ switch (diagnosisType) {
12622
+ case 'rank':
12623
+ diagnosisPayload.rank =
12624
+ (_a = parseInt(childNode.control.value, 10)) !== null && _a !== void 0 ? _a : 1;
12625
+ break;
12626
+ case 'certainty':
12627
+ diagnosisPayload.certainty = childNode.control.value;
12628
+ break;
12629
+ case 'diagnosis':
12630
+ diagnosisPayload.diagnosis = {
12631
+ coded: childNode.control.value
12632
+ };
12633
+ break;
12634
+ default:
12635
+ break;
12636
+ }
12637
+ });
12638
+ if (_.isEmpty(diagnosisPayload)) {
12639
+ return null;
12640
+ }
12641
+ if ((_a = groupNode.question.defaultValue) === null || _a === void 0 ? void 0 : _a.uuid) {
12642
+ diagnosisPayload.uuid = groupNode.question.defaultValue.uuid;
12643
+ }
12644
+ diagnosisPayload.voided = false;
12645
+ payload.push(diagnosisPayload);
12646
+ }
12647
+ });
12648
+ }
12607
12649
  });
12608
12650
  this._updatedOldDiagnoses(payload, existingDiagnoses);
12609
12651
  deletedDiagnoses = this._getDeletedDiagnoses(payload, existingDiagnoses);
@@ -12655,6 +12697,34 @@ class DiagnosisValueAdapter {
12655
12697
  });
12656
12698
  });
12657
12699
  }
12700
+ setDiagnosisGroupValue(formDiagnosisNodes, existingDiagnoses) {
12701
+ var _a, _b;
12702
+ for (const diagnosis of existingDiagnoses) {
12703
+ for (const diagnosisNode of formDiagnosisNodes) {
12704
+ if (diagnosisNode.question.extras.type !== 'diagnosisGroup')
12705
+ break;
12706
+ const groupNode = diagnosisNode.createChildNode();
12707
+ groupNode.question.defaultValue = { uuid: diagnosis.uuid };
12708
+ for (const child of Object.values(groupNode.children)) {
12709
+ const diagnosisType = child.question.extras.questionOptions.diagnosisType;
12710
+ switch (diagnosisType) {
12711
+ case 'diagnosis':
12712
+ child.initialValue = (_a = diagnosis.diagnosis.coded) === null || _a === void 0 ? void 0 : _a.uuid;
12713
+ child.control.setValue((_b = diagnosis.diagnosis.coded) === null || _b === void 0 ? void 0 : _b.uuid);
12714
+ break;
12715
+ case 'rank':
12716
+ child.initialValue = diagnosis.rank;
12717
+ child.control.setValue(diagnosis.rank);
12718
+ break;
12719
+ case 'certainty':
12720
+ child.initialValue = diagnosis.certainty;
12721
+ child.control.setValue(diagnosis.certainty);
12722
+ break;
12723
+ }
12724
+ }
12725
+ }
12726
+ }
12727
+ }
12658
12728
  _findDiagnosisQuestionNodes(formNode) {
12659
12729
  if (formNode.children) {
12660
12730
  if (formNode.children instanceof Object) {
@@ -12672,15 +12742,25 @@ class DiagnosisValueAdapter {
12672
12742
  break;
12673
12743
  case 'repeating':
12674
12744
  if (formNode.children) {
12745
+ const { children } = formNode;
12746
+ // Condition for diagnosisGroup nodes
12675
12747
  for (const node in formNode.children) {
12676
- const question = formNode.children[node].question;
12677
- const index = formNode.children[node].nodeIndex;
12678
- if (question.extras &&
12679
- question.extras.type === 'diagnosis' &&
12680
- !this.formDiagnosisNodes.some((x) => index === x.nodeIndex)) {
12681
- this.formDiagnosisNodes.push(formNode.children[node]);
12748
+ const questionExtras = formNode.children[node].question.extras;
12749
+ if (questionExtras.type === 'diagnosisGroup') {
12750
+ const arrayNode = formNode.children[node];
12751
+ this.formDiagnosisNodes.push(arrayNode);
12752
+ break;
12682
12753
  }
12683
12754
  }
12755
+ // Condition for diagnosis nodes
12756
+ Object.values(children).forEach((child) => {
12757
+ var _a;
12758
+ const { question, nodeIndex } = child;
12759
+ if (((_a = question.extras) === null || _a === void 0 ? void 0 : _a.type) === 'diagnosis' &&
12760
+ !this.formDiagnosisNodes.some((x) => x.nodeIndex === nodeIndex)) {
12761
+ this.formDiagnosisNodes.push(child);
12762
+ }
12763
+ });
12684
12764
  }
12685
12765
  break;
12686
12766
  default:
@@ -12705,6 +12785,15 @@ class DiagnosisValueAdapter {
12705
12785
  voided: diagnosis.voided
12706
12786
  };
12707
12787
  }
12788
+ hasDiagnosisNodeChanged(nodeAsGroup) {
12789
+ const childrenNodes = Object.values(nodeAsGroup.children);
12790
+ for (let childNode of childrenNodes) {
12791
+ if (childNode.control.value !== childNode.initialValue) {
12792
+ return true;
12793
+ }
12794
+ }
12795
+ return false;
12796
+ }
12708
12797
  }
12709
12798
  DiagnosisValueAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DiagnosisValueAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
12710
12799
  DiagnosisValueAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DiagnosisValueAdapter });