@openmrs/ngx-formentry 5.0.1-pre.422 → 5.0.1-pre.426
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.
|
@@ -8773,11 +8773,11 @@ class FormRendererComponent {
|
|
|
8773
8773
|
return questionGroup.questions.indexOf(node.question);
|
|
8774
8774
|
}
|
|
8775
8775
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormRendererComponent, deps: [{ token: ValidationFactory }, { token: DataSources }, { token: FormErrorsService }, { token: i1.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8776
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: { formSubmissionTemplate: "formSubmissionTemplate", 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\n (tabSelect)=\"tabSelected($event)\"\n [selectedIndex]=\"activeTab\"\n [formSubmissionTemplate]=\"formSubmissionTemplate\"\n >\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\n <!-- Buttons for navigating between tabs -->\n <section *ngIf=\"this.hasMultiplePages\">\n <div class=\"button-set\">\n <button\n class=\"cds--btn cds--btn--ghost nav-button\"\n [disabled]=\"i === 0\"\n type=\"button\"\n >\n <a\n *ngIf=\"i > 0\"\n (click)=\"tabSelected(i - 1)\"\n class=\"nav-link\"\n [title]=\"node.question.questions[i - 1].label | translate\"\n >\n <label class=\"nav-label\">{{ 'previous' | translate }}</label>\n <span class=\"nav-link-text\">{{\n node.question.questions[i - 1].label | translate\n }}</span>\n </a>\n </button>\n <button\n class=\"cds--btn cds--btn--ghost nav-button\"\n [disabled]=\"i === node.question.questions.length - 1\"\n type=\"button\"\n >\n <a\n *ngIf=\"i < node.question.questions.length - 1\"\n (click)=\"tabSelected(i + 1)\"\n class=\"nav-link\"\n [title]=\"node.question.questions[i + 1].label | translate\"\n >\n <label class=\"nav-label\">{{ 'next' | translate }}</label>\n <span class=\"nav-link-text\">{{\n node.question.questions[i + 1].label | translate\n }}</span>\n </a>\n </button>\n </div>\n </section>\n </ofe-tab>\n\n <!-- TODO: Figure out why is this code doing the same thing as the ErrorRenderer component -->\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\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 ></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\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<!--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 ></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 ></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 [invalid]=\"node.control.touched && !node.control.valid\"\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 ></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 [invalid]=\"node.control.touched && !node.control.valid\"\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 ></ofe-ngx-date-time-picker>\n\n <ng-select\n [ngClass]=\"{\n 'afe-custom': theme === 'light',\n invalid: node.control.touched && !node.control.valid ? true : null\n }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'multi-select'\"\n [multiple]=\"true\"\n [appendTo]=\"'#' + node.question.key + 'id'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n [invalid]=\"node.control.touched && !node.control.valid\"\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]=\"{\n 'afe-custom': theme === 'light',\n invalid: node.control.touched && !node.control.valid ? true : null\n }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'single-select'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n [invalid]=\"node.control.touched && !node.control.valid\"\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 [invalid]=\"node.control.touched && !node.control.valid\"\n ></ofe-number-input>\n\n <ofe-number-input\n [theme]=\"theme\"\n *ngSwitchCase=\"'decimal'\"\n [id]=\"node.question.key + 'id'\"\n [min]=\"node.question.extras.questionOptions.min\"\n [max]=\"node.question.extras.questionOptions.max\"\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n [invalid]=\"node.control.touched && !node.control.valid\"\n ></ofe-number-input>\n\n <div *ngSwitchCase=\"'workspace-launcher'\">\n <ofe-workspace-launcher\n [id]=\"node.question.key + 'id'\"\n [buttonLabel]=\"node.question.extras.questionOptions.buttonLabel\"\n [buttonType]=\"node.question.extras.questionOptions.buttonType\"\n [workspaceName]=\"\n node.question.extras.questionOptions.workspaceName\n \"\n ></ofe-workspace-launcher>\n </div>\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 [readonly]=\"node.question.readOnly\"\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 class=\"error\" *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\n<!-- MESSAGES -->\n<label\n *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n class=\"cds--label text-warn warning\"\n>\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 32 32\"\n aria-hidden=\"true\"\n >\n <path\n fill=\"none\"\n d=\"M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z\"\n data-icon-path=\"inner-path\"\n ></path>\n <path\n d=\"M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z\"\n ></path>\n <path\n d=\"M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z\"\n ></path>\n <title>Warning alt filled</title>\n </svg>\n {{ node.control.alert | translate }}\n</label>\n\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\" *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 class=\"divider\" />\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 >\n </ofe-form-renderer>\n <div *ngIf=\"child.orderNumber\" class=\"order-number\">\n <span\n >{{ 'orderNumber' | translate }}: {{ child.orderNumber }}\n </span>\n </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 class=\"divider\" />\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\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 class=\"divider\" />\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\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 class=\"divider\" />\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\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 class=\"divider\" />\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\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: ["", ".button-set{margin-top:1rem}.nav-button{border-top:1px solid #dde1e6;height:5rem;max-width:50%;min-width:50%;padding-block:.25rem;align-items:center}.nav-link{min-width:100%;display:flex;align-items:flex-start;flex-direction:column}.nav-link-text{margin-top:.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - .25rem);font-size:var(--cds-heading-03-font-size, 1.25rem);font-weight:var(--cds-heading-03-font-weight, 400);line-height:var(--cds-heading-03-line-height, 1.4);letter-spacing:var(--cds-heading-03-letter-spacing, 0)}.nav-label{font-size:var(--cds-label-01-font-size, .75rem);font-weight:var(--cds-label-01-font-weight, 400);line-height:var(--cds-label-01-line-height, 1.33333);letter-spacing:var(--cds-label-01-letter-spacing, .32px)}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;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%)}.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:.25rem}.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)}.text-warn{color:#eea616}.error{margin-top:.25rem}.warning{display:flex;align-items:center;margin:0 .25rem .75rem}.warning svg{margin-right:.25rem}.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;overflow-wrap:break-word}.accordion-content-override:hover{opacity:unset;border-bottom:none}.question-area{margin-bottom:.5rem;width:100%;min-width:18rem}.question-area>label{overflow-wrap:break-word}.in-line{display:inline-block;padding-right:.5rem}.use-value{overflow-wrap:break-word}.custom-text-area{width:100%}.container .cds--inline-notification--error{display:flex;align-items:center}.container .cds--inline-notification--error svg{margin-left:1rem;margin-block-start:0}.container .cds--inline-notification--low-contrast:before{border-width:1px 1px 0 0}.divider{border-color:#e0e0e0;border-style:solid;border-bottom:none;margin:.75rem 0rem}.order-number{margin:1rem 0}.well{margin-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "component", type: i8.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i8.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "component", type: NumberInputComponent, selector: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "placeholder", "size", "required", "value", "min", "max", "maxlength", "minlength", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { kind: "directive", type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "component", type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "invalid", "dataSource"], outputs: ["done"] }, { kind: "component", type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { kind: "component", type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { kind: "component", type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect", "orientation", "readonly"] }, { kind: "component", type: WorkspaceLauncherComponent, selector: "ofe-workspace-launcher", inputs: ["id", "buttonLabel", "buttonType", "workspaceName"] }, { kind: "component", type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { kind: "component", type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { kind: "component", type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { kind: "component", type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { kind: "component", type: TabSetComponent, selector: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex", "formSubmissionTemplate"], outputs: ["tabSelect"] }, { kind: "component", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["formSubmissionTemplate", "parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { kind: "component", type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: ["node"] }, { kind: "directive", type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] }); }
|
|
8776
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: { formSubmissionTemplate: "formSubmissionTemplate", 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\n (tabSelect)=\"tabSelected($event)\"\n [selectedIndex]=\"activeTab\"\n [formSubmissionTemplate]=\"formSubmissionTemplate\"\n >\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\n <!-- Buttons for navigating between tabs -->\n <section *ngIf=\"this.hasMultiplePages\">\n <div class=\"button-set\">\n <button\n class=\"cds--btn cds--btn--ghost nav-button\"\n [disabled]=\"i === 0\"\n type=\"button\"\n >\n <a\n *ngIf=\"i > 0\"\n (click)=\"tabSelected(i - 1)\"\n class=\"nav-link\"\n [title]=\"node.question.questions[i - 1].label | translate\"\n >\n <label class=\"nav-label\">{{ 'previous' | translate }}</label>\n <span class=\"nav-link-text\">{{\n node.question.questions[i - 1].label | translate\n }}</span>\n </a>\n </button>\n <button\n class=\"cds--btn cds--btn--ghost nav-button\"\n [disabled]=\"i === node.question.questions.length - 1\"\n type=\"button\"\n >\n <a\n *ngIf=\"i < node.question.questions.length - 1\"\n (click)=\"tabSelected(i + 1)\"\n class=\"nav-link\"\n [title]=\"node.question.questions[i + 1].label | translate\"\n >\n <label class=\"nav-label\">{{ 'next' | translate }}</label>\n <span class=\"nav-link-text\">{{\n node.question.questions[i + 1].label | translate\n }}</span>\n </a>\n </button>\n </div>\n </section>\n </ofe-tab>\n\n <!-- TODO: Figure out why is this code doing the same thing as the ErrorRenderer component -->\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\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 ></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\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<!--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 ></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 ></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 [invalid]=\"node.control.touched && !node.control.valid\"\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 ></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 [invalid]=\"node.control.touched && !node.control.valid\"\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 ></ofe-ngx-date-time-picker>\n\n <ng-select\n [ngClass]=\"{\n 'afe-custom': theme === 'light',\n invalid: node.control.touched && !node.control.valid ? true : null\n }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'multi-select'\"\n [multiple]=\"true\"\n [appendTo]=\"'#' + node.question.key + 'id'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n [invalid]=\"node.control.touched && !node.control.valid\"\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]=\"{\n 'afe-custom': theme === 'light',\n invalid: node.control.touched && !node.control.valid ? true : null\n }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'single-select'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n [invalid]=\"node.control.touched && !node.control.valid\"\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 [invalid]=\"node.control.touched && !node.control.valid\"\n ></ofe-number-input>\n\n <ofe-number-input\n [theme]=\"theme\"\n *ngSwitchCase=\"'decimal'\"\n [id]=\"node.question.key + 'id'\"\n [min]=\"node.question.extras.questionOptions.min\"\n [max]=\"node.question.extras.questionOptions.max\"\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n [invalid]=\"node.control.touched && !node.control.valid\"\n ></ofe-number-input>\n\n <div *ngSwitchCase=\"'workspace-launcher'\">\n <ofe-workspace-launcher\n [id]=\"node.question.key + 'id'\"\n [buttonLabel]=\"node.question.extras.questionOptions.buttonLabel\"\n [buttonType]=\"node.question.extras.questionOptions.buttonType\"\n [workspaceName]=\"\n node.question.extras.questionOptions.workspaceName\n \"\n ></ofe-workspace-launcher>\n </div>\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 [readonly]=\"node.question.readOnly\"\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 class=\"error\" *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\n<!-- MESSAGES -->\n<label\n *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n class=\"cds--label text-warn warning\"\n>\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 32 32\"\n aria-hidden=\"true\"\n >\n <path\n fill=\"none\"\n d=\"M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z\"\n data-icon-path=\"inner-path\"\n ></path>\n <path\n d=\"M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z\"\n ></path>\n <path\n d=\"M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z\"\n ></path>\n <title>Warning alt filled</title>\n </svg>\n {{ node.control.alert | translate }}\n</label>\n\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\" *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 class=\"divider\" />\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 >\n </ofe-form-renderer>\n <div *ngIf=\"child.orderNumber\" class=\"order-number\">\n <span\n >{{ 'orderNumber' | translate }}: {{ child.orderNumber }}\n </span>\n </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 class=\"divider\" />\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\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 class=\"divider\" />\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\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 class=\"divider\" />\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\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 class=\"divider\" />\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\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: ["", ".button-set{margin-top:1rem}.nav-button{border-top:1px solid #dde1e6;height:5rem;max-width:50%;min-width:50%;padding-block:.25rem;align-items:center}.nav-link{min-width:100%;display:flex;align-items:flex-start;flex-direction:column}.nav-link-text{margin-top:.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - .25rem);font-size:var(--cds-body-01-font-size, .875rem);font-weight:var(--cds-body-01-font-weight, 400);line-height:var(--cds-body-01-line-height, 1.42857);letter-spacing:var(--cds-body-01-letter-spacing, .16px)}.nav-label{font-size:var(--cds-label-01-font-size, .75rem);font-weight:var(--cds-label-01-font-weight, 400);line-height:var(--cds-label-01-line-height, 1.33333);letter-spacing:var(--cds-label-01-letter-spacing, .32px);color:#525252}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;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%)}.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:.25rem}.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)}.text-warn{color:#eea616}.error{margin-top:.25rem}.warning{display:flex;align-items:center;margin:0 .25rem .75rem}.warning svg{margin-right:.25rem}.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;overflow-wrap:break-word}.accordion-content-override:hover{opacity:unset;border-bottom:none}.question-area{margin-bottom:.5rem;width:100%;min-width:18rem}.question-area>label{overflow-wrap:break-word}.in-line{display:inline-block;padding-right:.5rem}.use-value{overflow-wrap:break-word}.custom-text-area{width:100%}.container .cds--inline-notification--error{display:flex;align-items:center}.container .cds--inline-notification--error svg{margin-left:1rem;margin-block-start:0}.container .cds--inline-notification--low-contrast:before{border-width:1px 1px 0 0}.divider{border-color:#e0e0e0;border-style:solid;border-bottom:none;margin:.75rem 0rem}.order-number{margin:1rem 0}.well{margin-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectComponent, selector: "ofe-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "component", type: i8.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i8.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "component", type: NumberInputComponent, selector: "ofe-number-input", inputs: ["theme", "disabled", "skeleton", "invalid", "id", "placeholder", "size", "required", "value", "min", "max", "maxlength", "minlength", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "decrementLabel", "incrementLabel"], outputs: ["numberChange"] }, { kind: "directive", type: TextInputDirective, selector: "[ofeTextInput]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: TextAreaDirective, selector: "[ofeTextAreaInput]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "component", type: RemoteSelectComponent, selector: "ofe-remote-select", inputs: ["placeholder", "componentID", "disabled", "theme", "invalid", "dataSource"], outputs: ["done"] }, { kind: "component", type: FileUploadComponent, selector: "ofe-file-upload", inputs: ["dataSource"] }, { kind: "component", type: CheckboxControlComponent, selector: "ofe-checkbox", inputs: ["id", "options", "selected"] }, { kind: "component", type: RadioButtonControlComponent, selector: "ofe-radio-button", inputs: ["id", "options", "selected", "allowUnselect", "orientation", "readonly"] }, { kind: "component", type: WorkspaceLauncherComponent, selector: "ofe-workspace-launcher", inputs: ["id", "buttonLabel", "buttonType", "workspaceName"] }, { kind: "component", type: NgxDatetimeComponent, selector: "ofe-ngx-date-time-picker", inputs: ["id", "theme", "datePickerFormat", "showWeeks", "weeks"] }, { kind: "component", type: CustomControlWrapperComponent, selector: "ofe-custom-control-wrapper", inputs: ["question"] }, { kind: "component", type: CustomComponentWrapperComponent, selector: "ofe-custom-component-wrapper", inputs: ["componentConfigs", "dark"] }, { kind: "component", type: TabComponent, selector: "ofe-tab", inputs: ["tabTitle", "tabSubTitle", "active", "disabled", "bypassDOM", "customPaneClass"] }, { kind: "component", type: TabSetComponent, selector: "ofe-tab-set", inputs: ["disableStyle", "customNavClass", "customTabsClass", "selectedIndex", "formSubmissionTemplate"], outputs: ["tabSelect"] }, { kind: "component", type: FormRendererComponent, selector: "ofe-form-renderer", inputs: ["formSubmissionTemplate", "parentComponent", "node", "parentGroup", "theme", "labelMap", "controlId"] }, { kind: "component", type: AppointmentsOverviewComponent, selector: "ofe-appointments-overview", inputs: ["node"] }, { kind: "directive", type: HistoricalValueDirective, selector: "[node]", inputs: ["_node", "node"], outputs: ["_nodeChange"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] }); }
|
|
8777
8777
|
}
|
|
8778
8778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormRendererComponent, decorators: [{
|
|
8779
8779
|
type: Component,
|
|
8780
|
-
args: [{ selector: 'ofe-form-renderer', template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n <ofe-tab-set\n (tabSelect)=\"tabSelected($event)\"\n [selectedIndex]=\"activeTab\"\n [formSubmissionTemplate]=\"formSubmissionTemplate\"\n >\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\n <!-- Buttons for navigating between tabs -->\n <section *ngIf=\"this.hasMultiplePages\">\n <div class=\"button-set\">\n <button\n class=\"cds--btn cds--btn--ghost nav-button\"\n [disabled]=\"i === 0\"\n type=\"button\"\n >\n <a\n *ngIf=\"i > 0\"\n (click)=\"tabSelected(i - 1)\"\n class=\"nav-link\"\n [title]=\"node.question.questions[i - 1].label | translate\"\n >\n <label class=\"nav-label\">{{ 'previous' | translate }}</label>\n <span class=\"nav-link-text\">{{\n node.question.questions[i - 1].label | translate\n }}</span>\n </a>\n </button>\n <button\n class=\"cds--btn cds--btn--ghost nav-button\"\n [disabled]=\"i === node.question.questions.length - 1\"\n type=\"button\"\n >\n <a\n *ngIf=\"i < node.question.questions.length - 1\"\n (click)=\"tabSelected(i + 1)\"\n class=\"nav-link\"\n [title]=\"node.question.questions[i + 1].label | translate\"\n >\n <label class=\"nav-label\">{{ 'next' | translate }}</label>\n <span class=\"nav-link-text\">{{\n node.question.questions[i + 1].label | translate\n }}</span>\n </a>\n </button>\n </div>\n </section>\n </ofe-tab>\n\n <!-- TODO: Figure out why is this code doing the same thing as the ErrorRenderer component -->\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\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 ></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\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<!--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 ></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 ></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 [invalid]=\"node.control.touched && !node.control.valid\"\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 ></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 [invalid]=\"node.control.touched && !node.control.valid\"\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 ></ofe-ngx-date-time-picker>\n\n <ng-select\n [ngClass]=\"{\n 'afe-custom': theme === 'light',\n invalid: node.control.touched && !node.control.valid ? true : null\n }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'multi-select'\"\n [multiple]=\"true\"\n [appendTo]=\"'#' + node.question.key + 'id'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n [invalid]=\"node.control.touched && !node.control.valid\"\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]=\"{\n 'afe-custom': theme === 'light',\n invalid: node.control.touched && !node.control.valid ? true : null\n }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'single-select'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n [invalid]=\"node.control.touched && !node.control.valid\"\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 [invalid]=\"node.control.touched && !node.control.valid\"\n ></ofe-number-input>\n\n <ofe-number-input\n [theme]=\"theme\"\n *ngSwitchCase=\"'decimal'\"\n [id]=\"node.question.key + 'id'\"\n [min]=\"node.question.extras.questionOptions.min\"\n [max]=\"node.question.extras.questionOptions.max\"\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n [invalid]=\"node.control.touched && !node.control.valid\"\n ></ofe-number-input>\n\n <div *ngSwitchCase=\"'workspace-launcher'\">\n <ofe-workspace-launcher\n [id]=\"node.question.key + 'id'\"\n [buttonLabel]=\"node.question.extras.questionOptions.buttonLabel\"\n [buttonType]=\"node.question.extras.questionOptions.buttonType\"\n [workspaceName]=\"\n node.question.extras.questionOptions.workspaceName\n \"\n ></ofe-workspace-launcher>\n </div>\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 [readonly]=\"node.question.readOnly\"\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 class=\"error\" *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\n<!-- MESSAGES -->\n<label\n *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n class=\"cds--label text-warn warning\"\n>\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 32 32\"\n aria-hidden=\"true\"\n >\n <path\n fill=\"none\"\n d=\"M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z\"\n data-icon-path=\"inner-path\"\n ></path>\n <path\n d=\"M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z\"\n ></path>\n <path\n d=\"M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z\"\n ></path>\n <title>Warning alt filled</title>\n </svg>\n {{ node.control.alert | translate }}\n</label>\n\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\" *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 class=\"divider\" />\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 >\n </ofe-form-renderer>\n <div *ngIf=\"child.orderNumber\" class=\"order-number\">\n <span\n >{{ 'orderNumber' | translate }}: {{ child.orderNumber }}\n </span>\n </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 class=\"divider\" />\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\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 class=\"divider\" />\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\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 class=\"divider\" />\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\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 class=\"divider\" />\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\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: [".button-set{margin-top:1rem}.nav-button{border-top:1px solid #dde1e6;height:5rem;max-width:50%;min-width:50%;padding-block:.25rem;align-items:center}.nav-link{min-width:100%;display:flex;align-items:flex-start;flex-direction:column}.nav-link-text{margin-top:.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - .25rem);font-size:var(--cds-heading-03-font-size, 1.25rem);font-weight:var(--cds-heading-03-font-weight, 400);line-height:var(--cds-heading-03-line-height, 1.4);letter-spacing:var(--cds-heading-03-letter-spacing, 0)}.nav-label{font-size:var(--cds-label-01-font-size, .75rem);font-weight:var(--cds-label-01-font-weight, 400);line-height:var(--cds-label-01-line-height, 1.33333);letter-spacing:var(--cds-label-01-letter-spacing, .32px)}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;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%)}.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:.25rem}.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)}.text-warn{color:#eea616}.error{margin-top:.25rem}.warning{display:flex;align-items:center;margin:0 .25rem .75rem}.warning svg{margin-right:.25rem}.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;overflow-wrap:break-word}.accordion-content-override:hover{opacity:unset;border-bottom:none}.question-area{margin-bottom:.5rem;width:100%;min-width:18rem}.question-area>label{overflow-wrap:break-word}.in-line{display:inline-block;padding-right:.5rem}.use-value{overflow-wrap:break-word}.custom-text-area{width:100%}.container .cds--inline-notification--error{display:flex;align-items:center}.container .cds--inline-notification--error svg{margin-left:1rem;margin-block-start:0}.container .cds--inline-notification--low-contrast:before{border-width:1px 1px 0 0}.divider{border-color:#e0e0e0;border-style:solid;border-bottom:none;margin:.75rem 0rem}.order-number{margin:1rem 0}.well{margin-bottom:1rem}\n"] }]
|
|
8780
|
+
args: [{ selector: 'ofe-form-renderer', template: "<!--CONTAINERS-->\n<div *ngIf=\"node.question.renderingType === 'form'\">\n <ofe-tab-set\n (tabSelect)=\"tabSelected($event)\"\n [selectedIndex]=\"activeTab\"\n [formSubmissionTemplate]=\"formSubmissionTemplate\"\n >\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\n <!-- Buttons for navigating between tabs -->\n <section *ngIf=\"this.hasMultiplePages\">\n <div class=\"button-set\">\n <button\n class=\"cds--btn cds--btn--ghost nav-button\"\n [disabled]=\"i === 0\"\n type=\"button\"\n >\n <a\n *ngIf=\"i > 0\"\n (click)=\"tabSelected(i - 1)\"\n class=\"nav-link\"\n [title]=\"node.question.questions[i - 1].label | translate\"\n >\n <label class=\"nav-label\">{{ 'previous' | translate }}</label>\n <span class=\"nav-link-text\">{{\n node.question.questions[i - 1].label | translate\n }}</span>\n </a>\n </button>\n <button\n class=\"cds--btn cds--btn--ghost nav-button\"\n [disabled]=\"i === node.question.questions.length - 1\"\n type=\"button\"\n >\n <a\n *ngIf=\"i < node.question.questions.length - 1\"\n (click)=\"tabSelected(i + 1)\"\n class=\"nav-link\"\n [title]=\"node.question.questions[i + 1].label | translate\"\n >\n <label class=\"nav-label\">{{ 'next' | translate }}</label>\n <span class=\"nav-link-text\">{{\n node.question.questions[i + 1].label | translate\n }}</span>\n </a>\n </button>\n </div>\n </section>\n </ofe-tab>\n\n <!-- TODO: Figure out why is this code doing the same thing as the ErrorRenderer component -->\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\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 ></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\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<!--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 ></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 ></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 [invalid]=\"node.control.touched && !node.control.valid\"\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 ></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 [invalid]=\"node.control.touched && !node.control.valid\"\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 ></ofe-ngx-date-time-picker>\n\n <ng-select\n [ngClass]=\"{\n 'afe-custom': theme === 'light',\n invalid: node.control.touched && !node.control.valid ? true : null\n }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'multi-select'\"\n [multiple]=\"true\"\n [appendTo]=\"'#' + node.question.key + 'id'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n [invalid]=\"node.control.touched && !node.control.valid\"\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]=\"{\n 'afe-custom': theme === 'light',\n invalid: node.control.touched && !node.control.valid ? true : null\n }\"\n [id]=\"node.question.key + 'id'\"\n *ngSwitchCase=\"'single-select'\"\n placeholder=\"\"\n clearAllText=\"Clear\"\n [formControlName]=\"node.question.key\"\n [invalid]=\"node.control.touched && !node.control.valid\"\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 [invalid]=\"node.control.touched && !node.control.valid\"\n ></ofe-number-input>\n\n <ofe-number-input\n [theme]=\"theme\"\n *ngSwitchCase=\"'decimal'\"\n [id]=\"node.question.key + 'id'\"\n [min]=\"node.question.extras.questionOptions.min\"\n [max]=\"node.question.extras.questionOptions.max\"\n [formControlName]=\"node.question.key\"\n [attr.placeholder]=\"node.question.placeholder | translate\"\n [invalid]=\"node.control.touched && !node.control.valid\"\n ></ofe-number-input>\n\n <div *ngSwitchCase=\"'workspace-launcher'\">\n <ofe-workspace-launcher\n [id]=\"node.question.key + 'id'\"\n [buttonLabel]=\"node.question.extras.questionOptions.buttonLabel\"\n [buttonType]=\"node.question.extras.questionOptions.buttonType\"\n [workspaceName]=\"\n node.question.extras.questionOptions.workspaceName\n \"\n ></ofe-workspace-launcher>\n </div>\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 [readonly]=\"node.question.readOnly\"\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 class=\"error\" *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\n<!-- MESSAGES -->\n<label\n *ngIf=\"node.control && node.control.alert && node.control.alert !== ''\"\n class=\"cds--label text-warn warning\"\n>\n <svg\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 32 32\"\n aria-hidden=\"true\"\n >\n <path\n fill=\"none\"\n d=\"M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z\"\n data-icon-path=\"inner-path\"\n ></path>\n <path\n d=\"M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z\"\n ></path>\n <path\n d=\"M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z\"\n ></path>\n <title>Warning alt filled</title>\n </svg>\n {{ node.control.alert | translate }}\n</label>\n\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\" *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 class=\"divider\" />\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 >\n </ofe-form-renderer>\n <div *ngIf=\"child.orderNumber\" class=\"order-number\">\n <span\n >{{ 'orderNumber' | translate }}: {{ child.orderNumber }}\n </span>\n </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 class=\"divider\" />\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\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 class=\"divider\" />\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\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 class=\"divider\" />\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\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 class=\"divider\" />\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\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: [".button-set{margin-top:1rem}.nav-button{border-top:1px solid #dde1e6;height:5rem;max-width:50%;min-width:50%;padding-block:.25rem;align-items:center}.nav-link{min-width:100%;display:flex;align-items:flex-start;flex-direction:column}.nav-link-text{margin-top:.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - .25rem);font-size:var(--cds-body-01-font-size, .875rem);font-weight:var(--cds-body-01-font-weight, 400);line-height:var(--cds-body-01-line-height, 1.42857);letter-spacing:var(--cds-body-01-letter-spacing, .16px)}.nav-label{font-size:var(--cds-label-01-font-size, .75rem);font-weight:var(--cds-label-01-font-weight, 400);line-height:var(--cds-label-01-line-height, 1.33333);letter-spacing:var(--cds-label-01-letter-spacing, .32px);color:#525252}ul{list-style-type:none;margin:2px auto;position:relative}li{display:block;padding:10px 20px;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%)}.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:.25rem}.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)}.text-warn{color:#eea616}.error{margin-top:.25rem}.warning{display:flex;align-items:center;margin:0 .25rem .75rem}.warning svg{margin-right:.25rem}.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;overflow-wrap:break-word}.accordion-content-override:hover{opacity:unset;border-bottom:none}.question-area{margin-bottom:.5rem;width:100%;min-width:18rem}.question-area>label{overflow-wrap:break-word}.in-line{display:inline-block;padding-right:.5rem}.use-value{overflow-wrap:break-word}.custom-text-area{width:100%}.container .cds--inline-notification--error{display:flex;align-items:center}.container .cds--inline-notification--error svg{margin-left:1rem;margin-block-start:0}.container .cds--inline-notification--low-contrast:before{border-width:1px 1px 0 0}.divider{border-color:#e0e0e0;border-style:solid;border-bottom:none;margin:.75rem 0rem}.order-number{margin:1rem 0}.well{margin-bottom:1rem}\n"] }]
|
|
8781
8781
|
}], ctorParameters: function () { return [{ type: ValidationFactory }, { type: DataSources }, { type: FormErrorsService }, { type: i1.TranslateService }, { type: Document, decorators: [{
|
|
8782
8782
|
type: Inject,
|
|
8783
8783
|
args: [DOCUMENT]
|