ngx-t-forms 2.0.16 → 2.0.17
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-api-value-access-rules.component-DADGz7pX.mjs → ngx-t-forms-api-value-access-rules.component-DscZEY73.mjs} +4 -4
- package/fesm2022/{ngx-t-forms-api-value-access-rules.component-DADGz7pX.mjs.map → ngx-t-forms-api-value-access-rules.component-DscZEY73.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-calculated-field-rules.component-BkkHK5vI.mjs → ngx-t-forms-calculated-field-rules.component-BP6qdagA.mjs} +5 -5
- package/fesm2022/ngx-t-forms-calculated-field-rules.component-BP6qdagA.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-chip-options-creator-editor.component-CHnQQdI8.mjs → ngx-t-forms-chip-options-creator-editor.component-U-F-Mw4k.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-chip-options-creator-editor.component-CHnQQdI8.mjs.map → ngx-t-forms-chip-options-creator-editor.component-U-F-Mw4k.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-config-mscoa-additional-inputs.component-AhbjCCQv.mjs → ngx-t-forms-config-mscoa-additional-inputs.component-0Svupljo.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-config-mscoa-additional-inputs.component-AhbjCCQv.mjs.map → ngx-t-forms-config-mscoa-additional-inputs.component-0Svupljo.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-data-source-picker.component-BOlk7nkl.mjs → ngx-t-forms-data-source-picker.component-DFaFLo9z.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-data-source-picker.component-BOlk7nkl.mjs.map → ngx-t-forms-data-source-picker.component-DFaFLo9z.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-document-list-label-config-editor.component-Bc-qTS2m.mjs → ngx-t-forms-document-list-label-config-editor.component-CVF-JI3j.mjs} +3 -3
- package/fesm2022/{ngx-t-forms-document-list-label-config-editor.component-Bc-qTS2m.mjs.map → ngx-t-forms-document-list-label-config-editor.component-CVF-JI3j.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-form-input-selector.component-BuVzRUkY.mjs → ngx-t-forms-form-input-selector.component-BqJ7H_C5.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-form-input-selector.component-BuVzRUkY.mjs.map → ngx-t-forms-form-input-selector.component-BqJ7H_C5.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-form-json-view.component-hCrrYu82.mjs → ngx-t-forms-form-json-view.component-CHE8wxNI.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-form-json-view.component-hCrrYu82.mjs.map → ngx-t-forms-form-json-view.component-CHE8wxNI.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-form-section-stepper.component-CR3gyw3D.mjs → ngx-t-forms-form-section-stepper.component-CvVu8xJI.mjs} +4 -4
- package/fesm2022/{ngx-t-forms-form-section-stepper.component-CR3gyw3D.mjs.map → ngx-t-forms-form-section-stepper.component-CvVu8xJI.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-forms-builder-menu.component-DuXf9zC_.mjs → ngx-t-forms-forms-builder-menu.component-BSvhnXCy.mjs} +6 -6
- package/fesm2022/{ngx-t-forms-forms-builder-menu.component-DuXf9zC_.mjs.map → ngx-t-forms-forms-builder-menu.component-BSvhnXCy.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-input-editor.component-C5cPOIhT.mjs → ngx-t-forms-input-editor.component-C1UIixRM.mjs} +4 -4
- package/fesm2022/{ngx-t-forms-input-editor.component-C5cPOIhT.mjs.map → ngx-t-forms-input-editor.component-C1UIixRM.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-mat-chip-list-editor.component-C9Hd21i1.mjs → ngx-t-forms-mat-chip-list-editor.component-CZbupm3H.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-mat-chip-list-editor.component-C9Hd21i1.mjs.map → ngx-t-forms-mat-chip-list-editor.component-CZbupm3H.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-mat-slider-editor.component-9K8e2gqm.mjs → ngx-t-forms-mat-slider-editor.component-DKIiWPq3.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-mat-slider-editor.component-9K8e2gqm.mjs.map → ngx-t-forms-mat-slider-editor.component-DKIiWPq3.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-mat-slider-toggle-editor.component-CbYV5fCZ.mjs → ngx-t-forms-mat-slider-toggle-editor.component-MFT33hkt.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-mat-slider-toggle-editor.component-CbYV5fCZ.mjs.map → ngx-t-forms-mat-slider-toggle-editor.component-MFT33hkt.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-missing-form-configs.component-DynxybEE.mjs → ngx-t-forms-missing-form-configs.component-DO3QfrLp.mjs} +4 -4
- package/fesm2022/{ngx-t-forms-missing-form-configs.component-DynxybEE.mjs.map → ngx-t-forms-missing-form-configs.component-DO3QfrLp.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-mscoa-segment-config.component-C1zx7OZB.mjs → ngx-t-forms-mscoa-segment-config.component-Bo-aEuAQ.mjs} +4 -4
- package/fesm2022/{ngx-t-forms-mscoa-segment-config.component-C1zx7OZB.mjs.map → ngx-t-forms-mscoa-segment-config.component-Bo-aEuAQ.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-ngx-t-forms-BX1gh-MK.mjs → ngx-t-forms-ngx-t-forms-fgu62eR1.mjs} +15 -15
- package/fesm2022/ngx-t-forms-ngx-t-forms-fgu62eR1.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-pipeline-generator.component-CmSkYW71.mjs → ngx-t-forms-pipeline-generator.component-BtkYF9xE.mjs} +6 -6
- package/fesm2022/{ngx-t-forms-pipeline-generator.component-CmSkYW71.mjs.map → ngx-t-forms-pipeline-generator.component-BtkYF9xE.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-required-inputs.component-QsOGfmug.mjs → ngx-t-forms-required-inputs.component-BfrR28ge.mjs} +4 -4
- package/fesm2022/{ngx-t-forms-required-inputs.component-QsOGfmug.mjs.map → ngx-t-forms-required-inputs.component-BfrR28ge.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-rest-api-call-setup.component-CDraedkm.mjs → ngx-t-forms-rest-api-call-setup.component-Dx-EamZ8.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-rest-api-call-setup.component-CDraedkm.mjs.map → ngx-t-forms-rest-api-call-setup.component-Dx-EamZ8.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-section-report.component-DFvcLFZn.mjs → ngx-t-forms-section-report.component-Z9rqOa1d.mjs} +4 -4
- package/fesm2022/{ngx-t-forms-section-report.component-DFvcLFZn.mjs.map → ngx-t-forms-section-report.component-Z9rqOa1d.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-selection-options-editor.component-Cj7fqo70.mjs → ngx-t-forms-selection-options-editor.component-CSTV4Hqm.mjs} +2 -2
- package/fesm2022/{ngx-t-forms-selection-options-editor.component-Cj7fqo70.mjs.map → ngx-t-forms-selection-options-editor.component-CSTV4Hqm.mjs.map} +1 -1
- package/fesm2022/ngx-t-forms-validators-config.component-I346eCwr.mjs +218 -0
- package/fesm2022/ngx-t-forms-validators-config.component-I346eCwr.mjs.map +1 -0
- package/fesm2022/ngx-t-forms.mjs +1 -1
- package/package.json +1 -1
- package/fesm2022/ngx-t-forms-calculated-field-rules.component-BkkHK5vI.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-ngx-t-forms-BX1gh-MK.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-validators-config.component-DPD3QcOu.mjs +0 -218
- package/fesm2022/ngx-t-forms-validators-config.component-DPD3QcOu.mjs.map +0 -1
package/fesm2022/{ngx-t-forms-ngx-t-forms-BX1gh-MK.mjs → ngx-t-forms-ngx-t-forms-fgu62eR1.mjs}
RENAMED
|
@@ -5507,9 +5507,9 @@ class FormBuilderComponent {
|
|
|
5507
5507
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5508
5508
|
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: [
|
|
5509
5509
|
FormsStoreService
|
|
5510
|
-
], 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)}.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;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: i6.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-
|
|
5510
|
+
], 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)}.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;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: i6.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-BSvhnXCy.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-C1UIixRM.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-CvVu8xJI.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DO3QfrLp.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
|
|
5511
5511
|
}
|
|
5512
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-
|
|
5512
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-BSvhnXCy.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-C1UIixRM.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-CvVu8xJI.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DO3QfrLp.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
|
|
5513
5513
|
type: Component,
|
|
5514
5514
|
args: [{ selector: 'app-form-builder', standalone: true, imports: [CommonModule,
|
|
5515
5515
|
MatModulesModule,
|
|
@@ -5885,9 +5885,9 @@ class TDynamicDataEditComponent {
|
|
|
5885
5885
|
}
|
|
5886
5886
|
}
|
|
5887
5887
|
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 }); }
|
|
5888
|
-
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 @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 \r\n [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n [value]=\"(vm.value)\" [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 ||[]\" [errors]=\"(validationErrors)||[]\"\r\n [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 ||[]\"\r\n [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 ||[]\"\r\n [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 \r\n [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n [formInputs]=\"formInputs ||[]\" [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 \r\n [disabled]=\"(vm.disabled)||false\"\r\n [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n [dataValue]=\"vm.dataValue\" [showAllSegments]=\"vm.dataOptions\"\r\n (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n }\r\n @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n <app-config-mscoa-additional-inputs\r\n [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 \r\n [disabled]=\"(vm.disabled)||false\"\r\n (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\"\r\n [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\" (valueChange)=\"valueChanged($event)\"\r\n [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n </lib-data-source-picker>\r\n }\r\n @case (elementEditorTypes.ListLabelConfigEditor) {\r\n <lib-document-list-label-config-editor \r\n \r\n \r\n [disabled]=\"(vm.disabled)||false\"\r\n [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 }\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$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }], deferBlockDependencies: [() => [i2$2.NgForOf, i2$2.NgIf, i2$2.AsyncPipe, import('./ngx-t-forms-selection-options-editor.component-Cj7fqo70.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-BuVzRUkY.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CDraedkm.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DADGz7pX.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-QsOGfmug.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CmSkYW71.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BkkHK5vI.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-DPD3QcOu.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-AhbjCCQv.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-9K8e2gqm.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-C1zx7OZB.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CbYV5fCZ.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-C9Hd21i1.mjs').then(m => m.MatChipListEditorComponent), i3.MatOption, i2.MatIconButton, i6.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i3$1.MatSelect, i8.MatTooltip, i12.MatInput, import('./ngx-t-forms-chip-options-creator-editor.component-CHnQQdI8.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-BOlk7nkl.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-Bc-qTS2m.mjs').then(m => m.DocumentListLabelConfigEditorComponent)]] }); }
|
|
5888
|
+
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 @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 \r\n [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n [value]=\"(vm.value)\" [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 ||[]\" [errors]=\"(validationErrors)||[]\"\r\n [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 ||[]\"\r\n [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 ||[]\"\r\n [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 \r\n [disabled]=\"(vm.disabled)||false\"\r\n [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n [formInputs]=\"formInputs ||[]\" [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 \r\n [disabled]=\"(vm.disabled)||false\"\r\n [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n [dataValue]=\"vm.dataValue\" [showAllSegments]=\"vm.dataOptions\"\r\n (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n }\r\n @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n <app-config-mscoa-additional-inputs\r\n [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 \r\n [disabled]=\"(vm.disabled)||false\"\r\n (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\"\r\n [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\" (valueChange)=\"valueChanged($event)\"\r\n [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n </lib-data-source-picker>\r\n }\r\n @case (elementEditorTypes.ListLabelConfigEditor) {\r\n <lib-document-list-label-config-editor \r\n \r\n \r\n [disabled]=\"(vm.disabled)||false\"\r\n [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 }\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$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }], deferBlockDependencies: [() => [i2$2.NgForOf, i2$2.NgIf, i2$2.AsyncPipe, import('./ngx-t-forms-selection-options-editor.component-CSTV4Hqm.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-BqJ7H_C5.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-Dx-EamZ8.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DscZEY73.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BfrR28ge.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-BtkYF9xE.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BP6qdagA.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-I346eCwr.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-0Svupljo.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-DKIiWPq3.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-Bo-aEuAQ.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-MFT33hkt.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-CZbupm3H.mjs').then(m => m.MatChipListEditorComponent), i3.MatOption, i2.MatIconButton, i6.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i3$1.MatSelect, i8.MatTooltip, i12.MatInput, import('./ngx-t-forms-chip-options-creator-editor.component-U-F-Mw4k.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-DFaFLo9z.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CVF-JI3j.mjs').then(m => m.DocumentListLabelConfigEditorComponent)]] }); }
|
|
5889
5889
|
}
|
|
5890
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-
|
|
5890
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-CSTV4Hqm.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-BqJ7H_C5.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-Dx-EamZ8.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DscZEY73.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BfrR28ge.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-BtkYF9xE.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BP6qdagA.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-I346eCwr.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-0Svupljo.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-DKIiWPq3.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-Bo-aEuAQ.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-MFT33hkt.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-CZbupm3H.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-U-F-Mw4k.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-DFaFLo9z.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CVF-JI3j.mjs').then(m => m.DocumentListLabelConfigEditorComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent) => ({ decorators: [{
|
|
5891
5891
|
type: Component,
|
|
5892
5892
|
args: [{ selector: 'lib-t-dynamic-data-edit', standalone: true, imports: [CommonModule,
|
|
5893
5893
|
SelectionOptionsEditorComponent,
|
|
@@ -6663,11 +6663,11 @@ class AccountValueComponent {
|
|
|
6663
6663
|
});
|
|
6664
6664
|
}
|
|
6665
6665
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AccountValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6666
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AccountValueComponent, isStandalone: true, selector: "app-account-value", inputs: { mscoaAccount: "mscoaAccount", accountInputs: "accountInputs", userCanClearAccount: "userCanClearAccount" }, outputs: { clearSelectedAccount: "clearSelectedAccount", updateAccount: "updateAccount" }, ngImport: i0, template: "<div style=\"max-width: 500px; background: var(--mat-
|
|
6666
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AccountValueComponent, isStandalone: true, selector: "app-account-value", inputs: { mscoaAccount: "mscoaAccount", accountInputs: "accountInputs", userCanClearAccount: "userCanClearAccount" }, outputs: { clearSelectedAccount: "clearSelectedAccount", updateAccount: "updateAccount" }, ngImport: i0, template: "<div style=\"max-width: 500px; background: var(--mat-sys-surface-container);\">\r\n <mat-toolbar>\r\n Account Details\r\n <span class=\"spacer\"></span>\r\n <button *ngIf=\"userCanClearAccount\" (click)=\"clearAccount()\" mat-flat-button color=\"accent\">\r\n Clear Account\r\n <mat-icon>\r\n backspace\r\n </mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <div class=\"account-grid\">\r\n <ng-container *ngFor=\"let item of accountDetails; let last = last\">\r\n <div class=\"label\">\r\n {{item.label}}\r\n </div>\r\n <div class=\"value\">\r\n @if (item?.input) {\r\n @if( !item.value){\r\n <button (click)=\"openValueEdit(item)\" style=\"width: 100%;\" mat-stroked-button>\r\n {{item.value? item.value: 'set ' + item.label}}\r\n </button>\r\n }@else{\r\n <button color=\"primary\" (click)=\"openValueEdit(item)\" style=\"width: 100%;text-align:start\" mat-button>\r\n {{item.value? item.value: 'set ' + item.label}}\r\n </button>\r\n }\r\n }@else {\r\n {{item.value}}\r\n }\r\n </div>\r\n <mat-divider *ngIf=\"!last\"></mat-divider>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".account-card{max-width:500px;margin:20px auto;border-radius:8px;border:solid 1px #243d91}mat-card-header{background-color:#f5f5f5;padding:16px;border-bottom:1px solid #e0e0e0}mat-card-title{font-size:1.2rem;color:#333;margin:0}.account-grid{display:grid;grid-template-columns:max-content 1fr;gap:0px 16px;padding:16px;max-height:calc(95vh - 192px);overflow:auto;background:var(--mat-sys-surface)}.label{font-weight:500;color:#555;text-align:right;font-size:14px}.value{color:#333;font-size:14px}mat-divider{grid-column:1/-1;margin:8px 0}\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: "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.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
|
|
6667
6667
|
}
|
|
6668
6668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AccountValueComponent, decorators: [{
|
|
6669
6669
|
type: Component,
|
|
6670
|
-
args: [{ selector: 'app-account-value', standalone: true, imports: [CommonModule, MatModulesModule], template: "<div style=\"max-width: 500px; background: var(--mat-
|
|
6670
|
+
args: [{ selector: 'app-account-value', standalone: true, imports: [CommonModule, MatModulesModule], template: "<div style=\"max-width: 500px; background: var(--mat-sys-surface-container);\">\r\n <mat-toolbar>\r\n Account Details\r\n <span class=\"spacer\"></span>\r\n <button *ngIf=\"userCanClearAccount\" (click)=\"clearAccount()\" mat-flat-button color=\"accent\">\r\n Clear Account\r\n <mat-icon>\r\n backspace\r\n </mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <div class=\"account-grid\">\r\n <ng-container *ngFor=\"let item of accountDetails; let last = last\">\r\n <div class=\"label\">\r\n {{item.label}}\r\n </div>\r\n <div class=\"value\">\r\n @if (item?.input) {\r\n @if( !item.value){\r\n <button (click)=\"openValueEdit(item)\" style=\"width: 100%;\" mat-stroked-button>\r\n {{item.value? item.value: 'set ' + item.label}}\r\n </button>\r\n }@else{\r\n <button color=\"primary\" (click)=\"openValueEdit(item)\" style=\"width: 100%;text-align:start\" mat-button>\r\n {{item.value? item.value: 'set ' + item.label}}\r\n </button>\r\n }\r\n }@else {\r\n {{item.value}}\r\n }\r\n </div>\r\n <mat-divider *ngIf=\"!last\"></mat-divider>\r\n </ng-container>\r\n\r\n </div>\r\n</div>", styles: [".account-card{max-width:500px;margin:20px auto;border-radius:8px;border:solid 1px #243d91}mat-card-header{background-color:#f5f5f5;padding:16px;border-bottom:1px solid #e0e0e0}mat-card-title{font-size:1.2rem;color:#333;margin:0}.account-grid{display:grid;grid-template-columns:max-content 1fr;gap:0px 16px;padding:16px;max-height:calc(95vh - 192px);overflow:auto;background:var(--mat-sys-surface)}.label{font-weight:500;color:#555;text-align:right;font-size:14px}.value{color:#333;font-size:14px}mat-divider{grid-column:1/-1;margin:8px 0}\n"] }]
|
|
6671
6671
|
}], propDecorators: { mscoaAccount: [{
|
|
6672
6672
|
type: Input
|
|
6673
6673
|
}], accountInputs: [{
|
|
@@ -6942,7 +6942,7 @@ class MscoaComputationComponent {
|
|
|
6942
6942
|
return !this.segmentConfig?.readOnly;
|
|
6943
6943
|
}
|
|
6944
6944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaComputationComponent, deps: [{ token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6945
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaComputationComponent, isStandalone: true, selector: "app-mscoa-computation", ngImport: i0, template: "<mat-toolbar class=\"glass\" [color]=\"activeColumn ==='debit'?'primary':'warn'\">\r\n <span>\r\n <h1>\r\n {{ segment|| 'No segment' | titlecase}} : {{activeColumn |\r\n titlecase}}\r\n account\r\n </h1>\r\n\r\n </span>\r\n\r\n <span class=\"spacer\">\r\n </span>\r\n\r\n</mat-toolbar>\r\n\r\n@if ( _selectedAccount ) {\r\n<div style=\"max-height:calc(98vh - 128px); max-width: 98vw;\">\r\n <app-account-value [accountInputs]=\"accountInputs\" [userCanClearAccount]=\"userCanClearAccount\"\r\n [mscoaAccount]=\"_selectedAccount\" (updateAccount)=\"updateAccount($event)\"\r\n (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n </app-account-value>\r\n</div>\r\n\r\n\r\n}@else{\r\n<mat-drawer-container style=\"max-height:calc(98vh - 128px); max-width: 98vw;\" autosize>\r\n <mat-drawer #drawer style=\" \r\n max-width: 98vw;\r\n overflow: auto;\r\n background: var(--mat-
|
|
6945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaComputationComponent, isStandalone: true, selector: "app-mscoa-computation", ngImport: i0, template: "<mat-toolbar class=\"glass\" [color]=\"activeColumn ==='debit'?'primary':'warn'\">\r\n <span>\r\n <h1>\r\n {{ segment|| 'No segment' | titlecase}} : {{activeColumn |\r\n titlecase}}\r\n account\r\n </h1>\r\n\r\n </span>\r\n\r\n <span class=\"spacer\">\r\n </span>\r\n\r\n</mat-toolbar>\r\n\r\n@if ( _selectedAccount ) {\r\n<div style=\"max-height:calc(98vh - 128px); max-width: 98vw;\">\r\n <app-account-value [accountInputs]=\"accountInputs\" [userCanClearAccount]=\"userCanClearAccount\"\r\n [mscoaAccount]=\"_selectedAccount\" (updateAccount)=\"updateAccount($event)\"\r\n (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n </app-account-value>\r\n</div>\r\n\r\n\r\n}@else{\r\n<mat-drawer-container style=\"max-height:calc(98vh - 128px); max-width: 98vw;\" autosize>\r\n <mat-drawer #drawer style=\" \r\n max-width: 98vw;\r\n overflow: auto;\r\n background: var(--mat-sys-surface-container) !important;padding:16px\" mode=\"side\" position=\"end\"\r\n [opened]=\"!searchingAccounts && !!this._selected\">\r\n\r\n <h4>Select an Account</h4>\r\n <p class=\"info\">Please choose from the options below. Search results for account\r\n <strong>{{account}}</strong>\r\n </p>\r\n\r\n\r\n <app-scoa-account-table [selectedAccount]=\" _selectedAccount\" [segment]=\"segment\"\r\n (accountSelected)=\" selectAccount($event)\" [data]=\"{\r\n accounts: searchAccount,\r\n account: ''\r\n }\">\r\n </app-scoa-account-table>\r\n\r\n <footer>\r\n <mat-toolbar>\r\n <span class=\"spacer\"></span>\r\n <button mat-flat-button color=\"warn\" (click)=\"cancel()\">Cancel account selection</button>\r\n\r\n </mat-toolbar>\r\n </footer>\r\n </mat-drawer>\r\n <div class=\"tree-content\">\r\n\r\n <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n\r\n\r\n <button class=\"toggle-button\" mat-icon-button disabled></button>\r\n <mat-checkbox (change)=\"selectNode(node)\"\r\n disabled=\"{{isActivePathOrParent(node.path) && searchingAccounts}}\"\r\n [checked]=\"isActivePathOrParent(node.path)\">\r\n <mat-spinner color=\"primary\" *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n class=\"loading\"></mat-spinner>\r\n <span *ngIf=\"!(isActivePathOrParent(node.path) && searchingAccounts)\" class=\"label\"\r\n [class.selected]=\"isActivePathOrParent(node.path)\">\r\n {{node.name}}\r\n\r\n </span>\r\n <span *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\" class=\"label\"\r\n [class.selected]=\"isActivePathOrParent(node.path)\">\r\n ...Loading <strong>{{node.name}}</strong> accounts\r\n </span>\r\n </mat-checkbox>\r\n\r\n </mat-tree-node>\r\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n\r\n <button class=\"toggle-button\" mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\"\r\n (click)=\"toggleNode(node)\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n </mat-icon>\r\n </button>\r\n <mat-checkbox (change)=\"selectNode(node)\" disabled=\"true\" checked=\"true\"\r\n *ngIf=\"isActivePathOrParent(node.path)\">\r\n <span class=\"label\" [class.selected]=\"isActivePathOrParent(node.path)\">\r\n {{node.name}}\r\n </span>\r\n </mat-checkbox>\r\n\r\n <span *ngIf=\"!isActivePathOrParent(node.path)\" class=\"label\"\r\n [class.selected]=\"isActivePathOrParent(node.path)\">\r\n {{node.name}} {{node.selected}}\r\n </span>\r\n\r\n\r\n\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n</mat-drawer-container>\r\n}\r\n<mat-divider></mat-divider>\r\n<mat-toolbar class=\"glass\" style=\" background: rgba(255, 255, 255, 0.15)\">\r\n <span class=\"spacer\"></span>\r\n <button mat-button (click)=\"closeAndPassData(undefined)\">Close</button>\r\n @if (userCanClearAccount&& !!_selectedAccount?._id) {\r\n <button mat-raised-button color=\"primary\" [disabled]=\"!saveSelection\" (click)=\"saveAccount()\">Save</button>\r\n }\r\n\r\n</mat-toolbar>", styles: ["h4{margin-top:0;margin-bottom:0;padding-left:16px}.label{font-size:14px}.selected{color:#243d91!important;font-weight:500}.accountSeperator{margin-left:2px;margin-right:2px}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:8px;bottom:8px}.info{font-size:.875rem;opacity:.8;padding-left:16px;border-radius:4px;margin-top:10px;line-height:1.6;max-width:500px}.info strong{opacity:1}.toggle-button{height:28px;width:28px;padding:0;margin-right:4px;margin-left:4px}mat-tree{min-height:368px;min-width:fit-content;max-height:calc(98vh - 128px);overflow:auto;margin-top:8px}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:4px!important;box-sizing:border-box;width:100%;padding-top:2px!important;padding-bottom:2px!important}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:4px 0;box-sizing:border-box}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px;max-width:236px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;max-width:236px;min-height:fit-content}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}\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: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.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: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i3$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i3$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$3.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "component", type: AccountValueComponent, selector: "app-account-value", inputs: ["mscoaAccount", "accountInputs", "userCanClearAccount"], outputs: ["clearSelectedAccount", "updateAccount"] }, { kind: "component", type: ScoaAccountTableComponent, selector: "app-scoa-account-table", inputs: ["data", "selectedAccount", "segment"], outputs: ["accountSelected"] }] }); }
|
|
6946
6946
|
}
|
|
6947
6947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaComputationComponent, decorators: [{
|
|
6948
6948
|
type: Component,
|
|
@@ -6950,7 +6950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
6950
6950
|
MatModulesModule,
|
|
6951
6951
|
AccountValueComponent,
|
|
6952
6952
|
ScoaAccountTableComponent
|
|
6953
|
-
], template: "<mat-toolbar class=\"glass\" [color]=\"activeColumn ==='debit'?'primary':'warn'\">\r\n <span>\r\n <h1>\r\n {{ segment|| 'No segment' | titlecase}} : {{activeColumn |\r\n titlecase}}\r\n account\r\n </h1>\r\n\r\n </span>\r\n\r\n <span class=\"spacer\">\r\n </span>\r\n\r\n</mat-toolbar>\r\n\r\n@if ( _selectedAccount ) {\r\n<div style=\"max-height:calc(98vh - 128px); max-width: 98vw;\">\r\n <app-account-value [accountInputs]=\"accountInputs\" [userCanClearAccount]=\"userCanClearAccount\"\r\n [mscoaAccount]=\"_selectedAccount\" (updateAccount)=\"updateAccount($event)\"\r\n (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n </app-account-value>\r\n</div>\r\n\r\n\r\n}@else{\r\n<mat-drawer-container style=\"max-height:calc(98vh - 128px); max-width: 98vw;\" autosize>\r\n <mat-drawer #drawer style=\" \r\n max-width: 98vw;\r\n overflow: auto;\r\n background: var(--mat-
|
|
6953
|
+
], template: "<mat-toolbar class=\"glass\" [color]=\"activeColumn ==='debit'?'primary':'warn'\">\r\n <span>\r\n <h1>\r\n {{ segment|| 'No segment' | titlecase}} : {{activeColumn |\r\n titlecase}}\r\n account\r\n </h1>\r\n\r\n </span>\r\n\r\n <span class=\"spacer\">\r\n </span>\r\n\r\n</mat-toolbar>\r\n\r\n@if ( _selectedAccount ) {\r\n<div style=\"max-height:calc(98vh - 128px); max-width: 98vw;\">\r\n <app-account-value [accountInputs]=\"accountInputs\" [userCanClearAccount]=\"userCanClearAccount\"\r\n [mscoaAccount]=\"_selectedAccount\" (updateAccount)=\"updateAccount($event)\"\r\n (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n </app-account-value>\r\n</div>\r\n\r\n\r\n}@else{\r\n<mat-drawer-container style=\"max-height:calc(98vh - 128px); max-width: 98vw;\" autosize>\r\n <mat-drawer #drawer style=\" \r\n max-width: 98vw;\r\n overflow: auto;\r\n background: var(--mat-sys-surface-container) !important;padding:16px\" mode=\"side\" position=\"end\"\r\n [opened]=\"!searchingAccounts && !!this._selected\">\r\n\r\n <h4>Select an Account</h4>\r\n <p class=\"info\">Please choose from the options below. Search results for account\r\n <strong>{{account}}</strong>\r\n </p>\r\n\r\n\r\n <app-scoa-account-table [selectedAccount]=\" _selectedAccount\" [segment]=\"segment\"\r\n (accountSelected)=\" selectAccount($event)\" [data]=\"{\r\n accounts: searchAccount,\r\n account: ''\r\n }\">\r\n </app-scoa-account-table>\r\n\r\n <footer>\r\n <mat-toolbar>\r\n <span class=\"spacer\"></span>\r\n <button mat-flat-button color=\"warn\" (click)=\"cancel()\">Cancel account selection</button>\r\n\r\n </mat-toolbar>\r\n </footer>\r\n </mat-drawer>\r\n <div class=\"tree-content\">\r\n\r\n <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n\r\n\r\n <button class=\"toggle-button\" mat-icon-button disabled></button>\r\n <mat-checkbox (change)=\"selectNode(node)\"\r\n disabled=\"{{isActivePathOrParent(node.path) && searchingAccounts}}\"\r\n [checked]=\"isActivePathOrParent(node.path)\">\r\n <mat-spinner color=\"primary\" *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n class=\"loading\"></mat-spinner>\r\n <span *ngIf=\"!(isActivePathOrParent(node.path) && searchingAccounts)\" class=\"label\"\r\n [class.selected]=\"isActivePathOrParent(node.path)\">\r\n {{node.name}}\r\n\r\n </span>\r\n <span *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\" class=\"label\"\r\n [class.selected]=\"isActivePathOrParent(node.path)\">\r\n ...Loading <strong>{{node.name}}</strong> accounts\r\n </span>\r\n </mat-checkbox>\r\n\r\n </mat-tree-node>\r\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n\r\n <button class=\"toggle-button\" mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\"\r\n (click)=\"toggleNode(node)\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n </mat-icon>\r\n </button>\r\n <mat-checkbox (change)=\"selectNode(node)\" disabled=\"true\" checked=\"true\"\r\n *ngIf=\"isActivePathOrParent(node.path)\">\r\n <span class=\"label\" [class.selected]=\"isActivePathOrParent(node.path)\">\r\n {{node.name}}\r\n </span>\r\n </mat-checkbox>\r\n\r\n <span *ngIf=\"!isActivePathOrParent(node.path)\" class=\"label\"\r\n [class.selected]=\"isActivePathOrParent(node.path)\">\r\n {{node.name}} {{node.selected}}\r\n </span>\r\n\r\n\r\n\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n</mat-drawer-container>\r\n}\r\n<mat-divider></mat-divider>\r\n<mat-toolbar class=\"glass\" style=\" background: rgba(255, 255, 255, 0.15)\">\r\n <span class=\"spacer\"></span>\r\n <button mat-button (click)=\"closeAndPassData(undefined)\">Close</button>\r\n @if (userCanClearAccount&& !!_selectedAccount?._id) {\r\n <button mat-raised-button color=\"primary\" [disabled]=\"!saveSelection\" (click)=\"saveAccount()\">Save</button>\r\n }\r\n\r\n</mat-toolbar>", styles: ["h4{margin-top:0;margin-bottom:0;padding-left:16px}.label{font-size:14px}.selected{color:#243d91!important;font-weight:500}.accountSeperator{margin-left:2px;margin-right:2px}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:8px;bottom:8px}.info{font-size:.875rem;opacity:.8;padding-left:16px;border-radius:4px;margin-top:10px;line-height:1.6;max-width:500px}.info strong{opacity:1}.toggle-button{height:28px;width:28px;padding:0;margin-right:4px;margin-left:4px}mat-tree{min-height:368px;min-width:fit-content;max-height:calc(98vh - 128px);overflow:auto;margin-top:8px}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:4px!important;box-sizing:border-box;width:100%;padding-top:2px!important;padding-bottom:2px!important}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:4px 0;box-sizing:border-box}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px;max-width:236px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;max-width:236px;min-height:fit-content}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}\n"] }]
|
|
6954
6954
|
}], ctorParameters: () => [{ type: i1$1.MatDialogRef }] });
|
|
6955
6955
|
|
|
6956
6956
|
;
|
|
@@ -7311,11 +7311,11 @@ class MscoaChartComponent {
|
|
|
7311
7311
|
return false;
|
|
7312
7312
|
}
|
|
7313
7313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaChartComponent, deps: [{ token: MscoaComponentStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", readonly: "readonly", config: "config", formGroup: "formGroup" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, providers: [MscoaComponentStore,], ngImport: i0, template: "\r\n<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n @if (viewData.loading) {\r\n <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n } @else {\r\n @defer (on viewport) {\r\n <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n <div class=\"table-container\">\r\n <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n @for (col of viewData.cols; track col; let i = $index) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n style=\"background: var(--mat-
|
|
7314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", readonly: "readonly", config: "config", formGroup: "formGroup" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, providers: [MscoaComponentStore,], ngImport: i0, template: "\r\n<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n @if (viewData.loading) {\r\n <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n } @else {\r\n @defer (on viewport) {\r\n <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n <div class=\"table-container\">\r\n <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n @for (col of viewData.cols; track col; let i = $index) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n style=\"background: var(--mat-sys-surface-container);\" mat-header-cell *matHeaderCellDef>\r\n @if (viewData.hasMultiSelect || i === 0) {\r\n {{col | titlecase | unCamelCase}}\r\n } @else if (col === 'debit') {\r\n Debit / Credit\r\n }@else if (col === 'vatDebit') {\r\n VAT Debit / Credit\r\n }@else{\r\n {{col | unCamelCase}} / credit\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n [ngClass]=\"{'segment-cell': i === 0}\"\r\n [class.active]=\"editSelection?.segment === row['segment'] && activeColumn === col\">\r\n @if (i === 0) {\r\n <div style=\" display: flex\r\n;\r\n align-items: center;\r\n justify-self: right;\">\r\n\r\n @if(editorMode && row.innerInput?.id){\r\n <button mat-icon-button\r\n [matMenuTriggerData]=\"{innerInput:row.innerInput}\"\r\n [matMenuTriggerFor]=\"inputMenu\" \r\n [matTooltip]=\"'options for: ' + row.innerInput.label\">\r\n <mat-icon>\r\n more_vert\r\n </mat-icon>\r\n </button>\r\n }\r\n {{row['label']}}\r\n \r\n </div>\r\n \r\n } @else {\r\n \r\n @if(row.innerInput?.id &&formGroup && inputPortals[row.innerInput.id]){\r\n <div>\r\n <ng-template [cdkPortalOutlet]=\"inputPortals[row.innerInput?.id]\"></ng-template>\r\n \r\n </div>\r\n\r\n\r\n\r\n }@else {\r\n @if (row[col]) {\r\n\r\n <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\r\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); \r\n selectAccount(row, col);setAsTouched($event)\" color=\"primary\"\r\n mat-button class=\"cell-button\">\r\n <div class=\"content\">\r\n \r\n {{row[col]| unCamelCase}}\r\n </div>\r\n </button>\r\n } @else {\r\n <button [disabled]=\"selectionDisabled(row, col)\"\r\n (click)=\"selectAccount(row, col); $event.stopPropagation();setAsTouched($event)\" mat-button class=\"cell-button\">\r\n <div class=\"content\">\r\n {{!!row['singleSelect'] === true && col === 'credit' ? 'auto selected ' : 'Select ' + row['segment'] + '\r\n ' + col + ' account' | unCamelCase}}\r\n </div>\r\n </button>\r\n }\r\n }\r\n\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n <tr mat-header-row *matHeaderRowDef=\"viewData.cols\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: viewData.cols;\"></tr>\r\n </table>\r\n </div>\r\n <ng-container *ngIf=\"viewData.accountTreeKeys.length === 0\">\r\n <section style=\"padding: 16px; text-align: center; display: flex;\">\r\n <span><mat-icon>info</mat-icon></span>\r\n <span>\r\n No account segments are currently configured.\r\n Please configure account segments to proceed.\r\n </span>\r\n </section>\r\n </ng-container>\r\n </ng-container>\r\n } @placeholder {\r\n <div class=\"table-container\">\r\n <p class=\"text-gray-500\">Loading data...</p>\r\n </div>\r\n }\r\n\r\n @loading (minimum 100ms) {\r\n <div class=\"flex justify-center items-center h-64\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n } @error {\r\n <div class=\"table-container\">\r\n <p class=\"text-red-500\">Error loading data. Please try again.</p>\r\n </div>\r\n }\r\n }\r\n\r\n</section>\r\n\r\n<mat-menu #inputMenu=\"matMenu\">\r\n <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n\r\n\r\n <button [matTooltip]=\"'Edit Input: ' +innerInput.label \" (click)=\"editInput(innerInput)\"\r\n 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 {{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 {\r\n <button [matTooltip]=\"'Delete input ' + innerInput.label \" (click)=\"removeInput(innerInput)\"\r\n mat-icon-button>\r\n\r\n <mat-icon>\r\n delete\r\n </mat-icon>\r\n </button>\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".cell-button{height:fit-content;min-height:38px;min-width:100%}.content{padding:8px}.info-box{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}\n"], dependencies: [{ 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: i6.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: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "ngmodule", type: PortalModule }], deferBlockDependencies: [() => [i2.MatButton, i2.MatIconButton, i6.MatIcon, i6$2.MatMenuTrigger, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i8.MatTooltip, i9$1.CdkPortalOutlet, i2$2.NgClass, i2$2.NgIf, i2$2.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)]] }); }
|
|
7315
7315
|
}
|
|
7316
7316
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: MscoaChartComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)], resolveMetadata: ConvertCamelCasePipe => ({ decorators: [{
|
|
7317
7317
|
type: Component,
|
|
7318
|
-
args: [{ selector: 'app-mscoa-chart', standalone: true, imports: [MatModulesModule, CommonModule, PortalModule, ConvertCamelCasePipe], providers: [MscoaComponentStore,], template: "\r\n<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n @if (viewData.loading) {\r\n <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n } @else {\r\n @defer (on viewport) {\r\n <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n <div class=\"table-container\">\r\n <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n @for (col of viewData.cols; track col; let i = $index) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n style=\"background: var(--mat-
|
|
7318
|
+
args: [{ selector: 'app-mscoa-chart', standalone: true, imports: [MatModulesModule, CommonModule, PortalModule, ConvertCamelCasePipe], providers: [MscoaComponentStore,], template: "\r\n<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n @if (viewData.loading) {\r\n <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n } @else {\r\n @defer (on viewport) {\r\n <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n <div class=\"table-container\">\r\n <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n @for (col of viewData.cols; track col; let i = $index) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n style=\"background: var(--mat-sys-surface-container);\" mat-header-cell *matHeaderCellDef>\r\n @if (viewData.hasMultiSelect || i === 0) {\r\n {{col | titlecase | unCamelCase}}\r\n } @else if (col === 'debit') {\r\n Debit / Credit\r\n }@else if (col === 'vatDebit') {\r\n VAT Debit / Credit\r\n }@else{\r\n {{col | unCamelCase}} / credit\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n [ngClass]=\"{'segment-cell': i === 0}\"\r\n [class.active]=\"editSelection?.segment === row['segment'] && activeColumn === col\">\r\n @if (i === 0) {\r\n <div style=\" display: flex\r\n;\r\n align-items: center;\r\n justify-self: right;\">\r\n\r\n @if(editorMode && row.innerInput?.id){\r\n <button mat-icon-button\r\n [matMenuTriggerData]=\"{innerInput:row.innerInput}\"\r\n [matMenuTriggerFor]=\"inputMenu\" \r\n [matTooltip]=\"'options for: ' + row.innerInput.label\">\r\n <mat-icon>\r\n more_vert\r\n </mat-icon>\r\n </button>\r\n }\r\n {{row['label']}}\r\n \r\n </div>\r\n \r\n } @else {\r\n \r\n @if(row.innerInput?.id &&formGroup && inputPortals[row.innerInput.id]){\r\n <div>\r\n <ng-template [cdkPortalOutlet]=\"inputPortals[row.innerInput?.id]\"></ng-template>\r\n \r\n </div>\r\n\r\n\r\n\r\n }@else {\r\n @if (row[col]) {\r\n\r\n <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\r\n (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); \r\n selectAccount(row, col);setAsTouched($event)\" color=\"primary\"\r\n mat-button class=\"cell-button\">\r\n <div class=\"content\">\r\n \r\n {{row[col]| unCamelCase}}\r\n </div>\r\n </button>\r\n } @else {\r\n <button [disabled]=\"selectionDisabled(row, col)\"\r\n (click)=\"selectAccount(row, col); $event.stopPropagation();setAsTouched($event)\" mat-button class=\"cell-button\">\r\n <div class=\"content\">\r\n {{!!row['singleSelect'] === true && col === 'credit' ? 'auto selected ' : 'Select ' + row['segment'] + '\r\n ' + col + ' account' | unCamelCase}}\r\n </div>\r\n </button>\r\n }\r\n }\r\n\r\n }\r\n </td>\r\n </ng-container>\r\n }\r\n <tr mat-header-row *matHeaderRowDef=\"viewData.cols\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: viewData.cols;\"></tr>\r\n </table>\r\n </div>\r\n <ng-container *ngIf=\"viewData.accountTreeKeys.length === 0\">\r\n <section style=\"padding: 16px; text-align: center; display: flex;\">\r\n <span><mat-icon>info</mat-icon></span>\r\n <span>\r\n No account segments are currently configured.\r\n Please configure account segments to proceed.\r\n </span>\r\n </section>\r\n </ng-container>\r\n </ng-container>\r\n } @placeholder {\r\n <div class=\"table-container\">\r\n <p class=\"text-gray-500\">Loading data...</p>\r\n </div>\r\n }\r\n\r\n @loading (minimum 100ms) {\r\n <div class=\"flex justify-center items-center h-64\">\r\n <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n </div>\r\n } @error {\r\n <div class=\"table-container\">\r\n <p class=\"text-red-500\">Error loading data. Please try again.</p>\r\n </div>\r\n }\r\n }\r\n\r\n</section>\r\n\r\n<mat-menu #inputMenu=\"matMenu\">\r\n <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n\r\n\r\n <button [matTooltip]=\"'Edit Input: ' +innerInput.label \" (click)=\"editInput(innerInput)\"\r\n 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 {{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 {\r\n <button [matTooltip]=\"'Delete input ' + innerInput.label \" (click)=\"removeInput(innerInput)\"\r\n mat-icon-button>\r\n\r\n <mat-icon>\r\n delete\r\n </mat-icon>\r\n </button>\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".cell-button{height:fit-content;min-height:38px;min-width:100%}.content{padding:8px}.info-box{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}\n"] }]
|
|
7319
7319
|
}], ctorParameters: () => [{ type: MscoaComponentStore }, { type: i0.Injector }], propDecorators: { onContainerClick: [{
|
|
7320
7320
|
type: Output
|
|
7321
7321
|
}], inputConfig: [{
|
|
@@ -9354,11 +9354,11 @@ class MultipleInputTableViewComponent {
|
|
|
9354
9354
|
return !!this.inputConfig?.formIsOpen && this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value === row[`${this.inputConfig?.id}.id`];
|
|
9355
9355
|
}
|
|
9356
9356
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9357
|
-
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 (configureCols.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 (configureCols.displayedColumnsInOrder||[]); track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n </span>\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, configureCols.columnsConfig?.[col])\r\n \" mat-cell *matCellDef=\"let row\">\r\n <div *ngIf=\" configureCols.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'\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=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n class=\"cellClass\">\r\n <span *ngIf=\"isNumber(row[col])\">\r\n {{ row[col] | number }}\r\n </span>\r\n <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\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=\"configureCols.displayedColumnsInOrder \"></tr>\r\n <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n \r\n *matRowDef=\"let row; columns: configureCols.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 #rowOptions=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n\r\n <button mat-menu-item (click)=\"editItem(row)\">\r\n <mat-icon>\r\n {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n {{inputConfig?.readonly ? 'View details' : '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 @if(!inputConfig?.readonly){\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-toolbar-container-background-color, 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: i6.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$2.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, i6.MatIcon, i6$2.MatMenuTrigger, i4$1.MatSort, i4$1.MatSortHeader, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i2$2.NgIf, i2$2.DecimalPipe]] }); }
|
|
9357
|
+
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 (configureCols.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 (configureCols.displayedColumnsInOrder||[]); track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n </span>\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, configureCols.columnsConfig?.[col])\r\n \" mat-cell *matCellDef=\"let row\">\r\n <div *ngIf=\" configureCols.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'\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=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n class=\"cellClass\">\r\n <span *ngIf=\"isNumber(row[col])\">\r\n {{ row[col] | number }}\r\n </span>\r\n <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\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=\"configureCols.displayedColumnsInOrder \"></tr>\r\n <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n \r\n *matRowDef=\"let row; columns: configureCols.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 #rowOptions=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n\r\n <button mat-menu-item (click)=\"editItem(row)\">\r\n <mat-icon>\r\n {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n {{inputConfig?.readonly ? 'View details' : '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 @if(!inputConfig?.readonly){\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: i6.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$2.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, i6.MatIcon, i6$2.MatMenuTrigger, i4$1.MatSort, i4$1.MatSortHeader, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i2$2.NgIf, i2$2.DecimalPipe]] }); }
|
|
9358
9358
|
}
|
|
9359
9359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableViewComponent, decorators: [{
|
|
9360
9360
|
type: Component,
|
|
9361
|
-
args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule], template: "@defer (on viewport) {\r\n\r\n@if (configureCols.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 (configureCols.displayedColumnsInOrder||[]); track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n </span>\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, configureCols.columnsConfig?.[col])\r\n \" mat-cell *matCellDef=\"let row\">\r\n <div *ngIf=\" configureCols.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'\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=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n class=\"cellClass\">\r\n <span *ngIf=\"isNumber(row[col])\">\r\n {{ row[col] | number }}\r\n </span>\r\n <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\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=\"configureCols.displayedColumnsInOrder \"></tr>\r\n <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n \r\n *matRowDef=\"let row; columns: configureCols.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 #rowOptions=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n\r\n <button mat-menu-item (click)=\"editItem(row)\">\r\n <mat-icon>\r\n {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n {{inputConfig?.readonly ? 'View details' : '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 @if(!inputConfig?.readonly){\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-
|
|
9361
|
+
args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule], template: "@defer (on viewport) {\r\n\r\n@if (configureCols.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 (configureCols.displayedColumnsInOrder||[]); track col) {\r\n <ng-container [matColumnDef]=\"col\">\r\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n </span>\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, configureCols.columnsConfig?.[col])\r\n \" mat-cell *matCellDef=\"let row\">\r\n <div *ngIf=\" configureCols.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'\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=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n class=\"cellClass\">\r\n <span *ngIf=\"isNumber(row[col])\">\r\n {{ row[col] | number }}\r\n </span>\r\n <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\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=\"configureCols.displayedColumnsInOrder \"></tr>\r\n <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n \r\n *matRowDef=\"let row; columns: configureCols.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 #rowOptions=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n\r\n <button mat-menu-item (click)=\"editItem(row)\">\r\n <mat-icon>\r\n {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n </mat-icon>\r\n <div class=\"option-text\">\r\n <div class=\"option-main-text\">\r\n {{inputConfig?.readonly ? 'View details' : '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 @if(!inputConfig?.readonly){\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"] }]
|
|
9362
9362
|
}], propDecorators: { inputConfig: [{
|
|
9363
9363
|
type: Input
|
|
9364
9364
|
}], dataSource: [{
|
|
@@ -9502,11 +9502,11 @@ class MultipleInputTableEditComponent {
|
|
|
9502
9502
|
return !!this.inputConfig?.formIsOpen && !!this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value;
|
|
9503
9503
|
}
|
|
9504
9504
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9505
|
-
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-toolbar-container-background-color)\" 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-toolbar-container-background-color, 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$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.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: i8.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 }] }); }
|
|
9505
|
+
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$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.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: i8.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 }] }); }
|
|
9506
9506
|
}
|
|
9507
9507
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableEditComponent, decorators: [{
|
|
9508
9508
|
type: Component,
|
|
9509
|
-
args: [{ selector: 'lib-multiple-input-table-edit', standalone: true, imports: [MatModulesModule, CommonModule, DragDropModule,], template: "\r\n<mat-card appearance=\"outlined\" style=\" margin-top: 8px;background:var(--mat-
|
|
9509
|
+
args: [{ selector: 'lib-multiple-input-table-edit', standalone: true, imports: [MatModulesModule, CommonModule, DragDropModule,], 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"] }]
|
|
9510
9510
|
}], ctorParameters: () => [], propDecorators: { inputConfig: [{
|
|
9511
9511
|
type: Input
|
|
9512
9512
|
}], editorMode: [{
|
|
@@ -10400,4 +10400,4 @@ console.debug = () => { };
|
|
|
10400
10400
|
*/
|
|
10401
10401
|
|
|
10402
10402
|
export { safeReturnDeepProperty as A, validateObjectAgainstString as B, getUrl as C, DaysAgoPipe as D, textIconsForUserHints as E, FormsStoreService as F, index as G, MatModulesModule as M, NGX_T_FORMS_CONFIG_TOKEN as N, PropertyAccessError as P, SignatureInputElementComponent as S, TDynamicDataEditComponent as T, UTILS_OBJECT_TOKEN as U, _isEqual as _, assignDeepPropertyToObject as a, TDynamicDataViewComponent as b, FormTowerControllerService as c, getSubmissionStatusFn as d, TreeComponent as e, NgxTFormsService as f, getAvatar as g, NgxTFormsComponent as h, initFormConfigToV2 as i, formGenerator as j, getSectionElements as k, FORM_ACTIONS_TOKEN as l, FORM_CONFIG_TOKEN as m, FORM_SLIDES_TOKEN as n, FORM_INPUTS_TOKEN as o, provideNgxTForms as p, MULTIPLE_FORM_INPUT_TOKEN as q, MSCOA_TREE_PROVIDER as r, FormsComponent as s, testAgainstItem as t, FormBuilderComponent as u, MscoaFormInputComponent as v, UserFormStepperComponent as w, TFormInputComponent as x, DialogTemplateComponent as y, returnDeepProperty as z };
|
|
10403
|
-
//# sourceMappingURL=ngx-t-forms-ngx-t-forms-
|
|
10403
|
+
//# sourceMappingURL=ngx-t-forms-ngx-t-forms-fgu62eR1.mjs.map
|