@openmrs/ngx-formentry 4.0.1-pre.320 → 4.0.1-pre.323
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.
- package/components/ngx-tabset/components/ngx-tab-set.component.d.ts +3 -2
- package/esm2020/components/ngx-datetime-picker/ngx-datetime-picker.component.mjs +2 -2
- package/esm2020/components/ngx-tabset/components/ngx-tab-set.component.mjs +5 -3
- package/esm2020/form-entry/form-renderer/form-renderer.component.mjs +15 -6
- package/fesm2015/openmrs-ngx-formentry.mjs +19 -8
- package/fesm2015/openmrs-ngx-formentry.mjs.map +1 -1
- package/fesm2020/openmrs-ngx-formentry.mjs +19 -8
- package/fesm2020/openmrs-ngx-formentry.mjs.map +1 -1
- package/form-entry/form-renderer/form-renderer.component.d.ts +5 -3
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AfterContentInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
|
2
|
-
import type { QueryList } from '@angular/core';
|
|
2
|
+
import type { QueryList, TemplateRef } from '@angular/core';
|
|
3
3
|
import { TabComponent } from './tab.component';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class TabSetComponent implements AfterContentInit, OnChanges {
|
|
@@ -8,6 +8,7 @@ export declare class TabSetComponent implements AfterContentInit, OnChanges {
|
|
|
8
8
|
customNavClass: String;
|
|
9
9
|
customTabsClass: String;
|
|
10
10
|
selectedIndex: Number;
|
|
11
|
+
formSubmissionTemplate: TemplateRef<unknown>;
|
|
11
12
|
tabSelect: EventEmitter<any>;
|
|
12
13
|
ngOnChanges(changes: SimpleChanges): void;
|
|
13
14
|
ngAfterContentInit(): void;
|
|
@@ -15,5 +16,5 @@ export declare class TabSetComponent implements AfterContentInit, OnChanges {
|
|
|
15
16
|
selectTab(tabToSelect: TabComponent): void;
|
|
16
17
|
getStatusClasses(active: any, disabled: any): "active" | "disabled" | "enabled";
|
|
17
18
|
static ɵfac: i0.ɵɵFactoryDeclaration<TabSetComponent, never>;
|
|
18
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TabSetComponent, "ofe-tab-set", never, { "disableStyle": "disableStyle"; "customNavClass": "customNavClass"; "customTabsClass": "customTabsClass"; "selectedIndex": "selectedIndex"; }, { "tabSelect": "tabSelect"; }, ["tabs"], ["*"], false>;
|
|
19
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TabSetComponent, "ofe-tab-set", never, { "disableStyle": "disableStyle"; "customNavClass": "customNavClass"; "customTabsClass": "customTabsClass"; "selectedIndex": "selectedIndex"; "formSubmissionTemplate": "formSubmissionTemplate"; }, { "tabSelect": "tabSelect"; }, ["tabs"], ["*"], false>;
|
|
19
20
|
}
|
|
@@ -52,7 +52,7 @@ NgxDatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
52
52
|
useExisting: forwardRef(() => NgxDatetimeComponent),
|
|
53
53
|
multi: true
|
|
54
54
|
}
|
|
55
|
-
], ngImport: i0, template: "<div class=\"date-time-picker-container\">\n <div\n data-date-picker\n data-date-picker-type=\"single\"\n class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n [ngClass]=\"{\n 'cds--date-picker--light': theme === 'light'\n}\"\n >\n <div class=\"cds--date-picker-container fill\">\n <div class=\"cds--date-picker-input__wrapper\">\n <input\n [disabled]=\"isDisabled\"\n (dateTimeChange)=\"onInput($event)\"\n type=\"text\"\n class=\"cds--date-picker__input fill\"\n [id]=\"id\"\n [value]=\"value\"\n [owlDateTime]=\"dt1\"\n [ofeOwlDateTimeTrigger]=\"dt1\"\n placeholder=\"mm/dd/yyyy\"\n data-date-picker-input\n />\n <svg\n [ofeOwlDateTimeTrigger]=\"dt1\"\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n style=\"will-change: transform\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-date-picker-icon=\"true\"\n class=\"cds--date-picker__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showWeeks\"\n class=\"cds--select some-class week-select-wrapper\"\n [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n >\n <div class=\"cds--select-input__wrapper\">\n <select\n (change)=\"onWeeksSelected($event.target.value)\"\n id=\"select-1\"\n class=\"cds--select-input\"\n >\n <option\n class=\"cds--select-option\"\n value=\"placeholder-item\"\n disabled=\"\"\n hidden=\"\"\n selected=\"\"\n >\n {{ 'selectWeeks' | translate }}\n </option>\n <option\n class=\"cds--select-option\"\n [value]=\"week\"\n *ngFor=\"let week of weeks\"\n >\n {{week}} {{ 'weeks' | translate }}\n </option>\n </select>\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--select__arrow\"\n >\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n </div>\n</div>\n<ofe-owl-date-time\n [pickerType]=\"datePickerFormat ? datePickerFormat : 'calendar'\"\n [disabled]=\"isDisabled\"\n #dt1\n></ofe-owl-date-time>\n", styles: [".date-time-picker-container{display:
|
|
55
|
+
], ngImport: i0, template: "<div class=\"date-time-picker-container\">\n <div\n data-date-picker\n data-date-picker-type=\"single\"\n class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n [ngClass]=\"{\n 'cds--date-picker--light': theme === 'light'\n}\"\n >\n <div class=\"cds--date-picker-container fill\">\n <div class=\"cds--date-picker-input__wrapper\">\n <input\n [disabled]=\"isDisabled\"\n (dateTimeChange)=\"onInput($event)\"\n type=\"text\"\n class=\"cds--date-picker__input fill\"\n [id]=\"id\"\n [value]=\"value\"\n [owlDateTime]=\"dt1\"\n [ofeOwlDateTimeTrigger]=\"dt1\"\n placeholder=\"mm/dd/yyyy\"\n data-date-picker-input\n />\n <svg\n [ofeOwlDateTimeTrigger]=\"dt1\"\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n style=\"will-change: transform\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-date-picker-icon=\"true\"\n class=\"cds--date-picker__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showWeeks\"\n class=\"cds--select some-class week-select-wrapper\"\n [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n >\n <div class=\"cds--select-input__wrapper\">\n <select\n (change)=\"onWeeksSelected($event.target.value)\"\n id=\"select-1\"\n class=\"cds--select-input\"\n >\n <option\n class=\"cds--select-option\"\n value=\"placeholder-item\"\n disabled=\"\"\n hidden=\"\"\n selected=\"\"\n >\n {{ 'selectWeeks' | translate }}\n </option>\n <option\n class=\"cds--select-option\"\n [value]=\"week\"\n *ngFor=\"let week of weeks\"\n >\n {{week}} {{ 'weeks' | translate }}\n </option>\n </select>\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--select__arrow\"\n >\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n </div>\n</div>\n<ofe-owl-date-time\n [pickerType]=\"datePickerFormat ? datePickerFormat : 'calendar'\"\n [disabled]=\"isDisabled\"\n #dt1\n></ofe-owl-date-time>\n", styles: [".date-time-picker-container{display:grid;row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.OwlDateTimeTriggerDirective, selector: "[ofeOwlDateTimeTrigger]", inputs: ["ofeOwlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i4.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["owlDateTime", "owlDateTimeFilter", "min", "max", "selectMode", "value", "values", "_disabled", "rangeSeparator"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5.OwlDateTimeComponent, selector: "ofe-owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "afterPickerOpen", "yearSelected", "monthSelected"], exportAs: ["owlDateTime"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
|
|
56
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxDatetimeComponent, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{ selector: 'ofe-ngx-date-time-picker', providers: [
|
|
@@ -61,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
61
61
|
useExisting: forwardRef(() => NgxDatetimeComponent),
|
|
62
62
|
multi: true
|
|
63
63
|
}
|
|
64
|
-
], template: "<div class=\"date-time-picker-container\">\n <div\n data-date-picker\n data-date-picker-type=\"single\"\n class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n [ngClass]=\"{\n 'cds--date-picker--light': theme === 'light'\n}\"\n >\n <div class=\"cds--date-picker-container fill\">\n <div class=\"cds--date-picker-input__wrapper\">\n <input\n [disabled]=\"isDisabled\"\n (dateTimeChange)=\"onInput($event)\"\n type=\"text\"\n class=\"cds--date-picker__input fill\"\n [id]=\"id\"\n [value]=\"value\"\n [owlDateTime]=\"dt1\"\n [ofeOwlDateTimeTrigger]=\"dt1\"\n placeholder=\"mm/dd/yyyy\"\n data-date-picker-input\n />\n <svg\n [ofeOwlDateTimeTrigger]=\"dt1\"\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n style=\"will-change: transform\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-date-picker-icon=\"true\"\n class=\"cds--date-picker__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showWeeks\"\n class=\"cds--select some-class week-select-wrapper\"\n [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n >\n <div class=\"cds--select-input__wrapper\">\n <select\n (change)=\"onWeeksSelected($event.target.value)\"\n id=\"select-1\"\n class=\"cds--select-input\"\n >\n <option\n class=\"cds--select-option\"\n value=\"placeholder-item\"\n disabled=\"\"\n hidden=\"\"\n selected=\"\"\n >\n {{ 'selectWeeks' | translate }}\n </option>\n <option\n class=\"cds--select-option\"\n [value]=\"week\"\n *ngFor=\"let week of weeks\"\n >\n {{week}} {{ 'weeks' | translate }}\n </option>\n </select>\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--select__arrow\"\n >\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n </div>\n</div>\n<ofe-owl-date-time\n [pickerType]=\"datePickerFormat ? datePickerFormat : 'calendar'\"\n [disabled]=\"isDisabled\"\n #dt1\n></ofe-owl-date-time>\n", styles: [".date-time-picker-container{display:
|
|
64
|
+
], template: "<div class=\"date-time-picker-container\">\n <div\n data-date-picker\n data-date-picker-type=\"single\"\n class=\"cds--date-picker cds--date-picker--single cds--date-picker--light\"\n [ngClass]=\"{\n 'cds--date-picker--light': theme === 'light'\n}\"\n >\n <div class=\"cds--date-picker-container fill\">\n <div class=\"cds--date-picker-input__wrapper\">\n <input\n [disabled]=\"isDisabled\"\n (dateTimeChange)=\"onInput($event)\"\n type=\"text\"\n class=\"cds--date-picker__input fill\"\n [id]=\"id\"\n [value]=\"value\"\n [owlDateTime]=\"dt1\"\n [ofeOwlDateTimeTrigger]=\"dt1\"\n placeholder=\"mm/dd/yyyy\"\n data-date-picker-input\n />\n <svg\n [ofeOwlDateTimeTrigger]=\"dt1\"\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid meet\"\n style=\"will-change: transform\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-date-picker-icon=\"true\"\n class=\"cds--date-picker__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M13,2h-2V1h-1v1H6V1H5v1H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V3C14,2.4,13.6,2,13,2z M13,13H3V6h10V13z M13,5H3V3h2v1h1V3h4v1h1V3h2V5z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"showWeeks\"\n class=\"cds--select some-class week-select-wrapper\"\n [ngClass]=\"{'cds--select--light': theme === 'light'}\"\n >\n <div class=\"cds--select-input__wrapper\">\n <select\n (change)=\"onWeeksSelected($event.target.value)\"\n id=\"select-1\"\n class=\"cds--select-input\"\n >\n <option\n class=\"cds--select-option\"\n value=\"placeholder-item\"\n disabled=\"\"\n hidden=\"\"\n selected=\"\"\n >\n {{ 'selectWeeks' | translate }}\n </option>\n <option\n class=\"cds--select-option\"\n [value]=\"week\"\n *ngFor=\"let week of weeks\"\n >\n {{week}} {{ 'weeks' | translate }}\n </option>\n </select>\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--select__arrow\"\n >\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n </div>\n</div>\n<ofe-owl-date-time\n [pickerType]=\"datePickerFormat ? datePickerFormat : 'calendar'\"\n [disabled]=\"isDisabled\"\n #dt1\n></ofe-owl-date-time>\n", styles: [".date-time-picker-container{display:grid;row-gap:1rem}\n"] }]
|
|
65
65
|
}], propDecorators: { id: [{
|
|
66
66
|
type: Input
|
|
67
67
|
}], theme: [{
|
|
@@ -51,10 +51,10 @@ export class TabSetComponent {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
TabSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TabSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
-
TabSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TabSetComponent, selector: "ofe-tab-set", inputs: { disableStyle: "disableStyle", customNavClass: "customNavClass", customTabsClass: "customTabsClass", selectedIndex: "selectedIndex" }, outputs: { tabSelect: "tabSelect" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], usesOnChanges: true, ngImport: i0, template: "<div
|
|
54
|
+
TabSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TabSetComponent, selector: "ofe-tab-set", inputs: { disableStyle: "disableStyle", customNavClass: "customNavClass", customTabsClass: "customTabsClass", selectedIndex: "selectedIndex", formSubmissionTemplate: "formSubmissionTemplate" }, outputs: { tabSelect: "tabSelect" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-container\">\n <section>\n <div class=\"tab\">\n <button\n ofeHoverClass=\"hover\"\n class=\"tablinks completed\"\n *ngFor=\"let tab of tabs\"\n (click)=\"selectTab(tab)\"\n [class]=\"getStatusClasses(tab.active, tab.disabled)\"\n >\n <span>{{ tab.tabTitle }}</span>\n </button>\n <ng-container *ngTemplateOutlet=\"formSubmissionTemplate\"></ng-container>\n </div>\n </section>\n <section id=\"tab\" class=\"tab-content\">\n <ng-content></ng-content>\n </section>\n</div>\n", styles: [".tab{width:10rem;position:fixed}.tab button{font-family:inherit;display:block;background-color:inherit;width:100%;border:none;outline:none;text-align:left;transition:.3s;min-height:2rem;white-space:normal;word-wrap:break-word;margin:0 0 .063rem}.tab button :hover{cursor:pointer}@media screen and (max-width: 768px){.tab button{height:3rem;border-bottom:.0125rem solid var(--open-mrs-background-gray);width:10rem}}.tab button.active.hover,.tab button.enabled.hover{background-color:var(--gray-gray-10)}.tab button.completed{border-left:.5rem solid var(--inverse-support-02);background-color:var(--color-green-10);font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.active{background-color:#ededed;border-left:.5rem solid #009d9a;font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--color-gray-100)}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--gray-gray-30)}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab-container{display:grid;grid-template-columns:179px auto}.tab-content{overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.HoverClassDirective, selector: "[ofeHoverClass]", inputs: ["hoverClass"] }] });
|
|
55
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TabSetComponent, decorators: [{
|
|
56
56
|
type: Component,
|
|
57
|
-
args: [{ selector: 'ofe-tab-set', template: "<div
|
|
57
|
+
args: [{ selector: 'ofe-tab-set', template: "<div class=\"tab-container\">\n <section>\n <div class=\"tab\">\n <button\n ofeHoverClass=\"hover\"\n class=\"tablinks completed\"\n *ngFor=\"let tab of tabs\"\n (click)=\"selectTab(tab)\"\n [class]=\"getStatusClasses(tab.active, tab.disabled)\"\n >\n <span>{{ tab.tabTitle }}</span>\n </button>\n <ng-container *ngTemplateOutlet=\"formSubmissionTemplate\"></ng-container>\n </div>\n </section>\n <section id=\"tab\" class=\"tab-content\">\n <ng-content></ng-content>\n </section>\n</div>\n", styles: [".tab{width:10rem;position:fixed}.tab button{font-family:inherit;display:block;background-color:inherit;width:100%;border:none;outline:none;text-align:left;transition:.3s;min-height:2rem;white-space:normal;word-wrap:break-word;margin:0 0 .063rem}.tab button :hover{cursor:pointer}@media screen and (max-width: 768px){.tab button{height:3rem;border-bottom:.0125rem solid var(--open-mrs-background-gray);width:10rem}}.tab button.active.hover,.tab button.enabled.hover{background-color:var(--gray-gray-10)}.tab button.completed{border-left:.5rem solid var(--inverse-support-02);background-color:var(--color-green-10);font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.active{background-color:#ededed;border-left:.5rem solid #009d9a;font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:#161616}.tab button.enabled{background-color:#fff;border-left:.5rem solid #9ef0f0;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--color-gray-100)}.tab button.error{background-color:var(--color-red-10);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab button.disabled{background-color:#fff;border-left:.5rem solid #dae0e0;font-size:.875rem;font-weight:400;font-stretch:normal;font-style:normal;line-height:1.43;letter-spacing:.16px;color:var(--gray-gray-30)}.tab button.active.error{background-color:var(--color-red-20);border-left:.5rem solid var(--open-mrs-danger-red-60);font-size:.875rem;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.29;letter-spacing:.16px;color:#da1e28}.tab-container{display:grid;grid-template-columns:179px auto}.tab-content{overflow-x:hidden}\n"] }]
|
|
58
58
|
}], propDecorators: { tabs: [{
|
|
59
59
|
type: ContentChildren,
|
|
60
60
|
args: [TabComponent]
|
|
@@ -66,7 +66,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
66
66
|
type: Input
|
|
67
67
|
}], selectedIndex: [{
|
|
68
68
|
type: Input
|
|
69
|
+
}], formSubmissionTemplate: [{
|
|
70
|
+
type: Input
|
|
69
71
|
}], tabSelect: [{
|
|
70
72
|
type: Output
|
|
71
73
|
}] } });
|
|
72
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
74
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRhYi1zZXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm1lbnRyeS9zcmMvY29tcG9uZW50cy9uZ3gtdGFic2V0L2NvbXBvbmVudHMvbmd4LXRhYi1zZXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm1lbnRyeS9zcmMvY29tcG9uZW50cy9uZ3gtdGFic2V0L2NvbXBvbmVudHMvbmd4LXRhYi1zZXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxlQUFlLEVBRWYsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEVBR2IsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7O0FBTy9DLE1BQU0sT0FBTyxlQUFlO0lBTDVCO1FBUWtCLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLG1CQUFjLEdBQVcsRUFBRSxDQUFDO1FBQzVCLG9CQUFlLEdBQVcsRUFBRSxDQUFDO1FBQzdCLGtCQUFhLEdBQVcsQ0FBQyxDQUFDO1FBR3pCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0tBOENqRDtJQTVDQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsYUFBYSxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxXQUFXLEVBQUU7WUFDL0QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQztTQUN6RTtJQUNILENBQUM7SUFFRCwwQkFBMEI7SUFDbkIsa0JBQWtCO1FBQ3ZCLHNCQUFzQjtRQUN0QixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEdBQWlCLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUV2RSxvREFBb0Q7UUFDcEQsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksVUFBVSxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUU7Z0JBQzNCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQzthQUNqQztRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVNLE9BQU8sQ0FBQyxNQUFNLElBQUcsQ0FBQztJQUVsQixTQUFTLENBQUMsV0FBeUI7UUFDeEMsSUFBSSxXQUFXLENBQUMsUUFBUSxLQUFLLElBQUksSUFBSSxXQUFXLENBQUMsTUFBTSxLQUFLLElBQUksRUFBRTtZQUNoRSxPQUFPO1NBQ1I7UUFFRCxzQkFBc0I7UUFDdEIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxHQUFpQixFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUV6RSw0Q0FBNEM7UUFDNUMsV0FBVyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFDMUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQztJQUNoRSxDQUFDO0lBQ00sZ0JBQWdCLENBQUMsTUFBTSxFQUFFLFFBQVE7UUFDdEMsSUFBSSxNQUFNLEVBQUU7WUFDVixPQUFPLFFBQVEsQ0FBQztTQUNqQjtRQUNELElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDeEIsT0FBTyxTQUFTLENBQUM7U0FDbEI7UUFDRCxJQUFJLFFBQVEsRUFBRTtZQUNaLE9BQU8sVUFBVSxDQUFDO1NBQ25CO0lBQ0gsQ0FBQzs7NEdBdERVLGVBQWU7Z0dBQWYsZUFBZSwrU0FDVCxZQUFZLGtEQ3BCL0IsdWpCQW1CQTsyRkRBYSxlQUFlO2tCQUwzQixTQUFTOytCQUNFLGFBQWE7OEJBS2UsSUFBSTtzQkFBekMsZUFBZTt1QkFBQyxZQUFZO2dCQUViLFlBQVk7c0JBQTNCLEtBQUs7Z0JBQ1UsY0FBYztzQkFBN0IsS0FBSztnQkFDVSxlQUFlO3NCQUE5QixLQUFLO2dCQUNVLGFBQWE7c0JBQTVCLEtBQUs7Z0JBQ0csc0JBQXNCO3NCQUE5QixLQUFLO2dCQUVXLFNBQVM7c0JBQXpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXNcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgdHlwZSB7IFF1ZXJ5TGlzdCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgVGFiQ29tcG9uZW50IH0gZnJvbSAnLi90YWIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnb2ZlLXRhYi1zZXQnLFxuICBzdHlsZVVybHM6IFsnbmd4LXRhYi1zZXQuY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICduZ3gtdGFiLXNldC5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgVGFiU2V0Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCwgT25DaGFuZ2VzIHtcbiAgQENvbnRlbnRDaGlsZHJlbihUYWJDb21wb25lbnQpIHB1YmxpYyB0YWJzOiBRdWVyeUxpc3Q8VGFiQ29tcG9uZW50PjtcblxuICBASW5wdXQoKSBwdWJsaWMgZGlzYWJsZVN0eWxlID0gZmFsc2U7XG4gIEBJbnB1dCgpIHB1YmxpYyBjdXN0b21OYXZDbGFzczogU3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHB1YmxpYyBjdXN0b21UYWJzQ2xhc3M6IFN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBwdWJsaWMgc2VsZWN0ZWRJbmRleDogTnVtYmVyID0gMDtcbiAgQElucHV0KCkgZm9ybVN1Ym1pc3Npb25UZW1wbGF0ZTogVGVtcGxhdGVSZWY8dW5rbm93bj47XG5cbiAgQE91dHB1dCgpIHB1YmxpYyB0YWJTZWxlY3QgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzLnNlbGVjdGVkSW5kZXggJiYgIWNoYW5nZXMuc2VsZWN0ZWRJbmRleC5maXJzdENoYW5nZSkge1xuICAgICAgdGhpcy5zZWxlY3RUYWIodGhpcy50YWJzLnRvQXJyYXkoKVtjaGFuZ2VzLnNlbGVjdGVkSW5kZXguY3VycmVudFZhbHVlXSk7XG4gICAgfVxuICB9XG5cbiAgLy8gY29udGVudENoaWxkcmVuIGFyZSBzZXRcbiAgcHVibGljIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICAvLyBnZXQgYWxsIGFjdGl2ZSB0YWJzXG4gICAgY29uc3QgYWN0aXZlVGFicyA9IHRoaXMudGFicy5maWx0ZXIoKHRhYjogVGFiQ29tcG9uZW50KSA9PiB0YWIuYWN0aXZlKTtcblxuICAgIC8vIGlmIHRoZXJlIGlzIG5vIGFjdGl2ZSB0YWIgc2V0LCBhY3RpdmF0ZSB0aGUgZmlyc3RcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIGlmIChhY3RpdmVUYWJzLmxlbmd0aCA9PT0gMCkge1xuICAgICAgICB0aGlzLnNlbGVjdFRhYih0aGlzLnRhYnMuZmlyc3QpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG9uSG92ZXIoJGV2ZW50KSB7fVxuXG4gIHB1YmxpYyBzZWxlY3RUYWIodGFiVG9TZWxlY3Q6IFRhYkNvbXBvbmVudCk6IHZvaWQge1xuICAgIGlmICh0YWJUb1NlbGVjdC5kaXNhYmxlZCA9PT0gdHJ1ZSB8fCB0YWJUb1NlbGVjdC5hY3RpdmUgPT09IHRydWUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICAvLyBkZWFjdGl2YXRlIGFsbCB0YWJzXG4gICAgdGhpcy50YWJzLnRvQXJyYXkoKS5mb3JFYWNoKCh0YWI6IFRhYkNvbXBvbmVudCkgPT4gKHRhYi5hY3RpdmUgPSBmYWxzZSkpO1xuXG4gICAgLy8gYWN0aXZhdGUgdGhlIHRhYiB0aGUgdXNlciBoYXMgY2xpY2tlZCBvbi5cbiAgICB0YWJUb1NlbGVjdC5hY3RpdmUgPSB0cnVlO1xuICAgIHRoaXMudGFiU2VsZWN0LmVtaXQodGhpcy50YWJzLnRvQXJyYXkoKS5pbmRleE9mKHRhYlRvU2VsZWN0KSk7XG4gIH1cbiAgcHVibGljIGdldFN0YXR1c0NsYXNzZXMoYWN0aXZlLCBkaXNhYmxlZCkge1xuICAgIGlmIChhY3RpdmUpIHtcbiAgICAgIHJldHVybiAnYWN0aXZlJztcbiAgICB9XG4gICAgaWYgKCFkaXNhYmxlZCAmJiAhYWN0aXZlKSB7XG4gICAgICByZXR1cm4gJ2VuYWJsZWQnO1xuICAgIH1cbiAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybiAnZGlzYWJsZWQnO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInRhYi1jb250YWluZXJcIj5cbiAgPHNlY3Rpb24+XG4gICAgPGRpdiBjbGFzcz1cInRhYlwiPlxuICAgICAgPGJ1dHRvblxuICAgICAgICBvZmVIb3ZlckNsYXNzPVwiaG92ZXJcIlxuICAgICAgICBjbGFzcz1cInRhYmxpbmtzIGNvbXBsZXRlZFwiXG4gICAgICAgICpuZ0Zvcj1cImxldCB0YWIgb2YgdGFic1wiXG4gICAgICAgIChjbGljayk9XCJzZWxlY3RUYWIodGFiKVwiXG4gICAgICAgIFtjbGFzc109XCJnZXRTdGF0dXNDbGFzc2VzKHRhYi5hY3RpdmUsIHRhYi5kaXNhYmxlZClcIlxuICAgICAgPlxuICAgICAgICA8c3Bhbj57eyB0YWIudGFiVGl0bGUgfX08L3NwYW4+XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJmb3JtU3VibWlzc2lvblRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG4gIDwvc2VjdGlvbj5cbiAgPHNlY3Rpb24gaWQ9XCJ0YWJcIiBjbGFzcz1cInRhYi1jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L3NlY3Rpb24+XG48L2Rpdj5cbiJdfQ==
|