ngx-t-forms 2.0.19 → 2.0.21
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/fesm2022/{ngx-t-forms-calculated-field-rules.component-DEJbn9nu.mjs → ngx-t-forms-calculated-field-rules.component-B2YIcoUu.mjs} +8 -8
- package/fesm2022/{ngx-t-forms-calculated-field-rules.component-DEJbn9nu.mjs.map → ngx-t-forms-calculated-field-rules.component-B2YIcoUu.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-chip-options-creator-editor.component-DtguOclg.mjs → ngx-t-forms-chip-options-creator-editor.component-DwpTxw1V.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-chip-options-creator-editor.component-DtguOclg.mjs.map → ngx-t-forms-chip-options-creator-editor.component-DwpTxw1V.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-config-mscoa-additional-inputs.component-CiRP_UnS.mjs → ngx-t-forms-config-mscoa-additional-inputs.component-BgS1g7ix.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-config-mscoa-additional-inputs.component-CiRP_UnS.mjs.map → ngx-t-forms-config-mscoa-additional-inputs.component-BgS1g7ix.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-data-source-picker.component-B72gg_2g.mjs → ngx-t-forms-data-source-picker.component-ctmzo51S.mjs} +8 -8
- package/fesm2022/{ngx-t-forms-data-source-picker.component-B72gg_2g.mjs.map → ngx-t-forms-data-source-picker.component-ctmzo51S.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-document-list-label-config-editor.component-CJHaDkWl.mjs → ngx-t-forms-document-list-label-config-editor.component-B1ouOnk1.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-document-list-label-config-editor.component-CJHaDkWl.mjs.map → ngx-t-forms-document-list-label-config-editor.component-B1ouOnk1.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-form-input-selector.component-P4H4WpFZ.mjs → ngx-t-forms-form-input-selector.component-Dqru3fNh.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-form-input-selector.component-P4H4WpFZ.mjs.map → ngx-t-forms-form-input-selector.component-Dqru3fNh.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-form-json-view.component-oyKkXwik.mjs → ngx-t-forms-form-json-view.component-70kAIKgZ.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-form-json-view.component-oyKkXwik.mjs.map → ngx-t-forms-form-json-view.component-70kAIKgZ.mjs.map} +1 -1
- package/fesm2022/ngx-t-forms-form-section-stepper.component-BQBmaKv_.mjs +261 -0
- package/fesm2022/ngx-t-forms-form-section-stepper.component-BQBmaKv_.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-forms-builder-menu.component-rWqYX5DN.mjs → ngx-t-forms-forms-builder-menu.component-DrOUX-zW.mjs} +7 -8
- package/fesm2022/ngx-t-forms-forms-builder-menu.component-DrOUX-zW.mjs.map +1 -0
- package/fesm2022/ngx-t-forms-input-editor.component-BBvl6AEn.mjs +147 -0
- package/fesm2022/ngx-t-forms-input-editor.component-BBvl6AEn.mjs.map +1 -0
- package/fesm2022/ngx-t-forms-mat-chip-list-editor.component-Bqwo6PW5.mjs +95 -0
- package/fesm2022/ngx-t-forms-mat-chip-list-editor.component-Bqwo6PW5.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-mat-slider-editor.component-DoUmq086.mjs → ngx-t-forms-mat-slider-editor.component-BZWy7sKx.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-mat-slider-editor.component-DoUmq086.mjs.map → ngx-t-forms-mat-slider-editor.component-BZWy7sKx.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-mat-slider-toggle-editor.component-D3HzD0S7.mjs → ngx-t-forms-mat-slider-toggle-editor.component-J8LET3HI.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-mat-slider-toggle-editor.component-D3HzD0S7.mjs.map → ngx-t-forms-mat-slider-toggle-editor.component-J8LET3HI.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-missing-form-configs.component-CzVh21f1.mjs → ngx-t-forms-missing-form-configs.component-BgrZn2dM.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-missing-form-configs.component-CzVh21f1.mjs.map → ngx-t-forms-missing-form-configs.component-BgrZn2dM.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-mscoa-segment-config.component-B8hNJxAR.mjs → ngx-t-forms-mscoa-segment-config.component-C8Vnyf0v.mjs} +6 -6
- package/fesm2022/{ngx-t-forms-mscoa-segment-config.component-B8hNJxAR.mjs.map → ngx-t-forms-mscoa-segment-config.component-C8Vnyf0v.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-ngx-t-forms-Izs2rqnL.mjs → ngx-t-forms-ngx-t-forms-zYBCwTI4.mjs} +511 -47
- package/fesm2022/ngx-t-forms-ngx-t-forms-zYBCwTI4.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-pipeline-generator.component-CmQrax2H.mjs → ngx-t-forms-pipeline-generator.component-B2mJBxEI.mjs} +9 -9
- package/fesm2022/{ngx-t-forms-pipeline-generator.component-CmQrax2H.mjs.map → ngx-t-forms-pipeline-generator.component-B2mJBxEI.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-required-inputs.component-ByKaRMqs.mjs → ngx-t-forms-required-inputs.component-Dk1IsAgn.mjs} +7 -7
- package/fesm2022/{ngx-t-forms-required-inputs.component-ByKaRMqs.mjs.map → ngx-t-forms-required-inputs.component-Dk1IsAgn.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-rest-api-call-setup.component-CbfQ7vUk.mjs → ngx-t-forms-rest-api-call-setup.component-B90hJQlL.mjs} +4 -4
- package/fesm2022/{ngx-t-forms-rest-api-call-setup.component-CbfQ7vUk.mjs.map → ngx-t-forms-rest-api-call-setup.component-B90hJQlL.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-section-report.component-DKqmKqzM.mjs → ngx-t-forms-section-report.component-CGLiAw8J.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-section-report.component-DKqmKqzM.mjs.map → ngx-t-forms-section-report.component-CGLiAw8J.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-selection-options-editor.component-B2A4Shzb.mjs → ngx-t-forms-selection-options-editor.component-C0il9Xf5.mjs} +6 -6
- package/fesm2022/{ngx-t-forms-selection-options-editor.component-B2A4Shzb.mjs.map → ngx-t-forms-selection-options-editor.component-C0il9Xf5.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-t-workflow-picker.component-_RMb3PB4.mjs → ngx-t-forms-t-workflow-picker.component-DH7hjTyE.mjs} +6 -6
- package/fesm2022/{ngx-t-forms-t-workflow-picker.component-_RMb3PB4.mjs.map → ngx-t-forms-t-workflow-picker.component-DH7hjTyE.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-validators-config.component-iqXx3hXU.mjs → ngx-t-forms-validators-config.component-BfnTGXA_.mjs} +8 -8
- package/fesm2022/{ngx-t-forms-validators-config.component-iqXx3hXU.mjs.map → ngx-t-forms-validators-config.component-BfnTGXA_.mjs.map} +1 -1
- package/fesm2022/ngx-t-forms.mjs +1 -1
- package/lib/components/form-builder/elements/form-section-stepper/form-section-stepper.component.d.ts +3 -0
- package/lib/components/t-dynamic-data-edit/elements/mat-chip-list-editor/mat-chip-list-editor.component.d.ts +1 -0
- package/lib/components/t-form-input/elements/editor-input-element/core/editor-js-input/editor-js-input.component.d.ts +6 -2
- package/lib/components/t-form-input/elements/workflow-adjudication/elements/submission-review/submission-review.component.d.ts +84 -0
- package/lib/components/t-form-input/elements/workflow-adjudication/elements/workflow-adjudication-reactive-input/workflow-adjudication-reactive-input.component.d.ts +4 -3
- package/lib/components/user-form-stepper/user-form-stepper.component.d.ts +3 -0
- package/lib/services/core/t-form-tower-controller/form-tower-controller.service.d.ts +1 -0
- package/lib/services/core/t-form-tower-controller/functions/selectFormSteps.d.ts +5 -0
- package/lib/services/core/tour/tour-manager.service.d.ts +10 -0
- package/lib/services/index.d.ts +2 -1
- package/lib/shared/functions/mapColors.d.ts +1 -0
- package/package.json +2 -2
- package/fesm2022/ngx-t-forms-form-section-stepper.component-qYyd6E6Q.mjs +0 -255
- package/fesm2022/ngx-t-forms-form-section-stepper.component-qYyd6E6Q.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-forms-builder-menu.component-rWqYX5DN.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-input-editor.component-BEM9U1pR.mjs +0 -147
- package/fesm2022/ngx-t-forms-input-editor.component-BEM9U1pR.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-mat-chip-list-editor.component-sKF1VLac.mjs +0 -90
- package/fesm2022/ngx-t-forms-mat-chip-list-editor.component-sKF1VLac.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-ngx-t-forms-Izs2rqnL.mjs.map +0 -1
package/fesm2022/{ngx-t-forms-ngx-t-forms-Izs2rqnL.mjs → ngx-t-forms-ngx-t-forms-zYBCwTI4.mjs}
RENAMED
|
@@ -3,7 +3,7 @@ import { Injectable, Component, InjectionToken, makeEnvironmentProviders, inject
|
|
|
3
3
|
import { DataSources, formColumnInputsSchema, ElementTypes, validateCalculatedFieldRules, CalculationFunctions, MinInputTypes, InputDataTypes, FormSubmissionStatus, InputTypes, AdjudicationSteps, getElementEditorConfig, ElementEditorTypes, AllFormInputPrimaryKeys, DefaultInputConfig, SpecialElementKeys, validateFormColumnInputsWithRequired, validateForm, FormListSection, FormStateErrors, validateFormSlide, BlurHandleTypes, AllDocumentFileExtensions, AllImageFileExtensions, InputFileType, UploadTypes, DocumentLitsLabelConfigInterfaceValueType } from 'ngx-t-forms-types';
|
|
4
4
|
import * as i1$2 from '@angular/forms';
|
|
5
5
|
import { Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
6
|
-
import { takeUntil, debounceTime, distinctUntilChanged, startWith, map, pairwise, switchMap, catchError, EMPTY, throwError, of, tap, take, forkJoin, filter, Subject, Observable, concatMap, concat, finalize, Subscription, BehaviorSubject, combineLatest, withLatestFrom, timer, firstValueFrom } from 'rxjs';
|
|
6
|
+
import { takeUntil, debounceTime, distinctUntilChanged, startWith, map, pairwise, switchMap, catchError, EMPTY, throwError, of, tap, take, forkJoin, filter, Subject, Observable, concatMap, concat, finalize, Subscription, BehaviorSubject, combineLatest, withLatestFrom, timer, firstValueFrom, shareReplay } from 'rxjs';
|
|
7
7
|
import { evaluate } from 'mathjs';
|
|
8
8
|
import * as i1 from '@angular/common/http';
|
|
9
9
|
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
|
@@ -25,15 +25,15 @@ import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
|
|
25
25
|
import * as i2 from '@angular/material/button';
|
|
26
26
|
import { MatButtonModule } from '@angular/material/button';
|
|
27
27
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
28
|
-
import * as
|
|
28
|
+
import * as i4$3 from '@angular/material/card';
|
|
29
29
|
import { MatCardModule } from '@angular/material/card';
|
|
30
30
|
import * as i4 from '@angular/material/checkbox';
|
|
31
31
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
32
|
-
import * as i4$
|
|
32
|
+
import * as i4$2 from '@angular/material/chips';
|
|
33
33
|
import { MatChipsModule } from '@angular/material/chips';
|
|
34
|
-
import * as i3$
|
|
34
|
+
import * as i3$2 from '@angular/material/stepper';
|
|
35
35
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
36
|
-
import * as i3$
|
|
36
|
+
import * as i3$1 from '@angular/material/datepicker';
|
|
37
37
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
38
38
|
import * as i4$1 from '@angular/material/divider';
|
|
39
39
|
import { MatDividerModule } from '@angular/material/divider';
|
|
@@ -48,6 +48,7 @@ import * as i6 from '@angular/material/list';
|
|
|
48
48
|
import { MatListModule } from '@angular/material/list';
|
|
49
49
|
import * as i6$2 from '@angular/material/menu';
|
|
50
50
|
import { MatMenuModule } from '@angular/material/menu';
|
|
51
|
+
import * as i7$2 from '@angular/material/core';
|
|
51
52
|
import { MatNativeDateModule, MatRippleModule, provideNativeDateAdapter } from '@angular/material/core';
|
|
52
53
|
import * as i7$1 from '@angular/material/paginator';
|
|
53
54
|
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
|
|
@@ -75,7 +76,7 @@ import * as i6$1 from '@angular/material/tooltip';
|
|
|
75
76
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
76
77
|
import * as i12 from '@angular/material/tree';
|
|
77
78
|
import { MatTreeModule, MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree';
|
|
78
|
-
import * as
|
|
79
|
+
import * as i11 from '@angular/cdk/overlay';
|
|
79
80
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
80
81
|
import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
|
|
81
82
|
import * as i1$4 from '@angular/material/autocomplete';
|
|
@@ -87,8 +88,8 @@ import * as i1$3 from '@angular/router';
|
|
|
87
88
|
import { ActivatedRoute, RouterModule, Router } from '@angular/router';
|
|
88
89
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
89
90
|
import _ from 'lodash';
|
|
90
|
-
import * as i7$
|
|
91
|
-
import { TourMatMenuModule } from 'ngx-ui-tour-md-menu';
|
|
91
|
+
import * as i7$3 from 'ngx-ui-tour-md-menu';
|
|
92
|
+
import { TourMatMenuModule, TourService } from 'ngx-ui-tour-md-menu';
|
|
92
93
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
93
94
|
import SignaturePad from 'signature_pad';
|
|
94
95
|
import CryptoJS, { HmacSHA256, enc } from 'crypto-js';
|
|
@@ -1838,6 +1839,17 @@ function selectFormSteps(self) {
|
|
|
1838
1839
|
return [];
|
|
1839
1840
|
}
|
|
1840
1841
|
}
|
|
1842
|
+
const selectAllFormTours = (self) => {
|
|
1843
|
+
const steps = selectFormSteps(self);
|
|
1844
|
+
return steps.flatMap((step) => {
|
|
1845
|
+
return step.columns.filter(c => !!c.tourContent).map((column) => ({
|
|
1846
|
+
anchorId: column.id,
|
|
1847
|
+
title: step.label,
|
|
1848
|
+
content: column.tourContent || '',
|
|
1849
|
+
sectionId: step.sectionId,
|
|
1850
|
+
}));
|
|
1851
|
+
});
|
|
1852
|
+
};
|
|
1841
1853
|
const getReloadFunction = (self, column) => {
|
|
1842
1854
|
const canReload = Object.keys(self.inputFunctionsCollection[column.id] || {}).length > 0;
|
|
1843
1855
|
if (!canReload) {
|
|
@@ -3645,6 +3657,7 @@ class FormTowerControllerService {
|
|
|
3645
3657
|
this.updateFormInputConfig = (inputId, config) => updateFormInputConfig(this, inputId, config);
|
|
3646
3658
|
this.handleStepChange = (event) => handleStepChange(this, event);
|
|
3647
3659
|
this.selectFormSteps = () => selectFormSteps(this);
|
|
3660
|
+
this.selectAllFormTours = () => selectAllFormTours(this);
|
|
3648
3661
|
this.setSectionAsSeen = (sectionId) => setSectionAsSeen(this, sectionId);
|
|
3649
3662
|
this.setSectionAsActive = (sectionId) => setSectionAsActive(this, sectionId);
|
|
3650
3663
|
this.setInputAsTouchedAndDirty = (inputId) => setInputAsTouchedAndDirty(this, inputId);
|
|
@@ -5972,9 +5985,9 @@ class FormBuilderComponent {
|
|
|
5972
5985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5973
5986
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FormBuilderComponent, isStandalone: true, selector: "app-form-builder", inputs: { formId: "formId" }, providers: [
|
|
5974
5987
|
FormsStoreService
|
|
5975
|
-
], ngImport: i0, template: "<header>\r\n <mat-toolbar color=\"primary\">\r\n @if (closeButton) {\r\n <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n <mat-icon>{{closeButton.icon}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <!-- Navigation group -->\r\n <div class=\"nav-group\">\r\n <button mat-button routerLink=\"/\">Forms</button>\r\n <mat-icon>navigate_next</mat-icon>\r\n </div>\r\n\r\n <!-- Title input with optimized binding -->\r\n @if (selectHasFormId()) {\r\n <input [(ngModel)]=\"titleValue\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n }\r\n\r\n <span class=\"spacer\"></span>\r\n\r\n @defer (on viewport) {\r\n <app-forms-builder-menu />\r\n } @placeholder {\r\n <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"20\" />\r\n </div>\r\n\r\n }\r\n\r\n <span class=\"divider\">|</span>\r\n\r\n <!-- Save/Update button with optimized reactive state -->\r\n <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\"\r\n (click)=\"saveForm()\">\r\n\r\n <mat-icon>\r\n {{(isNewForm()) ? 'save' : 'update'}}\r\n </mat-icon>\r\n\r\n @if (selectFormBuilderIsBusy()) {\r\n {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n } @else {\r\n {{(isNewForm()) ? 'Save' : 'Update'}}\r\n }\r\n </button>\r\n\r\n <!-- Updated time info -->\r\n @if (!(isNewForm())) {\r\n <div class=\"updated-time\">\r\n <mat-icon>update</mat-icon>\r\n <span>Updated {{ selectFormUpdated() }}</span>\r\n </div>\r\n }\r\n </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n <div class=\"middle\">\r\n <br>\r\n @if (selectLoadingForm()) {\r\n <div class=\"loading-container\">\r\n <mat-spinner />\r\n </div>\r\n } @else {\r\n <app-form-section-stepper />\r\n }\r\n <br>\r\n @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n <app-missing-form-configs />\r\n }\r\n </div>\r\n\r\n @if (elementEditorOpen()) {\r\n <app-input-editor style=\"max-width:480px;height:calc(100vh - 64px);z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n }\r\n <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"50\" />\r\n </div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px);background-color:var(--mat-sys-surface-container-high)}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:100%;overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:16px;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid #ffffff}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));gap:8px;align-items:center;line-height:normal;font-size:14px;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-
|
|
5988
|
+
], ngImport: i0, template: "<header>\r\n <mat-toolbar color=\"primary\">\r\n @if (closeButton) {\r\n <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n <mat-icon>{{closeButton.icon}}</mat-icon>\r\n </button>\r\n }\r\n\r\n <!-- Navigation group -->\r\n <div class=\"nav-group\">\r\n <button mat-button routerLink=\"/\">Forms</button>\r\n <mat-icon>navigate_next</mat-icon>\r\n </div>\r\n\r\n <!-- Title input with optimized binding -->\r\n @if (selectHasFormId()) {\r\n <input [(ngModel)]=\"titleValue\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n }\r\n\r\n <span class=\"spacer\"></span>\r\n\r\n @defer (on viewport) {\r\n <app-forms-builder-menu />\r\n } @placeholder {\r\n <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"20\" />\r\n </div>\r\n\r\n }\r\n\r\n <span class=\"divider\">|</span>\r\n\r\n <!-- Save/Update button with optimized reactive state -->\r\n <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\"\r\n (click)=\"saveForm()\">\r\n\r\n <mat-icon>\r\n {{(isNewForm()) ? 'save' : 'update'}}\r\n </mat-icon>\r\n\r\n @if (selectFormBuilderIsBusy()) {\r\n {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n } @else {\r\n {{(isNewForm()) ? 'Save' : 'Update'}}\r\n }\r\n </button>\r\n\r\n <!-- Updated time info -->\r\n @if (!(isNewForm())) {\r\n <div class=\"updated-time\">\r\n <mat-icon>update</mat-icon>\r\n <span>Updated {{ selectFormUpdated() }}</span>\r\n </div>\r\n }\r\n </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n <div class=\"middle\">\r\n <br>\r\n @if (selectLoadingForm()) {\r\n <div class=\"loading-container\">\r\n <mat-spinner />\r\n </div>\r\n } @else {\r\n <app-form-section-stepper />\r\n }\r\n <br>\r\n @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n <app-missing-form-configs />\r\n }\r\n </div>\r\n\r\n @if (elementEditorOpen()) {\r\n <app-input-editor style=\"max-width:480px;height:calc(100vh - 64px);z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n }\r\n <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"50\" />\r\n </div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px);background-color:var(--mat-sys-surface-container-high)}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:100%;overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:16px;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid #ffffff}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));gap:8px;align-items:center;line-height:normal;font-size:14px;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-DrOUX-zW.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-BBvl6AEn.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-BQBmaKv_.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-BgrZn2dM.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
|
|
5976
5989
|
}
|
|
5977
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-
|
|
5990
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-DrOUX-zW.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-BBvl6AEn.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-BQBmaKv_.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-BgrZn2dM.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
|
|
5978
5991
|
type: Component,
|
|
5979
5992
|
args: [{ selector: 'app-form-builder', standalone: true, imports: [CommonModule,
|
|
5980
5993
|
MatModulesModule,
|
|
@@ -6159,13 +6172,13 @@ class FormsComponent {
|
|
|
6159
6172
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormsComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: FormsStoreService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6160
6173
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FormsComponent, isStandalone: true, selector: "app-forms", providers: [
|
|
6161
6174
|
FormsStoreService,
|
|
6162
|
-
], ngImport: i0, template: "<header>\r\n <mat-toolbar class=\"app-header\" color=\"primary\">\r\n @if(closeButton){\r\n <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n <mat-icon>{{closeButton.icon}}</mat-icon>\r\n </button>\r\n }\r\n <span class=\"app-title\">Form List</span>\r\n\r\n\r\n <span class=\"flex-spacer\"></span>\r\n @for (section of formListSections; track section.value) {\r\n @if(section.value === (selectFormListSection$|async)){\r\n <button mat-flat-button (click)=\"setSection(section.value)\">\r\n <span>{{section.label}}</span>\r\n </button>\r\n }@else {\r\n <button mat-button (click)=\"setSection(section.value)\" >\r\n <span>{{section.label}}</span>\r\n </button>\r\n }\r\n }\r\n <span class=\"flex-spacer\"></span>\r\n <button mat-raised-button color=\"accent\" (click)=\"addNewForm()\" class=\"action-button\"\r\n aria-label=\"Create new form\">\r\n <mat-icon>add</mat-icon>\r\n <span>Add Form</span>\r\n </button>\r\n </mat-toolbar>\r\n</header>\r\n\r\n<div class=\"content-container\">\r\n\r\n @if((selectErrors$ |async)?.['LoadForms']){\r\n <div class=\"error-container mat-elevation-z2\">\r\n <div class=\"error-content\">\r\n <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n <span class=\"error-message\">{{(selectErrors$ |async)?.['LoadForms']}}</span>\r\n <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @if (selectLoadingForms$ | async) {\r\n <div class=\"loading-container\">\r\n\r\n <span>\r\n <mat-spinner style=\" margin: auto;\"></mat-spinner>\r\n <span style=\"position: relative;text-align: center;\">\r\n <br>\r\n Loading forms...\r\n\r\n </span>\r\n\r\n\r\n\r\n </span>\r\n\r\n\r\n </div>\r\n } @else {\r\n @if ((selectFormsList$ | async)?.length === 0) {\r\n <div class=\"empty-container\">\r\n <img src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\" alt=\"\">\r\n <p style=\"font-style: italic;\">\r\n <strong >\r\n No forms available.\r\n </strong>\r\n \r\n </p>\r\n </div>\r\n \r\n \r\n \r\n }\r\n <mat-nav-list class=\"forms-list\">\r\n \r\n @for (form of (selectFormsList$ | async) ?? []; track form._id) {\r\n\r\n <mat-list-item \r\n \r\n (click)=\"editForm(form)\"\r\n [disabled]=\"form.busy\"\r\n [class.archived]=\"form.archived\"\r\n [class.mat-elevation-z1]=\"activeForm !== form._id\" \r\n [class.mat-elevation-z2]=\"activeForm === form._id\"\r\n (mouseover)=\"activeForm = form._id\"\r\n (mouseleave)=\"activeForm = null\" \r\n class=\"form-list-item\">\r\n @if (form.busy) {\r\n <mat-spinner style=\"position: absolute; margin-left: 12px;\" matListItemAvatar [diameter]=\"48\"></mat-spinner>\r\n }\r\n\r\n <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n [alt]=\"'form image ' + form.formTitle\">\r\n <div matListItemTitle class=\"form-item-content\">\r\n <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n <div class=\"form-metadata\">\r\n\r\n @if(form.errors.length > 0) {\r\n <span><mat-icon \r\n [matTooltip]=\"form.errors.length + ' error(s) found in this form'\"\r\n color=\"warn\">error</mat-icon> <small>{{ form.errors.length}}</small></span>\r\n <span class=\"metadata-divider\">\u2022</span>\r\n }\r\n <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n <span class=\"metadata-divider\">\u2022</span>\r\n <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n @if (activeForm === form._id) {\r\n <span class=\"form-actions\" matListItemMeta>\r\n\r\n @if(!form.archived){\r\n <button mat-icon-button color=\"warn\" (click)=\"archive(form,$event)\"\r\n matTooltip=\"Archiving a form will affect all the workflows it is linked to. Make sure to review and update all workflow configurations accordingly.\"\r\n aria-label=\"Archive form\">\r\n\r\n <mat-icon>archive</mat-icon>\r\n </button>\r\n }@else {\r\n <button mat-icon-button (click)=\"delete(form,$event)\" color=\"warn\" \r\n matTooltip=\"Permanently delete a form. This action cannot be undone.\"\r\n aria-label=\"Restore form\">\r\n <mat-icon>\r\n delete_forever\r\n </mat-icon>\r\n </button>\r\n <button mat-icon-button color=\"primary\" (click)=\"unarchive(form,$event)\"\r\n matTooltip=\"Restore a form will make it available for use in workflows.\"\r\n aria-label=\"Restore form\">\r\n <mat-icon>unarchive</mat-icon>\r\n </button>\r\n }\r\n \r\n\r\n </span>\r\n }\r\n </mat-list-item>\r\n }\r\n </mat-nav-list>\r\n }\r\n\r\n</div>", styles: [".app-header{box-shadow:0 2px 4px #0000001f;position:fixed;top:0;z-index:1000}.app-title{margin-left:4px;font-weight:500}.content-container{max-width:1440px;margin:84px auto 0;padding:0 24px}.page-toolbar{background:none;padding:0;height:64px;margin-bottom:24px}.action-button .mat-icon{margin-right:8px}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(312px,1fr));grid-auto-rows:min-content;gap:12px;padding:16px;width:100%;min-height:calc(100vh - 172px)}.form-list-item{margin:0;border-radius:8px!important;border:solid 1px var(--mat-divider-color, var(--mat-sys-outline))!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none}.form-item-content{padding:16px 0}.form-title{margin-bottom:0}.form-metadata{color:#0009;font-size:14px;line-height:normal;display:flex}.form-metadata .metadata-divider{margin:0 8px}.form-metadata span{display:inline-flex;gap:4px}.form-metadata span mat-icon{font-size:14px;height:14px;width:14px}.loading-container{display:flex;justify-content:center;align-items:center;padding:48px 0}.flex-spacer{flex:1 1 auto}.active-link{background-color:#0000000d}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:8px}.form-list-item{width:100%;max-width:100%}.content-container{padding:0 16px}}.error{border:solid #f44336 1px}.error-container{background-color:#fef2f2;border-radius:8px;border-left:4px solid #ef4444;padding:16px;margin:16px 0;transition:all .2s ease-in-out;position:relative}.error-container:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.error-content{display:flex;align-items:center;gap:12px}.error-icon{flex-shrink:0;font-size:24px;height:24px;width:24px}.error-message{flex-grow:1;color:#f44336;font-size:14px;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:#f44336;opacity:.8;transition:opacity .2s ease-in-out}.refresh-button:hover{opacity:1;background-color:#991b1b0a}.archived{opacity:.6!important}.archived:hover{opacity:1!important}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:500px;margin:auto;gap:16px;background:#ffffff52;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(8.2px);-webkit-backdrop-filter:blur(8.2px);border:1px solid rgba(255,255,255,.77);aspect-ratio:1;width:350px;height:430px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }, { kind: "ngmodule", type: RouterModule }] }); }
|
|
6175
|
+
], ngImport: i0, template: "<header>\r\n <mat-toolbar class=\"app-header\" color=\"primary\">\r\n @if(closeButton){\r\n <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n <mat-icon>{{closeButton.icon}}</mat-icon>\r\n </button>\r\n }\r\n <span class=\"app-title\">Form List</span>\r\n\r\n\r\n <span class=\"flex-spacer\"></span>\r\n @for (section of formListSections; track section.value) {\r\n @if(section.value === (selectFormListSection$|async)){\r\n <button mat-flat-button (click)=\"setSection(section.value)\">\r\n <span>{{section.label}}</span>\r\n </button>\r\n }@else {\r\n <button mat-button (click)=\"setSection(section.value)\" >\r\n <span>{{section.label}}</span>\r\n </button>\r\n }\r\n }\r\n <span class=\"flex-spacer\"></span>\r\n <button mat-raised-button color=\"accent\" (click)=\"addNewForm()\" class=\"action-button\"\r\n aria-label=\"Create new form\">\r\n <mat-icon>add</mat-icon>\r\n <span>Add Form</span>\r\n </button>\r\n </mat-toolbar>\r\n</header>\r\n\r\n<div class=\"content-container\">\r\n\r\n @if((selectErrors$ |async)?.['LoadForms']){\r\n <div class=\"error-container mat-elevation-z2\">\r\n <div class=\"error-content\">\r\n <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n <span class=\"error-message\">{{(selectErrors$ |async)?.['LoadForms']}}</span>\r\n <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @if (selectLoadingForms$ | async) {\r\n <div class=\"loading-container\">\r\n\r\n <span>\r\n <mat-spinner style=\" margin: auto;\"></mat-spinner>\r\n <span style=\"position: relative;text-align: center;\">\r\n <br>\r\n Loading forms...\r\n\r\n </span>\r\n\r\n\r\n\r\n </span>\r\n\r\n\r\n </div>\r\n } @else {\r\n @if ((selectFormsList$ | async)?.length === 0) {\r\n <div class=\"empty-container\">\r\n <img src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\" alt=\"\">\r\n <p style=\"font-style: italic;\">\r\n <strong >\r\n No forms available.\r\n </strong>\r\n \r\n </p>\r\n </div>\r\n \r\n \r\n \r\n }\r\n <mat-nav-list class=\"forms-list\">\r\n \r\n @for (form of (selectFormsList$ | async) ?? []; track form._id) {\r\n\r\n <mat-list-item \r\n \r\n (click)=\"editForm(form)\"\r\n [disabled]=\"form.busy\"\r\n [class.archived]=\"form.archived\"\r\n [class.mat-elevation-z1]=\"activeForm !== form._id\" \r\n [class.mat-elevation-z2]=\"activeForm === form._id\"\r\n (mouseover)=\"activeForm = form._id\"\r\n [style.border]=\"form.errors.length > 0? '1px solid var(--mat-sys-error) !important':''\"\r\n (mouseleave)=\"activeForm = null\" \r\n class=\"form-list-item\">\r\n @if (form.busy) {\r\n <mat-spinner style=\"position: absolute; margin-left: 12px;\" matListItemAvatar [diameter]=\"48\"></mat-spinner>\r\n }\r\n\r\n <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n [alt]=\"'form image ' + form.formTitle\">\r\n <div matListItemTitle class=\"form-item-content\" \r\n [style.color]=\"form.errors.length>0? 'var(--mat-sys-error)':''\"\r\n >\r\n <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n <div class=\"form-metadata\">\r\n\r\n @if(form.errors.length > 0) {\r\n <span style=\"color:var(--mat-sys-error)\"><mat-icon \r\n \r\n [matTooltip]=\"form.errors.length + ' error(s) found in this form'\"\r\n >error</mat-icon> <small>{{ form.errors.length}}</small></span>\r\n <span class=\"metadata-divider\">\u2022</span>\r\n }\r\n <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n <span class=\"metadata-divider\">\u2022</span>\r\n <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n @if (activeForm === form._id) {\r\n <span class=\"form-actions\" matListItemMeta>\r\n\r\n @if(!form.archived){\r\n <button mat-icon-button color=\"warn\" (click)=\"archive(form,$event)\"\r\n matTooltip=\"Archiving a form will affect all the workflows it is linked to. Make sure to review and update all workflow configurations accordingly.\"\r\n aria-label=\"Archive form\">\r\n\r\n <mat-icon>archive</mat-icon>\r\n </button>\r\n }@else {\r\n <button mat-icon-button (click)=\"delete(form,$event)\" color=\"warn\" \r\n matTooltip=\"Permanently delete a form. This action cannot be undone.\"\r\n aria-label=\"Restore form\">\r\n <mat-icon>\r\n delete_forever\r\n </mat-icon>\r\n </button>\r\n <button mat-icon-button color=\"primary\" (click)=\"unarchive(form,$event)\"\r\n matTooltip=\"Restore a form will make it available for use in workflows.\"\r\n aria-label=\"Restore form\">\r\n <mat-icon>unarchive</mat-icon>\r\n </button>\r\n }\r\n \r\n\r\n </span>\r\n }\r\n </mat-list-item>\r\n }\r\n </mat-nav-list>\r\n }\r\n\r\n</div>", styles: [".app-header{box-shadow:0 2px 4px #0000001f;position:fixed;top:0;z-index:1000}.app-title{margin-left:4px;font-weight:500}.content-container{max-width:1440px;margin:84px auto 0;padding:0 24px}.page-toolbar{background:none;padding:0;height:64px;margin-bottom:24px}.action-button .mat-icon{margin-right:8px}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(312px,1fr));grid-auto-rows:min-content;gap:12px;padding:16px;width:100%;min-height:calc(100vh - 172px)}.form-list-item{margin:0;border-radius:8px!important;border:solid 1px var(--mat-divider-color, var(--mat-sys-outline))!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none}.form-item-content{padding:16px 0}.form-title{margin-bottom:0}.form-metadata{color:#0009;font-size:14px;line-height:normal;display:flex}.form-metadata .metadata-divider{margin:0 8px}.form-metadata span{display:inline-flex;gap:4px}.form-metadata span mat-icon{font-size:14px;height:14px;width:14px}.loading-container{display:flex;justify-content:center;align-items:center;padding:48px 0}.flex-spacer{flex:1 1 auto}.active-link{background-color:#0000000d}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:8px}.form-list-item{width:100%;max-width:100%}.content-container{padding:0 16px}}.error{border:solid #f44336 1px}.error-container{background-color:#fef2f2;border-radius:8px;border-left:4px solid #ef4444;padding:16px;margin:16px 0;transition:all .2s ease-in-out;position:relative}.error-container:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.error-content{display:flex;align-items:center;gap:12px}.error-icon{flex-shrink:0;font-size:24px;height:24px;width:24px}.error-message{flex-grow:1;color:#f44336;font-size:14px;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:#f44336;opacity:.8;transition:opacity .2s ease-in-out}.refresh-button:hover{opacity:1;background-color:#991b1b0a}.archived{opacity:.6!important}.archived:hover{opacity:1!important}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:500px;margin:auto;gap:16px;background:#ffffff52;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(8.2px);-webkit-backdrop-filter:blur(8.2px);border:1px solid rgba(255,255,255,.77);aspect-ratio:1;width:350px;height:430px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }, { kind: "ngmodule", type: RouterModule }] }); }
|
|
6163
6176
|
}
|
|
6164
6177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormsComponent, decorators: [{
|
|
6165
6178
|
type: Component,
|
|
6166
6179
|
args: [{ selector: 'app-forms', standalone: true, imports: [CommonModule, MatModulesModule, DaysAgoPipe, RouterModule], providers: [
|
|
6167
6180
|
FormsStoreService,
|
|
6168
|
-
], template: "<header>\r\n <mat-toolbar class=\"app-header\" color=\"primary\">\r\n @if(closeButton){\r\n <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n <mat-icon>{{closeButton.icon}}</mat-icon>\r\n </button>\r\n }\r\n <span class=\"app-title\">Form List</span>\r\n\r\n\r\n <span class=\"flex-spacer\"></span>\r\n @for (section of formListSections; track section.value) {\r\n @if(section.value === (selectFormListSection$|async)){\r\n <button mat-flat-button (click)=\"setSection(section.value)\">\r\n <span>{{section.label}}</span>\r\n </button>\r\n }@else {\r\n <button mat-button (click)=\"setSection(section.value)\" >\r\n <span>{{section.label}}</span>\r\n </button>\r\n }\r\n }\r\n <span class=\"flex-spacer\"></span>\r\n <button mat-raised-button color=\"accent\" (click)=\"addNewForm()\" class=\"action-button\"\r\n aria-label=\"Create new form\">\r\n <mat-icon>add</mat-icon>\r\n <span>Add Form</span>\r\n </button>\r\n </mat-toolbar>\r\n</header>\r\n\r\n<div class=\"content-container\">\r\n\r\n @if((selectErrors$ |async)?.['LoadForms']){\r\n <div class=\"error-container mat-elevation-z2\">\r\n <div class=\"error-content\">\r\n <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n <span class=\"error-message\">{{(selectErrors$ |async)?.['LoadForms']}}</span>\r\n <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @if (selectLoadingForms$ | async) {\r\n <div class=\"loading-container\">\r\n\r\n <span>\r\n <mat-spinner style=\" margin: auto;\"></mat-spinner>\r\n <span style=\"position: relative;text-align: center;\">\r\n <br>\r\n Loading forms...\r\n\r\n </span>\r\n\r\n\r\n\r\n </span>\r\n\r\n\r\n </div>\r\n } @else {\r\n @if ((selectFormsList$ | async)?.length === 0) {\r\n <div class=\"empty-container\">\r\n <img src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\" alt=\"\">\r\n <p style=\"font-style: italic;\">\r\n <strong >\r\n No forms available.\r\n </strong>\r\n \r\n </p>\r\n </div>\r\n \r\n \r\n \r\n }\r\n <mat-nav-list class=\"forms-list\">\r\n \r\n @for (form of (selectFormsList$ | async) ?? []; track form._id) {\r\n\r\n <mat-list-item \r\n \r\n (click)=\"editForm(form)\"\r\n [disabled]=\"form.busy\"\r\n [class.archived]=\"form.archived\"\r\n [class.mat-elevation-z1]=\"activeForm !== form._id\" \r\n [class.mat-elevation-z2]=\"activeForm === form._id\"\r\n (mouseover)=\"activeForm = form._id\"\r\n (mouseleave)=\"activeForm = null\" \r\n class=\"form-list-item\">\r\n @if (form.busy) {\r\n <mat-spinner style=\"position: absolute; margin-left: 12px;\" matListItemAvatar [diameter]=\"48\"></mat-spinner>\r\n }\r\n\r\n <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n [alt]=\"'form image ' + form.formTitle\">\r\n <div matListItemTitle class=\"form-item-content\">\r\n <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n <div class=\"form-metadata\">\r\n\r\n @if(form.errors.length > 0) {\r\n <span><mat-icon \r\n [matTooltip]=\"form.errors.length + ' error(s) found in this form'\"\r\n
|
|
6181
|
+
], template: "<header>\r\n <mat-toolbar class=\"app-header\" color=\"primary\">\r\n @if(closeButton){\r\n <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n <mat-icon>{{closeButton.icon}}</mat-icon>\r\n </button>\r\n }\r\n <span class=\"app-title\">Form List</span>\r\n\r\n\r\n <span class=\"flex-spacer\"></span>\r\n @for (section of formListSections; track section.value) {\r\n @if(section.value === (selectFormListSection$|async)){\r\n <button mat-flat-button (click)=\"setSection(section.value)\">\r\n <span>{{section.label}}</span>\r\n </button>\r\n }@else {\r\n <button mat-button (click)=\"setSection(section.value)\" >\r\n <span>{{section.label}}</span>\r\n </button>\r\n }\r\n }\r\n <span class=\"flex-spacer\"></span>\r\n <button mat-raised-button color=\"accent\" (click)=\"addNewForm()\" class=\"action-button\"\r\n aria-label=\"Create new form\">\r\n <mat-icon>add</mat-icon>\r\n <span>Add Form</span>\r\n </button>\r\n </mat-toolbar>\r\n</header>\r\n\r\n<div class=\"content-container\">\r\n\r\n @if((selectErrors$ |async)?.['LoadForms']){\r\n <div class=\"error-container mat-elevation-z2\">\r\n <div class=\"error-content\">\r\n <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n <span class=\"error-message\">{{(selectErrors$ |async)?.['LoadForms']}}</span>\r\n <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @if (selectLoadingForms$ | async) {\r\n <div class=\"loading-container\">\r\n\r\n <span>\r\n <mat-spinner style=\" margin: auto;\"></mat-spinner>\r\n <span style=\"position: relative;text-align: center;\">\r\n <br>\r\n Loading forms...\r\n\r\n </span>\r\n\r\n\r\n\r\n </span>\r\n\r\n\r\n </div>\r\n } @else {\r\n @if ((selectFormsList$ | async)?.length === 0) {\r\n <div class=\"empty-container\">\r\n <img src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\" alt=\"\">\r\n <p style=\"font-style: italic;\">\r\n <strong >\r\n No forms available.\r\n </strong>\r\n \r\n </p>\r\n </div>\r\n \r\n \r\n \r\n }\r\n <mat-nav-list class=\"forms-list\">\r\n \r\n @for (form of (selectFormsList$ | async) ?? []; track form._id) {\r\n\r\n <mat-list-item \r\n \r\n (click)=\"editForm(form)\"\r\n [disabled]=\"form.busy\"\r\n [class.archived]=\"form.archived\"\r\n [class.mat-elevation-z1]=\"activeForm !== form._id\" \r\n [class.mat-elevation-z2]=\"activeForm === form._id\"\r\n (mouseover)=\"activeForm = form._id\"\r\n [style.border]=\"form.errors.length > 0? '1px solid var(--mat-sys-error) !important':''\"\r\n (mouseleave)=\"activeForm = null\" \r\n class=\"form-list-item\">\r\n @if (form.busy) {\r\n <mat-spinner style=\"position: absolute; margin-left: 12px;\" matListItemAvatar [diameter]=\"48\"></mat-spinner>\r\n }\r\n\r\n <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n [alt]=\"'form image ' + form.formTitle\">\r\n <div matListItemTitle class=\"form-item-content\" \r\n [style.color]=\"form.errors.length>0? 'var(--mat-sys-error)':''\"\r\n >\r\n <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n <div class=\"form-metadata\">\r\n\r\n @if(form.errors.length > 0) {\r\n <span style=\"color:var(--mat-sys-error)\"><mat-icon \r\n \r\n [matTooltip]=\"form.errors.length + ' error(s) found in this form'\"\r\n >error</mat-icon> <small>{{ form.errors.length}}</small></span>\r\n <span class=\"metadata-divider\">\u2022</span>\r\n }\r\n <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n <span class=\"metadata-divider\">\u2022</span>\r\n <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n @if (activeForm === form._id) {\r\n <span class=\"form-actions\" matListItemMeta>\r\n\r\n @if(!form.archived){\r\n <button mat-icon-button color=\"warn\" (click)=\"archive(form,$event)\"\r\n matTooltip=\"Archiving a form will affect all the workflows it is linked to. Make sure to review and update all workflow configurations accordingly.\"\r\n aria-label=\"Archive form\">\r\n\r\n <mat-icon>archive</mat-icon>\r\n </button>\r\n }@else {\r\n <button mat-icon-button (click)=\"delete(form,$event)\" color=\"warn\" \r\n matTooltip=\"Permanently delete a form. This action cannot be undone.\"\r\n aria-label=\"Restore form\">\r\n <mat-icon>\r\n delete_forever\r\n </mat-icon>\r\n </button>\r\n <button mat-icon-button color=\"primary\" (click)=\"unarchive(form,$event)\"\r\n matTooltip=\"Restore a form will make it available for use in workflows.\"\r\n aria-label=\"Restore form\">\r\n <mat-icon>unarchive</mat-icon>\r\n </button>\r\n }\r\n \r\n\r\n </span>\r\n }\r\n </mat-list-item>\r\n }\r\n </mat-nav-list>\r\n }\r\n\r\n</div>", styles: [".app-header{box-shadow:0 2px 4px #0000001f;position:fixed;top:0;z-index:1000}.app-title{margin-left:4px;font-weight:500}.content-container{max-width:1440px;margin:84px auto 0;padding:0 24px}.page-toolbar{background:none;padding:0;height:64px;margin-bottom:24px}.action-button .mat-icon{margin-right:8px}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(312px,1fr));grid-auto-rows:min-content;gap:12px;padding:16px;width:100%;min-height:calc(100vh - 172px)}.form-list-item{margin:0;border-radius:8px!important;border:solid 1px var(--mat-divider-color, var(--mat-sys-outline))!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none}.form-item-content{padding:16px 0}.form-title{margin-bottom:0}.form-metadata{color:#0009;font-size:14px;line-height:normal;display:flex}.form-metadata .metadata-divider{margin:0 8px}.form-metadata span{display:inline-flex;gap:4px}.form-metadata span mat-icon{font-size:14px;height:14px;width:14px}.loading-container{display:flex;justify-content:center;align-items:center;padding:48px 0}.flex-spacer{flex:1 1 auto}.active-link{background-color:#0000000d}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:8px}.form-list-item{width:100%;max-width:100%}.content-container{padding:0 16px}}.error{border:solid #f44336 1px}.error-container{background-color:#fef2f2;border-radius:8px;border-left:4px solid #ef4444;padding:16px;margin:16px 0;transition:all .2s ease-in-out;position:relative}.error-container:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.error-content{display:flex;align-items:center;gap:12px}.error-icon{flex-shrink:0;font-size:24px;height:24px;width:24px}.error-message{flex-grow:1;color:#f44336;font-size:14px;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:#f44336;opacity:.8;transition:opacity .2s ease-in-out}.refresh-button:hover{opacity:1;background-color:#991b1b0a}.archived{opacity:.6!important}.archived:hover{opacity:1!important}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:500px;margin:auto;gap:16px;background:#ffffff52;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(8.2px);-webkit-backdrop-filter:blur(8.2px);border:1px solid rgba(255,255,255,.77);aspect-ratio:1;width:350px;height:430px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
|
|
6169
6182
|
}], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: FormsStoreService }, { type: Document, decorators: [{
|
|
6170
6183
|
type: Inject,
|
|
6171
6184
|
args: [DOCUMENT]
|
|
@@ -6915,7 +6928,7 @@ class ApiValueAccessRulesComponent {
|
|
|
6915
6928
|
return Object.keys(responseBody).length > 0 ? responseBody : undefined;
|
|
6916
6929
|
}
|
|
6917
6930
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ApiValueAccessRulesComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6918
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ApiValueAccessRulesComponent, isStandalone: true, selector: "app-api-value-access-rules", inputs: { disabled: "disabled", multipleBind: "multipleBind", errors: "errors", value: "value", mapToData: "mapToData", formInputs: "formInputs", postmanCollectionConfig: "postmanCollectionConfig" }, outputs: { valueChanged: "valueChanged", reload: "reload" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: ApiValueAccessRulesComponent }], ngImport: i0, template: "\r\n\r\n\r\n<section *ngFor=\"let controlName of multipleBind||[]\">\r\n <label [for]=\"controlName\">Map <strong>{{controlName}}</strong></label>\r\n <app-data-tree \r\n [formInputs]=\"formInputs\"\r\n (pathChanged)=\"pathChanged($event,controlName)\" \r\n [data]=\"postmanResponseBody || mapToData\" [value]=\"computedValue[controlName]||''\" ></app-data-tree>\r\n</section>\r\n\r\n\r\n<app-data-tree \r\n*ngIf=\"!multipleBind\"\r\n(pathChanged)=\"pathChanged($event)\" \r\n [formInputs]=\"formInputs\"\r\n[data]=\"postmanResponseBody ||mapToData\" [value]=\"computedValue\"></app-data-tree>\r\n\r\n\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"disabled\"\r\n>\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);\">\r\n\r\n\r\n</div>\r\n</ng-template>\r\n", styles: [".labelM{font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DataTreeComponent, selector: "app-data-tree", inputs: ["data", "value", "formInputs"], outputs: ["pathChanged"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type:
|
|
6931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ApiValueAccessRulesComponent, isStandalone: true, selector: "app-api-value-access-rules", inputs: { disabled: "disabled", multipleBind: "multipleBind", errors: "errors", value: "value", mapToData: "mapToData", formInputs: "formInputs", postmanCollectionConfig: "postmanCollectionConfig" }, outputs: { valueChanged: "valueChanged", reload: "reload" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: ApiValueAccessRulesComponent }], ngImport: i0, template: "\r\n\r\n\r\n<section *ngFor=\"let controlName of multipleBind||[]\">\r\n <label [for]=\"controlName\">Map <strong>{{controlName}}</strong></label>\r\n <app-data-tree \r\n [formInputs]=\"formInputs\"\r\n (pathChanged)=\"pathChanged($event,controlName)\" \r\n [data]=\"postmanResponseBody || mapToData\" [value]=\"computedValue[controlName]||''\" ></app-data-tree>\r\n</section>\r\n\r\n\r\n<app-data-tree \r\n*ngIf=\"!multipleBind\"\r\n(pathChanged)=\"pathChanged($event)\" \r\n [formInputs]=\"formInputs\"\r\n[data]=\"postmanResponseBody ||mapToData\" [value]=\"computedValue\"></app-data-tree>\r\n\r\n\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"disabled\"\r\n>\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);\">\r\n\r\n\r\n</div>\r\n</ng-template>\r\n", styles: [".labelM{font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DataTreeComponent, selector: "app-data-tree", inputs: ["data", "value", "formInputs"], outputs: ["pathChanged"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i11.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] }); }
|
|
6919
6932
|
}
|
|
6920
6933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ApiValueAccessRulesComponent, decorators: [{
|
|
6921
6934
|
type: Component,
|
|
@@ -7196,7 +7209,7 @@ class ValidationExpressioCreatorComponent {
|
|
|
7196
7209
|
});
|
|
7197
7210
|
}
|
|
7198
7211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ValidationExpressioCreatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7199
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ValidationExpressioCreatorComponent, isStandalone: true, selector: "lib-validation-expressio-creator", inputs: { hint: "hint", label: "label", formInputs: "formInputs", data: "data", expression: "expression", valueAccessRules: "valueAccessRules" }, outputs: { expressionChange: "expressionChange" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;\" floatLabel=\"always\"\r\n id=\"validationExpressionCreator\">\r\n <mat-label>Condition expression</mat-label>\r\n <textarea [formControl]=\"expressionControl\" matInput #textarea (focus)=\"onFocus($event)\"\r\n placeholder=\"Enter a validation string for the function\"></textarea>\r\n\r\n\r\n <mat-hint\r\n [style.color]=\"expressionControl.invalid && !showSuggestions? 'var(--mat-form-field-error-text-color, var(--mat-sys-error))':''\">\r\n @if (expressionControl.invalid && errorMessage !== null && !showSuggestions) {\r\n {{errorMessage}}\r\n }@else {\r\n {{ showSuggestions ? 'Click a suggestion to apply it' : 'Enter a filter condition. Type $ for options' }}\r\n @if (showSuggestions) {\r\n <section class=\"showSuggestionContainer\">\r\n <mat-divider></mat-divider>\r\n <div style=\"padding: 0px;margin-top:8px\" class=\"\">\r\n <div class=\"suggestion-container\">\r\n <div class=\"suggestion-column\">\r\n <div class=\"suggestion-heading\">\r\n Logical Operators\r\n </div>\r\n <div class=\"button-container\">\r\n <button matTooltipPosition=\"left\" [matTooltip]=\"method.hint\" color=\"primary\" mat-button\r\n *ngFor=\"let method of getMethods()|searchList:optionsSearch\"\r\n (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\r\n {{ method.label | titlecase }}\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"suggestion-column\">\r\n <div class=\"suggestion-heading\">\r\n Add Input as a Variable\r\n </div>\r\n <div class=\"button-container\">\r\n <button *ngFor=\"let input of getAllInputs|searchList:optionsSearch\" mat-button\r\n matTooltipPosition=\"right\" [matTooltip]=\"'Add Variable - '+ input.label \"\r\n (click)=\"selectSuggestionInput(input.formControlName)\" class=\"suggestion-button\">\r\n {{ input.label | titlecase }}\r\n </button>\r\n </div>\r\n </div>\r\n <!-- <div class=\"suggestion-column\">\r\n <h5>Array path Object </h5>\r\n <div class=\"button-container\">\r\n <button *ngFor=\"let input of getValueVariables()\"\r\n color=\"accent\"\r\n mat-flat-button\r\n (click)=\"selectSuggestionInput(input)\" class=\"suggestion-button\">\r\n {{ input}}\r\n </button>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n\r\n </div>\r\n </section>\r\n\r\n\r\n }\r\n }\r\n\r\n\r\n </mat-hint>\r\n\r\n\r\n</mat-form-field>\r\n\r\n@if(valueAccessOptions.length>0){\r\n\r\n\r\n<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;margin-top:12px\" floatLabel=\"always\"\r\n id=\"Value access options\">\r\n <mat-label>\r\n Form Fields for expression\r\n </mat-label>\r\n <mat-chip-grid #chipGrid aria-label=\"value access options\">\r\n @for (variable of valueAccessOptions; track variable) {\r\n <mat-chip-option \r\n [selected]=\"variableInEdit === variable\"\r\n \r\n (click)=\"variableInEdit === variable ? variableInEdit = null : variableInEdit = variable\"\r\n [aria-description]=\"'press enter to edit ' + variable\">\r\n {{variable}}\r\n\r\n </mat-chip-option >\r\n\r\n }\r\n <input placeholder=\"\" style=\"display: none;\" [matChipInputFor]=\"chipGrid\" />\r\n </mat-chip-grid>\r\n @if(variableInEdit !== null ){\r\n <app-api-value-access-rules \r\n [value]=\"valueAccessRules[variableInEdit]||[]\"\r\n [errors]=\"[]\" [formInputs]=\"formInputs ||[]\"\r\n [mapToData]=\"data\"\r\n (valueChanged)=\"activeVariableChanged($event)\">\r\n </app-api-value-access-rules>\r\n \r\n \r\n\r\n\r\n }\r\n <mat-hint>\r\n Click a field to define how to process its value. You can filter a list, count its items, or access specific\r\n data within a complex object.\r\n </mat-hint>\r\n</mat-form-field>}", styles: [".suggestion-container{display:flex;width:100%;gap:8px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-align:left;font-size:10.5px;border-radius:4px!important;margin-bottom:4px!important;line-height:normal!important;padding:4px;white-space:nowrap;overflow:hidden;display:inline-block;text-overflow:ellipsis}.suggestion-heading{margin-bottom:8px;font-size:1em;font-size:11px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$
|
|
7212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ValidationExpressioCreatorComponent, isStandalone: true, selector: "lib-validation-expressio-creator", inputs: { hint: "hint", label: "label", formInputs: "formInputs", data: "data", expression: "expression", valueAccessRules: "valueAccessRules" }, outputs: { expressionChange: "expressionChange" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;\" floatLabel=\"always\"\r\n id=\"validationExpressionCreator\">\r\n <mat-label>Condition expression</mat-label>\r\n <textarea [formControl]=\"expressionControl\" matInput #textarea (focus)=\"onFocus($event)\"\r\n placeholder=\"Enter a validation string for the function\"></textarea>\r\n\r\n\r\n <mat-hint\r\n [style.color]=\"expressionControl.invalid && !showSuggestions? 'var(--mat-form-field-error-text-color, var(--mat-sys-error))':''\">\r\n @if (expressionControl.invalid && errorMessage !== null && !showSuggestions) {\r\n {{errorMessage}}\r\n }@else {\r\n {{ showSuggestions ? 'Click a suggestion to apply it' : 'Enter a filter condition. Type $ for options' }}\r\n @if (showSuggestions) {\r\n <section class=\"showSuggestionContainer\">\r\n <mat-divider></mat-divider>\r\n <div style=\"padding: 0px;margin-top:8px\" class=\"\">\r\n <div class=\"suggestion-container\">\r\n <div class=\"suggestion-column\">\r\n <div class=\"suggestion-heading\">\r\n Logical Operators\r\n </div>\r\n <div class=\"button-container\">\r\n <button matTooltipPosition=\"left\" [matTooltip]=\"method.hint\" color=\"primary\" mat-button\r\n *ngFor=\"let method of getMethods()|searchList:optionsSearch\"\r\n (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\r\n {{ method.label | titlecase }}\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"suggestion-column\">\r\n <div class=\"suggestion-heading\">\r\n Add Input as a Variable\r\n </div>\r\n <div class=\"button-container\">\r\n <button *ngFor=\"let input of getAllInputs|searchList:optionsSearch\" mat-button\r\n matTooltipPosition=\"right\" [matTooltip]=\"'Add Variable - '+ input.label \"\r\n (click)=\"selectSuggestionInput(input.formControlName)\" class=\"suggestion-button\">\r\n {{ input.label | titlecase }}\r\n </button>\r\n </div>\r\n </div>\r\n <!-- <div class=\"suggestion-column\">\r\n <h5>Array path Object </h5>\r\n <div class=\"button-container\">\r\n <button *ngFor=\"let input of getValueVariables()\"\r\n color=\"accent\"\r\n mat-flat-button\r\n (click)=\"selectSuggestionInput(input)\" class=\"suggestion-button\">\r\n {{ input}}\r\n </button>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n\r\n </div>\r\n </section>\r\n\r\n\r\n }\r\n }\r\n\r\n\r\n </mat-hint>\r\n\r\n\r\n</mat-form-field>\r\n\r\n@if(valueAccessOptions.length>0){\r\n\r\n\r\n<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;margin-top:12px\" floatLabel=\"always\"\r\n id=\"Value access options\">\r\n <mat-label>\r\n Form Fields for expression\r\n </mat-label>\r\n <mat-chip-grid #chipGrid aria-label=\"value access options\">\r\n @for (variable of valueAccessOptions; track variable) {\r\n <mat-chip-option \r\n [selected]=\"variableInEdit === variable\"\r\n \r\n (click)=\"variableInEdit === variable ? variableInEdit = null : variableInEdit = variable\"\r\n [aria-description]=\"'press enter to edit ' + variable\">\r\n {{variable}}\r\n\r\n </mat-chip-option >\r\n\r\n }\r\n <input placeholder=\"\" style=\"display: none;\" [matChipInputFor]=\"chipGrid\" />\r\n </mat-chip-grid>\r\n @if(variableInEdit !== null ){\r\n <app-api-value-access-rules \r\n [value]=\"valueAccessRules[variableInEdit]||[]\"\r\n [errors]=\"[]\" [formInputs]=\"formInputs ||[]\"\r\n [mapToData]=\"data\"\r\n (valueChanged)=\"activeVariableChanged($event)\">\r\n </app-api-value-access-rules>\r\n \r\n \r\n\r\n\r\n }\r\n <mat-hint>\r\n Click a field to define how to process its value. You can filter a list, count its items, or access specific\r\n data within a complex object.\r\n </mat-hint>\r\n</mat-form-field>}", styles: [".suggestion-container{display:flex;width:100%;gap:8px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-align:left;font-size:10.5px;border-radius:4px!important;margin-bottom:4px!important;line-height:normal!important;padding:4px;white-space:nowrap;overflow:hidden;display:inline-block;text-overflow:ellipsis}.suggestion-heading{margin-bottom:8px;font-size:1em;font-size:11px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i4$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SearchListPipe, name: "searchList" }, { kind: "component", type: ApiValueAccessRulesComponent, selector: "app-api-value-access-rules", inputs: ["disabled", "multipleBind", "errors", "value", "mapToData", "formInputs", "postmanCollectionConfig"], outputs: ["valueChanged", "reload"] }] }); }
|
|
7200
7213
|
}
|
|
7201
7214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ValidationExpressioCreatorComponent, decorators: [{
|
|
7202
7215
|
type: Component,
|
|
@@ -7423,9 +7436,9 @@ class TDynamicDataEditComponent {
|
|
|
7423
7436
|
}
|
|
7424
7437
|
}
|
|
7425
7438
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7426
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: "editorConfig", formInputs: "formInputs", data: "data", validationErrors: "validationErrors" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n <mat-label> {{ (vm. editorConfigValue)?.label + ((vm. editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n\r\n @switch ((vm. editorConfigValue)?.editType) {\r\n @default {\r\n <input (blur)=\"elementBlur($event)\" (input)=\"inputChange($event)\" [disabled]=\"(vm.disabled)\"\r\n [value]=\"(vm.value)\" matInput [placeholder]=\"(vm. editorConfigValue)?.placeholder ||'Enter value'\">\r\n\r\n\r\n }\r\n @case ( elementEditorTypes.Toggle) {\r\n <lib-mat-slider-toggle-editor [name]=\"((vm. editorConfigValue)?.name||'') \"\r\n [label]=\"((vm. editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n </lib-mat-slider-toggle-editor>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.Range) {\r\n\r\n\r\n <lib-mat-slider-editor [format]=\"( vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n [disabled]=\"(vm.disabled)||false\" [max]=\"( vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [min]=\"( vm.editorConfigValue)?.min || 0\"\r\n (valueChange)=\"inputChange($event)\" [step]=\"( vm.editorConfigValue)?.step || 1\"\r\n tickInterval=\"( vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n </lib-mat-slider-editor>\r\n\r\n\r\n\r\n }\r\n\r\n @case (elementEditorTypes.ChipSelect) {\r\n <lib-mat-chip-list-editor [disabled]=\"(vm.disabled)||false\"\r\n [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n (valueChange)=\" valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.OptionSelect) {\r\n\r\n <mat-select [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n [disabled]=\"(vm.disabled)||false\">\r\n @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n }\r\n <!--\r\n @case (elementEditorTypes.RichTextEditor) {\r\n <p>\r\n Not implemented yet\r\n </p>\r\n }\r\n --->\r\n\r\n @case (elementEditorTypes.SelectionOptions) {\r\n\r\n <app-selection-options-editor [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n }\r\n\r\n @case (\r\n elementEditorTypes.ApiCall) {\r\n\r\n <lib-rest-api-call-setup [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n </lib-rest-api-call-setup>\r\n \r\n }\r\n\r\n @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n }\r\n @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\"\r\n [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" \r\n [mapToData]=\"vm.dataOptions\"\r\n (valueChanged)=\"valueChanged($event)\">\r\n </app-api-value-access-rules>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.FormInputSelector)\r\n {\r\n\r\n <lib-form-input-selector [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n </lib-form-input-selector>\r\n }\r\n\r\n @case (\r\n elementEditorTypes.RequiredInputs\r\n ){\r\n\r\n <app-required-inputs [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n </app-required-inputs>\r\n }\r\n\r\n @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n }\r\n\r\n @case(elementEditorTypes.Validators){\r\n\r\n <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n [mapToData]=\"vm.dataOptions\">\r\n </app-validators-config>\r\n\r\n }\r\n @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n }\r\n @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n (valueChanged)=\"valueChanged($event)\">\r\n </app-config-mscoa-additional-inputs>\r\n\r\n }\r\n @case (elementEditorTypes.ChipOptionsCreator) {\r\n <lib-chip-options-creator-editor [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n </lib-chip-options-creator-editor>\r\n\r\n }\r\n @case (elementEditorTypes.DataSourcePicker) {\r\n <lib-data-source-picker [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm. editorConfigValue\"\r\n (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\">\r\n </lib-data-source-picker>\r\n }\r\n @case (elementEditorTypes.ListLabelConfigEditor) {\r\n <lib-document-list-label-config-editor [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm. editorConfigValue\"\r\n (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n [errors]=\"(validationErrors)||[]\">\r\n\r\n </lib-document-list-label-config-editor>\r\n }\r\n @case(\r\n elementEditorTypes.WorkflowPicker\r\n ){\r\n <lib-t-workflow-picker [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n }\r\n }\r\n \r\n <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n mat-icon-button>\r\n <mat-icon>{{\r\n blurOff?'blur_off':'blur_on'\r\n }}\r\n\r\n\r\n </mat-icon>\r\n </button>\r\n </mat-form-field>\r\n\r\n\r\n <mat-error style=\" font-size: 12px;\r\n margin-left: 14px;\r\n \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n <mat-card-content>\r\n\r\n <span>\r\n Failed to load form inputs\r\n </span>\r\n </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:12px;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:16px;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }], deferBlockDependencies: [() => [i2$2.NgForOf, i2$2.NgIf, i2$2.AsyncPipe, import('./ngx-t-forms-selection-options-editor.component-B2A4Shzb.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-P4H4WpFZ.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CbfQ7vUk.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-ByKaRMqs.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CmQrax2H.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-DEJbn9nu.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-iqXx3hXU.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-CiRP_UnS.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-DoUmq086.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-B8hNJxAR.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-D3HzD0S7.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-sKF1VLac.mjs').then(m => m.MatChipListEditorComponent), i1$4.MatOption, i2.MatIconButton, i5.MatIcon, i3.MatFormField, i3.MatLabel, i3.MatError, i3.MatSuffix, i3.MatSelect, i6$1.MatTooltip, i8.MatInput, import('./ngx-t-forms-chip-options-creator-editor.component-DtguOclg.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-B72gg_2g.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CJHaDkWl.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-_RMb3PB4.mjs').then(m => m.TWorkflowPickerComponent)]] }); }
|
|
7439
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: "editorConfig", formInputs: "formInputs", data: "data", validationErrors: "validationErrors" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n <mat-label> {{ (vm. editorConfigValue)?.label + ((vm. editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n\r\n @switch ((vm. editorConfigValue)?.editType) {\r\n @default {\r\n <input (blur)=\"elementBlur($event)\" (input)=\"inputChange($event)\" [disabled]=\"(vm.disabled)\"\r\n [value]=\"(vm.value)\" matInput [placeholder]=\"(vm. editorConfigValue)?.placeholder ||'Enter value'\">\r\n\r\n\r\n }\r\n @case ( elementEditorTypes.Toggle) {\r\n <lib-mat-slider-toggle-editor [name]=\"((vm. editorConfigValue)?.name||'') \"\r\n [label]=\"((vm. editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n </lib-mat-slider-toggle-editor>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.Range) {\r\n\r\n\r\n <lib-mat-slider-editor [format]=\"( vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n [disabled]=\"(vm.disabled)||false\" [max]=\"( vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [min]=\"( vm.editorConfigValue)?.min || 0\"\r\n (valueChange)=\"inputChange($event)\" [step]=\"( vm.editorConfigValue)?.step || 1\"\r\n tickInterval=\"( vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n </lib-mat-slider-editor>\r\n\r\n\r\n\r\n }\r\n\r\n @case (elementEditorTypes.ChipSelect) {\r\n <lib-mat-chip-list-editor [disabled]=\"(vm.disabled)||false\"\r\n [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n (valueChange)=\" valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n\r\n }\r\n\r\n @case (elementEditorTypes.OptionSelect) {\r\n\r\n <mat-select [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n [disabled]=\"(vm.disabled)||false\">\r\n @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.RichTextEditor) {\r\n <lib-editor-js-input [value]=\"(vm.value)\" (valueChanged)=\"valueChanged($event)\"\r\n [disabled]=\"(vm.disabled)||false\"\r\n [inputConfig]=\"data\" >\r\n </lib-editor-js-input>\r\n }\r\n\r\n\r\n @case (elementEditorTypes.SelectionOptions) {\r\n\r\n <app-selection-options-editor [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n }\r\n\r\n @case (\r\n elementEditorTypes.ApiCall) {\r\n\r\n <lib-rest-api-call-setup [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n </lib-rest-api-call-setup>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n }\r\n @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\"\r\n [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\r\n (valueChanged)=\"valueChanged($event)\">\r\n </app-api-value-access-rules>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.FormInputSelector)\r\n {\r\n\r\n <lib-form-input-selector [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n </lib-form-input-selector>\r\n }\r\n\r\n @case (\r\n elementEditorTypes.RequiredInputs\r\n ){\r\n\r\n <app-required-inputs [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n </app-required-inputs>\r\n }\r\n\r\n @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n }\r\n\r\n @case(elementEditorTypes.Validators){\r\n\r\n <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n [mapToData]=\"vm.dataOptions\">\r\n </app-validators-config>\r\n\r\n }\r\n @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n }\r\n @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n (valueChanged)=\"valueChanged($event)\">\r\n </app-config-mscoa-additional-inputs>\r\n\r\n }\r\n @case (elementEditorTypes.ChipOptionsCreator) {\r\n <lib-chip-options-creator-editor [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n </lib-chip-options-creator-editor>\r\n\r\n }\r\n @case (elementEditorTypes.DataSourcePicker) {\r\n <lib-data-source-picker [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm. editorConfigValue\"\r\n (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\">\r\n </lib-data-source-picker>\r\n }\r\n @case (elementEditorTypes.ListLabelConfigEditor) {\r\n <lib-document-list-label-config-editor [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm. editorConfigValue\"\r\n (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n [errors]=\"(validationErrors)||[]\">\r\n\r\n </lib-document-list-label-config-editor>\r\n }\r\n @case(\r\n elementEditorTypes.WorkflowPicker\r\n ){\r\n <lib-t-workflow-picker [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n }\r\n }\r\n\r\n <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n mat-icon-button>\r\n <mat-icon>{{\r\n blurOff?'blur_off':'blur_on'\r\n }}\r\n\r\n\r\n </mat-icon>\r\n </button>\r\n </mat-form-field>\r\n\r\n\r\n <mat-error style=\" font-size: 12px;\r\n margin-left: 14px;\r\n \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n <mat-card-content>\r\n\r\n <span>\r\n Failed to load form inputs\r\n </span>\r\n </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:12px;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:16px;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$3.MatCardContent, selector: "mat-card-content" }], deferBlockDependencies: [() => [i2$2.NgForOf, i2$2.NgIf, i2$2.AsyncPipe, import('./ngx-t-forms-selection-options-editor.component-C0il9Xf5.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-Dqru3fNh.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-B90hJQlL.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-Dk1IsAgn.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-B2mJBxEI.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-B2YIcoUu.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-BfnTGXA_.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-BgS1g7ix.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-BZWy7sKx.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-C8Vnyf0v.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-J8LET3HI.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-Bqwo6PW5.mjs').then(m => m.MatChipListEditorComponent), i1$4.MatOption, i2.MatIconButton, i5.MatIcon, i3.MatFormField, i3.MatLabel, i3.MatError, i3.MatSuffix, i3.MatSelect, i6$1.MatTooltip, i8.MatInput, import('./ngx-t-forms-chip-options-creator-editor.component-DwpTxw1V.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-ctmzo51S.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-B1ouOnk1.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-DH7hjTyE.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent)]] }); }
|
|
7427
7440
|
}
|
|
7428
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-
|
|
7441
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-C0il9Xf5.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-Dqru3fNh.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-B90hJQlL.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-Dk1IsAgn.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-B2mJBxEI.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-B2YIcoUu.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-BfnTGXA_.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-BgS1g7ix.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-BZWy7sKx.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-C8Vnyf0v.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-J8LET3HI.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-Bqwo6PW5.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-DwpTxw1V.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-ctmzo51S.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-B1ouOnk1.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-DH7hjTyE.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent, TWorkflowPickerComponent, EditorJsInputComponent) => ({ decorators: [{
|
|
7429
7442
|
type: Component,
|
|
7430
7443
|
args: [{ selector: 'lib-t-dynamic-data-edit', standalone: true, imports: [CommonModule,
|
|
7431
7444
|
SelectionOptionsEditorComponent,
|
|
@@ -7445,8 +7458,9 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ng
|
|
|
7445
7458
|
ChipOptionsCreatorEditorComponent,
|
|
7446
7459
|
DataSourcePickerComponent,
|
|
7447
7460
|
DocumentListLabelConfigEditorComponent,
|
|
7448
|
-
TWorkflowPickerComponent
|
|
7449
|
-
], template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n <mat-label> {{ (vm. editorConfigValue)?.label + ((vm. editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n\r\n @switch ((vm. editorConfigValue)?.editType) {\r\n @default {\r\n <input (blur)=\"elementBlur($event)\" (input)=\"inputChange($event)\" [disabled]=\"(vm.disabled)\"\r\n [value]=\"(vm.value)\" matInput [placeholder]=\"(vm. editorConfigValue)?.placeholder ||'Enter value'\">\r\n\r\n\r\n }\r\n @case ( elementEditorTypes.Toggle) {\r\n <lib-mat-slider-toggle-editor [name]=\"((vm. editorConfigValue)?.name||'') \"\r\n [label]=\"((vm. editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n </lib-mat-slider-toggle-editor>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.Range) {\r\n\r\n\r\n <lib-mat-slider-editor [format]=\"( vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n [disabled]=\"(vm.disabled)||false\" [max]=\"( vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [min]=\"( vm.editorConfigValue)?.min || 0\"\r\n (valueChange)=\"inputChange($event)\" [step]=\"( vm.editorConfigValue)?.step || 1\"\r\n tickInterval=\"( vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n </lib-mat-slider-editor>\r\n\r\n\r\n\r\n }\r\n\r\n @case (elementEditorTypes.ChipSelect) {\r\n <lib-mat-chip-list-editor [disabled]=\"(vm.disabled)||false\"\r\n [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n (valueChange)=\" valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.OptionSelect) {\r\n\r\n <mat-select [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n [disabled]=\"(vm.disabled)||false\">\r\n @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n }\r\n <!--\r\n @case (elementEditorTypes.RichTextEditor) {\r\n <p>\r\n Not implemented yet\r\n </p>\r\n }\r\n --->\r\n\r\n @case (elementEditorTypes.SelectionOptions) {\r\n\r\n <app-selection-options-editor [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n }\r\n\r\n @case (\r\n elementEditorTypes.ApiCall) {\r\n\r\n <lib-rest-api-call-setup [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n </lib-rest-api-call-setup>\r\n \r\n }\r\n\r\n @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n }\r\n @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\"\r\n [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" \r\n [mapToData]=\"vm.dataOptions\"\r\n (valueChanged)=\"valueChanged($event)\">\r\n </app-api-value-access-rules>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.FormInputSelector)\r\n {\r\n\r\n <lib-form-input-selector [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n </lib-form-input-selector>\r\n }\r\n\r\n @case (\r\n elementEditorTypes.RequiredInputs\r\n ){\r\n\r\n <app-required-inputs [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n </app-required-inputs>\r\n }\r\n\r\n @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n }\r\n\r\n @case(elementEditorTypes.Validators){\r\n\r\n <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n [mapToData]=\"vm.dataOptions\">\r\n </app-validators-config>\r\n\r\n }\r\n @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n }\r\n @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n (valueChanged)=\"valueChanged($event)\">\r\n </app-config-mscoa-additional-inputs>\r\n\r\n }\r\n @case (elementEditorTypes.ChipOptionsCreator) {\r\n <lib-chip-options-creator-editor [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n </lib-chip-options-creator-editor>\r\n\r\n }\r\n @case (elementEditorTypes.DataSourcePicker) {\r\n <lib-data-source-picker [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm. editorConfigValue\"\r\n (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\">\r\n </lib-data-source-picker>\r\n }\r\n @case (elementEditorTypes.ListLabelConfigEditor) {\r\n <lib-document-list-label-config-editor [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm. editorConfigValue\"\r\n (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n [errors]=\"(validationErrors)||[]\">\r\n\r\n </lib-document-list-label-config-editor>\r\n }\r\n @case(\r\n elementEditorTypes.WorkflowPicker\r\n ){\r\n <lib-t-workflow-picker [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n }\r\n }\r\n \r\n <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n mat-icon-button>\r\n <mat-icon>{{\r\n blurOff?'blur_off':'blur_on'\r\n }}\r\n\r\n\r\n </mat-icon>\r\n </button>\r\n </mat-form-field>\r\n\r\n\r\n <mat-error style=\" font-size: 12px;\r\n margin-left: 14px;\r\n \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n <mat-card-content>\r\n\r\n <span>\r\n Failed to load form inputs\r\n </span>\r\n </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:12px;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:16px;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"] }]
|
|
7461
|
+
TWorkflowPickerComponent,
|
|
7462
|
+
EditorJsInputComponent
|
|
7463
|
+
], template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n <mat-label> {{ (vm. editorConfigValue)?.label + ((vm. editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n\r\n @switch ((vm. editorConfigValue)?.editType) {\r\n @default {\r\n <input (blur)=\"elementBlur($event)\" (input)=\"inputChange($event)\" [disabled]=\"(vm.disabled)\"\r\n [value]=\"(vm.value)\" matInput [placeholder]=\"(vm. editorConfigValue)?.placeholder ||'Enter value'\">\r\n\r\n\r\n }\r\n @case ( elementEditorTypes.Toggle) {\r\n <lib-mat-slider-toggle-editor [name]=\"((vm. editorConfigValue)?.name||'') \"\r\n [label]=\"((vm. editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n </lib-mat-slider-toggle-editor>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.Range) {\r\n\r\n\r\n <lib-mat-slider-editor [format]=\"( vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n [disabled]=\"(vm.disabled)||false\" [max]=\"( vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [min]=\"( vm.editorConfigValue)?.min || 0\"\r\n (valueChange)=\"inputChange($event)\" [step]=\"( vm.editorConfigValue)?.step || 1\"\r\n tickInterval=\"( vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n </lib-mat-slider-editor>\r\n\r\n\r\n\r\n }\r\n\r\n @case (elementEditorTypes.ChipSelect) {\r\n <lib-mat-chip-list-editor [disabled]=\"(vm.disabled)||false\"\r\n [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n (valueChange)=\" valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n\r\n }\r\n\r\n @case (elementEditorTypes.OptionSelect) {\r\n\r\n <mat-select [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n [disabled]=\"(vm.disabled)||false\">\r\n @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.RichTextEditor) {\r\n <lib-editor-js-input [value]=\"(vm.value)\" (valueChanged)=\"valueChanged($event)\"\r\n [disabled]=\"(vm.disabled)||false\"\r\n [inputConfig]=\"data\" >\r\n </lib-editor-js-input>\r\n }\r\n\r\n\r\n @case (elementEditorTypes.SelectionOptions) {\r\n\r\n <app-selection-options-editor [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n }\r\n\r\n @case (\r\n elementEditorTypes.ApiCall) {\r\n\r\n <lib-rest-api-call-setup [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n </lib-rest-api-call-setup>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n }\r\n @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\"\r\n [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\r\n (valueChanged)=\"valueChanged($event)\">\r\n </app-api-value-access-rules>\r\n\r\n }\r\n\r\n @case (elementEditorTypes.FormInputSelector)\r\n {\r\n\r\n <lib-form-input-selector [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n </lib-form-input-selector>\r\n }\r\n\r\n @case (\r\n elementEditorTypes.RequiredInputs\r\n ){\r\n\r\n <app-required-inputs [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n </app-required-inputs>\r\n }\r\n\r\n @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n }\r\n\r\n @case(elementEditorTypes.Validators){\r\n\r\n <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n [mapToData]=\"vm.dataOptions\">\r\n </app-validators-config>\r\n\r\n }\r\n @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n }\r\n @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n (valueChanged)=\"valueChanged($event)\">\r\n </app-config-mscoa-additional-inputs>\r\n\r\n }\r\n @case (elementEditorTypes.ChipOptionsCreator) {\r\n <lib-chip-options-creator-editor [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n </lib-chip-options-creator-editor>\r\n\r\n }\r\n @case (elementEditorTypes.DataSourcePicker) {\r\n <lib-data-source-picker [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm. editorConfigValue\"\r\n (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n [errors]=\"(validationErrors)||[]\">\r\n </lib-data-source-picker>\r\n }\r\n @case (elementEditorTypes.ListLabelConfigEditor) {\r\n <lib-document-list-label-config-editor [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm. editorConfigValue\"\r\n (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n [errors]=\"(validationErrors)||[]\">\r\n\r\n </lib-document-list-label-config-editor>\r\n }\r\n @case(\r\n elementEditorTypes.WorkflowPicker\r\n ){\r\n <lib-t-workflow-picker [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n }\r\n }\r\n\r\n <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n mat-icon-button>\r\n <mat-icon>{{\r\n blurOff?'blur_off':'blur_on'\r\n }}\r\n\r\n\r\n </mat-icon>\r\n </button>\r\n </mat-form-field>\r\n\r\n\r\n <mat-error style=\" font-size: 12px;\r\n margin-left: 14px;\r\n \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n <mat-card-content>\r\n\r\n <span>\r\n Failed to load form inputs\r\n </span>\r\n </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:12px;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:16px;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"] }]
|
|
7450
7464
|
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { editorConfig: [{
|
|
7451
7465
|
type: Input
|
|
7452
7466
|
}], formInputs: [{
|
|
@@ -8886,6 +8900,9 @@ class MscoaReactiveFormFieldComponent extends BaseCustomInput {
|
|
|
8886
8900
|
const allSegmentsValid = requiredSegments?.every((segment) => {
|
|
8887
8901
|
const key = segment.customSegment || segment.segment;
|
|
8888
8902
|
const segmentValue = this.value && key ? this.value[key] : undefined;
|
|
8903
|
+
if ((segmentValue !== undefined && segmentValue !== null) === false) {
|
|
8904
|
+
console.error("Segment value is invalid", segmentValue, key, this.value, segment);
|
|
8905
|
+
}
|
|
8889
8906
|
return segmentValue !== undefined && segmentValue !== null;
|
|
8890
8907
|
});
|
|
8891
8908
|
const valueValid = Boolean(allSegmentsValid);
|
|
@@ -8907,14 +8924,14 @@ class MscoaReactiveFormFieldComponent extends BaseCustomInput {
|
|
|
8907
8924
|
}
|
|
8908
8925
|
}
|
|
8909
8926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaReactiveFormFieldComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8910
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MscoaReactiveFormFieldComponent, isStandalone: true, selector: "lib-mscoa-reactive-form-field", inputs: { formBuilderFunctions: "formBuilderFunctions", editorMode: "editorMode", inputConfig: "inputConfig" }, host: { properties: { "lib-mscoa-reactive-form-field.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n\r\n <app-mscoa-chart \r\n (onContainerClick)=\"onContainerClick($event)\"\r\n (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n [config]=\"mscoaInputConfig$|async\"\r\n [inputConfig]=\"_inputConfig \"\r\n [readonly]=\"readonly\"\r\n [editorMode]=\"editorMode\"\r\n [formGroup]=\"parentFormGroup\"\r\n [formBuilderFunctions]=\"formBuilderFunctions\"\r\n [segmentValues]=\"value\"></app-mscoa-chart>\r\n
|
|
8927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MscoaReactiveFormFieldComponent, isStandalone: true, selector: "lib-mscoa-reactive-form-field", inputs: { formBuilderFunctions: "formBuilderFunctions", editorMode: "editorMode", inputConfig: "inputConfig" }, host: { properties: { "lib-mscoa-reactive-form-field.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n\r\n <app-mscoa-chart \r\n (onContainerClick)=\"onContainerClick($event)\"\r\n (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n [config]=\"mscoaInputConfig$|async\"\r\n [inputConfig]=\"_inputConfig \"\r\n [readonly]=\"readonly\"\r\n [editorMode]=\"editorMode\"\r\n [formGroup]=\"parentFormGroup\"\r\n [formBuilderFunctions]=\"formBuilderFunctions\"\r\n [segmentValues]=\"value\"></app-mscoa-chart>\r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: MscoaChartComponent, selector: "app-mscoa-chart", inputs: ["inputConfig", "editorMode", "formBuilderFunctions", "segmentValues", "readonly", "config", "formGroup"], outputs: ["onContainerClick", "segmentValuesChanged", "interaction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }] }); }
|
|
8911
8928
|
}
|
|
8912
8929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaReactiveFormFieldComponent, decorators: [{
|
|
8913
8930
|
type: Component,
|
|
8914
8931
|
args: [{ selector: 'lib-mscoa-reactive-form-field', standalone: true, imports: [MscoaChartComponent, CommonModule], host: {
|
|
8915
8932
|
'[lib-mscoa-reactive-form-field.floating]': 'shouldLabelFloat',
|
|
8916
8933
|
'[id]': 'id',
|
|
8917
|
-
}, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n\r\n <app-mscoa-chart \r\n (onContainerClick)=\"onContainerClick($event)\"\r\n (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n [config]=\"mscoaInputConfig$|async\"\r\n [inputConfig]=\"_inputConfig \"\r\n [readonly]=\"readonly\"\r\n [editorMode]=\"editorMode\"\r\n [formGroup]=\"parentFormGroup\"\r\n [formBuilderFunctions]=\"formBuilderFunctions\"\r\n [segmentValues]=\"value\"></app-mscoa-chart>\r\n
|
|
8934
|
+
}, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n\r\n <app-mscoa-chart \r\n (onContainerClick)=\"onContainerClick($event)\"\r\n (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n [config]=\"mscoaInputConfig$|async\"\r\n [inputConfig]=\"_inputConfig \"\r\n [readonly]=\"readonly\"\r\n [editorMode]=\"editorMode\"\r\n [formGroup]=\"parentFormGroup\"\r\n [formBuilderFunctions]=\"formBuilderFunctions\"\r\n [segmentValues]=\"value\"></app-mscoa-chart>\r\n\r\n</div>\r\n\r\n" }]
|
|
8918
8935
|
}], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
|
|
8919
8936
|
type: Optional
|
|
8920
8937
|
}, {
|
|
@@ -8979,7 +8996,7 @@ class MscoaFormInputComponent {
|
|
|
8979
8996
|
return getInputErrorMessage(this.inputConfig, this.formGroup);
|
|
8980
8997
|
}
|
|
8981
8998
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8982
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaFormInputComponent, isStandalone: true, selector: "lib-mscoa-form-input", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n <mat-form-field \r\n\r\n [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n [floatLabel]=\"'always'\"\r\n subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n <mat-label>\r\n {{this.inputConfig.label }} \r\n <lib-t-form-input-status \r\n [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n <mat-card style=\"overflow:auto\">\r\n \r\n <lib-mscoa-reactive-form-field \r\n [inputConfig]=\"this.inputConfig\"\r\n [formControlName]=\"this.inputConfig.id\"\r\n [required]=\"this.inputConfig.required\"\r\n [formGroup]=\"formGroup\"\r\n [editorMode]=\"editorMode\"\r\n [formBuilderFunctions]=\"formBuilderFunctions\"\r\n ></lib-mscoa-reactive-form-field>\r\n \r\n </mat-card>\r\n \r\n\r\n @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n <mat-hint class=\"inputHint\">\r\n {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n \r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n \r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n mat-icon-button matSuffix>\r\n <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n </button> -->\r\n </ng-container>\r\n \r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n \r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n \r\n \r\n </mat-form-field>\r\n\r\n\r\n \r\n \r\n \r\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type:
|
|
8999
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaFormInputComponent, isStandalone: true, selector: "lib-mscoa-form-input", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n <mat-form-field \r\n\r\n [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n [floatLabel]=\"'always'\"\r\n subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n <mat-label>\r\n {{this.inputConfig.label }} \r\n <lib-t-form-input-status \r\n [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n <mat-card style=\"overflow:auto\">\r\n \r\n <lib-mscoa-reactive-form-field \r\n [inputConfig]=\"this.inputConfig\"\r\n [formControlName]=\"this.inputConfig.id\"\r\n [required]=\"this.inputConfig.required\"\r\n [formGroup]=\"formGroup\"\r\n [editorMode]=\"editorMode\"\r\n [formBuilderFunctions]=\"formBuilderFunctions\"\r\n ></lib-mscoa-reactive-form-field>\r\n \r\n </mat-card>\r\n \r\n\r\n @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n <mat-hint class=\"inputHint\">\r\n {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n \r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n \r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n mat-icon-button matSuffix>\r\n <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n </button> -->\r\n </ng-container>\r\n \r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n \r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n \r\n \r\n </mat-form-field>\r\n\r\n\r\n \r\n \r\n \r\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: MscoaReactiveFormFieldComponent, selector: "lib-mscoa-reactive-form-field", inputs: ["formBuilderFunctions", "editorMode", "inputConfig"] }] }); }
|
|
8983
9000
|
}
|
|
8984
9001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaFormInputComponent, decorators: [{
|
|
8985
9002
|
type: Component,
|
|
@@ -9338,7 +9355,7 @@ class SignaturePadInputComponent extends BaseCustomInput {
|
|
|
9338
9355
|
provide: MatFormFieldControl,
|
|
9339
9356
|
useExisting: SignaturePadInputComponent
|
|
9340
9357
|
}
|
|
9341
|
-
], viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.opacity]=\"canApplySignature?'0.1':'1'\" #signature class=\"signature-container\">\r\n \r\n \r\n</div>\r\n@if (canSaveSignature) {\r\n\r\n<mat-toolbar>\r\n\r\n <button style=\" width: 100%;\" \r\n matTooltip=\"You can save this signature for quick use in future documents\" \r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveUserSignature()\">\r\n <mat-icon>save</mat-icon>\r\n Save for future use\r\n </button>\r\n</mat-toolbar>\r\n}\r\n@if (canApplySignature && !inputConfig.disabled && !inputConfig.readonly ) {\r\n\r\n <mat-card appearance=\"outlined\" class=\"signature-card\">\r\n <mat-card-header>\r\n <img \r\n class=\"userAvatar\"\r\n mat-card-avatar \r\n [src]=\"getUserUrl()\" \r\n [attr.aria-label]=\"'Profile picture of ' + userStoredSignature?.userName\"\r\n >\r\n \r\n \r\n <mat-card-title class=\"existingTitle\">Found an existing signature</mat-card-title>\r\n \r\n <mat-card-subtitle class=\"signature-metadata\">\r\n <span class=\"metadata-item\">\r\n <mat-icon aria-hidden=\"true\">person</mat-icon>\r\n <span class=\"metadata-text\">{{userStoredSignature?.userName}}</span>\r\n </span>\r\n \r\n <span class=\"metadata-item\">\r\n <mat-icon aria-hidden=\"true\">calendar_month</mat-icon>\r\n <span class=\"metadata-text\">{{userStoredSignature?.signatureDate | date: 'mediumDate'}}</span>\r\n </span>\r\n </mat-card-subtitle>\r\n </mat-card-header>\r\n \r\n <mat-card-content>\r\n <p class=\"signature-description\">\r\n You can apply your saved signature or clear to draw a new one\r\n </p>\r\n </mat-card-content>\r\n \r\n \r\n <mat-card-actions align=\"end\">\r\n <button \r\n mat-flat-button\r\n color=\"primary\" \r\n class=\"apply-signature-btn\"\r\n (click)=\"saveSignature()\"\r\n [matTooltip]=\"'Apply your saved signature from ' + (userStoredSignature?.signatureDate | date: 'mediumDate')\">\r\n <mat-icon>done</mat-icon>\r\n <span>Apply Existing Signature</span>\r\n </button>\r\n </mat-card-actions>\r\n </mat-card>\r\n }\r\n<mat-toolbar style=\"max-width: 100%; overflow:auto\">\r\n <span>\r\n <div style=\"font-size:14px;line-height:normal;font-weight:500\">\r\n Signature:\r\n </div>\r\n <div style=\"font-size:12px;font-weight:400;line-height:1.5\">\r\n Secured and Encrypted.\r\n </div>\r\n\r\n </span>\r\n <span class=\"spacer\"></span>\r\n\r\n@if(!inputConfig.readonly){\r\n <button mat-stroked-button color=\"warn\" (click)=\"clearSignature()\">\r\n Clear\r\n\r\n</button>\r\n}\r\n\r\n</mat-toolbar>\r\n@if(loading){\r\n<div class=\"signature-pad-container\">\r\n <mat-spinner diameter=\"50\">\r\n </mat-spinner>\r\n <span>\r\n {{loading}}\r\n </span>\r\n\r\n</div>\r\n}", styles: [".signature-container{border:solid 1px var(--mat-divider-color, var(--mat-app-outline))}.signature-container canvas{width:100%;height:200px}.signature-container .controls{padding:10px;text-align:center}.signature-pad-container{position:absolute;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background:#3f51b51a;gap:12px;top:0}.userAvatar{height:50px;width:50px}.existingTitle{font-size:14px}.metadata-item{display:flex;align-items:center;gap:8px}.metadata-item mat-icon{font-size:12px;height:12px;width:12px}.metadata-item .metadata-text,.signature-description{font-size:12px}.apply-signature-btn{width:100%}.signature-metadata{margin-top:4px}.canApply{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type:
|
|
9358
|
+
], viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.opacity]=\"canApplySignature?'0.1':'1'\" #signature class=\"signature-container\">\r\n \r\n \r\n</div>\r\n@if (canSaveSignature) {\r\n\r\n<mat-toolbar>\r\n\r\n <button style=\" width: 100%;\" \r\n matTooltip=\"You can save this signature for quick use in future documents\" \r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"saveUserSignature()\">\r\n <mat-icon>save</mat-icon>\r\n Save for future use\r\n </button>\r\n</mat-toolbar>\r\n}\r\n@if (canApplySignature && !inputConfig.disabled && !inputConfig.readonly ) {\r\n\r\n <mat-card appearance=\"outlined\" class=\"signature-card\">\r\n <mat-card-header>\r\n <img \r\n class=\"userAvatar\"\r\n mat-card-avatar \r\n [src]=\"getUserUrl()\" \r\n [attr.aria-label]=\"'Profile picture of ' + userStoredSignature?.userName\"\r\n >\r\n \r\n \r\n <mat-card-title class=\"existingTitle\">Found an existing signature</mat-card-title>\r\n \r\n <mat-card-subtitle class=\"signature-metadata\">\r\n <span class=\"metadata-item\">\r\n <mat-icon aria-hidden=\"true\">person</mat-icon>\r\n <span class=\"metadata-text\">{{userStoredSignature?.userName}}</span>\r\n </span>\r\n \r\n <span class=\"metadata-item\">\r\n <mat-icon aria-hidden=\"true\">calendar_month</mat-icon>\r\n <span class=\"metadata-text\">{{userStoredSignature?.signatureDate | date: 'mediumDate'}}</span>\r\n </span>\r\n </mat-card-subtitle>\r\n </mat-card-header>\r\n \r\n <mat-card-content>\r\n <p class=\"signature-description\">\r\n You can apply your saved signature or clear to draw a new one\r\n </p>\r\n </mat-card-content>\r\n \r\n \r\n <mat-card-actions align=\"end\">\r\n <button \r\n mat-flat-button\r\n color=\"primary\" \r\n class=\"apply-signature-btn\"\r\n (click)=\"saveSignature()\"\r\n [matTooltip]=\"'Apply your saved signature from ' + (userStoredSignature?.signatureDate | date: 'mediumDate')\">\r\n <mat-icon>done</mat-icon>\r\n <span>Apply Existing Signature</span>\r\n </button>\r\n </mat-card-actions>\r\n </mat-card>\r\n }\r\n<mat-toolbar style=\"max-width: 100%; overflow:auto\">\r\n <span>\r\n <div style=\"font-size:14px;line-height:normal;font-weight:500\">\r\n Signature:\r\n </div>\r\n <div style=\"font-size:12px;font-weight:400;line-height:1.5\">\r\n Secured and Encrypted.\r\n </div>\r\n\r\n </span>\r\n <span class=\"spacer\"></span>\r\n\r\n@if(!inputConfig.readonly){\r\n <button mat-stroked-button color=\"warn\" (click)=\"clearSignature()\">\r\n Clear\r\n\r\n</button>\r\n}\r\n\r\n</mat-toolbar>\r\n@if(loading){\r\n<div class=\"signature-pad-container\">\r\n <mat-spinner diameter=\"50\">\r\n </mat-spinner>\r\n <span>\r\n {{loading}}\r\n </span>\r\n\r\n</div>\r\n}", styles: [".signature-container{border:solid 1px var(--mat-divider-color, var(--mat-app-outline))}.signature-container canvas{width:100%;height:200px}.signature-container .controls{padding:10px;text-align:center}.signature-pad-container{position:absolute;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background:#3f51b51a;gap:12px;top:0}.userAvatar{height:50px;width:50px}.existingTitle{font-size:14px}.metadata-item{display:flex;align-items:center;gap:8px}.metadata-item mat-icon{font-size:12px;height:12px;width:12px}.metadata-item .metadata-text,.signature-description{font-size:12px}.apply-signature-btn{width:100%}.signature-metadata{margin-top:4px}.canApply{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4$3.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i4$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9342
9359
|
}
|
|
9343
9360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SignaturePadInputComponent, decorators: [{
|
|
9344
9361
|
type: Component,
|
|
@@ -9495,14 +9512,14 @@ class ToggleComponent extends BaseCustomInput {
|
|
|
9495
9512
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { inputConfig: "inputConfig", changed: "changed" }, providers: [{
|
|
9496
9513
|
provide: MatFormFieldControl,
|
|
9497
9514
|
useExisting: forwardRef(() => ToggleComponent)
|
|
9498
|
-
}], usesInheritance: true, ngImport: i0, template: "<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"!!(this.inputConfig.disabled || this.inputConfig.readonly)\"\r\n>\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1);\">\r\n\r\n\r\n</div>\r\n</ng-template>\r\n\r\n<mat-slide-toggle \r\n\r\nstyle=\"display: block\" \r\n\r\n [disabledInteractive]=\"this.inputConfig.disabled || this.inputConfig.readonly\"\r\n[required]=\"this.inputConfig.required\" \r\n[labelPosition]=\"this.inputConfig.labelPosition || 'after'\"\r\n(change)=\"this.changed($event)\"\r\n[checked]=\"isChecked\"\r\n[ariaReadOnly]=\"this.inputConfig.disabled\"\r\n[disabled]=\"this.inputConfig.disabled\"\r\n>\r\n@if (inputConfig.falseLabel || inputConfig.trueLabel) {\r\n\r\n\r\n @if (this.inputConfig.labelPosition !== 'after') {\r\n {{ this.inputConfig.label | titlecase }}\r\n <span class=\"spacer\"></span>\r\n @if (isChecked) {\r\n <span class=\"true-label\" >{{
|
|
9515
|
+
}], usesInheritance: true, ngImport: i0, template: "<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"!!(this.inputConfig.disabled || this.inputConfig.readonly)\"\r\n>\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1);\">\r\n\r\n\r\n</div>\r\n</ng-template>\r\n\r\n<mat-slide-toggle \r\n\r\nstyle=\"display: block\" \r\n\r\n [disabledInteractive]=\"this.inputConfig.disabled || this.inputConfig.readonly\"\r\n[required]=\"this.inputConfig.required\" \r\n[labelPosition]=\"this.inputConfig.labelPosition || 'after'\"\r\n(change)=\"this.changed($event)\"\r\n[checked]=\"isChecked\"\r\n[ariaReadOnly]=\"this.inputConfig.disabled\"\r\n[disabled]=\"this.inputConfig.disabled\"\r\n>\r\n@if (inputConfig.falseLabel || inputConfig.trueLabel) {\r\n\r\n\r\n @if (this.inputConfig.labelPosition !== 'after') {\r\n {{ this.inputConfig.label | titlecase }}\r\n <span class=\"spacer\"></span>\r\n @if (isChecked) {\r\n <span class=\"true-label\" >{{ inputConfig.trueLabel|| 'Yes' }}</span>\r\n } @else {\r\n <span class=\"false-label\" >{{ inputConfig.falseLabel || 'No' }}</span>\r\n }\r\n } \r\n @else {\r\n @if (isChecked) {\r\n <span class=\"true-label\" >{{ inputConfig.trueLabel || 'Yes' }}</span>\r\n } @else {\r\n <span class=\"false-label\">{{ inputConfig.falseLabel || 'No' }}</span>\r\n }\r\n <span class=\"spacer\"></span>\r\n {{ this.inputConfig.label | titlecase }}\r\n }\r\n\r\n}\r\n</mat-slide-toggle>", styles: [".false-label{font-weight:500;color:var(--mat-sys-error)!important}.true-label{font-weight:500;color:var(--mat-sys-primary)!important}.spacer{width:16px;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i9$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i11.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: OverlayModule }] }); }
|
|
9499
9516
|
}
|
|
9500
9517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
9501
9518
|
type: Component,
|
|
9502
9519
|
args: [{ selector: 'lib-toggle', standalone: true, imports: [MatModulesModule, CommonModule, OverlayModule], providers: [{
|
|
9503
9520
|
provide: MatFormFieldControl,
|
|
9504
9521
|
useExisting: forwardRef(() => ToggleComponent)
|
|
9505
|
-
}], template: "<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"!!(this.inputConfig.disabled || this.inputConfig.readonly)\"\r\n>\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1);\">\r\n\r\n\r\n</div>\r\n</ng-template>\r\n\r\n<mat-slide-toggle \r\n\r\nstyle=\"display: block\" \r\n\r\n [disabledInteractive]=\"this.inputConfig.disabled || this.inputConfig.readonly\"\r\n[required]=\"this.inputConfig.required\" \r\n[labelPosition]=\"this.inputConfig.labelPosition || 'after'\"\r\n(change)=\"this.changed($event)\"\r\n[checked]=\"isChecked\"\r\n[ariaReadOnly]=\"this.inputConfig.disabled\"\r\n[disabled]=\"this.inputConfig.disabled\"\r\n>\r\n@if (inputConfig.falseLabel || inputConfig.trueLabel) {\r\n\r\n\r\n @if (this.inputConfig.labelPosition !== 'after') {\r\n {{ this.inputConfig.label | titlecase }}\r\n <span class=\"spacer\"></span>\r\n @if (isChecked) {\r\n <span class=\"true-label\" >{{
|
|
9522
|
+
}], template: "<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOpen]=\"!!(this.inputConfig.disabled || this.inputConfig.readonly)\"\r\n>\r\n<div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1);\">\r\n\r\n\r\n</div>\r\n</ng-template>\r\n\r\n<mat-slide-toggle \r\n\r\nstyle=\"display: block\" \r\n\r\n [disabledInteractive]=\"this.inputConfig.disabled || this.inputConfig.readonly\"\r\n[required]=\"this.inputConfig.required\" \r\n[labelPosition]=\"this.inputConfig.labelPosition || 'after'\"\r\n(change)=\"this.changed($event)\"\r\n[checked]=\"isChecked\"\r\n[ariaReadOnly]=\"this.inputConfig.disabled\"\r\n[disabled]=\"this.inputConfig.disabled\"\r\n>\r\n@if (inputConfig.falseLabel || inputConfig.trueLabel) {\r\n\r\n\r\n @if (this.inputConfig.labelPosition !== 'after') {\r\n {{ this.inputConfig.label | titlecase }}\r\n <span class=\"spacer\"></span>\r\n @if (isChecked) {\r\n <span class=\"true-label\" >{{ inputConfig.trueLabel|| 'Yes' }}</span>\r\n } @else {\r\n <span class=\"false-label\" >{{ inputConfig.falseLabel || 'No' }}</span>\r\n }\r\n } \r\n @else {\r\n @if (isChecked) {\r\n <span class=\"true-label\" >{{ inputConfig.trueLabel || 'Yes' }}</span>\r\n } @else {\r\n <span class=\"false-label\">{{ inputConfig.falseLabel || 'No' }}</span>\r\n }\r\n <span class=\"spacer\"></span>\r\n {{ this.inputConfig.label | titlecase }}\r\n }\r\n\r\n}\r\n</mat-slide-toggle>", styles: [".false-label{font-weight:500;color:var(--mat-sys-error)!important}.true-label{font-weight:500;color:var(--mat-sys-primary)!important}.spacer{width:16px;display:inline-block}\n"] }]
|
|
9506
9523
|
}], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
|
|
9507
9524
|
type: Optional
|
|
9508
9525
|
}, {
|
|
@@ -9811,7 +9828,7 @@ class DateRangePickerInputElementComponent {
|
|
|
9811
9828
|
}
|
|
9812
9829
|
}
|
|
9813
9830
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateRangePickerInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DateRangePickerInputElementComponent, isStandalone: true, selector: "lib-date-range-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<!-- <mat-form-field [appearance]=\"this.inputConfig.appearance || 'fill'\" floatLabel=\"auto\">\r\n <mat-label></mat-label>\r\n @if(inputConfig.startDateControl && inputConfig.endDateControl) {\r\n <ng-container>\r\n <mat-date-range-input [formGroup]=\"formGroup\" [rangePicker]=\"picker\">\r\n <input matStartDate [formControlName]=\"inputConfig.startDateControl\" placeholder=\"Start date\">\r\n <input matEndDate [formControlName]=\"inputConfig.endDateControl\" placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{inputConfig.hintLabel}}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n\r\n @if (formGroup.controls[inputConfig.startDateControl]?.hasError('matStartDateInvalid')) {\r\n <mat-error>Invalid start date</mat-error>\r\n }\r\n @if (formGroup.controls[inputConfig.endDateControl]?.hasError('matEndDateInvalid')) {\r\n <mat-error>Invalid end date</mat-error>\r\n }\r\n \r\n @if(!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n </ng-container>\r\n }\r\n</mat-form-field> -->\r\n<form [formGroup]=\"formGroup\">\r\n\r\n\r\n<mat-form-field [appearance]=\"this.inputConfig.appearance || 'fill'\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{inputConfig.label}} <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status></mat-label>\r\n <lib-date-range-picker-reactive-input\r\n [inputConfig]=\"this.inputConfig\"\r\n [required]=\"this.inputConfig.required\"\r\n [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n ></lib-date-range-picker-reactive-input>\r\n\r\n <mat-date-range-input [required]=\"inputConfig.required\" [formGroup]=\"formGroup\" [rangePicker]=\"picker\">\r\n @if (inputConfig.startDateControl) {\r\n <input matStartDate \r\n [formControlName]=\"inputConfig.id+'.'+inputConfig.startDateControl\"\r\n [min]=\"inputConfig.startMinDate\"\r\n [max]=\"inputConfig.startMaxDate\"\r\n [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.startDateControl]?.value\"\r\n (dateChange)=\"dateChanged($event, inputConfig.startDateControl)\"\r\n placeholder=\"Start date\">\r\n }\r\n @if (inputConfig.endDateControl) {\r\n <input matEndDate \r\n [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.endDateControl]?.value\"\r\n placeholder=\"End date\"\r\n [min]=\"inputConfig.endMinDate\" \r\n [max]=\"inputConfig.endMaxDate\"\r\n (dateChange)=\"dateChanged($event, inputConfig.endDateControl)\"\r\n >\r\n }\r\n </mat-date-range-input>\r\n\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker >\r\n <mat-datepicker-actions>\r\n <button mat-button matDatepickerCancel>Cancel</button>\r\n <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n </mat-datepicker-actions>\r\n </mat-date-range-picker>\r\n\r\n\r\n\r\n @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" class=\"inputHint\">\r\n {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n \r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n\r\n </ng-container>\r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" >\r\n {{ (formGroup.controls[inputConfig.id]?.value.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n\r\n</mat-form-field>\r\n\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$
|
|
9831
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DateRangePickerInputElementComponent, isStandalone: true, selector: "lib-date-range-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<!-- <mat-form-field [appearance]=\"this.inputConfig.appearance || 'fill'\" floatLabel=\"auto\">\r\n <mat-label></mat-label>\r\n @if(inputConfig.startDateControl && inputConfig.endDateControl) {\r\n <ng-container>\r\n <mat-date-range-input [formGroup]=\"formGroup\" [rangePicker]=\"picker\">\r\n <input matStartDate [formControlName]=\"inputConfig.startDateControl\" placeholder=\"Start date\">\r\n <input matEndDate [formControlName]=\"inputConfig.endDateControl\" placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>{{inputConfig.hintLabel}}</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n\r\n @if (formGroup.controls[inputConfig.startDateControl]?.hasError('matStartDateInvalid')) {\r\n <mat-error>Invalid start date</mat-error>\r\n }\r\n @if (formGroup.controls[inputConfig.endDateControl]?.hasError('matEndDateInvalid')) {\r\n <mat-error>Invalid end date</mat-error>\r\n }\r\n \r\n @if(!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n </ng-container>\r\n }\r\n</mat-form-field> -->\r\n<form [formGroup]=\"formGroup\">\r\n\r\n\r\n<mat-form-field [appearance]=\"this.inputConfig.appearance || 'fill'\" subscriptSizing=\"dynamic\">\r\n <mat-label>{{inputConfig.label}} <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status></mat-label>\r\n <lib-date-range-picker-reactive-input\r\n [inputConfig]=\"this.inputConfig\"\r\n [required]=\"this.inputConfig.required\"\r\n [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n ></lib-date-range-picker-reactive-input>\r\n\r\n <mat-date-range-input [required]=\"inputConfig.required\" [formGroup]=\"formGroup\" [rangePicker]=\"picker\">\r\n @if (inputConfig.startDateControl) {\r\n <input matStartDate \r\n [formControlName]=\"inputConfig.id+'.'+inputConfig.startDateControl\"\r\n [min]=\"inputConfig.startMinDate\"\r\n [max]=\"inputConfig.startMaxDate\"\r\n [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.startDateControl]?.value\"\r\n (dateChange)=\"dateChanged($event, inputConfig.startDateControl)\"\r\n placeholder=\"Start date\">\r\n }\r\n @if (inputConfig.endDateControl) {\r\n <input matEndDate \r\n [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.endDateControl]?.value\"\r\n placeholder=\"End date\"\r\n [min]=\"inputConfig.endMinDate\" \r\n [max]=\"inputConfig.endMaxDate\"\r\n (dateChange)=\"dateChanged($event, inputConfig.endDateControl)\"\r\n >\r\n }\r\n </mat-date-range-input>\r\n\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker #picker >\r\n <mat-datepicker-actions>\r\n <button mat-button matDatepickerCancel>Cancel</button>\r\n <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n </mat-datepicker-actions>\r\n </mat-date-range-picker>\r\n\r\n\r\n\r\n @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" class=\"inputHint\">\r\n {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n \r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n\r\n </ng-container>\r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" >\r\n {{ (formGroup.controls[inputConfig.id]?.value.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n\r\n</mat-form-field>\r\n\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$1.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: DateRangePickerReactiveInputComponent, selector: "lib-date-range-picker-reactive-input", inputs: ["inputConfig"] }] }); }
|
|
9815
9832
|
}
|
|
9816
9833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateRangePickerInputElementComponent, decorators: [{
|
|
9817
9834
|
type: Component,
|
|
@@ -9844,7 +9861,7 @@ class DatePickerReactiveInputComponent extends BaseCustomInput {
|
|
|
9844
9861
|
this.onChange(this.value);
|
|
9845
9862
|
}
|
|
9846
9863
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9847
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DatePickerReactiveInputComponent, isStandalone: true, selector: "lib-date-picker-reactive-input", inputs: { picker: "picker", inputConfig: "inputConfig" }, host: { properties: { "lib-date-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DatePickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input \r\n[required]=\"inputConfig?.required\" \r\n\r\n[min]=\"inputConfig?.min\" \r\n(dateChange)=\"changed($event)\"\r\n[value]=\"value\"\r\n[max]=\"inputConfig?.max\" matInput \r\n[matDatepicker]=\"picker\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$
|
|
9864
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DatePickerReactiveInputComponent, isStandalone: true, selector: "lib-date-picker-reactive-input", inputs: { picker: "picker", inputConfig: "inputConfig" }, host: { properties: { "lib-date-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DatePickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input \r\n[required]=\"inputConfig?.required\" \r\n\r\n[min]=\"inputConfig?.min\" \r\n(dateChange)=\"changed($event)\"\r\n[value]=\"value\"\r\n[max]=\"inputConfig?.max\" matInput \r\n[matDatepicker]=\"picker\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
9848
9865
|
}
|
|
9849
9866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerReactiveInputComponent, decorators: [{
|
|
9850
9867
|
type: Component,
|
|
@@ -9873,7 +9890,7 @@ class DatePickerInputElementComponent {
|
|
|
9873
9890
|
return getInputErrorMessage(this.inputConfig, this.formGroup);
|
|
9874
9891
|
}
|
|
9875
9892
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9876
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DatePickerInputElementComponent, isStandalone: true, selector: "lib-date-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n\r\n <mat-form-field \r\n [appearance]=\"this.inputConfig.appearance ||'fill' \" \r\n subscriptSizing=\"dynamic\">\r\n <mat-label>\r\n {{this.inputConfig.label }} \r\n <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n <lib-date-picker-reactive-input\r\n [inputConfig]=\"this.inputConfig\"\r\n [required]=\"this.inputConfig.required\"\r\n [formControlName]=\"this.inputConfig.id\"\r\n [picker]=\"picker\"\r\n \r\n ></lib-date-picker-reactive-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker>\r\n <button mat-button matDatepickerCancel>Cancel</button>\r\n <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n </mat-datepicker>\r\n \r\n\r\n @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n <mat-hint class=\"inputHint\">\r\n {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n \r\n\r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n \r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon \r\n matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n \r\n \r\n </ng-container>\r\n \r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n \r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$
|
|
9893
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DatePickerInputElementComponent, isStandalone: true, selector: "lib-date-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n\r\n <mat-form-field \r\n [appearance]=\"this.inputConfig.appearance ||'fill' \" \r\n subscriptSizing=\"dynamic\">\r\n <mat-label>\r\n {{this.inputConfig.label }} \r\n <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n <lib-date-picker-reactive-input\r\n [inputConfig]=\"this.inputConfig\"\r\n [required]=\"this.inputConfig.required\"\r\n [formControlName]=\"this.inputConfig.id\"\r\n [picker]=\"picker\"\r\n \r\n ></lib-date-picker-reactive-input>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker>\r\n <button mat-button matDatepickerCancel>Cancel</button>\r\n <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n </mat-datepicker>\r\n \r\n\r\n @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n <mat-hint class=\"inputHint\">\r\n {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n \r\n\r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n \r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon \r\n matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n \r\n \r\n </ng-container>\r\n \r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n \r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$1.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: DatePickerReactiveInputComponent, selector: "lib-date-picker-reactive-input", inputs: ["picker", "inputConfig"] }] }); }
|
|
9877
9894
|
}
|
|
9878
9895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerInputElementComponent, decorators: [{
|
|
9879
9896
|
type: Component,
|
|
@@ -10163,7 +10180,7 @@ const editorConfig = (payload) => {
|
|
|
10163
10180
|
data: payload.data,
|
|
10164
10181
|
readOnly: payload.readOnly,
|
|
10165
10182
|
logLevel: 'ERROR',
|
|
10166
|
-
minHeight:
|
|
10183
|
+
minHeight: 300,
|
|
10167
10184
|
onChange: (api, event) => {
|
|
10168
10185
|
payload.onChangeFn();
|
|
10169
10186
|
},
|
|
@@ -10207,13 +10224,24 @@ class EditorJsInputComponent extends BaseCustomInput {
|
|
|
10207
10224
|
get shouldLabelFloat() {
|
|
10208
10225
|
return true;
|
|
10209
10226
|
}
|
|
10227
|
+
set value(value) {
|
|
10228
|
+
if (!_isEqual(this._value, value)) {
|
|
10229
|
+
this._value = value;
|
|
10230
|
+
this.onChange(value);
|
|
10231
|
+
this.stateChanges.next();
|
|
10232
|
+
}
|
|
10233
|
+
}
|
|
10234
|
+
get value() { return this._value; }
|
|
10210
10235
|
constructor(ngControl, elementRef) {
|
|
10211
10236
|
super(ngControl, elementRef, customInputConfig$6);
|
|
10237
|
+
this._value = undefined;
|
|
10238
|
+
this.valueChanged = new EventEmitter();
|
|
10212
10239
|
}
|
|
10213
10240
|
ngAfterViewInit() {
|
|
10214
10241
|
if (!!this.editor) {
|
|
10215
10242
|
this.editor?.destroy();
|
|
10216
10243
|
}
|
|
10244
|
+
console.error('EditorJSInputComponent ngAfterViewInit', this.inputConfig, this.value);
|
|
10217
10245
|
const config = {
|
|
10218
10246
|
holderId: this.inputConfig.id,
|
|
10219
10247
|
imageFetchEndpoint: '',
|
|
@@ -10227,27 +10255,36 @@ class EditorJsInputComponent extends BaseCustomInput {
|
|
|
10227
10255
|
async contentChangedSaveValue() {
|
|
10228
10256
|
const value = await this.editor?.save();
|
|
10229
10257
|
this.value = value;
|
|
10230
|
-
console.log('value', value);
|
|
10231
10258
|
this.onChange(value);
|
|
10259
|
+
this.valueChanged.emit(value);
|
|
10232
10260
|
}
|
|
10233
10261
|
ngOnDestroy() {
|
|
10234
10262
|
this.stateChanges.complete();
|
|
10235
10263
|
this.editor?.destroy();
|
|
10236
10264
|
}
|
|
10237
10265
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EditorJsInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: EditorJsInputComponent, isStandalone: true, selector: "lib-editor-js-input", inputs: { inputConfig: "inputConfig" }, providers: [{ provide: MatFormFieldControl, useExisting: EditorJsInputComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<div class=\" editor-container\" style=\"padding: 16px;\">\r\n <div #editorJs [id]=\"inputConfig.id\"></div>\r\n</div
|
|
10266
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: EditorJsInputComponent, isStandalone: true, selector: "lib-editor-js-input", inputs: { inputConfig: "inputConfig", value: "value" }, outputs: { valueChanged: "valueChanged" }, providers: [{ provide: MatFormFieldControl, useExisting: EditorJsInputComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<div class=\" editor-container\" style=\"padding: 16px;\">\r\n <div #editorJs [id]=\"inputConfig.id\"></div>\r\n</div>\r\n", styles: [".editor-container{border:solid 1px var(--mat-divider-color, var(--mat-app-outline));padding:16px;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
10239
10267
|
}
|
|
10240
10268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EditorJsInputComponent, decorators: [{
|
|
10241
10269
|
type: Component,
|
|
10242
|
-
args: [{ selector: 'lib-editor-js-input', standalone: true, imports: [], providers: [{ provide: MatFormFieldControl, useExisting: EditorJsInputComponent }], template: "\r\n<div class=\" editor-container\" style=\"padding: 16px;\">\r\n <div #editorJs [id]=\"inputConfig.id\"></div>\r\n</div
|
|
10270
|
+
args: [{ selector: 'lib-editor-js-input', standalone: true, imports: [CommonModule], providers: [{ provide: MatFormFieldControl, useExisting: EditorJsInputComponent }], template: "\r\n<div class=\" editor-container\" style=\"padding: 16px;\">\r\n <div #editorJs [id]=\"inputConfig.id\"></div>\r\n</div>\r\n", styles: [".editor-container{border:solid 1px var(--mat-divider-color, var(--mat-app-outline));padding:16px;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low))}\n"] }]
|
|
10243
10271
|
}], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
|
|
10244
10272
|
type: Optional
|
|
10245
10273
|
}, {
|
|
10246
10274
|
type: Self
|
|
10247
10275
|
}] }, { type: i0.ElementRef }], propDecorators: { inputConfig: [{
|
|
10248
10276
|
type: Input
|
|
10277
|
+
}], value: [{
|
|
10278
|
+
type: Input
|
|
10279
|
+
}], valueChanged: [{
|
|
10280
|
+
type: Output
|
|
10249
10281
|
}] } });
|
|
10250
10282
|
|
|
10283
|
+
var editorJsInput_component = /*#__PURE__*/Object.freeze({
|
|
10284
|
+
__proto__: null,
|
|
10285
|
+
EditorJsInputComponent: EditorJsInputComponent
|
|
10286
|
+
});
|
|
10287
|
+
|
|
10251
10288
|
class EditorInputElementComponent {
|
|
10252
10289
|
constructor() {
|
|
10253
10290
|
this.reload = new EventEmitter();
|
|
@@ -10256,7 +10293,7 @@ class EditorInputElementComponent {
|
|
|
10256
10293
|
return getInputErrorMessage(this.inputConfig, this.formGroup);
|
|
10257
10294
|
}
|
|
10258
10295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EditorInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: EditorInputElementComponent, isStandalone: true, selector: "lib-editor-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n@if (inputConfig.richTextEditorLibrary === 'EditorJS') {\r\n <form [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\r\n <mat-label>\r\n {{this.inputConfig.label }} \r\n <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n <lib-editor-js-input \r\n [inputConfig]=\"inputConfig\"\r\n [formControlName]=\"inputConfig.id\"\r\n [required]=\"this.inputConfig.required\"\r\n ></lib-editor-js-input>\r\n <!-- <app-form-input-rich-text-editor\r\n [inputConfig]=\"inputConfig\"\r\n [formControlName]=\"inputConfig.id\"\r\n (change)=\"changed($event)\"\r\n >\r\n </app-form-input-rich-text-editor> -->\r\n\r\n\r\n @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n <mat-hint class=\"inputHint\">\r\n {{ classInput.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n\r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n \r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"classInput.togglePasswordVisibility()\"\r\n mat-icon-button matSuffix>\r\n <mat-icon>{{ classInput.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n </button> -->\r\n </ng-container>\r\n \r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n \r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n \r\n\r\n \r\n </mat-form-field>\r\n \r\n</form>\r\n\r\n}\r\n\r\n\r\n\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorJsInputComponent, selector: "lib-editor-js-input", inputs: ["inputConfig"] }] }); }
|
|
10296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: EditorInputElementComponent, isStandalone: true, selector: "lib-editor-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n@if (inputConfig.richTextEditorLibrary === 'EditorJS') {\r\n <form [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\r\n <mat-label>\r\n {{this.inputConfig.label }} \r\n <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n <lib-editor-js-input \r\n [inputConfig]=\"inputConfig\"\r\n [formControlName]=\"inputConfig.id\"\r\n [required]=\"this.inputConfig.required\"\r\n ></lib-editor-js-input>\r\n <!-- <app-form-input-rich-text-editor\r\n [inputConfig]=\"inputConfig\"\r\n [formControlName]=\"inputConfig.id\"\r\n (change)=\"changed($event)\"\r\n >\r\n </app-form-input-rich-text-editor> -->\r\n\r\n\r\n @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n <mat-hint class=\"inputHint\">\r\n {{ classInput.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n\r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n \r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"classInput.togglePasswordVisibility()\"\r\n mat-icon-button matSuffix>\r\n <mat-icon>{{ classInput.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n </button> -->\r\n </ng-container>\r\n \r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n \r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n \r\n\r\n \r\n </mat-form-field>\r\n \r\n</form>\r\n\r\n}\r\n\r\n\r\n\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorJsInputComponent, selector: "lib-editor-js-input", inputs: ["inputConfig", "value"], outputs: ["valueChanged"] }] }); }
|
|
10260
10297
|
}
|
|
10261
10298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EditorInputElementComponent, decorators: [{
|
|
10262
10299
|
type: Component,
|
|
@@ -10719,11 +10756,11 @@ class MultipleInputTableViewComponent {
|
|
|
10719
10756
|
return !!this.inputConfig?.formIsOpen && this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value === row[`${this.inputConfig?.id}.id`];
|
|
10720
10757
|
}
|
|
10721
10758
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10722
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: "inputConfig", dataSource: "dataSource", applyOptionsTo: "applyOptionsTo", formGroup: "formGroup" }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo" }, ngImport: i0, template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n matSortDisableClear matSortDirection=\"desc\">\r\n @for (col of (displayedColumnsInOrder||[]); track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n </span>\r\n @if($last){\r\n <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" \r\n [matMenuTriggerData]=\"{}\" mat-icon-button>\r\n <mat-icon>\r\n label\r\n </mat-icon>\r\n </button>\r\n \r\n }\r\n </th>\r\n <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n \r\n [style.background]=\"\r\n returnBackground(row, getColConfig.columnsConfig?.[col])\r\n \" mat-cell *matCellDef=\"let row\">\r\n <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n <span *ngIf=\"\r\n !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n inputConfig?.multipleInputInEditId !== row['id']\">\r\n <strong>\r\n\r\n {{getCalculationFunction(row)}}\r\n </strong>\r\n\r\n </span>\r\n <button mat-icon-button\r\n [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n *ngIf=\"\r\n !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n row['' ] !== 'true' && !inputConfig?.readonly \r\n \r\n \" \r\n [matMenuTriggerFor]=\"rowOptions\" \r\n [matMenuTriggerData]=\"{row:row}\" \r\n #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n @if (rowIsInEdit(row)) {\r\n <mat-icon color=\"primary\">\r\n edit\r\n </mat-icon> \r\n\r\n }@else {\r\n <mat-icon >\r\n {{\r\n t.menuOpen ? 'close' : 'more_horiz'\r\n }}\r\n \r\n </mat-icon>\r\n }\r\n \r\n\r\n </button>\r\n\r\n\r\n <mat-chip *ngIf=\"\r\n row['SYSTEM_KEY_IN_EDIT']\r\n \r\n \">\r\n In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n </mat-chip>\r\n\r\n </div>\r\n <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n class=\"cellClass\">\r\n <span >\r\n {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n </span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n \r\n *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n </table>\r\n \r\n <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n <div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n <div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n \r\n <div style=\"margin-top: 8px; text-align: center;\">\r\n <mat-icon style=\"font-size: 20px; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n <div style=\"margin-top: 8px;\">\r\n <strong>No items yet</strong>\r\n <p style=\"margin-top: 4px; font-size: 13px;\">\r\n <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n Each saved entry will appear as a row in this table.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"50\" />\r\n</div>\r\n}\r\n<mat-menu #colOptions=\"matMenu\">\r\n <ng-template matMenuContent >\r\n @for (label of allPossibleLabels; track label.label) {\r\n <button mat-menu-item (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n <mat-icon>\r\n {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n </mat-icon>\r\n {{label.label}}\r\n \r\n </button>\r\n \r\n }\r\n\r\n </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @if(!inputConfig?.readonly){\r\n <button mat-menu-item (click)=\"editItem(row)\">\r\n <mat-icon>\r\n {{'edit'}}\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n {{ 'Edit'}}\r\n </div>\r\n <div class=\"option-sub-text\">\r\n {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"copy(row)\">\r\n <mat-icon>\r\n content_copy\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n Duplicate\r\n </div>\r\n <div class=\"option-sub-text\">\r\n Create a copy with same values\r\n </div>\r\n </div>\r\n </button>\r\n @if(isAboutToDeleteRow(row)){\r\n <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n <mat-icon color=\"accent\">\r\n cancel\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n Cancel Deletion\r\n </div>\r\n <div class=\"option-sub-text\">\r\n Auto-deleting in {{ secondsCountDown()}} seconds...\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"deletion-progress-container\">\r\n <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n Deleting soon...\r\n </div>\r\n </div>\r\n }@else {\r\n <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n <mat-icon color=\"warn\">\r\n delete_outline\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n Delete \r\n </div>\r\n <div class=\"option-sub-text\">\r\n Will delete after 3 seconds (click to cancel)\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:14px;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:12px;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:11px;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media (max-width: 600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i4$3.MatChip, i5.MatIcon, i6$2.MatMenuTrigger, i9$1.MatSort, i10.MatTable, i10.MatHeaderCellDef, i10.MatHeaderRowDef, i10.MatColumnDef, i10.MatCellDef, i10.MatRowDef, i10.MatHeaderCell, i10.MatCell, i10.MatHeaderRow, i10.MatRow, i6$1.MatTooltip, i2$2.NgIf, Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)]] }); }
|
|
10759
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: "inputConfig", dataSource: "dataSource", applyOptionsTo: "applyOptionsTo", formGroup: "formGroup" }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo" }, ngImport: i0, template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n matSortDisableClear matSortDirection=\"desc\">\r\n @for (col of (displayedColumnsInOrder||[]); track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n </span>\r\n @if($last){\r\n <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" \r\n [matMenuTriggerData]=\"{}\" mat-icon-button>\r\n <mat-icon>\r\n label\r\n </mat-icon>\r\n </button>\r\n \r\n }\r\n </th>\r\n <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n \r\n [style.background]=\"\r\n returnBackground(row, getColConfig.columnsConfig?.[col])\r\n \" mat-cell *matCellDef=\"let row\">\r\n <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n <span *ngIf=\"\r\n !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n inputConfig?.multipleInputInEditId !== row['id']\">\r\n <strong>\r\n\r\n {{getCalculationFunction(row)}}\r\n </strong>\r\n\r\n </span>\r\n <button mat-icon-button\r\n [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n *ngIf=\"\r\n !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n row['' ] !== 'true' && !inputConfig?.readonly \r\n \r\n \" \r\n [matMenuTriggerFor]=\"rowOptions\" \r\n [matMenuTriggerData]=\"{row:row}\" \r\n #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n @if (rowIsInEdit(row)) {\r\n <mat-icon color=\"primary\">\r\n edit\r\n </mat-icon> \r\n\r\n }@else {\r\n <mat-icon >\r\n {{\r\n t.menuOpen ? 'close' : 'more_horiz'\r\n }}\r\n \r\n </mat-icon>\r\n }\r\n \r\n\r\n </button>\r\n\r\n\r\n <mat-chip *ngIf=\"\r\n row['SYSTEM_KEY_IN_EDIT']\r\n \r\n \">\r\n In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n </mat-chip>\r\n\r\n </div>\r\n <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n class=\"cellClass\">\r\n <span >\r\n {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n </span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n \r\n *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n </table>\r\n \r\n <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n <div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n <div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n \r\n <div style=\"margin-top: 8px; text-align: center;\">\r\n <mat-icon style=\"font-size: 20px; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n <div style=\"margin-top: 8px;\">\r\n <strong>No items yet</strong>\r\n <p style=\"margin-top: 4px; font-size: 13px;\">\r\n <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n Each saved entry will appear as a row in this table.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"50\" />\r\n</div>\r\n}\r\n<mat-menu #colOptions=\"matMenu\">\r\n <ng-template matMenuContent >\r\n @for (label of allPossibleLabels; track label.label) {\r\n <button mat-menu-item (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n <mat-icon>\r\n {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n </mat-icon>\r\n {{label.label}}\r\n \r\n </button>\r\n \r\n }\r\n\r\n </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @if(!inputConfig?.readonly){\r\n <button mat-menu-item (click)=\"editItem(row)\">\r\n <mat-icon>\r\n {{'edit'}}\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n {{ 'Edit'}}\r\n </div>\r\n <div class=\"option-sub-text\">\r\n {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"copy(row)\">\r\n <mat-icon>\r\n content_copy\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n Duplicate\r\n </div>\r\n <div class=\"option-sub-text\">\r\n Create a copy with same values\r\n </div>\r\n </div>\r\n </button>\r\n @if(isAboutToDeleteRow(row)){\r\n <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n <mat-icon color=\"accent\">\r\n cancel\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n Cancel Deletion\r\n </div>\r\n <div class=\"option-sub-text\">\r\n Auto-deleting in {{ secondsCountDown()}} seconds...\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"deletion-progress-container\">\r\n <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n Deleting soon...\r\n </div>\r\n </div>\r\n }@else {\r\n <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n <mat-icon color=\"warn\">\r\n delete_outline\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n Delete \r\n </div>\r\n <div class=\"option-sub-text\">\r\n Will delete after 3 seconds (click to cancel)\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:14px;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:12px;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:11px;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media (max-width: 600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i4$2.MatChip, i5.MatIcon, i6$2.MatMenuTrigger, i9$1.MatSort, i10.MatTable, i10.MatHeaderCellDef, i10.MatHeaderRowDef, i10.MatColumnDef, i10.MatCellDef, i10.MatRowDef, i10.MatHeaderCell, i10.MatCell, i10.MatHeaderRow, i10.MatRow, i6$1.MatTooltip, i2$2.NgIf, Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)]] }); }
|
|
10723
10760
|
}
|
|
10724
10761
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableViewComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)], resolveMetadata: FormatDataPipe => ({ decorators: [{
|
|
10725
10762
|
type: Component,
|
|
10726
|
-
args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule, FormatDataPipe], template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n matSortDisableClear matSortDirection=\"desc\">\r\n @for (col of (displayedColumnsInOrder||[]); track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n </span>\r\n @if($last){\r\n <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" \r\n [matMenuTriggerData]=\"{}\" mat-icon-button>\r\n <mat-icon>\r\n label\r\n </mat-icon>\r\n </button>\r\n
|
|
10763
|
+
args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule, FormatDataPipe], template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n matSortDisableClear matSortDirection=\"desc\">\r\n @for (col of (displayedColumnsInOrder||[]); track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n </span>\r\n @if($last){\r\n <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" \r\n [matMenuTriggerData]=\"{}\" mat-icon-button>\r\n <mat-icon>\r\n label\r\n </mat-icon>\r\n </button>\r\n \r\n }\r\n </th>\r\n <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n \r\n [style.background]=\"\r\n returnBackground(row, getColConfig.columnsConfig?.[col])\r\n \" mat-cell *matCellDef=\"let row\">\r\n <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n <span *ngIf=\"\r\n !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n inputConfig?.multipleInputInEditId !== row['id']\">\r\n <strong>\r\n\r\n {{getCalculationFunction(row)}}\r\n </strong>\r\n\r\n </span>\r\n <button mat-icon-button\r\n [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n *ngIf=\"\r\n !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n row['' ] !== 'true' && !inputConfig?.readonly \r\n \r\n \" \r\n [matMenuTriggerFor]=\"rowOptions\" \r\n [matMenuTriggerData]=\"{row:row}\" \r\n #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n @if (rowIsInEdit(row)) {\r\n <mat-icon color=\"primary\">\r\n edit\r\n </mat-icon> \r\n\r\n }@else {\r\n <mat-icon >\r\n {{\r\n t.menuOpen ? 'close' : 'more_horiz'\r\n }}\r\n \r\n </mat-icon>\r\n }\r\n \r\n\r\n </button>\r\n\r\n\r\n <mat-chip *ngIf=\"\r\n row['SYSTEM_KEY_IN_EDIT']\r\n \r\n \">\r\n In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n </mat-chip>\r\n\r\n </div>\r\n <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n class=\"cellClass\">\r\n <span >\r\n {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n </span>\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n \r\n *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n </table>\r\n \r\n <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n <div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n <div style=\"\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n padding-top: 16px;\r\n padding-bottom: 16px;\r\n\r\n display: flex;\r\n justify-content: center;\r\n opacity: 0.6;\r\n font-size: 13px;\r\n \">\r\n \r\n <div style=\"margin-top: 8px; text-align: center;\">\r\n <mat-icon style=\"font-size: 20px; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n <div style=\"margin-top: 8px;\">\r\n <strong>No items yet</strong>\r\n <p style=\"margin-top: 4px; font-size: 13px;\">\r\n <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n Each saved entry will appear as a row in this table.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"50\" />\r\n</div>\r\n}\r\n<mat-menu #colOptions=\"matMenu\">\r\n <ng-template matMenuContent >\r\n @for (label of allPossibleLabels; track label.label) {\r\n <button mat-menu-item (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n <mat-icon>\r\n {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n </mat-icon>\r\n {{label.label}}\r\n \r\n </button>\r\n \r\n }\r\n\r\n </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @if(!inputConfig?.readonly){\r\n <button mat-menu-item (click)=\"editItem(row)\">\r\n <mat-icon>\r\n {{'edit'}}\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n {{ 'Edit'}}\r\n </div>\r\n <div class=\"option-sub-text\">\r\n {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button mat-menu-item (click)=\"copy(row)\">\r\n <mat-icon>\r\n content_copy\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n Duplicate\r\n </div>\r\n <div class=\"option-sub-text\">\r\n Create a copy with same values\r\n </div>\r\n </div>\r\n </button>\r\n @if(isAboutToDeleteRow(row)){\r\n <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n <mat-icon color=\"accent\">\r\n cancel\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n Cancel Deletion\r\n </div>\r\n <div class=\"option-sub-text\">\r\n Auto-deleting in {{ secondsCountDown()}} seconds...\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"deletion-progress-container\">\r\n <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n Deleting soon...\r\n </div>\r\n </div>\r\n }@else {\r\n <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n <mat-icon color=\"warn\">\r\n delete_outline\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n Delete \r\n </div>\r\n <div class=\"option-sub-text\">\r\n Will delete after 3 seconds (click to cancel)\r\n </div>\r\n </div>\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:14px;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:12px;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:11px;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media (max-width: 600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"] }]
|
|
10727
10764
|
}], ctorParameters: null, propDecorators: { inputConfig: [{
|
|
10728
10765
|
type: Input
|
|
10729
10766
|
}], dataSource: [{
|
|
@@ -10867,7 +10904,7 @@ class MultipleInputTableEditComponent {
|
|
|
10867
10904
|
return !!this.inputConfig?.formIsOpen && !!this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value;
|
|
10868
10905
|
}
|
|
10869
10906
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10870
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "\r\n<mat-card appearance=\"outlined\" style=\" margin-top: 8px;background:var(--mat-sys-surface-container)\" class=\" mat-elevation-z4\">\r\n <mat-card-content>\r\n <div class=\"list\" (cdkDropListDropped)=\"dropItems($event)\"\r\n \r\n [cdkDropListData]=\"innerInputs\" cdkDropList\r\n \r\n #InputList=\"cdkDropList\" class=\"row\">\r\n @for( innerInput of innerInputs|| [];track innerInput.id\r\n ){\r\n <ng-container>\r\n @if(editorMode){\r\n <mat-card (mouseover)=\"activeInput = innerInput.id\" *ngIf=\"!!formGroup\" cdkDrag\r\n (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n [class.inputCardElevated]=\"activeInput ===innerInput.id\"\r\n [class.inputCard]=\"activeInput !==innerInput.id\"\r\n [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n <ng-container *ngComponentOutlet=\"InputComponent; \r\n inputs: {\r\n inputConfig: innerInput,\r\n formGroup: formGroup,\r\n formBuilderFunctions: formBuilderFunctions,\r\n }\">\r\n </ng-container>\r\n <mat-card-actions *ngIf=\"activeInput === innerInput.id\">\r\n <span class=\"spacer\"></span>\r\n <button [matTooltip]=\"'Edit Input: ' + innerInput.label \"\r\n (click)=\"editInput(innerInput)\" mat-icon-button>\r\n <mat-icon>\r\n edit\r\n </mat-icon>\r\n\r\n </button>\r\n @if(!!inputWillBeRemovedIn(innerInput.id) ){\r\n <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\r\n (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\r\n <div style=\"display: flex; align-items: center;\">\r\n <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n [value]=\"((inputWillBeRemovedIn(innerInput.id)||0)/5)*100\">\r\n </mat-progress-spinner>\r\n\r\n {{overId === innerInput.id ? 'Click to cancel':'Deleting in'}}\r\n {{inputWillBeRemovedIn(innerInput.id)}}\r\n </div>\r\n\r\n </button>\r\n\r\n }@else if(inputConfig?.systemDefault !== true && innerInput.systemDefault !== true) {\r\n <button [matTooltip]=\"'Delete input ' + innerInput.label \"\r\n (click)=\"removeInput(innerInput)\" mat-icon-button>\r\n\r\n <mat-icon>\r\n delete\r\n </mat-icon>\r\n </button>\r\n }\r\n |\r\n <button *ngIf=\"!!innerInput.showAsLabel && innerInput.dataType=== 'number' ||!!innerInput.showAsLabel && innerInput.type === 'number'\"\r\n [matMenuTriggerFor]=\"calculationMenu\" \r\n [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\r\n [matTooltip]=\"'calculate sum,avg,min,max'\"\r\n mat-icon-button>\r\n\r\n <mat-icon>\r\n calculate\r\n </mat-icon>\r\n </button>\r\n <button [color]=\"innerInput.showAsLabel? 'primary' : ''\"\r\n (click)=\"toggleLabel(innerInput)\"\r\n [matTooltip]=\"innerInput.showAsLabel? 'Hide as label' : 'Show as label'\"\r\n mat-icon-button>\r\n\r\n <mat-icon>\r\n label\r\n </mat-icon>\r\n </button>\r\n <span class=\"spacer\"></span>\r\n </mat-card-actions>\r\n </mat-card>\r\n }@else {\r\n \r\n <div [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n <ng-container *ngComponentOutlet=\"InputComponent; \r\n inputs: {\r\n inputConfig: innerInput,\r\n formGroup: formGroup,\r\n formBuilderFunctions: formBuilderFunctions,\r\n }\">\r\n </ng-container>\r\n </div>\r\n \r\n }\r\n\r\n </ng-container>\r\n }\r\n @if (!!editorMode && ( innerInputs|| []).length === 0) {\r\n\r\n <div class=\"tree-instructions\">\r\n <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n <strong>Add Form Input</strong>\r\n <br>\r\n Manage your list by adding, editing, or removing items. Each item is customizable through a form.\r\n </span>\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n </mat-card-content>\r\n @if ( ( innerInputs|| []).length !== 0) {\r\n <br>\r\n <mat-divider></mat-divider>\r\n <mat-card-actions align=\"end\" class=\"ion-margin-top\">\r\n <button [color]=\"areYouSure ? 'warn' : ''\" class=\"ion-margin-end\"\r\n [style.text-decoration]=\"areYouSure ? 'underline' : ''\" mat-flat-button\r\n (click)=\"closeMultipleInput()\">\r\n {{ areYouSure ? \"leave without saving\" : \"cancel\" }}\r\n </button>\r\n @if(!inputConfig?.readonly){\r\n <button [disabled]=\"!!formInvalid\" style=\"min-width: 10em\" color=\"primary\" (click)=\"saveMultipleInputForm()\" class=\"ion-padding-horizontal\"\r\n mat-raised-button>\r\n {{\r\n rowInUpdate\r\n ? \"Update\"\r\n : \"save\"\r\n }}\r\n </button>\r\n }\r\n\r\n </mat-card-actions>\r\n }\r\n\r\n</mat-card>\r\n<mat-menu #calculationMenu=\"matMenu\">\r\n <ng-template matMenuContent let-inputId=\"sectionId\">\r\n <button (click)=\"toggleFunction(func,inputId)\" mat-menu-item *ngFor=\"let func of calculationFunctions\">\r\n {{ func }}\r\n <mat-icon color=\"primary\" *ngIf=\"selectedFunction(func)\">check_circle</mat-icon>\r\n </button>\r\n </ng-template>\r\n</mat-menu> ", styles: [".inputCardElevated{background:var(--mat-sys-surface-container, var(--mat-app-surface));box-shadow:var(--mdc-elevated-card-container-elevation)}.inputCard{box-shadow:none}.list{min-height:60px;display:block}.box{padding:4px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.custom-placeholder{background:#ccc;border:dotted 3px #999;min-width:100%;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }] }); }
|
|
10907
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "\r\n<mat-card appearance=\"outlined\" style=\" margin-top: 8px;background:var(--mat-sys-surface-container)\" class=\" mat-elevation-z4\">\r\n <mat-card-content>\r\n <div class=\"list\" (cdkDropListDropped)=\"dropItems($event)\"\r\n \r\n [cdkDropListData]=\"innerInputs\" cdkDropList\r\n \r\n #InputList=\"cdkDropList\" class=\"row\">\r\n @for( innerInput of innerInputs|| [];track innerInput.id\r\n ){\r\n <ng-container>\r\n @if(editorMode){\r\n <mat-card (mouseover)=\"activeInput = innerInput.id\" *ngIf=\"!!formGroup\" cdkDrag\r\n (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n [class.inputCardElevated]=\"activeInput ===innerInput.id\"\r\n [class.inputCard]=\"activeInput !==innerInput.id\"\r\n [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n <ng-container *ngComponentOutlet=\"InputComponent; \r\n inputs: {\r\n inputConfig: innerInput,\r\n formGroup: formGroup,\r\n formBuilderFunctions: formBuilderFunctions,\r\n }\">\r\n </ng-container>\r\n <mat-card-actions *ngIf=\"activeInput === innerInput.id\">\r\n <span class=\"spacer\"></span>\r\n <button [matTooltip]=\"'Edit Input: ' + innerInput.label \"\r\n (click)=\"editInput(innerInput)\" mat-icon-button>\r\n <mat-icon>\r\n edit\r\n </mat-icon>\r\n\r\n </button>\r\n @if(!!inputWillBeRemovedIn(innerInput.id) ){\r\n <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\r\n (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\r\n <div style=\"display: flex; align-items: center;\">\r\n <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n [value]=\"((inputWillBeRemovedIn(innerInput.id)||0)/5)*100\">\r\n </mat-progress-spinner>\r\n\r\n {{overId === innerInput.id ? 'Click to cancel':'Deleting in'}}\r\n {{inputWillBeRemovedIn(innerInput.id)}}\r\n </div>\r\n\r\n </button>\r\n\r\n }@else if(inputConfig?.systemDefault !== true && innerInput.systemDefault !== true) {\r\n <button [matTooltip]=\"'Delete input ' + innerInput.label \"\r\n (click)=\"removeInput(innerInput)\" mat-icon-button>\r\n\r\n <mat-icon>\r\n delete\r\n </mat-icon>\r\n </button>\r\n }\r\n |\r\n <button *ngIf=\"!!innerInput.showAsLabel && innerInput.dataType=== 'number' ||!!innerInput.showAsLabel && innerInput.type === 'number'\"\r\n [matMenuTriggerFor]=\"calculationMenu\" \r\n [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\r\n [matTooltip]=\"'calculate sum,avg,min,max'\"\r\n mat-icon-button>\r\n\r\n <mat-icon>\r\n calculate\r\n </mat-icon>\r\n </button>\r\n <button [color]=\"innerInput.showAsLabel? 'primary' : ''\"\r\n (click)=\"toggleLabel(innerInput)\"\r\n [matTooltip]=\"innerInput.showAsLabel? 'Hide as label' : 'Show as label'\"\r\n mat-icon-button>\r\n\r\n <mat-icon>\r\n label\r\n </mat-icon>\r\n </button>\r\n <span class=\"spacer\"></span>\r\n </mat-card-actions>\r\n </mat-card>\r\n }@else {\r\n \r\n <div [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n <ng-container *ngComponentOutlet=\"InputComponent; \r\n inputs: {\r\n inputConfig: innerInput,\r\n formGroup: formGroup,\r\n formBuilderFunctions: formBuilderFunctions,\r\n }\">\r\n </ng-container>\r\n </div>\r\n \r\n }\r\n\r\n </ng-container>\r\n }\r\n @if (!!editorMode && ( innerInputs|| []).length === 0) {\r\n\r\n <div class=\"tree-instructions\">\r\n <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n <strong>Add Form Input</strong>\r\n <br>\r\n Manage your list by adding, editing, or removing items. Each item is customizable through a form.\r\n </span>\r\n </div>\r\n\r\n }\r\n\r\n </div>\r\n </mat-card-content>\r\n @if ( ( innerInputs|| []).length !== 0) {\r\n <br>\r\n <mat-divider></mat-divider>\r\n <mat-card-actions align=\"end\" class=\"ion-margin-top\">\r\n <button [color]=\"areYouSure ? 'warn' : ''\" class=\"ion-margin-end\"\r\n [style.text-decoration]=\"areYouSure ? 'underline' : ''\" mat-flat-button\r\n (click)=\"closeMultipleInput()\">\r\n {{ areYouSure ? \"leave without saving\" : \"cancel\" }}\r\n </button>\r\n @if(!inputConfig?.readonly){\r\n <button [disabled]=\"!!formInvalid\" style=\"min-width: 10em\" color=\"primary\" (click)=\"saveMultipleInputForm()\" class=\"ion-padding-horizontal\"\r\n mat-raised-button>\r\n {{\r\n rowInUpdate\r\n ? \"Update\"\r\n : \"save\"\r\n }}\r\n </button>\r\n }\r\n\r\n </mat-card-actions>\r\n }\r\n\r\n</mat-card>\r\n<mat-menu #calculationMenu=\"matMenu\">\r\n <ng-template matMenuContent let-inputId=\"sectionId\">\r\n <button (click)=\"toggleFunction(func,inputId)\" mat-menu-item *ngFor=\"let func of calculationFunctions\">\r\n {{ func }}\r\n <mat-icon color=\"primary\" *ngIf=\"selectedFunction(func)\">check_circle</mat-icon>\r\n </button>\r\n </ng-template>\r\n</mat-menu> ", styles: [".inputCardElevated{background:var(--mat-sys-surface-container, var(--mat-app-surface));box-shadow:var(--mdc-elevated-card-container-elevation)}.inputCard{box-shadow:none}.list{min-height:60px;display:block}.box{padding:4px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.custom-placeholder{background:#ccc;border:dotted 3px #999;min-width:100%;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }] }); }
|
|
10871
10908
|
}
|
|
10872
10909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableEditComponent, decorators: [{
|
|
10873
10910
|
type: Component,
|
|
@@ -11694,7 +11731,7 @@ class DocumentPickerReactiveInputComponent extends BaseCustomInput {
|
|
|
11694
11731
|
})).subscribe();
|
|
11695
11732
|
}
|
|
11696
11733
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DocumentPickerReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11697
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DocumentPickerReactiveInputComponent, isStandalone: true, selector: "lib-document-picker-reactive-input", inputs: { formBuilderFunctions: "formBuilderFunctions", inputConfig: "inputConfig" }, host: { properties: { "lib-document-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DocumentPickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<mat-card>\r\n\r\n @if(_loadingCols || loadingData || loadingSelected ){\r\n <div style=\"display: flex; justify-content: center; align-items: center;padding:28px \">\r\n <mat-spinner [diameter]=\"50\"></mat-spinner>\r\n </div>\r\n\r\n }@else if (this.dataLoadingError ) {\r\n <mat-toolbar color=\"warn\">\r\n <mat-icon>error</mat-icon>\r\n <span>{{this.dataLoadingError}}</span>\r\n </mat-toolbar>\r\n }@else {\r\n <div class=\"table-container\">\r\n <div class=\"search-container\">\r\n @if (!inputConfig?.disabled && !inputConfig?.readonly) {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n <input matInput placeholder=\"search\" [formControl]=\"searchFormControl\" (change)=\"inputSearch($event)\"\r\n value=\"Sushi\">\r\n <mat-icon matSuffix>\r\n search\r\n\r\n </mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n\r\n\r\n </div>\r\n <table mat-table [dataSource]=\"paginatedData||[]\" class=\"example-table\" matSort matSortActive=\"created\"\r\n matSortDisableClear matSortDirection=\"desc\">\r\n @for (col of _cols; track col.formControlName) {\r\n <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n\r\n\r\n {{col.label}}\r\n\r\n\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\"\r\n [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n @if(col.formControlName ==='icons'){\r\n <mat-icon style=\"color:var(--mat-sys-primary)\">description</mat-icon>\r\n }@else if(col.formControlName ==='actions'){\r\n @if((row['_id'] === value || row['id'] === value)&&!!value){\r\n <button (click)=\"selectRow(row)\" [disabled]=\"!!inputConfig?.disabled || !!inputConfig?.readonly\"\r\n [matTooltip]=\"'Click to clear ' + row['reference'] + ' selection'\" matTooltipPosition=\"after\"\r\n class=\"selection-button\" mat-flat-button color=\"primary\">\r\n\r\n selected\r\n <mat-icon> check_circle </mat-icon>\r\n </button>\r\n\r\n }@else if(!inputConfig?.disabled && !inputConfig?.readonly){\r\n\r\n <button (click)=\"selectRow(row)\" [matTooltip]=\"'Click to select ' + row['reference']\"\r\n matTooltipPosition=\"after\" class=\"selection-button\" mat-raised-button color=\"primary\">\r\n\r\n select\r\n <mat-icon>\r\n radio_button_unchecked\r\n </mat-icon>\r\n </button>\r\n }\r\n\r\n\r\n }@else {\r\n <span\r\n [style.color]=\"(row['_id'] === value || row['id'] === value) && !!value?'var(--mat-sys-primary)':''\">\r\n {{row[col.formControlName]|formatData:col.type}}\r\n </span>\r\n\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row class=\"data-row\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n </table>\r\n </div>\r\n <mat-divider></mat-divider>\r\n @if (!inputConfig?.disabled && !inputConfig?.readonly) {\r\n <mat-paginator [length]=\"docLength\" (page)=\"applyPagination($event)\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\"\r\n [pageSizeOptions]=\"[5,10, 30, 50, 100]\" aria-label=\"Select workflow document\"></mat-paginator>\r\n }\r\n\r\n }\r\n</mat-card>", styles: [".table-container{position:relative;overflow:auto}mat-form-field.search-field{width:100%;--mdc-filled-text-field-container-color:none}table{width:fit-content}td{white-space:pre}.selection-button{height:28px}.search-container{display:flex!important;align-items:center!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type:
|
|
11734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DocumentPickerReactiveInputComponent, isStandalone: true, selector: "lib-document-picker-reactive-input", inputs: { formBuilderFunctions: "formBuilderFunctions", inputConfig: "inputConfig" }, host: { properties: { "lib-document-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DocumentPickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<mat-card>\r\n\r\n @if(_loadingCols || loadingData || loadingSelected ){\r\n <div style=\"display: flex; justify-content: center; align-items: center;padding:28px \">\r\n <mat-spinner [diameter]=\"50\"></mat-spinner>\r\n </div>\r\n\r\n }@else if (this.dataLoadingError ) {\r\n <mat-toolbar color=\"warn\">\r\n <mat-icon>error</mat-icon>\r\n <span>{{this.dataLoadingError}}</span>\r\n </mat-toolbar>\r\n }@else {\r\n <div class=\"table-container\">\r\n <div class=\"search-container\">\r\n @if (!inputConfig?.disabled && !inputConfig?.readonly) {\r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n <input matInput placeholder=\"search\" [formControl]=\"searchFormControl\" (change)=\"inputSearch($event)\"\r\n value=\"Sushi\">\r\n <mat-icon matSuffix>\r\n search\r\n\r\n </mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n\r\n\r\n </div>\r\n <table mat-table [dataSource]=\"paginatedData||[]\" class=\"example-table\" matSort matSortActive=\"created\"\r\n matSortDisableClear matSortDirection=\"desc\">\r\n @for (col of _cols; track col.formControlName) {\r\n <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n <th mat-header-cell *matHeaderCellDef\r\n [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n\r\n\r\n {{col.label}}\r\n\r\n\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\"\r\n [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n @if(col.formControlName ==='icons'){\r\n <mat-icon style=\"color:var(--mat-sys-primary)\">description</mat-icon>\r\n }@else if(col.formControlName ==='actions'){\r\n @if((row['_id'] === value || row['id'] === value)&&!!value){\r\n <button (click)=\"selectRow(row)\" [disabled]=\"!!inputConfig?.disabled || !!inputConfig?.readonly\"\r\n [matTooltip]=\"'Click to clear ' + row['reference'] + ' selection'\" matTooltipPosition=\"after\"\r\n class=\"selection-button\" mat-flat-button color=\"primary\">\r\n\r\n selected\r\n <mat-icon> check_circle </mat-icon>\r\n </button>\r\n\r\n }@else if(!inputConfig?.disabled && !inputConfig?.readonly){\r\n\r\n <button (click)=\"selectRow(row)\" [matTooltip]=\"'Click to select ' + row['reference']\"\r\n matTooltipPosition=\"after\" class=\"selection-button\" mat-raised-button color=\"primary\">\r\n\r\n select\r\n <mat-icon>\r\n radio_button_unchecked\r\n </mat-icon>\r\n </button>\r\n }\r\n\r\n\r\n }@else {\r\n <span\r\n [style.color]=\"(row['_id'] === value || row['id'] === value) && !!value?'var(--mat-sys-primary)':''\">\r\n {{row[col.formControlName]|formatData:col.type}}\r\n </span>\r\n\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row class=\"data-row\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n </table>\r\n </div>\r\n <mat-divider></mat-divider>\r\n @if (!inputConfig?.disabled && !inputConfig?.readonly) {\r\n <mat-paginator [length]=\"docLength\" (page)=\"applyPagination($event)\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\"\r\n [pageSizeOptions]=\"[5,10, 30, 50, 100]\" aria-label=\"Select workflow document\"></mat-paginator>\r\n }\r\n\r\n }\r\n</mat-card>", styles: [".table-container{position:relative;overflow:auto}mat-form-field.search-field{width:100%;--mdc-filled-text-field-container-color:none}table{width:fit-content}td{white-space:pre}.selection-button{height:28px}.search-container{display:flex!important;align-items:center!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: FormatDataPipe, name: "formatData" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
11698
11735
|
}
|
|
11699
11736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DocumentPickerReactiveInputComponent, decorators: [{
|
|
11700
11737
|
type: Component,
|
|
@@ -11867,7 +11904,7 @@ class PointsCreationComponent {
|
|
|
11867
11904
|
return getInputIllustration(input.element);
|
|
11868
11905
|
}
|
|
11869
11906
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PointsCreationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11870
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PointsCreationComponent, isStandalone: true, selector: "app-points-creation", inputs: { value: "value", inputConfig: "inputConfig" }, outputs: { pointsChange: "pointsChange" }, ngImport: i0, template: "<div style=\"resize: both; overflow: auto;\">\r\n @if(!points || points.length === 1) {\r\n <h5 style=\"margin-bottom: 5px; margin-top: 0px;\">\r\n \u2139\uFE0F To add a scoring item:\r\n </h5>\r\n <ol>\r\n <li>\r\n <strong>Enter Description:</strong>\r\n <ul style=\"margin-top: 5px; margin-bottom: 5px; padding-left: 20px; list-style-type: disc;\">\r\n <li>\r\n To <strong>link</strong> a field: You <strong>must select it</strong> from the list first (you can\r\n edit it after).\r\n </li>\r\n <li>\r\n For a <strong>custom</strong> point: <strong>Ignore the list</strong> and just type your own\r\n description.\r\n </li>\r\n </ul>\r\n </li>\r\n <li>\r\n <strong>Set Details:</strong>\r\n Assign the <strong>Points</strong> and select the <strong>Point Type</strong>.\r\n </li>\r\n <li>\r\n <strong>Save:</strong>\r\n Click the <strong>\"Save\"</strong> button to add the item.\r\n </li>\r\n </ol>\r\n }\r\n <table mat-table [dataSource]=\"points\" matSort>\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef>Description</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow ) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <textarea [matAutocomplete]=\"auto\" [(ngModel)]=\"pointRow.description\" matInput cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"1\" placeholder=\"Enter point description\"></textarea>\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n @for (input of filteredInputs; track input.id) {\r\n <mat-option [value]=\"input.label\" (click)=\"selectActiveInput(input)\">\r\n <div style=\"display: flex;align-items: center;gap:8px\">\r\n <img height=\"24px\" width=\"24px\" [src]=\" getInputIllustration(input) \"\r\n [alt]=\"input.label\">\r\n <span>\r\n <div style=\"font-size: 12px;\">\r\n <strong>\r\n {{input.label}}\r\n </strong>\r\n\r\n </div>\r\n <div\r\n style=\"font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n {{input.hintLabel || input.formControlName}}\r\n </div>\r\n </span>\r\n\r\n </div>\r\n </mat-option>\r\n }\r\n\r\n </mat-autocomplete>\r\n\r\n </mat-form-field>\r\n\r\n\r\n }@else {\r\n\r\n {{ element.description }}}\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"totalPoints\">\r\n <th mat-header-cell *matHeaderCellDef>Points</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <input matInput \r\n [(ngModel)]=\"pointRow.totalPoints\"\r\n placeholder=\"Enter points , eg 50\" type=\"number\">\r\n\r\n </mat-form-field>\r\n\r\n \r\n }@else {\r\n\r\n {{ element.totalPoints }}\r\n }\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"pointType\">\r\n <th mat-header-cell *matHeaderCellDef>Point Type</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <mat-select (selectionChange)=\"selectPointType($event)\" ngDefaultControl \r\n \r\n [value]=\"pointRow.pointType\"\r\n \r\n placeholder=\"Select\">\r\n @for (type of inputConfig?.adjudicationPointTypes || []; track $index) {\r\n <mat-option [value]=\"type\">{{type}}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n \r\n }@else {\r\n\r\n {{ element.pointType }}\r\n }\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"actions\" [stickyEnd]=\"true\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span style=\"display: flex; justify-content: center;\">\r\n @if (element.isEditRow) {\r\n <button [disabled]=\"this.inputConfig?.disabled || this.inputConfig?.readonly\" matTooltip=\"Save Point in Edit\" color=\"primary\" style=\"white-space: nowrap;\r\n height: 26px;\r\n margin-bottom: 0px;\" mat-flat-button (click)=\"savePoints()\" [disabled]=\"!pointInEditIsValid\">\r\n\r\n <span style=\"font-size: 14px;\">\r\n save\r\n </span>\r\n\r\n\r\n </button>\r\n\r\n }@else {\r\n <button mat-icon-button (click)=\"edit(element)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button (click)=\"remove(element)\">\r\n <mat-icon>delete_forever</mat-icon>\r\n\r\n </button>\r\n }\r\n\r\n </span>\r\n\r\n\r\n\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"cols\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: cols\"></tr>\r\n </table>\r\n</div>", styles: [".input-add{width:100%}th,td{padding:4px}mat-hint{text-align:start}mat-form-field{background:#f0ffffbe}.glass{background:#ffffff40!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.mat-column-totalPoints{width:100px!important;max-width:100px!important}.mat-column-pointType{width:180px!important;max-width:180px!important}.mat-column-actions{width:78px!important;max-width:78px!important}li{font-size:12px}ol{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i1$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i9$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
11907
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: PointsCreationComponent, isStandalone: true, selector: "app-points-creation", inputs: { value: "value", inputConfig: "inputConfig" }, outputs: { pointsChange: "pointsChange" }, ngImport: i0, template: "<div style=\"resize: both; overflow: auto;\">\r\n @if(!points || points.length === 1) {\r\n <h5 style=\"margin-bottom: 5px; margin-top: 0px;\">\r\n \u2139\uFE0F To add a scoring item:\r\n </h5>\r\n <ol>\r\n <li>\r\n <strong>Enter Description:</strong>\r\n <ul style=\"margin-top: 5px; margin-bottom: 5px; padding-left: 20px; list-style-type: disc;\">\r\n <li>\r\n To <strong>link</strong> a field: You <strong>must select it</strong> from the list first (you can\r\n edit it after).\r\n </li>\r\n <li>\r\n For a <strong>custom</strong> point: <strong>Ignore the list</strong> and just type your own\r\n description.\r\n </li>\r\n </ul>\r\n </li>\r\n <li>\r\n <strong>Set Details:</strong>\r\n Assign the <strong>Points</strong> and select the <strong>Point Type</strong>.\r\n </li>\r\n <li>\r\n <strong>Save:</strong>\r\n Click the <strong>\"Save\"</strong> button to add the item.\r\n </li>\r\n </ol>\r\n }\r\n <table mat-table [dataSource]=\"points\" matSort>\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef>Description</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow ) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <textarea [matAutocomplete]=\"auto\" [(ngModel)]=\"pointRow.description\" matInput cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"1\" placeholder=\"Enter point description\"></textarea>\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n @for (input of filteredInputs; track input.id) {\r\n <mat-option [value]=\"input.label\" (click)=\"selectActiveInput(input)\">\r\n <div style=\"display: flex;align-items: center;gap:8px\">\r\n <img height=\"24px\" width=\"24px\" [src]=\" getInputIllustration(input) \"\r\n [alt]=\"input.label\">\r\n <span>\r\n <div style=\"font-size: 12px;\">\r\n <strong>\r\n {{input.label}}\r\n </strong>\r\n\r\n </div>\r\n <div\r\n style=\"font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n {{input.hintLabel || input.formControlName}}\r\n </div>\r\n </span>\r\n\r\n </div>\r\n </mat-option>\r\n }\r\n\r\n </mat-autocomplete>\r\n\r\n </mat-form-field>\r\n\r\n\r\n }@else {\r\n\r\n {{ element.description }}}\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"totalPoints\">\r\n <th mat-header-cell *matHeaderCellDef>Points</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <input matInput \r\n [(ngModel)]=\"pointRow.totalPoints\"\r\n placeholder=\"Enter points , eg 50\" type=\"number\">\r\n\r\n </mat-form-field>\r\n\r\n \r\n }@else {\r\n\r\n {{ element.totalPoints }}\r\n }\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"pointType\">\r\n <th mat-header-cell *matHeaderCellDef>Point Type</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <mat-select (selectionChange)=\"selectPointType($event)\" ngDefaultControl \r\n \r\n [value]=\"pointRow.pointType\"\r\n \r\n placeholder=\"Select\">\r\n @for (type of inputConfig?.adjudicationPointTypes || []; track $index) {\r\n <mat-option [value]=\"type\">{{type}}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n \r\n }@else {\r\n\r\n {{ element.pointType }}\r\n }\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"actions\" [stickyEnd]=\"true\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span style=\"display: flex; justify-content: center;\">\r\n @if (element.isEditRow) {\r\n <button [disabled]=\"this.inputConfig?.disabled || this.inputConfig?.readonly\" matTooltip=\"Save Point in Edit\" color=\"primary\" style=\"white-space: nowrap;\r\n height: 26px;\r\n margin-bottom: 0px;\" mat-flat-button (click)=\"savePoints()\" [disabled]=\"!pointInEditIsValid\">\r\n\r\n <span style=\"font-size: 14px;\">\r\n save\r\n </span>\r\n\r\n\r\n </button>\r\n\r\n }@else {\r\n <button mat-icon-button (click)=\"edit(element)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button (click)=\"remove(element)\">\r\n <mat-icon>delete_forever</mat-icon>\r\n\r\n </button>\r\n }\r\n\r\n </span>\r\n\r\n\r\n\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"cols\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: cols\"></tr>\r\n </table>\r\n</div>", styles: [".input-add{width:100%}th,td{padding:4px}mat-hint{text-align:start}.glass{background:#ffffff40!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.mat-column-totalPoints{width:100px!important;max-width:100px!important}.mat-column-pointType{width:180px!important;max-width:180px!important}.mat-column-actions{width:78px!important;max-width:78px!important}li{font-size:12px}ol{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i1$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i9$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
11871
11908
|
}
|
|
11872
11909
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PointsCreationComponent, decorators: [{
|
|
11873
11910
|
type: Component,
|
|
@@ -11876,7 +11913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
11876
11913
|
MatModulesModule,
|
|
11877
11914
|
ReactiveFormsModule,
|
|
11878
11915
|
FormsModule
|
|
11879
|
-
], template: "<div style=\"resize: both; overflow: auto;\">\r\n @if(!points || points.length === 1) {\r\n <h5 style=\"margin-bottom: 5px; margin-top: 0px;\">\r\n \u2139\uFE0F To add a scoring item:\r\n </h5>\r\n <ol>\r\n <li>\r\n <strong>Enter Description:</strong>\r\n <ul style=\"margin-top: 5px; margin-bottom: 5px; padding-left: 20px; list-style-type: disc;\">\r\n <li>\r\n To <strong>link</strong> a field: You <strong>must select it</strong> from the list first (you can\r\n edit it after).\r\n </li>\r\n <li>\r\n For a <strong>custom</strong> point: <strong>Ignore the list</strong> and just type your own\r\n description.\r\n </li>\r\n </ul>\r\n </li>\r\n <li>\r\n <strong>Set Details:</strong>\r\n Assign the <strong>Points</strong> and select the <strong>Point Type</strong>.\r\n </li>\r\n <li>\r\n <strong>Save:</strong>\r\n Click the <strong>\"Save\"</strong> button to add the item.\r\n </li>\r\n </ol>\r\n }\r\n <table mat-table [dataSource]=\"points\" matSort>\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef>Description</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow ) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <textarea [matAutocomplete]=\"auto\" [(ngModel)]=\"pointRow.description\" matInput cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"1\" placeholder=\"Enter point description\"></textarea>\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n @for (input of filteredInputs; track input.id) {\r\n <mat-option [value]=\"input.label\" (click)=\"selectActiveInput(input)\">\r\n <div style=\"display: flex;align-items: center;gap:8px\">\r\n <img height=\"24px\" width=\"24px\" [src]=\" getInputIllustration(input) \"\r\n [alt]=\"input.label\">\r\n <span>\r\n <div style=\"font-size: 12px;\">\r\n <strong>\r\n {{input.label}}\r\n </strong>\r\n\r\n </div>\r\n <div\r\n style=\"font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n {{input.hintLabel || input.formControlName}}\r\n </div>\r\n </span>\r\n\r\n </div>\r\n </mat-option>\r\n }\r\n\r\n </mat-autocomplete>\r\n\r\n </mat-form-field>\r\n\r\n\r\n }@else {\r\n\r\n {{ element.description }}}\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"totalPoints\">\r\n <th mat-header-cell *matHeaderCellDef>Points</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <input matInput \r\n [(ngModel)]=\"pointRow.totalPoints\"\r\n placeholder=\"Enter points , eg 50\" type=\"number\">\r\n\r\n </mat-form-field>\r\n\r\n \r\n }@else {\r\n\r\n {{ element.totalPoints }}\r\n }\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"pointType\">\r\n <th mat-header-cell *matHeaderCellDef>Point Type</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <mat-select (selectionChange)=\"selectPointType($event)\" ngDefaultControl \r\n \r\n [value]=\"pointRow.pointType\"\r\n \r\n placeholder=\"Select\">\r\n @for (type of inputConfig?.adjudicationPointTypes || []; track $index) {\r\n <mat-option [value]=\"type\">{{type}}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n \r\n }@else {\r\n\r\n {{ element.pointType }}\r\n }\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"actions\" [stickyEnd]=\"true\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span style=\"display: flex; justify-content: center;\">\r\n @if (element.isEditRow) {\r\n <button [disabled]=\"this.inputConfig?.disabled || this.inputConfig?.readonly\" matTooltip=\"Save Point in Edit\" color=\"primary\" style=\"white-space: nowrap;\r\n height: 26px;\r\n margin-bottom: 0px;\" mat-flat-button (click)=\"savePoints()\" [disabled]=\"!pointInEditIsValid\">\r\n\r\n <span style=\"font-size: 14px;\">\r\n save\r\n </span>\r\n\r\n\r\n </button>\r\n\r\n }@else {\r\n <button mat-icon-button (click)=\"edit(element)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button (click)=\"remove(element)\">\r\n <mat-icon>delete_forever</mat-icon>\r\n\r\n </button>\r\n }\r\n\r\n </span>\r\n\r\n\r\n\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"cols\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: cols\"></tr>\r\n </table>\r\n</div>", styles: [".input-add{width:100%}th,td{padding:4px}mat-hint{text-align:start}
|
|
11916
|
+
], template: "<div style=\"resize: both; overflow: auto;\">\r\n @if(!points || points.length === 1) {\r\n <h5 style=\"margin-bottom: 5px; margin-top: 0px;\">\r\n \u2139\uFE0F To add a scoring item:\r\n </h5>\r\n <ol>\r\n <li>\r\n <strong>Enter Description:</strong>\r\n <ul style=\"margin-top: 5px; margin-bottom: 5px; padding-left: 20px; list-style-type: disc;\">\r\n <li>\r\n To <strong>link</strong> a field: You <strong>must select it</strong> from the list first (you can\r\n edit it after).\r\n </li>\r\n <li>\r\n For a <strong>custom</strong> point: <strong>Ignore the list</strong> and just type your own\r\n description.\r\n </li>\r\n </ul>\r\n </li>\r\n <li>\r\n <strong>Set Details:</strong>\r\n Assign the <strong>Points</strong> and select the <strong>Point Type</strong>.\r\n </li>\r\n <li>\r\n <strong>Save:</strong>\r\n Click the <strong>\"Save\"</strong> button to add the item.\r\n </li>\r\n </ol>\r\n }\r\n <table mat-table [dataSource]=\"points\" matSort>\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef>Description</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow ) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <textarea [matAutocomplete]=\"auto\" [(ngModel)]=\"pointRow.description\" matInput cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"1\" placeholder=\"Enter point description\"></textarea>\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n @for (input of filteredInputs; track input.id) {\r\n <mat-option [value]=\"input.label\" (click)=\"selectActiveInput(input)\">\r\n <div style=\"display: flex;align-items: center;gap:8px\">\r\n <img height=\"24px\" width=\"24px\" [src]=\" getInputIllustration(input) \"\r\n [alt]=\"input.label\">\r\n <span>\r\n <div style=\"font-size: 12px;\">\r\n <strong>\r\n {{input.label}}\r\n </strong>\r\n\r\n </div>\r\n <div\r\n style=\"font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\r\n {{input.hintLabel || input.formControlName}}\r\n </div>\r\n </span>\r\n\r\n </div>\r\n </mat-option>\r\n }\r\n\r\n </mat-autocomplete>\r\n\r\n </mat-form-field>\r\n\r\n\r\n }@else {\r\n\r\n {{ element.description }}}\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"totalPoints\">\r\n <th mat-header-cell *matHeaderCellDef>Points</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <input matInput \r\n [(ngModel)]=\"pointRow.totalPoints\"\r\n placeholder=\"Enter points , eg 50\" type=\"number\">\r\n\r\n </mat-form-field>\r\n\r\n \r\n }@else {\r\n\r\n {{ element.totalPoints }}\r\n }\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"pointType\">\r\n <th mat-header-cell *matHeaderCellDef>Point Type</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n @if (element.isEditRow) {\r\n \r\n <mat-form-field subscriptSizing=\"dynamic\" class=\"input-add\" appearance=\"outline\">\r\n <mat-select (selectionChange)=\"selectPointType($event)\" ngDefaultControl \r\n \r\n [value]=\"pointRow.pointType\"\r\n \r\n placeholder=\"Select\">\r\n @for (type of inputConfig?.adjudicationPointTypes || []; track $index) {\r\n <mat-option [value]=\"type\">{{type}}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n \r\n }@else {\r\n\r\n {{ element.pointType }}\r\n }\r\n\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"actions\" [stickyEnd]=\"true\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <span style=\"display: flex; justify-content: center;\">\r\n @if (element.isEditRow) {\r\n <button [disabled]=\"this.inputConfig?.disabled || this.inputConfig?.readonly\" matTooltip=\"Save Point in Edit\" color=\"primary\" style=\"white-space: nowrap;\r\n height: 26px;\r\n margin-bottom: 0px;\" mat-flat-button (click)=\"savePoints()\" [disabled]=\"!pointInEditIsValid\">\r\n\r\n <span style=\"font-size: 14px;\">\r\n save\r\n </span>\r\n\r\n\r\n </button>\r\n\r\n }@else {\r\n <button mat-icon-button (click)=\"edit(element)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button (click)=\"remove(element)\">\r\n <mat-icon>delete_forever</mat-icon>\r\n\r\n </button>\r\n }\r\n\r\n </span>\r\n\r\n\r\n\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"cols\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: cols\"></tr>\r\n </table>\r\n</div>", styles: [".input-add{width:100%}th,td{padding:4px}mat-hint{text-align:start}.glass{background:#ffffff40!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.mat-column-totalPoints{width:100px!important;max-width:100px!important}.mat-column-pointType{width:180px!important;max-width:180px!important}.mat-column-actions{width:78px!important;max-width:78px!important}li{font-size:12px}ol{margin-top:8px}\n"] }]
|
|
11880
11917
|
}], ctorParameters: () => [], propDecorators: { pointsChange: [{
|
|
11881
11918
|
type: Output
|
|
11882
11919
|
}], value: [{
|
|
@@ -11885,6 +11922,402 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
11885
11922
|
type: Input
|
|
11886
11923
|
}] } });
|
|
11887
11924
|
|
|
11925
|
+
function getColorForNumber(targetNumber, numbers, asc = true) {
|
|
11926
|
+
if (numbers.length === 0) {
|
|
11927
|
+
throw new Error("The numbers array must not be empty.");
|
|
11928
|
+
}
|
|
11929
|
+
// Avoid sorting the original array
|
|
11930
|
+
const sortedNumbers = [...numbers].sort((a, b) => asc ? a - b : b - a);
|
|
11931
|
+
const min = sortedNumbers[0];
|
|
11932
|
+
const max = sortedNumbers[sortedNumbers.length - 1];
|
|
11933
|
+
if (!min || !max) {
|
|
11934
|
+
return "rgb(173, 173, 173)";
|
|
11935
|
+
}
|
|
11936
|
+
if (min === max) {
|
|
11937
|
+
return "rgb(173, 173, 173)"; // Return gray if there is no range
|
|
11938
|
+
}
|
|
11939
|
+
const interpolateColor = (value) => {
|
|
11940
|
+
const fraction = (value - min) / (max - min);
|
|
11941
|
+
const colors = [
|
|
11942
|
+
{ color: [247, 0, 0], pos: 0.0 }, // Red
|
|
11943
|
+
{ color: [247, 187, 0], pos: 0.25 }, // Orange
|
|
11944
|
+
{ color: [247, 247, 0], pos: 0.5 }, // Yellow
|
|
11945
|
+
{ color: [207, 247, 0], pos: 0.75 }, // Light green
|
|
11946
|
+
{ color: [96, 247, 0], pos: 1.0 } // Green
|
|
11947
|
+
];
|
|
11948
|
+
for (let i = 0; i < colors.length - 1; i++) {
|
|
11949
|
+
const nextColor = colors[i + 1];
|
|
11950
|
+
const currentColor = colors[i];
|
|
11951
|
+
if (currentColor && nextColor && fraction <= nextColor.pos) {
|
|
11952
|
+
const range = nextColor.pos - currentColor.pos;
|
|
11953
|
+
const localFraction = (fraction - currentColor.pos) / range;
|
|
11954
|
+
const r = Math.round(currentColor.color[0] + localFraction * (nextColor.color[0] - currentColor.color[0]));
|
|
11955
|
+
const g = Math.round(currentColor.color[1] + localFraction * (nextColor.color[1] - currentColor.color[1]));
|
|
11956
|
+
const b = Math.round(currentColor.color[2] + localFraction * (nextColor.color[2] - currentColor.color[2]));
|
|
11957
|
+
return `rgb(${r}, ${g}, ${b})`;
|
|
11958
|
+
}
|
|
11959
|
+
}
|
|
11960
|
+
return `rgb(${colors[colors.length - 1]?.color[0]}, ${colors[colors.length - 1]?.color[1]}, ${colors[colors.length - 1]?.color[2]},0.6)`;
|
|
11961
|
+
};
|
|
11962
|
+
return interpolateColor(targetNumber);
|
|
11963
|
+
}
|
|
11964
|
+
|
|
11965
|
+
class SubmissionReviewComponent {
|
|
11966
|
+
constructor() {
|
|
11967
|
+
this._value = [];
|
|
11968
|
+
// A stream to push updates of the review values (`this.value`)
|
|
11969
|
+
this.valueChanges$ = new BehaviorSubject([]);
|
|
11970
|
+
this.reviewChange = new EventEmitter();
|
|
11971
|
+
this.config = inject(NGX_T_FORMS_CONFIG_TOKEN);
|
|
11972
|
+
this.refreshTrigger = new BehaviorSubject(undefined);
|
|
11973
|
+
this.selected = '';
|
|
11974
|
+
this.columnMapping = undefined;
|
|
11975
|
+
this.submissions = [];
|
|
11976
|
+
this.initialState = {
|
|
11977
|
+
loading: true,
|
|
11978
|
+
submissions: [],
|
|
11979
|
+
columnMapping: {},
|
|
11980
|
+
displayCols: [],
|
|
11981
|
+
displayColumns: [],
|
|
11982
|
+
error: undefined,
|
|
11983
|
+
};
|
|
11984
|
+
// Stream for the initial data fetch. Only re-runs when `refreshTrigger` is fired.
|
|
11985
|
+
this.fetchedData$ = this.refreshTrigger.pipe(switchMap(() => this.config.formBuilder.getCurrentStepMicroflowSubmissions().pipe(take(1))), shareReplay(1));
|
|
11986
|
+
/**
|
|
11987
|
+
* REFACTORED: The new vm$ combines the one-time fetched data with the ongoing stream
|
|
11988
|
+
* of local review changes (`valueChanges$`). This prevents re-fetching from the server
|
|
11989
|
+
* every time a status or note is changed.
|
|
11990
|
+
*/
|
|
11991
|
+
this.vm$ = combineLatest([
|
|
11992
|
+
this.fetchedData$,
|
|
11993
|
+
this.valueChanges$
|
|
11994
|
+
]).pipe(map(([res, reviewValues]) => {
|
|
11995
|
+
const { submissions, columnMapping } = res;
|
|
11996
|
+
this.columnMapping = columnMapping;
|
|
11997
|
+
this.submissions = submissions;
|
|
11998
|
+
// FIX: Pass reviewValues as an argument to make the function pure.
|
|
11999
|
+
const enrichedSubmissions = this.enrichSubmissionsData(submissions, columnMapping, reviewValues);
|
|
12000
|
+
const calcKey = columnMapping.responsePreferenceCalculationKey || 'adjudicationPricePreferenceCalculation';
|
|
12001
|
+
const sortedSubmissions = [...enrichedSubmissions].sort((a, b) => Number(b[calcKey]) - Number(a[calcKey]));
|
|
12002
|
+
const newVm = {
|
|
12003
|
+
loading: false,
|
|
12004
|
+
submissions: sortedSubmissions,
|
|
12005
|
+
columnMapping: columnMapping,
|
|
12006
|
+
displayCols: [columnMapping.respondentNameKey, 'adjudicationPricePreferenceCalculation', 'status', 'actions'],
|
|
12007
|
+
displayColumns: [
|
|
12008
|
+
{ label: 'name', formControlName: columnMapping.respondentNameKey, type: 'string' },
|
|
12009
|
+
{ label: 'Preference', formControlName: 'adjudicationPricePreferenceCalculation', type: 'number', showColor: true },
|
|
12010
|
+
{ label: 'Actions', formControlName: 'actions', type: 'string' },
|
|
12011
|
+
{ label: 'status and Notes', formControlName: 'status', type: 'actions' },
|
|
12012
|
+
],
|
|
12013
|
+
error: undefined,
|
|
12014
|
+
};
|
|
12015
|
+
return newVm;
|
|
12016
|
+
}), startWith(this.initialState), catchError((err) => {
|
|
12017
|
+
console.error('Failed to load submissions:', err);
|
|
12018
|
+
return of({ ...this.initialState, loading: false, error: 'Failed to load submissions.' });
|
|
12019
|
+
}), shareReplay(1));
|
|
12020
|
+
this.reviewStatuses = [
|
|
12021
|
+
{
|
|
12022
|
+
label: '✅ Compliant',
|
|
12023
|
+
value: "compliant",
|
|
12024
|
+
color: 'var(--mat-sys-primary)',
|
|
12025
|
+
},
|
|
12026
|
+
{
|
|
12027
|
+
label: '❌ Non-compliant',
|
|
12028
|
+
value: "non-compliant",
|
|
12029
|
+
color: 'var(--mat-sys-error)',
|
|
12030
|
+
},
|
|
12031
|
+
];
|
|
12032
|
+
this.notesOpenForRowId = null;
|
|
12033
|
+
this.activeRowNotes = undefined;
|
|
12034
|
+
// FIX: A Map to hold notes being edited, keyed by row ID. This prevents shared state.
|
|
12035
|
+
this.notesBeingEdited = new Map();
|
|
12036
|
+
this.bulkOperations = [
|
|
12037
|
+
{
|
|
12038
|
+
label: '✅ Set all to Compliant',
|
|
12039
|
+
value: 'compliant',
|
|
12040
|
+
color: 'var(--mat-sys-primary)',
|
|
12041
|
+
},
|
|
12042
|
+
{
|
|
12043
|
+
label: '❌ Set all to Non-compliant',
|
|
12044
|
+
value: 'non-compliant',
|
|
12045
|
+
color: 'var(--mat-sys-error)',
|
|
12046
|
+
},
|
|
12047
|
+
{
|
|
12048
|
+
label: "🔄 Reset all ",
|
|
12049
|
+
value: 'reset',
|
|
12050
|
+
color: 'var(--mat-sys-secondary)',
|
|
12051
|
+
}
|
|
12052
|
+
];
|
|
12053
|
+
}
|
|
12054
|
+
set value(value) {
|
|
12055
|
+
if (_isEqual(value, this._value))
|
|
12056
|
+
return;
|
|
12057
|
+
this._value = value || [];
|
|
12058
|
+
// FIX: Instead of triggering a full refresh, push the new value to its own stream.
|
|
12059
|
+
this.valueChanges$.next(this._value);
|
|
12060
|
+
}
|
|
12061
|
+
get value() {
|
|
12062
|
+
return this._value;
|
|
12063
|
+
}
|
|
12064
|
+
loadMicroSubmissions() {
|
|
12065
|
+
this.refreshTrigger.next();
|
|
12066
|
+
}
|
|
12067
|
+
/**
|
|
12068
|
+
* REFACTORED: Now accepts `reviewValues` as a parameter instead of relying on `this.value`.
|
|
12069
|
+
*/
|
|
12070
|
+
enrichSubmissionsData(submissions, cols, reviewValues) {
|
|
12071
|
+
const numberSets = new Map();
|
|
12072
|
+
numberSets.set(cols.responsePreferenceCalculationKey || 'adjudicationPricePreferenceCalculation', submissions.map((s) => Number(s[cols.responsePreferenceCalculationKey || 'adjudicationPricePreferenceCalculation'] || 0)));
|
|
12073
|
+
return submissions.map((submission) => {
|
|
12074
|
+
const priceCalcKey = cols.responsePreferenceCalculationKey || 'adjudicationPricePreferenceCalculation';
|
|
12075
|
+
const numbers = numberSets.get(priceCalcKey) || [];
|
|
12076
|
+
const color = this.getColorString(submission[priceCalcKey], numbers);
|
|
12077
|
+
// Use the passed `reviewValues` argument
|
|
12078
|
+
const submissionReview = reviewValues?.find((v) => v.id === submission.id) || {};
|
|
12079
|
+
return {
|
|
12080
|
+
...submission,
|
|
12081
|
+
submissionIsReviewed: !!submissionReview,
|
|
12082
|
+
adj_microFlow_review_notes: submissionReview?.adj_microFlow_review_notes || '',
|
|
12083
|
+
submissionHasReviewNotes: !!submissionReview?.adj_microFlow_review_notes,
|
|
12084
|
+
adj_microFlow_review: submissionReview?.['adj_microFlow_review'],
|
|
12085
|
+
adjudicationPricePreferenceCalculationColor: color,
|
|
12086
|
+
adjudicationPricePreferenceCalculation: submission[cols.responsePreferenceCalculationKey || 'adjudicationPricePreferenceCalculation'],
|
|
12087
|
+
backgroundShades: { [priceCalcKey]: this.getScoreShade(color) },
|
|
12088
|
+
};
|
|
12089
|
+
});
|
|
12090
|
+
}
|
|
12091
|
+
getColorString(target, numbers) {
|
|
12092
|
+
return getColorForNumber(target, numbers, true);
|
|
12093
|
+
}
|
|
12094
|
+
getScoreShade(rgbColor) {
|
|
12095
|
+
if (!rgbColor)
|
|
12096
|
+
return '';
|
|
12097
|
+
return rgbColor.replace('rgb', 'rgba').replace(')', `, 0.1)`);
|
|
12098
|
+
}
|
|
12099
|
+
viewMicroSubmission(res) {
|
|
12100
|
+
const alreadyInValue = this.value?.find((v) => v.id === res.id);
|
|
12101
|
+
if (!alreadyInValue) {
|
|
12102
|
+
const newReview = {
|
|
12103
|
+
id: res.id,
|
|
12104
|
+
adj_microFlow_review: undefined,
|
|
12105
|
+
nameOfBidder: res[this.columnMapping?.respondentNameKey || ''] || '',
|
|
12106
|
+
supplierNumber: res[this.columnMapping?.respondentCodeKey || ''] || '',
|
|
12107
|
+
createdAt: res[this.columnMapping?.responseDateKey || 'createdAt'] || undefined,
|
|
12108
|
+
updatedAt: res[this.columnMapping?.responseDateKey || 'updatedAt'] || undefined,
|
|
12109
|
+
adjudicationPricePreferenceCalculation: res[this.columnMapping?.responsePreferenceCalculationKey || 'adjudicationPricePreferenceCalculation'] || 0,
|
|
12110
|
+
reference: res.reference || '',
|
|
12111
|
+
};
|
|
12112
|
+
const newValue = [...(this.value || []), newReview];
|
|
12113
|
+
this.reviewChange.emit(newValue);
|
|
12114
|
+
}
|
|
12115
|
+
this.config.formBuilder['previewWorkflowDocument'](res.id);
|
|
12116
|
+
}
|
|
12117
|
+
setResponseStatus(res, status) {
|
|
12118
|
+
const alreadyInValue = this.value?.find((v) => v.id === res.id);
|
|
12119
|
+
if (!alreadyInValue) {
|
|
12120
|
+
const newReview = {
|
|
12121
|
+
id: res.id,
|
|
12122
|
+
adj_microFlow_review: status.value,
|
|
12123
|
+
nameOfBidder: res[this.columnMapping?.respondentNameKey || ''] || '',
|
|
12124
|
+
supplierNumber: res[this.columnMapping?.respondentCodeKey || ''] || '',
|
|
12125
|
+
createdAt: res[this.columnMapping?.responseDateKey || 'createdAt'] || undefined,
|
|
12126
|
+
updatedAt: res[this.columnMapping?.responseDateKey || 'updatedAt'] || undefined,
|
|
12127
|
+
adjudicationPricePreferenceCalculation: res[this.columnMapping?.responsePreferenceCalculationKey || 'adjudicationPricePreferenceCalculation'] || 0,
|
|
12128
|
+
reference: res.reference || '',
|
|
12129
|
+
};
|
|
12130
|
+
this.reviewChange.emit([...(this.value || []), newReview]);
|
|
12131
|
+
this.reachedMax([...(this.value || []), newReview]);
|
|
12132
|
+
return;
|
|
12133
|
+
}
|
|
12134
|
+
const newValue = (this.value || []).map((v) => {
|
|
12135
|
+
if (v.id === res.id) {
|
|
12136
|
+
return { ...v, adj_microFlow_review: status.value };
|
|
12137
|
+
}
|
|
12138
|
+
return v;
|
|
12139
|
+
});
|
|
12140
|
+
this.reviewChange.emit(newValue);
|
|
12141
|
+
this.reachedMax(newValue);
|
|
12142
|
+
}
|
|
12143
|
+
get maxLimit() {
|
|
12144
|
+
const hasMax = this.inputConfig?.maxLength;
|
|
12145
|
+
if (!hasMax || isNaN(Number(hasMax))) {
|
|
12146
|
+
return; // No limit set, do nothing
|
|
12147
|
+
}
|
|
12148
|
+
return Number(hasMax);
|
|
12149
|
+
}
|
|
12150
|
+
reachedMax(newValue) {
|
|
12151
|
+
const hasMax = this.inputConfig?.maxLength;
|
|
12152
|
+
if (!hasMax || isNaN(Number(hasMax))) {
|
|
12153
|
+
return; // No limit set, do nothin
|
|
12154
|
+
}
|
|
12155
|
+
const allCompetentSubmissions = newValue?.filter((v) => v.adj_microFlow_review === 'compliant').length || 0;
|
|
12156
|
+
if (!(allCompetentSubmissions >= (Number(hasMax) || 1))) {
|
|
12157
|
+
return;
|
|
12158
|
+
}
|
|
12159
|
+
const missingSubmission = this.submissions.filter((s) => !newValue?.find((v) => v.id === s.id))
|
|
12160
|
+
.map((s) => ({
|
|
12161
|
+
id: s.id,
|
|
12162
|
+
adj_microFlow_review: 'non-compliant', // Default to non-compliant
|
|
12163
|
+
nameOfBidder: s[this.columnMapping?.respondentNameKey || ''] || '',
|
|
12164
|
+
supplierNumber: s[this.columnMapping?.respondentCodeKey || ''] || '',
|
|
12165
|
+
createdAt: s[this.columnMapping?.responseDateKey || 'createdAt'] || undefined,
|
|
12166
|
+
updatedAt: s[this.columnMapping?.responseDateKey || 'updatedAt'] || undefined,
|
|
12167
|
+
adjudicationPricePreferenceCalculation: s[this.columnMapping?.responsePreferenceCalculationKey || 'adjudicationPricePreferenceCalculation'] || 0,
|
|
12168
|
+
reference: s['reference'] || '',
|
|
12169
|
+
}));
|
|
12170
|
+
const unique = new Set([...newValue || [], ...missingSubmission]);
|
|
12171
|
+
this.reviewChange.emit(Array.from(unique));
|
|
12172
|
+
}
|
|
12173
|
+
/**
|
|
12174
|
+
* REFACTORED: Captures the notes for a specific row ID and stores them in the map.
|
|
12175
|
+
*/
|
|
12176
|
+
notesChanged(notes, rowId) {
|
|
12177
|
+
this.notesBeingEdited.set(rowId, notes);
|
|
12178
|
+
}
|
|
12179
|
+
/**
|
|
12180
|
+
* REFACTORED: Saves the notes from the `notesBeingEdited` map.
|
|
12181
|
+
*/
|
|
12182
|
+
notesBlur() {
|
|
12183
|
+
if (!this.notesOpenForRowId)
|
|
12184
|
+
return;
|
|
12185
|
+
const notesToSave = this.notesBeingEdited.get(this.notesOpenForRowId);
|
|
12186
|
+
const alreadyInValue = this.value?.find((v) => v.id === this.notesOpenForRowId);
|
|
12187
|
+
if (!alreadyInValue) {
|
|
12188
|
+
const newReview = {
|
|
12189
|
+
id: this.notesOpenForRowId,
|
|
12190
|
+
adj_microFlow_review_notes: notesToSave,
|
|
12191
|
+
adj_microFlow_review: undefined,
|
|
12192
|
+
nameOfBidder: '',
|
|
12193
|
+
supplierNumber: '',
|
|
12194
|
+
createdAt: undefined,
|
|
12195
|
+
updatedAt: undefined,
|
|
12196
|
+
adjudicationPricePreferenceCalculation: 0,
|
|
12197
|
+
reference: '',
|
|
12198
|
+
};
|
|
12199
|
+
this.reviewChange.emit([...(this.value || []), newReview]);
|
|
12200
|
+
}
|
|
12201
|
+
else {
|
|
12202
|
+
const newValue = this.value?.map((v) => {
|
|
12203
|
+
if (v.id === this.notesOpenForRowId) {
|
|
12204
|
+
return { ...v, adj_microFlow_review_notes: notesToSave };
|
|
12205
|
+
}
|
|
12206
|
+
return v;
|
|
12207
|
+
});
|
|
12208
|
+
this.reviewChange.emit(newValue);
|
|
12209
|
+
}
|
|
12210
|
+
// Clean up and close the overlay
|
|
12211
|
+
this.notesBeingEdited.delete(this.notesOpenForRowId);
|
|
12212
|
+
this.notesOpenForRowId = null;
|
|
12213
|
+
this.activeRowNotes = undefined;
|
|
12214
|
+
}
|
|
12215
|
+
get notesInputConfig() {
|
|
12216
|
+
return {
|
|
12217
|
+
id: 'adj_microFlow_review_notes',
|
|
12218
|
+
label: 'Notes',
|
|
12219
|
+
formControlName: 'adj_microFlow_review_notes',
|
|
12220
|
+
};
|
|
12221
|
+
}
|
|
12222
|
+
get bulkStatus() {
|
|
12223
|
+
const allCompliant = this.submissions.every((s) => s['adj_microFlow_review'] === 'compliant');
|
|
12224
|
+
if (allCompliant) {
|
|
12225
|
+
return 'compliant';
|
|
12226
|
+
}
|
|
12227
|
+
const allNonCompliant = this.submissions.every((s) => s['adj_microFlow_review'] === 'non-compliant');
|
|
12228
|
+
if (allNonCompliant) {
|
|
12229
|
+
return 'non-compliant';
|
|
12230
|
+
}
|
|
12231
|
+
return 'mixed';
|
|
12232
|
+
}
|
|
12233
|
+
bulkStatusChanged(event) {
|
|
12234
|
+
const newStatus = event.value;
|
|
12235
|
+
if (newStatus === 'reset') {
|
|
12236
|
+
this.reviewChange.emit([]);
|
|
12237
|
+
return;
|
|
12238
|
+
}
|
|
12239
|
+
// Create a Map of existing values for efficient O(1) lookup
|
|
12240
|
+
const existingValueMap = new Map((this.value ?? []).map(v => [v.id, v]));
|
|
12241
|
+
// Destructure column keys with fallbacks for cleaner access
|
|
12242
|
+
const { respondentNameKey = '', respondentCodeKey = '', responseDateKey = 'createdAt', responsePreferenceCalculationKey = 'adjudicationPricePreferenceCalculation', } = this.columnMapping || {};
|
|
12243
|
+
let allItems = this.submissions.map(s => {
|
|
12244
|
+
// Efficiently look up the existing value using the Map
|
|
12245
|
+
const existingValue = existingValueMap.get(s.id);
|
|
12246
|
+
// If it exists, spread its properties to preserve them and update the status
|
|
12247
|
+
if (existingValue) {
|
|
12248
|
+
return { ...existingValue, adj_microFlow_review: newStatus };
|
|
12249
|
+
}
|
|
12250
|
+
// Otherwise, create a new object from the submission data
|
|
12251
|
+
return {
|
|
12252
|
+
id: s.id,
|
|
12253
|
+
adj_microFlow_review: newStatus,
|
|
12254
|
+
nameOfBidder: s[respondentNameKey] || '',
|
|
12255
|
+
supplierNumber: s[respondentCodeKey] || '',
|
|
12256
|
+
createdAt: s[responseDateKey] || undefined,
|
|
12257
|
+
updatedAt: s[this.columnMapping?.responseDateKey || 'updatedAt'] || undefined,
|
|
12258
|
+
adjudicationPricePreferenceCalculation: s[responsePreferenceCalculationKey] || 0,
|
|
12259
|
+
reference: s['reference'] || '',
|
|
12260
|
+
};
|
|
12261
|
+
});
|
|
12262
|
+
// Apply the compliance limit if necessary
|
|
12263
|
+
const shouldApplyLimit = this.maxLimit !== undefined && newStatus === 'compliant';
|
|
12264
|
+
if (shouldApplyLimit) {
|
|
12265
|
+
// Sort by preference calculation, highest first
|
|
12266
|
+
allItems.sort((a, b) => (b.adjudicationPricePreferenceCalculation ?? 0) - (a.adjudicationPricePreferenceCalculation ?? 0));
|
|
12267
|
+
// Mark items beyond the limit as 'non-compliant'
|
|
12268
|
+
allItems = allItems.map((item, index) => {
|
|
12269
|
+
if (index >= this.maxLimit) {
|
|
12270
|
+
return { ...item, adj_microFlow_review: 'non-compliant' };
|
|
12271
|
+
}
|
|
12272
|
+
return item;
|
|
12273
|
+
});
|
|
12274
|
+
}
|
|
12275
|
+
this.reviewChange.emit(allItems);
|
|
12276
|
+
}
|
|
12277
|
+
openNotes(row) {
|
|
12278
|
+
this.notesOpenForRowId = row.id;
|
|
12279
|
+
if (!!row.adj_microFlow_review_notes || !this.inputConfig?.adjudicationReviewFeedbackTemplate) {
|
|
12280
|
+
return;
|
|
12281
|
+
}
|
|
12282
|
+
const stringfiedTemplate = JSON.stringify(this.inputConfig?.adjudicationReviewFeedbackTemplate);
|
|
12283
|
+
const template = stringfiedTemplate?.replace(/\$bidderName/g, row[this.columnMapping?.respondentNameKey || ''])
|
|
12284
|
+
?.replace(/\$bidderCode/g, row[this.columnMapping?.respondentCodeKey || ''])
|
|
12285
|
+
?.replace(/\$responseDate/g, row[this.columnMapping?.responseDateKey || ''])
|
|
12286
|
+
?.replace(/\$responsePreferenceCalculation/g, row[this.columnMapping?.responsePreferenceCalculationKey || ''] || '0');
|
|
12287
|
+
this.activeRowNotes = JSON.parse(template || '{}');
|
|
12288
|
+
}
|
|
12289
|
+
canChangeStatus(row) {
|
|
12290
|
+
if (row.adj_microFlow_review === 'compliant')
|
|
12291
|
+
return true;
|
|
12292
|
+
const maxLength = this.inputConfig?.maxLength;
|
|
12293
|
+
// check if max ecists and is a number
|
|
12294
|
+
if (!maxLength || isNaN(Number(maxLength))) {
|
|
12295
|
+
return true; // No limit set, allow status change
|
|
12296
|
+
}
|
|
12297
|
+
const allCompetentSubmissions = this.value?.filter((v) => v.adj_microFlow_review === 'compliant').length || 0;
|
|
12298
|
+
return allCompetentSubmissions < (Number(maxLength) || 1);
|
|
12299
|
+
}
|
|
12300
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SubmissionReviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SubmissionReviewComponent, isStandalone: true, selector: "app-submission-review", inputs: { inputConfig: "inputConfig", value: "value" }, outputs: { reviewChange: "reviewChange" }, ngImport: i0, template: "@if (vm$ | async; as vm) {\r\n\r\n<ng-container *ngIf=\"vm.loading; then loading; else (vm.error ? error : dataContainer)\"></ng-container>\r\n\r\n<ng-template #loading>\r\n <div style=\"display: flex; justify-content: center; align-items: center; padding:24px;width: 100%;\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #error>\r\n <div class=\"info-card error-card\">\r\n <h5 class=\"info-title\">\u274C Failed to load data</h5>\r\n <p>{{ vm.error }}</p>\r\n <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\">\r\n Try Again\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dataContainer>\r\n <ng-container\r\n *ngIf=\"!vm.displayCols.length; then noColumns; else (!vm.submissions.length ? noSubmissions : submissionsTable)\"></ng-container>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noColumns>\r\n <div class=\"info-card\">\r\n <h5 class=\"info-title\">\u2699\uFE0F This step needs to be configured to show data.</h5>\r\n <ol>\r\n <li>\r\n <strong>Why you're seeing this:</strong>\r\n <ul>\r\n <li>This component is designed for a <strong>\"Submission Review\"</strong> workflow step.</li>\r\n <li>It's currently missing the required column setup.</li>\r\n </ul>\r\n </li>\r\n <li>\r\n <strong>What to do (for Administrators):</strong>\r\n To fix this, go to the <strong>Workflow Builder</strong> and for this specific step, <strong>map the display\r\n columns</strong> to the desired submission data (e.g., form fields or document keys).\r\n </li>\r\n </ol>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #noSubmissions>\r\n <div class=\"info-card\">\r\n <h5 class=\"info-title\">\u2139\uFE0F There are no submissions to display.</h5>\r\n <ul>\r\n <li>This can happen if <strong>no one has responded</strong> yet, or if the <strong>submission closing date has\r\n passed</strong>.</li>\r\n <li>If you are expecting to see submissions, try clicking the <strong>Refresh</strong> button.</li>\r\n </ul>\r\n <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\" class=\"load-button\">\r\n Refresh\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #submissionsTable>\r\n @if(!value || value.length === 0){\r\n \r\n <div class=\"info-card\">\r\n <h5 class=\"info-title\">\uD83D\uDCDD How to Review Submissions</h5>\r\n <ol>\r\n <li>\r\n <strong>View Response:</strong> Click the <strong>Preview</strong> (<mat-icon class=\"smallIcon\">preview</mat-icon>) icon to see the full submission.\r\n </li>\r\n <li>\r\n <strong>Set Status:</strong> Use the dropdown to select <strong>Compliant</strong> or <strong>Non-compliant</strong>.\r\n </li>\r\n <li>\r\n <strong>Add Note (If Non-compliant):</strong>\r\n <ul>\r\n <li>If you select <strong>Non-compliant</strong>, you <strong>must</strong> add a note.</li>\r\n <li>Click the <strong>Add Note</strong> (<mat-icon class=\"smallIcon\">add_comment</mat-icon>) icon, write your feedback, and hit <strong>Save Feedback</strong>. Your note will be visible to the applicant.</li>\r\n </ul>\r\n </li>\r\n </ol>\r\n </div>\r\n }\r\n <table mat-table [dataSource]=\"vm.submissions\">\r\n @for (col of vm.displayColumns; track col.formControlName) {\r\n <ng-container [matColumnDef]=\"col.formControlName\">\r\n <th mat-header-cell *matHeaderCellDef style=\"padding:4px\">\r\n\r\n @if(col.formControlName === 'status'){\r\n <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n margin-bottom: 8px;\r\n margin-top: 8px;\r\n border-radius:16px;\" appearance=\"outline\">\r\n <mat-label>\r\n Bulk Status Selection\r\n </mat-label>\r\n <mat-select\r\n [style.color]=\"bulkStatus === 'non-compliant' ? 'var(--mat-sys-error)' : bulkStatus==='compliant'? 'var(--mat-sys-primary)' : ''\"\r\n (selectionChange)=\"bulkStatusChanged($event)\" ngDefaultControl [value]=\"bulkStatus\"\r\n placeholder=\" Select Status\">\r\n @for (type of bulkOperations || []; track type) {\r\n <mat-option [value]=\"type.value\">{{type.label}}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n </mat-form-field>\r\n }@else {\r\n {{ col.label }}\r\n }\r\n\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" mat-ripple class=\"table-cell\" [class.selected-row]=\"selected === row.id\"\r\n (click)=\"$event.stopPropagation()\" [class.price-preference-cell]=\"true\"\r\n [style.border-bottom-color]=\"row.adjudicationPricePreferenceCalculationColor\"\r\n [style.background]=\"row.backgroundShades?.[col.formControlName]\">\r\n\r\n @if(col.formControlName === 'actions'){\r\n <span style=\"display: flex; align-items: center;\">\r\n <button matTooltipPosition=\"before\"\r\n [matTooltip]=\"`View and review **` + row[vm.columnMapping.respondentNameKey]+ `** 's' Submission`\"\r\n (click)=\"viewMicroSubmission(row)\" mat-icon-button>\r\n <mat-icon>preview</mat-icon>\r\n </button>\r\n <button (click)=\"openNotes(row)\" cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\" matTooltipPosition=\"after\" [matTooltip]=\"\r\n `Add a review note for **` + row[vm.columnMapping.respondentNameKey] + `**`\" mat-icon-button>\r\n <mat-icon [style.color]=\"\r\n notesOpenForRowId === row.id ? 'var(--mat-sys-primary)' : (row['adj_microFlow_review']==='non-compliant' && !row['adj_microFlow_review_notes']?'var(--mat-sys-error)':'')\r\n \">\r\n {{ !row['submissionHasReviewNotes']? 'add_comment' : 'comment' }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n\r\n <ng-template (overlayOutsideClick)=\"notesOpenForRowId = null\" cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayDisableClose]=\"false\" [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\r\n [cdkConnectedOverlayOpen]=\"notesOpenForRowId=== row.id\" (detach)=\"notesOpenForRowId = null\">\r\n <mat-card class=\"notes-card\">\r\n <mat-card-header>\r\n <mat-card-title>Review Feedback</mat-card-title>\r\n <mat-card-subtitle>\r\n For <span style=\"color:var(--mat-sys-primary)\">{{ row[vm.columnMapping.respondentNameKey] }}</span>\r\n </mat-card-subtitle>\r\n </mat-card-header>\r\n <mat-card-content>\r\n <p>\r\n Your notes will be visible to the respondent. Provide <strong>clear, constructive feedback</strong> to\r\n guide their future submissions.\r\n </p>\r\n <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n display: absolute;\r\n left: 0;\r\n margin-bottom: 8px;\r\n margin-top: 8px;\r\n border-radius:16px;\" appearance=\"outline\">\r\n <lib-editor-js-input [value]=\"row['adj_microFlow_review_notes'] || activeRowNotes\"\r\n (valueChanged)=\"notesChanged($event, row.id)\" ngDefaultControl [inputConfig]=\"notesInputConfig\"\r\n [required]=\"this.notesInputConfig.required\">\r\n </lib-editor-js-input>\r\n <mat-hint>\r\n <strong>Tip:</strong> Use bold, lists, and tables to structure your feedback.\r\n </mat-hint>\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions align=\"end\">\r\n <button mat-button (click)=\"this.notesOpenForRowId = null\">\r\n Cancel\r\n </button>\r\n <button mat-flat-button (click)=\"notesBlur()\">\r\n Save Feedback\r\n </button>\r\n </mat-card-actions>\r\n </mat-card>\r\n </ng-template>\r\n\r\n } @else if(col.formControlName === 'status'){\r\n <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n margin-bottom: 8px;\r\n margin-top: 8px;\r\n border-radius:16px;\" appearance=\"outline\">\r\n <mat-select\r\n [disabled]=\"!canChangeStatus(row)\"\r\n [style.color]=\"row['adj_microFlow_review'] === 'non-compliant' ? 'var(--mat-sys-error)' : row['adj_microFlow_review']==='compliant'? 'var(--mat-sys-primary)' : ''\"\r\n (selectionChange)=\"setResponseStatus(row,$event)\" ngDefaultControl [value]=\"row.adj_microFlow_review\"\r\n placeholder=\" Select Status\">\r\n @for (type of reviewStatuses || []; track type) {\r\n <mat-option [value]=\"type.value\">{{type.label}}</mat-option>\r\n }\r\n </mat-select>\r\n @if(row['adj_microFlow_review']==='non-compliant' && !row['adj_microFlow_review_notes']){\r\n <mat-hint style=\"color:var(--mat-sys-error)\">\r\n Rejection reason is required. Add a review note.\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n\r\n } @else {\r\n @switch (col?.type) {\r\n @case ('daysAgo') {\r\n {{ row[col.formControlName] | daysAgo }}\r\n }\r\n @case ('number') {\r\n <div class=\"number-cell\">\r\n <span>\r\n {{ (row[col.formControlName] | number:'0.0-0' ) || 'N/A' }}\r\n </span>\r\n @if (col.showColor) {\r\n <mat-icon [style.color]=\"row.adjudicationPricePreferenceCalculationColor\">\r\n fiber_manual_record\r\n </mat-icon>\r\n }\r\n </div>\r\n }\r\n @default {\r\n @if($index === 0) {\r\n <span class=\"main-submission-text\">\r\n <mat-icon style=\"font-size: 16px;height:16px;width:16px\">domain</mat-icon>\r\n <strong>\r\n {{ row[col.formControlName] }}\r\n </strong>\r\n </span>\r\n <span class=\"secondary-text\">\r\n <mat-icon>fingerprint</mat-icon>\r\n {{row[vm.columnMapping.respondentCodeKey]}}\r\n <mat-icon>more_time</mat-icon>\r\n {{ row[vm.columnMapping.responseDateKey ||''] | daysAgo}}\r\n </span>\r\n } @else {\r\n {{ row[col.formControlName] }}\r\n }\r\n }\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n <tr mat-header-row *matHeaderRowDef=\"vm.displayCols\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: vm.displayCols\"></tr>\r\n </table>\r\n \r\n\r\n</ng-template>\r\n\r\n}\r\n", styles: [".number{display:flex;justify-content:space-between;align-items:center}li{font-size:12px}ol,ul{margin-top:8px}.number-cell{display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-text{display:flex;align-items:center;white-space:pre;gap:8px;opacity:.8}.secondary-text mat-icon{font-size:14px;width:14px;height:14px}.mat-column-adjudicationPricePreferenceCalculation{max-width:70px}.mat-column-actions{padding:0;max-width:80px}.mat-column-status{padding-left:8px;padding-right:8px;max-width:fit-content!important}.main-submission-text{display:flex;align-items:center;gap:8px;font-size:16px}.notes-card{width:100%;max-width:480px;resize:both;height:fit-content!important}.smallIcon{font-size:14px;width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i1$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i11.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i11.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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: "ngmodule", type: RouterModule }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }, { kind: "component", type: EditorJsInputComponent, selector: "lib-editor-js-input", inputs: ["inputConfig", "value"], outputs: ["valueChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12302
|
+
}
|
|
12303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SubmissionReviewComponent, decorators: [{
|
|
12304
|
+
type: Component,
|
|
12305
|
+
args: [{ selector: 'app-submission-review', standalone: true, imports: [
|
|
12306
|
+
CommonModule,
|
|
12307
|
+
MatModulesModule,
|
|
12308
|
+
FormsModule,
|
|
12309
|
+
RouterModule,
|
|
12310
|
+
DaysAgoPipe,
|
|
12311
|
+
EditorJsInputComponent
|
|
12312
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (vm$ | async; as vm) {\r\n\r\n<ng-container *ngIf=\"vm.loading; then loading; else (vm.error ? error : dataContainer)\"></ng-container>\r\n\r\n<ng-template #loading>\r\n <div style=\"display: flex; justify-content: center; align-items: center; padding:24px;width: 100%;\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #error>\r\n <div class=\"info-card error-card\">\r\n <h5 class=\"info-title\">\u274C Failed to load data</h5>\r\n <p>{{ vm.error }}</p>\r\n <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\">\r\n Try Again\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dataContainer>\r\n <ng-container\r\n *ngIf=\"!vm.displayCols.length; then noColumns; else (!vm.submissions.length ? noSubmissions : submissionsTable)\"></ng-container>\r\n</ng-template>\r\n\r\n\r\n<ng-template #noColumns>\r\n <div class=\"info-card\">\r\n <h5 class=\"info-title\">\u2699\uFE0F This step needs to be configured to show data.</h5>\r\n <ol>\r\n <li>\r\n <strong>Why you're seeing this:</strong>\r\n <ul>\r\n <li>This component is designed for a <strong>\"Submission Review\"</strong> workflow step.</li>\r\n <li>It's currently missing the required column setup.</li>\r\n </ul>\r\n </li>\r\n <li>\r\n <strong>What to do (for Administrators):</strong>\r\n To fix this, go to the <strong>Workflow Builder</strong> and for this specific step, <strong>map the display\r\n columns</strong> to the desired submission data (e.g., form fields or document keys).\r\n </li>\r\n </ol>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #noSubmissions>\r\n <div class=\"info-card\">\r\n <h5 class=\"info-title\">\u2139\uFE0F There are no submissions to display.</h5>\r\n <ul>\r\n <li>This can happen if <strong>no one has responded</strong> yet, or if the <strong>submission closing date has\r\n passed</strong>.</li>\r\n <li>If you are expecting to see submissions, try clicking the <strong>Refresh</strong> button.</li>\r\n </ul>\r\n <button mat-raised-button color=\"primary\" (click)=\"loadMicroSubmissions()\" class=\"load-button\">\r\n Refresh\r\n </button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #submissionsTable>\r\n @if(!value || value.length === 0){\r\n \r\n <div class=\"info-card\">\r\n <h5 class=\"info-title\">\uD83D\uDCDD How to Review Submissions</h5>\r\n <ol>\r\n <li>\r\n <strong>View Response:</strong> Click the <strong>Preview</strong> (<mat-icon class=\"smallIcon\">preview</mat-icon>) icon to see the full submission.\r\n </li>\r\n <li>\r\n <strong>Set Status:</strong> Use the dropdown to select <strong>Compliant</strong> or <strong>Non-compliant</strong>.\r\n </li>\r\n <li>\r\n <strong>Add Note (If Non-compliant):</strong>\r\n <ul>\r\n <li>If you select <strong>Non-compliant</strong>, you <strong>must</strong> add a note.</li>\r\n <li>Click the <strong>Add Note</strong> (<mat-icon class=\"smallIcon\">add_comment</mat-icon>) icon, write your feedback, and hit <strong>Save Feedback</strong>. Your note will be visible to the applicant.</li>\r\n </ul>\r\n </li>\r\n </ol>\r\n </div>\r\n }\r\n <table mat-table [dataSource]=\"vm.submissions\">\r\n @for (col of vm.displayColumns; track col.formControlName) {\r\n <ng-container [matColumnDef]=\"col.formControlName\">\r\n <th mat-header-cell *matHeaderCellDef style=\"padding:4px\">\r\n\r\n @if(col.formControlName === 'status'){\r\n <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n margin-bottom: 8px;\r\n margin-top: 8px;\r\n border-radius:16px;\" appearance=\"outline\">\r\n <mat-label>\r\n Bulk Status Selection\r\n </mat-label>\r\n <mat-select\r\n [style.color]=\"bulkStatus === 'non-compliant' ? 'var(--mat-sys-error)' : bulkStatus==='compliant'? 'var(--mat-sys-primary)' : ''\"\r\n (selectionChange)=\"bulkStatusChanged($event)\" ngDefaultControl [value]=\"bulkStatus\"\r\n placeholder=\" Select Status\">\r\n @for (type of bulkOperations || []; track type) {\r\n <mat-option [value]=\"type.value\">{{type.label}}</mat-option>\r\n }\r\n </mat-select>\r\n\r\n </mat-form-field>\r\n }@else {\r\n {{ col.label }}\r\n }\r\n\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" mat-ripple class=\"table-cell\" [class.selected-row]=\"selected === row.id\"\r\n (click)=\"$event.stopPropagation()\" [class.price-preference-cell]=\"true\"\r\n [style.border-bottom-color]=\"row.adjudicationPricePreferenceCalculationColor\"\r\n [style.background]=\"row.backgroundShades?.[col.formControlName]\">\r\n\r\n @if(col.formControlName === 'actions'){\r\n <span style=\"display: flex; align-items: center;\">\r\n <button matTooltipPosition=\"before\"\r\n [matTooltip]=\"`View and review **` + row[vm.columnMapping.respondentNameKey]+ `** 's' Submission`\"\r\n (click)=\"viewMicroSubmission(row)\" mat-icon-button>\r\n <mat-icon>preview</mat-icon>\r\n </button>\r\n <button (click)=\"openNotes(row)\" cdkOverlayOrigin\r\n #trigger=\"cdkOverlayOrigin\" matTooltipPosition=\"after\" [matTooltip]=\"\r\n `Add a review note for **` + row[vm.columnMapping.respondentNameKey] + `**`\" mat-icon-button>\r\n <mat-icon [style.color]=\"\r\n notesOpenForRowId === row.id ? 'var(--mat-sys-primary)' : (row['adj_microFlow_review']==='non-compliant' && !row['adj_microFlow_review_notes']?'var(--mat-sys-error)':'')\r\n \">\r\n {{ !row['submissionHasReviewNotes']? 'add_comment' : 'comment' }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n\r\n <ng-template (overlayOutsideClick)=\"notesOpenForRowId = null\" cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayHasBackdrop]=\"false\"\r\n [cdkConnectedOverlayDisableClose]=\"false\" [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\r\n [cdkConnectedOverlayOpen]=\"notesOpenForRowId=== row.id\" (detach)=\"notesOpenForRowId = null\">\r\n <mat-card class=\"notes-card\">\r\n <mat-card-header>\r\n <mat-card-title>Review Feedback</mat-card-title>\r\n <mat-card-subtitle>\r\n For <span style=\"color:var(--mat-sys-primary)\">{{ row[vm.columnMapping.respondentNameKey] }}</span>\r\n </mat-card-subtitle>\r\n </mat-card-header>\r\n <mat-card-content>\r\n <p>\r\n Your notes will be visible to the respondent. Provide <strong>clear, constructive feedback</strong> to\r\n guide their future submissions.\r\n </p>\r\n <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n display: absolute;\r\n left: 0;\r\n margin-bottom: 8px;\r\n margin-top: 8px;\r\n border-radius:16px;\" appearance=\"outline\">\r\n <lib-editor-js-input [value]=\"row['adj_microFlow_review_notes'] || activeRowNotes\"\r\n (valueChanged)=\"notesChanged($event, row.id)\" ngDefaultControl [inputConfig]=\"notesInputConfig\"\r\n [required]=\"this.notesInputConfig.required\">\r\n </lib-editor-js-input>\r\n <mat-hint>\r\n <strong>Tip:</strong> Use bold, lists, and tables to structure your feedback.\r\n </mat-hint>\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions align=\"end\">\r\n <button mat-button (click)=\"this.notesOpenForRowId = null\">\r\n Cancel\r\n </button>\r\n <button mat-flat-button (click)=\"notesBlur()\">\r\n Save Feedback\r\n </button>\r\n </mat-card-actions>\r\n </mat-card>\r\n </ng-template>\r\n\r\n } @else if(col.formControlName === 'status'){\r\n <mat-form-field floatLabel=\"always\" subscriptSizing=\"dynamic\" style=\"width: 100%;\r\n margin-bottom: 8px;\r\n margin-top: 8px;\r\n border-radius:16px;\" appearance=\"outline\">\r\n <mat-select\r\n [disabled]=\"!canChangeStatus(row)\"\r\n [style.color]=\"row['adj_microFlow_review'] === 'non-compliant' ? 'var(--mat-sys-error)' : row['adj_microFlow_review']==='compliant'? 'var(--mat-sys-primary)' : ''\"\r\n (selectionChange)=\"setResponseStatus(row,$event)\" ngDefaultControl [value]=\"row.adj_microFlow_review\"\r\n placeholder=\" Select Status\">\r\n @for (type of reviewStatuses || []; track type) {\r\n <mat-option [value]=\"type.value\">{{type.label}}</mat-option>\r\n }\r\n </mat-select>\r\n @if(row['adj_microFlow_review']==='non-compliant' && !row['adj_microFlow_review_notes']){\r\n <mat-hint style=\"color:var(--mat-sys-error)\">\r\n Rejection reason is required. Add a review note.\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n\r\n } @else {\r\n @switch (col?.type) {\r\n @case ('daysAgo') {\r\n {{ row[col.formControlName] | daysAgo }}\r\n }\r\n @case ('number') {\r\n <div class=\"number-cell\">\r\n <span>\r\n {{ (row[col.formControlName] | number:'0.0-0' ) || 'N/A' }}\r\n </span>\r\n @if (col.showColor) {\r\n <mat-icon [style.color]=\"row.adjudicationPricePreferenceCalculationColor\">\r\n fiber_manual_record\r\n </mat-icon>\r\n }\r\n </div>\r\n }\r\n @default {\r\n @if($index === 0) {\r\n <span class=\"main-submission-text\">\r\n <mat-icon style=\"font-size: 16px;height:16px;width:16px\">domain</mat-icon>\r\n <strong>\r\n {{ row[col.formControlName] }}\r\n </strong>\r\n </span>\r\n <span class=\"secondary-text\">\r\n <mat-icon>fingerprint</mat-icon>\r\n {{row[vm.columnMapping.respondentCodeKey]}}\r\n <mat-icon>more_time</mat-icon>\r\n {{ row[vm.columnMapping.responseDateKey ||''] | daysAgo}}\r\n </span>\r\n } @else {\r\n {{ row[col.formControlName] }}\r\n }\r\n }\r\n }\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n <tr mat-header-row *matHeaderRowDef=\"vm.displayCols\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: vm.displayCols\"></tr>\r\n </table>\r\n \r\n\r\n</ng-template>\r\n\r\n}\r\n", styles: [".number{display:flex;justify-content:space-between;align-items:center}li{font-size:12px}ol,ul{margin-top:8px}.number-cell{display:flex;justify-content:space-between;align-items:center;width:100%}.secondary-text{display:flex;align-items:center;white-space:pre;gap:8px;opacity:.8}.secondary-text mat-icon{font-size:14px;width:14px;height:14px}.mat-column-adjudicationPricePreferenceCalculation{max-width:70px}.mat-column-actions{padding:0;max-width:80px}.mat-column-status{padding-left:8px;padding-right:8px;max-width:fit-content!important}.main-submission-text{display:flex;align-items:center;gap:8px;font-size:16px}.notes-card{width:100%;max-width:480px;resize:both;height:fit-content!important}.smallIcon{font-size:14px;width:14px;height:14px}\n"] }]
|
|
12313
|
+
}], propDecorators: { inputConfig: [{
|
|
12314
|
+
type: Input
|
|
12315
|
+
}], value: [{
|
|
12316
|
+
type: Input
|
|
12317
|
+
}], reviewChange: [{
|
|
12318
|
+
type: Output
|
|
12319
|
+
}] } });
|
|
12320
|
+
|
|
11888
12321
|
const customInputConfig = {
|
|
11889
12322
|
controlType: 'lib-workflow-adjudication-reactive-input',
|
|
11890
12323
|
nextId: 0
|
|
@@ -11895,6 +12328,7 @@ class WorkflowAdjudicationReactiveInputComponent extends BaseCustomInput {
|
|
|
11895
12328
|
}
|
|
11896
12329
|
constructor(ngControl, elementRef) {
|
|
11897
12330
|
super(ngControl, elementRef, customInputConfig);
|
|
12331
|
+
this.adjudicationSteps = AdjudicationSteps;
|
|
11898
12332
|
this.editorMode = false;
|
|
11899
12333
|
}
|
|
11900
12334
|
set inputConfig(inputConfig) {
|
|
@@ -11912,14 +12346,14 @@ class WorkflowAdjudicationReactiveInputComponent extends BaseCustomInput {
|
|
|
11912
12346
|
this.onTouched();
|
|
11913
12347
|
}
|
|
11914
12348
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WorkflowAdjudicationReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11915
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
12349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: WorkflowAdjudicationReactiveInputComponent, isStandalone: true, selector: "lib-workflow-adjudication-reactive-input", inputs: { formBuilderFunctions: "formBuilderFunctions", editorMode: "editorMode", inputConfig: "inputConfig" }, host: { properties: { "lib-workflow-adjudication-reactive-input.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: WorkflowAdjudicationReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "@switch (inputConfig.adjudicationStep) {\r\n@case (adjudicationSteps.ScoreCreation) {\r\n<app-points-creation [inputConfig]=\"inputConfig\" [value]=\"value\" (pointsChange)=\"setValue($event)\">\r\n</app-points-creation>\r\n}\r\n@case (adjudicationSteps.SubMissionReview) {\r\n<app-submission-review \r\n[inputConfig]=\"inputConfig\" \r\n[value]=\"value\" (reviewChange)=\"setValue($event)\"></app-submission-review>\r\n}\r\n@default {\r\n<h6>\r\n {{ inputConfig.adjudicationStep | titlecase }} is not implemented yet.\r\n</h6>\r\n}\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: PointsCreationComponent, selector: "app-points-creation", inputs: ["value", "inputConfig"], outputs: ["pointsChange"] }, { kind: "component", type: SubmissionReviewComponent, selector: "app-submission-review", inputs: ["inputConfig", "value"], outputs: ["reviewChange"] }] }); }
|
|
11916
12350
|
}
|
|
11917
12351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WorkflowAdjudicationReactiveInputComponent, decorators: [{
|
|
11918
12352
|
type: Component,
|
|
11919
|
-
args: [{ selector: 'lib-workflow-adjudication-reactive-input', imports: [CommonModule, PointsCreationComponent], host: {
|
|
12353
|
+
args: [{ selector: 'lib-workflow-adjudication-reactive-input', imports: [CommonModule, PointsCreationComponent, SubmissionReviewComponent], host: {
|
|
11920
12354
|
'[lib-workflow-adjudication-reactive-input.floating]': 'shouldLabelFloat',
|
|
11921
12355
|
'[id]': 'id',
|
|
11922
|
-
}, providers: [{ provide: MatFormFieldControl, useExisting: WorkflowAdjudicationReactiveInputComponent }], template: "<app-points-creation [inputConfig]=\"inputConfig\" \r\n[
|
|
12356
|
+
}, providers: [{ provide: MatFormFieldControl, useExisting: WorkflowAdjudicationReactiveInputComponent }], template: "@switch (inputConfig.adjudicationStep) {\r\n@case (adjudicationSteps.ScoreCreation) {\r\n<app-points-creation [inputConfig]=\"inputConfig\" [value]=\"value\" (pointsChange)=\"setValue($event)\">\r\n</app-points-creation>\r\n}\r\n@case (adjudicationSteps.SubMissionReview) {\r\n<app-submission-review \r\n[inputConfig]=\"inputConfig\" \r\n[value]=\"value\" (reviewChange)=\"setValue($event)\"></app-submission-review>\r\n}\r\n@default {\r\n<h6>\r\n {{ inputConfig.adjudicationStep | titlecase }} is not implemented yet.\r\n</h6>\r\n}\r\n}" }]
|
|
11923
12357
|
}], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
|
|
11924
12358
|
type: Optional
|
|
11925
12359
|
}, {
|
|
@@ -11941,14 +12375,14 @@ class WorkflowAdjudicationComponent {
|
|
|
11941
12375
|
return getInputErrorMessage(this.inputConfig, this.formGroup);
|
|
11942
12376
|
}
|
|
11943
12377
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WorkflowAdjudicationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11944
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: WorkflowAdjudicationComponent, isStandalone: true, selector: "lib-workflow-adjudication", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" [floatLabel]=\"'always'\" subscriptSizing=\"dynamic\"\r\n *ngIf=\"this.inputConfig as inputConfig\">\r\n <mat-label>\r\n {{this.inputConfig.label }}\r\n <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n\r\n
|
|
12378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: WorkflowAdjudicationComponent, isStandalone: true, selector: "lib-workflow-adjudication", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" [floatLabel]=\"'always'\" subscriptSizing=\"dynamic\"\r\n *ngIf=\"this.inputConfig as inputConfig\">\r\n <mat-label>\r\n {{this.inputConfig.label }}\r\n <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n \r\n <lib-workflow-adjudication-reactive-input \r\n [inputConfig]=\"this.inputConfig\" \r\n [formControlName]=\"this.inputConfig.id\"\r\n [required]=\"this.inputConfig.required\"\r\n [formGroup]=\"formGroup\" \r\n [editorMode]=\"editorMode\"\r\n [formBuilderFunctions]=\"formBuilderFunctions\">\r\n\r\n </lib-workflow-adjudication-reactive-input>\r\n\r\n\r\n\r\n @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n <mat-hint class=\"inputHint\">\r\n {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n\r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n mat-icon-button matSuffix>\r\n <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n </button> -->\r\n </ng-container>\r\n\r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n\r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n\r\n\r\n </mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WorkflowAdjudicationReactiveInputComponent, selector: "lib-workflow-adjudication-reactive-input", inputs: ["formBuilderFunctions", "editorMode", "inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
|
|
11945
12379
|
}
|
|
11946
12380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: WorkflowAdjudicationComponent, decorators: [{
|
|
11947
12381
|
type: Component,
|
|
11948
12382
|
args: [{ selector: 'lib-workflow-adjudication', imports: [MatModulesModule, ReactiveFormsModule,
|
|
11949
12383
|
CommonModule,
|
|
11950
12384
|
WorkflowAdjudicationReactiveInputComponent,
|
|
11951
|
-
TFormInputStatusComponent,], template: "<form [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" [floatLabel]=\"'always'\" subscriptSizing=\"dynamic\"\r\n *ngIf=\"this.inputConfig as inputConfig\">\r\n <mat-label>\r\n {{this.inputConfig.label }}\r\n <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n\r\n
|
|
12385
|
+
TFormInputStatusComponent,], template: "<form [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" [floatLabel]=\"'always'\" subscriptSizing=\"dynamic\"\r\n *ngIf=\"this.inputConfig as inputConfig\">\r\n <mat-label>\r\n {{this.inputConfig.label }}\r\n <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n </mat-label>\r\n \r\n <lib-workflow-adjudication-reactive-input \r\n [inputConfig]=\"this.inputConfig\" \r\n [formControlName]=\"this.inputConfig.id\"\r\n [required]=\"this.inputConfig.required\"\r\n [formGroup]=\"formGroup\" \r\n [editorMode]=\"editorMode\"\r\n [formBuilderFunctions]=\"formBuilderFunctions\">\r\n\r\n </lib-workflow-adjudication-reactive-input>\r\n\r\n\r\n\r\n @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n <mat-hint class=\"inputHint\">\r\n {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n </mat-hint>\r\n }\r\n\r\n @if (!!errorMessage) {\r\n <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n }\r\n <!-- Prefix Icon -->\r\n <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n <!-- Suffix Icon or Password Visibility Toggle -->\r\n <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n }}</mat-icon>\r\n <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n mat-icon-button matSuffix>\r\n <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n </button> -->\r\n </ng-container>\r\n\r\n <!-- Prefix & Suffix Text -->\r\n <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n }}</span>\r\n\r\n <!-- Character Count Hint -->\r\n <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n }}\r\n </mat-hint>\r\n\r\n\r\n </mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
|
|
11952
12386
|
}], propDecorators: { inputConfig: [{
|
|
11953
12387
|
type: Input
|
|
11954
12388
|
}], editorMode: [{
|
|
@@ -12037,11 +12471,37 @@ var tFormInput_component = /*#__PURE__*/Object.freeze({
|
|
|
12037
12471
|
TFormInputComponent: TFormInputComponent
|
|
12038
12472
|
});
|
|
12039
12473
|
|
|
12474
|
+
class TourManagerService {
|
|
12475
|
+
constructor() {
|
|
12476
|
+
this.tourService = inject(TourService);
|
|
12477
|
+
this.userProfile = this;
|
|
12478
|
+
}
|
|
12479
|
+
startTourByOption(steps) {
|
|
12480
|
+
this.tourService.end();
|
|
12481
|
+
this.tourService.initialize(steps, {
|
|
12482
|
+
enableBackdrop: true,
|
|
12483
|
+
backdropConfig: {
|
|
12484
|
+
offset: 10,
|
|
12485
|
+
},
|
|
12486
|
+
});
|
|
12487
|
+
this.tourService.start();
|
|
12488
|
+
}
|
|
12489
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TourManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
12490
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TourManagerService, providedIn: 'root' }); }
|
|
12491
|
+
}
|
|
12492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TourManagerService, decorators: [{
|
|
12493
|
+
type: Injectable,
|
|
12494
|
+
args: [{
|
|
12495
|
+
providedIn: 'root'
|
|
12496
|
+
}]
|
|
12497
|
+
}], ctorParameters: () => [] });
|
|
12498
|
+
|
|
12040
12499
|
class UserFormStepperComponent extends FormTowerControllerService {
|
|
12041
12500
|
constructor() {
|
|
12042
12501
|
super(...arguments);
|
|
12043
12502
|
this.loading = false;
|
|
12044
12503
|
this.isEditable = true;
|
|
12504
|
+
this.tourManagerService = inject(TourManagerService);
|
|
12045
12505
|
}
|
|
12046
12506
|
/**
|
|
12047
12507
|
* Handles the key down event and opens the application log if the key combination is pressed.
|
|
@@ -12149,8 +12609,12 @@ class UserFormStepperComponent extends FormTowerControllerService {
|
|
|
12149
12609
|
handleSubmit() {
|
|
12150
12610
|
this.submitForm(this.passParamsOnSubmit);
|
|
12151
12611
|
}
|
|
12612
|
+
startTour(sectionId) {
|
|
12613
|
+
const tourOptions = this.selectAllFormTours().filter((step) => step.sectionId === sectionId);
|
|
12614
|
+
this.tourManagerService.startTourByOption(tourOptions);
|
|
12615
|
+
}
|
|
12152
12616
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: UserFormStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
12153
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: UserFormStepperComponent, isStandalone: true, selector: "lib-user-form-stepper", inputs: { formId: "formId", initialValues: "initialValues", passParamsOnSubmit: "passParamsOnSubmit" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n<mat-stepper [style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n (selectionChange)=\"handleStepChange($event)\">\r\n\r\n @for (step of selectFormSteps(); track step.sectionId) {\r\n @if (!!step.sectionForm ) {\r\n <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n <ng-template matStepLabel>\r\n <div class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n @if (step.sectionIsSeen) {\r\n <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n {{step.sectionIsSeen}}\r\n </mat-icon>\r\n }\r\n\r\n <span class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n <button tourAnchor=\"Form-Tour-trigger\" matTooltip=\"Start section tour\" mat-button>\r\n <mat-icon>tour</mat-icon>\r\n </button>\r\n </span>\r\n </div>\r\n </ng-template>\r\n @if(!!step.isActive){\r\n @defer (on viewport; prefetch on idle) {\r\n <div class=\"step-content\">\r\n <div class=\"row form-section\">\r\n @for (col of step.columns; track col.id) {\r\n <div [class]=\"'col-md-'+col.colSize + ' box'\">\r\n <lib-t-form-input [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n \r\n [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n [attr.aria-label]=\"col?.label || ''\">\r\n </lib-t-form-input>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"step-actions\">\r\n @if(!$first) {\r\n <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n Back\r\n </button>\r\n }\r\n @if (!$last) {\r\n <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n Next\r\n </button>\r\n }\r\n @if (!!$last) {\r\n <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n }\r\n </div>\r\n </div>\r\n } @placeholder {\r\n <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"24\" />\r\n </div>\r\n }\r\n\r\n }\r\n\r\n </mat-step>\r\n }\r\n }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n <span class=\"submission-status\" role=\"status\">\r\n {{getSubmissionStatus}}\r\n </span>\r\n <button mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n aria-label=\"Submit form\">\r\n <span>\r\n {{ formSubmissionMessage()}}\r\n </span>\r\n @if(submittingForm){\r\n <mat-spinner diameter=\"10\"></mat-spinner>\r\n }\r\n\r\n </button>\r\n </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:12px;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:12px;opacity:.87;display:flex;align-items:center}.box{padding:8px 5px 5px}.tour-trigger{position:absolute;right:8px;font-size:12px;opacity:.6}.tour-trigger:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$
|
|
12617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: UserFormStepperComponent, isStandalone: true, selector: "lib-user-form-stepper", inputs: { formId: "formId", initialValues: "initialValues", passParamsOnSubmit: "passParamsOnSubmit" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n<mat-stepper [style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n (selectionChange)=\"handleStepChange($event)\">\r\n\r\n @for (step of selectFormSteps(); track step.sectionId) {\r\n @if (!!step.sectionForm ) {\r\n <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n <ng-template matStepLabel>\r\n <div class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n @if (step.sectionIsSeen) {\r\n <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n {{step.sectionIsSeen}}\r\n </mat-icon>\r\n }\r\n\r\n <span \r\n (click)=\"startTour(step.sectionId)\"\r\n class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n <button tourAnchor=\"Form-Tour-trigger\" matTooltip=\"Start section tour\" mat-button >\r\n <mat-icon>tour</mat-icon>\r\n </button>\r\n </span>\r\n </div>\r\n </ng-template>\r\n @if(!!step.isActive){\r\n @defer (on viewport; prefetch on idle) {\r\n <div class=\"step-content\">\r\n <div class=\"row form-section\">\r\n @for (col of step.columns; track col.id) {\r\n <div [class]=\"'col-md-'+col.colSize + ' box'\">\r\n <lib-t-form-input [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n \r\n [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n [attr.aria-label]=\"col?.label || ''\">\r\n </lib-t-form-input>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"step-actions\">\r\n @if(!$first) {\r\n <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n Back\r\n </button>\r\n }\r\n @if (!$last) {\r\n <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n Next\r\n </button>\r\n }\r\n @if (!!$last) {\r\n <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n }\r\n </div>\r\n </div>\r\n } @placeholder {\r\n <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"24\" />\r\n </div>\r\n }\r\n\r\n }\r\n\r\n </mat-step>\r\n }\r\n }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n <span class=\"submission-status\" role=\"status\">\r\n {{getSubmissionStatus}}\r\n </span>\r\n <button mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n aria-label=\"Submit form\">\r\n <span>\r\n {{ formSubmissionMessage()}}\r\n </span>\r\n @if(submittingForm){\r\n <mat-spinner diameter=\"10\"></mat-spinner>\r\n }\r\n\r\n </button>\r\n </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:12px;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:12px;opacity:.87;display:flex;align-items:center}.box{padding:8px 5px 5px}.tour-trigger{position:absolute;right:8px;font-size:12px;opacity:.6}.tour-trigger:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TourMatMenuModule }, { kind: "directive", type: i7$3.TourAnchorMatMenuDirective, selector: "[tourAnchor]", inputs: ["tourAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }], deferBlockDependencies: [() => [i2.MatButton, i3$2.MatStepperNext, i3$2.MatStepperPrevious, Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent), i7$3.TourAnchorMatMenuDirective, i1$2.NgControlStatusGroup, i1$2.FormGroupDirective], () => [i2.MatButton, i7.MatProgressSpinner, i9.MatToolbar]] }); }
|
|
12154
12618
|
}
|
|
12155
12619
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: UserFormStepperComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent)], resolveMetadata: TFormInputComponent => ({ decorators: [{
|
|
12156
12620
|
type: Component,
|
|
@@ -12160,7 +12624,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ng
|
|
|
12160
12624
|
TFormInputComponent,
|
|
12161
12625
|
TourMatMenuModule,
|
|
12162
12626
|
ReactiveFormsModule
|
|
12163
|
-
], standalone: true, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n<mat-stepper [style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n (selectionChange)=\"handleStepChange($event)\">\r\n\r\n @for (step of selectFormSteps(); track step.sectionId) {\r\n @if (!!step.sectionForm ) {\r\n <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n <ng-template matStepLabel>\r\n <div class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n @if (step.sectionIsSeen) {\r\n <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n {{step.sectionIsSeen}}\r\n </mat-icon>\r\n }\r\n\r\n <span class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n <button tourAnchor=\"Form-Tour-trigger\" matTooltip=\"Start section tour\" mat-button>\r\n <mat-icon>tour</mat-icon>\r\n </button>\r\n </span>\r\n </div>\r\n </ng-template>\r\n @if(!!step.isActive){\r\n @defer (on viewport; prefetch on idle) {\r\n <div class=\"step-content\">\r\n <div class=\"row form-section\">\r\n @for (col of step.columns; track col.id) {\r\n <div [class]=\"'col-md-'+col.colSize + ' box'\">\r\n <lib-t-form-input [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n \r\n [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n [attr.aria-label]=\"col?.label || ''\">\r\n </lib-t-form-input>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"step-actions\">\r\n @if(!$first) {\r\n <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n Back\r\n </button>\r\n }\r\n @if (!$last) {\r\n <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n Next\r\n </button>\r\n }\r\n @if (!!$last) {\r\n <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n }\r\n </div>\r\n </div>\r\n } @placeholder {\r\n <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"24\" />\r\n </div>\r\n }\r\n\r\n }\r\n\r\n </mat-step>\r\n }\r\n }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n <span class=\"submission-status\" role=\"status\">\r\n {{getSubmissionStatus}}\r\n </span>\r\n <button mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n aria-label=\"Submit form\">\r\n <span>\r\n {{ formSubmissionMessage()}}\r\n </span>\r\n @if(submittingForm){\r\n <mat-spinner diameter=\"10\"></mat-spinner>\r\n }\r\n\r\n </button>\r\n </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:12px;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:12px;opacity:.87;display:flex;align-items:center}.box{padding:8px 5px 5px}.tour-trigger{position:absolute;right:8px;font-size:12px;opacity:.6}.tour-trigger:hover{opacity:1}\n"] }]
|
|
12627
|
+
], standalone: true, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n<mat-stepper [style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n (selectionChange)=\"handleStepChange($event)\">\r\n\r\n @for (step of selectFormSteps(); track step.sectionId) {\r\n @if (!!step.sectionForm ) {\r\n <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n <ng-template matStepLabel>\r\n <div class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n @if (step.sectionIsSeen) {\r\n <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n {{step.sectionIsSeen}}\r\n </mat-icon>\r\n }\r\n\r\n <span \r\n (click)=\"startTour(step.sectionId)\"\r\n class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n <button tourAnchor=\"Form-Tour-trigger\" matTooltip=\"Start section tour\" mat-button >\r\n <mat-icon>tour</mat-icon>\r\n </button>\r\n </span>\r\n </div>\r\n </ng-template>\r\n @if(!!step.isActive){\r\n @defer (on viewport; prefetch on idle) {\r\n <div class=\"step-content\">\r\n <div class=\"row form-section\">\r\n @for (col of step.columns; track col.id) {\r\n <div [class]=\"'col-md-'+col.colSize + ' box'\">\r\n <lib-t-form-input [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n \r\n [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n [attr.aria-label]=\"col?.label || ''\">\r\n </lib-t-form-input>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"step-actions\">\r\n @if(!$first) {\r\n <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n Back\r\n </button>\r\n }\r\n @if (!$last) {\r\n <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n Next\r\n </button>\r\n }\r\n @if (!!$last) {\r\n <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n }\r\n </div>\r\n </div>\r\n } @placeholder {\r\n <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n <mat-spinner diameter=\"24\" />\r\n </div>\r\n }\r\n\r\n }\r\n\r\n </mat-step>\r\n }\r\n }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n <span class=\"submission-status\" role=\"status\">\r\n {{getSubmissionStatus}}\r\n </span>\r\n <button mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n aria-label=\"Submit form\">\r\n <span>\r\n {{ formSubmissionMessage()}}\r\n </span>\r\n @if(submittingForm){\r\n <mat-spinner diameter=\"10\"></mat-spinner>\r\n }\r\n\r\n </button>\r\n </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:12px;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:12px;opacity:.87;display:flex;align-items:center}.box{padding:8px 5px 5px}.tour-trigger{position:absolute;right:8px;font-size:12px;opacity:.6}.tour-trigger:hover{opacity:1}\n"] }]
|
|
12164
12628
|
}], ctorParameters: null, propDecorators: {
|
|
12165
12629
|
/**
|
|
12166
12630
|
* Handles the key down event and opens the application log if the key combination is pressed.
|
|
@@ -12207,5 +12671,5 @@ console.debug = () => { };
|
|
|
12207
12671
|
* Generated bundle index. Do not edit.
|
|
12208
12672
|
*/
|
|
12209
12673
|
|
|
12210
|
-
export {
|
|
12211
|
-
//# sourceMappingURL=ngx-t-forms-ngx-t-forms-
|
|
12674
|
+
export { MscoaFormInputComponent as A, UserFormStepperComponent as B, TFormInputComponent as C, DaysAgoPipe as D, DialogTemplateComponent as E, FormsStoreService as F, SignatureInputElementComponent as G, FormatDataPipe as H, returnDeepProperty as I, safeReturnDeepProperty as J, validateObjectAgainstString as K, validateExpressionSyntax as L, MatModulesModule as M, NGX_T_FORMS_CONFIG_TOKEN as N, getUrl as O, PropertyAccessError as P, textIconsForUserHints as Q, getSampleValueForInput as R, SearchListPipe as S, TDynamicDataEditComponent as T, UTILS_OBJECT_TOKEN as U, ValidationExpressioCreatorComponent as V, createFileFromBase64 as W, index as X, _isEqual as _, assignDeepPropertyToObject as a, TDynamicDataViewComponent as b, FormTowerControllerService as c, TourManagerService as d, getSubmissionStatusFn as e, getInputIllustration as f, getAvatar as g, TreeComponent as h, convertPostmanFolderItemsToTree as i, NgxTFormsService as j, NgxTFormsComponent as k, initFormConfigToV2 as l, formGenerator as m, getSectionElements as n, getValueFromValueAccessor as o, provideNgxTForms as p, FORM_ACTIONS_TOKEN as q, returnMappedPathValue as r, FORM_CONFIG_TOKEN as s, testAgainstItem as t, FORM_SLIDES_TOKEN as u, FORM_INPUTS_TOKEN as v, MULTIPLE_FORM_INPUT_TOKEN as w, MSCOA_TREE_PROVIDER as x, FormsComponent as y, FormBuilderComponent as z };
|
|
12675
|
+
//# sourceMappingURL=ngx-t-forms-ngx-t-forms-zYBCwTI4.mjs.map
|