ngx-t-forms 0.0.1 → 2.0.2
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-4ZPgovTx.mjs → ngx-t-forms-api-value-access-rules.component-pmyW-mx7.mjs} +11 -11
- package/fesm2022/{ngx-t-forms-api-value-access-rules.component-4ZPgovTx.mjs.map → ngx-t-forms-api-value-access-rules.component-pmyW-mx7.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-calculated-field-rules.component-tCsyuHd3.mjs → ngx-t-forms-calculated-field-rules.component-DP1UlCew.mjs} +6 -6
- package/fesm2022/{ngx-t-forms-calculated-field-rules.component-tCsyuHd3.mjs.map → ngx-t-forms-calculated-field-rules.component-DP1UlCew.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-config-mscoa-additional-inputs.component-C8jU6DUH.mjs → ngx-t-forms-config-mscoa-additional-inputs.component-CbZRg_zQ.mjs} +6 -6
- package/fesm2022/ngx-t-forms-config-mscoa-additional-inputs.component-CbZRg_zQ.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-form-input-selector.component-6eGpxdN5.mjs → ngx-t-forms-form-input-selector.component-BJm9gyXk.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-form-input-selector.component-6eGpxdN5.mjs.map → ngx-t-forms-form-input-selector.component-BJm9gyXk.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-form-json-view.component-DwEXL85v.mjs → ngx-t-forms-form-json-view.component-BY1A6dqj.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-form-json-view.component-DwEXL85v.mjs.map → ngx-t-forms-form-json-view.component-BY1A6dqj.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-form-section-stepper.component-B5gtKLLC.mjs → ngx-t-forms-form-section-stepper.component-CYUj3li9.mjs} +5 -5
- package/fesm2022/ngx-t-forms-form-section-stepper.component-CYUj3li9.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-forms-builder-menu.component-Bo1CKQsC.mjs → ngx-t-forms-forms-builder-menu.component-DBh2XvMV.mjs} +32 -36
- package/fesm2022/ngx-t-forms-forms-builder-menu.component-DBh2XvMV.mjs.map +1 -0
- package/fesm2022/ngx-t-forms-input-editor.component-Pv9Ka-hF.mjs +136 -0
- package/fesm2022/ngx-t-forms-input-editor.component-Pv9Ka-hF.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-mat-chip-list-editor.component-DY7Tsn5l.mjs → ngx-t-forms-mat-chip-list-editor.component-BgfStriH.mjs} +10 -9
- package/fesm2022/ngx-t-forms-mat-chip-list-editor.component-BgfStriH.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-mat-slider-editor.component-Dgd5gyUu.mjs → ngx-t-forms-mat-slider-editor.component-CYyAcNf2.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-mat-slider-editor.component-Dgd5gyUu.mjs.map → ngx-t-forms-mat-slider-editor.component-CYyAcNf2.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-mat-slider-toggle-editor.component-ClM2gqVq.mjs → ngx-t-forms-mat-slider-toggle-editor.component-DFlNcNXN.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-mat-slider-toggle-editor.component-ClM2gqVq.mjs.map → ngx-t-forms-mat-slider-toggle-editor.component-DFlNcNXN.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-missing-form-configs.component-DubPFwTw.mjs → ngx-t-forms-missing-form-configs.component-C5_wwf2z.mjs} +9 -13
- package/fesm2022/ngx-t-forms-missing-form-configs.component-C5_wwf2z.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-mscoa-segment-config.component-DtmVJG6v.mjs → ngx-t-forms-mscoa-segment-config.component-DD9mv-Lb.mjs} +5 -5
- package/fesm2022/ngx-t-forms-mscoa-segment-config.component-DD9mv-Lb.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-ngx-t-forms-B-w5W1gG.mjs → ngx-t-forms-ngx-t-forms-BiFqmAIA.mjs} +1349 -251
- package/fesm2022/ngx-t-forms-ngx-t-forms-BiFqmAIA.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-pipeline-generator.component-DieETx2I.mjs → ngx-t-forms-pipeline-generator.component-DGEidXgr.mjs} +21 -21
- package/fesm2022/ngx-t-forms-pipeline-generator.component-DGEidXgr.mjs.map +1 -0
- package/fesm2022/{ngx-t-forms-required-inputs.component-Bi1wJdw3.mjs → ngx-t-forms-required-inputs.component-DS-D1d89.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-required-inputs.component-Bi1wJdw3.mjs.map → ngx-t-forms-required-inputs.component-DS-D1d89.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-rest-api-call-setup.component-Cd59pfG7.mjs → ngx-t-forms-rest-api-call-setup.component-BY555_zO.mjs} +8 -8
- package/fesm2022/{ngx-t-forms-rest-api-call-setup.component-Cd59pfG7.mjs.map → ngx-t-forms-rest-api-call-setup.component-BY555_zO.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-section-report.component-CBXHr1qQ.mjs → ngx-t-forms-section-report.component-CUNhFUtC.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-section-report.component-CBXHr1qQ.mjs.map → ngx-t-forms-section-report.component-CUNhFUtC.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-selection-options-editor.component-DBlBUGkw.mjs → ngx-t-forms-selection-options-editor.component-zg8iAImG.mjs} +5 -5
- package/fesm2022/{ngx-t-forms-selection-options-editor.component-DBlBUGkw.mjs.map → ngx-t-forms-selection-options-editor.component-zg8iAImG.mjs.map} +1 -1
- package/fesm2022/{ngx-t-forms-validators-config.component-gtr6Ohn3.mjs → ngx-t-forms-validators-config.component-Dt5oXQcY.mjs} +6 -6
- package/fesm2022/{ngx-t-forms-validators-config.component-gtr6Ohn3.mjs.map → ngx-t-forms-validators-config.component-Dt5oXQcY.mjs.map} +1 -1
- package/fesm2022/ngx-t-forms.mjs +1 -1
- package/lib/components/form-builder/elements/form-section-stepper/form-section-stepper.component.d.ts +2 -92
- package/lib/components/form-builder/elements/forms-builder-menu/forms-builder-menu.component.d.ts +30 -12
- package/lib/components/form-builder/elements/input-element-editor/input-element-editor.component.d.ts +18 -16
- package/lib/components/form-builder/elements/missing-form-configs/missing-form-configs.component.d.ts +2 -2
- package/lib/components/forms/store/Forms-selectors.d.ts +2 -23
- package/lib/components/forms/store/forms-store.service.d.ts +2 -23
- package/lib/components/t-dynamic-data-edit/elements/config-mscoa-additional-inputs/config-mscoa-additional-inputs.component.d.ts +1 -1
- package/lib/components/t-dynamic-data-edit/elements/mat-chip-list-editor/mat-chip-list-editor.component.d.ts +2 -1
- package/lib/components/t-dynamic-data-edit/elements/mscoa-segment-config/mscoa-segment-config.component.d.ts +4 -4
- package/lib/components/t-dynamic-data-edit/elements/pipeline-generator/pipeline-generator.component.d.ts +2 -2
- package/lib/components/t-dynamic-data-edit/elements/t-workflow-picker/t-workflow-picker.component.d.ts +1 -1
- package/lib/components/t-dynamic-data-edit/t-dynamic-data-edit.component.d.ts +15 -8
- package/lib/services/core/t-form-tower-controller/functions/prePoPulateForm.d.ts +1 -84
- package/package.json +2 -2
- package/testForm.d.ts +797 -0
- package/fesm2022/ngx-t-forms-config-mscoa-additional-inputs.component-C8jU6DUH.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-form-section-stepper.component-B5gtKLLC.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-forms-builder-menu.component-Bo1CKQsC.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-input-editor.component-C1kH_GDD.mjs +0 -126
- package/fesm2022/ngx-t-forms-input-editor.component-C1kH_GDD.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-mat-chip-list-editor.component-DY7Tsn5l.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-missing-form-configs.component-DubPFwTw.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-mscoa-segment-config.component-DtmVJG6v.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-ngx-t-forms-B-w5W1gG.mjs.map +0 -1
- package/fesm2022/ngx-t-forms-pipeline-generator.component-DieETx2I.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngx-t-forms-section-report.component-CBXHr1qQ.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/section-report/section-report.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/section-report/section-report.component.html"],"sourcesContent":["import { Component, computed, inject, Input, ViewChild } from '@angular/core';\r\n\r\n\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { MatSort } from '@angular/material/sort';\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\n\r\n\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport { ElementTypes, FormSlideInterface, validateFormSlide } from 'ngx-t-forms-types';\r\n@Component({\r\n selector: 'app-section-report',\r\n standalone: true,\r\n imports: [CommonModule,MatModulesModule],\r\n templateUrl: './section-report.component.html',\r\n styleUrl: './section-report.component.scss'\r\n})\r\nexport class SectionReportComponent {\r\n @Input() sectionId: string = '';\r\n @ViewChild(MatSort) sort!: MatSort;\r\n @ViewChild(MatPaginator) paginator!: MatPaginator;\r\n\r\n displayedColumns: string[] = ['icon', 'name','description', 'value'];\r\n dataSource = new MatTableDataSource<any>();\r\n\r\n private store:FormsStoreService = inject(FormsStoreService)\r\n selectFormInEdit$ = this.store.selectors.selectFormInEdit$\r\n selectFormInEdit = toSignal(this.selectFormInEdit$)\r\n constructor() {}\r\n\r\n ngOnInit() {\r\n\r\n }\r\n \r\n\r\n section = computed(()=>\r\n {\r\n const form = this.selectFormInEdit()\r\n return form?.form.slides.find((slide: FormSlideInterface) => slide.sectionId === this.sectionId) || null\r\n })\r\n \r\n sectionData = computed(()=> {\r\n const section = this.section()\r\n return this.updateTableData(section)\r\n })\r\n\r\n updateTableData(data: FormSlideInterface|null) {\r\n if(!data) return [];\r\n const allInputs = data.columns.flatMap(column=>column.element ===ElementTypes.MultipleInput ? [...(column?.formInputs||[]),column]: [column]).filter(\r\n (input) => input.sectionId === this.sectionId\r\n )\r\n const calculatedInputs = allInputs.filter((input) => input.calculatedFieldRules?.formula && input.calculatedFieldRules?.formula !== '');\r\n const inputsWithManualValidations = allInputs.filter((input) => input.validators?.some((validator) => Object.keys(validator).length > 0));\r\n const allSectionInputConfigErrors = validateFormSlide(data);\r\n \r\n const metrics: any[] = [\r\n {\r\n icon: 'input',\r\n name: 'Total Inputs',\r\n value: Object.keys(allInputs|| {}).length,\r\n color: '#2196f3',\r\n description: 'Total number of form inputs in section',\r\n trend: 'stable',\r\n category: 'inputs'\r\n },\r\n {\r\n icon: 'calculate',\r\n name: 'Calculated Fields',\r\n value: calculatedInputs.length,\r\n details:calculatedInputs,\r\n color: '#4caf50',\r\n description: 'Fields with calculation formulas',\r\n trend: 'monitoring',\r\n category: 'calculations'\r\n },\r\n {\r\n icon: 'rule',\r\n name: 'Manual Validations',\r\n value: inputsWithManualValidations.length,\r\n details: inputsWithManualValidations,\r\n color: '#ff9800',\r\n description: 'Fields with custom validation rules',\r\n trend: 'warning',\r\n category: 'validation'\r\n },\r\n \r\n {\r\n icon: 'bug_report',\r\n name: 'Config Errors',\r\n value: allSectionInputConfigErrors.length,\r\n color: '#f44336',\r\n description: 'Configuration errors detected',\r\n trend: 'critical',\r\n category: 'errors'\r\n },\r\n // {\r\n // icon: 'api',\r\n // name: 'GET Methods',\r\n // value: data.getMethodInputs.length,\r\n // details: data.getMethodInputs,\r\n // color: '#2196f3',\r\n // description: 'Fields using GET API calls',\r\n // trend: 'stable',\r\n // category: 'api'\r\n // },\r\n // {\r\n // icon: 'sync',\r\n // name: 'POST Methods',\r\n // value: data.postMethodInputs.length,\r\n // details: data.postMethodInputs,\r\n // color: '#673ab7',\r\n // description: 'Fields using POST API calls',\r\n // trend: 'monitoring',\r\n // category: 'api'\r\n // },\r\n // {\r\n // icon: 'visibility',\r\n // name: 'Hidden Fields',\r\n // value: Object.values(data.sectionInputs || {})\r\n // .filter((input: TInputControllerService) => input.input.readonly).length,\r\n // color: '#9e9e9e',\r\n // description: 'Number of hidden/conditional fields',\r\n // trend: 'neutral',\r\n // category: 'visibility'\r\n // },\r\n // {\r\n // icon: 'multiple_stop',\r\n // name: 'Multiple Inputs',\r\n // value: Object.values(data.sectionInputs || {})\r\n // .filter((input: TInputControllerService) => input.input.element ===ElementTypes.MultipleInput).length,\r\n // color: '#795548',\r\n // description: 'Fields allowing multiple values',\r\n // trend: 'stable',\r\n // category: 'inputs'\r\n // },\r\n // {\r\n // icon: 'error_outline',\r\n // name: 'Required Fields',\r\n // value: Object.values(data.sectionInputs || {})\r\n // .filter((input: TInputControllerService) => input.input.required).length,\r\n // color: '#e91e63',\r\n // description: 'Mandatory input fields',\r\n // trend: 'warning',\r\n // category: 'validation'\r\n // }\r\n ];\r\n \r\n return metrics;\r\n }\r\n\r\n applyFilter(event: Event) {\r\n const filterValue = (event.target as HTMLInputElement).value;\r\n this.dataSource.filter = filterValue.trim().toLowerCase();\r\n }\r\n}","<div class=\"report-container\" *ngIf=\"(section())\">\r\n\r\n\r\n <mat-toolbar style=\"padding: 0px;\">\r\n <mat-icon class=\"section-icon\">analytics</mat-icon>\r\n <small>\r\n Form Section Diagnostic Report\r\n </small>\r\n\r\n <span class=\"spacer\"></span>\r\n <div class=\"status-chips\">\r\n <div class=\"status-chip\" >\r\n <mat-icon>check_circle</mat-icon>\r\n \r\n </div>\r\n <div class=\"status-chip initialized\" *ngIf=\"(section())?.sectionIsSeen\">\r\n <mat-icon>task_alt</mat-icon>\r\n Initialized\r\n </div>\r\n </div>\r\n </mat-toolbar>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n <table mat-table [dataSource]=\"(sectionData())||[]\" matSort class=\"w-full\">\r\n <!-- Icon Column -->\r\n <ng-container matColumnDef=\"icon\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-icon [ngStyle]=\"{'color': row.color}\">{{ row.icon }}</mat-icon>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- description Column -->\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header>description</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.description }}</td>\r\n </ng-container>\r\n\r\n <!-- Name Column -->\r\n <ng-container matColumnDef=\"name\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.name }}</td>\r\n </ng-container>\r\n\r\n <!-- Value Column -->\r\n <ng-container matColumnDef=\"value\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.value }}</td>\r\n </ng-container>\r\n\r\n <!-- Details Column -->\r\n <ng-container matColumnDef=\"details\">\r\n <th mat-header-cell *matHeaderCellDef>Details</th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-chip-set *ngIf=\"row.details?.length\">\r\n <mat-chip *ngFor=\"let detail of row.details\" class=\"detail-chip\">\r\n {{ detail }}\r\n </mat-chip>\r\n </mat-chip-set>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n </table>\r\n</div>"],"names":["i1","i2","i3","i4","i5","i6"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngx-t-forms-section-report.component-CUNhFUtC.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/section-report/section-report.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/section-report/section-report.component.html"],"sourcesContent":["import { Component, computed, inject, Input, ViewChild } from '@angular/core';\r\n\r\n\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { MatSort } from '@angular/material/sort';\r\nimport { MatPaginator } from '@angular/material/paginator';\r\nimport { MatTableDataSource } from '@angular/material/table';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\n\r\n\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport { ElementTypes, FormSlideInterface, validateFormSlide } from 'ngx-t-forms-types';\r\n@Component({\r\n selector: 'app-section-report',\r\n standalone: true,\r\n imports: [CommonModule,MatModulesModule],\r\n templateUrl: './section-report.component.html',\r\n styleUrl: './section-report.component.scss'\r\n})\r\nexport class SectionReportComponent {\r\n @Input() sectionId: string = '';\r\n @ViewChild(MatSort) sort!: MatSort;\r\n @ViewChild(MatPaginator) paginator!: MatPaginator;\r\n\r\n displayedColumns: string[] = ['icon', 'name','description', 'value'];\r\n dataSource = new MatTableDataSource<any>();\r\n\r\n private store:FormsStoreService = inject(FormsStoreService)\r\n selectFormInEdit$ = this.store.selectors.selectFormInEdit$\r\n selectFormInEdit = toSignal(this.selectFormInEdit$)\r\n constructor() {}\r\n\r\n ngOnInit() {\r\n\r\n }\r\n \r\n\r\n section = computed(()=>\r\n {\r\n const form = this.selectFormInEdit()\r\n return form?.form.slides.find((slide: FormSlideInterface) => slide.sectionId === this.sectionId) || null\r\n })\r\n \r\n sectionData = computed(()=> {\r\n const section = this.section()\r\n return this.updateTableData(section)\r\n })\r\n\r\n updateTableData(data: FormSlideInterface|null) {\r\n if(!data) return [];\r\n const allInputs = data.columns.flatMap(column=>column.element ===ElementTypes.MultipleInput ? [...(column?.formInputs||[]),column]: [column]).filter(\r\n (input) => input.sectionId === this.sectionId\r\n )\r\n const calculatedInputs = allInputs.filter((input) => input.calculatedFieldRules?.formula && input.calculatedFieldRules?.formula !== '');\r\n const inputsWithManualValidations = allInputs.filter((input) => input.validators?.some((validator) => Object.keys(validator).length > 0));\r\n const allSectionInputConfigErrors = validateFormSlide(data);\r\n \r\n const metrics: any[] = [\r\n {\r\n icon: 'input',\r\n name: 'Total Inputs',\r\n value: Object.keys(allInputs|| {}).length,\r\n color: '#2196f3',\r\n description: 'Total number of form inputs in section',\r\n trend: 'stable',\r\n category: 'inputs'\r\n },\r\n {\r\n icon: 'calculate',\r\n name: 'Calculated Fields',\r\n value: calculatedInputs.length,\r\n details:calculatedInputs,\r\n color: '#4caf50',\r\n description: 'Fields with calculation formulas',\r\n trend: 'monitoring',\r\n category: 'calculations'\r\n },\r\n {\r\n icon: 'rule',\r\n name: 'Manual Validations',\r\n value: inputsWithManualValidations.length,\r\n details: inputsWithManualValidations,\r\n color: '#ff9800',\r\n description: 'Fields with custom validation rules',\r\n trend: 'warning',\r\n category: 'validation'\r\n },\r\n \r\n {\r\n icon: 'bug_report',\r\n name: 'Config Errors',\r\n value: allSectionInputConfigErrors.length,\r\n color: '#f44336',\r\n description: 'Configuration errors detected',\r\n trend: 'critical',\r\n category: 'errors'\r\n },\r\n // {\r\n // icon: 'api',\r\n // name: 'GET Methods',\r\n // value: data.getMethodInputs.length,\r\n // details: data.getMethodInputs,\r\n // color: '#2196f3',\r\n // description: 'Fields using GET API calls',\r\n // trend: 'stable',\r\n // category: 'api'\r\n // },\r\n // {\r\n // icon: 'sync',\r\n // name: 'POST Methods',\r\n // value: data.postMethodInputs.length,\r\n // details: data.postMethodInputs,\r\n // color: '#673ab7',\r\n // description: 'Fields using POST API calls',\r\n // trend: 'monitoring',\r\n // category: 'api'\r\n // },\r\n // {\r\n // icon: 'visibility',\r\n // name: 'Hidden Fields',\r\n // value: Object.values(data.sectionInputs || {})\r\n // .filter((input: TInputControllerService) => input.input.readonly).length,\r\n // color: '#9e9e9e',\r\n // description: 'Number of hidden/conditional fields',\r\n // trend: 'neutral',\r\n // category: 'visibility'\r\n // },\r\n // {\r\n // icon: 'multiple_stop',\r\n // name: 'Multiple Inputs',\r\n // value: Object.values(data.sectionInputs || {})\r\n // .filter((input: TInputControllerService) => input.input.element ===ElementTypes.MultipleInput).length,\r\n // color: '#795548',\r\n // description: 'Fields allowing multiple values',\r\n // trend: 'stable',\r\n // category: 'inputs'\r\n // },\r\n // {\r\n // icon: 'error_outline',\r\n // name: 'Required Fields',\r\n // value: Object.values(data.sectionInputs || {})\r\n // .filter((input: TInputControllerService) => input.input.required).length,\r\n // color: '#e91e63',\r\n // description: 'Mandatory input fields',\r\n // trend: 'warning',\r\n // category: 'validation'\r\n // }\r\n ];\r\n \r\n return metrics;\r\n }\r\n\r\n applyFilter(event: Event) {\r\n const filterValue = (event.target as HTMLInputElement).value;\r\n this.dataSource.filter = filterValue.trim().toLowerCase();\r\n }\r\n}","<div class=\"report-container\" *ngIf=\"(section())\">\r\n\r\n\r\n <mat-toolbar style=\"padding: 0px;\">\r\n <mat-icon class=\"section-icon\">analytics</mat-icon>\r\n <small>\r\n Form Section Diagnostic Report\r\n </small>\r\n\r\n <span class=\"spacer\"></span>\r\n <div class=\"status-chips\">\r\n <div class=\"status-chip\" >\r\n <mat-icon>check_circle</mat-icon>\r\n \r\n </div>\r\n <div class=\"status-chip initialized\" *ngIf=\"(section())?.sectionIsSeen\">\r\n <mat-icon>task_alt</mat-icon>\r\n Initialized\r\n </div>\r\n </div>\r\n </mat-toolbar>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n <table mat-table [dataSource]=\"(sectionData())||[]\" matSort class=\"w-full\">\r\n <!-- Icon Column -->\r\n <ng-container matColumnDef=\"icon\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-icon [ngStyle]=\"{'color': row.color}\">{{ row.icon }}</mat-icon>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- description Column -->\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header>description</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.description }}</td>\r\n </ng-container>\r\n\r\n <!-- Name Column -->\r\n <ng-container matColumnDef=\"name\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.name }}</td>\r\n </ng-container>\r\n\r\n <!-- Value Column -->\r\n <ng-container matColumnDef=\"value\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>\r\n <td mat-cell *matCellDef=\"let row\">{{ row.value }}</td>\r\n </ng-container>\r\n\r\n <!-- Details Column -->\r\n <ng-container matColumnDef=\"details\">\r\n <th mat-header-cell *matHeaderCellDef>Details</th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-chip-set *ngIf=\"row.details?.length\">\r\n <mat-chip *ngFor=\"let detail of row.details\" class=\"detail-chip\">\r\n {{ detail }}\r\n </mat-chip>\r\n </mat-chip-set>\r\n </td>\r\n </ng-container>\r\n\r\n\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n </table>\r\n</div>"],"names":["i1","i2","i3","i4","i5","i6"],"mappings":";;;;;;;;;;;;;;;;MAoBa,sBAAsB,CAAA;AAWjC,IAAA,WAAA,GAAA;QAVS,IAAS,CAAA,SAAA,GAAW,EAAE;QAI/B,IAAgB,CAAA,gBAAA,GAAa,CAAC,MAAM,EAAE,MAAM,EAAC,aAAa,EAAE,OAAO,CAAC;AACpE,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,kBAAkB,EAAO;AAElC,QAAA,IAAA,CAAA,KAAK,GAAqB,MAAM,CAAC,iBAAiB,CAAC;QAC3D,IAAiB,CAAA,iBAAA,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB;AAC1D,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC;AAQnD,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,MAAI;AAEnB,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,EAAE;YACpC,OAAO,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAyB,KAAK,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI;AAC1G,SAAC,CAAC;AAEL,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAI;AAC1B,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;AAC5B,YAAA,OAAQ,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC,SAAC,CAAC;;IAdF,QAAQ,GAAA;;AAgBR,IAAA,eAAe,CAAC,IAA6B,EAAA;AAC3C,QAAA,IAAG,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE;QACnB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAE,MAAM,CAAC,OAAO,KAAI,YAAY,CAAC,aAAa,GAAG,CAAC,IAAI,MAAM,EAAE,UAAU,IAAE,EAAE,CAAC,EAAC,MAAM,CAAC,GAAE,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAClJ,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,CAC9C;QACD,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,oBAAoB,EAAE,OAAO,IAAI,KAAK,CAAC,oBAAoB,EAAE,OAAO,KAAK,EAAE,CAAC;AACvI,QAAA,MAAM,2BAA2B,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,SAAS,KAAK,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACzI,QAAA,MAAM,2BAA2B,GAAG,iBAAiB,CAAC,IAAI,CAAC;AAE3D,QAAA,MAAM,OAAO,GAAU;AACrB,YAAA;AACE,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,IAAI,EAAE,cAAc;gBACpB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAG,EAAE,CAAC,CAAC,MAAM;AACzC,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,WAAW,EAAE,wCAAwC;AACrD,gBAAA,KAAK,EAAE,QAAQ;AACf,gBAAA,QAAQ,EAAE;AACX,aAAA;AACD,YAAA;AACE,gBAAA,IAAI,EAAE,WAAW;AACjB,gBAAA,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,gBAAgB,CAAC,MAAM;AAC9B,gBAAA,OAAO,EAAC,gBAAgB;AACxB,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,WAAW,EAAE,kCAAkC;AAC/C,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,QAAQ,EAAE;AACX,aAAA;AACD,YAAA;AACE,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,2BAA2B,CAAC,MAAM;AACzC,gBAAA,OAAO,EAAE,2BAA2B;AACpC,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,WAAW,EAAE,qCAAqC;AAClD,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,QAAQ,EAAE;AACT,aAAA;AAEH,YAAA;AACE,gBAAA,IAAI,EAAE,YAAY;AAClB,gBAAA,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,2BAA2B,CAAC,MAAM;AACzC,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,WAAW,EAAE,+BAA+B;AAC5C,gBAAA,KAAK,EAAE,UAAU;AACjB,gBAAA,QAAQ,EAAE;AACX,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAmDF;AAED,QAAA,OAAO,OAAO;;AAGhB,IAAA,WAAW,CAAC,KAAY,EAAA;AACtB,QAAA,MAAM,WAAW,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK;AAC5D,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE;;8GAvIhD,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAEtB,OAAO,EACP,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,YAAY,gDCvBzB,22EAyEM,EAAA,MAAA,EAAA,CAAA,k2BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDzDM,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAC,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,wDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,qBAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,aAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,eAAA,EAAA,OAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,cAAA,CAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,QAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,uBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,kBAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,aAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,OAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,YAAA,EAAA,QAAA,EAAA,oCAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,MAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAI5B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,cAClB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,22EAAA,EAAA,MAAA,EAAA,CAAA,k2BAAA,CAAA,EAAA;wDAK/B,SAAS,EAAA,CAAA;sBAAjB;gBACmB,IAAI,EAAA,CAAA;sBAAvB,SAAS;uBAAC,OAAO;gBACO,SAAS,EAAA,CAAA;sBAAjC,SAAS;uBAAC,YAAY;;;;;"}
|
|
@@ -6,7 +6,7 @@ import * as i1 from '@angular/forms';
|
|
|
6
6
|
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import { v4 } from 'uuid';
|
|
8
8
|
import _ from 'lodash';
|
|
9
|
-
import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-
|
|
9
|
+
import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-BiFqmAIA.mjs';
|
|
10
10
|
import * as i4$1 from '@angular/material/form-field';
|
|
11
11
|
import { MatFormFieldControl } from '@angular/material/form-field';
|
|
12
12
|
import { Subject } from 'rxjs';
|
|
@@ -119,10 +119,10 @@ class SelectionOptionsEditorComponent {
|
|
|
119
119
|
removeObjectById(array, id) {
|
|
120
120
|
return _.reject(array, { id: id });
|
|
121
121
|
}
|
|
122
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
122
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectionOptionsEditorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: SelectionOptionsEditorComponent, isStandalone: true, selector: "app-selection-options-editor", inputs: { errors: "errors", options: "options" }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: SelectionOptionsEditorComponent }], ngImport: i0, template: "\r\n <mat-chip-listbox aria-label=\"Fish selection\">\r\n @for (option of options||[]; track option.id) {\r\n <mat-chip-option \r\n (removed)=\"remove(option)\"\r\n (click)=\"this.inEdit?.id === option?.id? this.inEdit = undefined :this.inEdit = option\"\r\n color=\"accent\" \r\n [value]=\"option?.value\"\r\n [selected]=\"this.inEdit?.id === option?.id\">{{option?.label}}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-option>\r\n }\r\n </mat-chip-listbox>\r\n <mat-toolbar *ngIf=\"!inEdit\">\r\n <button style=\"width:100%\" mat-stroked-button (click)=\"add()\">\r\n Add an option <mat-icon>add</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <mat-card *ngIf=\"!!inEdit\">\r\n <mat-card-header>\r\n <mat-card-title>Edit Option</mat-card-title>\r\n <mat-card-subtitle>Modify Option Details</mat-card-subtitle>\r\n </mat-card-header>\r\n\r\n <mat-card-content style=\"padding-top:16px ;\" >\r\n \r\n <form *ngIf=\"!!form\" [formGroup]=\"form\">\r\n <mat-form-field >\r\n <mat-label>label</mat-label>\r\n <input type=\"text\" matInput formControlName=\"label\" \r\n placeholder=\"enter option label\">\r\n <mat-hint>Label is required!</mat-hint>\r\n </mat-form-field>\r\n <mat-form-field >\r\n <mat-label>value</mat-label>\r\n <input type=\"text\" matInput formControlName=\"value\" \r\n placeholder=\"enter option value\">\r\n <mat-hint>value is required!</mat-hint>\r\n </mat-form-field>\r\n \r\n </form>\r\n \r\n </mat-card-content>\r\n <mat-card-actions>\r\n <button mat-button (click)=\"closeEdit()\">close</button>\r\n <button mat-button [disabled]=\"form.invalid\" (click)=\"save()\">Save</button>\r\n </mat-card-actions>\r\n </mat-card>\r\n ", styles: ["mat-form-field{width:100%!important;background:azure}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
124
124
|
}
|
|
125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectionOptionsEditorComponent, decorators: [{
|
|
126
126
|
type: Component,
|
|
127
127
|
args: [{ selector: 'app-selection-options-editor', standalone: true, imports: [MatModulesModule, ReactiveFormsModule, CommonModule], providers: [{ provide: MatFormFieldControl, useExisting: SelectionOptionsEditorComponent }], template: "\r\n <mat-chip-listbox aria-label=\"Fish selection\">\r\n @for (option of options||[]; track option.id) {\r\n <mat-chip-option \r\n (removed)=\"remove(option)\"\r\n (click)=\"this.inEdit?.id === option?.id? this.inEdit = undefined :this.inEdit = option\"\r\n color=\"accent\" \r\n [value]=\"option?.value\"\r\n [selected]=\"this.inEdit?.id === option?.id\">{{option?.label}}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-option>\r\n }\r\n </mat-chip-listbox>\r\n <mat-toolbar *ngIf=\"!inEdit\">\r\n <button style=\"width:100%\" mat-stroked-button (click)=\"add()\">\r\n Add an option <mat-icon>add</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <mat-card *ngIf=\"!!inEdit\">\r\n <mat-card-header>\r\n <mat-card-title>Edit Option</mat-card-title>\r\n <mat-card-subtitle>Modify Option Details</mat-card-subtitle>\r\n </mat-card-header>\r\n\r\n <mat-card-content style=\"padding-top:16px ;\" >\r\n \r\n <form *ngIf=\"!!form\" [formGroup]=\"form\">\r\n <mat-form-field >\r\n <mat-label>label</mat-label>\r\n <input type=\"text\" matInput formControlName=\"label\" \r\n placeholder=\"enter option label\">\r\n <mat-hint>Label is required!</mat-hint>\r\n </mat-form-field>\r\n <mat-form-field >\r\n <mat-label>value</mat-label>\r\n <input type=\"text\" matInput formControlName=\"value\" \r\n placeholder=\"enter option value\">\r\n <mat-hint>value is required!</mat-hint>\r\n </mat-form-field>\r\n \r\n </form>\r\n \r\n </mat-card-content>\r\n <mat-card-actions>\r\n <button mat-button (click)=\"closeEdit()\">close</button>\r\n <button mat-button [disabled]=\"form.invalid\" (click)=\"save()\">Save</button>\r\n </mat-card-actions>\r\n </mat-card>\r\n ", styles: ["mat-form-field{width:100%!important;background:azure}\n"] }]
|
|
128
128
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
@@ -140,4 +140,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
140
140
|
}] } });
|
|
141
141
|
|
|
142
142
|
export { SelectionOptionsEditorComponent };
|
|
143
|
-
//# sourceMappingURL=ngx-t-forms-selection-options-editor.component-
|
|
143
|
+
//# sourceMappingURL=ngx-t-forms-selection-options-editor.component-zg8iAImG.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngx-t-forms-selection-options-editor.component-DBlBUGkw.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/selection-options-editor/selection-options-editor.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/selection-options-editor/selection-options-editor.component.html"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, Self } from '@angular/core';\r\n\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormControl, FormGroup, NgControl, ReactiveFormsModule, Validators } from '@angular/forms';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport _ from 'lodash';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\n\r\n@Component({\r\n selector: 'app-selection-options-editor',\r\n standalone: true,\r\n imports: [MatModulesModule, ReactiveFormsModule, CommonModule],\r\n providers: [{ provide: MatFormFieldControl, useExisting:SelectionOptionsEditorComponent }],\r\n templateUrl: './selection-options-editor.component.html',\r\n styleUrl: './selection-options-editor.component.scss'\r\n})\r\nexport class SelectionOptionsEditorComponent implements MatFormFieldControl<any> {\r\n value: any;\r\n static nextId = 0;\r\n stateChanges = new Subject<void>();\r\n @Input() errors:IConfigElementError[] |undefined = [];\r\n @HostBinding() id = `app-selection-options-editor-${SelectionOptionsEditorComponent.nextId++}`;\r\n \r\n placeholder: string = ''\r\n constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,) { }\r\n focused: boolean = false;\r\n get empty() {\r\n return !this.value\r\n }\r\n get shouldLabelFloat() {\r\n return this.focused || !this.empty;\r\n }\r\n required: boolean = false;\r\n disabled: boolean = false;\r\nget errorState(): boolean {\r\n const hasError = !!this.ngControl?.control?.errors || (this.errors||[]).length > 0 && this.touched\r\n return !this.value && !!this.required || hasError\r\n }\r\n\r\n controlType?: string | undefined;\r\n autofilled?: boolean | undefined;\r\n userAriaDescribedBy?: string | undefined;\r\n disableAutomaticLabeling?: boolean | undefined;\r\n setDescribedByIds(ids: string[]) {\r\n // Ensure the component view is initialized\r\n if (this._elementRef && this._elementRef.nativeElement) {\r\n const controlElement = this._elementRef.nativeElement.querySelector('.app-selection-options-editor');\r\n // Check if the controlElement exists before attempting to set its attribute\r\n if (controlElement) {\r\n controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n }\r\n }\r\n }\r\n onContainerClick(event: MouseEvent): void {\r\n this.markAsTouched();\r\n this.stateChanges.next();\r\n }\r\n\r\n touched: boolean = false;\r\n onTouched = () => {};\r\n markAsTouched() {\r\n console.log('markAsTouched') \r\n if (!this.touched) {\r\n this.onTouched();\r\n this.touched = true;\r\n }\r\n } \r\n\r\n\r\n \r\n private _options: any = []\r\n @Input() get options(){\r\n return this._options || []\r\n }\r\n\r\n set options(val){\r\n if(!!Array.isArray(val)){\r\n this._options = val\r\n }\r\n }\r\n\r\n@Output() valueChanged = new EventEmitter<any>()\r\n\r\n inEdit:any\r\n\r\n form!:FormGroup\r\n add(){\r\n this.inEdit = {}\r\n this.createForm(this.inEdit)\r\n\r\n }\r\n remove(option:any){\r\n this.options = this.removeObjectById(this.options, option.id)\r\n this.valueChanged.emit(this.options)\r\n }\r\n createForm(inEdit:any){\r\n\r\n this.form = new FormGroup({\r\n label: new FormControl( inEdit.label||'', Validators.required),\r\n value: new FormControl(inEdit.value||'', Validators.required),\r\n\r\n });\r\n }\r\n closeEdit(){\r\n this.inEdit = null\r\n }\r\n\r\n save(){\r\n const id = this.inEdit?.id\r\n if(!!id){\r\n this.options = this.overrideObjectById(this.options, {...this.inEdit, ...this.form.value})\r\n this.closeEdit()\r\n this.valueChanged.emit(this.options)\r\n return\r\n }\r\n this.options = this.addObjectToArray(this.options, {...this.inEdit, ...this.form.value, id: uuidv4()})\r\n this.closeEdit()\r\n console.log(this.options)\r\n this.valueChanged.emit(this.options)\r\n\r\n }\r\n\r\n overrideObjectById(array: any[], newObj: any): any[] {\r\n const index = _.findIndex(array, { id: newObj.id });\r\n if (index !== -1) {\r\n array[index] = newObj;\r\n }\r\n return array;\r\n }\r\n \r\n addObjectToArray(array: any[], newObj: any): any[] {\r\n if (!_.some(array, { id: newObj.id })) {\r\n array.push(newObj);\r\n }\r\n return array;\r\n }\r\n \r\n removeObjectById(array: any[], id: number): any[] {\r\n return _.reject(array, { id: id });\r\n }\r\n}","\r\n <mat-chip-listbox aria-label=\"Fish selection\">\r\n @for (option of options||[]; track option.id) {\r\n <mat-chip-option \r\n (removed)=\"remove(option)\"\r\n (click)=\"this.inEdit?.id === option?.id? this.inEdit = undefined :this.inEdit = option\"\r\n color=\"accent\" \r\n [value]=\"option?.value\"\r\n [selected]=\"this.inEdit?.id === option?.id\">{{option?.label}}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-option>\r\n }\r\n </mat-chip-listbox>\r\n <mat-toolbar *ngIf=\"!inEdit\">\r\n <button style=\"width:100%\" mat-stroked-button (click)=\"add()\">\r\n Add an option <mat-icon>add</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <mat-card *ngIf=\"!!inEdit\">\r\n <mat-card-header>\r\n <mat-card-title>Edit Option</mat-card-title>\r\n <mat-card-subtitle>Modify Option Details</mat-card-subtitle>\r\n </mat-card-header>\r\n\r\n <mat-card-content style=\"padding-top:16px ;\" >\r\n \r\n <form *ngIf=\"!!form\" [formGroup]=\"form\">\r\n <mat-form-field >\r\n <mat-label>label</mat-label>\r\n <input type=\"text\" matInput formControlName=\"label\" \r\n placeholder=\"enter option label\">\r\n <mat-hint>Label is required!</mat-hint>\r\n </mat-form-field>\r\n <mat-form-field >\r\n <mat-label>value</mat-label>\r\n <input type=\"text\" matInput formControlName=\"value\" \r\n placeholder=\"enter option value\">\r\n <mat-hint>value is required!</mat-hint>\r\n </mat-form-field>\r\n \r\n </form>\r\n \r\n </mat-card-content>\r\n <mat-card-actions>\r\n <button mat-button (click)=\"closeEdit()\">close</button>\r\n <button mat-button [disabled]=\"form.invalid\" (click)=\"save()\">Save</button>\r\n </mat-card-actions>\r\n </mat-card>\r\n "],"names":["uuidv4","i2","i3","i6","i7","i8","i9"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngx-t-forms-selection-options-editor.component-zg8iAImG.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/selection-options-editor/selection-options-editor.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/selection-options-editor/selection-options-editor.component.html"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, Self } from '@angular/core';\r\n\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormControl, FormGroup, NgControl, ReactiveFormsModule, Validators } from '@angular/forms';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport _ from 'lodash';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\n\r\n@Component({\r\n selector: 'app-selection-options-editor',\r\n standalone: true,\r\n imports: [MatModulesModule, ReactiveFormsModule, CommonModule],\r\n providers: [{ provide: MatFormFieldControl, useExisting:SelectionOptionsEditorComponent }],\r\n templateUrl: './selection-options-editor.component.html',\r\n styleUrl: './selection-options-editor.component.scss'\r\n})\r\nexport class SelectionOptionsEditorComponent implements MatFormFieldControl<any> {\r\n value: any;\r\n static nextId = 0;\r\n stateChanges = new Subject<void>();\r\n @Input() errors:IConfigElementError[] |undefined = [];\r\n @HostBinding() id = `app-selection-options-editor-${SelectionOptionsEditorComponent.nextId++}`;\r\n \r\n placeholder: string = ''\r\n constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,) { }\r\n focused: boolean = false;\r\n get empty() {\r\n return !this.value\r\n }\r\n get shouldLabelFloat() {\r\n return this.focused || !this.empty;\r\n }\r\n required: boolean = false;\r\n disabled: boolean = false;\r\nget errorState(): boolean {\r\n const hasError = !!this.ngControl?.control?.errors || (this.errors||[]).length > 0 && this.touched\r\n return !this.value && !!this.required || hasError\r\n }\r\n\r\n controlType?: string | undefined;\r\n autofilled?: boolean | undefined;\r\n userAriaDescribedBy?: string | undefined;\r\n disableAutomaticLabeling?: boolean | undefined;\r\n setDescribedByIds(ids: string[]) {\r\n // Ensure the component view is initialized\r\n if (this._elementRef && this._elementRef.nativeElement) {\r\n const controlElement = this._elementRef.nativeElement.querySelector('.app-selection-options-editor');\r\n // Check if the controlElement exists before attempting to set its attribute\r\n if (controlElement) {\r\n controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n }\r\n }\r\n }\r\n onContainerClick(event: MouseEvent): void {\r\n this.markAsTouched();\r\n this.stateChanges.next();\r\n }\r\n\r\n touched: boolean = false;\r\n onTouched = () => {};\r\n markAsTouched() {\r\n console.log('markAsTouched') \r\n if (!this.touched) {\r\n this.onTouched();\r\n this.touched = true;\r\n }\r\n } \r\n\r\n\r\n \r\n private _options: any = []\r\n @Input() get options(){\r\n return this._options || []\r\n }\r\n\r\n set options(val){\r\n if(!!Array.isArray(val)){\r\n this._options = val\r\n }\r\n }\r\n\r\n@Output() valueChanged = new EventEmitter<any>()\r\n\r\n inEdit:any\r\n\r\n form!:FormGroup\r\n add(){\r\n this.inEdit = {}\r\n this.createForm(this.inEdit)\r\n\r\n }\r\n remove(option:any){\r\n this.options = this.removeObjectById(this.options, option.id)\r\n this.valueChanged.emit(this.options)\r\n }\r\n createForm(inEdit:any){\r\n\r\n this.form = new FormGroup({\r\n label: new FormControl( inEdit.label||'', Validators.required),\r\n value: new FormControl(inEdit.value||'', Validators.required),\r\n\r\n });\r\n }\r\n closeEdit(){\r\n this.inEdit = null\r\n }\r\n\r\n save(){\r\n const id = this.inEdit?.id\r\n if(!!id){\r\n this.options = this.overrideObjectById(this.options, {...this.inEdit, ...this.form.value})\r\n this.closeEdit()\r\n this.valueChanged.emit(this.options)\r\n return\r\n }\r\n this.options = this.addObjectToArray(this.options, {...this.inEdit, ...this.form.value, id: uuidv4()})\r\n this.closeEdit()\r\n console.log(this.options)\r\n this.valueChanged.emit(this.options)\r\n\r\n }\r\n\r\n overrideObjectById(array: any[], newObj: any): any[] {\r\n const index = _.findIndex(array, { id: newObj.id });\r\n if (index !== -1) {\r\n array[index] = newObj;\r\n }\r\n return array;\r\n }\r\n \r\n addObjectToArray(array: any[], newObj: any): any[] {\r\n if (!_.some(array, { id: newObj.id })) {\r\n array.push(newObj);\r\n }\r\n return array;\r\n }\r\n \r\n removeObjectById(array: any[], id: number): any[] {\r\n return _.reject(array, { id: id });\r\n }\r\n}","\r\n <mat-chip-listbox aria-label=\"Fish selection\">\r\n @for (option of options||[]; track option.id) {\r\n <mat-chip-option \r\n (removed)=\"remove(option)\"\r\n (click)=\"this.inEdit?.id === option?.id? this.inEdit = undefined :this.inEdit = option\"\r\n color=\"accent\" \r\n [value]=\"option?.value\"\r\n [selected]=\"this.inEdit?.id === option?.id\">{{option?.label}}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-option>\r\n }\r\n </mat-chip-listbox>\r\n <mat-toolbar *ngIf=\"!inEdit\">\r\n <button style=\"width:100%\" mat-stroked-button (click)=\"add()\">\r\n Add an option <mat-icon>add</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <mat-card *ngIf=\"!!inEdit\">\r\n <mat-card-header>\r\n <mat-card-title>Edit Option</mat-card-title>\r\n <mat-card-subtitle>Modify Option Details</mat-card-subtitle>\r\n </mat-card-header>\r\n\r\n <mat-card-content style=\"padding-top:16px ;\" >\r\n \r\n <form *ngIf=\"!!form\" [formGroup]=\"form\">\r\n <mat-form-field >\r\n <mat-label>label</mat-label>\r\n <input type=\"text\" matInput formControlName=\"label\" \r\n placeholder=\"enter option label\">\r\n <mat-hint>Label is required!</mat-hint>\r\n </mat-form-field>\r\n <mat-form-field >\r\n <mat-label>value</mat-label>\r\n <input type=\"text\" matInput formControlName=\"value\" \r\n placeholder=\"enter option value\">\r\n <mat-hint>value is required!</mat-hint>\r\n </mat-form-field>\r\n \r\n </form>\r\n \r\n </mat-card-content>\r\n <mat-card-actions>\r\n <button mat-button (click)=\"closeEdit()\">close</button>\r\n <button mat-button [disabled]=\"form.invalid\" (click)=\"save()\">Save</button>\r\n </mat-card-actions>\r\n </mat-card>\r\n "],"names":["uuidv4","i2","i3","i6","i7","i8","i9"],"mappings":"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"}
|
|
@@ -5,10 +5,10 @@ import { ElementTypes } from 'ngx-t-forms-types';
|
|
|
5
5
|
import { g as getInputIllustration } from './ngx-t-forms-getInputIllustration-GCSKx5e5.mjs';
|
|
6
6
|
import * as i2$1 from '@angular/common';
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
|
-
import { FormInputSelectorComponent } from './ngx-t-forms-form-input-selector.component-
|
|
8
|
+
import { FormInputSelectorComponent } from './ngx-t-forms-form-input-selector.component-BJm9gyXk.mjs';
|
|
9
9
|
import * as i1 from '@angular/forms';
|
|
10
10
|
import { FormsModule } from '@angular/forms';
|
|
11
|
-
import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-
|
|
11
|
+
import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-BiFqmAIA.mjs';
|
|
12
12
|
import * as i4$1 from '@angular/material/form-field';
|
|
13
13
|
import { MatFormFieldControl } from '@angular/material/form-field';
|
|
14
14
|
import { Subject } from 'rxjs';
|
|
@@ -183,10 +183,10 @@ class ValidatorsConfigComponent {
|
|
|
183
183
|
}
|
|
184
184
|
return validator.message;
|
|
185
185
|
}
|
|
186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
187
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ValidatorsConfigComponent, isStandalone: true, selector: "app-validators-config", inputs: { errors: "errors", mapToData: "mapToData", value: "value", formInputs: "formInputs" }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: ValidatorsConfigComponent }], ngImport: i0, template: "<div class=\"tree-instructions\">\r\n <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n Custom validators are functions that take a form control as an argument and return an object of errors if the\r\n validation fails.\r\n </span>\r\n</div>\r\n\r\n<mat-list>\r\n<h5>\r\n Custom Validators\r\n</h5>\r\n <mat-chip-listbox aria-label=\"Chip select options\">\r\n @for (validator of value; track $index) {\r\n <mat-chip-option\r\n style=\"height: fit-content;padding: 8px;\"\r\n [selected]=\"edit?.id === validator.id\"\r\n (click)=\"editV(validator)\"> \r\n <span style=\"white-space: normal;\">\r\n {{isFormControlCustomValidator(validator) | titlecase}}\r\n </span>\r\n \r\n <button *ngIf=\"this.edit?.id !== validator.id\" (click)=\"remove(validator)\" matChipRemove \r\n [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n <mat-icon *ngIf=\"this.edit?.id === validator.id\" matChipTrailingIcon>\r\n check_circle\r\n </mat-icon>\r\n \r\n \r\n </mat-chip-option>\r\n }\r\n <mat-chip-option\r\n matTooltip=\"Add a new custom validator\"\r\n selectable=\"false\"\r\n style=\"cursor: pointer !important;\"\r\n highlighted=\"true\" color=\"accent\" (click)=\"addValidator()\" *ngIf=\"!edit\">\r\n <span >\r\n\r\n </span>\r\n Add validator\r\n <mat-icon matChipTrailingIcon >add</mat-icon>\r\n\r\n \r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n\r\n \r\n \r\n\r\n\r\n</mat-list>\r\n<mat-card style=\"padding: 8px;background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"\r\n *ngIf=\"edit\">\r\n <ng-container *ngIf=\"edit && !showVariables; then validatorEditor\"></ng-container>\r\n <mat-toolbar *ngIf=\"!showVariables\" >\r\n <span class=\"spacer\"></span>\r\n <button (click)=\"edit=undefined\" mat-button>\r\n close\r\n </button>\r\n <button mat-raised-button [disabled]=\"!edit.expression ||!edit.message\"\r\n (click)=\"saveVariable($event)\" color=\"accent\">\r\n Save Validation\r\n </button>\r\n </mat-toolbar>\r\n <ng-container *ngIf=\"edit && !!showVariables; then variables\"></ng-container>\r\n</mat-card>\r\n\r\n\r\n\r\n\r\n<ng-template #validatorEditor>\r\n <div class=\"tree-instructions\">\r\n <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n The expression is checked on value change. The message shows if it fails.\r\n <br>\r\n You can observe inputs for changes to re-evaluate the expression.\r\n </span>\r\n </div>\r\n <mat-list *ngIf=\"edit\">\r\n\r\n <mat-form-field style=\"margin-bottom: 16px;\" (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n <mat-label >Validation Message</mat-label>\r\n <textarea matInput #textarea [value]=\"edit.message\"\r\n (input)=\"onTextChange($event,'message')\"\r\n placeholder=\"\r\n Enter message\r\n \"></textarea>\r\n\r\n <mat-hint>\r\n The message to display when the validation fails\r\n </mat-hint>\r\n\r\n </mat-form-field>\r\n\r\n\r\n\r\n\r\n <mat-form-field (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n <mat-label >Expression</mat-label>\r\n <textarea matInput #textarea \r\n (input)=\"onTextChange($event,'expression')\"\r\n [value]=\"edit.expression\" placeholder=\"\r\n enter expression\r\n \"></textarea>\r\n\r\n <mat-hint>\r\n The expression to evaluate the validation\r\n </mat-hint>\r\n\r\n </mat-form-field>\r\n <mat-toolbar>\r\n <mat-slide-toggle (click)=\"$event.stopPropagation();\" name=\"CanOveride\" ngDefaultControl\r\n (change)=\"edit.canOverride = $event.checked\" [checked]=\"edit.canOverride\">\r\n <span style=\"margin-left: 5px;\"> Users can override this validation</span>\r\n\r\n </mat-slide-toggle>\r\n </mat-toolbar>\r\n <label >\r\n Observe inputs for changes\r\n </label>\r\n <mat-chip-listbox aria-label=\"Chip select options\">\r\n @for(input of edit.inputsObservedForChanges;track input){\r\n <mat-chip>input\r\n <button (click)=\"removeObserved($event,input)\" matChipRemove [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <mat-chip (click)=\"addVariable($event)\" color=\"primary\">\r\n Variable\r\n <mat-icon matChipTrailingIcon>\r\n add\r\n </mat-icon>\r\n </mat-chip>\r\n </mat-chip-listbox>\r\n\r\n <br>\r\n <mat-divider></mat-divider>\r\n\r\n\r\n </mat-list>\r\n</ng-template>\r\n\r\n<ng-template #variables>\r\n\r\n <section style=\"max-height: 360px; overflow-y: auto\">\r\n <lib-form-input-selector (change)=\"selectInput($event)\" [formInputs]=\"formInputs\">\r\n\r\n </lib-form-input-selector>\r\n\r\n <div class=\"contentBackground\" *ngIf=\"formInputs.length === 0\">\r\n <span style=\"\r\n display: block;\r\n text-align: center;\r\n font-style: italic;\r\n padding: 16px;\r\n \">No form inputs</span>\r\n </div>\r\n </section>\r\n <mat-toolbar>\r\n <span class=\"spacer\"></span>\r\n <button (click)=\"showVariables = !showVariables\" mat-flat-button>\r\n Close\r\n <mat-icon>\r\n close\r\n </mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n</ng-template>\r\n", styles: [".mat-mdc-menu-panel.mat-mdc-menu-panel{min-width:500px!important}mat-form-field{width:100%;background:azure}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px}mat-chip{cursor:pointer!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i4.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TitleCasePipe, name: "titlecase" }, { kind: "component", type: FormInputSelectorComponent, selector: "lib-form-input-selector", inputs: ["errors", "value", "formInputs", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] }); }
|
|
186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ValidatorsConfigComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
187
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ValidatorsConfigComponent, isStandalone: true, selector: "app-validators-config", inputs: { errors: "errors", mapToData: "mapToData", value: "value", formInputs: "formInputs" }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: ValidatorsConfigComponent }], ngImport: i0, template: "<div class=\"tree-instructions\">\r\n <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n Custom validators are functions that take a form control as an argument and return an object of errors if the\r\n validation fails.\r\n </span>\r\n</div>\r\n\r\n<mat-list>\r\n<h5>\r\n Custom Validators\r\n</h5>\r\n <mat-chip-listbox aria-label=\"Chip select options\">\r\n @for (validator of value; track $index) {\r\n <mat-chip-option\r\n style=\"height: fit-content;padding: 8px;\"\r\n [selected]=\"edit?.id === validator.id\"\r\n (click)=\"editV(validator)\"> \r\n <span style=\"white-space: normal;\">\r\n {{isFormControlCustomValidator(validator) | titlecase}}\r\n </span>\r\n \r\n <button *ngIf=\"this.edit?.id !== validator.id\" (click)=\"remove(validator)\" matChipRemove \r\n [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n <mat-icon *ngIf=\"this.edit?.id === validator.id\" matChipTrailingIcon>\r\n check_circle\r\n </mat-icon>\r\n \r\n \r\n </mat-chip-option>\r\n }\r\n <mat-chip-option\r\n matTooltip=\"Add a new custom validator\"\r\n selectable=\"false\"\r\n style=\"cursor: pointer !important;\"\r\n highlighted=\"true\" color=\"accent\" (click)=\"addValidator()\" *ngIf=\"!edit\">\r\n <span >\r\n\r\n </span>\r\n Add validator\r\n <mat-icon matChipTrailingIcon >add</mat-icon>\r\n\r\n \r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n\r\n \r\n \r\n\r\n\r\n</mat-list>\r\n<mat-card style=\"padding: 8px;background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"\r\n *ngIf=\"edit\">\r\n <ng-container *ngIf=\"edit && !showVariables; then validatorEditor\"></ng-container>\r\n <mat-toolbar *ngIf=\"!showVariables\" >\r\n <span class=\"spacer\"></span>\r\n <button (click)=\"edit=undefined\" mat-button>\r\n close\r\n </button>\r\n <button mat-raised-button [disabled]=\"!edit.expression ||!edit.message\"\r\n (click)=\"saveVariable($event)\" color=\"accent\">\r\n Save Validation\r\n </button>\r\n </mat-toolbar>\r\n <ng-container *ngIf=\"edit && !!showVariables; then variables\"></ng-container>\r\n</mat-card>\r\n\r\n\r\n\r\n\r\n<ng-template #validatorEditor>\r\n <div class=\"tree-instructions\">\r\n <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n The expression is checked on value change. The message shows if it fails.\r\n <br>\r\n You can observe inputs for changes to re-evaluate the expression.\r\n </span>\r\n </div>\r\n <mat-list *ngIf=\"edit\">\r\n\r\n <mat-form-field style=\"margin-bottom: 16px;\" (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n <mat-label >Validation Message</mat-label>\r\n <textarea matInput #textarea [value]=\"edit.message\"\r\n (input)=\"onTextChange($event,'message')\"\r\n placeholder=\"\r\n Enter message\r\n \"></textarea>\r\n\r\n <mat-hint>\r\n The message to display when the validation fails\r\n </mat-hint>\r\n\r\n </mat-form-field>\r\n\r\n\r\n\r\n\r\n <mat-form-field (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n <mat-label >Expression</mat-label>\r\n <textarea matInput #textarea \r\n (input)=\"onTextChange($event,'expression')\"\r\n [value]=\"edit.expression\" placeholder=\"\r\n enter expression\r\n \"></textarea>\r\n\r\n <mat-hint>\r\n The expression to evaluate the validation\r\n </mat-hint>\r\n\r\n </mat-form-field>\r\n <mat-toolbar>\r\n <mat-slide-toggle (click)=\"$event.stopPropagation();\" name=\"CanOveride\" ngDefaultControl\r\n (change)=\"edit.canOverride = $event.checked\" [checked]=\"edit.canOverride\">\r\n <span style=\"margin-left: 5px;\"> Users can override this validation</span>\r\n\r\n </mat-slide-toggle>\r\n </mat-toolbar>\r\n <label >\r\n Observe inputs for changes\r\n </label>\r\n <mat-chip-listbox aria-label=\"Chip select options\">\r\n @for(input of edit.inputsObservedForChanges;track input){\r\n <mat-chip>input\r\n <button (click)=\"removeObserved($event,input)\" matChipRemove [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <mat-chip (click)=\"addVariable($event)\" color=\"primary\">\r\n Variable\r\n <mat-icon matChipTrailingIcon>\r\n add\r\n </mat-icon>\r\n </mat-chip>\r\n </mat-chip-listbox>\r\n\r\n <br>\r\n <mat-divider></mat-divider>\r\n\r\n\r\n </mat-list>\r\n</ng-template>\r\n\r\n<ng-template #variables>\r\n\r\n <section style=\"max-height: 360px; overflow-y: auto\">\r\n <lib-form-input-selector (change)=\"selectInput($event)\" [formInputs]=\"formInputs\">\r\n\r\n </lib-form-input-selector>\r\n\r\n <div class=\"contentBackground\" *ngIf=\"formInputs.length === 0\">\r\n <span style=\"\r\n display: block;\r\n text-align: center;\r\n font-style: italic;\r\n padding: 16px;\r\n \">No form inputs</span>\r\n </div>\r\n </section>\r\n <mat-toolbar>\r\n <span class=\"spacer\"></span>\r\n <button (click)=\"showVariables = !showVariables\" mat-flat-button>\r\n Close\r\n <mat-icon>\r\n close\r\n </mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n</ng-template>\r\n", styles: [".mat-mdc-menu-panel.mat-mdc-menu-panel{min-width:500px!important}mat-form-field{width:100%;background:azure}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px}mat-chip{cursor:pointer!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i4.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$1.TitleCasePipe, name: "titlecase" }, { kind: "component", type: FormInputSelectorComponent, selector: "lib-form-input-selector", inputs: ["errors", "value", "formInputs", "disabled"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] }); }
|
|
188
188
|
}
|
|
189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ValidatorsConfigComponent, decorators: [{
|
|
190
190
|
type: Component,
|
|
191
191
|
args: [{ selector: 'app-validators-config', standalone: true, imports: [
|
|
192
192
|
MatModulesModule,
|
|
@@ -213,4 +213,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
213
213
|
}] } });
|
|
214
214
|
|
|
215
215
|
export { ValidatorsConfigComponent };
|
|
216
|
-
//# sourceMappingURL=ngx-t-forms-validators-config.component-
|
|
216
|
+
//# sourceMappingURL=ngx-t-forms-validators-config.component-Dt5oXQcY.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngx-t-forms-validators-config.component-gtr6Ohn3.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/validators-config/validators-config.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/validators-config/validators-config.component.html"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Optional, Output, Self } from '@angular/core';\r\nimport { MenuCloseReason } from '@angular/material/menu';\r\n\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport { ElementTypes, FormControlCustomValidatorsInterface, IMultiple } from 'ngx-t-forms-types';\r\nimport { FormColumnInputs } from 'ngx-t-forms-types';\r\nimport { getInputIllustration } from '../../../../shared/functions/getInputIllustration';\r\n\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormInputSelectorComponent } from '../form-input-selector/form-input-selector.component';\r\n\r\nimport { FormsModule, NgControl } from '@angular/forms';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\n\r\n@Component({\r\n selector: 'app-validators-config',\r\n templateUrl: './validators-config.component.html',\r\n styleUrls: ['./validators-config.component.scss'],\r\n standalone: true,\r\n imports:[\r\n MatModulesModule,\r\n CommonModule,\r\n FormInputSelectorComponent,\r\n FormsModule\r\n ],\r\n providers: [{ provide: MatFormFieldControl, useExisting: ValidatorsConfigComponent}],\r\n})\r\nexport class ValidatorsConfigComponent implements OnInit,MatFormFieldControl<FormControlCustomValidatorsInterface []> {\r\n \r\n\r\n static nextId = 0;\r\n stateChanges = new Subject<void>();\r\n \r\n @HostBinding() id = `app-validators-config-${ValidatorsConfigComponent.nextId++}`;\r\n \r\n placeholder: string = ''\r\n constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,) { }\r\n focused: boolean = false;\r\n get empty() {\r\n return !this.value\r\n }\r\n get shouldLabelFloat() {\r\n return this.focused || !this.empty;\r\n }\r\n required: boolean = false;\r\n disabled: boolean = false;\r\nget errorState(): boolean {\r\n const hasError = !!this.ngControl?.control?.errors || (this.errors||[]).length > 0 && this.touched\r\n return !this.value && !!this.required || hasError\r\n }\r\n \r\n controlType?: string | undefined;\r\n autofilled?: boolean | undefined;\r\n userAriaDescribedBy?: string | undefined;\r\n disableAutomaticLabeling?: boolean | undefined;\r\n setDescribedByIds(ids: string[]) {\r\n // Ensure the component view is initialized\r\n if (this._elementRef && this._elementRef.nativeElement) {\r\n const controlElement = this._elementRef.nativeElement.querySelector('.app-validators-config');\r\n // Check if the controlElement exists before attempting to set its attribute\r\n if (controlElement) {\r\n controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n }\r\n }\r\n }\r\n onContainerClick(event: MouseEvent): void {\r\n this.markAsTouched();\r\n this.stateChanges.next();\r\n }\r\n @Input() errors:IConfigElementError[] |undefined = [];\r\n touched: boolean = false;\r\n onTouched = () => {};\r\n markAsTouched() {\r\n console.log('markAsTouched') \r\n if (!this.touched) {\r\n this.onTouched();\r\n this.touched = true;\r\n }\r\n } \r\n \r\n @Input() mapToData:FormColumnInputs | undefined = undefined;\r\n @Input() value!: (FormControlCustomValidatorsInterface )[];\r\n @Input() formInputs: Array<FormColumnInputs> = []\r\n @Output() valueChanged = new EventEmitter<any>();\r\n\r\n\r\n ngOnInit() {}\r\n\r\n edit:FormControlCustomValidatorsInterface | undefined\r\n menuClosed(event:MenuCloseReason){\r\n\r\n if (this.edit) {\r\n const editIndex = this.value.findIndex((item) => {\r\n if (typeof item === 'string') {\r\n return false;\r\n }\r\n return item.id === this.edit?.id;\r\n });\r\n\r\n if (editIndex !== -1) {\r\n this.value[editIndex] = this.edit;\r\n } \r\n this.valueChanged.emit([...this.value])\r\n\r\n\r\n }\r\n\r\n this.edit = undefined\r\n }\r\n showVariables :boolean = false\r\n editV(validator:string | FormControlCustomValidatorsInterface){\r\n if(this.edit?.id === (validator as FormControlCustomValidatorsInterface).id){\r\n this.edit = undefined\r\n return\r\n }\r\n this.edit = validator as any\r\n }\r\n remove(validator:FormControlCustomValidatorsInterface|string){\r\n const indexOfV = this.value.findIndex((item) => {\r\n if (typeof item === 'string') {\r\n return item === validator;\r\n }\r\n return item.id === (validator as FormControlCustomValidatorsInterface).id;\r\n }\r\n )\r\n\r\n\r\n this.value = [...this.value].filter((item,i)=>indexOfV !== i)\r\n this.valueChanged.emit([...this.value])\r\n\r\n }\r\n search: string = '';\r\n\r\n getInputIcon(element: ElementTypes) {\r\n\r\n return getInputIllustration(element)\r\n }\r\n \r\n selectInput(inputId: string) {\r\n const input = this.formInputs.find((input) => input.id === inputId)\r\n if(!input){\r\n return\r\n }\r\n if(input?.multipleInputInEditId){\r\n throw new Error('multipleInputInEditId is not supported')\r\n }\r\n if(!!this.edit){\r\n this.edit.expression = (this.edit?.expression || '' ).concat(input?.formControlName || '')\r\n if(!this.edit.inputsObservedForChanges.find((i)=>i.inputId === (input?.originalId || input?.id))){\r\n this.edit.inputsObservedForChanges.push({\r\n inputId: input?.originalId || input?.id,\r\n variable: input?.formControlName\r\n })\r\n }\r\n \r\n }\r\n \r\n\r\n this.showVariables = false\r\n\r\n }\r\n\r\n addVariable(event:any){\r\n this.showVariables = true\r\n event.stopPropagation()\r\n event.preventDefault()\r\n\r\n }\r\n getMultipleFormInputs(input: IMultiple) {\r\n if (\r\n input.element === ElementTypes.MultipleInput&&\r\n this.mapToData?.multipleInputInEditId === input.id\r\n ) {\r\n return input.formInputs;\r\n }\r\n return [];\r\n }\r\n returnExpression(){\r\n return this.edit?.expression.replace(/(word)/g, '<span style=\\'color: blue\\'>$1</span>')\r\n }\r\n addValidator(){\r\n this.edit = {\r\n message: '',\r\n expression: '',\r\n canOverride: false,\r\n inputsObservedForChanges: []\r\n } as any\r\n }\r\n\r\n onTextChange(event:Event,key:string){\r\n if(!this.edit) {\r\n this.edit = {} as any\r\n }\r\n (this.edit as any)[key] = (event.target as HTMLInputElement).value\r\n }\r\n saveVariable(event:any){\r\n console.log(this.edit)\r\n if(!this.edit) return;\r\n const id = uuidv4()\r\n const val = {...this.edit, id}\r\n this.value = [...this.value, val]\r\n this.valueChanged.emit([...this.value])\r\n this.edit = undefined\r\n \r\n \r\n\r\n\r\n \r\n }\r\n removeObserved(event:any,item:{ inputId: string; variable: string; }){\r\n const i = this.edit?.inputsObservedForChanges.findIndex((i:any)=>i === item)\r\n if(i !== undefined && i !== -1 && this.edit){\r\n this.edit?.inputsObservedForChanges.splice(i, 1);\r\n this.edit.expression = this.edit?.expression.replace(new RegExp(`\\\\b${item}\\\\b`, 'g'), '')\r\n\r\n }\r\n\r\n event.stopPropagation()\r\n event.preventDefault()\r\n }\r\n isFormControlCustomValidator(validator: string |FormControlCustomValidatorsInterface ){\r\n if(typeof validator == 'string'){\r\n return validator\r\n }\r\n return validator.message\r\n\r\n }\r\n}\r\n\r\n\r\n\r\n","<div class=\"tree-instructions\">\r\n <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n Custom validators are functions that take a form control as an argument and return an object of errors if the\r\n validation fails.\r\n </span>\r\n</div>\r\n\r\n<mat-list>\r\n<h5>\r\n Custom Validators\r\n</h5>\r\n <mat-chip-listbox aria-label=\"Chip select options\">\r\n @for (validator of value; track $index) {\r\n <mat-chip-option\r\n style=\"height: fit-content;padding: 8px;\"\r\n [selected]=\"edit?.id === validator.id\"\r\n (click)=\"editV(validator)\"> \r\n <span style=\"white-space: normal;\">\r\n {{isFormControlCustomValidator(validator) | titlecase}}\r\n </span>\r\n \r\n <button *ngIf=\"this.edit?.id !== validator.id\" (click)=\"remove(validator)\" matChipRemove \r\n [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n <mat-icon *ngIf=\"this.edit?.id === validator.id\" matChipTrailingIcon>\r\n check_circle\r\n </mat-icon>\r\n \r\n \r\n </mat-chip-option>\r\n }\r\n <mat-chip-option\r\n matTooltip=\"Add a new custom validator\"\r\n selectable=\"false\"\r\n style=\"cursor: pointer !important;\"\r\n highlighted=\"true\" color=\"accent\" (click)=\"addValidator()\" *ngIf=\"!edit\">\r\n <span >\r\n\r\n </span>\r\n Add validator\r\n <mat-icon matChipTrailingIcon >add</mat-icon>\r\n\r\n \r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n\r\n \r\n \r\n\r\n\r\n</mat-list>\r\n<mat-card style=\"padding: 8px;background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"\r\n *ngIf=\"edit\">\r\n <ng-container *ngIf=\"edit && !showVariables; then validatorEditor\"></ng-container>\r\n <mat-toolbar *ngIf=\"!showVariables\" >\r\n <span class=\"spacer\"></span>\r\n <button (click)=\"edit=undefined\" mat-button>\r\n close\r\n </button>\r\n <button mat-raised-button [disabled]=\"!edit.expression ||!edit.message\"\r\n (click)=\"saveVariable($event)\" color=\"accent\">\r\n Save Validation\r\n </button>\r\n </mat-toolbar>\r\n <ng-container *ngIf=\"edit && !!showVariables; then variables\"></ng-container>\r\n</mat-card>\r\n\r\n\r\n\r\n\r\n<ng-template #validatorEditor>\r\n <div class=\"tree-instructions\">\r\n <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n The expression is checked on value change. The message shows if it fails.\r\n <br>\r\n You can observe inputs for changes to re-evaluate the expression.\r\n </span>\r\n </div>\r\n <mat-list *ngIf=\"edit\">\r\n\r\n <mat-form-field style=\"margin-bottom: 16px;\" (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n <mat-label >Validation Message</mat-label>\r\n <textarea matInput #textarea [value]=\"edit.message\"\r\n (input)=\"onTextChange($event,'message')\"\r\n placeholder=\"\r\n Enter message\r\n \"></textarea>\r\n\r\n <mat-hint>\r\n The message to display when the validation fails\r\n </mat-hint>\r\n\r\n </mat-form-field>\r\n\r\n\r\n\r\n\r\n <mat-form-field (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n <mat-label >Expression</mat-label>\r\n <textarea matInput #textarea \r\n (input)=\"onTextChange($event,'expression')\"\r\n [value]=\"edit.expression\" placeholder=\"\r\n enter expression\r\n \"></textarea>\r\n\r\n <mat-hint>\r\n The expression to evaluate the validation\r\n </mat-hint>\r\n\r\n </mat-form-field>\r\n <mat-toolbar>\r\n <mat-slide-toggle (click)=\"$event.stopPropagation();\" name=\"CanOveride\" ngDefaultControl\r\n (change)=\"edit.canOverride = $event.checked\" [checked]=\"edit.canOverride\">\r\n <span style=\"margin-left: 5px;\"> Users can override this validation</span>\r\n\r\n </mat-slide-toggle>\r\n </mat-toolbar>\r\n <label >\r\n Observe inputs for changes\r\n </label>\r\n <mat-chip-listbox aria-label=\"Chip select options\">\r\n @for(input of edit.inputsObservedForChanges;track input){\r\n <mat-chip>input\r\n <button (click)=\"removeObserved($event,input)\" matChipRemove [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <mat-chip (click)=\"addVariable($event)\" color=\"primary\">\r\n Variable\r\n <mat-icon matChipTrailingIcon>\r\n add\r\n </mat-icon>\r\n </mat-chip>\r\n </mat-chip-listbox>\r\n\r\n <br>\r\n <mat-divider></mat-divider>\r\n\r\n\r\n </mat-list>\r\n</ng-template>\r\n\r\n<ng-template #variables>\r\n\r\n <section style=\"max-height: 360px; overflow-y: auto\">\r\n <lib-form-input-selector (change)=\"selectInput($event)\" [formInputs]=\"formInputs\">\r\n\r\n </lib-form-input-selector>\r\n\r\n <div class=\"contentBackground\" *ngIf=\"formInputs.length === 0\">\r\n <span style=\"\r\n display: block;\r\n text-align: center;\r\n font-style: italic;\r\n padding: 16px;\r\n \">No form inputs</span>\r\n </div>\r\n </section>\r\n <mat-toolbar>\r\n <span class=\"spacer\"></span>\r\n <button (click)=\"showVariables = !showVariables\" mat-flat-button>\r\n Close\r\n <mat-icon>\r\n close\r\n </mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n</ng-template>\r\n"],"names":["uuidv4","i13"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngx-t-forms-validators-config.component-Dt5oXQcY.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/validators-config/validators-config.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/validators-config/validators-config.component.html"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Optional, Output, Self } from '@angular/core';\r\nimport { MenuCloseReason } from '@angular/material/menu';\r\n\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport { ElementTypes, FormControlCustomValidatorsInterface, IMultiple } from 'ngx-t-forms-types';\r\nimport { FormColumnInputs } from 'ngx-t-forms-types';\r\nimport { getInputIllustration } from '../../../../shared/functions/getInputIllustration';\r\n\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormInputSelectorComponent } from '../form-input-selector/form-input-selector.component';\r\n\r\nimport { FormsModule, NgControl } from '@angular/forms';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\n\r\n@Component({\r\n selector: 'app-validators-config',\r\n templateUrl: './validators-config.component.html',\r\n styleUrls: ['./validators-config.component.scss'],\r\n standalone: true,\r\n imports:[\r\n MatModulesModule,\r\n CommonModule,\r\n FormInputSelectorComponent,\r\n FormsModule\r\n ],\r\n providers: [{ provide: MatFormFieldControl, useExisting: ValidatorsConfigComponent}],\r\n})\r\nexport class ValidatorsConfigComponent implements OnInit,MatFormFieldControl<FormControlCustomValidatorsInterface []> {\r\n \r\n\r\n static nextId = 0;\r\n stateChanges = new Subject<void>();\r\n \r\n @HostBinding() id = `app-validators-config-${ValidatorsConfigComponent.nextId++}`;\r\n \r\n placeholder: string = ''\r\n constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,) { }\r\n focused: boolean = false;\r\n get empty() {\r\n return !this.value\r\n }\r\n get shouldLabelFloat() {\r\n return this.focused || !this.empty;\r\n }\r\n required: boolean = false;\r\n disabled: boolean = false;\r\nget errorState(): boolean {\r\n const hasError = !!this.ngControl?.control?.errors || (this.errors||[]).length > 0 && this.touched\r\n return !this.value && !!this.required || hasError\r\n }\r\n \r\n controlType?: string | undefined;\r\n autofilled?: boolean | undefined;\r\n userAriaDescribedBy?: string | undefined;\r\n disableAutomaticLabeling?: boolean | undefined;\r\n setDescribedByIds(ids: string[]) {\r\n // Ensure the component view is initialized\r\n if (this._elementRef && this._elementRef.nativeElement) {\r\n const controlElement = this._elementRef.nativeElement.querySelector('.app-validators-config');\r\n // Check if the controlElement exists before attempting to set its attribute\r\n if (controlElement) {\r\n controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n }\r\n }\r\n }\r\n onContainerClick(event: MouseEvent): void {\r\n this.markAsTouched();\r\n this.stateChanges.next();\r\n }\r\n @Input() errors:IConfigElementError[] |undefined = [];\r\n touched: boolean = false;\r\n onTouched = () => {};\r\n markAsTouched() {\r\n console.log('markAsTouched') \r\n if (!this.touched) {\r\n this.onTouched();\r\n this.touched = true;\r\n }\r\n } \r\n \r\n @Input() mapToData:FormColumnInputs | undefined = undefined;\r\n @Input() value!: (FormControlCustomValidatorsInterface )[];\r\n @Input() formInputs: Array<FormColumnInputs> = []\r\n @Output() valueChanged = new EventEmitter<any>();\r\n\r\n\r\n ngOnInit() {}\r\n\r\n edit:FormControlCustomValidatorsInterface | undefined\r\n menuClosed(event:MenuCloseReason){\r\n\r\n if (this.edit) {\r\n const editIndex = this.value.findIndex((item) => {\r\n if (typeof item === 'string') {\r\n return false;\r\n }\r\n return item.id === this.edit?.id;\r\n });\r\n\r\n if (editIndex !== -1) {\r\n this.value[editIndex] = this.edit;\r\n } \r\n this.valueChanged.emit([...this.value])\r\n\r\n\r\n }\r\n\r\n this.edit = undefined\r\n }\r\n showVariables :boolean = false\r\n editV(validator:string | FormControlCustomValidatorsInterface){\r\n if(this.edit?.id === (validator as FormControlCustomValidatorsInterface).id){\r\n this.edit = undefined\r\n return\r\n }\r\n this.edit = validator as any\r\n }\r\n remove(validator:FormControlCustomValidatorsInterface|string){\r\n const indexOfV = this.value.findIndex((item) => {\r\n if (typeof item === 'string') {\r\n return item === validator;\r\n }\r\n return item.id === (validator as FormControlCustomValidatorsInterface).id;\r\n }\r\n )\r\n\r\n\r\n this.value = [...this.value].filter((item,i)=>indexOfV !== i)\r\n this.valueChanged.emit([...this.value])\r\n\r\n }\r\n search: string = '';\r\n\r\n getInputIcon(element: ElementTypes) {\r\n\r\n return getInputIllustration(element)\r\n }\r\n \r\n selectInput(inputId: string) {\r\n const input = this.formInputs.find((input) => input.id === inputId)\r\n if(!input){\r\n return\r\n }\r\n if(input?.multipleInputInEditId){\r\n throw new Error('multipleInputInEditId is not supported')\r\n }\r\n if(!!this.edit){\r\n this.edit.expression = (this.edit?.expression || '' ).concat(input?.formControlName || '')\r\n if(!this.edit.inputsObservedForChanges.find((i)=>i.inputId === (input?.originalId || input?.id))){\r\n this.edit.inputsObservedForChanges.push({\r\n inputId: input?.originalId || input?.id,\r\n variable: input?.formControlName\r\n })\r\n }\r\n \r\n }\r\n \r\n\r\n this.showVariables = false\r\n\r\n }\r\n\r\n addVariable(event:any){\r\n this.showVariables = true\r\n event.stopPropagation()\r\n event.preventDefault()\r\n\r\n }\r\n getMultipleFormInputs(input: IMultiple) {\r\n if (\r\n input.element === ElementTypes.MultipleInput&&\r\n this.mapToData?.multipleInputInEditId === input.id\r\n ) {\r\n return input.formInputs;\r\n }\r\n return [];\r\n }\r\n returnExpression(){\r\n return this.edit?.expression.replace(/(word)/g, '<span style=\\'color: blue\\'>$1</span>')\r\n }\r\n addValidator(){\r\n this.edit = {\r\n message: '',\r\n expression: '',\r\n canOverride: false,\r\n inputsObservedForChanges: []\r\n } as any\r\n }\r\n\r\n onTextChange(event:Event,key:string){\r\n if(!this.edit) {\r\n this.edit = {} as any\r\n }\r\n (this.edit as any)[key] = (event.target as HTMLInputElement).value\r\n }\r\n saveVariable(event:any){\r\n console.log(this.edit)\r\n if(!this.edit) return;\r\n const id = uuidv4()\r\n const val = {...this.edit, id}\r\n this.value = [...this.value, val]\r\n this.valueChanged.emit([...this.value])\r\n this.edit = undefined\r\n \r\n \r\n\r\n\r\n \r\n }\r\n removeObserved(event:any,item:{ inputId: string; variable: string; }){\r\n const i = this.edit?.inputsObservedForChanges.findIndex((i:any)=>i === item)\r\n if(i !== undefined && i !== -1 && this.edit){\r\n this.edit?.inputsObservedForChanges.splice(i, 1);\r\n this.edit.expression = this.edit?.expression.replace(new RegExp(`\\\\b${item}\\\\b`, 'g'), '')\r\n\r\n }\r\n\r\n event.stopPropagation()\r\n event.preventDefault()\r\n }\r\n isFormControlCustomValidator(validator: string |FormControlCustomValidatorsInterface ){\r\n if(typeof validator == 'string'){\r\n return validator\r\n }\r\n return validator.message\r\n\r\n }\r\n}\r\n\r\n\r\n\r\n","<div class=\"tree-instructions\">\r\n <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n Custom validators are functions that take a form control as an argument and return an object of errors if the\r\n validation fails.\r\n </span>\r\n</div>\r\n\r\n<mat-list>\r\n<h5>\r\n Custom Validators\r\n</h5>\r\n <mat-chip-listbox aria-label=\"Chip select options\">\r\n @for (validator of value; track $index) {\r\n <mat-chip-option\r\n style=\"height: fit-content;padding: 8px;\"\r\n [selected]=\"edit?.id === validator.id\"\r\n (click)=\"editV(validator)\"> \r\n <span style=\"white-space: normal;\">\r\n {{isFormControlCustomValidator(validator) | titlecase}}\r\n </span>\r\n \r\n <button *ngIf=\"this.edit?.id !== validator.id\" (click)=\"remove(validator)\" matChipRemove \r\n [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n <mat-icon *ngIf=\"this.edit?.id === validator.id\" matChipTrailingIcon>\r\n check_circle\r\n </mat-icon>\r\n \r\n \r\n </mat-chip-option>\r\n }\r\n <mat-chip-option\r\n matTooltip=\"Add a new custom validator\"\r\n selectable=\"false\"\r\n style=\"cursor: pointer !important;\"\r\n highlighted=\"true\" color=\"accent\" (click)=\"addValidator()\" *ngIf=\"!edit\">\r\n <span >\r\n\r\n </span>\r\n Add validator\r\n <mat-icon matChipTrailingIcon >add</mat-icon>\r\n\r\n \r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n\r\n \r\n \r\n\r\n\r\n</mat-list>\r\n<mat-card style=\"padding: 8px;background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"\r\n *ngIf=\"edit\">\r\n <ng-container *ngIf=\"edit && !showVariables; then validatorEditor\"></ng-container>\r\n <mat-toolbar *ngIf=\"!showVariables\" >\r\n <span class=\"spacer\"></span>\r\n <button (click)=\"edit=undefined\" mat-button>\r\n close\r\n </button>\r\n <button mat-raised-button [disabled]=\"!edit.expression ||!edit.message\"\r\n (click)=\"saveVariable($event)\" color=\"accent\">\r\n Save Validation\r\n </button>\r\n </mat-toolbar>\r\n <ng-container *ngIf=\"edit && !!showVariables; then variables\"></ng-container>\r\n</mat-card>\r\n\r\n\r\n\r\n\r\n<ng-template #validatorEditor>\r\n <div class=\"tree-instructions\">\r\n <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n <span>\r\n The expression is checked on value change. The message shows if it fails.\r\n <br>\r\n You can observe inputs for changes to re-evaluate the expression.\r\n </span>\r\n </div>\r\n <mat-list *ngIf=\"edit\">\r\n\r\n <mat-form-field style=\"margin-bottom: 16px;\" (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n <mat-label >Validation Message</mat-label>\r\n <textarea matInput #textarea [value]=\"edit.message\"\r\n (input)=\"onTextChange($event,'message')\"\r\n placeholder=\"\r\n Enter message\r\n \"></textarea>\r\n\r\n <mat-hint>\r\n The message to display when the validation fails\r\n </mat-hint>\r\n\r\n </mat-form-field>\r\n\r\n\r\n\r\n\r\n <mat-form-field (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n <mat-label >Expression</mat-label>\r\n <textarea matInput #textarea \r\n (input)=\"onTextChange($event,'expression')\"\r\n [value]=\"edit.expression\" placeholder=\"\r\n enter expression\r\n \"></textarea>\r\n\r\n <mat-hint>\r\n The expression to evaluate the validation\r\n </mat-hint>\r\n\r\n </mat-form-field>\r\n <mat-toolbar>\r\n <mat-slide-toggle (click)=\"$event.stopPropagation();\" name=\"CanOveride\" ngDefaultControl\r\n (change)=\"edit.canOverride = $event.checked\" [checked]=\"edit.canOverride\">\r\n <span style=\"margin-left: 5px;\"> Users can override this validation</span>\r\n\r\n </mat-slide-toggle>\r\n </mat-toolbar>\r\n <label >\r\n Observe inputs for changes\r\n </label>\r\n <mat-chip-listbox aria-label=\"Chip select options\">\r\n @for(input of edit.inputsObservedForChanges;track input){\r\n <mat-chip>input\r\n <button (click)=\"removeObserved($event,input)\" matChipRemove [attr.aria-label]=\"'remove ' \">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <mat-chip (click)=\"addVariable($event)\" color=\"primary\">\r\n Variable\r\n <mat-icon matChipTrailingIcon>\r\n add\r\n </mat-icon>\r\n </mat-chip>\r\n </mat-chip-listbox>\r\n\r\n <br>\r\n <mat-divider></mat-divider>\r\n\r\n\r\n </mat-list>\r\n</ng-template>\r\n\r\n<ng-template #variables>\r\n\r\n <section style=\"max-height: 360px; overflow-y: auto\">\r\n <lib-form-input-selector (change)=\"selectInput($event)\" [formInputs]=\"formInputs\">\r\n\r\n </lib-form-input-selector>\r\n\r\n <div class=\"contentBackground\" *ngIf=\"formInputs.length === 0\">\r\n <span style=\"\r\n display: block;\r\n text-align: center;\r\n font-style: italic;\r\n padding: 16px;\r\n \">No form inputs</span>\r\n </div>\r\n </section>\r\n <mat-toolbar>\r\n <span class=\"spacer\"></span>\r\n <button (click)=\"showVariables = !showVariables\" mat-flat-button>\r\n Close\r\n <mat-icon>\r\n close\r\n </mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n</ng-template>\r\n"],"names":["uuidv4","i13"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;MA+Ba,yBAAyB,CAAA;aAG5B,IAAM,CAAA,MAAA,GAAG,CAAH,CAAK;IAMlB,WAAuC,CAAA,SAAoB,EAAU,WAAoC,EAAA;QAAlE,IAAS,CAAA,SAAA,GAAT,SAAS;QAAqB,IAAW,CAAA,WAAA,GAAX,WAAW;AALhF,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAAQ;AAEnB,QAAA,IAAA,CAAA,EAAE,GAAG,CAAyB,sBAAA,EAAA,yBAAyB,CAAC,MAAM,EAAE,EAAE;QAEjF,IAAW,CAAA,WAAA,GAAW,EAAE;QAExB,IAAO,CAAA,OAAA,GAAY,KAAK;QAOxB,IAAQ,CAAA,QAAA,GAAY,KAAK;QACzB,IAAQ,CAAA,QAAA,GAAY,KAAK;QAwBd,IAAM,CAAA,MAAA,GAAoC,EAAE;QACvD,IAAO,CAAA,OAAA,GAAY,KAAK;AACxB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAK,GAAG;QASZ,IAAS,CAAA,SAAA,GAAgC,SAAS;QAElD,IAAU,CAAA,UAAA,GAA4B,EAAE;AACvC,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAO;QA0BhD,IAAa,CAAA,aAAA,GAAY,KAAK;QAsB9B,IAAM,CAAA,MAAA,GAAW,EAAE;;AA7FlB,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,OAAO,CAAC,IAAI,CAAC,KAAK;;AAEpB,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK;;AAIvC,IAAA,IAAI,UAAU,GAAA;QACT,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,IAAE,EAAE,EAAE,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO;AAClG,QAAA,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAK,QAAQ;;AAOpD,IAAA,iBAAiB,CAAC,GAAa,EAAA;;QAE7B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE;AACtD,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,wBAAwB,CAAC;;YAE7F,IAAI,cAAc,EAAE;AAClB,gBAAA,cAAc,CAAC,YAAY,CAAC,kBAAkB,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;;;AAIpE,IAAA,gBAAgB,CAAC,KAAiB,EAAA;QAChC,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;IAK1B,aAAa,GAAA;AACX,QAAA,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC;AAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;AAUxB,IAAA,QAAQ;AAGR,IAAA,UAAU,CAAC,KAAqB,EAAA;AAE9B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAI;AAC9C,gBAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC5B,oBAAA,OAAO,KAAK;;gBAEd,OAAO,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,EAAE,EAAE;AAClC,aAAC,CAAC;AAEF,YAAA,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;gBACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI;;AAEnC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;;AAK1C,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;;AAGtB,IAAA,KAAK,CAAC,SAAuD,EAAA;QAC3D,IAAG,IAAI,CAAC,IAAI,EAAE,EAAE,KAAM,SAAkD,CAAC,EAAE,EAAC;AAC1E,YAAA,IAAI,CAAC,IAAI,GAAG,SAAS;YACrB;;AAEF,QAAA,IAAI,CAAC,IAAI,GAAG,SAAgB;;AAE9B,IAAA,MAAM,CAAC,SAAqD,EAAA;QAC1D,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAI;AAC7C,YAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;gBAC5B,OAAO,IAAI,KAAK,SAAS;;AAE3B,YAAA,OAAO,IAAI,CAAC,EAAE,KAAM,SAAkD,CAAC,EAAE;AAC3E,SAAC,CACA;QAGD,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAC,CAAC,KAAG,QAAQ,KAAK,CAAC,CAAC;AAC7D,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;;AAKzC,IAAA,YAAY,CAAC,OAAqB,EAAA;AAEhC,QAAA,OAAO,oBAAoB,CAAC,OAAO,CAAC;;AAGtC,IAAA,WAAW,CAAC,OAAe,EAAA;AACzB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC;QACnE,IAAG,CAAC,KAAK,EAAC;YACR;;AAEF,QAAA,IAAG,KAAK,EAAE,qBAAqB,EAAC;AAC9B,YAAA,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC;;AAE3D,QAAA,IAAG,CAAC,CAAC,IAAI,CAAC,IAAI,EAAC;YACb,IAAI,CAAC,IAAI,CAAC,UAAU,GAAI,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,IAAI,EAAE,EAAG,MAAM,CAAC,KAAK,EAAE,eAAe,IAAI,EAAE,CAAC;AAC3F,YAAA,IAAG,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC,KAAG,CAAC,CAAC,OAAO,MAAM,KAAK,EAAE,UAAU,IAAI,KAAK,EAAE,EAAE,CAAC,CAAC,EAAC;AAC/F,gBAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC;AACtC,oBAAA,OAAO,EAAE,KAAK,EAAE,UAAU,IAAI,KAAK,EAAE,EAAE;oBACvC,QAAQ,EAAE,KAAK,EAAE;AAClB,iBAAA,CAAC;;;AAMN,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAI5B,IAAA,WAAW,CAAC,KAAS,EAAA;AACrB,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI;QACzB,KAAK,CAAC,eAAe,EAAE;QACvB,KAAK,CAAC,cAAc,EAAE;;AAGtB,IAAA,qBAAqB,CAAC,KAAgB,EAAA;AACpC,QAAA,IACE,KAAK,CAAC,OAAO,KAAK,YAAY,CAAC,aAAa;YAC5C,IAAI,CAAC,SAAS,EAAE,qBAAqB,KAAK,KAAK,CAAC,EAAE,EAClD;YACA,OAAO,KAAK,CAAC,UAAU;;AAEzB,QAAA,OAAO,EAAE;;IAEX,gBAAgB,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,SAAS,EAAE,uCAAuC,CAAC;;IAE1F,YAAY,GAAA;QACV,IAAI,CAAC,IAAI,GAAG;AACV,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,UAAU,EAAE,EAAE;AACd,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,wBAAwB,EAAE;SACpB;;IAGV,YAAY,CAAC,KAAW,EAAC,GAAU,EAAA;AACjC,QAAA,IAAG,CAAC,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,GAAG,EAAS;;QAEtB,IAAI,CAAC,IAAY,CAAC,GAAG,CAAC,GAAK,KAAK,CAAC,MAA2B,CAAC,KAAK;;AAErE,IAAA,YAAY,CAAC,KAAS,EAAA;AAClB,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACtB,IAAG,CAAC,IAAI,CAAC,IAAI;YAAE;AACb,QAAA,MAAM,EAAE,GAAGA,EAAM,EAAE;QACnB,MAAM,GAAG,GAAG,EAAC,GAAG,IAAI,CAAC,IAAI,EAAE,EAAE,EAAC;QAC9B,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC;AACjC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AACvC,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;;IAO3B,cAAc,CAAC,KAAS,EAAC,IAA2C,EAAA;AAClE,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,wBAAwB,CAAC,SAAS,CAAC,CAAC,CAAK,KAAG,CAAC,KAAK,IAAI,CAAC;AAC5E,QAAA,IAAG,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,EAAC;YAC1C,IAAI,CAAC,IAAI,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,CAAA,GAAA,EAAM,IAAI,CAAA,GAAA,CAAK,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC;;QAI5F,KAAK,CAAC,eAAe,EAAE;QACvB,KAAK,CAAC,cAAc,EAAE;;AAExB,IAAA,4BAA4B,CAAC,SAAuD,EAAA;AACnF,QAAA,IAAG,OAAO,SAAS,IAAI,QAAQ,EAAC;AAC7B,YAAA,OAAO,SAAS;;QAEnB,OAAO,SAAS,CAAC,OAAO;;8GArMd,yBAAyB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,IAAA,EAAA,SAAA,EAAA,EAAA,EAAA,SAAA,EAFzB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,yBAAyB,EAAC,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7BtF,28KA4KA,EDpJI,MAAA,EAAA,CAAA,0SAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,gBAAgB,8+FAChB,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,0BAA0B,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAC1B,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIF,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAbrC,SAAS;+BACE,uBAAuB,EAAA,UAAA,EAGrB,IAAI,EACR,OAAA,EAAA;wBACN,gBAAgB;wBAChB,YAAY;wBACZ,0BAA0B;wBAC1B;qBACD,EACU,SAAA,EAAA,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAA2B,yBAAA,EAAC,CAAC,EAAA,QAAA,EAAA,28KAAA,EAAA,MAAA,EAAA,CAAA,0SAAA,CAAA,EAAA;;0BAWtE;;0BAAY;kEAHV,EAAE,EAAA,CAAA;sBAAhB;gBAoCU,MAAM,EAAA,CAAA;sBAAd;gBAWK,SAAS,EAAA,CAAA;sBAAjB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACS,YAAY,EAAA,CAAA;sBAArB;;;;;"}
|
package/fesm2022/ngx-t-forms.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { x as DialogTemplateComponent, k as FORM_ACTIONS_TOKEN, l as FORM_CONFIG_TOKEN, n as FORM_INPUTS_TOKEN, m as FORM_SLIDES_TOKEN, s as FormBuilderComponent, c as FormTowerControllerService, r as FormsComponent, q as MSCOA_TREE_PROVIDER, o as MULTIPLE_FORM_INPUT_TOKEN, u as MscoaFormInputComponent, N as NGX_T_FORMS_CONFIG_TOKEN, h as NgxTFormsComponent, f as NgxTFormsService, P as PropertyAccessError, y as SignatureInputElementComponent, S as SyncEditorComponent, T as TDynamicDataEditComponent, b as TDynamicDataViewComponent, w as TFormInputComponent, U as UTILS_OBJECT_TOKEN, v as UserFormStepperComponent, a as assignDeepPropertyToObject, j as formGenerator, B as getUrl, i as initFormConfigToV2, p as provideNgxTForms, z as returnDeepProperty, A as safeReturnDeepProperty, C as textIconsForUserHints } from './ngx-t-forms-ngx-t-forms-
|
|
1
|
+
export { x as DialogTemplateComponent, k as FORM_ACTIONS_TOKEN, l as FORM_CONFIG_TOKEN, n as FORM_INPUTS_TOKEN, m as FORM_SLIDES_TOKEN, s as FormBuilderComponent, c as FormTowerControllerService, r as FormsComponent, q as MSCOA_TREE_PROVIDER, o as MULTIPLE_FORM_INPUT_TOKEN, u as MscoaFormInputComponent, N as NGX_T_FORMS_CONFIG_TOKEN, h as NgxTFormsComponent, f as NgxTFormsService, P as PropertyAccessError, y as SignatureInputElementComponent, S as SyncEditorComponent, T as TDynamicDataEditComponent, b as TDynamicDataViewComponent, w as TFormInputComponent, U as UTILS_OBJECT_TOKEN, v as UserFormStepperComponent, a as assignDeepPropertyToObject, j as formGenerator, B as getUrl, i as initFormConfigToV2, p as provideNgxTForms, z as returnDeepProperty, A as safeReturnDeepProperty, C as textIconsForUserHints } from './ngx-t-forms-ngx-t-forms-BiFqmAIA.mjs';
|
|
2
2
|
//# sourceMappingURL=ngx-t-forms.mjs.map
|
|
@@ -3,7 +3,7 @@ import { Observable, Subject } from 'rxjs';
|
|
|
3
3
|
import { StepperSelectionEvent, StepState } from '@angular/cdk/stepper';
|
|
4
4
|
import { MatStepper } from '@angular/material/stepper';
|
|
5
5
|
import { FormTowerControllerService } from '../../../../services/core/t-form-tower-controller/form-tower-controller.service';
|
|
6
|
-
import { FormBuilderFunctions, FormColumnInputs, IMultipleInputCal } from 'ngx-t-forms-types';
|
|
6
|
+
import { FormBuilderFunctions, FormColumnInputs, IMultipleInputCal, ITowerFormSteps } from 'ngx-t-forms-types';
|
|
7
7
|
import { CdkDragDrop } from '@angular/cdk/drag-drop';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
export declare class FormSectionStepperComponent extends FormTowerControllerService implements OnInit {
|
|
@@ -35,97 +35,7 @@ export declare class FormSectionStepperComponent extends FormTowerControllerServ
|
|
|
35
35
|
setMatActiveStepper: (index: number) => number;
|
|
36
36
|
mouseOverSection: string | null;
|
|
37
37
|
handleInput: (event: Event, sectionId: string) => void;
|
|
38
|
-
get selectFormStepsComputed():
|
|
39
|
-
columns: {
|
|
40
|
-
inputConfigErrors: {
|
|
41
|
-
key: string;
|
|
42
|
-
message: string;
|
|
43
|
-
}[];
|
|
44
|
-
label: string;
|
|
45
|
-
formControlName: string;
|
|
46
|
-
readonly?: boolean;
|
|
47
|
-
id: string;
|
|
48
|
-
sectionId: string;
|
|
49
|
-
pipe?: {
|
|
50
|
-
pipeType: import("ngx-t-forms-types").InputPipeTypes;
|
|
51
|
-
param: string;
|
|
52
|
-
};
|
|
53
|
-
hintLabel?: string;
|
|
54
|
-
temporaryHint?: string;
|
|
55
|
-
valueUpdatedAt?: Date;
|
|
56
|
-
status?: Record<string, string>;
|
|
57
|
-
min?: number | string | Date | import("ngx-t-forms-types/dist/interfaces/formInput/BasicFormInputInterface").MaxMinCustomScripts;
|
|
58
|
-
max?: number | string | Date | import("ngx-t-forms-types/dist/interfaces/formInput/BasicFormInputInterface").MaxMinCustomScripts;
|
|
59
|
-
tourContent?: string;
|
|
60
|
-
viewType?: import("ngx-t-forms-types/dist/interfaces/formInput/BasicFormInputInterface").InputViewTypes;
|
|
61
|
-
maxLength?: number;
|
|
62
|
-
minLength?: number;
|
|
63
|
-
placeholder?: string;
|
|
64
|
-
pattern?: string;
|
|
65
|
-
spellcheck?: boolean;
|
|
66
|
-
autocapitalize?: import("ngx-t-forms-types").AutocapitalizeOptions;
|
|
67
|
-
autocomplete?: import("ngx-t-forms-types").AutocompleteOptions;
|
|
68
|
-
multipleInputInEditId?: string;
|
|
69
|
-
suffixText?: string;
|
|
70
|
-
prefixText?: string;
|
|
71
|
-
prefixIcon?: string;
|
|
72
|
-
suffixIcon?: string;
|
|
73
|
-
disabled?: boolean;
|
|
74
|
-
script?: Record<string, unknown>;
|
|
75
|
-
conditionalInputConfig?: import("ngx-t-forms-types/dist/interfaces/formInput/ConditionalInputRule").ConditionalInputRule[];
|
|
76
|
-
calculatedFieldRules?: import("ngx-t-forms-types").CalculatedFieldRules;
|
|
77
|
-
value?: number | string | boolean | Date | File | {
|
|
78
|
-
[key: string]: any;
|
|
79
|
-
} | Array<{
|
|
80
|
-
[key: string]: any;
|
|
81
|
-
}>;
|
|
82
|
-
element: import("ngx-t-forms-types").ElementTypes;
|
|
83
|
-
dataType: import("ngx-t-forms-types").InputDataTypes;
|
|
84
|
-
appearance: import("@angular/material/form-field").MatFormFieldAppearance;
|
|
85
|
-
type?: import("ngx-t-forms-types").InputTypes;
|
|
86
|
-
required: boolean;
|
|
87
|
-
colSize: number;
|
|
88
|
-
onlySetTempErrorOnTouch: boolean;
|
|
89
|
-
isCalculatedField: boolean;
|
|
90
|
-
matOptions?: import("ngx-t-forms-types").MatDataOptionsInterface;
|
|
91
|
-
validators: Array<import("ngx-t-forms-types").FormControlCustomValidatorsInterface | string>;
|
|
92
|
-
selectUpto?: number;
|
|
93
|
-
tableConfig?: import("ngx-t-forms-types").TableConfigurationsInterface;
|
|
94
|
-
fileType?: import("ngx-t-forms-types").InputFileType;
|
|
95
|
-
singleSelect?: boolean;
|
|
96
|
-
accept?: string;
|
|
97
|
-
endDateControl?: string;
|
|
98
|
-
startDateControl?: string;
|
|
99
|
-
startMinDate?: Date;
|
|
100
|
-
endMaxDate?: Date;
|
|
101
|
-
startMaxDate?: Date;
|
|
102
|
-
endMinDate?: Date;
|
|
103
|
-
rows?: number;
|
|
104
|
-
wrap?: "hard" | "soft";
|
|
105
|
-
labelPosition?: import("ngx-t-forms-types/dist/interfaces/formInput/ToggleInputInterface").LabelPosition;
|
|
106
|
-
matrixTableConfig?: {
|
|
107
|
-
dataSource: string;
|
|
108
|
-
};
|
|
109
|
-
handleLabel: string;
|
|
110
|
-
formIsOpen?: boolean;
|
|
111
|
-
originalId?: string;
|
|
112
|
-
showAsLabel?: boolean;
|
|
113
|
-
formInputs?: Array<FormColumnInputs>;
|
|
114
|
-
calculateListFunctions: Array<IMultipleInputCal>;
|
|
115
|
-
groupBy?: string[];
|
|
116
|
-
mscoaConfig: import("ngx-t-forms-types").IMscoaInputConfig;
|
|
117
|
-
richTextEditorLibrary: import("ngx-t-forms-types/dist/interfaces/formInput/RichTextEditorInput").RichTextEditorType;
|
|
118
|
-
}[];
|
|
119
|
-
label: string;
|
|
120
|
-
sectionId: string;
|
|
121
|
-
sectionForm: import("@angular/forms").FormGroup<any> | null;
|
|
122
|
-
sectionIsInvalid: boolean | undefined;
|
|
123
|
-
sectionIsSeen: boolean | undefined;
|
|
124
|
-
sectionFormErrorMessage: string;
|
|
125
|
-
activeSectionHasTour: boolean;
|
|
126
|
-
tourOptions: (string | undefined)[];
|
|
127
|
-
isActive: boolean | undefined;
|
|
128
|
-
}[];
|
|
38
|
+
get selectFormStepsComputed(): ITowerFormSteps[];
|
|
129
39
|
overId: string | null;
|
|
130
40
|
countdownSeconds: {
|
|
131
41
|
[key: string]: {
|
package/lib/components/form-builder/elements/forms-builder-menu/forms-builder-menu.component.d.ts
CHANGED
|
@@ -4,10 +4,20 @@ import { FormInterface } from 'ngx-t-forms-types';
|
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class FormsBuilderMenuComponent {
|
|
6
6
|
private store;
|
|
7
|
-
form
|
|
7
|
+
form$: import("rxjs").Observable<FormInterface | undefined>;
|
|
8
8
|
showJson: boolean;
|
|
9
9
|
constructor(store: FormsStoreService);
|
|
10
|
-
|
|
10
|
+
formCopy$: import("rxjs").Observable<string>;
|
|
11
|
+
readonly dialog: MatDialog;
|
|
12
|
+
openDialog(): void;
|
|
13
|
+
applyFormTemplate: (form: FormInterface) => void;
|
|
14
|
+
openFormSubmissionDialog(): void;
|
|
15
|
+
errors$: import("rxjs").Observable<{
|
|
16
|
+
key: string;
|
|
17
|
+
message: string;
|
|
18
|
+
}[]>;
|
|
19
|
+
configHasErrors$: import("rxjs").Observable<boolean>;
|
|
20
|
+
items$: import("rxjs").Observable<({
|
|
11
21
|
label: string;
|
|
12
22
|
icon: string;
|
|
13
23
|
hint: string;
|
|
@@ -20,16 +30,24 @@ export declare class FormsBuilderMenuComponent {
|
|
|
20
30
|
errors: boolean;
|
|
21
31
|
action: () => void;
|
|
22
32
|
})[]>;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
vm$: import("rxjs").Observable<{
|
|
34
|
+
items: ({
|
|
35
|
+
label: string;
|
|
36
|
+
icon: string;
|
|
37
|
+
hint: string;
|
|
38
|
+
action: () => void;
|
|
39
|
+
errors?: undefined;
|
|
40
|
+
} | {
|
|
41
|
+
label: string;
|
|
42
|
+
hint: string;
|
|
43
|
+
icon: string;
|
|
44
|
+
errors: boolean;
|
|
45
|
+
action: () => void;
|
|
46
|
+
})[];
|
|
47
|
+
form: FormInterface | undefined;
|
|
48
|
+
formCopy: string;
|
|
49
|
+
configHasErrors: boolean;
|
|
50
|
+
}>;
|
|
33
51
|
static ɵfac: i0.ɵɵFactoryDeclaration<FormsBuilderMenuComponent, never>;
|
|
34
52
|
static ɵcmp: i0.ɵɵComponentDeclaration<FormsBuilderMenuComponent, "app-forms-builder-menu", never, {}, {}, never, never, true, never>;
|
|
35
53
|
}
|